CIS 454: Mobile Application Development
 
Winter 2014
(May be updated in real time during the academic quarter.)


Teacher: Adam Reed, EE, PhD, CTT (areed2@calstatela.edu)

Course Description:

This course will provide you with the knowledge and skills needed to develop applications for mobile computing platforms, and with a foundation of knowledge that you will need to do so usefully and effectively. While the aim is to develop skills applicable to any mobile computing platform, the platform for homework and projects in the Winter 2014 presentation of this course will be Google Android, currently the most widely used (and least expensive to enterprises and users) mobile application platform. You should consider buying an Android device with WiFi if you don't already have one (they are available for less than half the price of a typical university textbook.) Questions about the application of what you are learning, to platforms other than Android, are always welcome. Our primary application-manufacturing platform, phonegap.com, supports many platforms, including Microsoft Windows Phone; Windows 8.x; and Apple iOS.

Pre-requisites:

One programming course and one Web design course, or equivalent experience.

Time demands:

This course requires, in addition to 4 hours of lab/lecture per week, between 8 and 16 hours per week in independent study and practice. Students with work experience in application development will need about 8 hours per week in addition to class; students without prior experience may need up to 16 hours per week in addition to class time.

Homework server:

A web server will be available for web-based homework, for the study of front-end/back-end interactivity, and for course projects. You will use this web server, shremotesun15.calstatela.edu, for your homework and projects. See Using_The_Web_Server.

Assigned Resources:

PhoneGap Documentation
Phonegap:Build
Cygwin (Bash, Git, and many other useful Linux/Unix tools for Windows.)

Project:

Your project counts for a major fraction of your grade. For your project, you and your study partner must work together using Pair Programming and selected components of Spiral Development and eXtreme Programming methodologies, as taught in class. Your assignment is to modify the assigned mobile application to meet assigned requirements. Code re-use and adaptation is encouraged. Re-coding, from-scratch, of existing code that could have been productively re-used is discouraged. Any code or design feature that you did not write yourself, MUST be credited (in a comment) to the source. This includes all suggestions or other contributions from study partners to each other. Any failure to acknowledge the contribution of any person other than yourself to your project will be treated as a violation of the University's policy on Academic Honesty (see below.)

Participation:

Questions from which students may benefit will be answered in class. I will not answer individual questions during breaks or after class. If you wish to discuss something during office hours, please send me e-mail at least a day in advance; if the answer to your question may be of general interest I will discuss it in class. Questions and insights during class are encouraged; if I learn something new to me from your question I may raise your grade accordingly.

Grading:

The project counts for 80% of your grade; contributions and questions e-mailed from your calstatela.edu e-mail account to areed2@calstatela.edu, the other 20%. Contributions and questions first made during office hours or in class must be e-mailed, as above, to count toward your grade.

Study Partners:

You will be assigned a pair programming partner, taking into account your previous education and experience. You will exchange telephone numbers and e-mail addresses between partners, and meet with your partner or partners for approximately 3 hours each week to program together, to review your understanding of current course content, and of all your work in this course. Please make sure to bring to class any issues that come up in reviewing course content with your study partner. If you miss any class work, you are responsible for obtaining your study partner's notes and recollections, and for asking, first of your study partner and then of me, whatever questions you find necessary to fill out your understanding. To benefit as much as possible from having a study partner you should do your hands-on work (and also watch videos etc.) with the active participation of your study partner, as in Pair Programming in eXtreme Programming - except that each of you will type in your own code for your homework assignments and projects. Teams of more than two students are not an effective way to learn programming skills. Each individual student is individually responsible for project work and for participation in, and contributions to, this course. If you are unable to work with a study partner you remain responsible for your own work and contributions.

Accomodation of Students With Disabilities:

Reasonable accommodation will be provided to any student who is registered with the Office of Students with Disabilities and requests a needed accommodation.

Academic Honesty:

A student who infringes the University's policy on Academic Honesty will receive a failing grade, without regard to other aspects of performance in this course.

Other Resources:

Xmarks, a platform for access to Favorites/Bookmarks across browsers.
Reference and tutorials on HTML5, Javascript, and CSS.

Tentative Schedule:

  1. Syllabus walkthrough; course startup activities.
    Homework for next class:
    Read and, where applicable, download, install, and try out the Assigned Resources listed above.
    E-mail me, listing your available equipment for this course, as well as your education and experience in html, css, javascript, java, and any other coursework that you may have had in programming or in application design.
    If working on Microsoft Windows, download and install the Cygwin distribution from Cygwin.com, which includes bash and git and lots of other very useful software. Install everything (click on the toggle next to "Default" at the top of the installation outline and wait until "Default" changes to "Install".)
    If working on OSX, download and install Git for OSX.
    Download, install and configure the Android SDK.

  2. Questions and discussion of assigned homework (above.)
    Homework for next class:
    Email, from your university e-mail (@calstatela.edu) to your study partner with Cc: to areed2@calstatela.edu, your availability schedule and your contact information, preferably including your telephone numbers as well as your university e-mail.
    Discuss your assignment with your study partner. E-mail me your questions.
    On your computer, open a bash window, make a directory for the course, and clone the PhoneGap

    mkdir CIS454
    cd $_
    lynx -source -dump \
    http://web.calstatela.edu/faculty/areed2/Spiral.apk \
    > Spiral.apk
    Spiral.apk

    Sign up for PhoneGap:Build (see above) Than build the sample app from the zip file (or you may sign up for github and build it from there.) Download and test it on your Android device if you have one. Then cd back to the CIS454 directory (parent of start) and copy start to a new directory, wide, in which you will edit a modified version of the app:

    cp -r phonegap-phonegap-start-d88ef41 wide

    Then use the text editor of your choice to edit wide/assets/css/master.css so that the map is stretched to the available width (change the width: and height: attributes of the div around the map img to 100%, and add a section for the map img, setting its width to 100%.) Also edit the name and author sections of wide/config.xml. Then cd back to the CIS454 directory and make a zip archive of the edited ("wide") app:

    zip -r wide.zip wide

    Build a new version of the app from wide.zip. Download it to your mobile device, install it, and test it. Discuss your assignment and walk through your code with your study partner. E-mail me your questions (immediately if both you and your partner cannot continue the assigned work.)

  3. Questions and discussion of assigned homework (above.) Code walkthroughs; discussion of image-based layout techniques to make apps that automatically adjust to the size of the mobile display. Image creation and manipulation; using ImageMagick.
    Homework for the next class:
    (1) Start planning your project.
    (2) Use the "Yellow border with rounded corners" example to create pictures with a blue border (your app will display the blue-bordered image when that image is selected.)
    Discuss your assignment and walk through your code with your study partner. E-mail me your questions.

  4. Questions and discussion of assigned homework (above.)
    Homework for next class:
    Download my versions of wide and device to your computer. Make wide and device directories, and unzip each apk innto the corresponding directory.
    If your version of wide is not working correctly, compare your code with mine; correct yours accordingly, until your version of wide works correctly. Then save your apk of wide, and place it in your web directory on shremotesun15. At this point you may delete your wide app from build.phonegap.com.
    Make a recursive copy of the www code for "device" into "clean." Make a zip archive. Modify the code of "clean" to remove, small step by small step, as much redundant code as you can. After each small step, copy the zip archive of the code that is already working and tested to clean.zip.bck. Then zip the newly modified code, upload, manufacture, download the new version of "clean" and test it. If a modification fails, retrieve the working code from .bck, analyse likely causes why your attempt failed, and try something else. Make notes to ask in class about anything that did not work as you expected.
    Discuss your assignment and walk through your code with your study partner. E-mail me your questions.

  5. Questions and discussion of assigned homework (above.)
    Homework for next class:
    Work on your project.
    Read and discuss with your study partner the Wikipedia article on Regular Expressions, the tutorial on the JavaScript RegExp Object; and the reference page on the JavaScript RegExp Object. Then walk through the code under /home/areed2/myweb/CIS454/currency on shremotesun15, examine it in a browser from http://shremotesun15.calstatela.edu/faculty/areed2/CIS454/currency/ . Discuss the regular expression code with your study partner, to make sure that you understand what it does and how. Consult the w3schools.com pages on relevant methods, such as replace(), as needed.
    Download http://shremotesun15.calstatela.edu/faculty/areed2/CIS454/CurrencyConverter-debug.apk (the app whose code you just read) and test how it works.
    Discuss your assignment and walk through your code with your study partner. E-mail me your questions.
    The class will include a walk-through examining the currency calculator code.

  6. Questions and discussion of assigned homework (above.)
    Homework for next class:
    Work on your project. Bring a snapshot of your project work to class on your laptop or USB drive.
    (1) Download and install my "Monuments of Manhattan" spiral development prototype from http://www.calstatela.edu/faculty/areed2/Spiral.apk . Test it and play with its features.
    (2) The class will include a walk-through examining the desktop phonegap distributions, http://docs.phonegap.com/en/2.4.0/guide_getting-started_index.md.html , and (most of) the code of the current snapshot of Spiral.apk at /home/areed2/myweb/CIS454/android_pilot on shremotesun15.calstatela.edu.
    Discuss your assignment and walk through your code with your study partner. E-mail me your questions.

  7. Questions and discussion of assigned homework (above.)
    Homework for next class:
    Examine the files in /home/areed2/myweb/CIS454/android_pilot on shremotesun15. Walk through index.html and index.js, paying particular attention to onClick callbacks.
    Work on your project. Bring a snapshot of your project work to class on your laptop or USB drive.
    Discuss your assignment and walk through your code with your study partner. E-mail me your questions.

  8. Questions and discussion of assigned homework (above.)
    Homework for next class:
    Work on your project. Bring a snapshot of your project work to class on your laptop or USB drive.
    Discuss your assignment and walk through your code with your study partner. E-mail me your questions.

  9. Course project presentations.
    Incorporate presentation feedback into your project.
    E-Mail with URL of finished project deadline: Noon, Monday of Finals Week.