Documente Academic
Documente Profesional
Documente Cultură
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
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
23
23
23
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
Downloads to date
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.
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.
Introduction
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.
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.
2. Get started
Before we can build Ionic apps, we need to set up local development environment first.
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
Get started
$ xcode-select --install
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
1
2
export PATH=${PATH}:/Development/android-sdk/platform-tools \
:/Development/android-sdk/tools
Its highly recommended to use Android Studio instead of stand-alone SDK tools. Standalone SDK tools is more likely to have configuration issues.
Get started
Get started
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
10
Get started
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
12
Get started
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
14
Get started
Get started
15
2.4.1 iOS
Listing 1.12. Add iOS platform
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
16
Get started
Get started
17
2.4.2 Android
Listing 1.15. Add Android platform
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
18
Get started
19
Get started
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
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
22
Get started
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
1
2
3
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
various metadata of this project, including name, description, version, license and other information.
26
https://docs.npmjs.com/files/package.json
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/
27
4.1.3 config.xml
config.xml is the configuration file for Apache Cordova. More information about this file can be
4.1.4 gulpfile.js
gulpfile.js is the config file for gulp. Some gulp tasks have already been defined. You can also
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
28
4.3 node_modules
node_modules directory contains installed Node.js packages. This directory should not be managed
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.
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
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);
};
arguments:
31
Share stories
6. Publish
After the app has been developed and tested, its time to publish it. This chapter covers some topics
regarding to app publishing.
1
2
3
4
5
Generated icons and splash screens are saved to ios and android sub-directory of resources
directory.
33
Publish
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.
35
Publish
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