After finishing the mobile app development course this past Sunday, I’m excited about sharing what I learned. For today’s post, I’m making a few assumptions that you all (1) read my post on how to install Ionic and start an initial app available here, and (2) you all know by now that Ionic is based on AngularJS, which I will reference every now and then. Other than that, I won’t be providing much of an intro on terms. Let’s just dive in!
Using Ionic Templates and Views
Ionic comes equipped with a blank app template, but you can also use starter templates to provide a basic UI to customize. For my app, I ran the terminal command ionic start conFusion sidemenu to start an app named “conFusion” with ready-to-go templates that included side-menu navigation. With this command, views such as browse.html, login.html, playlists.html, playlist.html, search.html, and a few others were installed in the “www” subfolder within my conFusion project file. I was able to use these views, customize the starter code to fit the content, and add in my own code to provide the functionality I needed for my app.
Ionic has three named templates sidemenu, tabs, and blank. When you run the ionic start [appname] [template] command from your terminal, Git is used to fetch the template from the GitHub source code and download it into your project folder. In addition, starter templates can come from Codepen, a GitHub repo, or a local directory. For GitHub repos and Codepens, use the full url of the source code to fetch the template.
Which views installed in the “www” subfolder will depend on which template you use in your starter app. If you want to create your own views, I recommend that you use the blank template.
In our course, we built an app for the fictitious restaurant, conFusion. While we kept the login.html view as is, we did add a modal, notifications, and buttons for more interactivity. We also changed the playlists.html view to menu.html where we listed the available dishes at the restaurant by categories (appetizers, entrees, and desserts) users can choose from and select individual dishes. Likewise, we changed playlist.html to dishdetail.html for showing a description of each dish with a form where users can enter comments, rate a dish, and submit their input which would be added and live instantly. Finally, we changed search.html to the mobile home page to showcase promotions, and browse.html to an about us page for chef information.
Ionic Grid Structuring
As part of the templates available in the “www” project subfolder, code is already provided for you to customize. If you’re familiar with Bootstrap, Foundation, or Pure, the set up is pretty similar. Sections are defined as <divs> in which are classes can be applied for additional styling or JS interactivity. The hierarchy goes as follows: row –> column(s) –> content.
Unlike Bootstrap, Ionic does not follow a 12-column grid structure. Ionic cols represent the percentage of the device screen the content will occupy. Offsets are also used to position content on the screen. I created a table to break it down by example.
The following example below is a code sample in which I use Angular’s ngRepeat directive to loop through an array of images. I define the columns at 25%, meaning that each image in the array will take up 25% of the screen pane, for a total of 4 images per row:
You do not always have to set a percentage with the columns. Simply nesting the columns within a row will give them equal spacing. In this example, both buttons will take up 50% or half of the row.
Applying the classes –top, -center, -bottom works on columns too for structuring content vertically, but I prefer using the responsive grid classes within Ionic in order to structure columns for both mobile and tablet screens. The responsive-sm class collapses columns into single row when the viewport is mobile, but smaller than the typical landscape phone (such as iPhones 5 <). The responsive-md class can be applied when the viewport is smaller than portrait tablet (think Kindle or Nook size) but bigger than the landscape phone, and responsive-lg class will be applied when the viewport is smaller than landscape tablet.
Our Code 
Is it possible for you to provide a course review?
Yes. I’ve gotten behind on blogging, but I can definitely do that. I think out of the entire specialization, it is one of the better courses. A more detailed post on the course strengths and weaknesses coming soon.
I just finished the third course in the same specialization. The time estimates given in the course for assignments were very low IMO and the actual amount of time I needed to invest rather caught me off guard. Would you give a short assessment of the level of difficulty/involvement for the fourth course–I’d like to take it but my time is very limited these days. Thanks for taking the time to do the writeups you’ve done already.
I found that I needed more time than others for these courses because as confident as I was in writing JavaScript, I had no experience in creating working apps. When I was enrolled in the specialization, I put aside 2 hours every weeknight to watching the lectures and 4 + hours on the weekends to doing the assignments. If you’re time is limited, you may not want to take the course. Getting behind on assignments is very easy to do unless you stay on top of the work.
The courses are not difficult as long as you take them in order, and don’t try to breeze through the lectures. The instructor is very knowledgeable.