73,19 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Sprache: Englisch
An end–to-end journey, empowering you to build real-time, scalable, and interactive mobile applications with the Ionic framework
About This Book
- Develop engaging mobile experiences with a native-looking UI in Ionic and AngularJS.
- Use out-of-the-box Ionic functionalities, customize existing components, and add new components with this comprehensive course.
- Learn Ionic by creating three complete mobile applications
Who This Book Is For
If you are a web developer who wants to build hybrid mobile app development using the Ionic framework, then this comprehensive course is best-suited for you.
What You Will Learn
- Get to know about Hybrid Apps and AngularJS
- Set up a development environment to build Hybrid Apps
- Navigate around components and routing in Ionic
- Authenticate users using an e-mail password, Twitter, Facebook, Google+, and LinkedIn
- Retrieve data and store it using Firebase
- Access native device functionalities such as the camera, contact list, e-mail, and maps using NG-Cordova
- Integrate PhoneGap plugins with NG-Cordova
- Test your apps to improve and optimize performance
In Detail
Hybrid Apps are a promising choice in mobile app development to achieve cost-effectiveness and rapid development. Ionic has evolved as the most popular choice for Hybrid Mobile App development as it tends to match the native experience and provides robust components/tools to build apps. The Ionic Complete Developers course takes you on an end–to-end journey, empowering you to build real-time, scalable, and interactive mobile applications with the Ionic framework.
Starting with an introduction to the Ionic framework to get you up and running, you will gradually move on to setting up the environment, and work through the multiple options and features available in Ionic to build amazing hybrid mobile apps. You will learn how to use Cordova plugins to include native functionality in your hybrid apps.
You will work through three complete projects and build a basic to-do list app, a London tourist app, and a complete social media app. All three projects have been designed to help you learn Ionic at its very best. From setting up your project to developing on both the server side and front end, and best practices for testing and debugging your projects, you'll quickly be able to deliver high-performance mobile apps that look awesome.
You will then hone your skills with recipes for cross-platform development. Integrating Ionic with Cordova will bring you native device features, and you will learn about the best modules from its ecosystem. Creating components and customizing the theme will allow you to extend Ionic. You'll see how to build your app to deploy to all platforms to make you a confident start-to-finish mobile developer.
This Learning Path combines some of the best that Packt has to offer in one complete, curated package. It includes content from the following Packt products:
- Getting Started with Ionic – by Rahat Khanna
- Ionic by Example – by Sani Yusuf
- Ionic Cookbook – by Hoc Phan
Style and approach
This course shows you how to get up and running with the Ionic framework. It doesn't just give you instructions, expecting you to follow them. Instead, with a hands-on approach, it demonstrates what Ionic is capable of through a series of practical projects that you can build yourself.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 545
Veröffentlichungsjahr: 2017
Ähnliche
Table of Contents
Ionic : Hybrid Mobile App Development
Ionic : Hybrid Mobile App Development
Create cutting-edge, hybrid mobile applications using the Ionic framework
A course in three modules
BIRMINGHAM - MUMBAI
Ionic : Hybrid Mobile App Development
Copyright © 2017 Packt Publishing
All rights reserved. No part of this course may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this course to ensure the accuracy of the information presented. However, the information contained in this course is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this course.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this course by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
Published on: March 2017
Production reference: 1080317
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78829-311-2
www.packtpub.com
Credits
Authors
Rahat Khanna
Sani Yusuf
Hoc Phan
Reviewers
Nikola Brežnjak
Luca Mezzalira
Massimiliano Giroldi
Indermohan Singh
Content Development Editor
Narendrakumar Tripathi
Graphics
Jason Monteiro
Production Coordinator
Arvindkumar Gupta
Preface
Ionic has evolved as the most popular choice for Hybrid Mobile App development as it tends to match the native experience and provides robust components/tools to build apps. The Ionic Complete Developers course takes you on an end–to-end journey, empowering you to build real-time, scalable, and interactive mobile applications with the Ionic framework.
First module follows a fast-paced practical approach that will get you up-and-running with the Ionic framework. This guide equips developers with the basic knowledge needed to use modern web technologies such as Angular to build amazing hybrid mobile apps with Ionic.
Second module shows you how to get started with the Ionic framework immediately. But it doesn't just give you instructions and then expect you to follow them. Instead, it demonstrates what Ionic is capable of through three practical projects you can follow and build yourself.
Third module follows a recipe-based approach to cross-platform mobile app development, where each task is explained in a conversational and easy-to-follow style. It will take you through the process of developing a cross-platform mobile app using just HTML5 and the JavaScript-based Ionic. It covers how Ionic integrates with Cordova to support native device features, and you will discover how to take advantage of existing modules around its ecosystem. You will also delve into advanced topics, including how to extend Ionic to create new components. Finally, the module will walk you through customizing the Ionic theme and building your app so that it can be deployed to all platforms.
What this learning path covers
Module 1, Getting Started with Ionic, This module equips any web developer with the practical knowledge required to use modern web technologies in building amazing Hybrid Mobile Apps using Ionic. This fast-paced, practical module that explains all the important concepts of AngularJS and Cordova framework required to develop Ionic apps. Then, it gives you a brief introduction to Hybrid Mobile Applications. It will guide you through setting up the development environment for different mobile platforms and through the multiple options and features available in Ionic, so you can use them in your mobile apps. Features, such as the side menu, tabs, touch interactions, and native features, such as bar code, camera, and geolocations, are all covered. Finally, we'll show you how to use Cordova plugins and use Ionic cloud services to empower your mobile apps.
Module 2, Ionic by Example, This module is is a step-by-step guide that covers the very basics of Ionic aiming to equip the reader with all the necessary knowledge needed to understand and create Ionic apps. You will start off by learning a bit about the history of Ionic, and then slowly learn to get it set up and work with its great features. You will learn to work with Ionic and create four different Ionic apps, with each app teaching you different important features of Ionic. You will also learn to connect your app to a database using Firebase. This module will also provide you with links to some great resources to further your quest for more advanced Ionic knowledge.
Module 3, Ionic 2 Cookbook, Second Edition, This module will take you through the process of developing a cross-platform mobile app using just HTML5 and Javascript based on Ionic 2, which is the latest version of Ionic using the Angular 2 framework. You will start by getting familiar with the CLI and learning how to build and run an app. You will touch on common features of real-world mobile applications, such as authenticating a user, getting data, and saving data using either Firebase or local storage. Next, the module will explain how Ionic integrates with Cordova to support native device features using ngCordova and take advantage of the existing modules around its ecosystem. You will also explore advanced topics of extending Ionic to create new components. Finally, the module will show you how to customize the Ionic theme and build an app for all platforms.
What you need for this learning path
Module 1:
For this module, you require a system with Windows, Mac, or Linux OS. You need to install NodeJS and NPM to manage dependencies for different projects. This module will guide you through the setup for mobile app development platforms for iOS and Android. Test devices having Android and iOS would be required to test the mobile apps.
Module 2:
Firstly, you will need a Windows, Linux, or Mac computer to follow the code samples in this module. A beyond basic or intermediate knowledge of JavaScript and HTML5 is certainly essential to understand concepts discussed in this module. A basic understanding of Cordova is expected at the very least. You are expected to also have an idea of how to issue commands in a terminal window. You should also have access to a working Internet connection, and a Google account is necessary for Chapter 9, Connecting to Firebase.
Module 3:
Who this learning path is for
If you are a web developer with basic knowledge of working with modern web technologies, this comprehensive course is best-suited to empower to build hybrid mobile app development using the Ionic framework.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this course—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.
To send us general feedback, simply e-mail <[email protected]>, and mention the course's title in the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a course, see our author guide at www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt course, we have a number of things to help you to get the most from your purchase.
Downloading the example code
You can download the example code files for this course from your account at http://www.packtpub.com. If you purchased this course elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
You can download the code files by following these steps:
You can also download the code files by clicking on the Code Files button on the course's webpage at the Packt Publishing website. This page can be accessed by entering the course's name in the Search box. Please note that you need to be logged in to your Packt account.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
The code bundle for the course is also hosted on GitHub at https://github.com/PacktPublishing/Ionic-Hybrid-Mobile-App-Development. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our courses—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this course. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your course, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.
To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the course in the search field. The required information will appear under the Errata section.
Piracy
Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors and our ability to bring you valuable content.
Questions
If you have a problem with any aspect of this course, you can contact us at <[email protected]>, and we will do our best to address the problem.
Part 1. Module 1
Getting Started with Ionic
Get up and running with developing effective Hybrid Mobile Apps with Ionic
Chapter 1. All About Hybrid Mobile Apps and Ionic Framework
In this chapter, we are going to learn what a Hybrid Mobile Application is and the current technology ecosystems supporting it. We will also be introduced to Ionic Framework and the reasons that should lead you to decide on Ionic as your preferred choice. The topics covered in this chapter will be as follows:
The term 'website' has become a word of the past. 'App' is the new buzzword, and the world is moving away from old software systems to new jazzy apps. App, or application in terms of a software, is a more sophisticated system, which involves enabling a lot more features to the user rather than just providing static information like a traditional website.
Web apps have a lot of limitations such as requiring Internet connectivity all the time and restrictions on fully utilizing the hardware capabilities of the device on which you are accessing them. Mobile apps, on the other hand, defy all of these limitations and provide an engaging user experience.
Mobiles have emerged as the most popular channel for user engagement. The number of smartphone users is expected to grow to nearly 2.16 billion in 2016 (http://www.emarketer.com/Article/2-Billion-Consumers-Worldwide-Smartphones-by-2016/1011694), which is more than one quarter of the global population. The growth rate of smartphone usage has been tremendous and is expected to grow day by day.
Mobile adoption is associated with some of the following trivial points:
After reading through these points, one must think that the perfect mobile strategy has become a necessity for every business. Going mobile is not a choice any more, rather everyone has to decide which way to go: mobile-first, mobile-only, or mobile-after. If you are a new start-up, an existing enterprise, or an individual developer, Native Mobile apps have a steep learning curve and high development costs for covering all platforms. Mobile ecosystems have become fragmented with multiple OSs such as iOS, Android, Windows, and numerous OEMs such as Samsung, LG, HTC, and others. A Hybrid Mobile Application, about which you will learn in this chapter, is the perfect savior for you. Ionic Framework is a popular hybrid app development framework that helps us in creating Native-looking Apps for multiple platforms using a single codebase.
Introducing a Hybrid Mobile Application
A common misconception is that a Hybrid Mobile Application cannot be installed on the device, but that is wrong. A Hybrid Mobile App is like any other Native Mobile App, which can be installed on devices and published using App stores. They can access the device hardware such as camera, accelerometer, GPS, and so on.
As we have discussed, there are multiple mobile platforms such as iOS, Android, Windows, plus many new ones such as Firefox OS and Tizen that have emerged lately. The development environment and programming languages are different for each of these. We have to code using Objective-C for iOS apps, Java (Android SDK) for Android apps, C#/VB.net with XAML for Windows Phone apps. If any entity requires its mobile presence across all these platforms, multiple teams and different codebases need to be maintained, which is too cumbersome.
Hybrid Mobile Apps can be developed for multiple platforms using a single codebase. However, some specialized code needs to be written for each platform to harness the native APIs for it.
Types of Hybrid Mobile Apps
There are broadly two categories of Hybrid Mobile Apps in the industry:
WebView-based Hybrid Apps
Each native mobile platform has a common control/component called a WebView, which is nothing but a Chromeless browser. This component is utilized to open locally hosted web content, for example, HTML pages, CSS files, and JavaScript code. HTML5 and CSS3 provide capabilities to develop responsive apps, which can render nicely on multiple screen sizes. The web technologies have evolved to handle the touch interactions that make them a perfect candidate for developing solutions for smartphones and tablets. The example of development platform and frameworks using this approach are Cordova, Ionic Framework, KendoUI Mobile, F7, Mobile Angular UI, Onsen UI, and many more.
Cross-compiled Hybrid Apps
Another category of hybrid app involves cross-compiling multiple native apps from a single programming language. For example, the developer will code using a single language, say, A, which can be converted at compile time or run time into native language components. Generally, these types of frameworks and platforms leverage creating a bridge or a mapping of native components to their custom constructs in the programming language intended for development. Examples for this category are Xamarin (C#), Kony (JS), Corona (C Lang.), Qt(C++), and many more.
We will be talking about WebView-based Hybrid Apps in this book as they are more suitable for large-scale and complex Mobile Apps. In this next section, we will learn more about the anatomy of Hybrid Apps and how they are capable of developing Native Apps for multiple platforms.
Anatomy of a Hybrid Mobile App
Hybrid Apps are no different from Native Mobile Apps that are installed on any mobile platform such as Android or iOS. On any platform, the core device APIs for hardware such as GPS, Camera, Accelerometer, and so on will be exposed by the Mobile OS. The following diagram shows the anatomy of Hybrid Mobile App:
These APIs are consumed by the native code of your Hybrid Apps. All the components of Hybrid Apps are discussed in detail in the following section.
Custom WebView
Each native platform development kit has a component called WebView, which is nothing but a Chromeless browser control. WebView has the capability to open local or remote web content, which is exploited by Hybrid App frameworks to display the UI of the app using web technologies. This is the most important component of a Hybrid App and has a significant role in deciding the performance of the app.
WebViews in popular platforms such as iOS and Android used to have a different rendering engine and JavaScript engine than the latest browser (Chrome or Safari). Last year, Apple released a new control in its SDK called WKWebView, which uses all the performance optimization such as the Nitro JavaScript engine used by the Safari browser on iOS. On similar lines, Google also released an updated WebView, which uses the rendering engine and JavaScript runtime of Chromium (Chrome browser). Google has also launched a new feature called Updatable WebView from Android (5.0) Lollipop, which enables you to upgrade only the WebView of your Hybrid App.
Crosswalk is an interesting open source project that enables app developers to embed custom WebView into your Hybrid App. With these advancements, Hybrid Apps have become capable of using the latest web features such as WebRTC for real-time multimedia communication, and WebGL for advanced graphics rendering.
Native library
All the Hybrid App development frameworks based on WebView have their own native library. It comprises some basic utility functions that support the Hybrid App such as creating app configs, bootstrap code for Native Apps, customization for the WebView, common error/exception handling logic, and so on. The native library is specific to the mobile platform as it involves interacting with the core OS APIs and components.
The most popular framework, for example, Apache Cordova/Phonegap has an architecture of dividing its native library into a core section and pluggable components called plugins. This helps in reducing the bare minimum size of a Hybrid App. Developers can use only the plugins they require for a specific app. A plugin will include native code for a particular feature and a JavaScript interface exposing the native functionality. For example, if you want to use the Fingerprint Authentication API for iOS, you can just include the plugin for iOS and use it apart from the core. It also enables communities to contribute by developing open source plugins.
Native to JS Bridge
In a WebView-based Hybrid App, the UI is always written using web technologies, and JavaScript is the language for writing logic and hence we need to call our native code from JS and get results to JS also. A bridge has two functions, one is to enable JS to call any native method and the other is to allow native methods to execute callbacks in JS. The bridge comprises different implementations in different platforms to call JS from native. For example, in Android, Java objects are marshalled into the WebView and can be called from the JS. In iOS, JS calls a specific URL scheme, which is interpreted by the native code. The reverse bridge is a simple global JS function that is called by the WebView passing special arguments such as callback results or specific commands.
Using web technologies to develop for mobile
After understanding what is happening inside a Hybrid App, it is important to know how web technologies are used to develop Mobile Apps. We can use simple HTML5, CSS, and JS to create mobile-specific UIs and enable them to be viewed in the WebView discussed previously. But any website, even if it is a mobile web app, should not be directly packaged into a Hybrid App. This is the most popular mistake developers make and then complain about the performance of the Hybrid App.
A Hybrid Mobile App UI needs to have proper separation of concerns and can be best developed using single page architecture(SPA) or MV* architecture. It helps in providing a seamless user experience and provide a Native App such as engagement. It also equips developers with segregated areas to code, for example, writing views using HTML5 markup templates, styling using CSS, and logic in JS.
Ionic Framework uses an open source MV* framework called AngularJS to build robust Native-looking Hybrid Mobile Apps. AngularJS is an extensive topic that cannot be covered here, but we will learn about some basics that are essential in utilizing Ionic Framework to its full potential.
Why use Apache Cordova?
Apache Cordova is a WebView-based Hybrid App development framework used to build cross-platform Native Apps. It is one of the most popular frameworks that has been open sourced by Adobe and is maintained by the Apache Foundation. Adobe maintains another branch with added features named Phonegap. They also have a cloud-based service called Phonegap Build (http://build.phonegap.com), which generates the native builds on the fly so that you do not need to install native SDKs.
It follows the same architecture discussed previously, having a minimal core and ability to add plugins for extra functionality to your app. Apache Cordova has a high number of open source plugins that provide excellent capability to Hybrid Apps. Any developer can also create a custom plugin to expose unique native functionality in a Hybrid App. It also consists of a CLI interface to provide commands for managing plugins and automating builds for multiple platforms. Apache Cordova is a widely tested and accepted framework and is recommended for building Hybrid Mobile Apps from web content.
Introducing Ionic Framework
Ionic Framework is a Hybrid App development framework that enables developers to build Native-looking Mobile Apps using web technologies (HTML5, CSS3, and JS). Ionic Framework is completely open source so that developers can build and publish their apps to the marketplace without any cost.
Ionic is built on top of the AngularJS framework and uses Apache Cordova for building apps from web content. Ionic Framework includes a set of amazing Angular directives that makes it very easy to develop for mobile. For example, ListView, Optimized Touch gestures, Side Menus, Popup, Tabs, and mobile-specific input elements.
Ionic has ready-made UI for mobile components, which helps in rapid application development for Hybrid Mobile Apps. Ionic has native-looking stylesheets for Android and iOS, which automatically get applied based on the platform build.
Ionic Framework has evolved into an ecosystem with a suite of mobile development tools along with the framework itself. Ionic CLI has amazing options such as Ionic Lab and Live Reload, which helps developers save lot of development time. Ionic view is a Native App for iOS and Android where developers can deploy and test their apps on the fly without packaging. Ionic.io is a complete cloud-based backend service platform where developers can manage their app data, view analytics, and manage push notifications from a single console.
Summary
We have learnt all about Hybrid Mobile Applications and how easy it is for a web developer to start building Mobile Apps using Ionic Framework. The concepts mentioned in this chapter will suffice in building apps using AngularJS, Cordova, and Ionic. In the coming chapters, we will build amazing Hybrid Mobile Apps that can be deployed to public app stores. In the next chapter we will learn about setting up the development environment and starting an initial project to bootstrap our development journey.
Chapter 2. Setting up the Environment the Right Way
In this chapter we will learn how to set up our development environment and build a dummy app to verify the correct setup. This chapter also defines the possible and popular issues faced during setup so that you do not face any bottlenecks during the process. The instructions are separated for Windows OS, generic Linux OS, and Mac OS.
As we have discussed, Ionic has evolved into an ecosystem from a basic framework. It is very important that we set up our development tools the right way to leverage the full potential of this ecosystem.
We will be setting up a lot of software just for developing Mobile Apps, but if we want to use the power of developing for multiple platform apps using a single codebase, we have to do this. Any Native App is always built using the Native Development tools and hence we have to install and set up a Native Mobile development environment for all the platforms.
Apart from the build tools of native environments, a dev environment should provide ease of use and speed to the developer. Installing Ionic CLI based on NodeJS and Cordova would provide the extensive power of bootstrapping Ionic Projects with starter templates, managing Cordova plugins, and other dependencies. Code Editor should provide the developer with complete support for the programming languages an app is being built in. We will learn about some popular Code Editors that gel with Ionic App development. We will also build a dummy app to gain confidence of starting the actual development.
The following topics will be covered in this chapter:
Setting up Native Mobile development environments
Native Mobile development environments are specific to your operating system and hence there will be separate instructions for installing on Windows/Mac/Linux. The native environment SDKs are heavy so would require fast Internet speed to download. You need to be on a good network to be able to download it.
For iOS
These days iOS Apps are built for iPhone, iPad and iWatch devices. Objective-C is the primary language used to develop iOS Native Apps. Xcode is Apple's IDE (integrated development environment), which includes a graphical user interface and many other features. iOS SDK is required along with Xcode as it provides additional tools, compilers, and frameworks to build iOS Apps for phones, tablets, and smartwear devices (iWatch).
Note
For developing or building iOS Apps, a Macintosh machine is strictly required so if you do not have a Mac, please skip this section. Mac machines should have OS X 10.9.4 or later.
In order to download the latest version of Xcode and iOS SDK (bundled) for free, please follow these steps:
The website link for downloading Xcode is https://developer.apple.com/xcode/.
Xcode will be downloaded and installed in the Applications folder of your Mac machine.
Installing and running simulators for testing
In order to test our iOS apps, we either require a physical device or we can test it on a simulator. By default, the simulators are present in the Xcode. In order to install different iOS simulators for specific OS versions, please go to https://developer.apple.com/ios/download/.
To run the simulator, open Xcode, right click on the Xcode icon in the dock and go to Open Developer Tools | iOS Simulator. It will open an iOS device such as an iPad or iPhone, which can be changed by going to the top menu option Hardware | Device | Specific Device.
For Android
Android Apps are developed using a Java programming language so installing a Java environment is a requirement for it. Please download the latest JDK 7 (JRE would not work) from http://www.oracle.com/technetwork/java/javase/downloads/index.html. It is required to set the PATH and JAVA_HOME variable to refer to Java and javac binaries (we explain later how to do it).
Apache Ant is a Java build system used by Cordova/Ionic and Android SDK. In order to install Ant properly, download the binary from the link http://ant.apache.org/bindownload.cgi and follow these steps:
Android SDK is available in two variants, one is a standalone SDK and the other is bundled with Code Editor Eclipse or indigenous Android Studio. There are separate binaries for Windows, Linux, and Mac OS. It is recommended to download and set up the standalone SDK for developing Hybrid Apps unless you want to try out native Android development too. We will be discussing setting up the standalone Android SDK only.
Download links
The following are some downloading links:
Setting the environment variables
For Cordova command-line tools to work, or the CLI that is based upon them, you need to include the SDK's tools and platform-tools directories in your PATH.
For Windows
The following are the steps to set up Native Mobile development environments on Windows:
For example,C:\Development\adt-bundle\sdk\platform-tools;C:\Development\adt-bundle\sdk\tools
For Linux/Mac OS
On a Mac you can use a text editor and on a Linux you can use vi editor to create/modify the ~/.bash_profile file, adding a line such as the following, depending on where the SDK installs:
Add the paths for Java and Ant if needed. This line in ~/.bash_profile exposes these tools in newly opened terminal windows. If your terminal window is already open in OS X, or to avoid a logout/login on Linux, run this to make them available in the current terminal window:
Managing Android SDK and emulators
Android has a large fragmentation in the OS versions being used and has different SDK packages for various versions. In the SDK tools, there is an SDK manager that helps to manage different SDK API versions. In order to manage SDK Manager, open SDK Manager.exe in Windows, whereas on a Mac/Linux open a terminal and navigate to the /tools directory in the location where the Android SDK is installed, then execute android sdk.
In Android, to test your apps, install it on an actual physical device or create a new emulator/virtual device using the SDK tools. These next steps should be followed:
Alternative to Android emulators – Genymotion
Android emulators are known to be slow and sloppy. If you want to debug or test your apps on emulators, use the Genymotion emulator as it is faster than the Android emulators. Apart from being fast, it has 20 mobile devices preconfigured to emulate. The Genymotion emulator uses VirtualBox, so install the latest version and then install Genymotion. The link to the Genymotion website is https://www.genymotion.com/.
Ionic development environment
Ionic Framework is based on Apache Cordova, which takes care of build and plugin management. Apache Cordova CLI uses the NodeJS package manager called NPM for dependency management.
Installing NodeJS
NodeJS is a JavaScript-based server-side environment to build backend systems. NodeJS has an efficient package manager that takes care of installing and maintaining a central repository of packages, version management, and dependency management. NPM has become the default dependency manager for a lot of other frameworks apart from NodeJS. Ionic Framework also leveraged this successful package manager so we have to install it for Hybrid App development.
In order to install NodeJS, download the binary for the respective OS—Windows, Linux, or Mac OS from https://nodejs.org/download/.
On a Mac or Linux, you can use a package manager such as brew to install NodeJS:
After the node installation is complete, please type in the following commands to test the installation:
The appropriate installed version for node and npm will be written to the output.
There is a config.json file generated that stores the dependent modules and meta information about the specific NodeJS project.
Basic npm commands
In order to install any npm package, the install command is used. It has an optional flag -g for installing any package globally so that it is accessible from anywhere. All the CLI packages such as Cordova CLI and Ionic CLI will be installed using these commands only. In order to update a package, run the second command:
Installing Cordova CLI and Ionic CLI
Cordova will be installed using the npm utility discussed previously. The Cordova CLI includes a set of scripts to automate the Cordova build process for wrapping of web content into Native Mobile Apps. It also includes commands to manage plugins. As discussed in Chapter 1, All About Hybrid Mobile Apps and Ionic Framework, Cordova is based on an architecture where the core library is included by default, but extra functionality needs to be utilized using plugins.
Installation command for Cordova CLI
In order to install Cordova, use the npm global install command as follows:
Cordova installation can be confirmed by checking the version of the installed package as follows:
The Ionic command-line interface provides an easy-to-use interface to perform basic functions such as creating an app, adding a platform, and building apps. It also provides commands to use Ionic platform services helping in rapid development of Hybrid Apps. Ionic CLI is installed in a method similar to Cordova with the following commands:
Ionic CLI extends the Cordova CLI and hence most of the Cordova commands need not be run directly. They can be run using the ionic keyword, where internally the Cordova package will be used. You can also view a list of exhaustive Ionic commands by executing ionic help.
Basic Ionic CLI commands
Ionic commands help you smoothly create a new project and test it easily while you are developing it. The first command you should learn to execute is the ionic info command. This would help you to know all about your system environment that you have set up so far. If there are any errors, you can debug and resolve them before beginning the development.
The command and a sample output is given here:
Another quick utility command is to go to the Ionic docs for a specific topic:
Please go through the commands in this section in order to understand the steps required to build a dummy app to test the environment.
The next command to learn is to start a new project. Ionic has multiple flags/options along with this command to set up your project initially. The main command is as follows:
The options are many, including –appname to set the name, --no-cordova to create a structure without Cordova (for cloud builds such as a phonegap build service), --template for selecting the initial template, and so on.
If you want to preview your app in a browser during the development phase, this is the most important command for it. It has a handful of useful options for setting a port number, opening a specific browser, printing console logs, and so on:
In order to add a platform, please run the following command:
After adding the platforms we want to build, we can run our app on an actual connected device using this command:
Note
In order to run an app on an Android device, enable Developer Options and check the USB Debugging option in the settings. More info is available at http://developer.android.com/tools/device.html.
We can make the app build for all the platforms in one go or a specific platform by mentioning its name in the following command. It builds the apps locally using the native SDK tools:
Hybrid App development relies on the web view or the browser in the native SDK of the platform. Ionic provides a way to change the browser of a specific app, for example, using the crosswalk browser. There is a command to list the available browsers:
Add a new browser for any platform and also have the ability to revert back:
Or else you can use the following command:
Ionic provides a way to list and manage extra add-ons or browser packages to your app using the Ionic CLI, which we will learn in future chapters.
Building a dummy app
After successfully setting up the environment correctly, you must be excited to build your first app. In this section of the chapter, we will use the commands to learn how to create a sample Ionic-based Hybrid App and build it to run on an actual device or emulator:
Now, as we are in an Ionic project folder, we can run Ionic project-specific CLI commands. Any platform can be added to the project to build the specific app:
We will add an Android platform as it will work on all machines, such as Windows, Linux, or Mac. Ionic will download Android-specific default resources such as icons and splash screens, and also add some important plugins by default. A customized keyboard plugin is bundled with the Ionic app.
In order to test the app and view it in your browser, use the Ionic serve command:This will open the Ionic app in your default browser.
The latest Chrome version provides a way to emulate various mobile device screen sizes. Open Developer Tools (F12), select Console from the top-right corner, and select Emulation. You can alternatively select the mobile icon from the top-left corner of the window. Please see the following screenshot:
Now, we can build the Android App and run it on an actual device or emulator:This will fire up the emulator if there is no connected device, then start the build process. It will generate the .apk file and then deploy it to the emulator or the connected device that is available.
This would be a Eureka moment, seeing your first actual app on the device and playing with it. In the next section we discuss some of the common issues you may have faced during the process and provide solutions for them.
Popular issues faced and solutions
The development environment set up for Ionic Hybrid App development is a lengthy and cumbersome process. It is evident that you may face some issues in installing and setting up all these systems. This section mentions the most common and popular issues faced along with their solutions so that you do not get stuck somewhere:
