Mobil utveckling med webbteknologi är inget nytt. Tack vare verktyg som PhoneGap och Appcelerator Titanium kan webbutvecklare skapa hybridapps som har tillgång till enhetens hårdvara. En ny lösning för HTML5 / CSS / JavaScript-utveckling är Intels XDK. I den här artikeln ska jag berätta varför det är värt att prova.

1. Vad är det?

Om du är inblandad i mobilutveckling har du säkert hört talas om eller använt verktyg som PhoneGap eller Appcelerator Titanium. Med dessa verktyg kan webbutvecklare använda sina webbutvecklingsförmåga för att skapa hybrid mobilappar.

Förra året köpte Intel appMobi och paketerade deras utvecklingsverktyg till Intel XDK. Denna strömlinjeformade, enhetliga produkt är en komplett verktygssats för mobil utveckling. En utvecklare kan gå från de första raderna av kod till en komplett applikation med bara en uppsättning verktyg. Och bäst av allt är XDK gratis att ladda ner.

2. Funktioner

Det första du märker om XDK är hur enkelt det är att installera. PhoneGap kräver omfattande konfiguration och Titanium har särskilda krav när det gäller installerade bibliotek. För att komma igång med XDK, laddar du ner det och installerar det.

Skönheten i XDK är att du kan bygga applikationer för vilken plattform som helst. Med andra verktyg är du begränsad till den plattform du utvecklar. Eftersom Apple inte låter Xcode-verktyg köras på annat än en maskin som kör OS X måste du ha en Mac för att kunna utvecklas för iOS.

Intel XDK kan du utvecklas på vilken plattform som helst, för att kompilering görs i molnet. PhoneGap erbjuder en liknande tjänst för plattformsutveckling, men den är begränsad. Och med XDK är du inte begränsad till mobila plattformar. Planerar du att bygga Chrome, Facebook, Amazon eller Nook apps? XDK kan bygga för dessa mål samt möjlighet att kompilera med XDK eller Cordova (PhoneGap) API: s.

XDK skickas med redigeringsprogrammet Open Source Brackets från Adobe. Titan har en anständig redaktör, men jag föredrar XDK-lösningen. Dessutom har du tillgång till några av de tillägg som finns tillgängliga för parenteser. Den enda nackdelen är att du inte kan uppdatera bracketsredigeraren som är integrerad med XDK. Men det är fortfarande ett steg upp från Titanium, och PhoneGap kommer inte ens med en redaktör.

XDK innehåller även en grafisk redigerare, som saknas kraftigt i alla HTML5-mobila plattformar. Det är uppenbart att använda HTML-komponenter skulle gynna en WYSIWYG-editor. Den stöder också ramar som Bootstrap och jQuery Mobile. Med dessa gränssnittskomponenter kan du snabbt bygga upp gränssnittet för din app.

När din app har skapats behöver du ett sätt att testa dess funktionalitet. Intel XDK innehåller den bästa emulatorn för mobila enheter som jag har sett hittills. Den innehåller möjligheten att testa på riktiga enheter och profilprestanda utan att behöva installera något.

3. Bygg en mobilapp med Intel XDK

Steg 1: Hämta och installera

Gå till Intel XDK-hämtningssidan och få den senaste versionen av XDK. Efter att ha laddat ner paketet, installera det med standardalternativen.

Steg 2: Skapa ett nytt projekt

Vi ska bygga en liten bildapp. Starta XDK och välj Starta ett nytt projekt. Några av alternativen du har är:

• Börja med en demo: Med det här alternativet kan du använda ett av de många demoprojekt som Intel erbjuder. Det här är bra att hjälpa till att förstå hur man utvecklar med XDK.
• Börja med en mall: Det här alternativet erbjuder ett antal mallar för olika användargränssnitt. Det har också en blank Cordova mall för att komma igång.
• Importera ett existerande HTML5-projekt: Med det här alternativet kan du importera ett projekt som gjorts utanför XDK, till exempel ett PhoneGap-projekt som kodats i valfri redigerare. Det låter dig också importera XDK-projekt.
• Använd App Starter / Börja med App Designer: App Starter kan betraktas App Designer Lite. Båda är grafiska gränssnitt för att följa med parentesredigeraren. App Starter använder App Framework. App Designer lägger till alternativ för användargränssnittet för Bootstrap, jQuery Mobile och Topcoat.
• Börja med ett tomt projekt: Som namnet antyder, ger detta alternativ oss ett tomt projekt med en mall för att få oss igång. Det här är det alternativ vi väljer för denna handledning.

Ge ditt projekt ett namn och klicka på Skapa. XDK kommer att skapa ditt projekt såväl som en mappstruktur.

Steg 3: Projektstruktur

Även om vi startade ett tomt projekt innehåller XDK några filer för att komma igång. Vi ska redigera dessa filer för vårt projekt. 

init-dev.js 

Den här filen används för att upptäcka färdiga händelser från de olika biblioteken som används. Den här filen kommer att användas som den är. Den innehåller många loggar för felsökningsändamål och för att bättre förstå hur filen fungerar. Den del vi är mest berörda av börjar på rad 106.

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

Den första raden skapar ett nytt händelseobjekt. Vi initierar detta objekt med värdet "App.ready". Den sista raden skickar händelsen till DOM.

init-app.js

Jag har raderat det mesta av den här filens innehåll, förutom den del vi behöver. Vi ser till att biblioteken vi behöver har laddats och att enheten är klar innan vi utför någon av våra koden. Kom ihåg det app.ready händelse från föregående fil?

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

Evenemangslyttaren lyssnar på app.ready händelse och kallar initEvents funktion på app objekt.

app.initEvents = function () "använd strikt"; var fName = "app.initEvents ():"; console.log (fName, "entry"); $ (". take"). bind ("klicka", takePic); document.addEventListener ( "intel.xdk.camera.picture.add", onSuccess); ;

De initEvents funktionen gör två saker. För det första binder det en klickhändelselyttare till en knapp med jQuery. För det andra lägger det till en händelseloggare för XDK intel.xdk.camera.picture.add händelse.

app.js

Den här filen innehåller köttet i vår app och innehåller funktionerna som kör vår app. De replacer funktionen använder jQuery för att ersätta bilden på sidan med den senaste bilden som tagits.

funktion ersättare (pic) $ ("img"). ersätt med (bild); 

Namnet på Ta bild funktion säger allt. Det använder XDK-ramen för att ta en bild.

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

De onSuccess Funktionsbränder när a intel.xdk.camera.picture.add händelse detekteras. Om en bild har tagits framgångsrikt kommer den att ersätta den aktuella bilden på sidan med hjälp av replacer funktion vi såg tidigare. Om appen inte kunde ta en bild visas ett felmeddelande.

funktion 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; replacer (bild);  annars om (evt.message! = odefinierad) alert (evt.message);  else alert ("error capturing picture"); 

index.html

Den här filen innehåller huvudsidan i vår app. Det är en enkel HTML-fil där vi tar in jQuery och jQuery Mobile.

Vi importerar också några stylesheets för att ställa in appen. Det anpassade formatarket, app.css, har väldigt lite i form av styling. Det beror på att jag använder tematullen jQuery Mobile för att ställa in appen.

Sidan är en vanlig jQuery-mobilsida med en rubrik, innehåll och sidfot. Lägg märke till bilden inuti div # info märka. Detta är bilden som ersätts av bilden som tas av kameran.

 
 
Selfi
 
 
 
 Ta Selfi! 
 
  
 

Det här är ett skript som används för debugging-appar med appförhandsgranskning.

Vi importerar också ett antal nyckelskript som gör att appen kryssar, som Cordova och Intel XDK, och app.js.

4. Aktivera plugins

Vi ska använda Intel XDK API för att ta bilder. För att göra detta arbete måste vi aktivera några plugins. Öppna projekt fliken och i mitten ser du CORDOVA 3.X HYBRID MOBILE APP INSTÄLLNINGAR. Klicka på plusknappen bredvid plugin och behörigheter. Till höger, under Intel XDK-plugins, kontrollera Kamera.

Kamera plugin 

5. Använda emulatorn

Klicka på Tävla med fliken och prova appens funktionalitet. När du klickar på Ta Selfi knapp, det borde ta fram bildfönstret. Efter att ha tagit en bild ska bilden ersätta platshållarens bild.

emulator

6. Testa appen

Hämta och installera appen för Intel App Preview från Google Play eller Apples App Store. Gå till Testa flikar och kopiera weinre skriptet om du vill utföra felsökning med App Preview. Klicka på PUSH FILES knappen för att ladda upp din app till Intels servrar. Logga in på App Preview med dina uppgifter från Intel XDK och välj den app du laddat upp.

7. Bygga App

Nu när vi har testat appen är den sista uppgiften att bygga den för distribution. Klicka på Bygga fliken för att visa dina alternativ. Som du kan se har vi ett brett utbud av mål att bygga för.

 Eftersom vi använde kameraprogrammet, vilket är Arv, vi kommer att välja Legacy Hybrid app. Detta leder oss till byggsidan enligt nedan.

Klicka på detaljer visar alternativ för in-app-fakturering, streaming av ljud osv.

När du har valt alternativen för din app klickar du på build-knappen. Efter några ögonblick är filen byggd och du kommer att få en dialogruta som låter dig ladda ner din app.

Slutsats

Jag hoppas att du håller med om att det är lätt att skapa en app med Intel XDK. Oavsett om du är en veteran, full stack webbutvecklare eller bara börjar utvecklas, har Intel XDK en ingångspunkt för dig. Det är lätt att hämta och jag uppmanar dig att ge Intel XDK ett försök.