Ionic is an awesome SDK for developing hybrid mobile apps using HTML, CSS, and JS. This article is only going to focus on how you can get up and running with ionic. Future articles will talk more about Ionic and building hybrid (Android and iPhone) mobile apps using it.
I’ve managed to get Ionic up and running using these methods on Ubuntu 14.10 and 15.04 and OS X Yosemite. Windows users should be able to follow this guide to get Ionic set up, however, keep in mind that some of these commands will not work in command prompt or may need some extra configuration.
Basic Ionic
If you do have any of following installed, make sure you have the latest versions, to avoid running into issues with Ionic.
Git
Git is a free version control system used by most of the libraries and tools we need. Ionic uses it to download the project templates. It is also good practices to use version control on your projects.
To check if you have git or not simply open the terminal and run this command:
git --version
If you do have Git, it will return with your current version of git, which means you can move on to the next step.
If the command is not found, you need to install git, head to Git download page and download the installer for your platform. To check if the install was successful simply open a new terminal window and try the command again.
Node.js
Node.js allows you to be able to use javascript outside of the browse environment.
Node.js comes with a package manager called NPM; we will be using it to download and control various dependencies for our Ionic projects.
It is quite straight forward to have Node.js and NPM installed on your platform.
Head over to Node.js download page and once again click to download the installer for your platform. There are plenty of troubleshooting guides on the Node.js site if you get stuck or help with something, If you still need help, please leave us a comment below, and we would be more than happy to help.
Just like Git, to check that Node.js has been successfully installed, open a new terminal
and run the following command:
node -v
You should be able to see the version on Node.js you have
to check for NPM run the following command:
npm -v
From her on out the rest of the install will all use NPM and you just need to run one command to install each.
Bower
Simply put Bower is a package manager that helps manage the libraries and utilities packages that we use. It is just like NPM but more for assets needed for web development. Bower is built on top of Node.js, to install it run the following command in your terminal:
npm install bower -g
The -g
at the end of that command means we install it globally. On some systems, you may need to run that command using sudo
.
You can check that you have Bower installed with the following command
bower -v
Gulp
Gulp is a build system that is also developed on top of Node.js. It is used for automating a lot of tedious and repetitious tasks. Like minifying and optimising our assets for performance. You can also use it com compile SCSS and CoffeeScript to CSS and JavaScript respectful. Ionic will be using it build and compile SCSS. To install Gulp run the following command:
npm install gulp -g
After that check to see if it is working with the following command
gulp -v
Cordova
In simple terms, Cordova is the piece of software that stitches the web application and the native application together. The Apache Cordova website states that: “Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript.”
Apache Cordova does not just stitch the web app with the native app, but it also provides a set of APIs written in JavaScript to interact with the native features of the device. Yes, you can use JavaScript to access your camera, take a picture, and send it
in an e-mail. Sounds exciting, right?
Cordova provides a set of APIs written in javascript to interact with native features on the devices, which means you can use Javascript to assess the local file storage, GPS, and even camera and take pictures from the phone. Cordova is like a middle man between your Ionic app and the native device API.
To install Cordova fun the following command:
npm install cordova -g
And to check if it installed successfully run the following command:
cordova -v
Ionic
You made it!! We will talk a lot more about Ionic in future articles for now to install it and get started run the following command:
npm install ionic -g
once again to check if you have Ionic installed
sh
ionic -v
Congratulations Ionic is all setup on your machine, and you have all you need to be on your way to start developing mobile apps.
Platform Devices and Simulation
You will need to download the platform SDK to begin building and simulating the apps on the platform.
Android
For android you can follow this instruction to get the SDK setup on your machine, however you can download android studio with a nice GUI to help you install the android SDK.
iOS
It’s really easy to begin building and simulating with iOS simply run from terminal:
npm install ios-sim -g
npm install ios-deploy -g
You would need an OSX environment to develop iOS apps.
Conclusion
That’s all you need to start developing mobile apps using Ionic. Feel free to utilise gulp to find a workflow that works best for you, the more you can automate your tasks with gulp the more time you can spend having fun developing apps. In future articles, I’ll be diving deeper into Ionic and how you can make the best of it.
Thanks for reading, if you need help on any of the steps above please leave me a comment below and I’ll be more than happy to help