PhoneGap,Processing
Phonegap4.Oct2016INF5261
Mobileappdevelopment
• Nativecode
• Android• Java
• iPhone• Objective-C• Swift
• HTML&JavaScript
• Browserbased• Normalwebpage
• Hybrid(HTML&JavaScript)
+(Nativecode)
• Nativecodewrappedaroundawebview• HTML&JavaScriptforapplogicandUI• Cancompiletoapp
Hybrid,“webview”basedappdevelopment
• Apps(can)usealotofreadymadecodeintheformofcomponents:• Buttons,lists,mediaplayers,webview
• Webview isabrowserthatcanbeembeddedinsideanapptoshowwebcontent.• HandlesHTMLandJavaScript,providesonlyarenderedview,nomenus.• CangiveJavaScriptaccesstoAPIsthatonlynativecodenormallycanuse,ifyouwriteyourownJavaScriptinterface.
• Butsomenativecodemustbewritten
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
PhoneGap
• Desktopapp• Generateproject• Serverformobileapp
• Mobileapp• Hostingmobileappfortestingduringdevelopment• Connectingtodesktopservertodownloadapp
• Desktopandmobilemustbeonsamelocalnetwork
Download&install
• Desktop• http://phonegap.com/products/• ScrolldownanddownloaddesktopappforMacogWindows
• Mobile• GotoAppStoreorGooglePlay• InstallPhoneGap DeveloperbyAdobe
Createyournewapp
• OpenthePhoneGap Desktopapp• createanewproject.
• Selectafolder• Writeaprojectname• Clickgreenbutton
• http://phonegap.com/getstarted/
Previewyourfirstapp
• Starttheserver• Onthemobile:• InputtheIPaddressandportnumbershowninthegreenfieldonthedesktopserver.
Previewyourfirstapp2
• Whatitshouldlooklike
UseChromeorSafariforpreview
• SafariResponsive DesignMode• Chrome DevTools'DeviceMode
• TheywillnotemulateallAPIs• ButgoodforUIandlogic
Whereisthecode?
• Intheprojectfolder
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
Addingsometagsandcode
• Text• Button• CSS• Javascript• jQuery• Angular• ….
• Plugin• Camera• Barcode??
Processing
• Developedforcreativecoding• Lotsoflibraries• CancompiletoAndroid
• SimpleJavasyntax• Runson:
• Mac• Windows• Linux• ARM(RaspberryPi)• Android
ProcessingVisualizationDesignexample:https://vimeo.com/173760057
Processing
• Processing.org• processing.org/download/
• RaspberryPi
Processing:installation
• Download• Unzip• Placefolderwhereyoulike• Makeshortcuttodesktop
Processing:editorandandroidmode
Processing:firstcode
• Trythiscode• Setupanddraw
Processing:• Morecode• Whatisit?• Bouncingball
• Canyouimprovethecode?• Tryitonyourphone• fullScreen()instedofsize()forAndroid
Android:void settings() {fullScreen();}
Processing:serialcommunication
• CanreceiveandhandledatafromArduino• Importseriallibrary
Processing:serial
• Addcodetoreceiveandhandledata
Processing:receivedatafromArduino
Arduino:serialsensor
• ReadinganalogvaluefrompinA1• Sendingonserialport• Printout
Arduino:breadboard
• Connectionsonthebreadboard