Getting started with ionic 2+

Posted on Posted in Beginner

This tutorial target audience with little or no knowledge about ionic framework, it is a practical approach to developing a compelling mobile application without wasting your time about the theory behind that might be boring and eventually make you lose interest in a very ease but powerful tool in mobile application development, of course, there will be explanations here and there to guide you why “this is like that”.

Keeping my by promise, not to waste your time unnecessarily, let dive into the requirements.

 




Requirement

The following are list of components required to start ionic

  1. js – NodeJS is the base platform needed to create Mobile Apps using Ionic. We are going to go through the installation in due course.
  2. Android SDK – If you are choosing Windows as your development platform and you are developing your apps for the Android platform, then you should have Android SDK setup on your machine. You can visit HERE for installation instruction.
  3. XCode – If you are choosing Mac as your development platform  and you are developing your apps for the iOS platform, then you should have Xcode setup on your machine. You can visit HERE for installation instruction.
  4. Cordova and Ionic – These are the main SDKs which is needed to start working with Ionic. We are also going to through setup process in this tutorial.

 

Prerequisites

I just need to mention this as a matter of information, of course, you are at an advantage if you have knowledge of the following technologies, but I can tell you it is not compulsory, you are going to learn along the line and build a powerful apps without being an expert in any of them

  1. Angular
  2. Apache Cordova

All I can say is that you need to be familiar with HTML, CSS and JavaScript, if you are not, still don’t worry, that is the essence of this website and of course this tutorial.

 




Setup the development environment

You need to set up the development environment before you can do anything.

Go to https://nodejs.org/en/download/ to download nodeJS

 

  • Click on the link that best suit your machine environment, for me, I am using windows 10 64bit.
  • After download in done, setup starts automatically, if not, locate you download folder and click on the just downloaded file

Click next when the prompted. And accept terms in the license agreement by checking the Checkbox as shown below

Choose the installation folder, in my case I left it at default, you can change it to any folder you wish, but why worrying yourself, it is not your goal it is just a means to an end, leave it as it is and let get going! Click next.

And leave this at default too, click next




Then, installation begins, it takes only few minutes

Hold your peace, before you know it, installation is complete and you have this dialog box

Click finish, to complete the installation.

 




Test your installation

Test version

Go to command prompt on windows machine, type node –v and npm –v, a s at the time of this tutorial what I have is the latest versions of node.js and npm

Got this? If your answer is yes, that means you are good to go!!

 

EXERCISE

Boost you ego, get yourself inspired with this little exercise, create a test file

Open a favorite text editor

Type

console.log(“ I on my way to becoming a great ionic apps developer!!”)

Save is as appetite.js

Note where you saved it, in my case I saved it in my documents

Go to command prompt, change directory to your destination folder.

And type

node appetite.js




Now let’s install ionic

Create a folder

Create a folder in a convenient location on your hard drive. In my own case – C:\cititechstudio> then run npm install –g cordova ionic  as shown below

  • C:\>md cititechstudio
  • C:\>cd cititechstudio
  • C:\cititechstudio>
  • C:\cititechstudio> npm install –g cordova ionic

After the installation is completed

You got this? Give yourself a treat.

Let’s go and develop our first ionic app.

Leave a Reply

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