/pgb-mobile-app-design

Using the Phonegap Developer App and NItrous.io this should eventually be a complete Mobile App Design course for High School Students

Primary LanguageJavaScriptMIT LicenseMIT

pgb-mobile-app-design

Using the Phonegap Developer App and NItrous.io this should eventually be a complete Mobile App Design course for High School Students

Note: Don't use IE (Internet Explorer as the web based drag and drop is not working as of Oct, 2014)

Youtube example installation video at https://www.youtube.com/watch?v=nuCaWh6_Hp8

Installation steps:

#Start Box

  1. login to http://nitrous.io

  2. open dashboard

  3. New Box

  4. click on node.js

  5. (give your box a simple name such as a few letters of your first name)

  6. (enter my github url) https://github.com/hpssjellis/pgb-mobile-app-design.git

  7. click Create Box

  8. click IDE

#Setup Box (once only)

  1. (In the terminal at the bottom of the screen type)

  2. npm install connect

  3. npm install connect-phonegap

  4. In the menu area above the terminal click "show hidden" to show the hidden .filenames

  5. (using the package manager on the left open workspace and open pgb-mobile-app-design and move .nitrousboxrc file to the root folder, the upper-most folder)

  6. chmod +x .nitrousboxrc

  7. click "hide hidden"

  8. (note: learn a few linux commands such as: pwd cd .. cd folder ls -la ./runbash.sh tab up arrow)

  9. click box menu item --> restart box to activate .nitrousboxrc on startup.

  10. Click Preview on the menu item (should see your web page. Copy this URL)

  11. Install the Phonegap Developer App on your mobile device

  12. Type the URL and see the webpage on your device.

#Daily use

  1. login to nitrous, start your box

  2. Start the Phonegap Developer App and view your webpages as Mobile Apps. (Note: Apps are only different from web pages when using plugins like the camera, accelerometer, GPS etc)

#Tips and Tricks

  1. Do not use IE!

  2. When using the Preview button it is a good idea in chrome to load an incognito window as Nitrous will be more stable if you accidentally load a plugin

  3. Students with issues should be using google. Phonegap and Javascript have an enormous amount of example code on the web.

####Use this github site at your own risk! Note: This site will be changing as new information is found.

###Disclaimer: I spend my time getting complex things working in simple ways. I have no idea if I am doing anything correctly so please beware if you use my work. If you like this App and can hum, play or sing please help the musically illiterate, use a flash capable computer to add your favorite song at http://www.rocksetta.com twitter @rocksetta