Build Your First Mobile App With The Ionic Framework - Part 1

In the previous post I explained how to use JavaScript (with AngularJS) to login to a website and scrape data off a page.

We're going to use that code to build a hybrid mobile app with the Ionic Framework.

Update: This tutorial is for Ionic 1.x, you can find the Ionic 2 tutorial here.

This post is part of a multi-part series:
Part 1 - Introduction to Hybrid Mobile Apps (this post)
Part 2 - Set Up your Development Environment
Part 3 - Mockup with Ionic Creator
Part 4 - Test on Browsers, Emulators and Mobile Devices
Part 5 - Build out the App
Part 6 - Deploy to Testers with Ionic View

What is a Hybrid Mobile App?

In a nutshell: a hybrid mobile app is built with HTML, CSS and JavaScript and is contained in a native wrapper so that it can be installed on a mobile device.

This allows web developers to build mobile apps without having to learn the native programming languages (e.g., Objective-C, Swift, Java). It also means that you can have one codebase for all the different platforms.

Cordova/PhoneGap

The most popular native wrapper is Cordova (the engine that powers PhoneGap) and has been around since 2009. Cordova is responsible for loading your HTML/CSS/JavaScript in a webview when the mobile app is started.

The other big feature of Cordova are plugins that allow you to communicate with the native features of your mobile device, for instance accessing the Contacts list or Camera, using just JavaScript.

Supported platforms:

  • Amazon Fire OS
  • Android
  • BlackBerry 10
  • Firefox OS
  • iOS
  • Ubuntu
  • Windows Phone 8
  • Windows
  • Tizen

Ionic Framework

The Ionic Framework is built on top of Cordova and provides you with a UI framework that mimics the native UI. That means that you don't have to worry about implementing a native-like UI and debugging all the quirks between web view implementations on different platforms.

Ionic relies heavily on AngularJS, a very popular MVC (or Model-View-Whatever, as they call it) library made by Google. If you're not familiar with AngularJS I suggest you have a look at this free course.

Ionic also simplifies development by providing you with tools that allow you to create drag-and-drop mockups (Ionic Creator) and an easy-to-use CLI to create, build, test and deploy your app to testers (Ionic View).

These are just a few examples of how useful Ionic is. Keep an eye on the Ionic Blog for updates, they keep putting out awesome new features at a fast pace.

Still not sure you want to do hybrid development?

You might want to see what other people have built with Ionic, there is the official showcase on the Ionic website, but there is also this unofficial list in the forums.

No More Excuses...

If you've been dreaming about developing your own mobile app, now is the perfect time to start. Even if you don't want to use the Ionic Framework, there is an abundance of other frameworks that will help you build a hybrid app within a few weeks.

The great thing about the frameworks mentioned in this post is that they are all open-source and have big communities that are actively developing on them.


In Part 2 of this series we'll have a look at setting up your development environment and installing Cordova and Ionic.

Learn More

Follow me on Twitter @ashteya and sign up for my weekly emails to get new tutorials.

If you found this article useful, could you hit the share buttons so that others can benefit from it, too? Thanks!

comments powered by Disqus