1 / 19

PhoneGap

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

gin
Download Presentation

PhoneGap

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. PhoneGap

  2. Svarbiausi aspektai pasirenkant technologiją • UX (vartotojo patirtis) • Skirtingų platformų palaikymas

  3. 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

  4. Cordova • Įskiepiai: • Battery Status • Camera • Console • Contacts • Device • DeviceMotion • DeviceOrientation • Dialogs • Camera • File Transfer • Geolocation • Globalization • In-AppBrowser • Media • MediaCapture • NetworkInformation • Splashscreen • Vibration

  5. PhoneGap • https://build.phonegap.com/apps

  6. Instaliavimas • Instaliuoti NodeJS • http://nodejs.org/ • Iš komandinės eilutės paleisti: C:\>npm install -g phonegap C:\>phonegapinstallandroid C:\>phonegapinstall wp7 (?) C:\>phonegapinstallios

  7. 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

  8. 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)

  9. 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)

  10. Į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

  11. Projekto patalpinimas į Eclipse • http://docs.phonegap.com/en/2.2.0/guide_getting-started_android_index.md.html

  12. 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

  13. iOS • iOS sertifikatų instaliavimas • https://build.phonegap.com/docs/config-signing-ios

  14. PhoneGapemuliatorius • http://emulate.phonegap.com

  15. 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; }

  16. 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

  17. 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 }

  18. 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>

  19. 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>

More Related