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