Creating an Ionic project from scratch

¿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.

Installing Ionic

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.

ionic-folders
Ionic app folder structure
ionic-folders2
Ionic app folder structure: /www

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 ionic serve.
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
Just execute 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.

Conclusion

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!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.