Seegatesite.com – Introduction and installation ionic framework on windows and ubuntu. Previously I had a lot to discuss creating android apps using android studio, but many obstacles that I have experienced since I was a beginner java programming. To create a quality application, I need a fundamental understanding of java programming. Okay, forget for a moment about the java programming and android studio. Maybe this time scripting programming such as php, html, javascript and angularJS the best for me. For that reason I did not give up to make mobile based application again, and my choice fell on the Ionic Framework.
Honestly, I was late for ionic framework technology . But it’s better late than never to learn.
Table of Contents
What the Ionic Framework?
Ionic Framework is a framework created by devoted and focused on helping the process of making mobile applications (Hybrid Mobile Apps). Created and maintained by designers and developers who have a passion about web technologies. By leveraging the advantages of AngularJS, Ionic able to make mobile app development process with HTML5 becomes easier and amazing. What is the mobile hybrid? You only need 1x create applications and it can be used in smartphone platforms, such as Android, iOS. Compared with the jQuery framework, Ionic much faster.
Ionic using AngularJS, Node.js, SASS as its engine. As with most mobile framework, Ionic also has components / elements of the standard CSS used for smartphones, such as buttons, lists, cards, forms, range, tabs, and other grid.
AngularJS is a full MVC framework front-end, 100% Javascript, 100% client-side and is compatible with the desktop browser and mobile browser. I never discussed angularJS, because I still learning to use angularJS. I will discuss in other occasions.
That is a brief overview of ionic framework, if you want to try it please follow the next tutorial how to install ionic framework on windows and ubuntu
Ionic Framework installation on Windows and Ubuntu
1. Install Nodejs
For Windows users, make sure you have installed git
Then install the Node Js windows here
and for ubuntu users can use the package manager below
Node.js v4
curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
sudo apt-get install -y nodejs
Node.js V5
curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -
sudo apt-get install -y nodejs
To check the installation of Node.js please open a command prompt (windows) or terminal (ubuntu) and type
node -v
if there is an error in windows
‘node’ is not recognized as an internal or external command, operable program or batch file.
Please set the Node.js PATH first on the Environment Variables
Select Start > Computer > System Properties > Advanced system settings > Environment Variables > System variables > PATH.
Add “C:\Program Files\nodejs ” without quote to the PATH variable.
and check your npm version
npm -v
if there is an error in windows
‘npm’ is not recognized as an internal or external command, operable program or batch file.
Please add the NPM path on Environment Variables
Add “C:\Program Files\nodejs\node_modules\npm\bin;” without quote to the PATH variable.
NOTE: Whenever you make changes to the PATH, or other environment variables, you must restart or logout for changes .
2. Cordova
Install cordova from command prompt or terminal
npm install -g cordova
And then check the cordova version
cordova -v
3. Java
Don’t forget to install java and setting the java path
PATH Setting for Windows
“c:\Program Files\Java\yourjdkfolder;”
4. Ionic Framework
npm install -g ionic
Possible errors that occur when installing ionic is “cannot find module … ” blablabla… ( ‘bplist-parser’, ‘minimatch’, and etc ). When I installed ionic framework on windows machine everything was normal. But when i try install ionic framework to my ubuntu PC , i got this problem. We can solve this problem by install module one by one. with this script
npm install -g missing_module _name
But if all modules is missing, maybe you can download my ionic node module here and paste in you node modules folder
5. Create new project ionic framework
Everytime we want to create a new ionic project , we need to execute the following script
ionic start myapp tabs (in the example i created new project with name myapp and with tabs theme)
These script will download all ionic component
Ionic framework provides 3 template to help us create the application (tabs,blank,sidemenu)
After we create a new ionic project , going to the myapp folder
cd myapp
to run the ionic server, type ionic serve in the folder
6. Testing Applications on Android
To be able to run on smartphones and get the apk file, type
ionic platform add android
ionic build android
Thus article about Ionic Framework – Introduction and Installation Tutorial on Windows and Ubuntu, hope useful 🙂
