Lo sviluppo mobile con le tecnologie web non è una novità. Grazie a strumenti come PhoneGap e Appcelerator Titanium, gli sviluppatori Web possono creare app ibride che hanno accesso all'hardware del dispositivo. Una nuova soluzione per lo sviluppo HTML5 / CSS / JavaScript è Intel XDK. In questo articolo, ti dirò perché vale la pena provarlo.

1. Che cos'è?

Se sei coinvolto nello sviluppo mobile, probabilmente hai sentito o utilizzato strumenti come PhoneGap o Appcelerator Titanium. Questi strumenti consentono agli sviluppatori Web di utilizzare le loro competenze di sviluppo web per creare app mobili ibride.

L'anno scorso, Intel ha acquistato appMobi e ha confezionato i propri strumenti di sviluppo in Intel XDK. Questo prodotto unificato e semplificato è un set completo di strumenti per lo sviluppo mobile. Uno sviluppatore può passare dalle prime linee di codice a un'applicazione completamente compilata con un solo set di strumenti. E soprattutto, XDK è scaricabile gratuitamente.

2. Caratteristiche

La prima cosa che noterai di XDK è la facilità di installazione. PhoneGap richiede una configurazione estesa e Titanium ha requisiti specifici per quanto riguarda le librerie installate. Per iniziare e utilizzare XDK, devi scaricarlo e installarlo.

La bellezza di XDK è che puoi creare applicazioni per qualsiasi piattaforma. Con altri strumenti, sei limitato alla piattaforma su cui stai sviluppando. Dato che Apple non permetterà agli strumenti Xcode di girare su qualsiasi cosa tranne una macchina che esegue OS X, devi avere un Mac da sviluppare per iOS.

Intel XDK ti consente di sviluppare su qualsiasi piattaforma, poiché la compilazione viene eseguita nel cloud. PhoneGap offre un servizio simile per lo sviluppo multipiattaforma, ma è limitato. E con XDK non sei limitato alle piattaforme mobili. Hai intenzione di creare app Chrome, Facebook, Amazon o Nook? L'XDK può costruire per questi obiettivi così come l'opzione per compilare con le API XDK o Cordova (PhoneGap).

XDK viene fornito con l'editor Brackets open source di Adobe. Titanium ha un editor decente, ma preferisco la soluzione XDK. Inoltre, hai accesso ad alcune estensioni disponibili per le parentesi. L'unico inconveniente è che non è possibile aggiornare l'editor delle parentesi integrato con XDK. Tuttavia, è ancora un passo avanti da Titanium e PhoneGap non viene nemmeno con un editor.

XDK include anche un editor grafico, che è gravemente assente in tutte le piattaforme mobili HTML5. È ovvio che l'utilizzo di componenti HTML potrebbe trarre vantaggio da un editor WYSIWYG. Supporta anche framework come Bootstrap e jQuery Mobile. Questi componenti dell'interfaccia utente ti consentono di creare rapidamente l'interfaccia della tua app.

Una volta creata l'app, hai bisogno di un modo per testare la sua funzionalità. Intel XDK include il miglior emulatore per dispositivi mobili che ho visto fino ad oggi. Include la possibilità di testare su dispositivi reali e prestazioni del profilo senza dover installare nulla.

3. Creare un'app mobile con Intel XDK

Passaggio 1: download e installazione

Vai alla pagina di download Intel XDK e ottieni l'ultima versione di XDK. Dopo aver scaricato il pacchetto, installalo con le opzioni predefinite.

Passaggio 2: crea un nuovo progetto

Costruiremo una piccola app per immagini. Avvia l'XDK e scegli Inizia un nuovo progetto. Alcune delle opzioni che hai sono:

• Inizia con una demo: Questa opzione ti consente di utilizzare uno dei numerosi progetti dimostrativi offerti da Intel. Questo è utile per capire come sviluppare con XDK.
• Inizia con un modello: Questa opzione offre una serie di modelli per vari stili di interfaccia utente. Ha anche un modello Cordova vuoto per iniziare.
• Importa un progetto HTML5 esistente: Con questa opzione, puoi importare un progetto creato al di fuori dell'XDK, come un progetto PhoneGap codificato nel tuo editor di scelta. Permette anche di importare progetti XDK.
• Utilizza App Starter / Inizia con App Designer: App Starter può essere considerato App Designer Lite. Entrambe sono interfacce grafiche per accompagnare l'editor delle parentesi. App Starter utilizza App Framework. App Designer aggiunge opzioni per i framework di interfaccia utente Bootstrap, jQuery Mobile e Topcoat.
• Inizia con un progetto vuoto: Come suggerisce il nome, questa opzione ci offre un progetto vuoto con un modello per iniziare. Questa è l'opzione che sceglieremo per questo tutorial.

Dai un nome al tuo progetto e fai clic Creare. XDK creerà il tuo progetto e una struttura di cartelle.

Passaggio 3: Struttura del progetto

Anche se abbiamo avviato un progetto vuoto, XDK include alcuni file per iniziare. Stiamo andando a modificare questi file per il nostro progetto. 

init-dev.js 

Questo file viene utilizzato per rilevare gli eventi pronti dalle varie librerie in uso. Questo file sarà usato così com'è. Include molte istruzioni di registro per scopi di debug e per capire meglio come funziona il file. La parte che ci interessa di più inizia in linea 106.

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

La prima riga crea un nuovo oggetto evento. Inizializziamo questo oggetto con il valore "App.ready". L'ultima riga invia l'evento al DOM.

init-app.js

Ho eliminato la maggior parte dei contenuti di questo file, ad eccezione della parte di cui abbiamo bisogno. Ci assicuriamo che le librerie di cui abbiamo bisogno siano state caricate e che il dispositivo sia pronto prima di eseguire qualsiasi nostro codice. Ricorda il app.ready evento dal file precedente?

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

L'ascoltatore dell'evento ascolta il app.ready evento e chiama il initEvents funzione sul App oggetto.

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

Il initEvents la funzione fa due cose. Innanzitutto, lega un listener di eventi click a un pulsante utilizzando jQuery. In secondo luogo, aggiunge un listener di eventi per XDK intel.xdk.camera.picture.add evento.

app.js

Questo file contiene la carne della nostra app e contiene le funzioni che eseguono la nostra app. Il replacer la funzione utilizza jQuery per sostituire l'immagine sulla pagina con la foto più recente scattata.

function replacer (pic) $ ("img"). replaceWith (pic); 

Il nome del Scatta la funzione dice tutto. Usa il framework XDK per scattare una foto.

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

Il onSuccess la funzione si attiva quando a intel.xdk.camera.picture.add evento è rilevato. Se una foto è stata scattata con successo, sostituirà l'immagine corrente sulla pagina usando il replacer funzione che abbiamo visto prima. Se l'app non è stata in grado di scattare una foto, verrà visualizzato un messaggio di errore.

function 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 (immagine);  else if (evt.message! = undefined) alert (evt.message);  else alert ("errore nell'acquisizione dell'immagine"); 

index.html

Questo file contiene la pagina principale della nostra app. È un semplice file HTML in cui inseriamo jQuery e jQuery Mobile.

Importiamo anche alcuni fogli di stile per modellare l'app. Il foglio di stile personalizzato, app.css, ha molto poco in termini di stile. Questo perché io uso il rullo tema jQuery Mobile per modellare l'app.

La pagina stessa è una pagina jQuery Mobile standard con una sezione di intestazione, contenuto e piè di pagina. Si noti l'immagine all'interno del div # info etichetta. Questa è l'immagine che viene sostituita dall'immagine scattata dalla fotocamera.

 
 
selfi
 
 
 
 Prendi Selfi! 
 
  
 

Questo è uno script utilizzato per il debug di app utilizzando l'anteprima dell'app.

Importiamo anche una serie di script chiave che rendono l'app spuntata, come Cordova e Intel XDK, e app.js.

4. Abilitazione dei plugin

Utilizzeremo l'API Intel XDK per scattare foto. Per fare questo, dobbiamo abilitare alcuni plugin. Apri il progetti scheda e, nel mezzo, vedrai IMPOSTAZIONI MOBILE APP IBRID CORDOVA 3.X. Fai clic sul pulsante più accanto a plug-in e autorizzazioni. A destra, sotto Plugin Intel XDK, dai un'occhiata telecamera.

Plug-in fotocamera 

5. Utilizzo dell'emulatore

Clicca il Emulare scheda e prova la funzionalità dell'app. Quando si fa clic sul Prendi Selfi pulsante, dovrebbe far apparire la finestra dell'immagine. Dopo aver scattato una foto, l'immagine dovrebbe sostituire l'immagine segnaposto.

Emulatore

6. Testare l'app

Scarica e installa l'app Intel App Preview da Google Play o dall'App Store di Apple. Vai al Test schede e copia il weinre tag di script se si desidera eseguire il debug con l'anteprima di app. Clicca sul PUSH FILES pulsante per caricare la tua app sui server Intel. Accedi all'App Anteprima con le tue credenziali da Intel XDK e scegli l'app che hai caricato.

7. Costruire l'app

Ora che abbiamo testato l'app, l'ultimo compito è costruirlo per la distribuzione. Clicca sul Costruire scheda per visualizzare le opzioni. Come puoi vedere, abbiamo una vasta gamma di obiettivi da costruire.

 Dal momento che abbiamo usato l'API Camera, che è eredità, sceglieremo il Legacy Hybrid app. Questo ci porta alla pagina di costruzione come mostrato di seguito.

Cliccando su Dettagli mostra le opzioni per la fatturazione in-app, streaming audio, ecc.

Dopo aver scelto le opzioni per la tua app, fai clic sul pulsante di creazione. Dopo pochi istanti, il file è stato creato e avrai una finestra di dialogo che ti permetterà di scaricare la tua app.

Conclusione

Spero tu accetti che è facile creare un'app con Intel XDK. Che tu sia un veterano, sviluppatore di siti Web completo o che abbia appena iniziato a svilupparsi, Intel XDK ha un punto di accesso per te. È facile da imparare e ti incoraggio a provare Intel XDK.