Friday, April 19, 2013

jQuery Mobile Jump Start Pre-Class Preparation

(Added 28 June 2013)
Due to issues with Ripple we are no longer using it in the class. We will be working straight from the browser, but you may want to install the Window Resize extension.

The days are rapidly approaching. Here are all the steps necessary to prepare your development environment so that you can save time the day of class.




There are probably an unlimited number of ways to get started developing jQuery Mobile applicaitons. I have chosen this way because it makes you productive in the shortest number of steps and is also cross platform. The steps listed here should work for PC, Mac, and even Linux machines.


One of the first things that savvy readers will notice is there is no need for a web server. Eliminating the need for a server solves one the trickiest things that causes novices to have problems. For those of us who have been doing web development for a while, it is easy to forget, what a pain it was the first time we had to set one up. Also since we are working only with HTML, CSS, and JavaScript, we don't even need a compiler. So let's set up our environment.


Chrome

The first thing that you must do is download and install the Chrome browser for your OS. I am not going to give the steps necessary here since this is something Google explains far better than I can. Here is the link to download Chrome:




Install Chrome Extensions

One of the nice things about most modern browsers is that they allow for the installation of extensions, also referred to as plug-ins.


  1. Visit the store at http://chrome.google.com/webstore. You can also reach it by clicking the  icon in the “Apps” section of the New Tab page.
  2. Search for the "Advanced REST Client"
  3. Select it from the list which appears.
  4. On the extension’s details page, click the Add to Chrome button.
  5. A dialog appears, letting you know about the types of data that the extension will be able to access. ClickAdd in the dialog to grant the extension access to the data described. Learn more about the different types of data that extensions may access.
  6. Repeat steps 2 through 5 for the "Ripple Emulator (Beta)".


Setup Your Project Folder

In order to give our application and to make sure that we are all on the same page we will create the following folders for app:

  1. Create a route folder named, cc, for Coffee+Coffee.
  2. From within the cc directory, create three subfolders:
    1. css
    2. img
    3. js
      1. Within the js folder create a subfolder, libs


Installing JavaScript Libraries

This step is a bit of a misnomer since there really isn't an installation of the JavaScript libraries. What we will do is download the files and place them in the correct folders.

If you want to save time here, you can download the files from GitHub at:



Or you can set everything up yourself by downloading the following libraries:


  • jQuery version 1.9.1
    • Copy the file, jquery-1.9.1.min.js, to js/libs
  • jQuery Mobile 1.3.1
    • Copy the file, jquery.mobile-1.3.1.min.js to js/libs
    • Copy the file, jquery.mobile-1.3.1.min.css to css
    • Copy the folder images to css
  • Handlebars version 1.0.0-rc.3
    • Copy the file, handlebars.js, to js/libs
  • When you are finished, your files should look as follows:
    • css
      • jquery.mobile-1.3.1.min.css
      • images
    • images
    • js
      • libs
        • jquery-1.9.1.min.js
        • jquery.mobile-1.3.1.min.js
        • handlebars-1.0.0-rc.3.js







Create index.html
With the skeleton of our application it is time that we put a face on it. We need to create an HTML page to hold our markup and by convention this page is called, index.html. Using your text editor of choice create index.html in the root of the cc folder. Then copy the following markup to it:

<!DOCTYPE html>
<html lang="en">
<head>
 <title>CC</title>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <link href="css/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css" />
 <script src="js/libs/jquery-1.9.1.min.js" type="text/javascript"></script>
 <script src="js/libs/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 </script>
</head>
<body>
<div id="page1" data-role="page">
 <!-- panel -->
 <div data-role="panel" id="homePanel">
   <p>Hidden Panel</p>
 </div>
 <header data-role="header" data-position="fixed" >
   <a href="#homePanel" class="" data-icon="bars" data-iconpos="notext"></a>
   <h1>Coffee, Coffee, Coffee!</h1>
 </header>
 <script>
 </script>
 <section data-role="content">
   <p>Hello, Coffee Lovers!</p>
 </section>
 <footer data-role="footer" data-position="fixed">
   <h1>Index Page Footer</h1>
 </footer>
</div>
 <script src="js/libs/handlebars.js" type="text/javascript"></script>
</body>
</html>

Launching Our App
With that our application has a displayable page, let's check it out. Before you double-click the Chrome icon, stop.


In order to be able to run web apps from the file system we need to tell Chrome that doing so is OK. The only way to do this is to run Chrome from the command line in order to pass it the switch. 

PC
From the cmd prompt type:

~/Google/Chrome/Application/chrome.exe --allow-file-access-from-files

Or
  1. Right click on the chrome icon
  2. Then right click on "Google Chrome"
  3. Click on Properties
  4. In the Target: text box add " --allow-file-access-from-files" after chrome.exe. Please note there is a space before "--".

Mac/Linux
From terminal type:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files

The command line switch: --allow-file-access-from-files, is what tells Chrome it is OK to serve files from the file system.

Run the App 

Once Chrome is running we will need to point it to our index.html file. It will need the full path with the file:// as the protocol. For me it looks like:

file:///users/Troy/Sites/cc/index.html

At this point you should see our app in all of its jQuery Mobile glory. It will be stretched out since it is not yet running in the Ripple Emulator. If you don't see your app in jQuery Mobile styling, odds are that you did not turn on the ability to serve files. If that is the case, see the steps above.



Turning on the Emulator
  1. In the upper right hand click the "Customize and control Google Chrome" button
  2. Then click Tools -> Extensions
  3. Scroll down the page until you see the entry for Ripple Emulator (beta)
  4. Check the box titled, Allow access to file URLs
  5. Back on the tab holding our application, right click on the page, Emulator -> Enable
  6. If you see a dark page titled, "Are you ready for this?!?!", click Mobile Web (default)



The page should switch over to emulator view. Congratulations, you are now ready to begin mobile development with jQuery Mobile.





WAT!

If you love JavaScript like I do, you will love this video. It is hilarious. Big thanks to my pal, Jeremy Clark, for sending me this link.


Saturday, April 13, 2013

Code School Review


I've been playing around with Code School this week and I have to admit it is awesome. It is cool way to learn coding. You watch a video then do exercises to cement the knowledge in your head. The work is all done in the browser which allows the Code School to monitor your progress and check work. This is super cool and probably the best form of computer based learning I've ever tried. As a former scout, I liked the fact that you earn badges by completing lessons and courses.

I  completed the course on the Chrome Dev Tools. I tried this course because I thought I knew all there was to know about Chrome and happily I was wrong. I learned quite a few things I didn't know, including that HTML tags can be manipulated dynamically by clicking and dragging them. I don't know how I missed that for so long. I also completed the courses on jQuery and Git, two more things that I know thoroughly but still learned new things. 

Code School isn't free, but it is reasonably priced. For roughly the cost of a book, 25 bucks a month, you can dine all you can eat. You can save quite bit more by signing up for a full year. All of you corporate coders can save your companies quite a bit of training dollars by signing up your entire development team.

Code School has quite a few courses available and they seem to be adding new ones frequently. They cover quite a few web technologies and even have courses on Ruby and iOS, yes iOS. If you are a coder like me and you like to keep your skills sharp, Code School is for you. 

If you'd like to try before buy, please use the link below. It will give you two days to try any and all of courses you'd like.

Monday, April 1, 2013

jQuery Mobile Jump Start

The Coffee+Coffee app Listings
On June 15th & 29th, both Saturdays, I will be teaming up with the cool people of the South Bay Mobile User Group  to teach a six hour jQuery Mobile Jump Start class at the Marriott in Torrance, California. This will be a hands on deep dive into jQuery Mobile, so you will need to bring your laptop. In this class I will reveal all of the cool stuff in my coding bag of tricks and you will leave with working code including the complete source code for the Coffee+Coffee web app built with jQuery Mobile 1.3.1. Thanks to the sponsorship of the good folks at Prosum Technology Services the cost of this class is only $30. So you will need to sign up fast!