Dezvoltarea mobilă cu ajutorul tehnologiilor web nu este nimic nou. Datorită instrumentelor precum PhoneGap și Appcelerator Titanium, dezvoltatorii web pot crea aplicații hibride care au acces la hardware-ul dispozitivului. O nouă soluție pentru dezvoltarea HTML5 / CSS / JavaScript este XDK-ul Intel. În acest articol, vă spun de ce merită să încercați.

1. Ce este??

Dacă sunteți implicat în dezvoltarea mobilă, probabil ați auzit sau ați folosit instrumente precum PhoneGap sau Appcelerator Titanium. Aceste instrumente permit dezvoltatorilor web să utilizeze abilitățile lor de dezvoltare web pentru a crea aplicații mobile hibride.

Anul trecut, Intel a achiziționat aplicația AppMobi și le-a împachetat instrumentele de dezvoltare în Intel XDK. Acest produs unificat, unificat, este un set complet de instrumente pentru dezvoltarea mobilă. Un dezvoltator poate trece de la primele linii de cod la o aplicație complet compilată, cu un singur set de instrumente. Și mai bine, XDK este liber să descarce.

2. Caracteristici

Primul lucru pe care îl veți observa despre XDK este cât de ușor este să instalați. PhoneGap necesită o configurație extinsă, iar Titanium are cerințe specifice în ceea ce privește bibliotecile instalate. Pentru a intra în funcțiune cu XDK, îl descărcați și îl instalați.

Frumusețea XDK-ului este că puteți construi aplicații pentru orice platformă. Cu alte instrumente, vă limitați la platforma pe care vă dezvoltați. Din moment ce Apple nu va lăsa instrumentele Xcode să ruleze pe orice altceva decât pe o mașină care rulează OS X, trebuie să aveți un Mac care să se dezvolte pentru iOS.

Intel XDK vă permite să vă dezvoltați pe orice platformă, deoarece compilarea se face în cloud. PhoneGap oferă un serviciu similar pentru dezvoltarea platformei cross, dar este limitat. Și cu XDK nu vă limitați la platformele mobile. Aveți de gând să construiți aplicații Chrome, Facebook, Amazon sau Nook? XDK poate construi pentru acele obiective, precum și opțiunea de a compila cu API-urile XDK sau Cordova (PhoneGap).

XDK este livrat cu editorul open source Brackets de la Adobe. Titanium are un editor decent, dar prefer soluția XDK. În plus, aveți acces la unele dintre extensiile disponibile pentru paranteze. Singurul dezavantaj este că nu puteți actualiza editorul Brackets integrat cu XDK. Cu toate acestea, este încă un pas în sus de la Titanium, iar PhoneGap nu vine chiar cu un editor.

XDK include, de asemenea, un editor grafic, care lipsește complet în toate platformele mobile HTML5. Acesta este motivul pentru care componentele HTML ar beneficia de un editor WYSIWYG. Acesta susține, de asemenea, cadre precum Bootstrap și jQuery Mobile. Aceste componente ale interfeței de utilizator vă permit să construiți rapid interfața aplicației dvs..

Odată ce aplicația dvs. este creată, aveți nevoie de o modalitate de a testa funcționalitatea acesteia. Intel XDK include cel mai bun emulator pentru dispozitive mobile pe care l-am văzut până acum. Acesta include capabilitatea de a testa pe dispozitive reale și performanțe de profil fără a fi nevoie să instalați nimic.

3. Creați un App Mobile cu Intel XDK

Pasul 1: Descărcați și instalați

Accesați pagina de descărcare Intel XDK și obțineți cea mai recentă versiune a XDK. După descărcarea pachetului, instalați-l cu opțiunile implicite.

Pasul 2: Creați un nou proiect

Vom construi o aplicație imagine mică. Porniți XDK și alegeți Începeți un proiect nou. Unele dintre opțiunile pe care le aveți sunt:

• Începeți cu o Demo: Această opțiune vă permite să utilizați unul dintre multele proiecte demo oferite de Intel. Acest lucru este bun pentru a vă ajuta să înțelegeți cum să vă dezvoltați cu XDK.
• Începeți cu un șablon: Această opțiune oferă o serie de șabloane pentru diferite stiluri de interfață utilizator. De asemenea, are un șablon Cordova gol pentru a începe.
• Importați un proiect HTML5 existent: Cu această opțiune, puteți importa un proiect realizat în afara XDK, cum ar fi un proiect PhoneGap codificat în editorul ales. De asemenea, vă permite să importați proiecte XDK.
• Utilizați aplicația Starter / Start cu App Designer: App Starter poate fi considerat App Designer Lite. Ambele sunt interfețe grafice pentru a merge împreună cu editorul Brackets. App Starter utilizează App Framework. App Designer adaugă opțiuni pentru cadrele de interfață utilizator Bootstrap, jQuery Mobile și Topcoat.
• Începeți cu un proiect Blank: După cum sugerează și numele, această opțiune ne oferă un proiect gol, cu un șablon pentru a ne începe. Aceasta este opțiunea pe care o vom alege pentru acest tutorial.

Dă-ți un nume unui proiect și dă clic pe el Crea. XDK va crea proiectul dvs., precum și o structură de directoare.

Pasul 3: Structura proiectului

Chiar dacă am inițiat un proiect gol, XDK include unele fișiere pentru a începe. Vom edita aceste fișiere pentru proiectul nostru. 

init-dev.js 

Acest fișier este utilizat pentru a detecta evenimentele gata de la diferitele biblioteci în uz. Acest fișier va fi folosit ca atare. Acesta include mai multe instrucțiuni de jurnal pentru depanare și pentru a înțelege mai bine cum funcționează fișierul. Partea cu care suntem cel mai interesați începe cu linia 106.

var evt = document.createEvent ("Eveniment"); evt.initEvent ("app.Ready", falsă, falsă); document.dispatchEvent (evt);

Prima linie creează un nou obiect de eveniment. Inițializăm acest obiect cu valoarea "App.ready". Ultima linie trimite evenimentul către DOM.

init-app.js

Am șters majoritatea conținutului acestui fișier, cu excepția părții de care avem nevoie. Ne asigurăm că bibliotecile de care avem nevoie au fost încărcate și că dispozitivul este pregătit înainte de a executa codul nostru. Amintiți-vă app.ready eveniment din fișierul anterior?

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

Ascultătorul evenimentului ascultă app.ready eveniment și solicită initEvents funcția pe aplicaţia obiect.

app.initEvents = function () "utilizarea strict"; var fName = "app.initEvents ():"; console.log (fName, "intrare"); $ ("take"), bind ("clic", takePic); document.addEventListener ( "intel.xdk.camera.picture.add", onSuccess); ;

initEvents funcționează două lucruri. Mai întâi, se leagă un ascultător de evenimente clic pe un buton folosind jQuery. În al doilea rând, adaugă un ascultător de evenimente pentru XDK intel.xdk.camera.picture.add eveniment.

app.js

Acest fișier conține carnea aplicației noastre și conține funcțiile care rulează aplicația noastră. înlocuitorii de funcția jQuery utilizează funcția jQuery pentru a înlocui imaginea din pagină cu cea mai recentă fotografie realizată.

funcția înlocuitor (pic) $ ("img") replaceWith (pic); 

Numele Fotogr funcția spune totul. Utilizează cadrul XDK pentru a face o fotografie.

funcția takePic () intel.xdk.camera.takePicture (50, false, "jpg");  

onSuccess funcționează atunci când a intel.xdk.camera.picture.add evenimentul este detectat. Dacă o fotografie a fost preluată cu succes, ea va înlocui imaginea curentă din pagină utilizând înlocuitorii de pe care am văzut-o mai devreme. Dacă aplicația nu a putut face o fotografie, va afișa un mesaj de eroare.

funcția onSuccess (evt) if (evt.success == true) var image = document.createElement ('img'); image.src = intel.xdk.camera.getPictureURL (evt.filename); image.setAttribute ("stil", "lățime: 100%; înălțime: 200px;"); image.id = evt.filename; înlocuitorii (imagine);  altfel if (evt.message! = undefined) alert (evt.message);  altceva alert ("eroare de captare a imaginii"); 

index.html

Acest fișier conține pagina principală a aplicației noastre. Este un simplu fișier HTML în care tragem jQuery și jQuery Mobile.

Importăm, de asemenea, câteva stiluri pentru stilul aplicației. Foaia de stil personalizată, app.css, are foarte puțin în ceea ce privește stilul. Asta pentru că folosesc rolul temei jQuery Mobile pentru a modela aplicația.

Pagina în sine este o pagină standard jQuery Mobile cu secțiunea antet, conținut și subsol. Observați imaginea din interiorul div info # etichetă. Aceasta este imaginea care este înlocuită de fotografia realizată de cameră.

 
 
Selfi
 
 
 
 Ia-o pe Selfi! 
 
  
 

Acesta este un script folosit pentru depanarea aplicațiilor utilizând previzualizarea aplicațiilor.

De asemenea, importăm o serie de scripturi cheie care fac ca aplicația să bifeze, cum ar fi Cordova și Intel XDK, și app.js.

4. Activarea pluginurilor

Vom folosi API-ul Intel XDK pentru a face fotografii. Pentru a face acest lucru, trebuie să activați câteva pluginuri. Deschide proiecte și, în mijloc, veți vedea Setările CORDOVA 3.X Hibride mobile APP. Faceți clic pe butonul plus de lângă pluginuri și permisiuni. În dreapta, sub Intel XDK Plugins, Verifica aparat foto.

Camera plugin 

5. Utilizarea emulatorului

Apasă pe Imită și încercați funcționalitatea aplicației. Când faceți clic pe Ia-o pe Selfi buton, ar trebui să aducă fereastra de imagine. După ce ați făcut o fotografie, imaginea ar trebui să înlocuiască imaginea substituentului.

emulator

6. Testarea aplicației

Descărcați și instalați aplicația Intel App Preview din Google Play sau App Store din Apple. Mergeți la Test și copiați fila weinre script dacă doriți să efectuați depanare cu Previzualizarea aplicațiilor. Faceți clic pe PUSH FILES pentru a încărca aplicația pe serverele Intel. Conectați-vă la Previzualizarea aplicațiilor cu acreditările dvs. din Intel XDK și alegeți aplicația pe care ați încărcat-o.

7. Construirea aplicației

Acum că am testat aplicația, ultima sarcină este să o construim pentru distribuire. Faceți clic pe Construi pentru a afișa opțiunile. După cum puteți vedea, avem o gamă largă de obiective pentru a le construi.

 Deoarece am folosit Camera API, care este Moştenire, vom alege Legacy Hybrid app. Acest lucru ne duce la pagina de construcție după cum se arată mai jos.

Dând clic pe Detalii vă oferă opțiuni pentru facturarea în aplicație, streaming audio etc..

După alegerea opțiunilor pentru aplicația dvs., faceți clic pe butonul de construire. După câteva momente, fișierul este construit și veți primi un dialog care vă permite să descărcați aplicația.

Concluzie

Sper că sunteți de acord că este ușor să creați o aplicație cu Intel XDK. Indiferent dacă sunteți un veteran, un dezvoltator de Web full stack sau doar începeți să vă dezvoltați, Intel XDK are un punct de intrare pentru dvs. Este ușor de preluat și vă încurajez să încercați Intel XDK.