Building Hybrid Apps with AngularJS and Ionic
A hybrid app is a type of mobile app that uses a browser window to display its interface. Ionic enables developers to quickly build hybrid mobile apps using the same technologies used to build websites and web applications, primarily HTML, CSS (Cascading Style Sheets), and JavaScript.
Ionic works by embedding a web application inside of a native app by using Cordova. It’s designed to work together with Angular to create a web application for the mobile environment, and includes support for mobile features like user interface controls and responding to touch input.
WHAT IS IONIC
Ionic is a combination of technologies and utilities designed to make building hybrid mobile apps fast, easy, and beautiful. Ionic is built on an ecosystem that includes Angular as the web application framework and Cordova for building and packaging the native app.
Device — This loads the app. The device contains the operating system that manages the installation of apps that are downloaded from the platform’s store. The operating system also provides a set of APIs for apps to use to access various features, such as the GPS location, contacts list, or camera.
Cordova app wrapper— This is a native app that loads the web application code. Cordova is a platform for building mobile apps that can run using HTML, CSS, and JavaScript inside of a native app, which is known as a hybrid mobile app. It’s a utility for creating a bridge between the platform and the application. It creates a native mobile app that can be installed (called the app wrapper in figure 1.1), and it contains what’s called a WebView (essentially an isolated browser window) with a JavaScript API that the web application will run inside.
Cordova JavaScript API— This is the bridge that communicates between the app and the device. The app wrapper has access to both the web application and the native platform through the JavaScript API.
Angular— This is the web application that controls the app routing and function. The Angular web application runs inside of the WebView. Angular is a very popular framework for building powerful web applications. Angular is primarily used to manage the web application’s logic and data.
Ionic— This provides the user interface components rendered in the app. Ionic is built on top of Angular, and is primarily used to design the user interface and experience. This includes visual elements such as tabs, buttons, and navigation headers.
There are three basic types:
Native mobile apps
To create native apps, developers write code in the default language for the mobile platform, which is Objective C or Swift for iOS and Java for Android. Developers compile the app and install it on a device. Using the platform software development kit (SDK), the app communicates with the platform APIs to access device data or load data from an external server using HTTP requests.
Native app advantages
Native app disadvantages
Mobile websites (web apps)
Mobile websites, or web apps, work well on a mobile device and are accessed through a mobile browser. Web apps are websites viewed on a mobile device in a mobile browser, designed specifically to fit a mobile device screen size.
Mobile website advantages
Mobile website disadvantages
Hybrid apps
A hybrid app is a mobile app that contains an isolated browser instance, often called aWebView, to run a web application inside of a native app. It uses a native app wrapper that can communicate with the native device platform and the WebView. This means web applications can run on a mobile device and have access to the device, such as the camera or GPS features.
Hybrid app advantages
Hybrid app disadvantages
Angular (also known as AngularJS) is a Google open source project that has become quite popular with web application developers. It provides web developers a good application structure and the ability to write complete applications quickly.
Cordova: hybrid app framework
This is the layer that takes care of managing the communication between the browser window and native APIs. The weather-app example needs access to the device’s GPS information to know what location to load data for, and Cordova is able to bridge the gap between Angular and the device to retrieve that information.
You may also have heard of PhoneGap. Adobe contributed PhoneGap to the Apache Software Foundation under the name Cordova. Cordova is an open source Apache project that has a large community around it. Adobe continues to be a major developer of the framework. Cordova is licensed under the Apache 2.0 license.
PREREQUISITES FOR BUILDING APPS WITH IONIC
Setting up your development environment
Make sure you have installed git. If not download
Install Node.js
Node.js (often referred to as Node) is a platform that runs JavaScript outside of the browser. It allows developers to create applications written in JavaScript that can then execute anywhere.
$ node –v v0.12.0
Install Ionic CLI and Cordova
This command uses the Node package manager (npm) to install and set up your command-line interface (CLI) tools. $ npm install –g cordova ionic
$ cordova –v 4.2.0
$ ionic –v 1.3.14
To update to latest versions
$ npm update –g ionic
$ npm update –g cordova
Starting a new project Ionic provides a simple start command that allows you to set up a new project
Run the following commands to create a new project and then to change into the new directory
$ ionic start chapter2
$ cd chapter2
Previewing in a browser You can preview your app in the browser, which makes it very easy to debug and develop without having to constantly build the project on a device or emulator.
The following command will start a simple server, open the browser, and even autorefresh the browser when you save a file change:
$ ionic serve
It may prompt you to choose an address, and in most cases you should select localhost. It will open the default browser on your computer on port 8100. You can visit http://localhost:8100 in any browser, but it’s best to preview using a browser used by the platform you’re targeting because that’s the browser the WebView uses.
Make sure you have Android or iOS simulator setup or real device connected.
Adding a platform to the project
These two commands will create project files for iOS and Android, respectively: $ ionic platform add ios
$ ionic platform add android
Previewing in an emulator
If you’re on a Mac and emulating on iOS, you’ll also need to install ios-sim: $ npm install -g ios-sim
Now you can run the app in an emulator using the emulate command: $ ionic emulate ios
$ ionic emulate android
To emulate with live reload, run the commands with the extra flags –l and –c to start live reload and console logging. $ ionic emulate ios -l –c
$ ionic emulate android –l –c
Previewing on a mobile device $ ionic run ios -l –c
$ ionic run android -l -c
Now you have to build the Android project, which will generate a .apk file, and then you’ll install it onto the device. You need to locate your app inside the platforms/android/ant-build directory, and in it the filename that ends with –debug.apk: ionic build android
adb –d install platforms/android/ant-build/HelloCordova-debug.apk
What you need to know about AngularJS
Angular extends HTML with additional features that are made available through the many directives it provides or that you can create yourself.
Templates are HTML and may contain Angular directives or expressions. These templates are converted into a view that users interact with.
Controllers are used to hold the business logic of your application. They’re functions that can have any number of servers injected into them using Angular’s dependency injection system.
Scope is the glue that holds the controller and views together, and powers the two-way data binding in Angular. When data changes in the view or controller, the data is automatically synced to the other.
Filters are ways to transform data in a template without modifying the source model stored in the scope.
Directives are powerful, and you can create your own when you’re comfortable with Angular.
AngularJS is a web application framework, and its popularity has made it one of the most-used JavaScript tools available today. Ionic is built on top of Angular, so it’s important to have a grasp of how it works. Instead of having to build an entire web application framework for Ionic, it uses Angular and extends it with a large number of interface components and other mobile-friendly features.
Cordova app wrapper— This is a native app that loads the web application code. Cordova is a platform for building mobile apps that can run using HTML, CSS, and JavaScript inside of a native app, which is known as a hybrid mobile app. It’s a utility for creating a bridge between the platform and the application. It creates a native mobile app that can be installed (called the app wrapper in figure 1.1), and it contains what’s called a WebView (essentially an isolated browser window) with a JavaScript API that the web application will run inside.
Cordova JavaScript API— This is the bridge that communicates between the app and the device. The app wrapper has access to both the web application and the native platform through the JavaScript API.
Angular— This is the web application that controls the app routing and function. The Angular web application runs inside of the WebView. Angular is a very popular framework for building powerful web applications. Angular is primarily used to manage the web application’s logic and data.
Ionic— This provides the user interface components rendered in the app. Ionic is built on top of Angular, and is primarily used to design the user interface and experience. This includes visual elements such as tabs, buttons, and navigation headers.
TYPES OF MOBILE EXPERIENCES
There are three basic types:
- Native apps,
- Mobile websites,
- Hybrid apps.
Native mobile apps
To create native apps, developers write code in the default language for the mobile platform, which is Objective C or Swift for iOS and Java for Android. Developers compile the app and install it on a device. Using the platform software development kit (SDK), the app communicates with the platform APIs to access device data or load data from an external server using HTTP requests.
Native app advantages
- Native APIs— Native apps can use the native APIs directly in the app, making the tightest connection to the platform.
- Performance— They can experience the highest levels of performance.
- Same environment— They’re written with native APIs, which is helpful for developers familiar with the languages used.
Native app disadvantages
- Language requirements— Native apps require developer proficiency in the platform language (for example, Java) and knowledge of how to use platform-specific APIs.
- Not cross-platform— They can only be developed for one platform at a time.
- High level of effort— Typically, they require more work and overhead to build, which increases costs.
Mobile websites (web apps)
Mobile websites, or web apps, work well on a mobile device and are accessed through a mobile browser. Web apps are websites viewed on a mobile device in a mobile browser, designed specifically to fit a mobile device screen size.
Mobile website advantages
- Maintainability— Mobile websites are easy to update and maintain without the need to go through an approval process or update installations on devices.
- No installation— Because they exist on the internet, they don’t require installation on mobile devices.
- Cross-platform— Any mobile device has a browser, allowing your application to be accessible from any device.
Mobile website disadvantages
- No native access— Because mobile websites are run in the browser, they have no access to the native APIs or the platform, just the APIs provided by the browser.
- Require keyboard to load— Users have to type the address in a browser to find or use a mobile website, which is more difficult than tapping an icon.
- Limited user interface— It’s difficult to create touch-friendly applications, especially if you have a responsive site that has to work well on desktops.
- Mobile browsing decline— The amount of time users browse the web on a mobile device is declining, while app use is increasing.
Hybrid apps
A hybrid app is a mobile app that contains an isolated browser instance, often called aWebView, to run a web application inside of a native app. It uses a native app wrapper that can communicate with the native device platform and the WebView. This means web applications can run on a mobile device and have access to the device, such as the camera or GPS features.
Hybrid app advantages
- Cross-platform— You can build your app once and deploy it to multiple platforms with minimal effort.
- Same skills as web development— They allow you to build mobile apps using the same skills already used to develop websites and web applications.
- Access to device— Because the WebView is wrapped in a native app, your app has access to all of the device features available to a native app.
- Ease of development— They’re easy and fast to develop, without the need to constantly rebuild to preview. You also have access to the same development tools used for building websites.
Hybrid app disadvantages
- WebView limitations— The application can only run as well as the WebView instance, which means performance is tied to the quality of the platform’s browser.
- Access native features via plugins— Access to the native APIs you need may not be currently available, and may require additional development to make a plugin to support it.
- No native user interface controls— Without a tool like Ionic, developers would have to create all of the user interface elements.
Angular: web application framework
Angular (also known as AngularJS) is a Google open source project that has become quite popular with web application developers. It provides web developers a good application structure and the ability to write complete applications quickly.
Cordova: hybrid app framework
This is the layer that takes care of managing the communication between the browser window and native APIs. The weather-app example needs access to the device’s GPS information to know what location to load data for, and Cordova is able to bridge the gap between Angular and the device to retrieve that information.
You may also have heard of PhoneGap. Adobe contributed PhoneGap to the Apache Software Foundation under the name Cordova. Cordova is an open source Apache project that has a large community around it. Adobe continues to be a major developer of the framework. Cordova is licensed under the Apache 2.0 license.
PREREQUISITES FOR BUILDING APPS WITH IONIC
- Experience with HTML, CSS, and JavaScript
- Experience with web applications and Angular
- Access to a mobile device
Setting up your development environment
Make sure you have installed git. If not download
Install Node.js
Node.js (often referred to as Node) is a platform that runs JavaScript outside of the browser. It allows developers to create applications written in JavaScript that can then execute anywhere.
$ node –v v0.12.0
Install Ionic CLI and Cordova
This command uses the Node package manager (npm) to install and set up your command-line interface (CLI) tools. $ npm install –g cordova ionic
$ cordova –v 4.2.0
$ ionic –v 1.3.14
To update to latest versions
$ npm update –g ionic
$ npm update –g cordova
Starting a new project Ionic provides a simple start command that allows you to set up a new project
Run the following commands to create a new project and then to change into the new directory
$ ionic start chapter2
$ cd chapter2
Previewing in a browser You can preview your app in the browser, which makes it very easy to debug and develop without having to constantly build the project on a device or emulator.
The following command will start a simple server, open the browser, and even autorefresh the browser when you save a file change:
$ ionic serve
It may prompt you to choose an address, and in most cases you should select localhost. It will open the default browser on your computer on port 8100. You can visit http://localhost:8100 in any browser, but it’s best to preview using a browser used by the platform you’re targeting because that’s the browser the WebView uses.
Make sure you have Android or iOS simulator setup or real device connected.
Adding a platform to the project
These two commands will create project files for iOS and Android, respectively: $ ionic platform add ios
$ ionic platform add android
Previewing in an emulator
If you’re on a Mac and emulating on iOS, you’ll also need to install ios-sim: $ npm install -g ios-sim
Now you can run the app in an emulator using the emulate command: $ ionic emulate ios
$ ionic emulate android
To emulate with live reload, run the commands with the extra flags –l and –c to start live reload and console logging. $ ionic emulate ios -l –c
$ ionic emulate android –l –c
Previewing on a mobile device $ ionic run ios -l –c
$ ionic run android -l -c
Now you have to build the Android project, which will generate a .apk file, and then you’ll install it onto the device. You need to locate your app inside the platforms/android/ant-build directory, and in it the filename that ends with –debug.apk: ionic build android
adb –d install platforms/android/ant-build/HelloCordova-debug.apk
What you need to know about AngularJS
Angular extends HTML with additional features that are made available through the many directives it provides or that you can create yourself.
Templates are HTML and may contain Angular directives or expressions. These templates are converted into a view that users interact with.
Controllers are used to hold the business logic of your application. They’re functions that can have any number of servers injected into them using Angular’s dependency injection system.
Scope is the glue that holds the controller and views together, and powers the two-way data binding in Angular. When data changes in the view or controller, the data is automatically synced to the other.
Filters are ways to transform data in a template without modifying the source model stored in the scope.
Directives are powerful, and you can create your own when you’re comfortable with Angular.
AngularJS is a web application framework, and its popularity has made it one of the most-used JavaScript tools available today. Ionic is built on top of Angular, so it’s important to have a grasp of how it works. Instead of having to build an entire web application framework for Ionic, it uses Angular and extends it with a large number of interface components and other mobile-friendly features.
0 comments:
Post a Comment