Come creare applicazioni e giochi multipiattaforma con HTML5

L’industria dello sviluppo software ha sempre fornito speranza allo sviluppatore indipendente e al piccolo negozio di sviluppo. Le storie di successo indie abbondano fin dai primi giorni del PC e molto altro dai primi giorni del Web. Ma oggi c’è più opportunità per gli indipendenti che mai. Perché? Due ragioni:

Nuove piattaforme e pubblico

- Prosegue dopo la pubblicità -
  • L’adozione di massa di telefoni e tablet sofisticati ha notevolmente aumentato il pubblico di app di tutti i tipi, dai giochi casual alle applicazioni mediche specializzate.
  • Il prezzo senza precedenti per le app ha reso i nuovi acquisti di software praticamente un evento quotidiano per molti utenti.

Una barriera più bassa per entrare sul mercato che mai

- Prosegue dopo la pubblicità -
  • I negozi di app gestiscono tutti gli onerosi dettagli relativi all’elaborazione e alla distribuzione degli acquisti.
  • Le funzionalità di pubblicità in-app e up-sell sono facilmente implementabili e gestite automaticamente da terze parti.
  • Esistono opportunità di promozione pubblicitaria e di app pre-confezionate per tutti i livelli di budget, dalle tattiche di guerriglia libere ma efficaci per completare i pacchetti di lancio forniti da agenzie pubblicitarie professionali.
  • Numerose opzioni per strumenti di sviluppo e librerie di app per soddisfare i requisiti del tuo progetto.

È l’ultimo elemento più vicino al cuore dello sviluppatore. L’ambiente di sviluppo che scegli ha il potenziale per essere la più grande fonte di dolore o la chiave più importante per il tuo successo. Ed è quello che voglio mettere in evidenza in questo articolo.

- Prosegue dopo la pubblicità -

Conosci le tue opzioni

L’esplosione di interesse nelle app per telefono / tablet ha innescato una corrispondente esplosione di strumenti e ambienti di sviluppo software. All’inizio dell’iPhone di Apple, lo sviluppo di app per dispositivi mobili significava imparare Objective-C e programmare su un Mac Apple. E lo sviluppo di applicazioni native è ancora un’opzione praticabile per alcuni progetti. D’altra parte, lo sviluppo di applicazioni Web offre un approccio molto diverso e ha i suoi vantaggi e svantaggi. Più recentemente è sorta una varietà di opzioni di sviluppo di app ibride per colmare il divario tra lo sviluppo nativo e Web.

Going Native

La creazione di un’applicazione nativa implica la scrittura di codice specifico per la piattaforma mobile di destinazione, utilizzando la lingua e le API consigliate dalla piattaforma.

- Prosegue dopo la pubblicità -

Apple è stata particolarmente restrittiva in questo, rendendo molto difficile l’utilizzo di qualsiasi cosa, tranne la configurazione hardware e software necessaria per sviluppare applicazioni distribuite attraverso l’App Store. In particolare, ciò significa che un Mac Apple esegue l’ambiente di sviluppo XCode per sviluppare applicazioni Objective-C.

I requisiti delle app native per Google Android non sono altrettanto rigorosi. Puoi sviluppare su Linux, Mac OS X o Windows. Le app sono scritte in Java utilizzando l’SDK di Android, che include un debugger, librerie e un emulatore. Google supporta l’IDE di Eclipse, ma è anche possibile utilizzare IDE IntelliJ e IDE NetBeans.

Le app di Microsoft Windows 8 possono essere costruite con JavaScript e HTML. O per un ambiente più tradizionale, tipizzato staticamente, è possibile utilizzare Visual Basic, C # o C ++ insieme alla lingua XAML di Microsoft. Infine, per il massimo in termini di velocità, potenza e controllo, è possibile utilizzare C ++ con la libreria dell’interfaccia utente DirectX. Qualunque sia la lingua scelta, l’ambiente di sviluppo è lo stesso: Microsoft Visual Studio 2012.

Allora, perché vorresti seguire la via di sviluppo nativo? Ci sono alcuni importanti vantaggi:

  • La tua applicazione ha accesso completo e diretto a tutte le funzionalità native dell’hardware, inclusi l’accelerometro, l’ingresso multi-touch e la fotocamera
  • Ottieni il controllo completo dei dettagli di implementazione
  • La build finale avrà le prestazioni più veloci possibili per la grafica, l’accesso alla rete e tutti gli altri componenti del dispositivo

Sembra ideale! Ma ci sono considerazioni importanti da considerare.

  • Come puoi vedere, ogni piattaforma ha il suo, diverso! – requisiti linguistici e API. Ciò significa che puoi scommettere la fattoria sul futuro di una singola piattaforma o essere pronto per le porte delle applicazioni che richiedono la riscrittura da zero.
  • A seconda del tuo background e della piattaforma che intendi raggiungere, potresti avere una curva di apprendimento ripida. Molti aspiranti sviluppatori iOS sono stati scoraggiati dalla prospettiva di Objective-C.
  • I tempi di sviluppo per i progetti di sviluppo di app nativi possono essere lunghi, a causa del linguaggio di programmazione spesso di basso livello e di API arcane. E nel mondo delle app mobili, il time-to-market è sempre un fattore critico.

Mobilitazione della prossima rivoluzione Web

Ma tutte le attuali piattaforme mobili hanno browser Web, vero? Perché non creare solo applicazioni Web personalizzate per funzionare bene con un’interfaccia touch?

Certo che non è così semplice. Alcuni ostacoli:

  • Regolazione su dimensioni dello schermo limitate e molto variabili
  • Rendere l’applicazione Web reattiva ai gesti più comuni
  • Implementazione del tipo di elementi dell’interfaccia utente comuni sulle piattaforme mobili
  • Fare uso di funzionalità hardware mobili, come la geo-localizzazione

Fortunatamente, la grande richiesta di alternative allo sviluppo di app native ha generato una ricchezza di librerie JavaScript per soddisfare tutte queste esigenze.

Dato il supporto della libreria JavaScript così ricco, l’opzione di app Web mobile presenta importanti vantaggi:

  • Fornisce uno sviluppo multipiattaforma molto più veloce che rende possibile scrivere l’applicazione una sola volta ed eseguirla su una vasta gamma di piattaforme mobili
  • Sfrutta la lingua e il set di strumenti che molti sviluppatori già conoscono

Questo risolve tutti i problemi con lo sviluppo nativo! Sfortunatamente abbiamo anche perso alcuni dei benefici che abbiamo avuto con lo sviluppo nativo. Svantaggi delle app Web mobili:

  • Nessuna presenza generica di App Store HTML5
  • Le opzioni di accesso / upsell di acquisto devono essere gestite dall’applicazione
  • Nonostante il supporto della libreria JavaScript, l’accesso a funzionalità native come il multi-touch, l’accelerometro e la fotocamera sarà più limitato – le funzionalità includeranno probabilmente un sottoinsieme comune di funzionalità fornite da tutte le piattaforme
  • Velocità di esecuzione: le funzionalità di canvas e altre funzionalità multimediali di HTML5, sebbene potenti, non soddisfano i requisiti di prestazioni per molte app e giochi multimediali, specialmente quando sono in esecuzione nei browser di telefoni e tablet

Dato che un numero enorme di app richiede capacità grafiche / multimediali, l’ultimo è un rompicapo per molti progetti.

Raggiungere il meglio di entrambi i mondi: Intel XDK

I limiti delle app native e delle app Web mobili hanno ispirato alcuni sviluppatori a capire come superare l’impasse e trovare un modo per ottenere uno sviluppo veloce con un linguaggio familiare e buone prestazioni grafiche.

Intel XDK è un insieme di strumenti e librerie che rappresentano una nuova classe di applicazioni ibride . Sfrutta le tecnologie HTML e JavaScript, ma poi compila l’app finale in un eseguibile che è indistinguibile da quello creato in origine e può essere inoltrato all’app store di qualsiasi piattaforma.

XDK offre un buon numero di librerie e tecnologie. Voglio evidenziarne una manciata che farà davvero la differenza per i tuoi progetti.

Creazione e distribuzione di app

Le applicazioni Intel XDK non vengono semplicemente eseguite in un browser. Sebbene si utilizzino tecnologie HTML5 standard, il risultato finale viene compilato in un eseguibile nativo per le piattaforme che si scelgono. Con un’unica fonte, puoi generare app che funzionano su iOS, Android, Windows 8 App, Facebook App e Kindle. Ciò garantisce un tempo di implementazione molto più rapido perché la tua app è pronta per essere inviata ai vari store di app.

Sfruttare le funzionalità dell’hardware mobile con l’API JavaScript

Non sarai un serio concorrente nel mercato delle app a meno che la tua app non si integri profondamente con le funzionalità fornite dalle piattaforme mobili. Intel XDK soddisfa questa sfida con le loro API JavaScript. Fornisce accesso all’accelerometro, fotocamera, posizione geografica, lettore audio / video, notifiche e altro. Meglio di tutto, questa singola API raggiunge attraverso molte piattaforme mobili.

L’interfaccia per giochi accelerata

Anche con un’applicazione compilata, la tela HTML5 standard non fornisce una piattaforma di gioco seria per l’hardware mobile. È qui che entra in gioco la tela dell’Inter Game Interface di Intel. Re-implementa un sottoinsieme del canvas HTML5 partendo da zero con un aumento della velocità notevolmente superiore e spesso soddisfacendo le prestazioni delle applicazioni scritte direttamente in Objective-C, Java o .NET.

Forte supporto per lo sviluppo del gioco

Lo sviluppo del gioco è impegnativo, ma puoi essere molto più produttivo con la giusta struttura. Intel XDK fornisce tre componenti importanti:

  • ImpactJS è una libreria JavaScript che fornisce una struttura di programmazione e una libreria di funzioni che facilitano le attività di sviluppo di giochi comuni. (Tuttavia è necessario acquistare una licenza per sviluppare con ImpactJS per $ 100.)
  • playMobi fornisce un’implementazione standard di elementi di gioco comuni come realizzazioni, classifiche, giocatori e oggetti sociali.
  • Box2D è un popolare motore di fisica 2D per supportare la creazione di giochi come Angry Birds. Per forme regolari e irregolari, è possibile assegnare densità, attrito e altre proprietà che determinano il modo in cui interagisce con altri oggetti e il mondo.

Test e debug su dispositivo rapidi e potenti

Tutti gli ambienti di sviluppo mobile forniscono un emulatore per l’esecuzione rapida del codice da testare durante la codifica. E forniscono tutti un modo per copiare l’app su un dispositivo reale per ottenere l’aspetto reale. Tuttavia, non è sempre facilespostare un’app su un dispositivo e farlo funzionare, soprattutto su iOS. Fortunatamente l’XDK ha trovato il modo di risolvere i problemi comuni e rende i test su dispositivo quasi altrettanto rapidi e semplici dell’utilizzo dell’emulatore. Questo aiuta notevolmente il tuo ciclo di turn-around, specialmente per le app multipiattaforma. E ti assicura di trovare i problemi specifici del dispositivo nelle prime fasi del processo.

Installazione di Intel XDK (utilizzando Windows 8)

Intel XDK è gratuito da scaricare, installare e utilizzare. Ma prima di scaricarlo, assicurati di aver installato Java (versione 6 o 7). Avrai anche bisogno del browser Google Chrome. L’ambiente di sviluppo Intel XDK viene eseguito localmente, ma utilizza Chrome per presentare l’interfaccia utente.

http://java.com/download

http://google.com/chrome

Poiché l’ambiente di sviluppo è basato su Java / Chrome, puoi sviluppare su Windows, Apple OS X e Linux. Il processo di installazione di XDK è molto simile a quello descritto qui, ma le specifiche sono fornite sul sito Intel.

Con i requisiti in vigore, vai su http://intel.ly/HTML5XDK e fai clic su Vai alla pagina di download di XDK . Lì si scarica un file chiamato XDK.jnlp . Eseguirlo. Potresti vedere una finestra di autorizzazione all’installazione. In tal caso, seleziona la casella di controllo Sempre attendibile … e poi Esegui .

Mentre l’installazione avanza, ti verrà richiesto di selezionare la cartella dei progetti per Intel XDK:

Non basta fare clic su Salva qui (come ho fatto la prima volta che l’ho installato). Se esegui ogni nuovo progetto che creerai, creerai una nuova cartella in Documenti. Invece, crea una nuova cartella (usando l’icona della cartella in alto a destra nella finestra di dialogo, la terza da sinistra). Chiamalo Progetti IntelXDK (o quello che ti piace), quindi seleziona quella cartella e fai clic su Salva .

Ora ti verrà richiesto di accedere con un account Intel XDK.

Non ne hai uno? Basta inserire il tuo indirizzo email e fare clic su Invia. Quindi compilare il modulo di registrazione nuovo account e fare clic su Avanti . È richiesto un account per utilizzare Intel XDK: consente di utilizzare facilmente tutte le funzionalità basate su cloud.

Una volta creato il tuo account, potresti visualizzare diverse finestre con suggerimenti, aggiornamenti o annunci. Leggili attraverso se vuoi o semplicemente clicca chiudi per ora.

Finalmente ti viene presentato l’Intel XDK IDE.

Il processo di installazione ha aggiunto un’icona Intel XDK al menu Start / schermata Start. Per accedere nuovamente all’IDE successivamente, fai clic sul pulsante Start sulla tastiera, digita XDK e premi Invio .

Nella prossima sezione fornirò una rapida panoramica delle funzionalità IDE che vedete qui. Quindi nella sezione seguente ti mostrerò come creare la tua prima applicazione (effettivamente utile!).

Esplorando l’IDE

L’IDE è il punto di integrazione per tutte le funzionalità fornite da XDK. Ti darò una breve descrizione di quello che stai vedendo qui.

La barra degli strumenti

Come puoi vedere c’è una barra dei pulsanti colorata nella parte superiore dello schermo. Come ci si aspetterebbe, questo fornisce l’accesso a funzionalità comuni.

Andando da sinistra a destra, ecco una breve descrizione di ciascun pulsante. Puoi sempre vedere il nome del pulsante passando sopra di esso.

    • Logo Intel : non è un pulsante. Vogliono solo ricordarti chi è responsabile di tutta questa freddezza.
    • Attiva / disattiva emulazione / editor : consente di alternare l’emulatore, che esegue l’app e l’editor in cui viene modificato il codice sorgente.
    • Nuova applicazione : fornisce opzioni per una varietà di modelli e applicazioni demo che è possibile utilizzare come punto di partenza per il nuovo progetto. Quando vengono creati nuovi progetti, questi vengono memorizzati sul computer locale e possono essere successivamente trasferiti sul cloud (sui server Intel). Ciò semplifica lo sviluppo e l’esecuzione della tua app su più macchine e piattaforme multiple, inclusi i dispositivi di destinazione.
    • Selettore del progetto (o applicazione Switch ) – Il passaggio da un progetto all’altro su cui stai lavorando è semplice con questo menu a discesa. È anche utile per saltare alle demo fornite per rubare (e prendere in prestito ) il loro codice da utilizzare nei propri progetti.
    • Aggiungi versione e Elimina versione – Fornisce il codice sorgente e rilascia le funzionalità di gestione.
    • Apri cartella progetto – Questo non è il pulsante che usi per aprire un nuovo progetto nell’IDE. Usa il selettore di progetto per quello. Questo pulsante apre Windows Explorer, mostrando la cartella che contiene i file di progetto.
    • Modifica il codice sorgente – Come la cartella del progetto Apri, questo pulsante non fa ciò che ci si potrebbe aspettare in un primo momento. L’editor integrato nell’IDE è abbastanza capace. Ma se preferisci, puoi utilizzare il tuo editor preferito per sviluppare le tue applicazioni e utilizzare l’IDE per la compilazione, l’emulazione e la creazione. Se usi un editor diverso, questo pulsante avvierà quell’editor con il progetto al quale stai lavorando attualmente nell’emulatore.
    • Mostra / nascondi console di debug : un vantaggio dell’hosting dell’IDE XDK in Chrome è che puoi utilizzare il potente debugger Chromes per inseguire i problemi nel tuo codice HTML / JavaScript. Questo pulsante apre e chiude il pannello della console di debug nella parte inferiore della finestra del browser.

  • Prova su WiFi locale – Apre una finestra che ti guida attraverso i passaggi che devi eseguire sul tuo dispositivo per testare la tua app lì tramite WiFi.
  • App Tester – Come Test su WiFi locale, questa finestra fornisce le istruzioni per un tester per aprire un’app a cui hai fornito l’accesso. Ciò spingerà la tua applicazione al cloud e l’App Tester dovrà avere un’istanza locale installata sul tuo dispositivo mobile per estrarre la tua app dal cloud.
  • Invia collegamento app : rende la tua app disponibile per gli altri in modo che possano testarla.
  • Costruisci per l’app store : quando sei pronto per creare la tua build finale da inviare, questo è il posto dove andare.
  • Build precedenti: consente di accedere alle build precedenti per riferimento o risoluzione dei problemi.
  • Credenziali : consente di configurare oAuth o un altro sistema di credenziali da utilizzare con la tua app.
  • Documentazione API : collegamenti alla pagina della documentazione dell’API online.
  • Guida : mostra un menu con collegamenti a una varietà di fonti per informazioni.
  • Impostazioni account – Cambia email, password e altre funzionalità.
  • Logout – Termina la sessione corrente.

Le caratteristiche di simulazione del dispositivo

I dispositivi mobili sono disponibili in una varietà di forme e possono essere tenuti e utilizzati in vari modi. I pannelli lungo la destra forniscono un modo per simulare alcune di queste funzioni nell’emulatore.

Partendo dall’alto:

  • EMULAZIONE DEL DISPOSITIVO : selezionare il dispositivo che si desidera emulare. Questo non solo cambia l’aspetto dell’emulatore, imposta la risoluzione dello schermo in modo appropriato in modo da poter vedere come si adatta la tua interfaccia utente.
  • ACCELEROMETER – Simula l’inclinazione del dispositivo in tre dimensioni.
  • CONNESSIONE DATI – Come risponde la tua applicazione quando la larghezza di banda è limitata o non disponibile?
  • GEOLOCATION – Se la tua app dispone di funzionalità di geolocalizzazione (cioè dov’è il ristorante messicano più vicino?), Non vuoi andare in giro per il paese solo per testarlo! Il pannello in basso consente di testare l’applicazione come se fosse nella posizione specificata.

La barra dei pulsanti dell’emulatore

Infine alcuni comandi di emulazione comuni sono disponibili nella barra dei pulsanti verticale che appare a sinistra (solo quando sei in modalità emulazione).

Dall’alto:

  • Ricarica l’app : prendi l’abitudine di fare clic su questo immediatamente quando passi dall’editor all’emulatore. Recupera i file correnti nella tua applicazione e ricomincia dalla schermata principale. Se non fai clic, potresti avere una versione precedente della tua app!
  • Ruota : blocca la rotazione corrente.
  • Notifiche push – Fornisce la possibilità di simulare messaggi push.
  • Abilita emulazione multi-touch: consente di simulare interazioni multi-touch con l’emulatore utilizzando clic con il tasto destro e clic con il tasto sinistro. Fare clic su questo pulsante fornirà indicazioni.

Pronto a saltare e giocare? Ti mostrerò come creare un’applicazione semplice e sottolineare i punti salienti dell’ambiente di sviluppo lungo il percorso. Usa questo come trampolino di lancio per la tua stessa sperimentazione.

Lo scopo di questa app di utilità è fornire conversioni per misurazioni comuni (da chilometri a miglia, da metri a piedi, ecc.) E conversioni di tempo attraverso fusi orari.

Creare l’applicazione

Fai clic sull’icona + nella barra degli strumenti in alto, sul lato sinistro. Questo è il modo in cui crei un nuovo progetto. Quando lo fai, vedrai il primo passaggio della procedura guidata del nuovo progetto dell’app.

Il primo passo è dare un nome al tuo progetto e decidere come vuoi generarlo. Intel fa un ottimo lavoro per fornire un avvio rapido nella creazione della tua applicazione. Puoi costruire un’interfaccia di navigazione standard, iniziare con una demo o utilizzare il loro modello di sviluppo di giochi.

Per questa applicazione immettere spaziotempo per Nome progetto e selezionare il pulsante di opzione in alto: utilizzare la procedura guidata App Starter per impostare pagine, navigazione e altro . Fare clic su Avanti.

Viene visualizzata la pagina Avvio dell’app iniziale. Fai clic su Avvia Avvio applicazioni .

App Starter appare. Questa schermata funziona molto come altri strumenti di sviluppo della GUI che potresti aver usato. Ti consente di creare nuove pagine, aggiungere controlli alla pagina e impostare le proprietà di controllo. Ma attenzione: ciò che stai creando è un modello per iniziare. Una volta generato il modello, non sarà possibile tornare a questa interfaccia per apportare modifiche. Invece aggiungerai e aggiornerai la tua interfaccia da HTML / CSS / JavaScript. La buona notizia, tuttavia, è che Intel XDK rende anche questo processo facile.

In alto al centro ci sono tre icone:

  • Anteprima – “Esegui” la tua app in modo da poterla testare, interagendo con essa come farebbe un utente.
  • Salva – Genera l’applicazione HTML / CSS / JavaScript in base a ciò che hai creato qui. Non fare clic finché non hai finito di creare la tua interfaccia.
  • Attiva / disattiva rotazione : consente di visualizzare le pagine create in orientamento orizzontale o verticale.

In alto a destra c’è un menu a discesa con etichetta CSS Theme. Fornisce l’opzione di numerosi aspetti che possono essere applicati alla tua applicazione.

Fai clic sul pulsante Hello World . Vengono visualizzati i pannelli Proprietà pulsante e Stili pulsanti.

Come ti aspetteresti, l’ ID e il titolo ti permettono di dare un nome al pulsante e specificare il testo che appare su di esso. Se si desidera utilizzare questo pulsante per passare a una nuova pagina, è possibile identificare la pagina in Link e specificare in Transizione un’animazione da utilizzare. La casella Stili pulsante fornisce un modo semplice per specificare l’aspetto del pulsante utilizzando la notazione CSS standard.

Sul lato sinistro, puoi vedere la scheda PAGINE insieme a diverse altre schede, che ti torneranno utili.

PAGINE elenca tutte le pagine che hai creato. È possibile fare clic su qualsiasi pagina nell’elenco per visualizzarne i controlli e modificarne le proprietà.

ELEMENTS fornisce opzioni di layout comuni, controlli dei moduli e la possibilità di aggiungere testo, ancore, immagini e video alla tua pagina utilizzando una familiare interfaccia drag-and-drop.

NAV ti consente di identificare il testo e le icone che appaiono nelle intestazioni, nei piè di pagina e negli elementi di navigazione laterale della tua pagina. Facendo clic su footer_0, ad esempio, il riquadro Proprietà viene sostituito a destra con il riquadro Impostazione piè di pagina.

Qui puoi vedere l’icona Home che appare per impostazione predefinita e puoi aggiungere facilmente qualsiasi altra opzione di navigazione che ti piace.

TREE fornisce un modo alternativo di lavorare con i controlli sulla pagina corrente. Sebbene sia sempre possibile fare clic su un controllo per cambiarne le proprietà, è anche possibile visualizzare i controlli qui e, quando l’interfaccia si complica, specificare in modo più preciso l’aspetto e il funzionamento dei controlli.

Tornando alla scheda PAGINE , noterai un’icona più che appare in alto. Cliccalo. Questo crea una nuova pagina. Le proprietà della pagina vengono visualizzate a destra.

Cambia il titolo nello spazio e l’ ID nello spazio . Il resto delle impostazioni va bene. Ora fai clic su Applica . Assicurati di fare sempre clic su Applica dopo aver apportato una modifica. Se non lo fai, le tue modifiche verranno scartate senza preavviso quando fai clic per modificare un’altra pagina!

L’elenco seguente elenca tutte le pagine di cui avrai bisogno per questa applicazione. Creare le pagine rimanenti utilizzando le proprietà specificate.

Titolo
ID
Principale PAGE_0
Spazio Spazio
Tempo Tempo
Di Di
Chilometri a miglia K2M
Metri ai piedi M2F
Ettari ad Acri H2A

Una volta create le pagine, sei pronto per aggiungere controlli. Fai clic per selezionare la pagina Principale . Fare clic all’interno della pagina per selezionare il pulsante Hello World . Fai clic sul pulsante Elimina nella parte inferiore del pannello Proprietà pulsante . Vedrai Sei sicuro di voler eliminare questo nodo? dialogo. Clicca OK . Il pulsante scomparirà.

Nota: sto usando il termine “pagina” qui, come fanno l’interfaccia Intel XDK e la documentazione, per fare riferimento alle varie schermate che appaiono una alla volta per l’utente. Questo non intende implicare che ognuno esisterà nel proprio file HTML separato. Infatti, una volta generata la tua app, vedrai che tutte queste “pagine” sono definite in un singolo index.html. Ciò semplifica la manutenzione.

Ora scegli la scheda ELEMENTS sulla sinistra. La pagina principale fornirà un elenco di opzioni per l’utente. Sotto LAYOUT, il secondo elemento è List . Trascina questo oggetto nella tua pagina principale al centro.

L’elenco includerà automaticamente due elementi.

Noterai che l’ Elenco delle proprietà ora appare sulla destra.

 

Confusamente, articolo 1 e 2 e sono identificati come articolo 0 e 1 qui. Non importa – cambierai comunque i nomi. Il testo per ciascuno mostra l’HTML che rappresenta questo elemento. Per impostazione predefinita, sono collegamenti ad altre pagine.

Cambia l’elemento 0 in modo che assomigli a questo.

<a href="#Space"> Spazio </a>

Cambia l’elemento 1 in questo modo.

<a href="#Time"> Tempo </a>

Non dimenticare di fare clic su Applica !

Ora torna alla scheda PAGINE a sinistra e fai clic per selezionare la pagina Spazio . Quindi fare clic sulla scheda ELEMENTS . Ci sono tre opzioni per la conversione, quindi questa sarà un’altra lista. Aggiungi l’elenco come hai fatto in Main . Aggiungi un terzo elemento all’elenco facendo clic sull’icona più in basso a sinistra nel riquadro Proprietà elenco . Imposta le proprietà come di seguito.

Articolo 0:

<a href=”#K2M”> Chilometri a miglia </a>

Articolo 1:

<a href="#M2F"> Metri a piedi </a>

Elemento 2:

<a href="#H2A"> Hectares to Acres </a>

Quando fai clic su Applica , verrà visualizzato il testo appropriato per gli elementi dell’elenco

Ritorna alla scheda PAGINE a sinistra. Tornerò su Time più tardi, per ora clic sulla pagina Chilometri a Miglia . Quindi fare clic sulla scheda ELEMENTS . Aggiungi i seguenti controlli in questo ordine:

  • Testo (nella sezione MEDIA )
  • Input (nella sezione FORMS )
  • Pulsante (di nuovo in FORMS )
  • Un altro testo

Impostare le proprietà come specificato di seguito. Lasciare eventuali proprietà non specificate con i loro valori predefiniti. Ricorda che devi premere Applica dopo aver impostato le proprietà per ciascun controllo! Se fai clic per selezionare un altro controllo senza premere Applica , le tue modifiche andranno perse.

Controllo
Proprietà
Valore
Testo Testo <p> Immettere la distanza in chilometri e fare clic su Converti in miglia. </ p>
Ingresso ID chilometri
Testo In chilometri
Etichetta Distanza
Pulsante ID ToMilesButton
Testo Converti in miglia
Testo Testo <span id = “K2MAnswer”> </ span>

 

Il risultato dovrebbe essere simile a questo:

Questo è tutto per la pagina Chilometri a miglia . E, in realtà, Meters to Feet e Hectares to Acres sono quasi identici. Segui la stessa procedura che hai fatto per Chilometri su Miglia e usa questi valori di proprietà per creare i controlli.

Metri ai piedi

Controllo
Proprietà
Valore
Testo Testo <p> Immettere la lunghezza in metri e fare clic su Converti in piedi. </ p>
Ingresso ID metri
Testo In metri
Etichetta Lunghezza
Pulsante ID ToFeetButton
Testo Converti in piedi
Testo Testo <span id = “M2FAnswer”> </ span>

 

Ettari ad Acri

Controllo Proprietà Valore
Testo Testo <p> Immetti l’area in ettari e fai clic su Converti in acri. </ p>
Ingresso ID ettari
Testo In ettari
Etichetta La zona
Pulsante ID ToAcresButton
Testo Converti in acri
Testo Testo <span id = “H2AAnswer”> </ span>

L’ultima pagina da completare è Time . In questo, l’utente può scoprire a che ora si trova in un fuso orario diverso. Per prima cosa entrano nel loro tempo e in un fuso orario. Quindi inseriscono il fuso orario in cui vogliono convertirsi. Aggiungi questi controlli, in ordine.

  • Testo
  • Ingresso
  • Seleziona (in FORMS )
  • Testo
  • Selezionare
  • Pulsante

Imposta queste proprietà.

Controllo Proprietà Valore
Testo Testo <p> Seleziona l’ora e il fuso orario da convertire da: </ p>
Ingresso ID Tempo
Testo 21:30
Etichetta Tempo
Selezionare ID TimeZoneFrom
Testo Fuso orario
Opzione 1 Testo Orientale
Opzione 1 Valore 1
Opzione 2 Testo Centrale
Opzione 2 Valore 2
Opzione 3 Testo Montagna
Opzione 3 Valore 3
Opzione 4 Testo Pacifico
Opzione 4 Valore 4
Testo Testo <p> Seleziona il fuso orario per la conversione in: </ p>
Selezionare ID TimeZoneTo
Testo Fuso orario
Opzione 1 Testo Orientale
Opzione 1 Valore 1
Opzione 2 Testo Centrale
Opzione 2 Valore 2
Opzione 3 Testo Montagna
Opzione 3 Valore 3
Opzione 4 Testo Pacifico
Opzione 4 Valore 4
Pulsante ID ToAcresButton
Testo ConvertTimeButton
Testo Testo <span id = “TimeAnswer”> </ span>

Hai finito! Fai clic sul pulsante Salva nella parte superiore centrale della pagina.

Dopo aver lavorato, Intel XDK ti riporta all’IDE, modificando la tua nuova applicazione. Oltre al motore di compilazione e alle API, Intel XDK offre un potente ambiente IDE ed emulazione per la creazione e il test delle applicazioni.

Come puoi vedere nell’emulatore, l’applicazione è in esecuzione e fornisce i pulsanti e la navigazione specificati nella procedura guidata. Giocaci. Ogni volta che modifichi la tua applicazione puoi venire qui all’emulatore per visualizzare i risultati.

Fare clic sul pulsante Attiva / disattiva emulatore / Modifica (quello arancione in alto a sinistra) ora per vedere l’editor e l’interfaccia di gestione dei file.

Quando vuoi tornare all’emulatore, fai semplicemente clic sulla stessa icona.

Attenzione: l’editor non salva automaticamente le modifiche quando passi all’emulatore. È necessario fare clic sul pulsante Salva nell’angolo in alto a sinistra della scheda dell’editor o premere Ctrl + S per salvare il file prima di passare. Inoltre, una volta entrato nell’emulatore, è necessario fare clic sul pulsante Ricarica app (appena sotto il pulsante arancione) per testare le modifiche più recenti.

Dai un’occhiata all’interfaccia dell’editor. Lungo la sinistra vedi una gerarchia di cartelle che mostra tutti i file che fanno parte della tua applicazione. Come puoi vedere, un certo numero di file sono inclusi automaticamente.

Il più importante in questa nuova applicazione è index.html . Se il file non viene visualizzato automaticamente, fai clic sul suo nome a sinistra e verrà visualizzato nell’editor come puoi vedere sopra.

Se non sei un fan della combinazione di colori, non preoccuparti: è facile da cambiare. Basta fare clic sul pulsante Opzioni nella barra degli strumenti per la finestra dell’editor index.html.

Qui puoi cambiare il tema (colori e font usati nell’editor) e impostare altre preferenze.

Ora diamo un’occhiata al codice.

Intel App Framework offre selettori CSS W3C (che funzionano in modo molto simile a jQuery) e un’interfaccia utente standardizzata che funziona perfettamente su Android, iOS e altre piattaforme.

Quindi cosa fornisce? Scorri fino al corpo della pagina, verso un div chiamato “contenuto”.

<div class = "panel" title = "Main" data-footer = "footer_0" data-nav = "nav_0" id = "page_0" style = "" selected = "selected" data-appbuilder-object = "page">
<ul class = "list" data-appbuilder-object = "list" data-position = "static">
   <Li>
      <a href="#Space"> Spazio </a>
   </ Li>
   <Li>
      <a href="#Time"> Tempo </a>
   </ Li>
</ Ul>
</ Div>

Questo è letteralmente tutto ciò che è necessario per creare la prima schermata dell’applicazione. Con questo si specifica il titolo dello schermo, del testo e dei pulsanti che l’utente utilizzerà per la navigazione.

Ma quali ancore vengono referenziati in quei link? Scorri verso il basso fino alle righe successive.

<div class = "panel" title = "Spazio" data-footer = "footer_0" data-nav = "nav_0" id = "Spazio" style = "" data-appbuilder-object = "pagina">
<ul class = "list" data-appbuilder-object = "list" data-position = "static" style = "z-index: 0;">
   <Li>
      <a href="#K2M"> Chilometri a miglia </a>
   </ Li>
   ...
</ Ul>
</ Div>
 
<div class = "panel" title = "Time" data-footer = "footer_0" data-nav = "nav_0" id = "Time" style = "" data-appbuilder-object = "pagina">
   <div class = "text_item" data-appbuilder-object = "text" data-position = "static">
   <P>
      Seleziona l'ora e il fuso orario da cui convertire:
   </ P>
   ...
   </ Div>
</ Div>

Ogni div definisce un’altra schermata nell’applicazione e può contenere qualsiasi contenuto e link che ti piace.

Finire l’app

L’XDK ha fornito un eccellente punto di partenza e finire questa app dovrebbe essere piuttosto semplice.

Innanzitutto, se decidi di aver bisogno di nuove pagine, puoi crearle semplicemente copiando una delle schermate esistenti (come Spazio) e cambiando l’ID e il titolo. I contenuti possono essere qualsiasi HTML5 valido. In questo caso, hai già creato tutte le pagine che ti servivano.

Ricorderai che hai creato i moduli, non hai detto all’XDK cosa volevi quando il pulsante del modulo è stato cliccato. Il primo passo è indicarli ad alcune funzioni JavaScript che puoi quindi scrivere.

Scorri il codice e cerca tutti i tag dei pulsanti del modulo. Sembreranno così.

<a class = "button" href = "#" style = "" data-appbuilder-object = "button" ...

Elimina l’attributo href = “#” e sostituiscilo con onclick = “xyz” dove xyz ha i seguenti valori.

Modulo
Pulsante valore onclick
K2M K2MConvert
M2F M2FConvert
H2A H2AConvert
H2A TimeConvert

 

Ora per codificare queste funzioni di conversione. Puoi scrivere il tuo codice in un file separato e inserirlo nella parte superiore (come si fa con le librerie) oppure puoi scrivere il tuo codice nella pagina. Per semplicità, ti suggerisco di scorrere fino al tag script nella parte superiore della pagina e aggiungere questo codice sotto l’altro codice.

        var K2MConvert = function () {
            var k = $ ("# chilometri"). val ()
            var m = (k * 0.621371) .toFixed (2);
            $ ("# K2MAnswer"). Testo (k + "chilometri =" + m + "miglia")
        }
        
 
        var M2FConvert = function () {
            var m = $ ("# metri"). val ()
            var f = (m * 3.28084) .toFixed (2);
            $ ("# M2FAnswer"). Text (m + "metri =" + f + "piedi")
        }
 
        var H2AConvert = function () {
            var h = $ ("# hectares"). val ()
            var a = (h * 2.47105) .toFixed (2);
            $ ("# H2AAnswer"). Text (h + "hectares =" + a + "acres")
        }
 
 

Come puoi vedere è facile fare riferimento ai controlli sulla tua pagina usando la sintassi jQuery. Per ogni funzione, recuperiamo semplicemente il valore inserito, lo moltiplichiamo in modo appropriato e visualizziamo i risultati.

Vai avanti e fai clic su Salva; eseguire l’applicazione nell’emulatore facendo clic sul pulsante arancione nell’angolo in alto a sinistra della pagina. Fai clic su Spazio e quindi prova ciascuno degli schermi.

L’ultima funzione è per la conversione del tempo.

      var TimeConvert = function () {
      var validTime = / ^ \ d {1,2}: \ d {2} $ /;
      var timeFrom = $ ("# timefrom"). val ()
      if (timeFrom == '' ||! timeFrom.match (validTime)) {
         $ ("# TimeAnswer"). Text ("Data non valida - reinserire")
         ritorno
      }
      var zoneFrom = $ ("# timezonefrom"). val ()
      var zoneTo = $ ("# timezoneto"). val ()
      var zoneDiff = zoneFrom - zoneTo
 
      // Copia le ore in una variabile data e
      // aggiungi l'offset del fuso orario
      var newTime = new Date ()
      newTime.setHours ((timeFrom.split (":")) [0]) // parte prima:
      newTime.setHours (newTime.getHours () + zoneDiff)
            
      var newTimeString = newTime.getHours () + ":" + (timeFrom.split (":")) [1]
            
      $ ("# TimeAnswer"). Text ("L'ora corrispondente è" + newTimeString)
   }

Salva ed esegui per provare la pagina Time .

Il codice usa un’espressione regolare per convalidare il tempo inserito e mostra un errore se non corrisponde o non ha inserito nulla. Una volta che siamo sicuri di avere un buon tempo, recuperiamo i valori del fuso orario selezionati. I valori per le zone vanno da 1 a 4. Quindi sottraendo il primo valore dal secondo ci dice il numero di ore che dobbiamo aggiungere alla data.

Quindi, per calcolare correttamente l’ora, viene creato un oggetto data e vengono impostate le ore dall’ora immessa. (Non è necessario impostare i minuti perché saranno uguali per qualsiasi fuso orario degli Stati Uniti continentali.) Quindi l’offset del fuso orario viene aggiunto alla data. La stringa da visualizzare viene costruita estraendo le ore aggiornate e concatenando i minuti originali.

Nota: questa implementazione può sembrare un po ‘imbarazzante, ma l’altra opzione era semplicemente aggiungere l’offset alle ore immesse e quindi controllare se la somma era fuori intervallo (superiore a 24 o negativo, ad esempio) e quindi correggerla . Questo approccio consente all’intelligenza incorporata nell’oggetto Date di farlo per noi.

Intel XDK brilla nella sua copertura multipiattaforma. Una volta completata l’applicazione, fai clic sul pulsante Crea per app store nella barra degli strumenti, quindi seleziona Carica e crea . Ora vedrai una pagina come questa.

La riga superiore mostra tutte le piattaforme supportate che puoi scegliere come target per creare un’applicazione nativa. Questo file eseguibile finale è adatto per il caricamento di app store in qualsiasi negozio che supporta tale piattaforma. La seconda riga mostra gli obiettivi della piattaforma basati sul web, incluse le app di Facebook e le app di Chrome.

Noterai che alcune opzioni hanno un pulsante che indica i problemi da risolvere. Di solito sono ritocchi o aggiunte relativamente minori che sono richiesti o consigliati per la distribuzione alla piattaforma data, come icone, schermate iniziali e certificati richiesti. Questo è un ottimo promemoria per aiutare a ottenere tutte le anatre di fila prima della distribuzione finale.

È possibile selezionare “Risolvi problemi” per accedere a una procedura guidata di creazione per la piattaforma selezionata. Le schermate che seguono ti terranno la mano durante l’intero processo, anche se non hai mai creato un’app prima.

Rolling Ahead, Full Steam!

Se sei entusiasta di questo ambiente e desideri saperne di più, Intel offre una serie di opzioni e tutte possono essere raggiunte da un unico hub centrale: l’App Learning Center.

http://developer.html5dev-software.intel.com

I video sono disponibili per le fasi del ciclo di sviluppo e in fondo è possibile accedere a un elenco di articoli su argomenti chiave, esercitazioni, forum e documentazione per tutte le API disponibili.

Oh e non perdere le cheat-sheets!

http://html5dev-software.intel.com/documentation/references/index.html

Divertiti!

Circa l’autore

Bill Hatfield è l’autore più venduto di numerosi libri per sviluppatori di software, tra cui ASP.NET For Dummies. È uno sviluppatore e addestratore di software Microsoft certificato e adora programmare e condividere nuove tecnologie con altri. Lavora dalla sua casa di Indianapolis, con sua moglie Melanie e due bambini pazzi, Bryce e Zoe.

 

Questo articolo è sponsorizzato da Intel, ma è stato scritto indipendentemente dall’autore.