Prog 272 Final 2015
There are two primary goals:
- Move the Midterm into a Cordova Application
- Add some the ability to get the users location and to make a phone call. We will discuss these features on Thursday.
- Start your server running on AWS, and call a route from inside your Cordova App. We will cover this step in class in Thursday.
There is enough information here to get you well into this project, but check up here regularly for updates.
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.
Create your working folder. The syntax for the command looks a bit like this:
$ cordova create --help
For additional details, issue the cordova create –help command yourself.
Given the above, you want to navigate to your repository and type
cordova create Week12Final com.lastname.prog272_final Prog272FinalLastName
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 Prog272FinalLastName, where LastName is your last name.
Copy the custom icons over as explained here.
Now add the platform:
cordova platform add android
Make sure you are connected to your phone or to an instance of Android x86.
- Android Studio Slids
- Week03 Overview
- Remote Debugging
Build and install the project
cordova build android adb install platforms/android/ant-build/CordovaApp-debug.apk
Test it, make sure it works.
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 prog272-lastname and your best version of the Midterm is in a folder called Source, then you want the folders arranged like this *:
When copying the files over from Source, I made sure to copy the following files:
- ../Source/public/js/Control.js -> www/js/Control.js
- ../Source/public/css/style.css -> www/css/style.css
- ../Source/public/Presidents.json -> www/Presidents.json
- ../Source/public/Scientists.json -> www/Scientists.json
Then I saved my Cordova geneated copy of index.html and copied over index.js from Source:
- www/index.html -> www/index.html.old
- ../Source/views/index.html -> www/index.html
- ../Source/views/JsonAjax.html -> www/JsonAjax.html
- ../Source/bower.json -> www/bower.json
NOTE: Be sure you have used our JadeToHtml to convert JsonAjax.jade to JsonAjax.html, etc….
A script for automating the process might look something like this:
#! /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 to work. For instance, you will have to make the menus work when requestion HTML files rather than rendered Jade. This will mean making changes to your HTML. Line 1 is the original call to load json-ajax as rendered Jade, while line 2 shows how it should look in your Cordova project:
<li id="json-ajax"><a href="json-ajax">JsonAjax</a></li> <li id="json-ajax"><a href="JsonAjax.html">JsonAjax</a></li>
NOTE: You should probably remove the live reload code from index.html.
Step Five: Location
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: Route Parameters
Complete the Route Parameters assigment. This is an in class exercise, but it will also count as part of the final. Make sure you complete it.
Step Seven: Cordova Plugins
- Elven Various
- Elven Phone
Add support for phone calls, vibration, and location (Elven Geo) to your Final.
Add a markdown loader page. One page in your final, two buttons. Button one loads a Jade/Markdown page. Button two loads an additional Jade/Markdown page.
If you have what can only be described as too much time on your hands, or perhaps it could be called a craven need to write code, add support for iterating over multiple records instead of just viewing male and female records. You should be able to load a JSON file, then change the male and buttons to forward and back. See The PresidentsJson project for a somewhat outdated guide:
Turn it in
The bottom line is this:
- Complete steps 6 and 7: Route parameters, Cordova Plugins
- Move your midterm to Cordova as best you can
- Add new pages to the Cordova app for extra credit.
Also, don’t miss the menu on mobile hint.
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 worked for me:
<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. For instance, there should not be a public/components folder.
In index.html, when linking in files, the name of the folder you use does not matter. You can call your bower folder components or bower_components. Just be sure you don’t put a slash in front of it.
<link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
If you are at all uncertain as to whether or not jquery and bootstrap are getting loaded, don’t forget to use the Chrome debugger to inspect your results on your device. Type this in the address bar of the browser:
Then go the Network page and press F5 to refresh. You will be able to see what files are loading.
Here is my JadeToHtml file:
#! /bin/bash ./node_modules/.bin/jade --pretty views/index.jade ./node_modules/.bin/jade --pretty views/JsonAjax.jade
The first line tells Linux where the bash scripting engine is located. The script would still work without this line.
The next line begins by pointing at the copy of Jade in my node_modules folder. Of course, this won’t work unless you have first run npm install and created a node_modules folder. Most of you have done that by now.
The line continues by passing the pretty flag, which is described like this:
jade --help Usage: jade [options] [dir|file ...] Options: // Text omitted here -P, --pretty compile pretty html output // Text omitted here
Finally, we pass in the name of the file that we want to convert to HTML:
Put it all together and we get this:
./node_modules/.bin/jade --pretty views/JsonAjax.jade
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 -
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:
- Install lamp, as described here. I believe that ubuntu now comes with tasksel installed, so you can skip that step. Remember to pick a password for MySql that you can remember as you might want the feature x months from now, but not today.
- Save and copy the attached index.html to your AWS instance as described below.
- Pull the latest from JsObjects, navigate to the Cordova/CordovaPhoneCall directory, run bower install, and copy the www folder to /var/www/html:
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.
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.