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.
The following are list of components required to start ionic
- js – NodeJS is the base platform needed to create Mobile Apps using Ionic. We are going to go through the installation in due course.
- 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.
- 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.
- 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.
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
- Apache Cordova
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
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!!
Boost you ego, get yourself inspired with this little exercise, create a test file
Open a favorite text editor
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.
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> npm install –g cordova ionic
After the installation is completed
You got this? Give yourself a treat.