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 ¡

• verwrite ¡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); ¡ ¡ ¡ ¡ ¡ ¡ } ¡

¡ ¡ ¡ ¡ ¡ loadMySchedule(); ¡ ¡ ¡ ¡ ¡ }; ¡ ¡ ¡ ¡ ¡ reader.readAsText(file); ¡ ¡ ¡ ¡ }, ¡fail) ¡ ¡ ¡ }, ¡ ¡ ¡ function(xhr){ ¡ ¡ ¡ ¡ console.log('ajax ¡failed ¡for ¡festival, ¡retrying...'); ¡ ¡ ¡ ¡ getFestival(); ¡ ¡ ¡ } ¡ ¡ ); ¡ } ¡ ¡ function ¡fail(error) ¡{ ¡ ¡ console.log(error.code); ¡ } ¡ ¡

• 7. Now ¡try ¡compiling ¡and ¡running ¡in ¡the ¡emulator. ¡When ¡you ¡click ¡to ¡festival, ¡

what ¡do ¡you ¡see? ¡What ¡about ¡events? ¡

• 8. Take ¡a ¡look ¡at ¡LogCat ¡and ¡look ¡for ¡any ¡ajax ¡calls ¡by ¡typing ¡ajax ¡in ¡the ¡search ¡
• bar. ¡Why ¡do ¡you ¡think ¡the ¡films ¡page ¡displays ¡a ¡-­‑1 ¡rather ¡than ¡dates ¡like ¡in ¡

the ¡simple ¡version ¡we ¡made ¡earlier? ¡(Hint: ¡take ¡a ¡look ¡at ¡the ¡ajax ¡call ¡for ¡ schedules ¡and ¡festival ¡and ¡take ¡a ¡look ¡at ¡the ¡javascript ¡code ¡for ¡the ¡function ¡

• getFestival. ¡The ¡films ¡page ¡is ¡loaded ¡using ¡the ¡function ¡loadDates) ¡
• 9. To ¡ensure ¡that ¡there ¡are ¡no ¡issues ¡with ¡loading ¡the ¡data, ¡change ¡the ¡order ¡of ¡

the ¡get ¡functions ¡to ¡ensure ¡that ¡the ¡necessary ¡functions ¡are ¡started ¡as ¡soon ¡as ¡

• possible. ¡Within ¡onDeviceReady, ¡replace ¡all ¡6 ¡of ¡the ¡get ¡lines ¡with ¡the ¡

following: ¡ getSchedules(); ¡ getAllFilms(); ¡ getHomeData(); ¡ ¡ ¡ getDVDs(); ¡ getEvents(); ¡ ¡ getFestival(); ¡

• 10. Try ¡rerunning ¡the ¡app ¡and ¡try ¡clicking ¡through ¡the ¡links. ¡What ¡do ¡you ¡see ¡

when ¡you ¡click ¡festival? ¡What ¡about ¡events? ¡

• 11. Now ¡open ¡a ¡terminal ¡window ¡and ¡load ¡up ¡adb ¡shell: ¡

path/to/android/sdk/platform-­‑tools/adb ¡shell ¡

• 12. Now ¡go ¡to ¡/data/data/edu.sjsu.Cinequest/cache ¡and ¡type ¡ls. ¡Do ¡you ¡see ¡

festival.xml? ¡What ¡do ¡you ¡see ¡when ¡you ¡type ¡cat ¡festival.xml? ¡

• 13. Now ¡we ¡will ¡do ¡the ¡same ¡thing ¡for ¡the ¡rest ¡of ¡the ¡ajax ¡calls ¡that ¡do ¡not ¡deal ¡

with ¡specific ¡films ¡or ¡events. ¡Just ¡replace ¡all ¡of ¡the ¡functions ¡with ¡the ¡ functions ¡below: ¡ ¡ function ¡getHomeData(){ ¡ ¡ var ¡fileTransfer ¡= ¡new ¡FileTransfer(); ¡ ¡ var ¡url ¡= ¡proxy ¡+ ¡"type=xml&name=ihome"; ¡

¡ fileTransfer.download( ¡ ¡ ¡ url, ¡ ¡ ¡ "/data/data/edu.sjsu.Cinequest/cache/homeData.xml", ¡ ¡ ¡ function(fileEntry){ ¡ ¡ ¡ ¡ fileEntry.file(function(file) ¡{ ¡ ¡ ¡ ¡ ¡ var ¡reader ¡= ¡new ¡FileReader(); ¡ ¡ ¡ ¡ ¡ reader.onloadend ¡= ¡function(evt) ¡{ ¡ ¡ ¡ ¡ ¡ ¡ homeData ¡= ¡ $(evt.target.result).find('section'); ¡ ¡ ¡ ¡ ¡ ¡ console.log('ajax ¡success ¡for ¡homeData'); ¡ ¡ ¡ ¡ ¡ ¡ loadHomeData(); ¡ ¡ ¡ ¡ ¡ }; ¡ ¡ ¡ ¡ ¡ reader.readAsText(file); ¡ ¡ ¡ ¡ }, ¡fail) ¡ ¡ ¡ }, ¡ ¡ ¡ function(xhr){ ¡ ¡ ¡ ¡ console.log('ajax ¡failed ¡for ¡homeData, ¡retrying...'); ¡ ¡ ¡ ¡ getHomeData(); ¡ ¡ ¡ } ¡ ¡ ); ¡ } ¡ ¡ function ¡getSchedules(){ ¡ ¡ var ¡fileTransfer ¡= ¡new ¡FileTransfer(); ¡ ¡ var ¡url ¡= ¡proxy ¡+ ¡"type=schedules"; ¡ ¡ fileTransfer.download( ¡ ¡ ¡ url, ¡ ¡ ¡ "/data/data/edu.sjsu.Cinequest/cache/schedules.xml", ¡ ¡ ¡ function(fileEntry){ ¡ ¡ ¡ ¡ fileEntry.file(function(file) ¡{ ¡ ¡ ¡ ¡ ¡ var ¡reader ¡= ¡new ¡FileReader(); ¡ ¡ ¡ ¡ ¡ reader.onloadend ¡= ¡function(evt) ¡{ ¡ ¡ ¡ ¡ ¡ ¡ schedules ¡= ¡$(evt.target.result); ¡ ¡ ¡ ¡ ¡ ¡ localStorage['schedules'] ¡= ¡ evt.target.result; ¡ ¡ ¡ ¡ ¡ ¡ console.log('ajax ¡success ¡for ¡schedules'); ¡ ¡ ¡ ¡ ¡ }; ¡ ¡ ¡ ¡ ¡ reader.readAsText(file); ¡ ¡ ¡ ¡ }, ¡fail) ¡ ¡ ¡ }, ¡ ¡ ¡ function(xhr){ ¡ ¡ ¡ ¡ console.log('ajax ¡failed ¡for ¡schedules, ¡retrying...'); ¡ ¡ ¡ ¡ getSchedules(); ¡ ¡ ¡ } ¡ ¡ ); ¡ } ¡

¡ function ¡getAllFilms(){ ¡ ¡ var ¡fileTransfer ¡= ¡new ¡FileTransfer(); ¡ ¡ var ¡url ¡= ¡proxy ¡+ ¡"type=films"; ¡ ¡ fileTransfer.download( ¡ ¡ ¡ url, ¡ ¡ ¡ "/data/data/edu.sjsu.Cinequest/cache/allfilms.xml", ¡ ¡ ¡ function(fileEntry){ ¡ ¡ ¡ ¡ fileEntry.file(function(file) ¡{ ¡ ¡ ¡ ¡ ¡ var ¡reader ¡= ¡new ¡FileReader(); ¡ ¡ ¡ ¡ ¡ reader.onloadend ¡= ¡function(evt) ¡{ ¡ ¡ ¡ ¡ ¡ ¡ localStorage['allFilms'] ¡= ¡evt.target.result; ¡ ¡ ¡ ¡ ¡ ¡ allFilms ¡= ¡$(evt.target.result).find('film'); ¡ ¡ ¡ ¡ ¡ ¡ console.log('ajax ¡success ¡for ¡all ¡films'); ¡ ¡ ¡ ¡ ¡ }; ¡ ¡ ¡ ¡ ¡ reader.readAsText(file); ¡ ¡ ¡ ¡ }, ¡fail) ¡ ¡ ¡ }, ¡ ¡ ¡ function(xhr){ ¡ ¡ ¡ ¡ console.log('ajax ¡failed ¡for ¡all ¡films, ¡retrying...'); ¡ ¡ ¡ ¡ getAllFilms(); ¡ ¡ ¡ } ¡ ¡ ); ¡ } ¡ ¡ function ¡getDVDs(){ ¡ ¡ var ¡fileTransfer ¡= ¡new ¡FileTransfer(); ¡ ¡ var ¡url ¡= ¡proxy ¡+ ¡"type=dvds"; ¡ ¡ fileTransfer.download( ¡ ¡ ¡ url, ¡ ¡ ¡ "/data/data/edu.sjsu.Cinequest/cache/dvds.xml", ¡ ¡ ¡ function(fileEntry){ ¡ ¡ ¡ ¡ fileEntry.file(function(file) ¡{ ¡ ¡ ¡ ¡ ¡ var ¡reader ¡= ¡new ¡FileReader(); ¡ ¡ ¡ ¡ ¡ reader.onloadend ¡= ¡function(evt) ¡{ ¡ ¡ ¡ ¡ ¡ ¡ var ¡dvds ¡= ¡evt.target.result; ¡ ¡ ¡ ¡ ¡ ¡ localStorage['dvds'] ¡= ¡evt.target.result; ¡ ¡ ¡ ¡ ¡ ¡ console.log('ajax ¡success ¡for ¡dvds'); ¡ ¡ ¡ ¡ ¡ ¡ loadDVDs(dvds); ¡ ¡ ¡ ¡ ¡ }; ¡ ¡ ¡ ¡ ¡ reader.readAsText(file); ¡ ¡ ¡ ¡ }, ¡fail) ¡ ¡ ¡ }, ¡ ¡ ¡ function(xhr){ ¡ ¡ ¡ ¡ console.log('ajax ¡failed ¡for ¡DVDs, ¡retrying...'); ¡ ¡ ¡ ¡ ¡ ¡ getDVDs(); ¡

¡ ¡ } ¡ ¡ ); ¡ } ¡ ¡

• 14. ¡Do ¡the ¡same ¡as ¡above ¡with ¡the ¡getEvents ¡function. ¡What ¡is ¡the ¡code? ¡

¡ Check ¡network ¡connection: ¡

• 1. So ¡we ¡have ¡a ¡copy ¡of ¡the ¡festival ¡file ¡downloaded ¡to ¡the ¡device ¡but ¡so ¡what? ¡

We ¡are ¡not ¡using ¡it. ¡Next ¡we ¡will ¡load ¡the ¡festival ¡file ¡if ¡there ¡is ¡no ¡network ¡

• connection. ¡
• 2. First ¡we ¡will ¡use ¡PhoneGap’s ¡Connection ¡API. ¡Add ¡the ¡following ¡function ¡

after ¡the ¡onDeviceReady ¡function. ¡ function ¡checkConnection() ¡{ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ var ¡networkState ¡= ¡navigator.connection.type; ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ var ¡states ¡= ¡{}; ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ states[Connection.UNKNOWN] ¡ ¡= ¡'Unknown ¡connection'; ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ states[Connection.ETHERNET] ¡= ¡'Ethernet ¡connection'; ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ states[Connection.WIFI] ¡ ¡ ¡ ¡ ¡= ¡'WiFi ¡connection'; ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ states[Connection.CELL_2G] ¡ ¡= ¡'Cell ¡2G ¡connection'; ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ states[Connection.CELL_3G] ¡ ¡= ¡'Cell ¡3G ¡connection'; ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ states[Connection.CELL_4G] ¡ ¡= ¡'Cell ¡4G ¡connection'; ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ states[Connection.CELL] ¡ ¡ ¡ ¡ ¡= ¡'Cell ¡generic ¡connection'; ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ states[Connection.NONE] ¡ ¡ ¡ ¡ ¡= ¡'No ¡network ¡connection'; ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ console.log('Connection ¡type: ¡' ¡+ ¡states[networkState]); ¡ ¡ ¡ ¡ ¡} ¡

• 3. Add ¡the ¡following ¡line ¡as ¡the ¡first ¡line ¡of ¡the ¡onDeviceReady ¡function. ¡

checkConnection(); ¡

• 4. Now ¡run ¡the ¡application ¡and ¡check ¡LogCat ¡and ¡look ¡for ¡the ¡connection ¡log. ¡

What ¡kind ¡of ¡connection ¡is ¡returned? ¡

• 5. Now ¡add ¡“var ¡offline;” ¡the ¡list ¡of ¡vars ¡towards ¡the ¡beginning ¡of ¡the ¡html ¡file. ¡
• 6. Add ¡the ¡following ¡in ¡the ¡checkConnection ¡function ¡at ¡the ¡end: ¡

if ¡(networkState ¡== ¡Connection.NONE) ¡{ ¡ ¡

• ffline ¡= ¡1; ¡

} ¡ else ¡{ ¡ ¡

• ffline ¡= ¡0; ¡

} ¡

• 7. Now ¡we ¡have ¡a ¡variable ¡to ¡tell ¡the ¡application ¡if ¡there ¡is ¡a ¡network ¡
• connection. ¡ ¡Next ¡we ¡will ¡utilize ¡this ¡for ¡each ¡of ¡the ¡functions ¡we ¡edited ¡in ¡the ¡

previous ¡section. ¡ ¡ function ¡getHomeData(){ ¡ ¡ if ¡(offline ¡== ¡0) ¡{ ¡ ¡ ¡ var ¡fileTransfer ¡= ¡new ¡FileTransfer(); ¡

¡ ¡ var ¡url ¡= ¡proxy ¡+ ¡"type=xml&name=ihome"; ¡ ¡ ¡ fileTransfer.download( ¡ ¡ ¡ ¡ url, ¡ ¡ ¡ ¡ "/data/data/edu.sjsu.Cinequest/cache/homeData.xml", ¡ ¡ ¡ ¡ function(fileEntry){ ¡ ¡ ¡ ¡ ¡ fileEntry.file(function(file) ¡{ ¡ ¡ ¡ ¡ ¡ ¡ var ¡reader ¡= ¡new ¡FileReader(); ¡ ¡ ¡ ¡ ¡ ¡ reader.onloadend ¡= ¡function(evt) ¡{ ¡ ¡ ¡ ¡ ¡ ¡ ¡ homeData ¡= ¡ $(evt.target.result).find('section'); ¡ ¡ ¡ ¡ ¡ ¡ ¡ console.log('ajax ¡success ¡for ¡ homeData'); ¡ ¡ ¡ ¡ ¡ ¡ ¡ loadHomeData(); ¡ ¡ ¡ ¡ ¡ ¡ }; ¡ ¡ ¡ ¡ ¡ ¡ reader.readAsText(file); ¡ ¡ ¡ ¡ ¡ }, ¡fail) ¡ ¡ ¡ ¡ }, ¡ ¡ ¡ ¡ function(xhr){ ¡ ¡ ¡ ¡ ¡ console.log('ajax ¡failed ¡for ¡homeData, ¡ retrying...'); ¡ ¡ ¡ ¡ ¡ getHomeData(); ¡ ¡ ¡ ¡ } ¡ ¡ ¡ ); ¡ ¡ } ¡ ¡ else ¡{ ¡ ¡ ¡ console.log('loading ¡cached ¡xml'); ¡ ¡ ¡ var ¡fileEntry ¡= ¡new ¡FileEntry(); ¡ ¡ ¡ fileEntry.fullPath ¡= ¡ "/data/data/edu.sjsu.Cinequest/cache/homeData.xml"; ¡ ¡ ¡ fileEntry.file(function(file) ¡{ ¡ ¡ ¡ ¡ var ¡reader ¡= ¡new ¡FileReader(); ¡ ¡ ¡ ¡ reader.onloadend ¡= ¡function(evt) ¡{ ¡ ¡ ¡ ¡ ¡ homeData ¡= ¡$(evt.target.result).find('section'); ¡ ¡ ¡ ¡ ¡ console.log('ajax ¡success ¡for ¡homeData'); ¡ ¡ ¡ ¡ ¡ loadHomeData(); ¡ ¡ ¡ ¡ }; ¡ ¡ ¡ ¡ reader.readAsText(file); ¡ ¡ ¡ }, ¡fail) ¡ ¡ } ¡ } ¡ ¡ function ¡getSchedules(){ ¡ ¡ if ¡(offline ¡== ¡0) ¡{ ¡ ¡ ¡ var ¡fileTransfer ¡= ¡new ¡FileTransfer(); ¡ ¡ ¡ var ¡url ¡= ¡proxy ¡+ ¡"type=schedules"; ¡ ¡ ¡ fileTransfer.download( ¡

¡ ¡ ¡ url, ¡ ¡ ¡ ¡ "/data/data/edu.sjsu.Cinequest/cache/schedules.xml", ¡ ¡ ¡ ¡ function(fileEntry){ ¡ ¡ ¡ ¡ ¡ fileEntry.file(function(file) ¡{ ¡ ¡ ¡ ¡ ¡ ¡ var ¡reader ¡= ¡new ¡FileReader(); ¡ ¡ ¡ ¡ ¡ ¡ reader.onloadend ¡= ¡function(evt) ¡{ ¡ ¡ ¡ ¡ ¡ ¡ ¡ schedules ¡= ¡$(evt.target.result); ¡ ¡ ¡ ¡ ¡ ¡ ¡ localStorage['schedules'] ¡= ¡ evt.target.result; ¡ ¡ ¡ ¡ ¡ ¡ ¡ console.log('ajax ¡success ¡for ¡ schedules'); ¡ ¡ ¡ ¡ ¡ ¡ }; ¡ ¡ ¡ ¡ ¡ ¡ reader.readAsText(file); ¡ ¡ ¡ ¡ ¡ }, ¡fail) ¡ ¡ ¡ ¡ }, ¡ ¡ ¡ ¡ function(xhr){ ¡ ¡ ¡ ¡ ¡ console.log('ajax ¡failed ¡for ¡schedules, ¡ retrying...'); ¡ ¡ ¡ ¡ ¡ getSchedules(); ¡ ¡ ¡ ¡ } ¡ ¡ ¡ ); ¡ ¡ } ¡ ¡ else ¡{ ¡ ¡ ¡ console.log('loading ¡cached ¡xml'); ¡ ¡ ¡ var ¡fileEntry ¡= ¡new ¡FileEntry(); ¡ ¡ ¡ fileEntry.fullPath ¡= ¡ "/data/data/edu.sjsu.Cinequest/cache/schedules.xml"; ¡ ¡ ¡ fileEntry.file(function(file) ¡{ ¡ ¡ ¡ ¡ var ¡reader ¡= ¡new ¡FileReader(); ¡ ¡ ¡ ¡ reader.onloadend ¡= ¡function(evt) ¡{ ¡ ¡ ¡ ¡ ¡ schedules ¡= ¡$(evt.target.result); ¡ ¡ ¡ ¡ ¡ localStorage['schedules'] ¡= ¡evt.target.result; ¡ ¡ ¡ ¡ ¡ console.log('ajax ¡success ¡for ¡schedules'); ¡ ¡ ¡ ¡ }; ¡ ¡ ¡ ¡ reader.readAsText(file); ¡ ¡ ¡ }, ¡fail) ¡ ¡ } ¡ } ¡ ¡ function ¡getAllFilms(){ ¡ ¡ if ¡(offline ¡== ¡0) ¡{ ¡ ¡ ¡ var ¡fileTransfer ¡= ¡new ¡FileTransfer(); ¡ ¡ ¡ var ¡url ¡= ¡proxy ¡+ ¡"type=films"; ¡ ¡ ¡ fileTransfer.download( ¡ ¡ ¡ ¡ url, ¡ ¡ ¡ ¡ "/data/data/edu.sjsu.Cinequest/cache/allfilms.xml", ¡

¡ ¡ ¡ function(fileEntry){ ¡ ¡ ¡ ¡ ¡ fileEntry.file(function(file) ¡{ ¡ ¡ ¡ ¡ ¡ ¡ var ¡reader ¡= ¡new ¡FileReader(); ¡ ¡ ¡ ¡ ¡ ¡ reader.onloadend ¡= ¡function(evt) ¡{ ¡ ¡ ¡ ¡ ¡ ¡ ¡ localStorage['allFilms'] ¡= ¡ evt.target.result; ¡ ¡ ¡ ¡ ¡ ¡ ¡ allFilms ¡= ¡ $(evt.target.result).find('film'); ¡ ¡ ¡ ¡ ¡ ¡ ¡ console.log('ajax ¡success ¡for ¡all ¡ films'); ¡ ¡ ¡ ¡ ¡ ¡ }; ¡ ¡ ¡ ¡ ¡ ¡ reader.readAsText(file); ¡ ¡ ¡ ¡ ¡ }, ¡fail) ¡ ¡ ¡ ¡ }, ¡ ¡ ¡ ¡ function(xhr){ ¡ ¡ ¡ ¡ ¡ console.log('ajax ¡failed ¡for ¡all ¡films, ¡retrying...'); ¡ ¡ ¡ ¡ ¡ getAllFilms(); ¡ ¡ ¡ ¡ } ¡ ¡ ¡ ); ¡ ¡ } ¡ ¡ else ¡{ ¡ ¡ ¡ console.log('loading ¡cached ¡xml'); ¡ ¡ ¡ var ¡fileEntry ¡= ¡new ¡FileEntry(); ¡ ¡ ¡ fileEntry.fullPath ¡= ¡ "/data/data/edu.sjsu.Cinequest/cache/allfilms.xml"; ¡ ¡ ¡ fileEntry.file(function(file) ¡{ ¡ ¡ ¡ ¡ var ¡reader ¡= ¡new ¡FileReader(); ¡ ¡ ¡ ¡ reader.onloadend ¡= ¡function(evt) ¡{ ¡ ¡ ¡ ¡ ¡ localStorage['allFilms'] ¡= ¡evt.target.result; ¡ ¡ ¡ ¡ ¡ allFilms ¡= ¡$(evt.target.result).find('film'); ¡ ¡ ¡ ¡ ¡ console.log('ajax ¡success ¡for ¡all ¡films'); ¡ ¡ ¡ ¡ }; ¡ ¡ ¡ ¡ reader.readAsText(file); ¡ ¡ ¡ }, ¡fail) ¡ ¡ } ¡ } ¡ ¡ function ¡getDVDs(){ ¡ ¡ if ¡(offline ¡== ¡0) ¡{ ¡ ¡ ¡ var ¡fileTransfer ¡= ¡new ¡FileTransfer(); ¡ ¡ ¡ var ¡url ¡= ¡proxy ¡+ ¡"type=dvds"; ¡ ¡ ¡ fileTransfer.download( ¡ ¡ ¡ ¡ url, ¡ ¡ ¡ ¡ "/data/data/edu.sjsu.Cinequest/cache/dvds.xml", ¡ ¡ ¡ ¡ function(fileEntry){ ¡ ¡ ¡ ¡ ¡ fileEntry.file(function(file) ¡{ ¡

¡ ¡ ¡ ¡ ¡ var ¡reader ¡= ¡new ¡FileReader(); ¡ ¡ ¡ ¡ ¡ ¡ reader.onloadend ¡= ¡function(evt) ¡{ ¡ ¡ ¡ ¡ ¡ ¡ ¡ var ¡dvds ¡= ¡evt.target.result; ¡ ¡ ¡ ¡ ¡ ¡ ¡ localStorage['dvds'] ¡= ¡ evt.target.result; ¡ ¡ ¡ ¡ ¡ ¡ ¡ console.log('ajax ¡success ¡for ¡ dvds'); ¡ ¡ ¡ ¡ ¡ ¡ ¡ loadDVDs(dvds); ¡ ¡ ¡ ¡ ¡ ¡ }; ¡ ¡ ¡ ¡ ¡ ¡ reader.readAsText(file); ¡ ¡ ¡ ¡ ¡ }, ¡fail) ¡ ¡ ¡ ¡ }, ¡ ¡ ¡ ¡ function(xhr){ ¡ ¡ ¡ ¡ ¡ console.log('ajax ¡failed ¡for ¡DVDs, ¡retrying...'); ¡ ¡ ¡ ¡ ¡ ¡ ¡ getDVDs(); ¡ ¡ ¡ ¡ } ¡ ¡ ¡ ); ¡ ¡ } ¡ ¡ else ¡{ ¡ ¡ ¡ console.log('loading ¡cached ¡xml'); ¡ ¡ ¡ var ¡fileEntry ¡= ¡new ¡FileEntry(); ¡ ¡ ¡ fileEntry.fullPath ¡= ¡ "/data/data/edu.sjsu.Cinequest/cache/dvds.xml"; ¡ ¡ ¡ fileEntry.file(function(file) ¡{ ¡ ¡ ¡ ¡ var ¡reader ¡= ¡new ¡FileReader(); ¡ ¡ ¡ ¡ reader.onloadend ¡= ¡function(evt) ¡{ ¡ ¡ ¡ ¡ ¡ var ¡dvds ¡= ¡evt.target.result; ¡ ¡ ¡ ¡ ¡ localStorage['dvds'] ¡= ¡evt.target.result; ¡ ¡ ¡ ¡ ¡ console.log('ajax ¡success ¡for ¡dvds'); ¡ ¡ ¡ ¡ ¡ loadDVDs(dvds); ¡ ¡ ¡ ¡ }; ¡ ¡ ¡ ¡ reader.readAsText(file); ¡ ¡ ¡ }, ¡fail) ¡ ¡ } ¡ } ¡ ¡

• 8. Do ¡the ¡same ¡thing ¡for ¡the ¡getEvents ¡function. ¡What ¡is ¡the ¡code? ¡
• 9. Build ¡and ¡run ¡the ¡app ¡again ¡to ¡download ¡all ¡the ¡files. ¡It ¡should ¡run ¡normally. ¡

Now ¡close ¡out ¡of ¡the ¡app ¡and ¡force ¡stop ¡it ¡by ¡holding, ¡dragging ¡and ¡dropping ¡ the ¡Cinequest ¡app ¡to ¡“App ¡Info” ¡in ¡the ¡top ¡right. ¡Now ¡force ¡stop ¡the ¡app. ¡Go ¡to ¡ settings ¡now ¡and ¡select ¡“Airplane ¡Mode” ¡under ¡“Wireless ¡and ¡Networks”. ¡ Now ¡what ¡happens ¡when ¡you ¡launch ¡the ¡app ¡again? ¡

• 10. You ¡now ¡have ¡offline ¡mode ¡for ¡the ¡app. ¡

¡ ¡

Answers: ¡ Creating ¡a ¡basic ¡app ¡with ¡command-­‑line: ¡

• 5. ¡Nothing. ¡None ¡of ¡the ¡pages ¡are ¡populated ¡with ¡data. ¡
• 6. ¡proxy ¡= ¡"cinequestProxy.php?"; ¡
• 7. ¡The ¡proxy ¡is ¡needed ¡because ¡of ¡the ¡same ¡origin ¡policy. ¡
• 9. ¡You ¡should ¡see ¡the ¡Cinequest ¡image ¡and ¡when ¡you ¡click ¡through ¡the ¡different ¡

links, ¡you ¡should ¡see ¡the ¡pages ¡populated. ¡ ¡ Store ¡the ¡xml ¡file ¡on ¡the ¡device: ¡

• 7. ¡None ¡of ¡the ¡dates ¡show ¡up ¡and ¡there ¡is ¡a ¡negative ¡one ¡on ¡the ¡festival ¡page. ¡The ¡

events ¡page ¡however ¡is ¡populated. ¡

• 8. ¡The ¡reason ¡for ¡this ¡is ¡because ¡getFestival ¡is ¡called ¡and ¡completed ¡before ¡
• getSchedules. ¡getFestival ¡calls ¡loadDates, ¡which ¡needs ¡getSchedules ¡to ¡have ¡
• completed. ¡
• 10. ¡The ¡pages ¡all ¡load ¡as ¡specified. ¡
• 12. ¡You ¡should ¡see ¡xml ¡content ¡print ¡out. ¡
• 14. ¡ ¡

function ¡getEvents(){ ¡ ¡ var ¡fileTransfer ¡= ¡new ¡FileTransfer(); ¡ ¡ var ¡url ¡= ¡proxy ¡+ ¡"type=xml&name=events"; ¡ ¡ fileTransfer.download( ¡ ¡ ¡ url, ¡ ¡ ¡ "/data/data/edu.sjsu.Cinequest/cache/events.xml", ¡ ¡ ¡ function(fileEntry){ ¡ ¡ ¡ ¡ fileEntry.file(function(file) ¡{ ¡ ¡ ¡ ¡ ¡ var ¡reader ¡= ¡new ¡FileReader(); ¡ ¡ ¡ ¡ ¡ reader.onloadend ¡= ¡function(evt) ¡{ ¡ ¡ ¡ ¡ ¡ ¡ localStorage['events'] ¡= ¡evt.target.result; ¡ ¡ ¡ ¡ ¡ ¡ special_events ¡= ¡ $(evt.target.result).find('special_events').find('schedule'); ¡ ¡ ¡ ¡ ¡ ¡ forums ¡= ¡ $(evt.target.result).find('forums').find('schedule'); ¡ ¡ ¡ ¡ ¡ ¡ console.log('ajax ¡success ¡for ¡events'); ¡ ¡ ¡ ¡ ¡ ¡ loadEvents(); ¡ ¡ ¡ ¡ ¡ ¡ loadForums(); ¡ ¡ ¡ ¡ ¡ }; ¡ ¡ ¡ ¡ ¡ reader.readAsText(file); ¡ ¡ ¡ ¡ }, ¡fail) ¡ ¡ ¡ }, ¡ ¡ ¡ function(xhr){ ¡ ¡ ¡ ¡ console.log('ajax ¡failed ¡for ¡events, ¡retrying...'); ¡ ¡ ¡ ¡ getEvents(); ¡ ¡ ¡ } ¡ ¡ ); ¡ } ¡ ¡

Check ¡network ¡connection: ¡

• 4. ¡Cell ¡3G ¡connection ¡
• 9. ¡ ¡

function ¡getEvents(){ ¡ ¡ if ¡(offline ¡== ¡0) ¡{ ¡ ¡ ¡ var ¡fileTransfer ¡= ¡new ¡FileTransfer(); ¡ ¡ ¡ var ¡url ¡= ¡proxy ¡+ ¡"type=xml&name=events"; ¡ ¡ ¡ fileTransfer.download( ¡ ¡ ¡ ¡ url, ¡ ¡ ¡ ¡ "/data/data/edu.sjsu.Cinequest/cache/events.xml", ¡ ¡ ¡ ¡ function(fileEntry){ ¡ ¡ ¡ ¡ ¡ fileEntry.file(function(file) ¡{ ¡ ¡ ¡ ¡ ¡ ¡ var ¡reader ¡= ¡new ¡FileReader(); ¡ ¡ ¡ ¡ ¡ ¡ reader.onloadend ¡= ¡function(evt) ¡{ ¡ ¡ ¡ ¡ ¡ ¡ ¡ localStorage['events'] ¡= ¡ evt.target.result; ¡ ¡ ¡ ¡ ¡ ¡ ¡ special_events ¡= ¡ $(evt.target.result).find('special_events').find('schedule'); ¡ ¡ ¡ ¡ ¡ ¡ ¡ forums ¡= ¡ $(evt.target.result).find('forums').find('schedule'); ¡ ¡ ¡ ¡ ¡ ¡ ¡ console.log('ajax ¡success ¡for ¡ events'); ¡ ¡ ¡ ¡ ¡ ¡ ¡ loadEvents(); ¡ ¡ ¡ ¡ ¡ ¡ ¡ loadForums(); ¡ ¡ ¡ ¡ ¡ ¡ }; ¡ ¡ ¡ ¡ ¡ ¡ reader.readAsText(file); ¡ ¡ ¡ ¡ ¡ }, ¡fail) ¡ ¡ ¡ ¡ }, ¡ ¡ ¡ ¡ function(xhr){ ¡ ¡ ¡ ¡ ¡ console.log('ajax ¡failed ¡for ¡events, ¡retrying...'); ¡ ¡ ¡ ¡ ¡ getEvents(); ¡ ¡ ¡ ¡ } ¡ ¡ ¡ ); ¡ ¡ } ¡ ¡ else ¡{ ¡ ¡ ¡ console.log('loading ¡cached ¡xml'); ¡ ¡ ¡ var ¡fileEntry ¡= ¡new ¡FileEntry(); ¡ ¡ ¡ fileEntry.fullPath ¡= ¡ "/data/data/edu.sjsu.Cinequest/cache/events.xml"; ¡ ¡ ¡ fileEntry.file(function(file) ¡{ ¡ ¡ ¡ ¡ var ¡reader ¡= ¡new ¡FileReader(); ¡ ¡ ¡ ¡ reader.onloadend ¡= ¡function(evt) ¡{ ¡ ¡ ¡ ¡ ¡ localStorage['events'] ¡= ¡evt.target.result; ¡ ¡ ¡ ¡ ¡ special_events ¡= ¡ $(evt.target.result).find('special_events').find('schedule'); ¡

¡ ¡ ¡ ¡ forums ¡= ¡ $(evt.target.result).find('forums').find('schedule'); ¡ ¡ ¡ ¡ ¡ console.log('ajax ¡success ¡for ¡events'); ¡ ¡ ¡ ¡ ¡ loadEvents(); ¡ ¡ ¡ ¡ ¡ loadForums(); ¡ ¡ ¡ ¡ }; ¡ ¡ ¡ ¡ reader.readAsText(file); ¡ ¡ ¡ }, ¡fail) ¡ ¡ } ¡ } ¡ ¡ ¡ Bibliography: ¡ “PhoneGap ¡API ¡Documentation”. ¡http://docs.phonegap.com/en/2.6.0/. ¡