¿What is Ionic?
That seems a reasonable question, if haven’t ever heard about Ionic. We are talking about a framework that makes your life easier as a mobile apps developer.
Based on popular Cordova library, Ionic is used to easily develop and deploy cross platform hybrid apps. The big advantage of Ionic is that it also helps you leverage the power of AngularJS, which is already embedded in the framework.
Another interesting thing is that Ionic offers you a free hosting for your app that enables you to send a preview of your working app to anyone or simply test it on your device without the nuisance of connecting it to your computer. It is called Ionic Platform.
First of all, let’s talk about the prerequisites. To create a project following this tutorial you will need to have NodeJS and Git installed and accessible from the path:
Now that we have both ready, we will need to install Bower:
npm install bower
And proceed to install Ionic Framework using NodeJS:
npm install -g cordova ionic
That was easy, right?
Creating a project
Ionic can create a project for us and easily port it to iOS, Android or a desktop computer web browser. Remember a hybrid app is just a website, so we can test our design using our browser before we deploy it to a device.
Let’s be original and call our little project “myApp”.
Now, we navigate to the folder we want to create the project in on a CLI and execute the following command:
ionic start myApp tabs
That will create a folder structure for a basic app based on a template called “tabs”. Ionic has a lot of different app templates you can use.
In that structure, you’ll notice a folder called “www”. You guessed it, inside that folder you can find the website that will be converted into a nice mobile app. You can play with it and modify it as you wish, but the most important stuff is inside the folders “templates” and “css”.
Operating with the project
The full CLI reference can be found here.
There are a few useful commands you want to know:
Running and emulating
To launch the app on a web browser, just execute
If you want to run it on an emulator, you will first have to add the platform:
ionic platform add ios or
ionic platform add android
Build the app:
ionic build ios or
ionic build android
And emulate it:
ionic emulate ios or
ionic emulate android
Interacting with Ionic Platform
You will need to have an account in Ionic Platform before you can follow these steps.
To interact with Ionic Platform, you will have to install it first. That is what Git an Bower are for:
ionic add ionic-platform-web-client
Then start the platform and log into it:
ionic io init
ionic upload and follow the simple steps provided by the CLI and your app will be uploaded to the platform.
To view your app on your device, you’ll have to install “Ionic View” app from your App store.
It is really easy to set up a new Ionic project. It is even easier to upload it to Ionic Platform and see how your app can look when it comes alive. This is just the beginning, the rest is up to you!