Sie sind auf Seite 1von 43

Build Mobile Apps with Ionic and Firebase

A starters guide with real examples


Fu Cheng
This book is for sale at http://leanpub.com/build-mobile-apps-with-ionic-and-firebase
This version was published on 2015-12-03

This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing
process. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools and
many iterations to get reader feedback, pivot until you have the right book and build traction once
you do.
2015 Fu Cheng

Also By Fu Cheng
Lodash Cookbook
A Practical Guide for Java 8 Lambdas and Streams

To my wife Andrea and daughter Olivia

Contents
1. Introduction . . . . . . .
1.1 Hybrid mobile apps
1.2 Apache Cordova . .
1.3 Ionic framework . .
1.4 Firebase . . . . . . .
1.5 About this book . .
1.6 Source code . . . .

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

1
1
2
2
3
3
3

2. Get started . . . . . . . . . . . . . . . . .
2.1 Prepare local environment . . . . .
2.1.1 iOS . . . . . . . . . . . . . .
2.1.2 Android . . . . . . . . . . . .
2.2 Create app skeleton . . . . . . . . .
2.2.1 Blank app . . . . . . . . . . .
2.2.2 Tabbed app . . . . . . . . . .
2.2.3 Sidemenu . . . . . . . . . . .
2.2.4 Maps . . . . . . . . . . . . .
2.3 Development . . . . . . . . . . . . .
2.3.1 Start local server . . . . . . .
2.3.2 Use Chrome for development
2.4 Test and run . . . . . . . . . . . . .
2.4.1 iOS . . . . . . . . . . . . . .
2.4.2 Android . . . . . . . . . . . .
2.5 Ionic Lab . . . . . . . . . . . . . . .
2.6 Ionic Creator . . . . . . . . . . . . .

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

4
4
4
5
6
6
6
9
11
13
13
13
14
15
17
19
21

3. Hacker News app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .


3.1 Why Hacker News app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.2 User stories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

23
23
23

4. App skeleton code . . . . . . . . . .


4.1 Root directory . . . . . . . . . .
4.1.1 package.json . . . . . . .
4.1.2 bower.json and .bowerrc

24
25
25
26

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

CONTENTS

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

27
27
27
27
28
28
28
28
28
28
28
28
28
29
29
29

5. Share stories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

30

6. Publish . . . . . . . . . . . . . . . .
6.1 Icons & splash screens . . . . .
6.2 Deploy to device . . . . . . . .
6.3 View and share with Ionic View

.
.
.
.

32
32
33
34

7. Thank you . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

37

4.2
4.3
4.4
4.5
4.6
4.7
4.8

4.1.3 config.xml . .
4.1.4 gulpfile.js .
4.1.5 ionic.project
hooks . . . . . . . . .
node_modules . . . .
platforms . . . . . .
plugins . . . . . . . .
resources . . . . . .
scss . . . . . . . . .
www . . . . . . . . . .
4.8.1 index.html . .
4.8.2 lib . . . . . .
4.8.3 img . . . . . .
4.8.4 css . . . . . .
4.8.5 templates . .
4.8.6 js . . . . . . .

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

1. Introduction
A mobile app is a computer program designed to run on mobile devices such as smartphones and
tablet computers. With the prevalence of mobile devices, more and more mobile apps have been
created to satisfy all kinds of requirements. Table 1.1 shows statistics of major app stores.
Table 1.1. Statistics of major app stores

App store

Number of available apps

Downloads to date

App Store (iOS)


Google Play
Windows Store
BlackBerry World
Amazon Appstore

1.5 million
1.7 million
340,000+
240,000+
334,000+

100 billion
50 billion
4 billion

Prevalence of mobile apps also creates a great opportunity for application developers and software
companies. According to a report on March 2005,
Apple has said that its App Store generated $10 billion in revenue to developers last
year, while Google has said it has paid out $7 billion to app developers over the past 12
months.
The revenue of app stores is seen doubling by 2018. A lot of individuals and companies make
big money on the mobile apps market. A classic example is popular mobile game Flappy Bird.
Flappy Bird was developed by Vietnam-based developer Dong Nguyen. The developer claimed that
Flappy Bird was earning $50,000 a day from in-app advertisements as well as sales. This encourages
developers to create more mobile apps.

1.1 Hybrid mobile apps


Developing mobile apps is not an easy task. To build apps which can be distributed on various
app store markets, developers need to use specific programming languages, SDKs and tools, e.g.
Objective-C/Swift for iOS and Java for Android. The high learning curve for those SDKs creates a
burden for developers. Comparing to Objective-C/Swift or Java, web development skills, e.g. HTML,
https://en.wikipedia.org/wiki/Mobile_app
App store statistics is gathered from various sources: 1, 2, 3, 4, 5, 6 and may not be up to date.
http://recode.net/2015/03/30/sales-from-apple-and-google-app-stores-seen-doubling-by-2018-in-app-advertising-to-triple/
https://en.wikipedia.org/wiki/Flappy_Bird

Introduction

JavaScript and CSS are easier to learn. Building mobile apps with web development skills is made
possible by HTML5. This new type of mobile apps is called hybrid mobile apps. In hybrid mobile
apps, HTML, JavaScript and CSS code runs in an internal browser (WebView) that its wrapped in
native apps. JavaScript code can access native APIs through the wrapper. Apache Cordova is the
most popular open-source library to develop hybrid mobile apps.
Comparing to native apps, hybrid apps have their benefits and drawbacks. The major benefit is
that developers can use existing web development skills and use only one code base for different
platforms. By leveraging responsive web design techniques, hybrid apps can easily adapt to different
screen resolutions. The major drawback is the performance issues with hybrid apps. As the hybrid
app is actually running in an internal browser, the performance of hybrid apps cannot compete with
native apps. Certain types of apps, such as games or apps that rely on complex native functionalities,
cannot be built as hybrid apps.
Before making the decision of whether to go with native app or hybrid app, the development team
needs to understand the nature of the app. Hybrid apps are suitable for content-centric apps, such
as news readers, online forums or products showcasing. Another important factor to consider is
development teams skill sets.

1.2 Apache Cordova


Apache Cordova is a popular open-source framework to develop hybrid mobile apps. It originates
from PhoneGap created by Nitobi. Adobe acquired Nitobi in 2011 and provides commercial service
upon it. PhoneGap source code was contributed to Apache Software Foundation and new project
Apache Cordova was started based on that.
An Apache Cordova application is implemented as a web page. This web page can reference
JavaScript, CSS, images and other resources. WebView loads and runs this web page. A powerful
feature of Cordova is its plugin interface which allows JavaScript code running in web page to
communicate with native components. With the help of plugins, Cordova apps can access devices
accelerometer, camera, compass, contacts and more. There are 680 plugins currently available in
Cordovas plugin registry.
Apache Cordova is just a runtime for web apps. It can support any kinds of web pages. To create
mobile apps look like native apps, we need other UI frameworks to develop hybrid mobile apps.

1.3 Ionic framework


Ionic framework is a powerful tool to build hybrid mobile apps. Its open source and has nearly
https://en.wikipedia.org/wiki/HTML5
https://cordova.apache.org/
http://phonegap.com/
http://cordova.apache.org/plugins/
http://ionicframework.com/
https://github.com/driftyco/ionic

Introduction

20,000 stars on GitHub. Ionic is popular for following reasons:

Use Angular as the JavaScript framework.


Provide beautifully designed out-of-box UI components, e.g. lists, cards, modals and popups.
Leverage Apache Cordova as the runtime to communicate with native platform.
Perform great on mobile devices.

Ionic can help to build hybrid mobile apps with similar look and feel as native apps. Ionic framework
is the main topic of this book.

1.4 Firebase
Mobile apps usually need back-end service to work with front-end UI. This means that there should
be back-end code and servers to work with mobile apps. Firebase is a cloud service to power apps
back-end. Firebase can provide data storage and user authentication. After integrating mobile apps
with Firebase, we dont need to write our own back-end code or manage servers.
Firebase works very well with Ionic to eliminate the pain of maintaining our own back-end. This is
especially helpful for hybrid mobile apps developers with only front-end development skills. Frontend developers can use familiar JavaScript code to interact with Firebase.

1.5 About this book


This book is a complete guide about how to use Ionic framework and Firebase to build hybrid mobile
apps. The sample app we build in this book is a client of Hacker News. Features of this app include:

View top stories.


View comments of stories.
Add stories to favorites.
Share stories.

This book covers the whole cycle of hybrid mobile apps development. Its organized around
implementing above user stories. For each story, this book not only talks about how to implement
it, but also explain related Ionic and Firebase concepts in detail.
This book is for front-end developers with basic HTML, CSS and JavaScript skills. Basic understanding of Angular is also required as Angular is the JavaScript framework used in Ionic.

1.6 Source code


Source code is available on GitHub. The example app can also be viewed using Ionic View with ID
131c3395.
http://angularjs.org/
https://github.com/alexcheng1982/hacker-news-ionic

2. Get started
Before we can build Ionic apps, we need to set up local development environment first.

2.1 Prepare local environment


Install Node.js on local machine first. Then use npm to install Ionic command-line tools and Apache
Cordova.
Listing 1.1. Install Ionic and Apache Cordova

$ npm install -g cordova ionic

You may need to have system administrator privilege to install. For Linux and Mac OS X,
use sudo. For Windows, start a command-line window as administrator.

After installation of Ionic and Cordova, we can use Ionic CLI ionic to start developing Ionic apps.

2.1.1 iOS
Developing iOS apps with Ionic requires Mac OS X and Xcode. Install Xcode and Xcode command
line tools on Mac OS X. Open a terminal window and type command in Listing 1.2.
Listing 1.2. Check installation status of Xcode command line tools

$ xcode-select -p

If you see output like Listing 1.3, then command line tools have already been installed.
Listing 1.3 Output of installed Xcode command line tools

/Applications/Xcode.app/Contents/Developer

Otherwise type command in Listing 1.4 to install.


http://nodejs.org/
https://developer.apple.com/xcode/

Get started

Listing 1.4. Install Xcode command line tools

$ xcode-select --install

After installation finished, use xcode-select -p to verify.


To run iOS simulator using Ionic CLI, npm package ios-sim is required. Install ios-sim using
command in Listing 1.5.
Listing 1.5. Install ios-sim package

$ npm -g install ios-sim

2.1.2 Android
To develop Ionic apps for Android, Android SDK must be installed. Its recommended to install
Android Studio which provides a nice IDE and Android SDK tools. If you dont want to use Android
Studio, you can install stand-alone SDK tools.
Android API level 22 is required to run Ionic apps. Make sure required SDK platform is
installed.

Stand-alone SDK tools is just a ZIP file, unpack this file into a directory and its ready to use.
The downloaded SDK only contains basic SDK tools without any Android platform or third-party
libraries. You need to install the platform tools and at least one version of the Android platform.
Run android in tools directory to start Android SDK Manager to install platform tools and other
required libraries.
After installing Android SDK, add SDKs tools and platform-tools directories in your PATH
environment, so SDKs commands can be found by Ionic. Suppose that SDK tools is unpacked into
/Development/android-sdk, then add /Development/android-sdk/tools and /Development/androidsdk/platform-tools to PATH environment. For Android Studio, the Android SDK is installed into
directory /Users/<username>/Library/Android/sdk.
To modify PATH environment on Linux and Mac OS X, edit /.bash_profile file to update PATH.

http://developer.android.com/sdk/installing/index.html?pkg=studio
http://developer.android.com/sdk/installing/index.html?pkg=tools
https://developer.android.com/about/versions/android-5.1.html

Get started

Listing 1.6. Add Android SDK tools to PATH

1
2

export PATH=${PATH}:/Development/android-sdk/platform-tools \
:/Development/android-sdk/tools

To modify PATH environment on Windows,


1.
2.
3.
4.

Click Start menu, then right-click Computer and select Properties.


Click Advanced System Settings to open a dialog.
Click Environment Variables in the dialog and find PATH variable in the list then click Edit.
Append the path of tools and platform-tools directories to the end of PATH variable.

Its highly recommended to use Android Studio instead of stand-alone SDK tools. Standalone SDK tools is more likely to have configuration issues.

2.2 Create app skeleton


After local development environment is set up successfully, its time to create new Ionic apps. Ionic
provides four different types of application templates. We can choose one of these templates to create
the skeleton code of the app. Use ionic start to create apps. The first argument is name of the new
app, the second argument is the template name.

2.2.1 Blank app


This template blank only generates basic code for the app.
List 1.7. Use blank app template

$ ionic start blankApp blank

2.2.2 Tabbed app


This template tabs generates apps with a header at the top and tabs at the bottom, see Figure 2.1.

Get started

List 1.8. Use tabs app template

$ ionic start tabsApp tabs

Get started

Figure 2.1. App created using tabs template

Get started

2.2.3 Sidemenu
This template sidemenu generates apps with a side menu which opens itself when sliding, see Figure
2.2.
List 1.9. Use sidemenu app template

$ ionic start sidemenuApp sidemenu

10

Get started

Figure 2.2. App created using sidemenu template

Get started

11

2.2.4 Maps
This template maps generates apps with a map in the center. Its useful for geo-location related apps,
see Figure 2.3.
List 1.10. Use maps app template

$ ionic start mapsApp maps

12

Get started

Figure 2.3. App created using maps template

13

Get started

2.3 Development
If you want to use Sass, use following command to add Sass support.
Listing 1.11. Add Sass support

$ ionic setup sass

2.3.1 Start local server


To develop and test Ionic apps in your browser, use ionic serve to start a local test server. The
default port is 8100. Open your browser to http://localhost:8100/ and you should see the UI of
Ionic app. Ionic sets up livereload by default, so when any HTML, JavaScript or CSS code is changed,
it automatically refresh the page. There is no need to refresh page manually.
If you see permission denied errors when running ionic command, try to add sudo before
the command. If you dont want to use sudo command, modify file permission of npm
directory to make sure current user has write permission.

2.3.2 Use Chrome for development


Using iOS or Android emulators to develop and test Ionic apps is not quite convenient as emulators
consume more system resources and take a longer time to start. A better alternative is to use Chrome
browser for basic testing. Open Chrome system menu then select More tools -> JavaScript Console.
Click the mobile phone icon on the top menu bar to enable device mode, see Figure 2.4. Then you
can select different devices as rendering targets, e.g. Apple iPhone 4.
http://sass-lang.com/

14

Get started

Figure 2.4. Use Chrome device mode to test Ionic apps

2.4 Test and run


After the app is tested using browsers, its time to test on device simulators and real devices. First,
you need to configure platforms support for your app.

Get started

15

2.4.1 iOS
Listing 1.12. Add iOS platform

$ ionic platform add ios

Then build the app for iOS platform.


Listing 1.13. Build for iOS

$ ionic build ios

Then start the emulator and test your app, see Figure 2.5 for a screen-shot of iOS emulator running
Ionic app.
Listing 1.14. Start iOS emulator to test the app

$ ionic emulate ios

16

Get started

Figure 2.5. Running Ionic blank app in iOS emulator

Get started

17

2.4.2 Android
Listing 1.15. Add Android platform

$ ionic platform add android

Then build the app for Android platform.


Listing 1.16. Build for Android

$ ionic build android

Then start the emulator and test your app, see Figure 2.6 for a screen-shot of Android emulator
running Ionic app.
Listing 1.17. Start Android emulator to test the app

$ ionic emulate android

18

Get started

Figure 2.6. Running Ionic blank app in Android emulator

19

Get started

2.5 Ionic Lab


If you prefer a GUI tool instead of command line, Ionic Lab is your best choice. Ionic Lab is a
desktop app to create, preview, build, run and upload Ionic apps.

Figure 2.7. Create app in Ionic Lab

After an app is created, click Serve to start the test server and preview the app in the right panel.
http://lab.ionic.io/

20

Get started

Figure 2.8. Serve and preview app

Then use your favorite editor to open project files created by Ionic Lab and start building the app.
Ionic Lab watches changes in project files and refresh app preview automatically.
You can also manage Cordova plugins used in the app using Ionic Lab. As in Figure 2.9, select the
plugin name to install a plugin.

21

Get started

Figure 2.9. Manage Cordova plugins

2.6 Ionic Creator


Ionic Creator is a new tool to build mobile apps using Ionic. It can quickly build prototypes by
drag-and-drop. After the basic app skeleton is created, we can export the app code as a ZIP file or
use it by Ionic CLI as app template.
http://ionic.io/products/creator

22

Get started

Figure 2.10. Ionic Creator

Ionic Creator supports sharing app prototypes using URL, emails and TXTs, which is very good for
customers, designers and developers to collaborate. Developers can create prototypes quickly and
communicate with customers to get feedback. Once customers are satisfied with the prototypes,
developers can use Ionic CLI to export the prototypes and start building the apps, see Listing 1.18.
creator:ff7342de3f63 is the unique ID of the app created by Ionic Creator.
Listing 1.18. Use Ionic CLI to export Ionic Creator apps

$ ionic start [appName] creator:ff7342de3f63

3. Hacker News app


After we have prepared local Ionic development environment and learned the basic of developing
Ionic apps, its time to dive into the details of Ionic framework. To better explain Ionic framework,
we need to build a good sample app. In this book, we are going to create a mobile app for the popular
Hacker News using Ionic.

3.1 Why Hacker News app


Hacker News app is a good example for following reasons:
Hacker News is popular so its easy for developers to understand what this app is for.
This app represents a large number of content-centric mobile apps suitable for Ionic.
Hacker News has a Firebase-based API to retrieve its data, so its a good example of both
Ionic and Firebase.

3.2 User stories


To describe the apps requirements, we list main user stories as below.
View top stories
Users can view a list of top stories on Hacker News and view page of each story.
View comments
For each story, users can view its comments. For each comments, users can also view replies
to that comment.
Add stories to favorites
Users can add a story to favorites and see a list of all favorite stories.
Share stories
Users can share stories to social network.
This book describes concepts and techniques of Ionic by implementing these user stories.
https://news.ycombinator.com/
https://github.com/HackerNews/API

4. App skeleton code


Based on the sample apps user stories, Ionics sidemenu template is a good start point for this app.
Use ionic start hacker_news_app sidemenu to create the basic code structure of this app. Then
add Sass support and platforms to this app.
Listing 4.1. Set up Sass and platforms

1
2
3

$ ionic setup sass


$ ionic platform add ios
$ ionic platform add android

When using Ionic Lab, all the setup in Listing 4.1 can be done on its GUI.

Open the project directory with your favorite text editors or IDEs, the directory structure looks like
Figure 4.1.

25

App skeleton code

Figure 4.1 Directory structure of app skeleton code

Lets walk-through this code structure and explain each component.

4.1 Root directory


4.1.1 package.json
package.json file at the root directory is a JSON file describes this Node.js project. This file contains

various metadata of this project, including name, description, version, license and other information.

App skeleton code

26

This file is also used by npm to manage projects dependencies.


npm
npm is the package management tool for Node.js. Dependencies are described in dependencies of
package.json file. Once dependencies are declared, use npm install to install files of dependent
libraries into node_modules directory.

https://docs.npmjs.com/files/package.json

4.1.2 bower.json and .bowerrc


bower.json and .bowerrc at the root directory are both used by Bower. Bower is the package

manager for the web, including frameworks, libraries, assets and utilities. For example, if you want to
add jQuery to your app, just use bower install jquery to install it. You can also add dependencies
to bower.json, then use bower install to install all dependencies.
.bowerrc is the configuration file for Bower. Listing 4.2 shows Ionics default .bowerrc file. It only
configures the path to install components. The path is www/lib by default.
4.2. Ionic default .bowerrc file

1
2
3

{
"directory": "www/lib"
}

Bower
There are hundreds of packages available to install using Bower. Go to Search packages of Bower
website and search the package you want to install and find the package name. Then add package
name and version to bower.json. Once all dependencies are added, using bower install to install
them. Bower also supports installing packages from Git. You can also use bower install <package
name> --save to install a package and save the package dependency to bower.json at the same
time.
http://bower.io/search/

.
https://www.npmjs.com/
http://bower.io/
https://jquery.com/
http://bower.io/docs/config/

App skeleton code

27

4.1.3 config.xml
config.xml is the configuration file for Apache Cordova. More information about this file can be

found at Apache Cordova website.

4.1.4 gulpfile.js
gulpfile.js is the config file for gulp. Some gulp tasks have already been defined. You can also

add your own tasks.

4.1.5 ionic.project
ionic.project is the project configuration file for Ionic. As in Listing 4.3, its a simple JSON file.
gulpStartupTasks is the list of gulp tasks to run before running local test server. By default two
tasks sass and watch are run. watchPatterns is the globbing pattern of LiveReload to watch for file
changes. By default, LiveReload watches for www directory without www/lib sub-directory, because
www/lib contains third-party packages installed by Bower.
Listing 4.3. ionic.project file

1
2
3
4
5
6
7
8
9
10
11
12

{
"name": "hacker_news_app",
"app_id": "",
"gulpStartupTasks": [
"sass",
"watch"
],
"watchPatterns": [
"www/**/*",
"!www/lib/**/*"
]
}

If you want to add more gulp tasks to run on startup or modify LiveReloads watch patterns, feel
free to edit ionic.project file.

4.2 hooks
hooks directory contains Cordova Hooks which are special scripts to customize Cordova commands.
http://cordova.apache.org/docs/en/edge/config_ref_index.md.html#The%20config.xml%20File
http://gulpjs.com/
http://gruntjs.com/configuring-tasks#globbing-patterns
http://cordova.apache.org/docs/en/edge/guide_appdev_hooks_index.md.html#Hooks%20Guide

App skeleton code

28

4.3 node_modules
node_modules directory contains installed Node.js packages. This directory should not be managed

by code repository and its ignored by Git by default.

4.4 platforms
For each supported platform, there is a sub-directory in platforms to contain built files for this
platform. This app has ios and android sub-directories for iOS and Android platforms.

4.5 plugins
This directory contains various Cordova plugins used in this app.

4.6 resources
This directory contains icons and splash screen images.

4.7 scss
This directory contains Scss files.

4.8 www
This directory contains the source code of your app.

4.8.1 index.html
index.html is the entry point of the app.

4.8.2 lib
lib directory contains files of dependent packages installed by Bower.

4.8.3 img
img directory contains images used in the app.

App skeleton code

29

4.8.4 css
css directory contains the apps CSS files. As this app uses Sass, we dont want to modify files in
this directory directly. After modifying Scss files in scss directory, Scss files will be compiled to CSS
files and put into css directory.

4.8.5 templates
templates directory contains HTML templates for the apps states.

4.8.6 js
js directory contains the apps JavaScript files.

5. Share stories
When users see good stories in the app, they may want to share those stories to others. Sharing can
be done via messages, emails, Facebook or Twitter. Its easy to add sharing feature to the app.
Cordova plugin socialSharing can share images, text, messages via Facebook, Twitter, Email, SMS
and WhatsApp. Listing 13.1 shows how to install this plugin.
Listing 13.1. Install socialSharing plugin

1
2

$ cordova plugin add


https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin.git

After the plugin is installed, Listing 13.2 shows how to share a story.
Listing 13.2. Share a story

1
2
3

$scope.shareStory = function(story) {
$cordovaSocialSharing.share(story.title, null, null, story.url);
};

share(message, subject, image, link) method of $cordovaSocialSharing service has following

arguments:

message - Message of this sharing.


subject - Subject of this sharing.
image - Image contained in this sharing.
link - Link of the shared item.

Figure 13.1 shows the sharing window created by socialSharing plugin.


http://ngcordova.com/docs/plugins/socialSharing/

31

Share stories

Figure 13.1. Share a story

6. Publish
After the app has been developed and tested, its time to publish it. This chapter covers some topics
regarding to app publishing.

6.1 Icons & splash screens


Before the app can be published, we need to replace the default icons and splash screens. Ionic
can generate icons and splash screens from source images to create images of various size for each
platform. We only need to provide an image for icon and another image for splash screen, then Ionic
can generate all necessary images. Source images can be png file, psd file from PhotoShop or ai file
from Adobe Illustrator.
For icons, the source image should be icon.png, icon.psd or icon.ai file in resources directory
of the Ionic project. The icon image should have size of at least 192x192 px. For splash screens,
the source image should be splash.png, splash.psd or splash.ai file in resources directory. The
splash screen should have size of at least 2208x2208 px.
Listing 14.1. Generate icons and splash screens

1
2
3
4
5

$ ionic resources --icon


$ ionic resources --splash
$ ionic resources

Generated icons and splash screens are saved to ios and android sub-directory of resources
directory.

33

Publish

Figure 14.1. Generated icons and splash screens

6.2 Deploy to device


We can also deploy the app to device for testing. For iOS, open generated project in platforms/ios
directory with Xcode and use Xcode to deploy to device. For Android, open generated project in
platforms/android directory with Eclipse or Android Studio to deploy to device.

Publish

34

Ionic CLI command ionic run ios --device and ionic run android --device can also be used
to deploy apps to device. For iOS, ios-deploy needs to be installed using npm.

6.3 View and share with Ionic View


We can easily view and share the app with Ionic View. Ionic View is an app created by Ionic which
allows users to view Ionic apps without installing them.
1.
2.
3.
4.

Create an account in Ionic.io.


Use CLI command ionic upload to upload the app.
Install Ionic View from app store.
Log into Ionic View and view the uploaded app.

See Figure 14.2 for the screen-shot of Ionic View.


https://github.com/phonegap/ios-deploy
https://apps.ionic.io

35

Publish

Figure 14.2. Ionic View

Publish

36

You can also share the app using CLI command ionic share <email address>. An email will be
sent to invited user to view the shared app. Invited user can also view the shared app in Ionic View.

7. Thank you
Thank you for reading sample chapters of this book. You can purchase the complete book at
Leanpub.

https://leanpub.com/build-mobile-apps-with-ionic-and-firebase

Das könnte Ihnen auch gefallen