Teaching Guide

Elvenware Logo

TOC

Isit 322 Final 2015

There are two primary goals:

There is enough information here to get you well into this project, but check up here regularly for updates.

Sample Screenshot:

Isit 322 Final Home Page

NOTE: Start working today, the moment you see this document. Don't wait until the night before it is due to begin! We have a hard stop on the final, you must get it in on time.

Videos

Step One

If you have not done so already, create your working folder for the Cordova project. The syntax for the command looks a bit like this:

$ cordova create --help
Synopsis

    cordova create <PATH> [ID [NAME [CONFIG]]] [options] [PLATFORM...]

Create a Cordova project

    PATH ......................... Where to create the project
    ID ........................... reverse-domain-style package name
    NAME ......................... human readable field
    CONFIG ....................... json string with key/values

For additional details, issue the cordova create --help command yourself in the bash shell.

Given the above, you want to navigate to your repository and type

cordova create Week12Final com.lastname.Isit322_final Isit322FinalLastName

Be sure to use underscores and not hyphens. The command above will place your project in a directory called Week12Final. The project name on your android will be Isit322FinalLastName, where LastName is your last name.

If you need to rename a project, see the information found here:

Step Two

Copy the custom icons over as explained here.

Now add the platform:

cordova platform add android

Step Three

Make sure you are connected to your phone or to an instance of Android x86.

Build and install the project

cordova build android
adb install platforms/android/ant-build/CordovaApp-debug.apk

Test it, make sure it works.

Step Four

Copy over files from the most advanced version of the midterm that you have. Find the verison you like the most, and copy over its files.

There is lots of information on how to convert an Express project to a Cordova project on this page:

HINT: Make sure the two projects are next to each other in your directory structure. This will make the act of copying from one project to another as simple as possible. For instance, if your repository is called *isit322-lastname** and your best version of the Midterm is in a folder called Source, then you want the folders arranged like this *:

A script for automating the process might look something like this, though the details will of course differ considerably:

    #! /bin/bash

    SOURCE_QUERY="../Source"

    # mv www/index.html www/index.html.old

    cp -v $SOURCE_QUERY/public/js/Control.js www/js/.
    cp -v $SOURCE_QUERY/views/index.html www/.
    cp -v $SOURCE_QUERY/views/JsonAjax.html www/.
    cp -v $SOURCE_QUERY/public/css/style.css www/css/.
    cp -v $SOURCE_QUERY/bower.json www/.
    cp -v $SOURCE_QUERY/public/Presidents.json www/.
    cp -v $SOURCE_QUERY/public/Scientists.json www/.

    echo "Set up your .bowerrc file and run bower install"

Don't view this as written in stone. For instance, There may be additional lines you wish to add such as:

cp -v $SOURCE_QUERY/public/css/Custom.css www/css/.
cp -v $SOURCE_QUERY/public/css/Button.css www/css/.

Note that the line SOURCE_QUERY="../Source" will likely differ on your system since the folder where you keep your best vesions of the Midterm is not likely to be called Source.

Now you want to install the updated version of your project and fuss with it until it starts

NOTE: If it exists, you should probably remove the live reload code from index.html.

Step Five

Work through this exercise: Route Parameters

For extra credit, add support for detecting if you are connect to an android device and reporting location. Adding support for detecting if you are connected to a device is relatively simple, since the code is in the generated index.js that comes with all Cordova projects. It is the code that makes the that glows green in the default Cordova project.

You should also add support for location to your best version of the Midterm, and ensure that it looks good on a mobile device.

Step Six

Work through these exercises: Cordova Various Plugins

For extra credit add support for vibration, for finding your current location, and for making phone calls to your final.

Additional information is available here:

Step Seven

Add support for routes, as detailed on Wednesday. A good place to start would be with these two projects:

Turn it in

The final you turn in should contain three sections:

We have already gotten the midterm running in Cordova, so that is mostly a no-op. The new features that are not in the midterm, that I want to see integrated into the final, are:

For extra credit, install lamp on AWS and have the web version of your application running there. You might have slightly different versions for the web app and the mobile device. For instance, there are different ways to make phone calls on each platform.

Use your common sense when developing the final:

Since I gave you my copy of the midterm, I expect most people can get their Midterm running as a web application. Please don't just submit my version of the midterm, integrate it into your version. If you have trouble getting the Cordova portion working correctly, just do what you can, and submit that. That is less essential, but still important, especially for the students who understand most of this technology.

NOTE: We've all worked hard enough already this quarter. No staying up until 3 AM! Just get the low hanging fruit: Step six and seven. Then do the best you can on the Web and Cordova versions of the midterm with possibly one or two extra features.

My major goal is to see that you have some understanding of the various technologies we have covered this quarter. If you are stuck for a topic for your paper, you could write about how we use the following technologies to create modern, connected applications:

Hints

Look over the JsObjects/Cordova/CordovaNodeRoutes project very carefully. Make sure you understand it. The relationship between CordovaNodeRoutes and NodeRouteParams is similar to the relationship between your Cordova and Web App versions of the Final. Compare, for instance, their respective versions of Control.js and style.css.

NOTE: You can use meld to compare two files or directories.

At some point, you are going to find that the code in Week12Final is close enough to what you want that you don't want to copy the files over the Source folder again. And yet, you will still likely be making changes to both Week12Final and Source and you will want to be sure some of those changes end up in both projects. The tool you want is meld. Here is the command, as it would be issued from the root of your repository:

meld Week12Final/www Source/public

This will allow you to compare the contents of www and public. You can see line by line differences between the files in the two projects, and you can copy individual lines from one file to the other.

Linking to Bootstrap and JQuery. This kind of thing worked for me in one project, though the details for this project may differ considerably:

    <link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/Custom.css">
    <link rel="stylesheet" href="css/Buttons.css">
    <script src="components/jquery/dist/jquery.js"></script>
    <script src="components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="js/Control.js"></script>

Of course there has to really be a components folder.

Python Web Server

As detailed elsewhere, run the Python web server in your www folder to see if you have at least parts of the app working correctly. For instance, you can check if you are loading all the files properly.

    $ python3 -m http.server 30025
    Serving HTTP on 0.0.0.0 port 30025 ...
    127.0.0.1 - - [21/Mar/2015 10:01:02] "GET / HTTP/1.1" 200 -
    127.0.0.1 - - [21/Mar/2015 10:01:04] "GET /www/ HTTP/1.1" 200 -
    etc...

You only need to type the first line shown above. The rest are output from the server once it starts.

Using the Phone Code in a Browser

Go here with your phone: http://calvert.work/phone/

Click on the two bottom links. They should pop up the phone. If they do not, I would imagine this means that the browser on your phone does not support those features.

We did not cover in this class, but I did the following to get the page running on my AWS site:

NOTE:Installing lamp puts support for the Apache Web Server, MySQL, PHP, Python and Perl on your system. We are really only interested in Apache. The root folder from which Apache serves up HTML is /var/www/html.

Copy index.html:

sudo mv /var/www/html/index.html /var/www/html/apache.html
sudo cp index.html /var/www/html/index.html

Set up and copy Cordova Phone Call:

cd ~/Git/JsObjects/Cordova/CordovaPhoneCall/
bower install
sudo mkdir /var/www/html/phone
sudo cp -r www/* /var/www/html/phone/.

If you want to edit index.html on EC2, then

cd /var/www/html/
sudo nano index.html

We did not have time to get into in class, but the availability of individual features can be detected in various ways, but the most common is with modernizr. If you can't make a phone call from inside your browser, I'd like to know. Go to the discussion area, find the appropriate thread, and tell me what device you are running, what version of the OS, and what browser you are using.