#100DaysOfCode Days 28 – 30: Ionic Templates, Views, and the Grid Structure

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.

table

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:

demo_one

mobile-col

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.

demo_two
The content within a grid structure can also be positioned and aligned vertically by applying certain classes to the <div> that defines the row, such as row-center and row-bottom.
 demo_three

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.

demo_four

 

mobile-col2
I kept it simple in this summary, but Ionic can handle more complex grid structures if you want to provide the best user experience for your app.  Therefore, I put together a list of articles you can bookmark and use as resources to help.
Because I’m not allowed to share the complete project app for this course, the code on the #100DaysOfCode GitHub repo will not always reflect what I cover on the blog.  To follow my Ionic development process, check in on the blog as I upload posts when I can.  To follow other projects I’ve been working on when not developing for the course, check the repo.
*** Days 28-30 Recap ***
1. Completed modules 5 & 6 for Mobile App Dev course on Ionic components
2. Finished week 3 quiz for LondonU’s course on Web Design.
3. Created Photo Album (photo_album) project to practice handlebars.js, code available here
4. Added first 3 templates to index.html in photo_album
5. Added initial data object code to “js” subfolder in photo_album (I’m using the solar system NASA data and images) to albums.js
6. Added free-use images to subfolder to populate templates
7. Added nav-tabs and album_template to index.html
8. Compiled template to handlebars.js in gallery.js file
 *All images and photos created by me for the post. They are free to use.
Advertisements

#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.

 

 

Let’s get MEAN! Short Intro to the JavaScript-Based Web Stack + Sample Code

Continuing with MEAN stack development is my goal for the first half of 2016. I spent October-December immersing myself in JavaScript and I feel I can handle a framework (or two). Enrolling in the full stack web development specialization through Hong Kong University and Coursera was a good initial step for me, as I learned more about web app development with AngularJS in course 3 and will dive more into Node.js in course 5. The courses move slowly though, and I’ve been supplementing my education by building a few small projects on my own.

I want to document what I’m learning with you all as much as possible but those posts will be more intermediate and advanced than beginner friendly. Therefore, I will preface them with short introductions first to be referred to later in case I’m sharing a code sample or doing a tutorial that seems unfamiliar. In transitioning to new content that is to come, let’s talk about MEAN stack web development today and how JavaScript developers are using the tools and libraries within it.

img credit: adrianmejia.com

img credit: adrianmejia.com

MEAN: A JavaScript-based web stack

The term “MEAN” applies to the stack technologies used in developing JavaScript-based sites and apps.  MEAN technologies fit a “fluent paradigm”, meaning that because they’re all based on JavaScript, some of the language’s best features can be accessed through them.  MongoDB is used as the database, Express is the framework that works with the server side, AngularJS is the front-end framework used for rapid development, and Node.js is the server environment.  PayPal, Ebay, Walmart, and Linkedin are just a few major companies that built web tools or apps using MEAN stack technologies.

MongoDB: a Schema-less Database Solution

MongoDB is celebrated for being schema-less, meaning it can handle additions and deletions to data more simply because schema definitions are not required for scaling out an app. It is also a document database in which documents are organized as collections that may have a similar purpose, but can contain different types of fields.  Each document is organized in key-value pairs that is similar to what you may see in JSON format

{
   _id: ObjectId('10f89ad5304c'),
   title: 'Lets Get MEAN', 
   description: 'Short Intro to the JavaScript-based Web Stack',
   by: {first:"E", last:"Wilson"},
   url: 'http://www.ourcodeblog.com',
   tags: ['mean', 'angular', 'mongodb', 'nodejs', 'express'],
   likes: 100, 
   comments: [	
      {
         user:'coder1',
         comment: 'a general comment',
         datePosted: new Date('January 4, 2015'),
         like: 0 
      },
      {
         user:'coder2',
         comment: 'the second comment',
         datePosted: new Date('January 4, 2015'),
         like: 5
      }
   ]
}

Due to its easy scability, MongoDB works well for big data projects as well as smaller scale apps.  How suitable it may be for a project over MySQL or other relational databases is highly debated among more seasoned programmers and DBAs, so it’s best to do more research if you are deciding if it’s right for you.

Client-side Frameworking with AngularJS

AngularJS works well with the MVC model for software.  Controllers are written entirely in JavaScript, and the Views (or the user interface of an app) use Angular expressions and directives to communicate with scripts. Angular offers two-way data binding where directives are used to update the View(s) whenever Model(s) change.  I provided a screenshot example* below of a small script I wrote for greeting the user and calculating the sum and product of two numbers entered. Notice in the example how the directives, prefixed with “ng-“ are used within an HTML doc to communicate with the script in which the main controller (MainController) is defined and assigned to the <body>, and num1 and num2 are set with an initial value of 0:

had to use screenshot, preformatted text in WP misbehaving

* had to use screenshot, preformatted text in WP misbehaving

The ng-models are assigned from user input and instantly displayed in place of the {{expressions}} they correspond to.  In addition to these directives, there are other Angular components such as services and dependency injections to use for more complex apps.  I plan on diving further into Angular in a later post, but for now, you can check out different sites and apps that were built using AngularJS here.

Server-side Development with Express and Node.js

Some readers interested in Ruby development may know a little about Express, particularly its similarity to Sinatra, the Ruby framework it was inspired by.  Express is a Node.js framework used for routing, handling HTTP requests, writing middleware, and REST API customization. It organizes the architecture of your app or project, connects with MongoDB to add a back-end database, and works with templating languages (like jade or Dust.js). When used with Node.js, Express is pretty powerful.  In comparison, Node.js is to the MEAN stack what Apache is to the LAMP stack, and the number of node modules and packages that can be used to power your app continues to grow.

All together, these 4 technologies work in sync for creating more dynamic, interactive apps.  The best way to learn more about MEAN is to dive right into building with it, so I included some tutorials I gathered to help you get started.  Just a quick tip, go ahead and install Node.js, and npm (node package manager) in advance to save some time.  You can use npm to install other modules, plugins, and tools (such as Angular and MongoDB) by running a simple npm install –save command in your terminal.

*** Tutorials ***

Build a Hacker/Reddit News clone

Google Map app tutorial: route bike lanes in your neighborhood

Create a Gmail clone with AngularJS

New Updates Added to Our Code Wiki

Hello all,

I updated Our Code Wiki with some goodies for you learning pleasure.  It’s been a while since I updated, so I added plenty to keep you all busy.  Enjoy and have a great holiday season!

Open2Study’s course UX for Web

CS258 Software Testing Methodology course

CS253 Web Dev: How to Build a Blog course

CS262 Programming Languages: Building a Web Browser course

CS255 HTML5 Game Development course

CS271 Intro to Artificial Intelligence course

CS215 Into to Algorithms course

Reference Guide on Linux Command Line

Reference Guide on Unix

Google’s Guide for Technical Development

Checklist for Responsive Web Design Projects

Stanford’s Practical Unix course

Links to Code School and Google Developers University

If you would like to join as a member of the wiki or contribute, subscribe to Our Code Blog, or check out instructions here.

Learn Python in your PJs with PyLadies

The Washington D.C. chapter of PyLadies have been “experimenting” with online education. The result: a Saturday morning Intro to Python class available via Google Hangouts.  There is no cost for the class and all who register will be sent a link to the Hangout to take it online.

Intro To Python

Saturday, November 15th, 2014

9:00AM – 12:30PM

via Google Hangouts

To RSVP, register here on meetup.com. Installation instructions will be sent before the class starts.

New Updates Added to Our Code Wiki

Hello all,

New goodies were added to Our Code Wiki for your learning pleasure:

“Diversifying Competitiveness Technology” video

Udemy course: Make a Splash Page in HTML

52 Question Checklist & Guide for Responsive Web Design Projects

Stanford U course: Practical Unix

Google Developers University links

Code School links

I update the Wiki several times a month, so be sure to check Our Updates page.  If you would like to join as a member of the wiki or contribute, subscribe to Our Code Blog, or check out instructions here.

New Updates on Our Code Wiki

Just added the following updates to Our Code Wiki which are available now:

Browser Compatibility guide

The Silver Lining APEX and Salesforce web tutorials

Learn to Code: Advanced HTML5 CSS3 web tutorial

MIT course: Introduction to Algorithms

Github’s Programming Free Ebook List

Github’s JavaScript Frameworks Free Ebook List

Pycrumb’s Free Python Ebook List

Google’s Python course

Google’s C++ course

UC Berkeley course: Structure and Interpretation of Computer Programs

MIT course: Introduction to Programming with Java

Udemy course: Learn HTML5 from Scratch

AppCoda link

The Odin Project link

I update the Wiki several times a month, so be sure to check Our Updates page.  If you would like to join as a member of the wiki, subscribe to Our Code Blog, or check out instructions here.