Jeff Yi CS286 PhoneGap Lab Lab at: - PDF document

Jeff ¡Yi ¡ CS286 ¡ PhoneGap ¡Lab ¡ Lab ¡at: ¡http://cs10.cs.sjsu.edu/Yi_Jeffrey/PresentationPaper.html ¡ ¡ Introduction: ¡ ¡ PhoneGap ¡is ¡mobile ¡framework ¡that ¡allows ¡developers ¡to ¡program ¡ applications ¡using ¡HTML5, ¡JavaScript ¡and ¡CSS3. ¡So ¡whether ¡the ¡developer ¡is ¡ designing ¡a ¡new ¡application ¡or ¡using ¡an ¡existing ¡mobile ¡website, ¡they ¡can ¡easily ¡port ¡ this ¡to ¡a ¡mobile ¡application ¡without ¡knowledge ¡to ¡existing ¡mobile ¡frameworks, ¡such ¡ as ¡Android ¡and ¡iOS. ¡On ¡the ¡most ¡basic ¡level, ¡a ¡developer ¡can ¡simply ¡package ¡their ¡ web ¡pages ¡into ¡an ¡application. ¡With ¡a ¡little ¡more ¡work, ¡developers ¡can ¡take ¡ advantage ¡of ¡the ¡PhoneGaps ¡API ¡and ¡take ¡advantage ¡of ¡the ¡mobile ¡device’s ¡ hardware, ¡such ¡as ¡the ¡accelerometer ¡and ¡storage. ¡ ¡ Installation ¡and ¡getting ¡HTML5 ¡mobile ¡site: ¡ 1. Go ¡to ¡http://phonegap.com/download ¡and ¡download ¡the ¡zip ¡file. ¡ 2. Extract ¡the ¡phonegap ¡folder ¡to ¡your ¡home ¡directory. ¡ 3. Create ¡a ¡directory ¡to ¡use ¡for ¡PhoneGap ¡projects: ¡ mkdir ¡~/PhoneGap ¡ 4. From ¡terminal, ¡make ¡sure ¡you ¡are ¡in ¡the ¡home ¡directory ¡and ¡type ¡the ¡ following: ¡ git ¡clone ¡git@github.com:jeffyi/Cinequest.git ¡ ¡ This ¡git ¡repo ¡contains ¡the ¡HTML5 ¡mobile ¡version ¡of ¡Cinequest ¡ 5. You ¡now ¡have ¡PhoneGap ¡ready ¡and ¡a ¡copy ¡of ¡the ¡mobile ¡site ¡to ¡test ¡with. ¡ ¡ Creating ¡a ¡basic ¡app ¡with ¡command-­‑line: ¡ 1. First ¡create ¡an ¡Android ¡PhoneGap ¡project: ¡ ~/phonegap*/lib/android/bin/create ¡~/PhoneGap/Cinequest ¡ edu.sjsu.Cinequest ¡Cinequest ¡ 2. By ¡creating ¡the ¡project, ¡PhoneGap ¡sets ¡up ¡the ¡entire ¡framework ¡as ¡well ¡as ¡all ¡ the ¡tools ¡needed ¡to ¡build ¡and ¡run ¡the ¡application. ¡Next, ¡copy ¡all ¡files ¡from ¡the ¡ git ¡repo ¡you ¡downloaded ¡to ¡~/PhoneGap/Cinequest/assets/www/. ¡You ¡can ¡ overwrite ¡any ¡existing ¡files. ¡ 3. Now ¡from ¡command-­‑line, ¡run ¡the ¡following ¡the ¡command ¡to ¡build ¡the ¡ application: ¡ ~/PhoneGap/Cinequest/cordova/build ¡ 4. Next ¡you ¡need ¡to ¡run ¡the ¡application ¡in ¡an ¡emulator: ¡ ~/PhoneGap/Cinequest/cordova/run ¡ 5. What ¡do ¡you ¡see? ¡What ¡happens ¡when ¡you ¡click ¡through ¡the ¡different ¡links? ¡ 6. Take ¡a ¡look ¡at ¡the ¡HTML5 ¡code ¡and ¡look ¡for ¡“var ¡proxy”. ¡What ¡is ¡its ¡value? ¡ 7. Why ¡is ¡this ¡proxy ¡needed ¡for ¡the ¡HTML5 ¡version? ¡(Think ¡back ¡to ¡homework ¡ 4) ¡

8. Change ¡the ¡value ¡of ¡proxy ¡to ¡http://mobile.cinequest.org/mobileCQ.php?. ¡ PhoneGap ¡does ¡not ¡support ¡php ¡but ¡a ¡proxy ¡is ¡not ¡needed ¡when ¡using ¡ PhoneGap. ¡ 9. Now ¡rebuild ¡and ¡run. ¡What ¡do ¡you ¡see? ¡What ¡happens ¡when ¡you ¡click ¡ through ¡the ¡different ¡links? ¡ 10. You ¡have ¡now ¡created ¡a ¡basic ¡application ¡using ¡command-­‑line. ¡ ¡ Creating ¡a ¡basic ¡app ¡with ¡Eclipse: ¡ 1. Using ¡the ¡results ¡from ¡the ¡previous ¡section, ¡you ¡just ¡need ¡to ¡add ¡the ¡project ¡ to ¡Eclipse. ¡ 2. First ¡move ¡~/PhoneGap/Cinequest ¡to ¡another ¡location, ¡such ¡as ¡the ¡Desktop. ¡ 3. Open ¡Eclipse ¡and ¡point ¡the ¡workspace ¡to ¡~/PhoneGap. ¡ 4. Go ¡to ¡File ¡> ¡New ¡> ¡Other ¡and ¡select ¡“Android ¡Project ¡from ¡Existing ¡Code” ¡ 5. Select ¡the ¡Cinequest ¡folder ¡from ¡the ¡Desktop ¡and ¡also ¡make ¡sure ¡to ¡check ¡ “Copy ¡projects ¡into ¡workspace”. ¡This ¡way ¡we ¡can ¡use ¡PhoneGap ¡as ¡the ¡ workspace ¡and ¡add ¡the ¡Cinequest ¡project ¡to ¡it. ¡Otherwise, ¡ ¡you ¡would ¡get ¡an ¡ error ¡when ¡trying ¡to ¡add ¡it. ¡ 6. You ¡will ¡now ¡have ¡a ¡standard ¡Android ¡set ¡up ¡and ¡you ¡can ¡select ¡ Cinequest.java ¡and ¡run ¡the ¡application. ¡ ¡ Store ¡the ¡xml ¡file ¡on ¡the ¡device: ¡ 1. Now ¡we ¡are ¡going ¡to ¡take ¡advantage ¡of ¡using ¡a ¡native ¡app ¡by ¡storing ¡the ¡xml ¡ file ¡in ¡cache. ¡ 2. First ¡add: ¡ <script ¡type="text/javascript" ¡charset="utf-­‑8" ¡src="cordova-­‑ 2.6.0.js"></script> ¡ to ¡the ¡top ¡of ¡the ¡html ¡file ¡right ¡below ¡the ¡script ¡src ¡line ¡to ¡jquery. ¡This ¡will ¡ allow ¡us ¡to ¡use ¡the ¡PhoneGap ¡javascript ¡library. ¡ 3. Add ¡the ¡following ¡line ¡above ¡“$(function() ¡{“: ¡ document.addEventListener("deviceready", ¡onDeviceReady, ¡false); ¡ 4. Rename ¡“$(function() ¡{“ ¡to ¡“function ¡onDeviceReady() ¡{“ ¡and ¡make ¡sure ¡to ¡ remove ¡the ¡last ¡parenthesis ¡at ¡the ¡end ¡of ¡this ¡function. ¡ 5. The ¡reason ¡for ¡doing ¡this ¡is ¡that ¡PhoneGap ¡functions ¡cannot ¡be ¡accessed ¡ without ¡adding ¡an ¡event ¡listener. ¡Otherwise, ¡the ¡application ¡will ¡not ¡ recognize ¡the ¡objects ¡used ¡by ¡the ¡PhoneGap ¡API. ¡ 6. Next ¡replace ¡the ¡entire ¡getFestival() ¡function ¡with ¡the ¡following: ¡ function ¡getFestival(){ ¡ ¡ var ¡fileTransfer ¡= ¡new ¡FileTransfer(); ¡ ¡ var ¡url ¡= ¡proxy ¡+ ¡"type=festival"; ¡ ¡ fileTransfer.download( ¡ ¡ ¡ url, ¡ ¡ ¡ "/data/data/edu.sjsu.Cinequest/cache/festival.xml", ¡ ¡ ¡ function(fileEntry){ ¡ ¡ ¡ ¡ fileEntry.file(function(file) ¡{ ¡ ¡ ¡ ¡ ¡ var ¡reader ¡= ¡new ¡FileReader(); ¡ ¡ ¡ ¡ ¡ reader.onloadend ¡= ¡function(evt) ¡{ ¡

¡ ¡ ¡ ¡ ¡ console.log("Read ¡as ¡text"); ¡ ¡ ¡ ¡ ¡ ¡ festival ¡= ¡evt.target.result; ¡ ¡ ¡ ¡ ¡ ¡ festival_films ¡= ¡$($(festival).find('films')); ¡ ¡ ¡ ¡ ¡ ¡ festival_programItems ¡= ¡ $($(festival).find('program_items')); ¡ ¡ ¡ ¡ ¡ ¡ localStorage['festival'] ¡= ¡festival; ¡ ¡ ¡ ¡ ¡ ¡ console.log('ajax ¡success ¡for ¡festival'); ¡ ¡ ¡ ¡ ¡ ¡ loadDates(); ¡ ¡ ¡ ¡ ¡ ¡ loadAllFilms(); ¡ ¡ ¡ ¡ ¡ ¡ if ¡(typeof ¡ localStorage['currentDateFilms'] ¡!= ¡'undefined') ¡ ¡ ¡ ¡ ¡ ¡ { ¡ ¡ ¡ ¡ ¡ ¡ ¡ listFilms(localStorage['currentDateFilms']); ¡ ¡ ¡ ¡ ¡ ¡ } ¡ ¡ ¡ ¡ ¡ ¡ if ¡(typeof ¡ localStorage['currentFilmDetail'] ¡!= ¡'undefined') ¡ ¡ ¡ ¡ ¡ ¡ { ¡ ¡ ¡ ¡ ¡ ¡ ¡ showFilmDetail(localStorage['currentFilmDetail'], ¡ localStorage['currentFilmId']); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ } ¡ ¡ ¡ ¡ ¡ ¡ if ¡(typeof ¡ localStorage['currentHomeDetail'] ¡!= ¡'undefined') ¡ ¡ ¡ ¡ ¡ ¡ { ¡ ¡ ¡ ¡ ¡ ¡ ¡ getHomeDetail(localStorage['currentHomeDetail'], ¡false); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ } ¡ ¡ ¡ ¡ ¡ ¡ if(localStorage['current_dvd_detail']!=null) ¡ ¡ ¡ ¡ ¡ ¡ { ¡ ¡ ¡ ¡ ¡ ¡ ¡ loadDVD(localStorage['current_dvd_detail']); ¡ ¡ ¡ ¡ ¡ ¡ } ¡ ¡ ¡ ¡ ¡ ¡ if(localStorage['current_forum_detail']!=null) ¡ ¡ ¡ ¡ ¡ ¡ { ¡ ¡ ¡ ¡ ¡ ¡ ¡ loadForum(localStorage['current_forum_detail']); ¡ ¡ ¡ ¡ ¡ ¡ } ¡ ¡ ¡ ¡ ¡ ¡ if(localStorage['current_event_detail']!=null) ¡ ¡ ¡ ¡ ¡ ¡ { ¡ ¡ ¡ ¡ ¡ ¡ ¡ getEvent(localStorage['current_event_detail'], ¡false); ¡ ¡ ¡ ¡ ¡ ¡ } ¡