Mobil utvikling med webteknologi er ikke noe nytt. Takket være verktøy som PhoneGap og Appcelerator Titanium, kan webutviklere lage hybridprogrammer 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 å prøve.

1. Hva er det?

Hvis du er involvert i mobil utvikling, har du sikkert hørt om eller brukt verktøy som PhoneGap eller Appcelerator Titanium. Disse verktøyene tillater webutviklere å bruke sine webutviklingsferdigheter for å lage hybrid mobile apps.

I fjor kjøpte Intel appMobi og pakket utviklingsverktøyene inn i Intel XDK. Dette strømlinjeformede, enhetlige produktet er et komplett verktøy for mobil utvikling. En utvikler kan gå fra de første kodelinjene til en komplett applikasjon med bare ett sett med verktøy. Og best av alt, er XDK gratis å laste ned.

2. Funksjoner

Det første du vil merke om XDK, er hvor enkelt det er å installere. PhoneGap krever omfattende konfigurasjon og Titanium har spesifikke krav til installerte biblioteker. For å komme opp med XDK, laster du ned den og installerer den.

XDKs skjønnhet er at du kan bygge applikasjoner for alle plattformer. Med andre verktøy er du begrenset til plattformen du utvikler. Siden Apple ikke lar Xcode-verktøy kjøres på annet enn en maskin som kjører OS X, må du ha en Mac for å utvikle for iOS.

Intel XDK lar deg utvikle på hvilken som helst plattform, fordi kompilering er ferdig i skyen. PhoneGap tilbyr en lignende tjeneste for kryssplattformutvikling, men det er begrenset. Og med XDK er du ikke begrenset til mobile plattformer. Planlegger du å bygge Chrome, Facebook, Amazon eller Nook apps? XDK kan bygge for disse målene samt muligheten til å kompilere med XDK eller Cordova (PhoneGap) APIs.

XDK sendes med open source Brackets editor fra Adobe. Titanium har en anstendig redaktør, men jeg foretrekker XDK-løsningen. I tillegg har du tilgang til noen av utvidelsene som er tilgjengelige for braketter. Den eneste ulempen er at du ikke kan oppdatere Brackets editor som er integrert med XDK. Men det er fortsatt et steg opp fra Titanium, og PhoneGap kommer ikke engang med en redaktør.

XDK inneholder også en grafisk redigeringsprogramvare, som mangler mye i alle de mobile plattformene for HTML5. Det står til grunn at bruk av HTML-komponenter vil ha nytte av en WYSIWYG-editor. Den støtter også rammer som Bootstrap og jQuery Mobile. Disse brukergrensesnittkomponentene lar deg raskt bygge ut grensesnittet til appen din.

Når appen din er opprettet, trenger du en måte å teste ut funksjonaliteten på. Intel XDK inneholder den beste emulatoren for mobile enheter jeg har sett til dato. Den inkluderer evnen til å teste på ekte enheter og profilytelse uten å måtte installere noe.

3. Bygg en mobilapp med Intel XDK

Trinn 1: Last ned og installer

Gå til Intel XDK nedlastingssiden og få den nyeste versjonen av XDK. Etter at du har lastet ned pakken, installer du den med standardvalgene.

Trinn 2: Opprett et nytt prosjekt

Vi skal bygge et lite bildeapp. Start XDK og velg Start et nytt prosjekt. Noen av alternativene du har er:

• Start med en demonstrasjon: Dette alternativet lar deg bruke et av de mange demoprosjektene Intel tilbyr. Dette er godt å bidra til å forstå hvordan man utvikler seg med XDK.
• Start med en mal: Dette alternativet tilbyr en rekke maler for ulike brukergrensesnittstilter. Den har også en blank Cordova-mal for å komme i gang.
• Importer et eksisterende HTML5-prosjekt: Med dette alternativet kan du importere et prosjekt laget utenfor XDK, for eksempel et PhoneGap-prosjekt kodet i valgfri redaktør. Det lar deg også importere XDK-prosjekter.
• Bruk App Starter / Start med App Designer: Appstarter kan betraktes som App Designer Lite. Begge er grafiske grensesnitt for å gå sammen med Brackets editoren. App Starter bruker App Framework. App Designer legger til alternativer for Bootstrap, jQuery Mobile og Topcoat brukergrensesnitt rammer.
• Start med et tomt prosjekt: Som navnet tilsier, gir dette alternativet et tomt prosjekt med en mal for å komme i gang. Dette er alternativet vi vil velge for denne opplæringen.

Gi prosjektet et navn og klikk Skape. XDK vil opprette prosjektet ditt samt en mappestruktur.

Trinn 3: Prosjektstruktur

Selv om vi startet et tomt prosjekt, inneholder XDK noen filer for å komme i gang. Vi skal redigere disse filene for prosjektet vårt. 

init-dev.js 

Denne filen brukes til å oppdage klare hendelser fra de ulike biblioteker i bruk. Denne filen vil bli brukt som den er. Den inneholder mange logguttrykk for feilsøkingsformål og for bedre å forstå hvordan filen fungerer. Den delen vi er mest opptatt av starter på linjen 106.

var evt = document.createEvent ("Event"); evt.initEvent ("app.Ready", false, false); document.dispatchEvent (evt);

Den første linjen oppretter et nytt hendelsesobjekt. Vi initialiserer dette objektet med verdien "App.ready". Den siste linjen sender hendelsen til DOM.

init-app.js

Jeg har slettet det meste av denne filens innhold, unntatt den delen vi trenger. Vi sørger for at bibliotekene vi trenger, er lastet inn og at enheten er klar før vi utfører noen av våre kode. Husk app.ready hendelse fra forrige fil?

document.addEventListener ("app.Ready", app.initEvents, false);

Hendelseslytteren lytter til app.ready hendelsen og kaller initEvents funksjon på app gjenstand.

app.initEvents = function () "bruk strenge"; var fName = "app.initEvents ():"; console.log (fName, "entry"); $ (".tak"). bind ("klikk", takePic); document.addEventListener ( "intel.xdk.camera.picture.add", onSuccess); ;

De initEvents funksjonen gjør to ting. Først binder det en klikkhendelselytter til en knapp ved hjelp av jQuery. For det andre legger det til en hendelselytter for XDK intel.xdk.camera.picture.add begivenhet.

app.js

Denne filen inneholder kjøttet i vår app, og inneholder funksjonene som kjører vår app. De replacer funksjonen bruker jQuery til å erstatte bildet på siden med det siste bildet tatt.

funksjon erstatter (bilde) $ ("img"). erstatte med (bilde); 

Navnet på Ta bilde funksjonen sier alt. Den bruker XDK-rammeverket til å ta et bilde.

funksjon takePic () intel.xdk.camera.takePicture (50, false, "jpg");  

De onSuccess funksjon branner når a intel.xdk.camera.picture.add hendelsen oppdages. Hvis et bilde ble tatt, vil det erstatte det nåværende bildet på siden ved hjelp av replacer funksjonen vi så tidligere. Hvis appen ikke kunne 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 ("style", "width: 100%; height: 200px;"); image.id = evt.filename; erstatningsmiddel (image);  annet hvis (evt.message! = undefined) alert (evt.message);  else alert ("error capturing picture"); 

index.html

Denne filen inneholder hovedsiden til appen vår. Det er en enkel HTML-fil der vi trekker inn jQuery og jQuery Mobile.

Vi importerer også noen få stilark for å utforme appen. Det egendefinerte stilarket, app.css, har svært lite i form av styling. Det er fordi jeg bruker jQuery Mobile-temarullen til å stile appen.

Selve siden er en standard jQuery Mobile-side med en overskrift, innhold og bunntekst. Legg merke til bildet inne i div # info stikkord. Dette er bildet som er erstattet av bildet tatt av kameraet.

 
 
Selfi
 
 
 
 Ta Selfi! 
 
  
 

Dette er et skript som brukes til feilsøkingsprogrammer ved hjelp av forhåndsvisning av apper.

Vi importerer også en rekke nøkkelskript som gjør at appen krysser, for eksempel Cordova og Intel XDK, og app.js.

4. Aktivere pluginprogrammer

Vi skal bruke Intel XDK API for å ta bilder. For å gjøre dette arbeidet må vi aktivere noen plugins. Åpne prosjekter fanen, og i midten vil du se CORDOVA 3.X HYBRID MOBILE APP INNSTILLINGER. Klikk på pluss-knappen ved siden av plugins og tillatelser. Til høyre, under Intel XDK-plugins, kryss av Kamera.

Kamera plugin 

5. Bruk av emulatoren

Klikk på Etterligne fanen og prøv funksjonaliteten til appen. Når du klikker på Ta Selfi knappen, det burde hente opp bildevinduet. Etter å ha tatt et bilde, bør bildet erstatte plassholderbildet.

emulator

6. Teste appen

Last ned og installer Intel App Preview-appen fra Google Play eller Apples App Store. Gå til Test faner og kopiere weinre Skriptetikett hvis du vil utføre feilsøking med App Preview. Klikk på PUSH FILES knappen for å laste opp appen til Intels servere. Logg deg på App Preview med legitimasjonene dine fra Intel XDK, og velg appen du lastet opp.

7. Bygg App

Nå som vi har testet appen, er den siste oppgaven å bygge den for distribusjon. Klikk på Bygge kategorien for å vise alternativene dine. Som du kan se, har vi et bredt spekter av mål å bygge for.

 Siden vi brukte Kamera API, som er Legacy, vi vil velge Legacy Hybrid app. Dette bringer oss til byggsiden som vist nedenfor.

Klikk på detaljer viser alternativer for fakturering i appen, streaming av lyd osv.

Når du har valgt alternativene for appen din, klikker du på bygge-knappen. Etter noen få minutter er filen bygd, og du får en dialog som lar deg laste ned appen din.

Konklusjon

Jeg håper du er enig i at det er enkelt å lage en app med Intel XDK. Enten du er en veteran, en fullstablet webutvikler eller bare begynner å utvikle seg, har Intel XDK et inngangspunkt for deg. Det er lett å plukke opp og jeg oppfordrer deg til å gi Intel XDK en prøve.