Ionic Framework, Angularjs & PhoneGap
This is a getting started post on Ionic Framework & deploying the starter template to PhoneGap Build.
A more advance post on this topic can be found here.
When I read this article, I was pretty convinced that jQuery mobile is really killing PhoneGap & its abilities. jQuery mobile is actually awesome with its cross browser support & loading pages via Ajax, yada yada yada. But yes this is an overkill for a mobile app. We know what we are dealing with when we develop a hybrid app for a mobile. So why not use a user interface framework that will have only patches wrt mobile browsers!?
Yes, thats where Ionic fits in! Ionic is a
beautiful, open source front-end framework for developing hybrid mobile apps with HTML5.
The only reason I continued exploring Ionic was
1. Its Performance obsessed
2. Its has a built in support for AngularJS (- The mother of all SPA frameworks)
3. Most importantly its Native focused
I was sold!! And then I started diving in. And this post as mentioned earlier is a quick hands on.
- Set up Ionic
- Scaffold our First Ionic app
- Build & Test locally
- PhoneGap Build the app
This post will be oriented more towards Ionic. So let me introduce you to its counterparts.
First its Angularjs. Angularjs is a
structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly.
Angular’s data binding and dependency injection eliminate much of the code you currently have to write. And it all happens within the browser, making it an ideal partner with any server technology.
You can read more here.
Next, we have PhoneGap build. PhoneGap build provides
You can read this to know more about PhoneGap, Cordova & PhoneGap Build.
Now, lets see where they fit in the big picture.
Ionic + Angular = Our web development Framework [Our Web app]
Our Web app + PhoneGap Build = Hybrid Mobile App
Set up Ionic
Ionic is setup using the node package manager. Know more about node here. Lets create a new folder called myIonicApp. Then open a terminal/prompt here & run
|npm install -g ionic||sudo npm install -g ionic|
Next we need to install Cordova (PhoneGap)
|npm install -g cordova||sudo npm install -g cordova|
Thats it!! We are all set to scaffold our first Ionic App.
Scaffold our First Ionic App
Now, we will scaffold a hello world app. This is provided by the Ionic team itself. And the app is awesome!
So back to prompt & run ionic start myFirstIonicApp. This setup will download a repo from Github & save it to your current folder. If you face issues, you can download the same from here.
Once the app is downloaded, it will install a couple of plugins. And finally your folder structure should be
Build & Test App locally
If you are not familiar with how PhoneGap build works, I recommend reading this. If you have an idea of PhoneGap, Then for you, Ionic CLI (Command Line Interface) is same as the Cordova’s CLI minus all the not required cordova functionalities. Ionic CLI provides another wrapper around Cordova CLI to make things pretty easy for us.
So, we will use the ionic syntax to add a new platform to our app. Back to terminal/prompt, run
ionic platform add ios (if you face any issues, refer this)
In case you are looking for a android based development environment, run
If you are on a Mac & have setup your Xcode with ios-sim ( sudo npm install -g ios-sim), you can run
ionic emulate ios
Wait for a moment & your emulator should launch. You can click through the app & it will be something like this
And if you are on Windows/Mac & want to use the ADT for build, you can run
ionic emulate android
The app looks fine. No issues. Lets push this to PhoneGap Build & make a Hybrid app out of it.
PhoneGap Build the app
So, lets create a new repo and call it myFirstIonicApp. Next lets clone the repo to local. Navigate to myIonicApp folder (parent of myFirstIonicApp) & create a new folder called repo. Then CD into repo folder and run git clone << repo url>> (the link on the bottom right hand corner or the center of the page in case there are no files in the repo). For me it would be
git clone https://github.com/arvindr21/myFirstIonicApp.git
Next, lets copy all the files from myFirstIonicApp to repo. If you are following this tutorial & using a Mac OS, then you can run
ditto ../myFirstIonicApp/ ./myFirstIonicApp/
This will copy all the files from our source folder, where we scaffolded the project to the github folder. The only reason we did not do this first is because, I wanted to keep the focus on Ionic than on the ripples around it.
PS: Instead of copying, you can also scaffold your project here and continue (since we have not made any changes to the code).
Now, we will push the files to GitHub repo. Run
git add .
git commit -a -m "Initial Commit"
git push origin master
Now, head back to the GitHub repo & refresh the page. You should see the newly added files. Copy the repo url from the the bottom right hand side of the page.
Next lets head to PhoneGap Build. Create a new app
Hope this tutorial helped you in gaining some perspective on building a hybrid app with Ionic & PhoneGap Build.
You can expect a post on Getting started with Ionic soon.
I have faced some issues while deploying the app. If you are too, you can follow this.
Thanks for reading! Do comment.