Ending the #100DaysOfCode Challenge

I decided to the end the #100DaysOfCode challenge officially. Those who follow the GitHub repo for the project, could see I made it up to Day 95.  I haven’t been able to keep up with a daily blogging schedule to keep you all updated, but I did share notes on the challenge about what I worked on for each day via the #100DaysOfCode page.  I wanted to do one last post about the challenge, what I did, what I learned, what I completed, and overall what went wrong that made me what to end it.

The Pros

Overall, this challenge has been the best thing for me in being held accountable to learning new things outside of work.  Here is what I completed since starting the challenge back in January:

Books Completed

  • “JavaScript and jQuery” by Jon Duckett
  • “You Don’t Know JS: Scope & Closures” by the folks at Getify

Modules and Tutorials Completed

  • DevTips jQuery in 15 (test demo available)
  • JavaScript track – Codecademy (87% of this was done before the challenge, I completed the remaining portions)
  • AngularJS track – Codecademy
  • Intro to jQuery – EdX
  • Learn AngularJS for Beginners – Udemy
  • HTML5 and CSS track – Free Code Camp (I didn’t know at the time I could skip tracks, I completed this as a prerequisite for the JavaScript track)
  • Responsive Design track – Free Code Camp (ditto)
  • jQuery track – Free Code Camp
  • JavaScript basics track – Free Code Camp

MOOCs Completed

  • Responsive Web Design – 94.0%, Coursera
  • Interactivity with JavaScript – 99.2%, Coursera
  • Front-end Frameworks: AngularJS – 100%, Coursera
  • Multiplatform Mobile App Development with Web Technologies – 100%, Coursera

Projects Completed

  • Tribute Page – for Free Code Camp, built with HTML and CSS
  • Portfolio Page – for Free Code Camp, built with Bootstrap 3
  • Bootstrappin’ Portfolio – 5 page portfolio site built with Bootstrap 3
  • Personal Template – biographical landing page built with Bootstrap 4
  • Creative Template – landing page for creatives built with Bootstrap 4
  • TaskList – built with Bootstrap 3, JavaScript, and Handlebars.js
  • Animal Exhibit – built with Bootstrap 3, JavaScript, and Handlebars.js
  • BBC site clone – landing page of the BBC Tech News page, built with HTML and CSS
  • Book App – built with AngularJS (I decided to continue building this beyond a one-page SPA)
  • conFusion Restaurant App* – built with AngularJS
  • conFusion Restaurant Mobile App* – built with AngularJS, Ionic, and Cordova for Android and iOS
  • Prince Tribute quote generator – built with HTML, CSS, and JavaScript
* Due to Coursera’s honor code which I accepted as a scholarship recipient, I’m not allowed to share the complete code for these projects nor launch them as my own. They have not been added to the GitHub repo for this reason.

Languages, Libraries, and Frameworks Learned

  • Bootstrap 4 – proficient, it’s not too much different from v. 3
  • Jasmine – basics
  • jQuery – basics
  • JavaScript – intermediate
  • AngularJS – advanced
  • Meteor – basics
  • Handlebars.js – basics
  • Ionic and Cordova – advanced
  • Node.js – basics

Verified Certificates Received

  • 1 from University of London & Goldsmiths
  • 1 from University of Michigan
  • 2 from The Hong Kong University of Science and Technology

With the challenge, I finished tutorials that I had in my queue, received scholarships to complete MOOCs for web developer certificates, and contributed hundreds of lines of code on GitHub for projects I truly enjoyed developing.  Unintentionally, I also became more efficient at writing tutorials for this blog. As what I was learning grew complex, my posts got longer.

The Cons

The biggest setback for me was when I got promoted at the organization I work for during the first 30 days of the challenge.  As part of my promotion, I was put in charge of our organization’s new site launch and app.  It was a great opportunity   With the promotion came longer work days, more training outside of office hours, and more travel.  I also took on two freelance gigs outside of my day job to do some design work for clients.  Working 50-60+ hours a week during February and March, plus doing course work for my web development specialization didn’t exactly make me excited to contribute code to this challenge on most days.  I started skipping days which lead to me losing track all together.

Still, I was too stubborn too quit. So, I took the biggest hit with my blogging.  When I started the challenge, I blogged everyday.  Once February hit, I had to group days to provide be breaks in between posts. During the last stretch, I only contributed 3-5 posts.  Blogging about what I was learning became more difficult because I had to spend time organizing material and writing in a way that makes since for newbs as well as advanced learners.  A typical blog post for me grew to more than 500 words, with me sometimes having to create series just so that I could cover a subject more thoroughly.

Once I started skipping days, this challenge that should have only taken 100 days, lasted over 4 months. Once May hit, I threw in the towel…for my sanity.

What I Learned About Myself

This challenge revealed a lot about my learning style and what I feel are the best ways for me to accomplish certain goals.  This include the following

  1. Taking courses that don’t provide any type of technical support outside a user-generated forums (and Stack Overflow links) are not for me.  Not having on-call support while working on course projects is very frustrating.  This has continued to be a hurdle for me, so I have decided to hire a mentor who has experience in building MEAN stack web apps when I start my capstone project this Summer.  If I have to pay for on-call, one-on-one, high-ranking expertise to help me out whenever I need it, then so be it.
  2. As I said previously in another posts, books should be my primary introduction to any new language, library, or framework I pick up.  I like tutorials, but they don’t really teach me much other than how to follow directions.  I retain information so much better if I’m reading material.
  3. I need to become comfortable reading official documentation for any web tools I want to use.  For example, I’m thankful for Cordova for providing a guide to deploy Ionic apps for iOS and Android, but I had to go over that doc way too many times then I care to admit before I could successfully get my conFusion app to successfully launch in the emulator provided.  I’m too quick to find a shortcut when I don’t feel the docs are articulate enough.  While this is not a problem, I need to read the docs and follow the directions as written first before trying anything else.
  4. There is no future in me writing tutorials on a regular basis…at all. I appreciate all my readers, but if I find it difficult to explain a subject in 300 words or less, don’t expect a post about it in this space.

In all, I feel good about wrapping up this project now.  If you have enjoyed my posts thus far, please consider following Our Code on Twitter.  I just launched this account a week ago to engage more with readers.  Follow me, mention a blog post, and I’ll be sure to follow back.

Thanks for riding with me on this challenge!

#100DaysOfCode Days 34-37: Making Your Ionic App Work with Controllers and Services

The introduction is usually the part where I apologize for not updating you all daily on my progress. Sticking to a no excuses response, I’ll leave a link to my GitHub repo here for you all to follow the #100DaysOfCode challenge in real-time.  The best way for me to remedy being behind on my writing is not be. Therefore, let’s continue and talk about controllers and services.

If you use AngularJS, you are at an advantage.  Being based on AngularJS, Ionic makes the conversion from web app to mobile hybrid pretty seamless with a few tweaks.  Those unfamiliar with AngularJS can get familiar with it going through the documentation, but you also should be proficient in JavaScript when writing the functionality of an Ionic app.   JavaScript concepts, such as the use of objects, lists, closures, DOM manipulation, and templating are used heavily in Angular.  For this reason, I provided some resources below to better understand how to write better AngularJS controllers.

Also, please note that this post is a continuation of my series on building hybrid mobile apps with Ionic specifically. I’ve been walking through an app that I built for a course as part of a full stack web development certificate I’m earning this Spring through Hong Kong University via Coursera.  To get a series overview, you can go to the #100DaysOfCode page of the blog and read Days 26-33.

Linking JS Files in Your Ionic App

The index.html file of my app is already populated because I ran the ionic start appname sidemenu command upon installation of Ionic, thus also installing the sidemenu template and the views that come with it.  Using a template will save you trouble of having to write up the index.html file yourself and making sure on Ionic dependencies are linked beforehand.  Here’s a snapshot of my index.html file:

my index.html file

my index.html file

As you can see, it’s within the index.html file where the libraries and scripts are linked.  Pay attention to the bottom.  I linked three JS files, one for my app configuration, one for the controllers of the app, and one for the services.  I also use a ngDirective to name the app in the <body> tag and <ion-nav-view> to make sure the views are being fed from the www/templates subfolder of the app.

Initializing Your App

In my app.js file, I create a global variable with the Angular module. The parameters of the module argument is my app (the app name) and an empty array, which will take all the app dependencies. Under the module you have the .run() function that is included with the template used, and app states used for routing.  I discussed the app.js file more in detail in the previous post on app states you may review here so there’s no need to repeat myself today, it’s just important to note how a module is declared.  The following line of code is what my Angular module looks like now for the completed app:

angular.module('conFusion', ['ionic', 'ngCordova', 'conFusion.controllers', 'conFusion.services'])

The controllers.js file is where all the code functionality for the app is located.  I initialized the module for controllers with this line of code:

angular.module('conFusion.controllers', [])

Underneath the module includes each controller used in the app and the code functionality.

Setting Up Controllers and Services

Because I’m technically not allowed to share the complete project code for the course, I will share only a snippet as an example of controller setup.  Will look at the IndexController which is connected to the index.html view. My controller for the index.html does a couple of things:

  1. Defines the service $scope as the core dependency. Remember, a dependency is when an object is passed to a function instead of creating that object outside the function. For my IndexController, dependencies injected included both objects as well as services and factories I defined in the services.js file.
  2. Takes other dependencies within it’s array that are data from my db.json file, such as the dish, leader, and promotion objects.
  3. Takes the menuFactory, promotionFactory, and corporateFactory as dependencies as well. Factories are not to be confused with services, which I will go into later. For now, just know that a factory is a function in the services.js file that returns a value needed in the controller.
  4. Takes baseURL as  a dependency. baseURL is a parameter in the .constant() function defined in the services.js file which directs the user to the local url address to be used to view.  This may be the local host server address in the beginning, and later changed to your IP.
  5. Defines the function to be used with all of the above as dependencies as well.  Yes, you have to include all dependencies for the controller array within your function. It may seem recursive, but without doing so, you will get reference errors.
  6. Within the function, objects are assigned as properties of the $scope to initiate two-way binding with the view.

Here’s what my IndexController is written as:

.controller('IndexController', ['$scope', 'dish', 'leader', 'promotion', 'menuFactory', 'promotionFactory', 'corporateFactory', 'baseURL', function($scope, dish, leader, promotion, menuFactory, promotionFactory, corporateFactory, baseURL) { 
    $scope.baseURL = baseURL;
    $scope.message="Loading...";
    $scope.dish = dish;
    $scope.leader = leader;
    $scope.promotion = promotion;
}])

Let me break down each property and why is set to $scope.  As I said earlier, dish, leader, and promotion is data from the db.json file I created.  Without sharing the data from that file, know that each property stands for an individual id within the database for the dishes, leadership, and promotions objects.  The controllers get the id for each dish, leader, and promotion using factories that are functions that return those values.

Using Factories and Services to Return Values

Switching to my services.js file, the module for services is initialized, only unlike the controllers module, the services module takes ngResource within the array. Angular’s ngResource is a service that creates a resource object for interacting with data sources (like my db.json file). The module is set with one line of code as the global variable:

angular.module('conFusion.services', ['ngResource'])

Underneath, are the factories and services used for the act.  Here are the code snippets of the menuFactory, promotionsFactory, and corporateFactory from my services.js file that were injected as dependencies in the IndexController. Each factory takes the $resource  and baseURL services from the app.js file as a dependencies, and defines a function that returns the id from objects in the db.json file that is to be used in the controller as well as displayed with expressions in the template view using the PUT method:

resourcefactory

factories within the service.js file

By assigning the properties of the scope in IndexController, I set up two-way binding with the view expressions for index.html file, which my app state routes to the home.html template within the www/templates project subfolder. For example, take the following code from home.html which displays the leader data using expressions:

Ionic cards from the home.html template

Ionic cards from the home.html template

Now let’s review what was discussed in short summary:

  1. Controllers control the code seen in the template view (any html client-side file) via two-way binding. For each controller, dependencies are injected.
  2. Dependencies are any objects, services, or factories that the controller depends on for the function. They are injected in the controller and as parameters for the function argument. The example of the IndexController used all three as dependencies.
  3. In the controller function, dependencies can be assigned to the $scope as properties. The dish, leader, and promotion objects were assigned as properties to $scope in the example.
  4. The controller was able to use these objects by injecting the menuFactory, promotionFactory, and corporateFactory from the services.js file.
  5. Factories are functions that return a value.  All three factories returned data from an individual id within the db.json file.
  6. Factories are able to retrieve data from the db.json file using the ngResource (or $resource) service as a dependency injected in the services module for the app.
  7. The template view displays values from the controllers using Angular expressions. They are defined within Ionic templates using curly brackets.

All together, app controllers, services, factories, templates, and database objects work together to provide a fully functioning app powered using JavaScript.

In the next and last post of this series, I will go over deploying an Ionic app for Android and iOS.

*** Resources for Further Learning ***

  1. Go through Thinkster’s guide, A Better Way to Learn AngularJS here. It discusses controllers in detail and provides a curated list of learning modules to start with.
  2. Tony Alicea is a great web developer and even more awesome course instructor. If you ever taken his course, JavaScript: The Weird Parts, you know how well he can explain even the most complex JavaScript concepts. Thankfully for us, he has released his new series on AngularJS. You can take the first hour of his AngularJS course on YouTube here.

*** Days 34-37 Recap ***

  1. Finished week 4 lectures of the Web Design course, started on final assignment
  2. Worked on photo_gallery project, finished it
  3. Finished week 2 of the Mobile App Dev course lectures, submitted assignment. Passed at 100%.
  4. Finished week 3 of the Mobile App Dev course lectures

#100DaysOfCode Days 32 & 33 Ionic App Routing and State Configuration

So far, we discussed how to install Ionic and start an app, how to use templates for the app’s UI, and how to design the structure of the app using Ionic directives.  Now, let’s dive more into JavaScript and focus on the inner workings of our app, starting with app configuration.

Please note, that I used the sidemenu template in my app for the course, which comes equipped with a set of HTML views in the “www” folder.  I may reference particular views and code that you may not include in your Ionic app project.  Therefore, today’s post shouldn’t be considered as a how-to guide like the previous ones. It’s more like a show-and-tell walk through of my app structure and code.  As always, if you want a complete description of how Ionic works, seek the source code or the docs.

Initializing the App

Opening the index.html file within www subfolder of the Ionic app, you’ll want to modify the body tag by naming your app. Keep in mind that if the name of your app is case-sensitive, you’ll want to make sure it’s spelled correctly in all dependencies.

<body ng-app="appName">

After naming the app, it must be initialized in the controllers code. Within www, you’ll find a js subfolder, and within that, you’ll find two separate files: app.js and controllers.js.  Open the app.js file and modify the angular module code by inserting the name of your app.

angular.module('appName', ['ionic', 'appName.controllers')]

You’ll want to do a similar task within the controllers.js file code. Find the angular module code and insert the name of your app.

angular.module('appName.controllers', [])

If you’re using a template, there will be code in the controllers.js file that you don’t need (it comes with the starter app). Delete all or what doesn’t pertain to the functionality of your app.  For me, this meant all the controller code since we were converting our web app to mobile in the course.  Because Ionic was built with AngularJS, we were able to use the controllers we created in the AngularJS web app course previously, modified them for Ionic and Cordova, and add them in our controllers.js file, saving a lot of time.

Configuring UI-Router App States

In the sidemenu.html file, there are several list items href links that help the user navigate the app.  Prof. Muppala said we weren’t allowed to share the full app code, so I created a similar code snippet of a navigation list in the sidemenu for explanation purposes:

example of a list within an Ionic app with navigation options

example of a list within an Ionic app with navigation options

Ionic uses Angular UI-router to handle the routing where $stateProvider is injected. In order for the navigation links to work, we have to configure the app states. Each state is configured as an object with key:value paired properties. Properties include the app url, the template view in use, the template url (as a property of view), and the controller used for that template.  This is all done within the app.js file. I created the code snippet below of how the app states are configured as objects:

UI-router states within app.js file

UI-router states within app.js file

There are different UI-router events that you can use for loading, success, and error messages, but I won’t go into that now in order to keep today’s post short and sweet.  If you would like more info on accessing the full capabilities of Angular UI-router in an Ionic app, I listed a few resources at the end of the post for further learning.

Configuring Resolve Objects

Within app state you can include a resolve object. Resolve objects help map the dependencies that should be injected in a controller, such as Angular factories and services.  For those of you who are unfamiliar with Angular, I find that Tyler McGinnis offers one of the best explanations of factories and services.  To save me the time, I suggest you read his definitions of both here if you would like further information on why factories and services are injected as dependencies.

Resolve objects are done before the controller is called for faster UI response. They are listed as key:value pairs within app state as a property of views. The key is the name of the dependency, the value is a function of it. The keys defined within the resolve object are later injected as dependencies in the controller in use.

In our app, we have a template view favorites.html that shows a collection of dishes a user adds as a favorite.  To configure functionality in the app state, I will need a key for dishes queried from the menuFactory using a .query( ) function, and a key for favorites queried from the favoriteFactory using a .getFavorites( ) function.  Therefore, this is what my resolve object within the favorites app state looked like:

the resolve objects define two keys: dishes and favorites

the resolve object define two keys: dishes and favorites

In the FavoritesController, I then inject the dishes and favorites key and define the $scope variable for each one. In adhering to Professor Muppala’s rules, I’m only showing you the code snippet relevant to the example:

FavoritesController code snippet

FavoritesController code snippet

Data related to dishes and favorites are fetched from the json database (db.json) and returned using the functions.

I’m almost done wrapping up the Ionic series for #100DaysOfCode.  I will include a guide on controllers within an Ionic app specifically, and one that discusses Cordova deployment as the last two posts within the series.   Also, please checkout the #100DaysOfCode GitHub repo, especially for days 27-35.  Because I’m not allowed to share all of my Ionic app code, I worked on additional projects that you can check out there.

*** Resources for Further Learning ***

  1. Take the same course, Multiplatform Mobile App Development with Web Technologies, that I did on Coursera for free* here.
  2. Read software engineer Rob Ferguson’s post on using UI-router and defining states here.
  3. Build an App with Navigation and Routing via LearnIonic here.
  4. Read app developer Andrew McGivery’s post on building controllers within an Ionic app here.

*** Days 31 & 32 Recap ***

  1. Submitted week 1 assignment for the Mobile App Dev course, started week 2 lectures
  2. Started week 4 lectures in the Web Design course on handlebars.js
  3. Created photo_gallery project for the course to practice.
  4. Added free-use images to subfolder to use within the template data
  5. Added custom Bootstrap themes to CSS subfolder as options
  6. Created albums.js file within js subfolder to store data objects, added object data
  7. Created gallery.js file within js subfolder for handlebars.js source compilation and template configuration
  8. Added four templates within index.html for showcasing data.
*Note: The course is free for those who don’t want certification. If you want a certificate of completion signed by Hong Kong University, you must enroll and pay for the course. Applying for a scholarship is an option as well.

#100DaysOfCode Day 31: Using Ionic Directives to Structure Your Templates

Inside the HTML template, content is placed in between view module directives <ion-view>…</ion-view>.  While the views work with Angular directives (prefixed with ng-), Ionic also have also has its own directives to use within the views. There are directives for navigation, content, tabs, lists, and buttons. To help you, I created a table to describe each directive and how it works below:

list of Ionic directives

list of Ionic directives

Now lets revisit the example form that I posted in the intro to this series to break down all the directives used. The form below is a modal for logging in users:

sample form using Ionic directives, classes, and Angular ngModels

sample form using Ionic directives, classes, and Angular ngModels

In the form, I use <ion-modal-view> to create a container for the form, specifying that this view will be a modal. All content will go within this container. In the header, <ion-header-bar> I created a title heading and set a close button that will trigger the closeLogin( ) click event that I will define in the controller code. After closing the header, I use <ion-content> as a container the actual login form content. Because I’m defining a form inside a modal, instead of using <ion-list>, I used a <div> and gave it the “list” Ionic class.  Doing this still allows me to use the “item” Ionic class to do the form inputs. Both inputs use Angular ngModals to attach data to controller code.

Now that I spent some time discussing the HTML structure of an app, my next post will focus on configuration and coding the controllers in JavaScript. Stay tuned.

*** Day 31 Recap ***

  1. Debugged CSS code in the Bootstrappin’ Portfolio project. This project is now finished and available for cloning and download here.
  2. Worked on assignment for week 1 of the Mobile App Dev course.
  3. Created searchbox.html template using handlebars.js as an example for the Web Design course. It uses jQuery to filter through a data array to match text entered in a search box. Code is available here.

 

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

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

 

 

#100DaysOfCode Day 26: The Hybrid Mobile App Development Approach and Ionic

In the last post, we discussed 3 common approaches for developing mobile apps.  This included developing with native code, developing a web app for mobile, and the hybrid approach using a framework.  Today, I’ll highlight the hybrid approach and discuss the mobile framework I’m currently using for a course project: Ionic.

The Hybrid Mobile App Development Approach

Before Ionic, Cordova, and similar tools (Titanium, Unity, Kivy, Xamarin, etc) became popular, front-end developers could produce HTML5 and JavaScript-based apps using tools like jQuery mobile, or focus on making sure web apps were responsive to mobile.  However, there are problems that developers had to work around when it came to using webview (browser) for mobile.  Most importantly, lags in performance, UX considerations not being met, and speed became ongoing issues.  What makes the hybrid approach unique is that apps can be written in any language.  They are embedded or “wrapped” in a native container that provides them native code functionality.

This doesn’t mean they adopt all native capabilities, but more native features are accessible using the hybrid app approach than they would if you build an HTML5 app.   Features such as device access to the camera, calendar, notifications, contacts, and geolocation can be available in hybrid apps.   A SQL file system providing secure offline storage, and gestures such as pinch, spread, and swipe are also supported.  JavaScript developers should also note that using framework tools like Ionic and Cordova makes distribution through app stores possible (1).

Enter Ionic

I compare what Ionic is for mobile to what Bootstrap is for UI development. As a front-end tool, Ionic is based on Cordova and built with Sass, allowing developers to write apps in HTML, CSS, and JavaScript.  Bootstrap users will like that the Ionic CSS component syntax is similar in that it uses classes to drive both CSS styling and JS functionality.  Below is sample code I took from my project for the course to create a login form in a popup modal. You’ll notice Ionic’s own CSS component classes (.list, .item-input, .input-label) and directives (<ion-modal-view>, <ion-content>, <ion-list>) intermixed with Angular directives while applied to inputs:

sample form using Ionic directives, classes, and Angular ngModels

sample form using Ionic directives, classes, and Angular ngModels

Because Ionic works with Angular, I can program the modal and the JS function doLogin() in a separate controller. Likewise, I can add any Angular services or factories as a dependency injection in the controller if I need them to power the app.  I will share more code from my project’s controllers in a post on that subject later.

What’s also useful about Ionic is that it comes pre-packaged with templates to use when you install it and start an app. In Day 27, I’ll walk you through installation, starting an app, and more about templates and Ionic directives.

*** Day 27 Recap ***

  1. Finished module 2 and 3 of Multiplatform Mobile App Development with Web Technologies course.
  2. Finished week 1 of London U’s MOOC on web design, see code in the assignment I submitted on #100DaysOfCode GitHub repo.
(1) Source: Native, HTML5, or Hybrid: Understanding Your Mobile App Development Options

#100DaysOfCode Day 25: Examining Options for Mobile App Development

I’m in the Hong Kong University full stack web development specialization that has consumed the majority of my free time since September.  It’s a new specialization, and I’m a part of the first cohort.  Because of this, I get a lot of questions about the specialization on Quora about my experience.  Since I count the coding I do for the course towards the #100DaysOfCode challenge, I want to spend the next couple of days discussing what I’m learning and building.  The purpose for doing so will be two-fold: it will provide commentary for those seeking a detailed review of the course from me, and I’ll get to  share content, insight, and sample code for my challenge readers.

Just to give you some background, I’m now in course 4 of the specialization, which focuses on multi-platform mobile development.  For the course, we are taking the web app we build in course 3 and making it into a mobile app for iOS and Android deployment. We use two tools in the course: the Ionic framework and Cordova.  I will write more about using these two tools specifically in future posts, but today I want to just provide an intro on approaches in mobile app development, using my course notes to guide me.

Mobile Web vs. Mobile (Native) Apps

There are two ways developers have built web apps for mobile: (1) by developing a full client-side mobile app and installing on mobile devices, or (2) by developing a web app that allows users to access it via a mobile device using web standards.  From what I’ve seen, the second approach has been more widely used among front-end developers, but mobile web apps run slower on phones because the code is not native. Knowing this, we discussed all approaches for developing mobile apps in the course on the first day which I summarized below.

App Implementation Approaches

Native Apps: With mobile native apps, developers would need platform specific skills in order to create a functional app for iOS or Android. Think Objective-C, Xcode, or Swift for iOS, or Java, Eclipse and XML for Android.  Using native device code allows for the highest performance of the app and gives developers full access to device capabilities.  This is great for developers who know those select languages. Others not willing to learn have to choose another approach.

Mobile Web Apps: A mobile web app is basically a responsive web site hosted in the mobile browser.  Some of you may remember when the “mobile-first” approach became popular, and when it was a best practice for developers to run scripts in the site <head> to detect what device a user was browsing from.  The user may be taken to a separate site if browsing a web app from their phone that is designed to be mobile-specific, such as m.twitter.com or m.cnn.com.  Emphasis on responsiveness is important for those who take this approach and just stick to web apps.  HTML5 apps that utilize jQuery mobile also fit into this category, providing developers with a way to build Javascript-based mobile apps.  Like I said earlier, this approach is slower, but works.

Hybrid Apps: These type of apps combine embedded webview (browser) with partial native code implementation.  With this approach, HTML5 apps are embedded inside a native wrapper so to speak.  Since this is the approach we’re using in the course, this will be the one I focus on for the rest of this post.

Hybrid Mobile App Development

How does one build a hybrid mobile app? First, examine both of your options: (1) building an HTML5 app in a native wrapper, or (2) building an app in one language and compiling into native code.  For both options, there are tools to use.  Cordova (formerly known as PhoneGap) and Trigger are used as native wrappers, and Xamarin, Titanium, and FireMonkey are compilers. The native wrapper, or mobile framework we are building with in the course is Cordova, which targets HTML5 content, exports JavaScript, works well with Ionic,  and allows for app store distribution.

architecture

photocredit: codecentric.de

According to Prof. Muppala (the HKU instructor for the course), the hybrid approach is best for content-driven apps such as those that focus on business enterprise, productivity, or media.  This is because they don’t rely so much on accessing native capabilities.  Our app is for a restaurant which will allow users to login, make reservations, see special promotions for the week, submit reviews of each dish, and add particular dishes to a list of favorites.  It should be perfect for Ionic and Cordova conversion.

In the post for Day 26, I will dive more into using Ionic and how to install dependencies for getting your app started.

*** Day 25 Recap ***

  1. Finished first module of the course Multiplatform Mobile App Development with Web Technologies
  2. Finished first week of London U’s MOOC on web design, see code in the #100DaysOfCode github repo here

 

 

8 Coding Habits You Should Add To Your Workflow: A Guest Review of The Pragmatic Programmer

Today, we have a guest review from Edgar Hurtado, a python enthusiast and PHP/ JavaScript web developer hailing from Valencia, Spain. Like me, Edgar is also predominantly self-taught, utilizing free online resources to his advantage to skill up.  I met him through the CodeNewbies community and even though his blog is new, I’m already an active reader.  I asked him to share his review of Andrew Hunt and David Thomas’ popular book, “The Pragmatic Programmer”. He happily obliged!

********

One of the most recommended books a code newbie can find when browsing through internet is this book. A simple search on Google typing books every programmer should read reveals this fact (e.g: 1, 2, 3). However, I always thought that this was a specialized book for professional programmers, something currently out of my scope.

Nevertheless, I heard one of the authors of the book, Dave Thomas (@pragdave), in two episodes of CodeNewbie (part I, part II) and he was very convincing in saying that the newbies could as well take advantage of reading it. Therefore, finally I made up my mind and read it. It took me over 2 months to finish it with a path of 30 min – 1 hour of reading per day.

If you take in count the advice that Andrew and Dave give, you’re going to be a better programmer for sure.  However as a newbie, sometimes I feel that I can’t apply the majority of things I’ve read. Once you reach past the first half of the book, it starts to focus on things useful for big development projects. For example, there’s a chapter about testing and automation which convinced me that I should be testing more, but they talk about developing tools for automatic testing, and I think that will over-complicate the little projects I do (mostly school homework and bonfires from FreeCodeCamp).

On the other hand, the things I did really understand make the book worthwhile.  Some of the advice I want to include in my workflow are:

  1. The DRY principle (Don’t repeat yourself) is not just related with using functions in your code, its influence should affect all the knowledge written in the project, for example the documentation. This is achieved by writing the documentation in your code and then use some documentation generator that looks on your code and makes the docs automatically from it. You write it once and have it in different formats.
  2. Store information in plain text files which are more likely to last over the years without compatibility issues (something that already happens to me with .doc, .docx and .odt files).  The data that a program uses should be on a plain text file rather than inside the code.
  3. Always comment your code, but the comments should say why you do something, not how. How you achieve something is already written in your code.
  4. Know the best text editor you can use for all the writing tasks. This means using an editor for writing code, writing txt files, markdown, and so on (in my case I’ve chosen VIM).
  5. Automate as much as you can. Generating documentation, running tests, writing code (through snippets), etc. Something that I’m not doing at all and still having to figure out how to do it.
  6. Fix issues as soon as you detect them. If you let them pass in your code for “later fix”, they’ll spoil the code and more bugs will appear until the project becomes nonviable.
  7. Sign your work, be proud of it, and accept criticism from others, but above all, be critical with your own work.
  8. Design by contract. Before starting the project the boundaries should be clear (our customer requirements), and we should develop towards meeting those requirements. No less but no more because it’s easy to fall into a spiral of improvements that will make the project never ready for shipping.

As you can see, even though I think there are a lot of things in the book that I can’t use right now or are beyond my current coding skills, “The Pragmatic Programmer” is still an excellent book.  What’s more, I’m sure that I’ll read it again in the future when my skills were improved to extract more useful information.

In conclusion, I would recommend you to read this book, or at least the first half of the book if you’re a new programmer, no matter what your skill level is.

********

Edgar S. Hurtado is a biologist who discovered his passion for programming through MOOCs right after finishing his degree. That passion led him into vocational training on web development, with self-paced resources and the objective of gathering strong programming foundations for his ultimate goal: becoming a Bioinformatician. You can follow him on twitter @edgarshurtado.

Post edited by me. View the original.

#100DaysOfCode: Days 20-24 A Project Update of What I’ve Been Working On

It’s been a while since I did a post on my #100DaysOfCode challenge, but like I said, I’ll give you all no excuses. With being promoted at work and being in charge of a new project rolling out in a few months, I’ll write and deliver posts whenever I can.  Today I’m catching up and I’ll link to the individual days on #100DaysOfCode project page so you can find the code I worked on.

Bootstrappin’ Portfolio Update

The portfolio project is 80% complete. During my time away I added two more portfolio pages to give users some variety.  The goal is the portfolio acts as a template that can be used by any type of creative: writers, photographers, developers, designers, etc.  True to my style, I also made it as neutral as possible, allowing anyone who clones it to customize it to their own tastes. Over the past week, I also added small features like pop-up modals that act as previews in case users want to link to outside projects. Though I probably spent about 7 hours on it so far, I don’t feel like it’s done. I still want to expand the services page, and get a code review from my mentor before I refactor the project into a single page site (which I’ll release as a separate template). Even with 20% more work to put into later, this will probably be the last post I mention it in this series.  I’ve been working with Bootstrap for the past 2 years. It’s normal for me to include it as part of my front-end development process for quick projects that should go without saying.

jQuery Update

I finished module 2 and I’m halfway through module 3 of Microsoft’s course on jQuery and started a project folder for the exercises done thus far. I don’t want to ruin the course for those who are planning on taking it, so stay away from the IntroJQ folder of the #100DaysOfCode repo if you don’t want “answer” code.  Because I’m back at it with course 4 in the specialization I’m enrolled in, I probably on work on jQuery on the weekends after I’ve submitted my assignments.

JavaScript Update

I finished Jon Duckett’s book “JavaScript and jQuery”– well at least the sections on those two.  Like everything else I’m learning outside of the specialization, the sections that dive into Ajax are going to have to wait.  Go to the JSDuckett folder of the #100DaysOfCode repo if you want to see worked examples from the book, or head to my CodePen account for live examples that don’t require cloning.

AngularJS Update

The fourth course in the specialization covers mobile app development, and I’m pretty excited to be working with Ionic since I heard great things about it.  Ionic works well with Angular, so instead of starting with a completely different project, Prof. Muppala has decided to let us work with the same web app we built in course 3 (I showcase that app here).  This cuts out the bulk of prework and I’m able to concentrate on just building the mobile version. I like Ionic so far and I’ll probably due more post about it in the future.

Visit the #100DaysOfCode repo and click on the individual days to see the code.

**** Day 20-24 Recap ****

  1. Created port_one.html, port_two.html, and port_three.html pages for the BSPortfolio project
  2. Added modals to port_three.html
  3. Finished first half of module 3 of Microsoft jQuery course, updated IntroJQ project