MobileHow To Develop Hybrid Apps with the Ionic Framework

How To Develop Hybrid Apps with the Ionic Framework

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

What Is Ionic?

Ionic is an MIT-licensed, front-end framework for creating hybrid mobile apps. Ionic is also a Node module that helps with the process of creating, building, and packaging hybrid apps. The Ionic framework and module are backed by the same company, Drifty. In the context of this article, Ionic will be used in both cases. Either way, Ionic empowers developers to leverage their AngularJS and HTML5 skills to create beautiful, high-performing apps.

Setting Up Ionic

Ionic relies on Node.js. For that reason, you must install Node.js if you haven’t done so previously. You can get the Node installer from http://nodejs.org/. Once installed, Ionic can be installed using Node’s package manager (npm) via the following command-line command:

npm install -g cordova ionic

Snippet A

The preceding command will install the Ionic and Apache Cordova modules globally. We’ll discuss Apache Cordova later. For now, understand that these modules get registered as command-line commands. The modules themselves are installed in your user directory. If you’re running Windows, the modules are at C:Users{username}AppDataRoamingnpm. If you’re running Mac OS X or Linux, the modules can be found in /usr/local. Either way, once Ionic is installed, you’re ready to create a project.

Creating an Ionic Project

Creating a project with Ionic is as easy as running a single command-line command. With your console window open, enter the following:

ionic start myApp blank

Snippet B

The command in Snippet B relies on the Ionic module installed in Snippet A. The second argument (start) tells Ionic that you want to start a new project. The third parameter specifies the path to initialize the project in. For the sake of this article, we’ll do all of our work in the current directory. Finally, we have the option of choosing a template to help jump start development. The available templates at this time, and a preview of each, are listed below.

blank sidemenu tabs
A project created with this template will generate an app that has a single view to start. A project created with this template will generate an app with multiple views to start. The views can be navigated to via the hamburger menu in the upper-left corner. A project created with this template will generate an app with multiple views to start. The views can be navigated to via the tabs at the footer of the app.
Building1 Building2 Building3

Table 1: The various setup choices

The options in Table 1 vary, based on the navigation needs of an app. For the sake of this article, we’ll stick with the blank template and build up from there. To see the app running, you have options of how to run an Ionic project.

Running an Ionic Project

If you look in the myApp directory created with Snippet B, you’ll notice that a lot of stuff is generated for you. In fact, as of the time of writing, 137 files (~44MB) got created! We’ll look at these contents in detail later. Before digging into the contents, though, let’s see this basic app running. You have two options: run the app in the browser or run on a native platform.

Running in the Browser

Ionic apps are built with web technologies. You can develop, debug, and test Ionic apps in the WebKit browser of your choice. Browsers that support WebKit include Apple Safari, Google Chrome, and the Opera browser. To open a Ionic app in one of these browsers, you need to host the app in a web server. Thankfully, Ionic comes with one.

Ionic lets you run your apps locally via LiveReload. LiveReload is a server that gets installed as a Node module. This module was installed when a snippet was run. The specifics of LiveReload are beyond the scope of this article. Still, to run your Ionic app, you can enter the following command in your command line:

ionic serve

Snippet C

Once you run the command in Snippet C, you should see the app running in your default browser. To see the really cool part, though, make a code change. For example, open the myApp/www/index.html file in your favorite text editor. Change the code that says class="bar-stable" to class="bar-positive". Now, look in your browser. The app has automatically updated. In fact, it probably updated before you could switch to your browser. This is the magic of LiveReload. To go even further faster, let’s open the developer tools.

If you’re running Google Chrome, open the developer tools by pressing Ctrl+Shift+J on Windows or ⌘-Option-I on a Mac. Once opened, click the Emulation tab at the bottom of the Tools pane. Choose a device, click emulate, and refresh your browser. Voilà! Your app is running on a simulated device, in your browser. My setup looks like this:

Building4

Figure 1: Running your app on a simulated device

You can get pretty far along developing your app in your local browser. However, your app may need to use features that are more readily available on a real device. For example, your app may make use of an accelerometer or a compass. These capabilities are more likely to exist on your phone than the machine you’re cranking code on. For that reason, we need to discuss running apps on native platforms.

Running on a Native Platform

Running apps built with the Ionic framework on a native platform requires Apache Cordova. Cordova is an open source library that makes device-level APIs accessible to JavaScript. In other words, things like the accelerometer or compass become programmatically accessible through JavaScript. This bridge helps you cross the divide between physical hardware and more malleable software. If you ran the command in Snippet A, Cordova was installed at the same time as Ionic.

The Ionic module makes it simple to target platforms when you’re ready to start testing and deploying your app on specific platforms. From the command line, you enter ionic platform add <PLATFORMNAME> to prepare your app for a specific environment. For example, if you want your app to run on the three most popular mobile platforms (Android, iOS, and Windows Phone), you can run the following from the command line:

ionic platform add android  
ionic platform add ios   (will only work on a Mac OS X machine)
ionic platform add wp8  

Snippet D

Each of the commands in Snippet D are run independently of each other. If you run any of these commands, there is a chance you may get errors. If you receive an error, it most likely means you don’t have the related SDK installed. Once you have added the platforms you want to target, you can build your project for a given platform as shown in Snippet E:

ionic build android    
ionic build ios   (will only work on a Mac OS X machine)
ionic build wp8    

Snippet E

Building your Ionic app creates a package using the SDKs installed on your local machine. You have the option of using the package task instead. That task uses the Ionic Build service to create app-store ready bundles without using SDKs on your local machine. This is especially useful if you’re creating apps on a Linux or Windows machine and want to pump out an iOS app. The details of the Ionic Build service are beyond the scope of this article. There are two other libraries you should be aware of when building your Ionic apps.

The two libraries that will help you build apps with Ionic are called ngCordova and ngCordovaMocks. ngCordova is a set of extensions that bridge the gap between AngularJS and Cordova. As Ionic makes heavy use of AngularJS, these extensions may become an integral part of your development. ngCordovaMocks complements ngCordova in that it empowers you to continue developing and testing your app in a web browser. These libraries are optional, but highly recommended.

Once you’ve created your application packages, you might want to run them. You have several options. The two most popular include running the package in a simulator or on a physical device.

Running in the Simulator

Running your app in a simulator can be more convenient than running it on a physical device. Ionic makes it easy to run your app in a simulator from the command line. To fire up your app in a simulator, you can run one of the following commands:

ionic emulate android    
ionic emulate ios   (will only work on a Mac OS X machine)
ionic emulate wp8    

Snippet F

Running your app in a simulator will get you closer to the real thing than the previously mentioned browser emulation. However, there’s nothing better than the real thing. For that reason, you should consider running (and testing) your app on a real physical device.

Running on a Physical Device

To run your app on an actual physical device, you use the run task. This task can be executed by entering the following into the command line:

ionic run --device

This task requires the --device argument to deploy to run the app on a physical device. Once run, this task builds the project, creates the application package, and deploys the app to a connected physical device. From there, you can continue your testing.

Conclusion

At this point, we’ve scratched the surface of building an app with Ionic. This article showed how to start a new hybrid app with Ionic. Also, you learned how to run the project in the browser and natively on a device. Some tools and tricks were introduced throughout. To build a feature-rich app, we need to turn our focus to the Ionic framework itself. You’ll learn about the framework in the next article.

About the Author

Chad Campbell is a solutions architect, five-time Microsoft MVP, and founder of Ecofic. He holds a BS degree from Purdue University, where he focused his studies on computer science and psychology. Chad has been developing enterprise-level applications with a wide variety of technologies since 1999. He leveraged those experiences to author two internationally published books. In recent years, Chad has focused on building rich interactive applications with client-side technologies such as AngularJS and machine learning.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories