Come sviluppare un'app per smartphone con WinJS

Sempre più produttivo e redditizio. Il mercato mondiale delle applicazioni sembra non conoscere ostacoli e, tanto gli sviluppatori per iOS, quanto i programmatori per Android, riescono ad avere ancora ottimi margini di guadagno. Non è un segreto che moltissimi enfant prodige dei linguaggi di programmazione siano improvvisamente riusciti a diventare milionari (se non miliardari) realizzando l'app giusta al momento giusto: Jan Koum e Brian Acton sono forse il caso più eclatante (i 19 miliardi sborsati da Facebook per WhatsApp restano un record imbattuto e, al momento, difficilmente battibile), ma dietro di loro si muove un'intera generazione di giovani sviluppatori speranzosi di fare il “colpo della vita”.

Senza competenze

Anche se la conoscenza dei linguaggi di programmazione potrebbe sembrare necessaria per chiunque voglia trasformare in realtà un'idea o un'intuizione avuta magari nottetempo, non è affatto così. Sfruttando librerie di programmazione open source si potrebbe essere in grado di sviluppare un'applicazione da zero senza bisogno di scrivere una singola riga di codice.

Con le librerie JavaScript di Microsoft WinJS, ad esempio, si potrebbero creare applicazioni HTML5 nel giro di poche ore senza dover necessariamente scrivere del codice: sarà sufficiente copiare e incollare i giusti moduli e il gioco è fatto. Non servirà molto tempo, né possedere una laurea in programmazione: sarà sufficiente seguire i passi (in alcuni casi davvero semplici) della breve guida che segue.

Come sviluppare un'app per smartphone con WinJS

• Assicurarsi di avere installato sul proprio computer una copia di Git (programma che aiuta a gestire in locale le librerie scaricate da GitHub) e Node.js

• Aprire il programma da riga di comando di Windows o Mac OS X (con Windows 7 sarà sufficiente aprire il menu Start e scrivere “cmd” nel campo di ricerca e premere il tasto “Invio” sulla tastiera; con Windows 8 si dovrà scrivere “cmd” o “prompt dei comandi” nel campo cerca della schermata principale; con OS X accedere alla cartella Utility all'interno di Applicazioni e lanciare il programma “Terminale”). Una volta aperto, si potrà creare una copia (o un clone) della repository di file e cartelle di WinJS presene negli archivi GitHub digitando il comando “git clone https://github.com/winjs/winjs.git”. Dovrebbe impiegare non più di qualche decina di secondi a scaricare la libreria e, appena terminato, ci si dovrebbe trovare di fronte a una situazione come questa

• Una volta che il processo è terminato e la linea di comando sarà “libera” digitare il comando “cd winjs”, così da portarsi all'interno della cartella dove sono presenti i file e le librerie da utilizzare nel corso dello sviluppo dell'applicazione. Se il comando non dovesse sortire alcun effetto o dovesse restituire qualche errore, digitare il comando “ls” per verificare che la cartella winjs faccia parte di quelle disponibili in memoria. Se così non dovesse essere, digitare il comando “cd..” per portarsi a un livello “gerarchico” superiore e digitare nuovamente il comando “ls”. Se nella lista farà la sua comparsa la cartella winjs, allora si potrà scrivere nuovamente il comando iniziale “cd winjs”

• Ora è arrivato il momento di installare Grunt, programma che permette di automatizzare alcune delle operazioni da compiere nei prossimi passaggi. Grunt, infatti, altro non è che un editor a riga di comando capace di compiere – automaticamente – molte azioni utili nello sviluppo di un'applicazione: dall'ottimizzare le immagini e la grafica scelte per l'interfaccia utente sino a validare e compilare il codice JavaScript e CSS. Per fare ciò, sarà necessario utilizzare il Node Package Manager, installato in precedenza assieme alla libreria di pacchetti Node.js. Aprire una nuova finestra del programma da riga di comando, assicurarsi di trovarsi nella directory principale (C:\ nel caso di Windows, se ci si dovesse trovare in quale subdirectory si dovrà utilizzare il comando “cd..” per risalire la gerarchia) e digitare “npm install -g grunt-cli” per installare tutto il necessario. Al termine del processo, dovremmo vedere qualcosa di simile

  Fastweb Mobile Full

  9,95€/mese

  Internet 200 GB e Minuti illimitati

  Spedizione SIM GRATIS
  

  Spedizione SIM GRATIS
  

  scopri

• Anche se Grunt è stato installato (la procedura è descritta nel passo 4), ciò non vuol dire che funzioni anche all'interno del clone locale di WinJS. Sarà necessario, infatti, installare l'editor anche all'interno della repository creata nel corso del passo 2. Digitare prima il comando “cd winjs” e, una volta dentro la cartella, il comando “npm install”. A questo punto il sistema dovrebbe installare Grunt all'interno della repository WinJS, ma sarà necessario qualche minuto in più rispetto a quanto impiegato precedentemente

• Digitando il comando “Grunt” dall'editor, tutti i file CSS e JavaScript scaricati nel corso dei passaggi precedenti, saranno spostati all'interno della cartella bin, così da non creare confusione con gli altri file CSS e JavaScript che si creeranno nel corso dello sviluppo dell'app

• Terminate queste operazioni preliminari sarò necessario aprire un editor di testo e creare tre file completamente vuoti, avendo l'accortezza di assegnare loro i nomi di “index.html”, “nomeapp.css” e “nomeapp.js”, dove nomeapp è il nome che si intende dare alla propria creatura. Per ragioni di semplicità e praticità, salvare i tre file (che saranno il cuore dell'applicazione stessa) direttamente sul desktop del computer

• A questo punto si potrà iniziare a spulciare la libreria WinJS alla ricerca dei moduli necessari per sviluppare l'applicazione HTML5 che si ha in mente. Aprire il portale WinJS e passare alla visualizzazione ListView e scorrere in basso sino alla finestra Datasource edits: all'interno del riquadro sono inseriti tutti gli elementi necessari per creare un'app per giocare a scarabeo. Copiare il codice presente nelle schede HTML, CSS e JS rispettivamente nei file index.html, nomeapp.css e nomeapp.js. Chiudere e salvare i file CSS e JS, mentre c'è ancora un po' di lavoro da fare sul file HMTL

• Il codice HTML copiato non è una vera e propria pagina, ma una “divisone” di una pagina. Necessario, quindi, aggiungere dei tag che permettano di trasformarla in ciò di cui si ha bisogno. Il primo tag da aggiungere in cima al documento

una sorta di “dichiarazione” sulla tipologia di file che si sta per creare; a chiusura del file va invece inserito il tag

, che determina il “limite inferiore” del file appena creato. Appena sotto il tag html (e appena sopra il tag di chiusura) deve essere inseriti i tag

che indicano l'inizio e la fine della pagina HMTL da visualizzare. Infine sarà necessario collegare i file CSS e JS al file HTML, inserendo il codice

• Prima di poter considerare terminato il proprio lavoro, sarà necessario richiamare alcune librerie CSS e JS presenti nella cartella “bin” creata nel corso del passo 6. Aprire la cartella e spostare le sottocartelle CSS e JS sul desktop: in questo modo saranno allo stesso “livello gerarchico” di index-html e non sarà necessario effettuare “strani” richiami da cartelle salvate chissà dove. Modificare la sezione Head del file index.html nel modo che segue:

Se tutto è filato liscio, cliccando su index.html si dovrebbe aprire l'applicazione HMTL5 appena creata.