You are on page 1of 43

Build Mobile Apps with Ionic and Firebase
A 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 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

. . . .1 Start local server . . . . . . . . . . . . .6 Source code . . . . 1. . . . . . . . . Get started . . . . . 2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4 Test and run . . . . . . . . . . . . . . . . . . . . . . . 2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1 Hybrid mobile apps 1. .4 Maps . . . . . . 1. . . . 2. . . . . . . . 2. . . . . . . 23 23 23 4.3. . . . . . . . . . . . . 1. . . . . .2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3. . . . . . . .1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4 Firebase . . . . . . . . Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5 About this book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2. . . . . 4. . . . . . . . . . . . . . . . . .2 bower. . . . 2. . . . . . . . . . . .2. . . . . . . . . . . . . . . . . . .2 Use Chrome for development 2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 4 4 5 6 6 6 9 11 13 13 13 14 15 17 19 21 3. . . . . . . .2. . . .1 iOS . . . . . . . . 4. . . . . . . . . . . . . . . . . . . . . 2. . . . . . . . . . . . . .2. . . . .Contents 1. . . . . . . . . .6 Ionic Creator . . . . . . . . . . . . . . .2 User stories . . . . . . . . .json and . . . .2 Android . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2 Tabbed app . . Hacker News app . . . . . . . . . . . . . . . . . .3 Ionic framework . . . . . 1 1 2 2 3 3 3 2. . . . . . . . . . . . . . . . .1 Why Hacker News app . 1. .1 iOS . . . . . . . . . . . . . . . . . . . . . . . .1 package. . . . . . . . . 2. . . . . . . . . . . . . . . . . . . . . . .1 Blank app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . App skeleton code . . . . . . . . . . . . 4. .json . .1 Root directory . . . . . . .1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3. . . . . . . . . . 1. . . . . .bowerrc 24 25 25 26 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5 Ionic Lab . .1. . .3 Development . . . . . .4. . . . .1 Prepare local environment . . . . . . . . . . . . .2 Create app skeleton . . . . . . . . . . . . . . . . . . 2. . . . . .2 Android . . . . . . . . . 2. . . . . . . . . . . . . . . . . . . . . . . . .2 Apache Cordova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3. . . . . . . . . . . . . .3 Sidemenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4. . . . . . . . . . . . . . 2. . . . . . . . . . . . . . . . . . . . . . 2. . . . . . . . . . . . . . . . . . . . . . .1. . . . 2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2. . .

. . . . Thank you . . . . . . . . . . . . . . . . . . . . Share stories . . .1 Icons & splash screens . . . . . . . . . . . . . . . . . . . . . . . . . .3 4. . . . . . . . . . . . . . 4. . .8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1 index. . . . . . . . . . . . . . . . plugins . . . . . . . . . . . . . . . . . . . . . . www . . . . . . . . . 4.CONTENTS . . . 4.2 lib . . . . . . . . . . . . . . . . 27 27 27 27 28 28 28 28 28 28 28 28 28 29 29 29 5. . . . . . . . . . . . . . . 6. . . . .1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4. . . . . . . . . . . . . . . . . . . . . . . . . . .6 4. . . . . . . .8. . . . . . . 30 6. . . . . . . . . .3 img . . . . . . . . . . . . .4 4. . . . 4. . . . . . . . . . . . . . . . . . . . 32 32 33 34 7. . . . . . . .6 js . . . . . . . . . . .3 View and share with Ionic View . . . . . . . .3 config. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4.5 ionic. 4. . . . . . . . . . . . . . . . . .js . . . . . .2 Deploy to device . . . . . 37 4. . . . . . . . . . . . . . . . . . . .8 4. .1. . . . . .8. .7 4. . . .project hooks . . . . . . . . . . . . . 6. . . . . . . . . . . . . . . . .2 4. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6. . . . . . . . . . . . . . . . . . . . . . . . . . .8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4 css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . scss . . . . . . . . . . . . . . .html . . . . . .8. . . . . . . . . . . . . . . resources . . . . . . . . . . . . node_modules . . . . . . . . 4. . . . . . . . . . . . . . . . . . . . . . platforms . . . . . . . . . . .5 templates . . . . . . . . .xml . . . . . . . . . . . . . . . . . .5 4. . . . . . . . . . . . . . .8. . . .4 gulpfile. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Publish . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2. Comparing to Objective-C/Swift or Java. ³http://recode. 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.net/2015/03/30/sales-from-apple-and-google-app-stores-seen-doubling-by-2018-in-app-advertising-to-triple/ ⁴https://en. e.000+ 240. developers need to use specific programming languages. Apple has said that its App Store generated $10 billion in revenue to developers last year. ¹https://en. 6 and may not be up to date.org/wiki/Mobile_app ²App store statistics is gathered from various sources: 1. A classic example is popular mobile game Flappy Bird⁴. According to a report³ on March 2005.5 million 1. This encourages developers to create more mobile apps.wikipedia. while Google has said it has paid out $7 billion to app developers over the past 12 months. more and more mobile apps have been created to satisfy all kinds of requirements. Table 1.org/wiki/Flappy_Bird .g.7 million 340. The high learning curve for those SDKs creates a burden for developers. 3. The developer claimed that Flappy Bird was earning $50. HTML.g.wikipedia. e.000+ 334. Introduction A mobile app¹ is a computer program designed to run on mobile devices such as smartphones and tablet computers. A lot of individuals and companies make big money on the mobile apps market.1. With the prevalence of mobile devices.000 a day from in-app advertisements as well as sales. To build apps which can be distributed on various app store markets. The revenue of app stores is seen doubling by 2018. SDKs and tools. Table 1. 5. Objective-C/Swift for iOS and Java for Android.1 Hybrid mobile apps Developing mobile apps is not an easy task.1. web development skills.1 shows statistics of major app stores². 1.000+ 100 billion 50 billion 4 billion Prevalence of mobile apps also creates a great opportunity for application developers and software companies. Flappy Bird was developed by Vietnam-based developer Dong Nguyen. 4.

This new type of mobile apps is called hybrid mobile apps. Before making the decision of whether to go with native app or hybrid app. The major drawback is the performance issues with hybrid apps. Certain types of apps.org/wiki/HTML5 ⁶https://cordova. An Apache Cordova application is implemented as a web page. Comparing to native apps. To create mobile apps look like native apps. hybrid apps have their benefits and drawbacks. online forums or products showcasing. WebView loads and runs this web page.Introduction 2 JavaScript and CSS are easier to learn. Building mobile apps with web development skills is made possible by HTML5⁵. JavaScript code can access native APIs through the wrapper. Apache Cordova is just a runtime for web apps.apache. 1. the development team needs to understand the nature of the app. Another important factor to consider is development team’s skill sets. It’s open source¹⁰ and has nearly ⁵https://en. 1. compass. By leveraging responsive web design techniques.apache.org/ ⁷http://phonegap.3 Ionic framework Ionic framework⁹ is a powerful tool to build hybrid mobile apps. Cordova apps can access device’s accelerometer.2 Apache Cordova Apache Cordova is a popular open-source framework to develop hybrid mobile apps. It can support any kinds of web pages. PhoneGap source code was contributed to Apache Software Foundation and new project Apache Cordova was started based on that. camera.org/plugins/ ⁹http://ionicframework. In hybrid mobile apps. the performance of hybrid apps cannot compete with native apps. contacts and more. HTML. It originates from PhoneGap⁷ created by Nitobi. images and other resources. A powerful feature of Cordova is its plugin interface which allows JavaScript code running in web page to communicate with native components.com/driftyco/ionic .com/ ⁸http://cordova. such as games or apps that rely on complex native functionalities. JavaScript and CSS code runs in an internal browser (WebView) that it’s wrapped in native apps. The major benefit is that developers can use existing web development skills and use only one code base for different platforms. we need other UI frameworks to develop hybrid mobile apps. With the help of plugins. hybrid apps can easily adapt to different screen resolutions. Adobe acquired Nitobi in 2011 and provides commercial service upon it.com/ ¹⁰https://github.wikipedia. This web page can reference JavaScript. cannot be built as hybrid apps. There are 680 plugins currently available in Cordova’s plugin registry⁸. Apache Cordova⁶ is the most popular open-source library to develop hybrid mobile apps. such as news readers. CSS. Hybrid apps are suitable for content-centric apps. As the hybrid app is actually running in an internal browser.

Perform great on mobile devices. Firebase is a cloud service to power apps’ back-end. For each story. but also explain related Ionic and Firebase concepts in detail. Frontend developers can use familiar JavaScript code to interact with Firebase.4 Firebase Mobile apps usually need back-end service to work with front-end UI. View comments of stories. After integrating mobile apps with Firebase.6 Source code Source code is available on GitHub¹².com/alexcheng1982/hacker-news-ionic . Features of this app include: • • • • View top stories. The example app can also be viewed using Ionic View with ID 131c3395. CSS and JavaScript skills. modals and popups. Ionic can help to build hybrid mobile apps with similar look and feel as native apps. ¹¹http://angularjs. this book not only talks about how to implement it.g. This is especially helpful for hybrid mobile apps developers with only front-end development skills.5 About this book This book is a complete guide about how to use Ionic framework and Firebase to build hybrid mobile apps.Introduction 3 20. we don’t need to write our own back-end code or manage servers. This book is for front-end developers with basic HTML. This book covers the whole cycle of hybrid mobile apps development.000 stars on GitHub.org/ ¹²https://github. lists. The sample app we build in this book is a client of Hacker News. Firebase works very well with Ionic to eliminate the pain of maintaining our own back-end. This means that there should be back-end code and servers to work with mobile apps. Ionic framework is the main topic of this book. Ionic is popular for following reasons: • • • • Use Angular¹¹ as the JavaScript framework. Add stories to favorites. Leverage Apache Cordova as the runtime to communicate with native platform. It’s organized around implementing above user stories. Share stories. 1. Provide beautifully designed out-of-box UI components. cards. 1. Firebase can provide data storage and user authentication. e. 1. Basic understanding of Angular is also required as Angular is the JavaScript framework used in Ionic.

1.3 Output of installed Xcode command line tools 1 /Applications/Xcode. For Linux and Mac OS X. Open a terminal window and type command in Listing 1. Install Ionic and Apache Cordova 1 $ npm install -g cordova ionic You may need to have system administrator privilege to install.3. 2. Listing 1.1 iOS Developing iOS apps with Ionic requires Mac OS X and Xcode.2. ¹http://nodejs. 2. we need to set up local development environment first. start a command-line window as administrator. Check installation status of Xcode command line tools 1 $ xcode-select -p If you see output like Listing 1.1.app/Contents/Developer Otherwise type command in Listing 1.apple.org/ ²https://developer. After installation of Ionic and Cordova. use sudo. Install Xcode² and Xcode command line tools on Mac OS X. then command line tools have already been installed. For Windows.2. Listing 1.4 to install.com/xcode/ . Get started Before we can build Ionic apps.2. Then use npm to install Ionic command-line tools and Apache Cordova. we can use Ionic CLI ionic to start developing Ionic apps.1 Prepare local environment Install Node. Listing 1.js¹ on local machine first.

It’s recommended to install Android Studio³ which provides a nice IDE and Android SDK tools. To modify PATH environment on Linux and Mac OS X.android.5. Run android in tools directory to start Android SDK Manager to install platform tools and other required libraries. add SDK’s tools and platform-tools directories in your PATH environment.bash_profile file to update PATH. To run iOS simulator using Ionic CLI.1. Stand-alone SDK tools is just a ZIP file. then add /Development/android-sdk/tools and /Development/androidsdk/platform-tools to PATH environment. Install Xcode command line tools 1 $ xcode-select --install After installation finished.4. If you don’t want to use Android Studio. edit ∼/. Android SDK must be installed.2 Android To develop Ionic apps for Android. Suppose that SDK tools is unpacked into /Development/android-sdk. the Android SDK is installed into directory /Users/<username>/Library/Android/sdk. so SDK’s commands can be found by Ionic.1. unpack this file into a directory and it’s ready to use. use xcode-select -p to verify. Listing 1. Make sure required SDK platform is installed. ³http://developer.com/sdk/installing/index. npm package ios-sim is required. you can install stand-alone SDK tools⁴.5 Get started Listing 1.com/about/versions/android-5. Install ios-sim using command in Listing 1.html .html?pkg=studio ⁴http://developer.android.html?pkg=tools ⁵https://developer. You need to install the platform tools and at least one version of the Android platform.5. Install ios-sim package 1 $ npm -g install ios-sim 2.android. For Android Studio. The downloaded SDK only contains basic SDK tools without any Android platform or third-party libraries. Android API level 22⁵ is required to run Ionic apps.com/sdk/installing/index. After installing Android SDK.

We can choose one of these templates to create the skeleton code of the app.1. see Figure 2. Click Start menu.2. Standalone SDK tools is more likely to have configuration issues. Use ionic start to create apps. Click Advanced System Settings to open a dialog. Ionic provides four different types of application templates. 2. 3.2 Create app skeleton After local development environment is set up successfully. Append the path of tools and platform-tools directories to the end of PATH variable. 2.7.2. 2. the second argument is the template name. 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. 4.6 Get started Listing 1. . Use blank app template 1 $ ionic start blankApp blank 2. It’s highly recommended to use Android Studio instead of stand-alone SDK tools. then right-click Computer and select Properties.2 Tabbed app This template tabs generates apps with a header at the top and tabs at the bottom. List 1. 1. Click Environment Variables in the dialog and find PATH variable in the list then click Edit. it’s time to create new Ionic apps.6.1 Blank app This template blank only generates basic code for the app. The first argument is name of the new app.

Use tabs app template 1 $ ionic start tabsApp tabs 7 .8.Get started List 1.

App created using tabs template .1.8 Get started Figure 2.

Get started 9 2. Use sidemenu app template 1 $ ionic start sidemenuApp sidemenu .2. see Figure 2. List 1.3 Sidemenu This template sidemenu generates apps with a side menu which opens itself when sliding.2.9.

10 Get started Figure 2. App created using sidemenu template .2.

3. see Figure 2. List 1.10.Get started 11 2.4 Maps This template maps generates apps with a map in the center.2. Use maps app template 1 $ ionic start mapsApp maps . It’s useful for geo-location related apps.

App created using maps template .12 Get started Figure 2.3.

e. so when any HTML. Ionic sets up livereload by default. Listing 1. 2.11.1 Start local server To develop and test Ionic apps in your browser. There is no need to refresh page manually.4. If you see permission denied errors when running ionic command.com/ .3.13 Get started 2. Add Sass support 1 $ ionic setup sass 2. Click the mobile phone icon on the top menu bar to enable device mode. Open Chrome system menu then select More tools -> JavaScript Console.3 Development If you want to use Sass⁶. If you don’t want to use sudo command. use following command to add Sass support. Then you can select different devices as rendering targets. try to add sudo before the command. Apple iPhone 4.3.g. Open your browser to http://localhost:8100/ and you should see the UI of Ionic app. JavaScript or CSS code is changed. use ionic serve to start a local test server. see Figure 2. A better alternative is to use Chrome browser for basic testing. The default port is 8100. modify file permission of npm directory to make sure current user has write permission. it automatically refresh the page.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. ⁶http://sass-lang.

you need to configure platforms support for your app. it’s time to test on device simulators and real devices.4 Test and run After the app is tested using browsers. .4. Use Chrome device mode to test Ionic apps 2.14 Get started Figure 2. First.

14. Listing 1. see Figure 2. Listing 1. Build for iOS 1 $ ionic build ios Then start the emulator and test your app.12.Get started 15 2. Start iOS emulator to test the app 1 $ ionic emulate ios .4.13.5 for a screen-shot of iOS emulator running Ionic app. Add iOS platform 1 $ ionic platform add ios Then build the app for iOS platform.1 iOS Listing 1.

16 Get started Figure 2. Running Ionic blank app in iOS emulator .5.

4.Get started 17 2.2 Android Listing 1.17. see Figure 2. Add Android platform 1 $ ionic platform add android Then build the app for Android platform. Listing 1.16.15.6 for a screen-shot of Android emulator running Ionic app. Listing 1. Start Android emulator to test the app 1 $ ionic emulate android . Build for Android 1 $ ionic build android Then start the emulator and test your app.

18 Get started Figure 2.6. Running Ionic blank app in Android emulator .

io/ . run and upload Ionic apps.5 Ionic Lab If you prefer a GUI tool instead of command line.ionic. click Serve to start the test server and preview the app in the right panel.19 Get started 2. ⁷http://lab. build. Ionic Lab is a desktop app to create. Figure 2. Ionic Lab⁷ is your best choice. Create app in Ionic Lab After an app is created. preview.7.

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

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

22 Get started Figure 2. Developers can create prototypes quickly and communicate with customers to get feedback. developers can use Ionic CLI to export the prototypes and start building the apps. Once customers are satisfied with the prototypes. creator:ff7342de3f63 is the unique ID of the app created by Ionic Creator. see Listing 1. Ionic Creator Ionic Creator supports sharing app prototypes using URL.18.18. Use Ionic CLI to export Ionic Creator apps 1 $ ionic start [appName] creator:ff7342de3f63 .10. which is very good for customers. emails and TXTs. designers and developers to collaborate. Listing 1.

we need to build a good sample app. 3.ycombinator. we are going to create a mobile app for the popular Hacker News¹ using Ionic. • Hacker News has a Firebase-based API² to retrieve its data.2 User stories To describe the app’s requirements.com/ ²https://github.3. To better explain Ionic framework. ¹https://news. Share stories Users can share stories to social network. 3. For each comments. users can view its comments. In this book. View comments For each story.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. it’s time to dive into the details of Ionic framework. Add stories to favorites Users can add a story to favorites and see a list of all favorite stories. • This app represents a large number of content-centric mobile apps suitable for Ionic. we list main user stories as below. This book describes concepts and techniques of Ionic by implementing these user stories. Hacker News app After we have prepared local Ionic development environment and learned the basic of developing Ionic apps. users can also view replies to that comment.com/HackerNews/API . so it’s a good example of both Ionic and Firebase. View top stories Users can view a list of top stories on Hacker News and view page of each story.

Set up Sass and platforms 1 2 3 $ ionic setup sass $ ionic platform add ios $ ionic platform add android When using Ionic Lab. the directory structure looks like Figure 4. Use ionic start hacker_news_app sidemenu to create the basic code structure of this app.1.1. Listing 4. . Ionic’s sidemenu template is a good start point for this app.4. Open the project directory with your favorite text editors or IDEs. Then add Sass support and platforms to this app. App skeleton code Based on the sample app’s user stories.1 can be done on its GUI. all the setup in Listing 4.

1. description.js project.1 package. 4. version. license and other information.25 App skeleton code Figure 4. This file contains various metadata of this project.json package. .1 Directory structure of app skeleton code Let’s walk-through this code structure and explain each component. including name.1 Root directory 4.json file at the root directory is a JSON file describes this Node.

¹https://www.json. Dependencies are described in dependencies of package.json and .io/docs/config/ . use npm install to install files of dependent libraries into node_modules directory.2.com/ ²http://bower. using bower install to install them. The path is www/lib by default.json and .2 bower. 4. Once dependencies are declared.json at the same time.npmjs. It only configures the path to install components. Ionic default . Go to Search packages of Bower website and search the package you want to install and find the package name.bowerrc bower.json file. 4.json. Then add package name and version to bower.com/files/package.bowerrc file 1 2 3 { "directory": "www/lib" } Bower There are hundreds of packages available to install using Bower. Once all dependencies are added. http://bower. Bower is the package manager for the web. libraries. if you want to add jQuery³ to your app. just use bower install jquery to install it. . npm npm is the package management tool for Node.bowerrc at the root directory are both used by Bower².com/ ⁴http://bower.bowerrc file. assets and utilities.json . then use bower install to install all dependencies.1.npmjs. For example. Bower also supports installing packages from Git.bowerrc is the configuration file⁴ for Bower.App skeleton code 26 This file is also used by npm¹ to manage project’s dependencies.io/ ³https://jquery. https://docs.js. You can also add dependencies to bower. Listing 4.io/search/ . You can also use bower install <package name> --save to install a package and save the package dependency to bower. including frameworks.2 shows Ionic’s default .

watchPatterns is the globbing pattern⁷ of LiveReload to watch for file changes. More information about this file⁵ can be found at Apache Cordova website.5 ionic. ionic. By default two tasks sass and watch are run.com/ ⁷http://gruntjs.html#The%20config.3.js gulpfile.project file 1 2 3 4 5 6 7 8 9 10 11 12 { "name": "hacker_news_app". By default.org/docs/en/edge/guide_appdev_hooks_index.xml is the configuration file for Apache Cordova.xml config. 4. 4. "watchPatterns": [ "www/**/*".3 config.project ionic. 4.js is the config file for gulp⁶.App skeleton code 27 4.html#Hooks%20Guide . "!www/lib/**/*" ] } If you want to add more gulp tasks to run on startup or modify LiveReload’s watch patterns.3. feel free to edit ionic. Listing 4. it’s a simple JSON file.4 gulpfile.2 hooks hooks directory contains Cordova Hooks⁸ which are special scripts to customize Cordova commands.project file. You can also add your own tasks.apache. because www/lib contains third-party packages installed by Bower. "watch" ].1. "gulpStartupTasks": [ "sass".project is the project configuration file for Ionic.apache.md.md. As in Listing 4. gulpStartupTasks is the list of gulp tasks to run before running local test server. LiveReload watches for www directory without www/lib sub-directory.org/docs/en/edge/config_ref_index. "app_id": "".xml%20File ⁶http://gulpjs.1. Some gulp tasks have already been defined. ⁵http://cordova.com/configuring-tasks#globbing-patterns ⁸http://cordova.1.

8.html is the entry point of the app.1 index. 4. This app has ios and android sub-directories for iOS and Android platforms.App skeleton code 28 4. 4. 4. 4.5 plugins This directory contains various Cordova plugins used in this app.4 platforms For each supported platform. 4.js packages. This directory should not be managed by code repository and it’s ignored by Git by default.8 www This directory contains the source code of your app.html index.7 scss This directory contains Scss files. 4.8. 4.3 img img directory contains images used in the app.8. . 4.3 node_modules node_modules directory contains installed Node. there is a sub-directory in platforms to contain built files for this platform.6 resources This directory contains icons and splash screen images.2 lib lib directory contains files of dependent packages installed by Bower.

6 js js directory contains the app’s JavaScript files.8. 4.8. Scss files will be compiled to CSS files and put into css directory. 4.4 css css directory contains the app’s CSS files. .5 templates templates directory contains HTML templates for the app’s states.8. As this app uses Sass.App skeleton code 29 4. we don’t want to modify files in this directory directly. After modifying Scss files in scss directory.

title. Listing 13. }. Email. text.5.Message of this sharing. subject . It’s easy to add sharing feature to the app. they may want to share those stories to others.share(story. messages via Facebook.Subject of this sharing. image .com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin. share(message. null.shareStory = function(story) { $cordovaSocialSharing.git After the plugin is installed. Cordova plugin socialSharing¹ can share images. Sharing can be done via messages. emails. SMS and WhatsApp.url).1 shows the sharing window created by socialSharing plugin. link . Facebook or Twitter. Twitter.2. Listing 13. Listing 13.1 shows how to install this plugin. story. Share a story 1 2 3 $scope.2 shows how to share a story.Image contained in this sharing. Install socialSharing plugin 1 2 $ cordova plugin add https://github. subject. image.Link of the shared item. Figure 13. link) method of $cordovaSocialSharing service has following arguments: • • • • message . ¹http://ngcordova.1. null. Share stories When users see good stories in the app. Listing 13.com/docs/plugins/socialSharing/ .

1.31 Share stories Figure 13. Share a story .

splash. then Ionic can generate all necessary images. The splash screen should have size of at least 2208x2208 px. it’s time to publish it.png. we need to replace the default icons and splash screens. the source image should be splash. icon. .6. For icons. The icon image should have size of at least 192x192 px.png. Listing 14. 6. Source images can be png file. the source image should be icon.ai file in resources directory of the Ionic project.ai file in resources directory.1. We only need to provide an image for icon and another image for splash screen. Ionic can generate icons and splash screens from source images to create images of various size for each platform. This chapter covers some topics regarding to app publishing.psd or splash.psd or icon. 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. For splash screens. psd file from PhotoShop or ai file from Adobe Illustrator.1 Icons & splash screens Before the app can be published. Publish After the app has been developed and tested.

For Android. open generated project in platforms/ios directory with Xcode and use Xcode to deploy to device. For iOS.33 Publish Figure 14.2 Deploy to device We can also deploy the app to device for testing. open generated project in platforms/android directory with Eclipse or Android Studio to deploy to device.1. . Generated icons and splash screens 6.

Publish 34 Ionic CLI command ionic run ios --device and ionic run android --device can also be used to deploy apps to device. Use CLI command ionic upload to upload the app.io . For iOS. 3. Ionic View is an app created by Ionic which allows users to view Ionic apps without installing them. 1. See Figure 14. ¹https://github. ios-deploy¹ needs to be installed using npm. 2.com/phonegap/ios-deploy ²https://apps. Create an account in Ionic.ionic.io². Install Ionic View from app store.2 for the screen-shot of Ionic View. 4. 6. Log into Ionic View and view the uploaded app.3 View and share with Ionic View We can easily view and share the app with Ionic View.

35 Publish Figure 14.2. Ionic View .

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

You can purchase the complete book at Leanpub¹.com/build-mobile-apps-with-ionic-and-firebase . ¹https://leanpub. Thank you Thank you for reading sample chapters of this book.7.