CIS 454: Mobile Application Development

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, in view of the very low market penetration of mobile platforms based on operating systems other than Unix or Linux, the platforms for homework and projects will be Google Android and HP WebOS (based on Linux) and Apple iOS (based on BSD Unix.)

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.

Equipment:

Every student is expected to have a computer (desktop or laptop) capable of running the specified development environment, and a mobile device with one of the supported homework operating systems. You may use an Android emulator (below) instead of a mobile device for homework, but only if the emulator installs and runs correctly on your desktop or laptop computer. A web server will be available for web-based homework and for course projects.

Homework server:

You will use the web server shremotesun15.calstatela.edu for your homework and project. See Using_The_Web_Server.

Assigned Resources:

Textbook:
Thomas Myer, Beginning PhoneGap, 2012.
Every chapter assignment includes doing all the example work in the chapter, and walking through all your code with your study partner.

Code Examples: Follow the "Download Code" link from the textbook web page.
Additional examples, when available, will be accessible through links from http://shremotesun15.calstatela.edu/faculty/areed2/CIS454

Development Platform:
Phonegap:Build
Cygwin (Bash, Git, and many other useful Linux/Unix tools for Windows.)
Git for OSX from code.google.com

Emulator:
Android SDK - includes Android emulator

Other Resources:

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

Tentative Schedule:

Syllabus walkthrough; course startup activities.
Homework for next week:
Myer, Preface and Chapters 1-2
Email, from your university e-mail (@calstatela.edu)r to areed2@calstatela.edu, the university e-mail address of your study partner.
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, which includes the Android Emulator that you may use whenever the homework calls for using a mobile device.
Configure the emulator using the Manager as follows:
Name: Virtual_Phone
Target: Google APIs (API level 7)
Skin: 480x854
SD Card: 8192 M
Snapshot: True
hw.lcd.density: 240
hw.keyboard.lid: yes
snapshot.present: true
vm.heapSize: 128
hw.ramSize:256
Sign up for PhoneGap:Build (see above) and make the sample app as a public application. Download and test it on your Android device if you have one, or on the Android emulator if you don't.
Discuss your assignment with your study partner. E-mail me your questions. Please e-mail me immediately if you have not met with your study partner - for any reason.
Questions and discussion of assigned homework (above.)
Homework for next week:
Myer, Chapters 3-4
On your computer, open a bash window, make a directory for the course, and clone the PhoneGap:Build sample application into it:
mkdir CIS454 cd $_ git clone http://github.com/phonegap/phonegap-start.git start
and read the files under the start directory, comparing them with the sample application which you built, downloaded, and installed in last week's homework; and with the in-class walk-through. 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 start wide rm -rf wide/.git
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, public 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. Please e-mail me immediately if you have not met with your study partner - for any reason.
Questions and discussion of assigned homework (above.)
Homework for next week:
Start planning your project.
Myer, Chapters 5-6. Review or catch up on previous chapters.
Review the conversion example (part 1.) Test each html file (preferably in side-by-side tabs) and read the source code (use "View Source" in right-click or View menu, depending on browser.)
Make a Beginning_Phonegap directory in your CIS454 directory. Ftp book files from the publisher (see below) and make txt links to the html files so you can view them in your browser, copy and paste etc. The following is mostly bash output; you type only if bash is waiting for a prompt. Be sure to read the Errata; you may want to print a copy and keep it on hand. Open and read the txt files for all the examples through Ch. 6.
Make a phonegap:build version of the app in chapter5a.html, which displays the properties of the device on which it is run. (1) make a copy of the "wide" source code directory to "device". (2) edit config.xml in device, changing the id parameter to "edu.calstatela.yourid.device" (substitute your id for "yourid") and changing the name, description, and author fields as needed. (3) edit index.html, substituting the body section of chapter5a.html for the existing body section, same for title. (4) replace the code in the init function in assets/js/app.js with the code of the onDeviceReady() function in chapter5a.html. (5) Zip, upload the zip archive as a new PhoneGap:Build public app; manufacture, download, install, and test.
Discuss your assignment and walk through your code with your study partner. E-mail me your questions. Please e-mail me immediately if you have not met with your study partner - for any reason.
Questions and discussion of assigned homework (above.)
Homework for next week:
Write your project proposal and submit it by e-mail for approval.
Myer, Chapters 7-8
Make a recursive copy of the code for "device" into "clean." Make a zip archive. Modify the code of "clean" to remove, small step by small step as I demonstrated in class, 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. Please e-mail me immediately if you have not met with your study partner - for any reason.
Questions and discussion of assigned homework (above.)
Homework for next week:
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 calculator.3/calculator_file/calculator.js and 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 relpace(), as needed.
Myer, Chapters 9-10
Copy the application source directory "clean" to "currency." Replace the content of the body section of index.html with the content of the body section of calculator.3/calculator.3.html. Remove the device identification code from assets/js/app.js and copy in all the code from calculator.3/calculator_files/calculator.js. Move the declaration of the sentry variable to the top of app.js. Adjust in-line scripts in index.html and the tags in the xml file. Zip, build, download, and test. If the currency app fails, analyse likely causes why your attempt failed, and modify your code accordingly.
Discuss your assignment and walk through your code with your study partner. E-mail me your questions. Please e-mail me immediately if you have not met with your study partner - for any reason.
Questions and discussion of assigned homework (above.)
Homework for next week:
Work on your project. Bring a snapshot of your project work to class on your laptop or USB drive.
Myer, Chapters 11-12
(1) Integrate the code that updates currency rate information, in the CurrencyConverter.html file that I walked through in class, into the mobile "currency" app. You will need to remove from the head section of existing index.html the in-line JavaScript code at the end, and replace the body section with the body section that we walked through in class. You must also edit the config.xml file to include the network resource (see the xml file in phonegap-start) and update the description to credit x-rates.com as the source of updates. Test the resulting app, comparing conversion results with x-rates.com to make sure that your app is updating the rate information.
(2) To prepare for next week's homework on storing rates and settings in Lawnchair, port the tested app code back into the framework of phonegap-start. After moving the existing currency directory and zip archive to new names, make a new copy of phonegap-start to currency. In the new currency directory, make backup copies of the 3 files that will be replaced or modified: config.xml, index.html, and assets/js/app.js. Then copy over the just tested config.xml and index.html files. Append the tested app.js to the exisitng app.js, remove redundant code, and test the result. Edit the init code to give alarm only if the network is not available. Keep testing and editing until the app works correctly but DO NOT remove any LawnChair code.
Discuss your assignment and walk through your code with your study partner. E-mail me your questions. Please e-mail me immediately if you have not met with your study partner - for any reason.
Questions and discussion of assigned homework (above.)
Homework for next week:
Work on your project. Bring a snapshot of your project work to class on your laptop or USB drive.
Myer, Chapters 13-14
(1) Examine the files in currency5 on shremotesun15. If the code from your homework differs, study the differences. You may change your code as needed, or just to make it clearer.
(2) Add code to store "from" and "to" currency selections in the Lawnchair, and to restore the selections from Lawnchair when the app is started up again after a shutdown, as discussed in class. Test your code - you will need to re-boot your mobile device. Compare your code with the code in currency6. Where your code differs, study the differences. You may change your code as needed, or just to make it clearer.
(3) Add code to store currency lists and rates in the Lawnchair when downloaded. Add a timestamp [use new Date()]. Then add code to restore from Lawnchair when the app is started up without a Web connection (e.g. in Airplane Mode; connection may be "null") after a shutdown. Add html to tell the user whether the rates are current or saved, and display the timestamp. (The original date for the data pre-set in index.html is Fri Jan 27 2012.) Test your code - you will need to use (or not use) Airplane Mode and re-boot your mobile device twice.
Discuss your assignment and walk through your code with your study partner. E-mail me your questions. Please e-mail me immediately if you have not met with your study partner - for any reason.
Questions and discussion of assigned homework (above.)
Homework for next week:
Work on your project. Bring a snapshot of your project work to class on your laptop or USB drive.
Myer, Chapter 15 and Appendices
Download to your mobile device the Currency Converter in https://build.phonegap.com/apps/74032 and test it. You will get extra credit for finding bugs, and for good suggestions for improvement.
Unzip currency7.zip through currencyA.zip from http://shremotesun15.calstatela.edu/faculty/areed2/CIS454/ - don't forget to move the currency directory made from currency7.zip, to currency7 etc. Study and understand the differences (use diff -b) between the different vesions of index.html and app.js. Then work with the app on your mobile device to improve your understanding of how the code in index.html and app.js works in practice.
Make analogous improvements in the user interface of your project.
Discuss your assignment and walk through your code with your study partner. E-mail me your questions. Please e-mail me immediately if you have not met with your study partner - for any reason.
Questions and discussion of assigned homework (above.)
Course project presentations, part 1.
Homework for next week:
Addidtional homework TBA.
Work on and finish your project.
Discuss your assignment and walk through your code with your study partner. E-mail me your questions. Please e-mail me immediately if you have not met with your study partner - for any reason.
Course project presentations, part 2.
Incorporate presentation feedback into your project.
E-Mail with URL of finished project deadline: Noon, Monday of Finals Week.

Project:

Your project counts for a major fraction of your grade. For your project, you must convert an existing Web application into a mobile application, using PhoneGap:Build for spiral manufacturing and testing. Code re-use and adaptation is encouraged; re-writing existing code that could have been productively re-used is discouraged; but any code or design feature that you did not write yourself MUST be credited (in a comment) to the source. This includes any suggestions or other contributions from your study partner. 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.)

Grading:

The primary grading inputs are your class participation and your project presentation, and written input (e-mailed to areed2@calstatela.edu.) To permit course management using my e-mail processing scripts, written input must be sent from your student e-mail account @calstatela.edu. No credit will be given for e-mail sent from any other address. I will raise to an A or A- the grade of any student from whom I learn, by way of class participation or project, a new concept, insight, or technique. Concrete information about programs or bugs may also raise your grade somewhat, if it is useful and perceptive.

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.

Study Partners:

You are expected to select a study partner among your colleagues in the class (or, but only if there are an odd number of students in the class, two study partners, so that you will meet in a group of three). You will exchange telephone numbers and e-mail addresses among partners, and meet with your parner or partners for approximately 3 hours each week 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 matters 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.

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.