build mobile apps with ionic and firebase sample

7/25/2019 Build Mobile Apps With Ionic and Firebase Sample

1/43


2/43

Build Mobile Apps with Ionic and Firebase

A starters guide with real examples

Fu Cheng

This book is for sale athttp://leanpub.com/build-mobile-apps-with-ionic-and-firebase

This version was published on 2015-12-03

This is aLeanpubbook. Leanpub empowers authors and publishers with the Lean Publishingprocess.Lean Publishingis 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
http://leanpub.com/manifestohttp://leanpub.com/http://leanpub.com/build-mobile-apps-with-ionic-and-firebase


3/43

Also ByFu ChengLodash Cookbook

A Practical Guide for Java 8 Lambdas and Streams
http://leanpub.com/java8-lambda-expressions-streamshttp://leanpub.com/lodashcookbookhttp://leanpub.com/u/fucheng


4/43

To my wife Andrea and daughter Olivia


5/43

Contents

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

1.1 Hybrid mobile apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

1.2 Apache Cordova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

1.3 Ionic framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

1.4 Firebase . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

1.5 About this book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.6 Source code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2. Get started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2.1 Prepare local environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2.1.1 iOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2.1.2 Android . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2.2 Create app skeleton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2.2.1 Blank app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2.2.2 Tabbed app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2.2.3 Sidemenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

2.2.4 Maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.3 Development . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

2.3.1 Start local server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

2.3.2 Use Chrome for development . . . . . . . . . . . . . . . . . . . . . . . . . . 13

2.4 Test and run . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

2.4.1 iOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

2.4.2 Android . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

2.5 Ionic Lab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

2.6 Ionic Creator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

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

3.1 Why Hacker News app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233.2 User stories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

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

4.1 Root directory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

4.1.1 package.json. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

4.1.2 bower.jsonand .bowerrc . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26


6/43

CONTENTS

4.1.3 config.xml . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

4.1.4 gulpfile.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

4.1.5 ionic.project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

4.2 hooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

4.3 node_modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284.4 platforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

4.5 plugins. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

4.6 resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

4.7 scss . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

4.8 www . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

4.8.1 index.html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

4.8.2 lib . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

4.8.3 img . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

4.8.4 css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

4.8.5 templates

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294.8.6 js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

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

6. Publish . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

6.1 Icons & splash screens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

6.2 Deploy to device . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

6.3 View and share withIonic View. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

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


7/43

1. IntroductionAmobile appis 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) 1.5 million 100 billion

Google Play 1.7 million 50 billion

Windows Store 340,000+

BlackBerry World 240,000+ 4 billion

Amazon Appstore 334,000+

Prevalence of mobile apps also creates a great opportunity for application developers and software

companies. According to areporton 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_appApp store statistics is gathered from various sources:1,2,3,4,5,6and 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
https://en.wikipedia.org/wiki/Flappy_Birdhttp://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/BlackBerry_Worldhttps://en.wikipedia.org/wiki/Amazon_Appstorehttps://en.wikipedia.org/wiki/Google_Playhttps://en.wikipedia.org/wiki/App_Store_(iOS)http://www.appbrain.com/stats/http://www.statista.com/topics/1729/app-stores/https://en.wikipedia.org/wiki/Mobile_apphttps://en.wikipedia.org/wiki/Flappy_Birdhttp://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/Mobile_app


8/43

Introduction 2

JavaScript and CSS are easier to learn. Building mobile apps with web development skills is made

possible byHTML5. 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 Cordovais 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

fromPhoneGapcreated 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 referenceJavaScript, 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

Cordovasplugin 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 frameworkis a powerful tool to build hybrid mobile apps. Its open sourceand has nearly

https://en.wikipedia.org/wiki/HTML5https://cordova.apache.org/http://phonegap.com/http://cordova.apache.org/plugins/http://ionicframework.com/

https://github.com/driftyco/ionic
https://github.com/driftyco/ionichttp://ionicframework.com/http://cordova.apache.org/plugins/http://phonegap.com/https://cordova.apache.org/https://en.wikipedia.org/wiki/HTML5https://github.com/driftyco/ionichttp://ionicframework.com/http://cordova.apache.org/plugins/http://phonegap.com/https://cordova.apache.org/https://en.wikipedia.org/wiki/HTML5


9/43

Introduction 3

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

UseAngularas 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. Front-

end 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 understand-

ing of Angular is also required as Angular is the JavaScript framework used in Ionic.

1.6 Source code

Source code is available onGitHub. The example app can also be viewed using Ionic Viewwith ID

131c3395.

http://angularjs.org/https://github.com/alexcheng1982/hacker-news-ionic
https://github.com/alexcheng1982/hacker-news-ionichttp://angularjs.org/https://github.com/alexcheng1982/hacker-news-ionichttp://angularjs.org/


10/43

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

2.1 Prepare local environment

InstallNode.json local machine first. Then usenpmto install Ionic command-line tools and Apache

Cordova.

Listing 1.1. Install Ionic and Apache Cordova

1 $ npm install -g cordova ionic

You may need to have system administrator privilege to install. For Linux and Mac OS X,

usesudo. For Windows, start a command-line window as administrator.

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

2.1.1 iOS

Developing iOS apps with Ionic requires Mac OS X and Xcode. InstallXcodeand 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

1 $ 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

1 /Applications/Xcode.app/Contents/Developer

Otherwise type command in Listing 1.4 to install.

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


11/43

Get started 5

Listing 1.4. Install Xcode command line tools

1 $ xcode-select --install

After installation finished, use xcode-select -pto 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-simpackage

1 $ 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 installstand-alone SDK tools.

AndroidAPI level 22is 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.Runandroidin toolsdirectory to startAndroid SDK Managerto 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,thenadd /Development/android-sdk/tools and /Development/android-

sdk/platform-toolsto PATHenvironment. For Android Studio, the Android SDK is installed into

directory/Users//Library/Android/sdk.

To modify PATHenvironment on Linux and Mac OS X, edit /.bash_profilefile to update PATH.

http://developer.android.com/sdk/installing/index.html?pkg=studiohttp://developer.android.com/sdk/installing/index.html?pkg=toolshttps://developer.android.com/about/versions/android-5.1.html
https://developer.android.com/about/versions/android-5.1.htmlhttp://developer.android.com/sdk/installing/index.html?pkg=toolshttp://developer.android.com/sdk/installing/index.html?pkg=studiohttps://developer.android.com/about/versions/android-5.1.htmlhttp://developer.android.com/sdk/installing/index.html?pkg=toolshttp://developer.android.com/sdk/installing/index.html?pkg=studio


12/43

Get started 6

Listing 1.6. Add Android SDK tools toPATH

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

2 :/Development/android-sdk/tools

To modify PATHenvironment on Windows,

1. ClickStartmenu, then right-clickComputerand selectProperties.

2. ClickAdvanced System Settingsto open a dialog.

3. ClickEnvironment Variablesin the dialog and findPATHvariable in the list then click Edit.

4. Append the path of toolsand platform-toolsdirectories to the end ofPATHvariable.

Its highly recommended to use Android Studio instead of stand-alone SDK tools. Stand-alone 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 startto create apps. The first argument is name of the new

app, the second argument is the template name.

2.2.1 Blank app

This templateblankonly generates basic code for the app.

List 1.7. Use blankapp template

1 $ ionic start blankApp blank

2.2.2 Tabbed app

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


13/43

Get started 7

List 1.8. Use tabsapp template

1 $ ionic start tabsApp tabs


14/43

Get started 8

Figure 2.1. App created using tabstemplate


15/43

Get started 9

2.2.3 Sidemenu

This templatesidemenugenerates apps with a side menu which opens itself when sliding, see Figure

2.2.

List 1.9. Use sidemenuapp template

1 $ ionic start sidemenuApp sidemenu


16/43

Get started 10

Figure 2.2. App created using sidemenutemplate


17/43

Get started 11

2.2.4 Maps

This templatemapsgenerates apps with a map in the center. Its useful for geo-location related apps,

see Figure 2.3.

List 1.10. Use mapsapp template

1 $ ionic start mapsApp maps


18/43

Get started 12

Figure 2.3. App created using mapstemplate


19/43

Get started 13

2.3 Development

If you want to useSass, use following command to add Sass support.

Listing 1.11. Add Sass support

1 $ ionic setup sass

2.3.1 Start local server

To develop and test Ionic apps in your browser, use ionic serveto 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 uplivereloadby 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 ioniccommand, try to addsudobefore

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/
http://sass-lang.com/http://sass-lang.com/


20/43

Get started 14

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.


21/43

Get started 15

2.4.1 iOS

Listing 1.12. Add iOS platform

1 $ ionic platform add ios

Then build the app for iOS platform.

Listing 1.13. Build for iOS

1 $ 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

1 $ ionic emulate ios


22/43

Get started 16

Figure 2.5. Running Ionic blank app in iOS emulator


23/43

Get started 17

2.4.2 Android

Listing 1.15. Add Android platform

1 $ ionic platform add android

Then build the app for Android platform.

Listing 1.16. Build for Android

1 $ 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

1 $ ionic emulate android


24/43

Get started 18

Figure 2.6. Running Ionic blank app in Android emulator


25/43

Get started 19

2.5 Ionic Lab

If you prefer a GUI tool instead of command line, Ionic Labis 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, clickServeto start the test server and preview the app in the right panel.

http://lab.ionic.io/
http://lab.ionic.io/http://lab.ionic.io/


26/43

Get started 20

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.


27/43

Get started 21

Figure 2.9. Manage Cordova plugins

2.6 Ionic Creator

Ionic Creatoris 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
http://ionic.io/products/creatorhttp://ionic.io/products/creator


28/43

Get started 22

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:ff7342de3f63is the unique ID of the app created by Ionic Creator.

Listing 1.18. Use Ionic CLI to export Ionic Creator apps

1 $ ionic start [appName] creator:ff7342de3f63


29/43

3. Hacker News appAfter 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 Newsusing 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-basedAPIto 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 storiesUsers 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
https://github.com/HackerNews/APIhttps://news.ycombinator.com/https://github.com/HackerNews/APIhttps://news.ycombinator.com/


30/43

4. App skeleton codeBased on the sample apps user stories, Ionics sidemenutemplate is a good start point for this app.

Use ionic start hacker_news_app sidemenuto 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 $ ionic setup sass

2 $ ionic platform add ios

3 $ 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.


31/43

App skeleton code 25

Figure 4.1 Directory structure of app skeleton code

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

4.1 Root directory4.1.1package.json

package.jsonfile 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.


32/43


This file is also used bynpmto manage projects dependencies.

npm

npmis the package management tool for Node.js. Dependencies are described in dependenciesofpackage.jsonfile. Once dependencies are declared, usenpm installto install files of dependent

libraries into node_modulesdirectory.

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

4.1.2bower.jsonand.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 toaddjQueryto your app, just use bower install jqueryto install it. You can also add dependencies

tobower.json, then use bower installto install all dependencies.

.bowerrcis theconfiguration filefor Bower. Listing 4.2 shows Ionics default.bowerrcfile. It only

configures the path to install components. The path is www/libby default.

4.2. Ionic default .bowerrcfile

1 {

2 "directory": "www/lib"

3 }

Bower

There are hundreds of packages available to install using Bower. Go to Search packagesof Bower

website and search the package you want to install and find the package name. Then add package

name and version tobower.json. Once all dependencies are added, using bower installto install

them. Bower also supports installing packages from Git. You can also use bower install --saveto install a package and save the package dependency to bower.jsonat the same

time.

http://bower.io/search/

https://www.npmjs.com/http://bower.io/https://jquery.com/http://bower.io/docs/config/
http://bower.io/docs/config/https://jquery.com/http://bower.io/https://www.npmjs.com/http://bower.io/search/http://bower.io/search/http://bower.io/docs/config/https://jquery.com/http://bower.io/https://docs.npmjs.com/files/package.jsonhttps://docs.npmjs.com/files/package.jsonhttps://www.npmjs.com/


33/43


4.1.3config.xml

config.xmlis the configuration file for Apache Cordova. More information about this filecan be

found at Apache Cordova website.

4.1.4gulpfile.js

gulpfile.jsis the config file forgulp. Some gulp tasks have already been defined. You can also

add your own tasks.

4.1.5ionic.project

ionic.projectis the project configuration file for Ionic. As in Listing 4.3, its a simple JSON file.

gulpStartupTasksis the list of gulp tasks to run before running local test server. By default two

taskssassandwatchare run.watchPatternsis theglobbing patternof LiveReload to watch for file

changes. By default, LiveReload watches for www directory without www/libsub-directory, because

www/libcontains third-party packages installed by Bower.

Listing 4.3.ionic.projectfile

1 {

2 "name": "hacker_news_app",

3 "app_id": "",

4 "gulpStartupTasks": [

5 "sass",

6 "watch"

7 ],8 "watchPatterns": [

9 "www/**/*",

10 "!www/lib/**/*"

11 ]

12 }

If you want to add more gulp tasks to run on startup or modify LiveReloads watch patterns, feel

free to edit ionic.projectfile.

4.2hooks

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%20Filehttp://gulpjs.com/http://gruntjs.com/configuring-tasks#globbing-patternshttp://cordova.apache.org/docs/en/edge/guide_appdev_hooks_index.md.html#Hooks%20Guide
http://cordova.apache.org/docs/en/edge/guide_appdev_hooks_index.md.html#Hooks%20Guidehttp://gruntjs.com/configuring-tasks#globbing-patternshttp://gulpjs.com/http://cordova.apache.org/docs/en/edge/config_ref_index.md.html#The%20config.xml%20Filehttp://cordova.apache.org/docs/en/edge/guide_appdev_hooks_index.md.html#Hooks%20Guidehttp://gruntjs.com/configuring-tasks#globbing-patternshttp://gulpjs.com/http://cordova.apache.org/docs/en/edge/config_ref_index.md.html#The%20config.xml%20File


34/43


4.3node_modules

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

by code repository and its ignored by Git by default.

4.4platforms

For each supported platform, there is a sub-directory in platforms to contain built files for this

platform. This app has ios and androidsub-directories for iOS and Android platforms.

4.5plugins

This directory contains various Cordova plugins used in this app.

4.6resources

This directory contains icons and splash screen images.

4.7scss

This directory contains Scss files.

4.8www

This directory contains the source code of your app.

4.8.1index.html

index.htmlis the entry point of the app.

4.8.2lib

libdirectory contains files of dependent packages installed by Bower.

4.8.3img

imgdirectory contains images used in the app.


35/43


4.8.4css

cssdirectory contains the apps CSS files. As this app uses Sass, we dont want to modify files in

this directory directly. After modifying Scss files inscssdirectory, Scss files will be compiled to CSS

files and put into css directory.

4.8.5templates

templatesdirectory contains HTML templates for the apps states.

4.8.6js

jsdirectory contains the apps JavaScript files.


36/43

5. Share storiesWhen 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 pluginsocialSharingcan share images, text, messages via Facebook, Twitter, Email, SMS

and WhatsApp. Listing 13.1 shows how to install this plugin.

Listing 13.1. Install socialSharingplugin

1 $ cordova plugin add

2 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 $scope.shareStory = function(story) {

2 $cordovaSocialSharing.share(story.title, null, null, story.url);

3 };

share(message, subject, image, link)method of

$cordovaSocialSharingservice has followingarguments:

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 bysocialSharingplugin.

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


37/43

Share stories 31

Figure 13.1. Share a story


38/43

6. PublishAfter 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 pngfile,psdfile from PhotoShop or ai file

from Adobe Illustrator.

For icons, the source image should be icon.png, icon.psdor icon.aifile in resourcesdirectory

of the Ionic project. The icon image should have size of at least 192x192 px. For splash screens,

the source image should besplash.png, splash.psdor splash.aifile in resourcesdirectory. The

splash screen should have size of at least 2208x2208px.

Listing 14.1. Generate icons and splash screens

1 $ ionic resources --icon

23 $ ionic resources --splash

4

5 $ ionic resources

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

directory.


39/43

Publish 33

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/androiddirectory with Eclipse or Android Studio to deploy to device.


40/43

Publish 34

Ionic CLI command ionic run ios --deviceand ionic run android --devicecan also be used

to deploy apps to device. For iOS,ios-deployneeds to be installed usingnpm.

6.3 View and share with Ionic View

We can easily view and share the app with Ionic View.Ionic Viewis an app created by Ionic which

allows users to view Ionic apps without installing them.

1. Create an account inIonic.io.

2. Use CLI command ionic uploadto upload the app.

3. InstallIonic Viewfrom app store.

4. Log intoIonic Viewand view the uploaded app.

See Figure 14.2 for the screen-shot ofIonic View.

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


41/43

Publish 35

Figure 14.2. Ionic View


42/43

Publish 36

You can also share the app using CLI command ionic share . An email will be

sent to invited user to view the shared app. Invited user can also view the shared app in Ionic View.


43/43

7. Thank youThank 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

build mobile apps with ionic and firebase sample

Documents