#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