Download
1 / 19
190 likes | 432 Views
PhoneGap. Svarbiausi aspektai pasirenkant technologiją. UX (vartotojo patirtis) Skirtingų platformų palaikymas. Cordova. http://cordova.apache.org/ - Apache Platformos: Android Bada Blackberry FirefoxOS iOS Mac OS X QT Tizen Ubuntu WebOS Windows ( desktop ) Windows Phone 7
E N D
Svarbiausi aspektai pasirenkant technologiją • UX (vartotojo patirtis) • Skirtingų platformų palaikymas
Cordova • http://cordova.apache.org/- Apache • Platformos: • Android • Bada • Blackberry • FirefoxOS • iOS • Mac OS X • QT • Tizen • Ubuntu • WebOS • Windows (desktop) • Windows Phone 7 • Windows Phone 8
Cordova • Įskiepiai: • Battery Status • Camera • Console • Contacts • Device • DeviceMotion • DeviceOrientation • Dialogs • Camera • File Transfer • Geolocation • Globalization • In-AppBrowser • Media • MediaCapture • NetworkInformation • Splashscreen • Vibration
PhoneGap • https://build.phonegap.com/apps
Instaliavimas • Instaliuoti NodeJS • http://nodejs.org/ • Iš komandinės eilutės paleisti: C:\>npm install -g phonegap C:\>phonegapinstallandroid C:\>phonegapinstall wp7 (?) C:\>phonegapinstallios
Lokaliam kompiliavimui • Instaliuoti EclipseAndroid platformai (lokaliam kompiliavimui) • http://www.eclipse.org/downloads/ • Instaliuoti Android SDK • http://developer.android.com/sdk/index.html • Instaliuoti ADT Plugin • http://developer.android.com/sdk/installing/installing-adt.html • Pasitikrinti ar į PATH įtrauktas • JDK bin katalogas (lokaliam kompiliavimui) • ...\Android\android-sdk\platform-tools • ...\Android\android-sdk\tools • sukurti kintamajį JAVA_HOME
Aplikacijos sukūrimas • Susikurti prisijungimą: • https://build.phonegap.com/apps m99m • Iš komandinės eilutės paleisti: C:\> phonegap create hello -n HelloWorld -icom.example.hello • Redaguojame: www/config.xml , pakeičiame ir pridedame<accessorigin="*"/> <contentsrc="http://kazkas.zz.mu/jm1.html" /> • Iš komandinės eilutės paleisti: C:\> phonegapremotebuildandroid(PhoneGapbuild serveris)arba C:\>phonegaprunandroid(lokaliai)
Alyternatyvus būdas sukurti aplikaciją • Jeigu iš karto reikalingas palaikymas visoms platformoms: • https://github.com/phonegap/phonegap/archive/master.zip • Išpakuoti • lib/windows-phone-8/createTemplates.bat • gauti zip failai perkeliami į MyDocuments/Visual Studio 2012/Templates/ProjectTemplates/Visual C# • Redaguojame: www/config.xml , pakeičiame ir pridedame<accessorigin="*"/> <contentsrc="http://kazkas.zz.mu/jm1.html" /> • Iš komandinės eilutės paleisti: C:\> phonegapremotebuildandroid(PhoneGapbuild serveris)arba C:\>phonegaprunandroid(lokaliai)
Įskiepių pridėjimas • Pvz.: geolokacija • phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git • Reikalingas GIT įskiepis • http://git-scm.com/download/win
Projekto patalpinimas į Eclipse • http://docs.phonegap.com/en/2.2.0/guide_getting-started_android_index.md.html
Paleidimas emuliatoriuje Windows Phone: C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Tools\XAP Deployment Android: adb–e install[apkfile name] Instaliuoja veikiančiame emuliatoriuje
iOS • iOS sertifikatų instaliavimas • https://build.phonegap.com/docs/config-signing-ios
PhoneGapemuliatorius • http://emulate.phonegap.com
Cam (1) <!DOCTYPE html> <html> <head> <title>CapturePhoto</title> <scripttype="text/javascript" charset="utf-8"src="cordova.js"></script> <scripttype="text/javascript" charset="utf-8"> varpictureSource; // picturesource vardestinationType; // setstheformatofreturnedvalue // Waitfordevice API libraries to load document.addEventListener("deviceready",onDeviceReady,false); // deviceAPIs are available functiononDeviceReady() { pictureSource=navigator.camera.PictureSourceType; destinationType=navigator.camera.DestinationType; }
Cam (2) // A buttonwillcallthisfunction functioncapturePhoto() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: destinationType.DATA_URL }); } // Take pictureusingdevicecameraandretrieveimageas base64-encodedstring // A buttonwillcallthisfunction functioncapturePhotoEdit() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true, destinationType: destinationType.DATA_URL }); } // Take pictureusingdevicecamera, allowedit, andretrieveimageas base64-encodedstring
Cam (3) // Calledwhen a photoissuccessfullyretrieved functiononPhotoDataSuccess(imageData) { varsmallImage = document.getElementById('smallImage'); // Getimagehandle smallImage.style.display = 'block'; // Unhideimageelements smallImage.src = "data:image/jpeg;base64," + imageData; // Showthecapturedphoto } // Calledwhen a photoissuccessfullyretrieved functiononPhotoURISuccess(imageURI) { varlargeImage = document.getElementById('largeImage'); // Getimagehandle largeImage.style.display = 'block'; // Unhideimageelements largeImage.src = imageURI; // Showthecapturedphoto }
Cam (4) // A buttonwillcallthisfunction functiongetPhoto(source) { navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, destinationType: destinationType.FILE_URI, sourceType: source }); }// Retrieveimagefilelocationfromspecifiedsource // Calledifsomethingbadhappens. functiononFail(message) { alert('Failedbecause: ' + message); } </script> </head>
Cam (5) <body> <buttononclick="capturePhoto();">CapturePhoto</button> <br> <buttononclick="capturePhotoEdit();">CaptureEditablePhoto</button> <br> <buttononclick="getPhoto(pictureSource.PHOTOLIBRARY);">FromPhotoLibrary</button><br> <buttononclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">FromPhotoAlbum</button><br> <img style="display:none;width:60px;height:60px;" id="smallImage" src="" /> <imgstyle="display:none;" id="largeImage" src="" /> </body> </html>
