Getting gang med Intel XDK
74
Del
33
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Mobile utvikling med web-teknologi er ikke noe nytt. Takket være verktøy som PhoneGap og Appcelerator Titanium, kan webutviklere lage hybride applikasjoner som har tilgang til enhetens maskinvare. En ny løsning for HTML5 /CSS /Javascript utvikling er Intels XDK. I denne artikkelen vil jeg fortelle deg hvorfor det er verdt å gi det et forsøk.
1. Hva er det?
Hvis du er involvert med mobil utvikling, har du sikkert hørt om eller brukt verktøy som PhoneGap eller Appcelerator Titanium. Disse verktøyene lar webutviklere å bruke sine webutvikling ferdigheter til å skape hybride mobile apps.
I fjor Intel kjøpte appMobi og pakket sine utviklingsverktøy inn i Intel XDK. Denne strømlinjeformet, helhetlig produkt er en komplett verktøysett for mobil utvikling. En utvikler kan gå fra de første linjene med kode til et fullt samlet søknad på med bare ett sett med verktøy. Og best av alt, er XDK gratis å laste ned.
2. Funksjoner
Det første du vil legge merke til om XDK er hvor enkelt det er å installere. PhoneGap krever omfattende konfigurasjon og Titanium har spesifikke krav med hensyn til installert bibliotekene. For å komme i gang med XDK, laster du den og installere den.
Det fine med XDK er at du kan bygge applikasjoner for alle plattformer. Med andre verktøy, er du begrenset til plattformen du utvikler videre. Siden Apple ikke vil la Xcode verktøy kjøre på noe annet enn en maskin som kjører OS X, må du ha en Mac for å utvikle for iOS.
Intel XDK kan du utvikle på alle plattformer, fordi kompilering er gjort i skyen . PhoneGap tilbyr en lignende tjeneste for kryssplattform utvikling, men det er begrenset. Og med XDK er du ikke begrenset til mobile plattformer. Har du tenkt å bygge Chrome, Facebook, Amazon, eller Nook apps? Den XDK kan bygge for disse målene, samt muligheten til å kompilere med XDK eller Cordova (PhoneGap) API-er.
De XDK leveres med åpen kildekode Brak redaktør fra Adobe. Titanium har en anstendig editor, men jeg foretrekker XDK løsning. I tillegg har du tilgang til noen av de utvidelser tilgjengelig til Brak. Den eneste ulempen er at du ikke kan oppdatere Brak editor som er integrert med XDK. Men det er fortsatt et steg opp fra Titanium, og PhoneGap ikke selv komme med en redaktør.
XDK inkluderer også en grafisk editor, som er sårt savnet i alle de HTML5 mobile plattformer. Det står til grunn ved hjelp av HTML-komponenter vil dra nytte av en WYSIWYG editor. Den støtter også rammer som Bootstrap og jQuery Mobile. Disse komponentene brukergrensesnitt lar deg raskt bygge ut grensesnittet til programmet ditt.
Når programmet er opprettet, trenger du en måte å teste ut funksjonaliteten. Intel XDK inkluderer de beste emulator for mobile enheter jeg har sett til dags dato. Det inkluderer muligheten til å teste på reelle enheter og profil ytelse uten å måtte installere noe som helst.
3. Bygg en Mobile App med Intel XDK
Trinn 1: Last ned og installer
Gå til Intel XDK nedlastingssiden og få den nyeste versjonen av XDK. Etter nedlasting av pakken, installere det med standardvalgene
Trinn 2:. Opprett et nytt prosjekt
Vi kommer til å bygge et lite bilde app. Start XDK og velg Start et nytt prosjekt. Noen av alternativene du har er:
Start med en Demo: Dette alternativet gjør at du kan bruke en av de mange demo prosjekter Intel tilbyr. Dette er god til å forstå hvordan man kan utvikle med XDK
Start med en skrift. Denne varianten har en rekke maler for ulike brukergrensesnitt stiler. Det har også en blank Cordova mal for å komme i gang
importere en eksisterende HTML5 Prosjekt:. Med dette alternativet kan du importere et prosjekt laget utenfor XDK, for eksempel en PhoneGap prosjekt kodet i ditt redaktør av valget. Den lar deg også importere XDK prosjekter
Bruk App Starter /Start med App Designer. App Starter kan betraktes App Designer Lite. Begge er grafiske grensesnitt for å gå sammen med Brak editor. App Starter bruker app Work. App Designer legger alternativer for Bootstrap, jQuery Mobile, og topcoat brukergrensesnitt rammer
Start med et tomt prosjekt. Som navnet tilsier, er dette alternativet gir oss en tomt prosjekt med en mal for å få oss i gang. Dette er det alternativet vi vil velge for denne opplæringen.
Gi prosjektet et navn og klikk på Opprett. Den XDK vil skape prosjektet, samt en mappestruktur
Trinn 3:. Prosjektstruktur
Selv om vi startet et tomt prosjekt, XDK inneholder noen filer for å komme i gang. Vi kommer til å redigere disse filene for prosjektet vårt.
init-dev.js
Denne filen brukes til å påvise klare hendelser fra de forskjellige bibliotekene i bruk. Denne filen vil bli brukt som den er. Den inneholder mange logg uttalelser for debugging formål og for å bedre forstå hvordan filen fungerer. Den delen vi er mest opptatt av starter på linje 106.
Var evt = document.createEvent ("Event"); evt.initEvent ("app.Ready", false, false); document.dispatchEvent (evt); < p> Den første linjen skaper en ny hendelse objekt. Vi initial dette objektet med verdien "app.ready". Den siste linjen sender hendelsen til DOM.
init-app.js
Jeg har slettet de fleste av denne filens innhold, med unntak av den delen vi trenger. Vi sørger for at bibliotekene vi trenger er lagt inn og at enheten er klar før vi utføre noen av koden vår. ? Husk app.ready hendelsen fra forrige fil
document.addEventListener ("app.Ready", app.initEvents, falske);
Arrangementet lytteren lytter etter den app.ready hendelsen og kaller initEvents fungere på app objektet
app.initEvents = function () {"bruke streng."; Var fname = "app.initEvents ():"; console.log (fname, "entry"); $ (". ta") felles ("klikk", Ta bilde).; document.addEventListener ("intel.xdk.camera.picture.add", onSuccess); };
initEvents funksjonen gjør to ting. Først binder det et klikk hendelse lytteren til en knapp med jQuery. For det andre, legger det en hendelse lytteren for XDK intel.xdk.camera.picture.add hendelsen.
app.js
Denne filen inneholder kjøtt av vår app og inneholder funksjoner som kjører vår app. Den erstatteren funksjonen bruker jQuery å erstatte bildet på siden med det nyeste bildet tatt
funksjon erstatning (bilde). {$ ("Img") replaceWith (bilde);.}
Navnet på Ta bilde funksjon sier alt. Den bruker XDK rammeverk for å ta et bilde
funksjons Ta bilde () {intel.xdk.camera.takePicture (50, falske, "jpg");}.
De onSuccess funksjons branner når en intel. xdk.camera.picture.add hendelsen er oppdaget. Hvis et bilde ble vellykket tatt, vil den erstatte gjeldende bilde på siden ved hjelp av erstatningsfunksjonen vi så tidligere. Hvis programmet ikke var i stand til å ta et bilde, vil det vise en feilmelding.
Funksjon onSuccess (evt) {if (evt.success == true) {var image = document.createElement ('img' ); image.src = intel.xdk.camera.getPictureURL (evt.filename); image.setAttribute ("stil", "width: 100%; høyde: 200px;"); image.id = evt.filename; replacer (image); } Else {if (evt.message = udefinert!) {Alert (evt.message); } Else {alert ("error fange bildet"); }}}
index.html
Denne filen inneholder hovedsiden vår app. Det er en enkel HTML-fil som vi trekker i jQuery og jQuery Mobile
. ≪ script src = "lib /jquery-2.1.1.js" > < /script > < script src = "lib /jquery .mobile-1.4.4 /jquery.mobile-1.4.4.js "> < /script >
Vi har også importere noen stilark til å style app. Skikken stilark, app.css, har svært lite i veien for styling. Det er fordi jeg bruker jQuery Mobile tema berg å style app
. ≪ link rel = "stylesheet" href = "lib /jquery.mobile-1.4.4 /jquery.mobile-1.4.4. css "> < link rel =" stylesheet "href =" css /temaer /selfi.css "> < link rel =" stylesheet "href =" css /temaer /jquery.mobile.icons.min.css " > < link rel = "stylesheet" href = "css /app.css" >
Siden i seg selv er en standard jQuery Mobile side med en overskrift, innhold og bunntekst delen. Legg merke til bildet inne i div # info tag. Dette er bildet som er erstattet med bilde tatt av kameraet
. ≪ div data-role = "side" > < div data-role = "header" > < h1 > Selfi < /h1 > < /div > < div data-role = "main" class = "ui-innhold" > < div id = "info" > < img src = "img /vader-selfie.jpg" > < /div > < a class = "ta" data-role = "button" > Ta Selfi <! /a > < /div > < div data-role = "footer" data-posisjon = "fast" > < h1 > < /h1 > < /div > < /div >
Dette er et script som brukes for debugging apps å bruke app forhåndsvisning
. < script src="http://debug-software.intel.com/target/target-script-min.js#Agu5iaiuw-i47vL-2_lk5pDOu3XL6fZm9sAm4apb__w"></script>
We også importere en rekke sentrale skript som gjør app flåtten, som Cordova og Intel XDK, og app.js.
< script src = "intelxdk.js" > < /script > <! - phantom bibliotek, nødvendig for XDK API-kall - > < script src = "cordova.js" > < /script > <! - phantom bibliotek, nødvendig for Cordova API-kall - > < script src = "xhr.js" > < /script > <! - phantom bibliotek, nødvendig for XDK kor - > < script src = "js /app.js" > < /script > < script src = "js /init-dev.js" > < /script > < script src = "js /init-app.js" > < /script >
4. Aktivering Plugins
Vi kommer til å bruke Intel XDK API for å ta bilder. For å gjøre dette arbeidet, har vi å gjøre det mulig noen plugins. Åpne fanen Prosjekter og, i midten, vil du se CORDOVA 3.X HYBRID mobile app INNSTILLINGER. Klikk på pluss-knappen ved siden av plugins og tillatelser. På høyre under Intel XDK Plugins, sjekk Kamera.
Kamera plugin
5. Bruke Emulator
Klikk på kategorien Emulér og prøve ut funksjonaliteten i programmet. Når du klikker på Take Selfi knappen, bør det få opp bildevinduet. Etter å ha tatt et bilde, må bildet erstatte plassholderbildet.
Emulator
6. Teste App
Last ned og installer Intel App Preview app fra Google Play eller Apples App Store. Gå til test faner og kopier weinre skriptmerket hvis du ønsker å utføre feilsøking med Preview App. Klikk på PUSH FILES knappen for å laste opp din app til Intel-servere. Logg deg på Preview App med legitimasjonen fra Intel XDK og velg appen du lastet opp.
7. Bygge App
Nå som vi har testet programmet, er den siste oppgaven å bygge den for distribusjon. Klikk på fanen Bygg for å vise alternativene. Som du kan se, har vi et bredt spekter av mål om å bygge for.
Siden vi brukte kameraet API, som er Legacy, vil vi velge Legacy Hybrid app. Dette bringer oss til oppbygging side som vist nedenfor.
Ved å klikke på Detaljer viser deg alternativene for in-app fakturering, streaming audio, etc.
Når du har valgt alternativene for din app, klikk på build-knappen. Etter en liten stund, blir filen bygget og du vil få en dialog som lar deg laste ned appen.
Konklusjon
Jeg håper du er enig i at det er enkelt å lage en app med Intel XDK. Enten du er en veteran, full stack webutvikler eller bare begynner å komme inn i utvikling, har Intel XDK en inngangsport for deg. Det er lett å plukke opp og jeg oppfordrer deg til å gi Intel XDK en prøve.