#100DaysOfCode Day 27: Installing Ionic and Starting a Mobile App

The Ionic framework uses the HTML5 SDK to build apps with a native look and feel while also utilizing the best features of AngularJS.  If you remember from this post, I built the original web app with AngularJS in course 3 of the specialization, and in course 4, we’re converting that app into a hybrid mobile one.   I was able to get in some extra practice since then, so using Angular within Ionic was not that big of a leap for me.  I was easily able to pick up the components Ionic uses since they closely resemble Bootstrap’s class structure.  My project is still organized as a MVC, only now with a few extras to tie things together.  Even if you’re unfamiliar with AngularJS, if you’re proficient with JavaScript programming, you can get by (with a refresher on Angular ngModels and Controllers, of course).  Today, I’m continuing with exploring Ionic by giving a short tutorial on how to install it and get an app running.

Step One: Make sure you have your dependencies installed

You can use Ionic on any operating system you like, whether that is Mac OSX, Linux, or Windows. There are certain dependencies I already had installed on my machine (Windows 8) that made the Ionic installation simple.  Here’s a list of what I recommend:

Node.js: When I made my decision to to focus on JavaScript programming last year, the first thing I did was install Node.js.  Node.js is an environment used to write back-end code and build server-side apps. To learn more about it’s capabilities, see my MEAN stack web development post.

Download and install node.js here.

NPM: This is a JavaScript-based package manager particularly useful for developers to get the node modules they need and install them. Coming from a Python background, npm is the closest tool to pip that I use.  If you like pip for python projects, you’ll learn to like npm You can rest easy knowing that that most of the installation process from here is done.

Download and install npm here.

Git: One thing I notice on every installation I run from the terminal is that most pull from source code on Github. This is because the majority of tools that I use are free and/or open-source, including Ionic. Without Git, running certain npm, gulp, or bower tasks may also fail since they are dependent on them.  You should install it for this reason.

Download and install Git here.

With these two installed, I recommend you now create a project folder for your app where you would like it located.  I ran a mkdir command in the terminal and called my folder “Full Stack WebDev”, which now hoses 4 different projects I created for the specialization and all my tools.  Within my master project folder, I created a subfolder called “Ionic” to house my app.  Keep your terminal open, cd into the app project folder, and run these npm commands to get the rest of dependencies. Please note: use $ sudo prefix if working with a Mac. Also, -g stands for global, as in a global install:

1.  Gulp, a build system used for running tasks within an app. You can also use Grunt if you prefer:

npm install gulp

2. Bower, a package manager. It’s like npm for front-end work:

npm install bower

3. Cordova, a tool that acts as a native container for mobile apps built with Ionic:

npm install -g cordova

4. Ionic, the mobile framework tool I’m using for my app:

npm install -g ionic

5.  JSON-server, a temporary node module server used to locally host data needed for my app until deployment:

npm install json-server -g

Depending on how fast your processor is, running these installations could take anywhere from 0-2 minutes each.

Step Two: Set up, start, and run your app

To set up and start your first app with Ionic, cd into the “Ionic” sub project folder you created in step one and run the following command: ionic start <appname> sidemenu. The name of my app is called conFusion, named after the restaurant it’s for, so my command looked like this:

ionic start conFusion sidemenu

Breaking down the vocabulary, a sidemenu refers to a navigation menu that can be accessed by dragging content from side to side.  I included this gif below from the Ionic framework documentation as an illustration of sidemenu:

source: ionicframework.com

source: ionicframework.com

Running this command also provides an app with a variety of contents, including the dependencies needed, and templates you can customize and use in your app:

source: ionicframework.com

source: ionicframework.com

 

 

 

 

 

 

 

Starting your app with the sidemenu command provides you with templates located in the “www” folder.  These templates include sidebar, menu, login, and others that has Ionic component code provided for you. If you don’t care for the templates, and want to start your app from scratch, you run this command in your terminal for a blank project:

ionic start todo blank

Go through your project folder and examine the contents.  To run your app to see what it looks like so far, run the following command in your terminal:

ionic serve

In addition to installing Codova, Ionic, and initiating a starter app, you will also have to add iOS and Android platforms to deploy your app.  In our course, Prof. Muppala saved this step until we finished configuring our apps and provided it as an optional step.  I’m happy he did, as getting the emulators to work properly proved to be a headache for me.  Thankfully, adding the platforms only have to be done once, so I won’t explain the how-to here.  For those who are interested, I provided the Cordova guide for Android and iOS here and here.  Using Android Studio is also a great option for saving time if you plan to stick to mobile development.

In my post for Day 28, I’ll discuss more about Ionic components and syntax used for code to create your own templates.

*** Day 27 Update ***

  1. Finished module 4 of the Multiplatform Mobile App Development with Web Technologies course.
  2. Added a bio section to the Services page in the Bootstrappin’ Portfolio project. Code available at the #100DaysOfCode GitHub repo here.
  3. Finished week 2 of London U’s MOOC on web design and passed the quiz. See code I worked on here.

 

 

Advertisements

One thought on “#100DaysOfCode Day 27: Installing Ionic and Starting a Mobile App

  1. Pingback: #100DaysOfCode Days 28 – 30: Ionic Templates, Views, and the Grid Structure | Our Code

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s