PhoneGap og Processing høst 2016 · • Adobe owns PhoneGap. • Cordova is the open source...
Transcript of PhoneGap og Processing høst 2016 · • Adobe owns PhoneGap. • Cordova is the open source...
![Page 1: PhoneGap og Processing høst 2016 · • Adobe owns PhoneGap. • Cordova is the open source foundation for PhoneGap and other similar tools ... // Now safe to use the Cordova API}](https://reader036.fdocuments.net/reader036/viewer/2022063007/5fba7f368bf6a259206ea85c/html5/thumbnails/1.jpg)
PhoneGap,Processing
![Page 2: PhoneGap og Processing høst 2016 · • Adobe owns PhoneGap. • Cordova is the open source foundation for PhoneGap and other similar tools ... // Now safe to use the Cordova API}](https://reader036.fdocuments.net/reader036/viewer/2022063007/5fba7f368bf6a259206ea85c/html5/thumbnails/2.jpg)
Phonegap4.Oct2016INF5261
![Page 3: PhoneGap og Processing høst 2016 · • Adobe owns PhoneGap. • Cordova is the open source foundation for PhoneGap and other similar tools ... // Now safe to use the Cordova API}](https://reader036.fdocuments.net/reader036/viewer/2022063007/5fba7f368bf6a259206ea85c/html5/thumbnails/3.jpg)
Mobileappdevelopment
• Nativecode
• Android• Java
• iPhone• Objective-C• Swift
• HTML&JavaScript
• Browserbased• Normalwebpage
• Hybrid(HTML&JavaScript)
+(Nativecode)
• Nativecodewrappedaroundawebview• HTML&JavaScriptforapplogicandUI• Cancompiletoapp
![Page 4: PhoneGap og Processing høst 2016 · • Adobe owns PhoneGap. • Cordova is the open source foundation for PhoneGap and other similar tools ... // Now safe to use the Cordova API}](https://reader036.fdocuments.net/reader036/viewer/2022063007/5fba7f368bf6a259206ea85c/html5/thumbnails/4.jpg)
Hybrid,“webview”basedappdevelopment
• Apps(can)usealotofreadymadecodeintheformofcomponents:• Buttons,lists,mediaplayers,webview
• Webview isabrowserthatcanbeembeddedinsideanapptoshowwebcontent.• HandlesHTMLandJavaScript,providesonlyarenderedview,nomenus.• CangiveJavaScriptaccesstoAPIsthatonlynativecodenormallycanuse,ifyouwriteyourownJavaScriptinterface.
• Butsomenativecodemustbewritten
![Page 5: PhoneGap og Processing høst 2016 · • Adobe owns PhoneGap. • Cordova is the open source foundation for PhoneGap and other similar tools ... // Now safe to use the Cordova API}](https://reader036.fdocuments.net/reader036/viewer/2022063007/5fba7f368bf6a259206ea85c/html5/thumbnails/5.jpg)
Hybrid,thegoodnews
• Youdon’thavetodothenativepart
• UsePhoneGap/Cordovaandconcentrateonthewebcode• ExposesalotofnativeAPIstoJavaScript• 1500+pluginstoprovideextrafunctionality
• RFID/NFC,Barcode,Camera,Bluetooth,payment,maps
• http://phonegap.com/• https://cordova.apache.org/• AdobeownsPhoneGap.• CordovaistheopensourcefoundationforPhoneGapandothersimilartools
• PhoneGap/Cordovaiswellestablished• PhoneGap givesapproximately8120000hitsonGoogle
![Page 6: PhoneGap og Processing høst 2016 · • Adobe owns PhoneGap. • Cordova is the open source foundation for PhoneGap and other similar tools ... // Now safe to use the Cordova API}](https://reader036.fdocuments.net/reader036/viewer/2022063007/5fba7f368bf6a259206ea85c/html5/thumbnails/6.jpg)
PhoneGap
• Desktopapp• Generateproject• Serverformobileapp
• Mobileapp• Hostingmobileappfortestingduringdevelopment• Connectingtodesktopservertodownloadapp
• Desktopandmobilemustbeonsamelocalnetwork
![Page 7: PhoneGap og Processing høst 2016 · • Adobe owns PhoneGap. • Cordova is the open source foundation for PhoneGap and other similar tools ... // Now safe to use the Cordova API}](https://reader036.fdocuments.net/reader036/viewer/2022063007/5fba7f368bf6a259206ea85c/html5/thumbnails/7.jpg)
Download&install
• Desktop• http://phonegap.com/products/• ScrolldownanddownloaddesktopappforMacogWindows
• Mobile• GotoAppStoreorGooglePlay• InstallPhoneGap DeveloperbyAdobe
![Page 8: PhoneGap og Processing høst 2016 · • Adobe owns PhoneGap. • Cordova is the open source foundation for PhoneGap and other similar tools ... // Now safe to use the Cordova API}](https://reader036.fdocuments.net/reader036/viewer/2022063007/5fba7f368bf6a259206ea85c/html5/thumbnails/8.jpg)
Createyournewapp
• OpenthePhoneGap Desktopapp• createanewproject.
• Selectafolder• Writeaprojectname• Clickgreenbutton
• http://phonegap.com/getstarted/
![Page 9: PhoneGap og Processing høst 2016 · • Adobe owns PhoneGap. • Cordova is the open source foundation for PhoneGap and other similar tools ... // Now safe to use the Cordova API}](https://reader036.fdocuments.net/reader036/viewer/2022063007/5fba7f368bf6a259206ea85c/html5/thumbnails/9.jpg)
Previewyourfirstapp
• Starttheserver• Onthemobile:• InputtheIPaddressandportnumbershowninthegreenfieldonthedesktopserver.
![Page 10: PhoneGap og Processing høst 2016 · • Adobe owns PhoneGap. • Cordova is the open source foundation for PhoneGap and other similar tools ... // Now safe to use the Cordova API}](https://reader036.fdocuments.net/reader036/viewer/2022063007/5fba7f368bf6a259206ea85c/html5/thumbnails/10.jpg)
Previewyourfirstapp2
• Whatitshouldlooklike
![Page 11: PhoneGap og Processing høst 2016 · • Adobe owns PhoneGap. • Cordova is the open source foundation for PhoneGap and other similar tools ... // Now safe to use the Cordova API}](https://reader036.fdocuments.net/reader036/viewer/2022063007/5fba7f368bf6a259206ea85c/html5/thumbnails/11.jpg)
UseChromeorSafariforpreview
• SafariResponsive DesignMode• Chrome DevTools'DeviceMode
• TheywillnotemulateallAPIs• ButgoodforUIandlogic
![Page 12: PhoneGap og Processing høst 2016 · • Adobe owns PhoneGap. • Cordova is the open source foundation for PhoneGap and other similar tools ... // Now safe to use the Cordova API}](https://reader036.fdocuments.net/reader036/viewer/2022063007/5fba7f368bf6a259206ea85c/html5/thumbnails/12.jpg)
Whereisthecode?
• Intheprojectfolder
![Page 13: PhoneGap og Processing høst 2016 · • Adobe owns PhoneGap. • Cordova is the open source foundation for PhoneGap and other similar tools ... // Now safe to use the Cordova API}](https://reader036.fdocuments.net/reader036/viewer/2022063007/5fba7f368bf6a259206ea85c/html5/thumbnails/13.jpg)
Som codetostarttheapp
function onLoad(){
document.addEventListener("deviceready",onDeviceReady,false);
}
function onDeviceReady(){
//Now safetouse the CordovaAPI
}
• Deviceready event fireswhen cordova/phongap isloaded• Is“safe”tocallcordova api fromjavascript
![Page 14: PhoneGap og Processing høst 2016 · • Adobe owns PhoneGap. • Cordova is the open source foundation for PhoneGap and other similar tools ... // Now safe to use the Cordova API}](https://reader036.fdocuments.net/reader036/viewer/2022063007/5fba7f368bf6a259206ea85c/html5/thumbnails/14.jpg)
Addingsometagsandcode
• Text• Button• CSS• Javascript• jQuery• Angular• ….
• Plugin• Camera• Barcode??
![Page 15: PhoneGap og Processing høst 2016 · • Adobe owns PhoneGap. • Cordova is the open source foundation for PhoneGap and other similar tools ... // Now safe to use the Cordova API}](https://reader036.fdocuments.net/reader036/viewer/2022063007/5fba7f368bf6a259206ea85c/html5/thumbnails/15.jpg)
Processing
• Developedforcreativecoding• Lotsoflibraries• CancompiletoAndroid
• SimpleJavasyntax• Runson:
• Mac• Windows• Linux• ARM(RaspberryPi)• Android
ProcessingVisualizationDesignexample:https://vimeo.com/173760057
![Page 16: PhoneGap og Processing høst 2016 · • Adobe owns PhoneGap. • Cordova is the open source foundation for PhoneGap and other similar tools ... // Now safe to use the Cordova API}](https://reader036.fdocuments.net/reader036/viewer/2022063007/5fba7f368bf6a259206ea85c/html5/thumbnails/16.jpg)
Processing
• Processing.org• processing.org/download/
• RaspberryPi
![Page 17: PhoneGap og Processing høst 2016 · • Adobe owns PhoneGap. • Cordova is the open source foundation for PhoneGap and other similar tools ... // Now safe to use the Cordova API}](https://reader036.fdocuments.net/reader036/viewer/2022063007/5fba7f368bf6a259206ea85c/html5/thumbnails/17.jpg)
Processing:installation
• Download• Unzip• Placefolderwhereyoulike• Makeshortcuttodesktop
![Page 18: PhoneGap og Processing høst 2016 · • Adobe owns PhoneGap. • Cordova is the open source foundation for PhoneGap and other similar tools ... // Now safe to use the Cordova API}](https://reader036.fdocuments.net/reader036/viewer/2022063007/5fba7f368bf6a259206ea85c/html5/thumbnails/18.jpg)
Processing:editorandandroidmode
![Page 19: PhoneGap og Processing høst 2016 · • Adobe owns PhoneGap. • Cordova is the open source foundation for PhoneGap and other similar tools ... // Now safe to use the Cordova API}](https://reader036.fdocuments.net/reader036/viewer/2022063007/5fba7f368bf6a259206ea85c/html5/thumbnails/19.jpg)
Processing:firstcode
• Trythiscode• Setupanddraw
![Page 20: PhoneGap og Processing høst 2016 · • Adobe owns PhoneGap. • Cordova is the open source foundation for PhoneGap and other similar tools ... // Now safe to use the Cordova API}](https://reader036.fdocuments.net/reader036/viewer/2022063007/5fba7f368bf6a259206ea85c/html5/thumbnails/20.jpg)
Processing:• Morecode• Whatisit?• Bouncingball
• Canyouimprovethecode?• Tryitonyourphone• fullScreen()instedofsize()forAndroid
Android:void settings() {fullScreen();}
![Page 21: PhoneGap og Processing høst 2016 · • Adobe owns PhoneGap. • Cordova is the open source foundation for PhoneGap and other similar tools ... // Now safe to use the Cordova API}](https://reader036.fdocuments.net/reader036/viewer/2022063007/5fba7f368bf6a259206ea85c/html5/thumbnails/21.jpg)
Processing:serialcommunication
• CanreceiveandhandledatafromArduino• Importseriallibrary
![Page 22: PhoneGap og Processing høst 2016 · • Adobe owns PhoneGap. • Cordova is the open source foundation for PhoneGap and other similar tools ... // Now safe to use the Cordova API}](https://reader036.fdocuments.net/reader036/viewer/2022063007/5fba7f368bf6a259206ea85c/html5/thumbnails/22.jpg)
Processing:serial
• Addcodetoreceiveandhandledata
![Page 23: PhoneGap og Processing høst 2016 · • Adobe owns PhoneGap. • Cordova is the open source foundation for PhoneGap and other similar tools ... // Now safe to use the Cordova API}](https://reader036.fdocuments.net/reader036/viewer/2022063007/5fba7f368bf6a259206ea85c/html5/thumbnails/23.jpg)
Processing:receivedatafromArduino
![Page 24: PhoneGap og Processing høst 2016 · • Adobe owns PhoneGap. • Cordova is the open source foundation for PhoneGap and other similar tools ... // Now safe to use the Cordova API}](https://reader036.fdocuments.net/reader036/viewer/2022063007/5fba7f368bf6a259206ea85c/html5/thumbnails/24.jpg)
Arduino:serialsensor
• ReadinganalogvaluefrompinA1• Sendingonserialport• Printout
![Page 25: PhoneGap og Processing høst 2016 · • Adobe owns PhoneGap. • Cordova is the open source foundation for PhoneGap and other similar tools ... // Now safe to use the Cordova API}](https://reader036.fdocuments.net/reader036/viewer/2022063007/5fba7f368bf6a259206ea85c/html5/thumbnails/25.jpg)
Arduino:breadboard
• Connectionsonthebreadboard