Build Mobile Apps with Ionic 1 and FirebaseA starter’s 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 2016-10-09

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

© 2015 - 2016 Fu Cheng

Also By Fu ChengLodash Cookbook

A Practical Guide for Java 8 Lambdas and Streams

To my wife Andrea and daughter Olivia

Contents

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.1 Hybrid mobile apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.2 Apache Cordova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.3 Ionic framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

1.3.1 Ionic 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41.4 Firebase . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41.5 About this book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51.6 Source code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2. Get started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62.1 Prepare local environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2.1.1 iOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62.1.2 Android . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

2.2 Create app skeleton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82.2.1 Blank app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82.2.2 Tabbed app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82.2.3 Sidemenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.2.4 Maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

2.3 Development . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152.3.1 Start local server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152.3.2 Use Chrome for development . . . . . . . . . . . . . . . . . . . . . . . . . . 152.3.3 Use Chrome DevTools for remote debugging . . . . . . . . . . . . . . . . . . 16

2.4 Test and run . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172.4.1 iOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172.4.2 Android . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

2.5 Ionic Lab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212.6 Ionic Creator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232.7 Upgrade Ionic version . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

3. Hacker News app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263.1 Why Hacker News app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263.2 User stories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

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

CONTENTS

4.1 Root directory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284.1.1 package.json . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284.1.2 bower.json and .bowerrc . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294.1.3 config.xml . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304.1.4 gulpfile.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304.1.5 ionic.project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

4.2 hooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304.3 node_modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314.4 platforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314.5 plugins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314.6 resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314.7 scss . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314.8 www . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

4.8.1 index.html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314.8.2 lib . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314.8.3 img . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314.8.4 css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324.8.5 templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324.8.6 js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

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

6. Publish . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356.1 Icons & splash screens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356.2 Deploy to device . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366.3 View and share with Ionic View . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

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

1. IntroductionA mobile app¹ is a computer program designed to run on mobile devices such as smartphones andtablet computers. With the prevalence of mobile devices, more and more mobile apps have beencreated 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 billionGoogle Play 1.7 million 50 billionWindows Store 340,000+BlackBerry World 240,000+ 4 billionAmazon Appstore 334,000+

Prevalence of mobile apps also creates a great opportunity for application developers and softwarecompanies. According to a report³ on March 2005,

Apple has said that its App Store generated $10 billion in revenue to developers lastyear, while Google has said it has paid out $7 billion to app developers over the past 12months.

The revenue of app stores is seen doubling by 2018. A lot of individuals and companies make bigmoney on the mobile apps market. A classic example is the popular mobile game Flappy Bird⁴.Flappy Bird was developed by Vietnam-based developer Dong Nguyen. The developer claimed thatFlappy Bird was earning $50,000 a day from in-app advertisements as well as sales. This encouragesdevelopers 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 variousapp 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 aburden 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 2

JavaScript and CSS are easier to learn. Building mobile apps with web development skills is madepossible by HTML5⁵. This new type of mobile apps is called hybrid mobile apps. In hybrid mobileapps, HTML, JavaScript and CSS code runs in an internal browser (WebView) that it’s wrapped innative apps. JavaScript code can access native APIs through the wrapper. Apache Cordova⁶ is themost popular open-source library to develop hybrid mobile apps.

Comparing to native apps, hybrid apps have their benefits and drawbacks. The major benefit isthat developers can use existing web development skills and use only one code base for differentplatforms. By leveraging responsive web design techniques, hybrid apps can easily adapt to differentscreen resolutions. The major drawback is the performance issues with hybrid apps. As the hybridapp is actually running in an internal browser, the performance of hybrid apps cannot compete withnative 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 a native app or hybrid app, the development teamneeds to understand the nature of the app. Hybrid apps are suitable for content-centric apps, suchas news readers, online forums or products showcasing. Another important factor to consider isdevelopment team’s skill sets.

Following diagram shows the dilemma when choosing between hybrid and native mobile apps.

⁵https://en.wikipedia.org/wiki/HTML5⁶https://cordova.apache.org/

Introduction 3

Native vs. Hybrid mobile apps

1.2 Apache Cordova

Apache Cordova is a popular open-source framework to develop hybrid mobile apps. It originatesfrom PhoneGap⁷ created by Nitobi. Adobe acquired Nitobi in 2011 and provides commercial serviceupon it. The PhoneGap source codewas contributed to Apache Software Foundation and new projectApache Cordova was started based on that.

⁷http://phonegap.com/

Introduction 4

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 powerfulfeature of Cordova is its plugin interface which allows JavaScript code running in a web page tocommunicate with native components. With the help of plugins, Cordova apps can access device’saccelerometer, camera, compass, contacts and more. There are 680 plugins currently available inCordova’s plugin registry⁸.

Apache Cordova is just a runtime for web apps. It can support any kinds of web pages. To createmobile 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. It’s open source¹⁰ and has nearly20,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 a similar look and feel as native apps. The Ionicframework is the main topic of this book.

1.3.1 Ionic 2

Ionic 2¹² is a completely rewritten version of Ionic framework based on Angular 2¹³. It dramaticallyimproves performance and reduces the complexity of the code. Ionic 2 is currently in beta. It’s worthto check out this new beta version to understand the future of Ionic framework. However, this bookfocuses on Ionic 1.

1.4 Firebase

Mobile apps usually need back-end service to work with front-end UI. This means that there shouldbe back-end code and servers to work with mobile apps. Firebase is a cloud service to power apps’

⁸http://cordova.apache.org/plugins/⁹http://ionicframework.com/¹⁰https://github.com/driftyco/ionic¹¹http://angularjs.org/¹²http://ionic.io/2¹³https://angular.io/

Introduction 5

back-end. Firebase can provide data storage and user authentication. After integrating mobile appswith Firebase, we don’t 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 isespecially 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 mobileapps. The sample app we build in this book is a client of Hacker News. Features of this app include:

• View top stories.• View comments on stories.• Add stories to favorites.• Share stories.

This book covers the whole cycle of hybrid mobile apps development. It’s organized aroundimplementing above user stories. For each story, this book not only talks about how to implementit 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 under-standing of Angular is also required as Angular is the JavaScript framework used in Ionic.

1.6 Source code

The source code is available on GitHub¹⁴. The example app can also be viewed using Ionic View withID 131c3395.

¹⁴https://github.com/alexcheng1982/hacker-news-ionic

2. Get startedBefore 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 ApacheCordova.

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,use sudo. For Windows, start a command-line window as the 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 commandline 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/

Get started 7

Listing 1.4. Install Xcode command line tools

1 $ 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 thecommand in Listing 1.5.

Listing 1.5. Install ios-sim package

1 $ npm -g install ios-sim

2.1.2 Android

To develop Ionic apps for Android, Android SDK must be installed. It’s recommended to installAndroid Studio³ which provides a nice IDE and Android SDK tools. If you don’t want to use AndroidStudio, you can install stand-alone SDK tools⁴.

Android API level 22⁵ is required to run Ionic apps. Make sure required SDK platform isinstalled.

Stand-alone SDK tools is just a ZIP file, unpack this file into a directory and it’s ready to use.The downloaded SDK only contains basic SDK tools without any Android platform or third-partylibraries. 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 otherrequired libraries.

After installing Android SDK, add SDK’s tools and platform-tools directories in your PATH

environment, so SDK’s commands can be found by Ionic. Suppose that SDK tools is unpacked into/Development/android-sdk, then add /Development/android-sdk/tools and /Development/android-sdk/platform-tools to PATH environment. For Android Studio, the Android SDK is installed intodirectory /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 8

Listing 1.6. Add Android SDK tools to PATH

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

2 :/Development/android-sdk/tools

To modify PATH environment on Windows,

1. Click Start menu, then right-click Computer and select Properties.2. Click Advanced System Settings to open a dialog.3. Click Environment Variables in the dialog and find PATH variable in the list then click Edit.4. Append the path of tools and platform-tools directories to the end of PATH variable.

It’s highly recommended to use Android Studio instead of stand-alone SDK tools. Stand-alone SDK tools is more likely to have configuration issues.

2.1.2.1 Genymotion

Genymotion⁶ is a fast Android emulator. It’s recommended to use Genymotion for Androidemulation instead of the standard emulator.

2.2 Create app skeleton

After local development environment is set up successfully, it’s time to create new Ionic apps. Ionicprovides four different types of application templates. We can choose one of these templates to createthe skeleton code of the app. Use ionic start to create apps. The first argument is the name of thenew 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

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

⁶https://www.genymotion.com/

Get started 9

List 1.8. Use tabs app template

1 $ ionic start tabsApp tabs

Get started 10

Figure 2.1. App created using tabs template

Get started 11

2.2.3 Sidemenu

This template sidemenu generates apps with a side menu which open itself when sliding, see Figure2.2.

List 1.9. Use sidemenu app template

1 $ ionic start sidemenuApp sidemenu

Get started 12

Figure 2.2. App created using sidemenu template

Get started 13

2.2.4 Maps

This template maps generates apps with a map in the center. It’s useful for geo-location related apps,see Figure 2.3.

List 1.10. Use maps app template

1 $ ionic start mapsApp maps

Get started 14

Figure 2.3. App created using maps template

Get started 15

2.3 Development

If you want to use Sass⁷, use the 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 serve to start a local test server. Thedefault port is 8100. Open your browser to http://localhost:8100/ and you should see the UI ofIonic app. Ionic sets up livereload by default, so when any HTML, JavaScript or CSS code is changed,it automatically refreshes the page. There is no need to refresh the page manually.

If you see permission denied errors when running ionic command, try to add sudo beforethe command. If you don’t 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 emulatorsconsumemore system resources and take a longer time to start. A better alternative is to use Chromebrowser for basic testing. Open Chrome systemmenu then selectMore tools -> JavaScript Console.Click the mobile phone icon on the top menu bar to enable device mode, see Figure 2.4. Then youcan select different devices as rendering targets, e.g. Apple iPhone 4.

⁷http://sass-lang.com/

Get started 16

Figure 2.4. Use Chrome device mode to test Ionic apps

2.3.3 Use Chrome DevTools for remote debugging

For Android platform, when Ionic app is running in the emulator or real device, we can use ChromeDevTools⁸ to debug the running app. Go to chrome://inspect/#devices in Chrome and you should

⁸https://developers.google.com/web/tools/chrome-devtools/

Get started 17

a list of running apps. Click inspect to launch DevTools to inspect the running app. If you cannotsee the app, make sure you can see the device listed in the result of adb devices command.

2.4 Test and run

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

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 runningIonic app.

Listing 1.14. Start iOS emulator to test the app

1 $ ionic emulate ios

Get started 18

Figure 2.5. Running Ionic blank app in iOS emulator

Get started 19

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 emulatorrunning Ionic app.

Listing 1.17. Start Android emulator to test the app

1 $ ionic emulate android

Get started 20

Figure 2.6. Running Ionic blank app in Android emulator

Get started 21

2.5 Ionic Lab

If you prefer a GUI tool instead of the command line, Ionic Lab⁹ is your best choice. Ionic Lab is adesktop 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/

Get started 22

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 refreshes app preview automatically.

You can also manage Cordova plugins used in the app using Ionic Lab. As in Figure 2.9, select theplugin name to install a plugin.

Get started 23

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 bydrag-and-drop. After the basic app skeleton is created, we can export the app code as a ZIP file oruse it by Ionic CLI as app template.

¹⁰http://ionic.io/products/creator

Get started 24

Figure 2.10. Ionic Creator

Ionic Creator supports sharing app prototypes using URL, emails and TXTs, which is very good forcustomers, designers and developers to collaborate. Developers can create prototypes quickly andcommunicate 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 $ ionic start [appName] creator:ff7342de3f63

2.7 Upgrade Ionic version

After a new version of Ionic framework is released, we can upgrade to the new version easily.We justneed to update the version number in bower.json and run bower install to install the new version.For example, to upgrade Ionic to version 1.2.4, we just need to update ionic in devDependencies todriftyco/ionic-bower#1.2.4, see Listing 1.19.

Get started 25

Listing 1.19. Upgrade Ionic version

1 "devDependencies": {

2 "ionic": "driftyco/ionic-bower#1.2.4"

3 }

3. Hacker News appAfter we have prepared local Ionic development environment and learned the basic of developingIonic apps, it’s 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 popularHacker News¹ using Ionic.

3.1 Why Hacker News app

Hacker News app is a good example for following reasons:

• Hacker News is popular so it’s 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 it’s a good example of bothIonic and Firebase.

3.2 User stories

To describe the app’s requirements, we list main user stories as below.

View top storiesUsers can view a list of top stories on Hacker News and view page of each story.

View commentsFor each story, users can view its comments. For each comment, users can also view repliesto that comment.

Add stories to favoritesUsers can add a story to favorites and see a list of all favorite stories.

Share storiesUsers can share stories to the 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 codeBased on the sample app’s user stories, Ionic’s 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. Thenadd 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 in its GUI.

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

App skeleton code 28

Figure 4.1 Directory structure of app skeleton code

Let’s 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 containsvarious metadata of this project, including name, description, version, license and other information.

App skeleton code 29

This file is also used by npm¹ to manage project’s dependencies.

npm

npm is the package management tool for Node.js. Dependencies are described in dependencies ofpackage.json file. Once dependencies are declared, use npm install to install files of dependentlibraries 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 packagemanager for the web, including frameworks, libraries, assets and utilities. For example, if youwant toadd jQuery³ to your app, just use bower install jquery to install it. You can also add dependenciesto bower.json, then use bower install to install all dependencies.

.bowerrc is the configuration file⁴ for Bower. Listing 4.2 shows Ionic’s default .bowerrc file. It onlyconfigures the path to install components. The path is www/lib by default.

4.2. Ionic default .bowerrc file

1 {

2 "directory": "www/lib"

3 }

BowerThere are hundreds of packages available to install using Bower. Go to Search packages of Bowerwebsite and search the package you want to install and find the package name. Then add packagename and version to bower.json. Once all dependencies are added, using bower install to installthem. Bower also supports installing packages fromGit. You can also use bower install <package

name> --save to install a package and save the package dependency to bower.json at the sametime.

http://bower.io/search/

¹https://www.npmjs.com/²http://bower.io/³https://jquery.com/⁴http://bower.io/docs/config/

App skeleton code 30

4.1.3 config.xml

config.xml is the configuration file for Apache Cordova. More information about this file⁵ can befound 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 alsoadd your own tasks.

4.1.5 ionic.project

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

Listing 4.3. ionic.project file

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 LiveReload’s watch patterns, feelfree to edit ionic.project file.

4.2 hooks

hooks directory contains CordovaHooks⁸ 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 31

4.3 node_modules

node_modules directory contains installed Node.js packages. This directory should not be managedby code repository and it’s ignored by Git by default.

4.4 platforms

For each supported platform, there is a sub-directory in platforms to contain built files for thisplatform. 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 32

4.8.4 css

css directory contains the app’s CSS files. As this app uses Sass, we don’t want to modify files inthis directory directly. After modifying Scss files in scss directory, Scss files will be compiled to CSSfiles and put into css directory.

4.8.5 templates

templates directory contains HTML templates for the app’s states.

4.8.6 js

js directory contains the app’s JavaScript files.

5. Share storiesWhen users see good stories in the app, they may want to share those stories with others. Sharingcan be done via messages, emails, Facebook or Twitter. It’s easy to add sharing feature to the app.

Cordova plugin socialSharing¹ can share images, text, messages via Facebook, Twitter, Email, SMSand WhatsApp. Listing 13.1 shows how to install this plugin.

Listing 13.1. Install socialSharing plugin

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 $cordovaSocialSharing service has follow-ing 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/

Share stories 34

Figure 13.1. Share a story

6. PublishAfter the app has been developed and tested, it’s time to publish it. This chapter covers some topicsregarding app publishing.

6.1 Icons & splash screens

Before the app can be published, we need to replace the default icons and splash screens. Ioniccan generate icons and splash screens from source images to create images of various size for eachplatform. We only need to provide an image for icon and another image for splash screen, then Ioniccan generate all necessary images. Source images can be png file, psd file from PhotoShop or ai filefrom Adobe Illustrator.

For icons, the source image should be icon.png, icon.psd or icon.ai file in resources directoryof the Ionic project. The icon image should have a 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. Thesplash screen should have a size of at least 2208x2208 px.

Listing 14.1. Generate icons and splash screens

1 $ ionic resources --icon

2

3 $ ionic resources --splash

4

5 $ ionic resources

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

directory.

Publish 36

Figure 14.1. Generated icons and splash screens

6.2 Deploy to device

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

Publish 37

Ionic CLI command ionic run ios --device and ionic run android --device can also be usedto deploy apps to the 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 whichallows users to view Ionic apps without installing them.

1. Create an account in Ionic.io².2. Use CLI command ionic upload to upload the app.3. Install Ionic View from the app store.4. 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

Publish 38

Figure 14.2. Ionic View

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

Publish 39

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

7. Thank youThank you for reading sample chapters of this book. You can purchase the complete book atLeanpub¹.

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