Embed Size (px)
DESCRIPTION
Lecture
Citation preview
UsingCordova&ionic
byAdamKlein
Askquestionsallthetime
PerformancewasbadFrameworkswerehardtouseandbuggyNocommonlyusedJavascriptframeworkforSinglePageApps
Inotherwords:notechnologicalreadiness
MobilebrowsersarebetterFrameworksarebetterWe'vegotAngularJS&ionic
AdamKleinCo-Founderof
Thirstyfortechnology@500TechIL
Differenttechnologies
HTML5AppsHTML5embeddedinawebview
NormalizedAPIfornativefeatures
ApacheCordovaisaplatformforbuildingnativemobileapplicationsusingHTML,CSSandJavaScript
DOWNLOADCordovaversion3.5.0
AboutApacheCordova™
AboutApacheCordova™
ApacheCordovaisasetofdeviceAPIsthatallowamobileappdevelopertoaccessnativedevicefunctionsuch
asthecameraoraccelerometerfromJavaScript.CombinedwithaUIframeworksuchasjQueryMobileorDojo
MobileorSenchaTouch,thisallowsasmartphoneapptobedevelopedwithjustHTML,CSS,andJavaScript.
WhenusingtheCordovaAPIs,anappcanbebuiltwithoutanynativecode(Java,Objective-C,etc)fromtheapp
developer.Instead,webtechnologiesareused,andtheyarehostedintheappitselflocally(generallynotona
remotehttpserver).
AndbecausetheseJavaScriptAPIsareconsistentacrossmultipledeviceplatformsandbuiltonwebstandards,
theappshouldbeportabletootherdeviceplatformswithminimaltonochanges.
AppsusingCordovaarestillpackagedasappsusingtheplatformSDKs,andcanbemadeavailablefor
installationfromeachdevice'sappstore.
CordovaprovidesasetofuniformJavaScriptlibrariesthatcanbeinvoked,withdevice-specificnativebacking
codeforthoseJavaScriptlibraries.Cordovaisavailableforthefollowingplatforms:iOS,Android,Blackberry,
WindowsPhone,PalmWebOS,Bada,andSymbian.
IfyouwanttouseCordovainyourmobileapplication,takealookatourdocumentation.ItincludesGetting
Startedguides,theJavaScriptAPIsreferenceandexamples,instructionsonUpgradingfrompreviousversions
ofCordova,howtowriteyourownCordovaplugin,andmore.Theselectorinthetop-rightcornerofthe
documentationwillletyoupickdifferentCordovaversionsandlanguagetranslations.Andthereisaregistryof
third-partypluginsthatcanbeusedinyourmobileapplication.
third-partypluginsthatcanbeusedinyourmobileapplication.
ApacheCordovagraduatedinOctober2012asatoplevelprojectwithintheApacheSoftwareFoundation(ASF).
ThroughtheASF,futureCordovadevelopmentwillensureopenstewardshipoftheproject.Itwillalwaysremain
freeandopensourceundertheApacheLicense,Version2.0.
SomeadditionalinformationmaybefoundonourApacheprojectpage.
News Subscribe
13Aug2014»ToolsRelease:August13,2014Anupdatedversionofcordovaandcordova-libareavailablestartingtoday.
Toupdateyourtools:
npminstall-gcordovaThesecontainonlyoneminorfunctionchange,whichisrelatedtotherecentreleaseofCordovaAndroid3.5.1.
Beforetoday’supdate,whenaddingtheAndroidplatformtoaproject,bydefaultitwoulduseversion3.5.0of
CordovaAndroid.Inordertogetthelatest3.5.1ofCordovaAndroid,youwouldneedtomanuallyspecifythe
3.5.1versionnumberontheplatformaddcommand.Today’supdatechangesthedefaultversionofCordova
AndroidusedwhenaddingtheAndroidplatformtoaproject,sothatyounolongerneedtomanuallyspecifythe
3.5.1versionnumbertogetthe3.5.1version.You’llnowget3.5.1bydefault.
ReadMore
11Aug2014»PluginsRelease:August11,2014Thefollowingpluginswereupdatedtoday:
cordova-plugin-battery-status:0.2.10
cordova-plugin-camera:0.3.1
cordova-plugin-console:0.2.10
cordova-plugin-contacts:0.2.12
cordova-plugin-device:0.2.11
cordova-plugin-device-motion:0.2.9
cordova-plugin-device-orientation:0.3.8
cordova-plugin-dialogs:0.2.9
cordova-plugin-file:1.3.0
cordova-plugin-file-transfer:0.4.5
cordova-plugin-geolocation:0.3.9
cordova-plugin-globalization:0.3.0
cordova-plugin-inappbrowser:0.5.1
cordova-plugin-media:0.2.12
cordova-plugin-media-capture:0.3.2
cordova-plugin-network-information:0.2.11
cordova-plugin-splashscreen:0.3.2
cordova-plugin-statusbar:0.1.7
cordova-plugin-vibration:0.3.10
cordova-plugin-vibration:0.3.10
Notablechangesinclude:
Mostofthepluginsdocsarenowtranslatedintootherlanguages.
FirefoxOShasupdatedmanyoftheirproxiesforplugins
FirefoxOSsupportaddedtodevicemotionplugin
ManyupdatestofilepluginforBlackBerry10,FirefoxOSandWindows
BlackBerry10&FirefoxOSsupportaddedtoglobalizationplugin
Thepluginshavebeenupdatedonourregistryatplugins.cordova.io.
Youcanupdateanypluginbyremovingit,andthenreaddingit.E.g.Toupdateyourfileplugin:
cordovapluginrmorg.apache.cordova.filecordovapluginaddorg.apache.cordova.fileOtherchangesinclude:
ReadMore
06Aug2014»ApacheCordovaAndroid3.5.1UpdateOnMonday,wereleasedCordovaAndroid3.5.1,toaddressacoupleofsecurityissues.Afterwards,talkingwith
theoriginalresearchers,werealizedthatthetextofthesecurityannouncementthatwentoutwasn’tquiteright,
sowe’veamendedit.
Youcanreadtheamendedblogposthere.
TheissueinCVE-2014-3502isthatCordovaapplicationswould,bydefault,passanyURLsthattheycouldn’t
loadtotheAndroidintentsystemforhandling.ThisletsdevelopersconstructURLsthatopenemailapplications,
maps,orsendSMSmessages,orevenopenwebpagesinthesystembrowser,butitalsoallowedmalicious
URLsthatcouldpotentiallyopenotherapplicationsonthedevice.Thismeantthatifsomeonecouldexecutetheir
ownJavaScriptinyourapplication,thattheycoulduseotherapplicationsonthedeviceto“phonehome”withthe
user’sdata.ThisiswhywearerecommendingthatallAndroiddevelopersupgradetoCordova3.5.1.
ReadMore
Seeallentries
WanttoContribute?
Contributorsarewelcome!Andweneedyourcontributionstokeeptheprojectmovingforward.Youcanreport
bugs,improvethedocumentation,orcontributecode.
Thereisaspecificcontributorworkflowwerecommend.Startreadingthere.Moreinformationisavailableonour
wiki.
TheJIRAissuetrackerandthedevmailinglistaregoodplacestoidentifyareastohelpoutin.
Searchtheissuetracker: SearchQuery Search
Toshareyourcontributionswiththecommunity,youcansendapullrequestonGitHubtotheApachegit
mirrors.Youcanalsoadvocateforyourchangesdirectlyonourdevelopermailinglist.
Inorderforyourchangestobeaccepted,youneedtosignandsubmitanApacheICLA(IndividualContributor
LicenseAgreement).ThenyournamewillappearonthelistofCLAssignedbynon-committersorCordova
committers.
Anddon'tforgettotestanddocumentyourcode.
EachcomponentofApacheCordovaisinaseparategitrepository:
Platforms
AmazonFireOS
Android
Bada
Blackberry
FirefoxOS
Other
CordovaDocs
CordovaJS(JavaScriptAPI)
CordovaCLI
CordovaPlugman(PluginManager)
CordovaLib(CommonCode)
Plugins
FirefoxOS
iOS
MacOSX
Qt
Tizen
Ubuntu
WebOS
Windows(desktop)
WindowsPhone7
WindowsPhone8
Browser
BatteryStatus
Camera
Console
CordovaLib(CommonCode)
CordovaMobileSpec(TestSuite)
CordovaMedic(TestAutomation)
Weinre(WebInspectorRemote)
CordovaAppHarness
CordovaHelloWorld(SampleApp)
CordovaCoho(ReleaseTool)
CordovaRegistryWeb(PluginRegistryUI)
CordovaRegistry(PluginRegistryApp)
CordovaLabs(ExperimentalContent)
Contacts
Device
DeviceMotion
DeviceOrientation
Dialogs
File
FileTransfer
Geolocation
Globalization
In-AppBrowser
Media
MediaCapture
NetworkInformation
Splashscreen
Statusbar
Statusbar
Vibration
MailingList
DevMailingListDevmailinglistisaplacefordiscussionaboutdevelopingApacheCordova.
IfyouareaCordovauserlookingforhelp,usethecordovatagonStackOverflow.
Writingtothelist [email protected]
Subscriptionaddress [email protected]
Digestsubscriptionaddress [email protected]
Unsubscriptionaddresses [email protected]
Gettinghelpwiththelist [email protected]
Browseonline
CommitsMailingListCommitsmailinglisttrackscommitlogsforApacheCordovarepos.
Writingtothelist [email protected]
Subscriptionaddress [email protected]
Digestsubscriptionaddress [email protected]
Unsubscriptionaddresses [email protected]
Gettinghelpwiththelist [email protected]
Browseonline
IssuesMailingListIssuesmailinglisttrackscommentsandupdatestoJiraitemsregardingApacheCordova.
Writingtothelist [email protected]
Subscriptionaddress [email protected]
Digestsubscriptionaddress [email protected]
Unsubscriptionaddresses [email protected]
Gettinghelpwiththelist [email protected]
Browseonline
Download&Archives
ItisrecommendedthatthecordovaCLIbeinstalledfromnpmratherthandownloadingthis.zipversion.For
moreinformationoninstallingthenpmversionseetheCommand-LineInterfacesectionofthedocumentation.
YoucanfindourreleasezipswithcorrespondingOpenPGPkeys,MD5andSHAfilesontheApacheCordovadist
page.
Ourartworkisalsoavailable.
Olderversionscanbedownloadedfromthearchive.
QuickLinks
General Development ApacheSoftwareFoundation
AboutCordova
ApacheProjectPage
License
Artwork
Download
Documentation
SourceCode
IssueTracker
Wiki
MailingList
Support
AboutASF
Thanks
BecomeaSponsor
Security
Copyright©2012,2013TheApacheSoftwareFoundation,LicensedundertheApacheLicense,Version2.0.ApacheandtheApachefeatherlogosaretrademarksofTheApacheSoftwareFoundation.
Easilycreateappsusingthewebtechnologiesyouknowandlove:HTML,CSS,
andJavaScriptPhoneGapisafreeandopensourceframeworkthatallowsyoutocreatemobileappsusingstandardizedwebAPIsfortheplatforms
youcareabout.
►►InstallPhoneGapInstallPhoneGap ►►GettingStartedGuidesGettingStartedGuides
WatchIntro
Trigger.iO
MostcommonlyusedGreatforSinglePageAppsPerformance
CommonUIcontrolsNavigationViewsTabsSidemenusOvercomebrowserquirks
CSSFrameworknotmobilefirst,mobileonly
Automaticallyrecognize"grade"
refresherdeleteswipe
reorder
<ion-refresher
pulling-text="Pulltorefresh..."
on-refresh="refresh()">
</ion-refresher>
SmoothtransitionsEachtabhasit'sownnavigationhistory
Androidbackbuttonsupport
CustomanimationsAndroidbackbuttonsupport
PreventhidingelementsCallbacksonkeyboardopen/close
300msdelayNormalizedbehaviour
ItlooksawesomeItmovesawesome
It'seasytouseIt'sbasedonAngularJS
DriftyCo.BenSperry&MaxLynch
Startedat2012Raised$1Million
It'snew(v1.0.0-beta8)TherewillbebugsMissingfeaturesChangeAPINotmuchstackoverflow
AreyoudevelopingAny.DO'scompetitor?AreyoudevelopingananimatedGame?CheckHTML5'slimitations(backgroundtasks,customvideocontrol,etc.)CheckiOsguidelines
[email protected]@500TechIL500tech.comhackademy.co.ilangular.co.il
![AngularJS Projects, Forms and Servicesiproduct.org/wp-content/uploads/2016/07/AngularJS... · AngularJS and TypeScript SPA Development Sources: AngularJS [ ], ... Designing front-end](https://img.dokumen.tips/doc/110x75/5ee35669ad6a402d666d455f/angularjs-projects-forms-and-angularjs-and-typescript-spa-development-sources.jpg)
![Let's explore AngularJS / [fr]Explorons AngularJS. GDG Montreal](https://img.dokumen.tips/doc/110x75/554be4ceb4c9055a368b4841/lets-explore-angularjs-frexplorons-angularjs-gdg-montreal.jpg)
