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?
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.
- Amazon Fire OS
- BlackBerry 10
- Firefox OS
- Windows Phone 8
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.
- AngularJS Youtube Channel
- Ionic Learn
- Cordova Documentation
- AngularJS: Get Started (Pluralsight)
- Building Mobile Apps With the Ionic Framework and AngularJS (Pluralsight)
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!