Share
Firefox OS è un intero sistema operativo mobile costruito attorno a tecnologie web aperte! Il sistema operativo è stato costruito da zero per consentire a HTML5 e Javascript di liberare tutto il potenziale dell'hardware del dispositivo. Continua a leggere per saperne di più su Firefox OS e su come puoi iniziare a portare le tue applicazioni web esistenti sulla piattaforma oggi!
Firefox OS è un sistema operativo mobile creato da zero da Mozilla. Si è evoluto da un repository GitHub vuoto in un sistema open source in piena regola in più di un anno, che da solo è abbastanza impressionante. Costruito dall'idea nuda al prodotto finale, spedito dalle società di tutto il mondo. Vediamo perché questo è così speciale e perché dovrebbe interessarti anche a te.
La cosa più importante su Firefox OS è la tecnologia utilizzata: è così appena la rete! Tutti gli sviluppatori front-end e i programmatori JavaScript possono ora creare facilmente applicazioni HTML5 direttamente per la piattaforma. Il Web mobile ora ha le tecnologie e l'accesso all'hardware che merita. Le API Web consentono di "parlare" direttamente all'hardware del dispositivo utilizzando JavaScript, rendendo possibile scattare foto, inviare messaggi o avviare chiamate.
Parliamoci chiaramente sul pubblico di destinazione: non è che Firefox OS combatta direttamente dispositivi di fascia alta con iOS e Android a bordo in paesi altamente sviluppati. L'obiettivo principale è fornire un'esperienza smartphone a coloro che normalmente non avrebbero la possibilità di acquistare un dispositivo del genere. I telefoni con Firefox OS saranno un'alternativa economica a coloro che vorrebbero passare dai feature phone e tuffarsi nel web utilizzando i browser moderni. C'è una grande richiesta per questo e Mozilla vuole colmare il divario!
È il "nuovo vecchio" ecosistema in quanto le tecnologie web sono già note per migliaia di programmatori JavaScript e sviluppatori front-end. Non devi imparare una nuova lingua o un nuovo ambiente di sviluppo. Tutto ciò che sai del web può essere utilizzato per creare incredibili applicazioni per Firefox OS. Portare il tuo gioco è molto semplice e richiede sforzi minimi per raggiungere.
In questo articolo ti guiderò attraverso l'intero processo dall'avere un semplice gioco HTML5 mobile, ottimizzandolo per il dispositivo Firefox OS e pubblicando il risultato nel Marketplace di Firefox - Userò il Capitano Rogers come esempio.
Ci sono due modi per testare il tuo gioco per Firefox OS - usando un simulatore di software o collegando il dispositivo reale. Entrambi sono utili e dovresti iniziare con il simulatore per vedere se il gioco funziona. Dopodiché, spingere il gioco sul dispositivo alla fine lo testerà in battaglia e ti aiuterà a sbarazzarti di tutti i bug. Quindi puoi concentrarti sul processo di pubblicazione.
C'è un modo per testare il tuo gioco o applicazione senza la necessità di avere un dispositivo reale nella tua mano. È il simulatore di Firefox OS e puoi semplicemente installarlo come plugin nel tuo browser Firefox. Non sarai in grado di provare i comandi touch, ma almeno puoi vedere se il gioco funziona e si comporta come dovrebbe. Usando il simulatore puoi anche spingere la tua applicazione direttamente sul dispositivo.
Se hai davvero bisogno del tuo dispositivo, puoi procurarlo da GeekSphone. Stanno fornendo due telefoni di anteprima per sviluppatori: Keon e Peak. Questi due dispositivi sono molto simili ai prodotti finali che verranno venduti in tutto il mondo. I primi dispositivi commerciali sono già stati annunciati: ZTE Open e Alcatel OneTouch Fire sono offerti da Movistar in Spagna a un prezzo basso di 69 Euro (nessun contratto, con scheda microSD da 4 GB e 30 Euro per le chiamate). Avanti sulla lista sono Polonia, Colombia e Venezuela con più paesi in arrivo.
Quando hai già un sistema operativo sul tuo dispositivo, sarebbe bello installarvi alcune app. È qui che entra in gioco il Marketplace di Firefox: lo store di Mozilla fornisce tutto ciò di cui hai bisogno. La differenza tra i negozi iOS o Android e il Marketplace di Firefox è che l'ultimo è aperto e gratuito. Ognuno può gestire il proprio marketplace, non si limita all'unico e unico posto per la distribuzione di app e giochi. Non è nemmeno necessario indirizzare le persone sul mercato stesso se si desidera che installino il gioco sul proprio dispositivo: esiste un'API per questo! Utilizzando l'API Open Web App puoi creare un semplice pulsante "installa questa app" utilizzando un pulsante HTML che chiama poche righe di JavaScript. Gli utenti finali saranno quindi in grado di installare il gioco direttamente sul proprio dispositivo.
Gli operatori mobili forniranno marketplace per i propri clienti con le app mirate appositamente per loro. Ciò darà loro anche l'opportunità di iniziare a guadagnare di nuovo e smettere di essere solo i fornitori di dati. È importante capire che tutti i giocatori nello spazio Firefox OS possono beneficiare del supporto del sistema.
C'è un enorme potenziale nel modo in cui le applicazioni web sono costruite: puoi cercare il contenuto dentro di loro senza la necessità di scaricarli. Poiché è solo HTML, CSS e JavaScript puoi cercare qualsiasi cosa a cui sei interessato e non sarai limitato al titolo o alla descrizione: è indicizzabile e ricercabile come qualsiasi altro sito web ora.
La cosa migliore è che puoi già aggiungere le tue app e i tuoi giochi: il Marketplace sta uscendo dalla fase beta e si apre ai clienti, ma era disponibile per gli sviluppatori già da tempo. Entrambe le parti hanno avuto il tempo di adattarsi all'ambiente e prepararsi alla piattaforma. Non c'è quasi nessuna concorrenza - ho trovato circa 500 giochi nel Marketplace. È difficile anche provare a confrontarlo con l'App Store della Apple dove puoi trovare centinaia di migliaia di app. Ora è il momento migliore per cogliere l'opportunità, il Marketplace di Firefox è in attesa di contenuti!
Come ho detto prima, ti mostrerò l'intero processo di conversione del tuo normale gioco HTML5 in quello pienamente funzionante ottimizzato per il dispositivo Firefox OS e disponibile gratuitamente nel Marketplace di Firefox. Il gioco Captain Rogers è stato realizzato usando ImpactJS ed è molto semplice: sei il coraggioso Capitano Rogers e devi volare attraverso un campo di asteroidi per sfuggire alla malvagia flotta di Kershan. È stato creato come una collaborazione tra Enclave Games (Andrzej Mazur - codifica) e Blackmoon Design (Robert Podgórski - grafica). L'obiettivo principale era quello di renderlo piccolo, semplice ma al tempo stesso funzionale e raffinato.
Ci sono molti modi per ottimizzare il tuo gioco per la piattaforma Firefox OS e molti di questi possono essere applicati anche ai normali giochi HTML5: dopotutto è la tecnologia web, giusto? Di seguito, vedrai alcune delle tecniche di base che velocizzeranno rapidamente le prestazioni, renderanno il gioco più flessibile o semplicemente miglioreranno l'aspetto.
Il modo più semplice per velocizzare il rendering della tela del gioco su Firefox OS è aggiungere il moz-opaco attribuiscilo ad esso:
Se la tua tela non è trasparente o non devi mostrare nulla dietro di essa, basta impostare questo attributo e migliorerà automaticamente i tempi di rendering.
Il ridimensionamento della tela è importante quando non si conosce la risoluzione del dispositivo di destinazione. Sembrerebbe strano se il gioco occupasse solo un terzo dello schermo, o peggio quando ne vedrai solo la metà. Questo metodo non è per ogni tipo di gioco: se vuoi preservare una pixel art devi gestire la scala in modo diverso, ma per la maggior parte dei giochi dovrebbe funzionare. Ecco il codice responsabile del ridimensionamento:
Accentsconagua
var scaleX = canvas.width / window.innerWidth; var scaleY = canvas.height / window.innerHeight; var scaleToFit = Math.min (scaleX, scaleY); stage.style.transformOrigin = "0 0"; stage.style.transform = "scale (" + scaleToFit + ")"; Ciò assicurerà che il tuo gioco stia riempiendo l'intero spazio disponibile, ma conserverà la scala in modo che il gioco non venga distorto. Sui dispositivi di grandi dimensioni, tuttavia, il gioco sarà un po 'sfocato, quindi ricorda di fare attenzione.
Se stai lavorando a un gioco di pixel art è molto importante avere dei pixel nitidi invece di quelli sfocati - disattivare la levigatura usando JavaScript e sei pronto per andare!
var context = canvas.getContext ('2d'); context.webkitImageSmoothingEnabled = false; context.mozImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; Grazie a questo avrai i pixel più nitidi possibili, in modo che i giocatori possano godere appieno della pixel art nel tuo gioco.
Ci sono molte altre tecniche da esplorare come usare la tela fuori schermo, il rendering di interi pixel, più tele per i livelli e altri trucchi interessanti - dai un'occhiata a questo articolo incredibilmente utile su Mozilla Hacks scritto da Louis Stowasser e Harald Kirschner. Alcune delle tecniche trattate in questo articolo sono utilizzate nel motore di gioco ImpactJS, quindi non devi nemmeno implementarlo da solo.
Esistono due tipi di applicazioni nel Marketplace: pacchetti e self hosted. Il primo tipo è solo un .cerniera lampo pacchetto contenente tutte le risorse che verranno caricate sul Marketplace. Il secondo tipo, self hosted, è un collegamento diretto al gioco che si ospita sul proprio server. Le app pacchettizzate possono ottenere un maggiore accesso all'hardware, dato che vengono consegnate da un server sicuro e conosciuto da Mozilla, mentre le app ospitate in proprio sono più facili da implementare e modificare.
Per entrambi i tipi di app il file più importante è il
manifest.webapp contenente tutte le informazioni necessarie. Un file manifest è solo un semplice oggetto JSON dal quale verranno forniti tutti i dati per le impostazioni iniziali di Firefox Marketplace:
"name": "My App", "description": "La mia descrizione va qui", "launch_path": "/", "icons": "128": "/img/icon-128.png", "sviluppatore": "nome": "Il tuo nome o organizzazione", "url": "http://your-homepage-here.org", "default_locale": "en"
Devi solo fornire informazioni di base come il nome dell'applicazione, la sua descrizione, fornire le icone da mostrare nel Marketplace, le informazioni di base su te stesso come il nome dello sviluppatore e l'URL dello sviluppatore e, infine, le impostazioni locali predefinite (cioè l'applicazione versione della lingua predefinita). Puoi convalidare il file manifest per assicurarti che sia privo di errori.
Le principali differenze tra le app in hosting e quelle in hosting sono le autorizzazioni: le app in pacchetto possono essere privilegiate o certificate. Quando è necessario accedere all'hardware del dispositivo come la fotocamera o l'elenco dei contatti, è necessario elencare tutto nella sezione delle autorizzazioni.
"permessi": "contatti": "descrizione": "Obbligatorio per completamento automatico", "accesso": "readcreate", "allarmi": "descrizione": "Necessario per pianificare le notifiche"
Le app privilegiate hanno accesso alle API Web che dispongono di più autorizzazioni per accedere ai dati hardware e utente sul dispositivo e sono più in alto nella gerarchia rispetto alle solite applicazioni Web. C'è anche il più alto livello chiamato app certificate che hanno il controllo su funzioni di sistema critiche come ad esempio il dialer predefinito - solo Mozilla e i partner forniscono questo tipo di app.
Quando non hai bisogno di accedere a WebAPI sul dispositivo e desideri avere aggiornamenti semplici e istantanei, puoi decidere di ospitare tu stesso il gioco. Ci sono alcune cose che devi tenere a mente per consegnare il tuo gioco senza problemi.
Memorizza nella cache tutti i tuoi file per consentire agli utenti di giocare offline e di risparmiare sul traffico sul tuo server. Non memorizzare nella cache il file manifest anche se questo potrebbe portare a problemi quando si desidera aggiornare il gioco. Il file manifest deve avere un'estensione .webapp e devono essere serviti dalla stessa origine. Il Tipo di contenuto deve essere impostato su application / x-web-app-manifest JSON +, Si consiglia la codifica UTF-8.
Quando usi Apache lascia cadere quella linea nel tuo .htaccess file:
AddType application / x-web-app-manifest + json .webapp
Su Nginix devi modificare il file mime.types file e aggiungi una linea simile:
types // ... application / x-web-app-manifest + json webapp;
Per testare la tua app puoi anche utilizzare GitHub Pages per l'hosting. Mozilla ha lavorato con GitHub per avere tutte le impostazioni in atto, ricorda solo di avere il nome file del file manifest che termina .webapp.
È ora di aggiungere il nostro gioco al marketplace in modo che le persone possano trovarlo facilmente su Firefox OS. Il nostro gioco è pronto per essere presentato al Marketplace di Firefox: vai all'Object Hub e accedi (o registrati) per ottenere l'accesso. Cerca il pulsante "Invia una nuova app": questo ti porterà al modulo di invio.
Avrai varie opzioni tra cui scegliere - se la tua app è gratuita o a pagamento, il gioco è ospitato o confezionato, avrai anche un elenco di piattaforme supportate. In fondo c'è un validatore manifest che assicurerà che il file manifest sia corretto al 100%. Un altro passaggio consiste nel riempire i dettagli come screenshot, altri media, informazioni di supporto e dettagli delle app. Fatto questo, il gioco è stato presentato!
Tutto quello che devi fare ora è aspettare che il tuo gioco venga accettato - non dovrebbe durare più di qualche giorno. Dopo di che il tuo gioco è pubblicato e disponibile per tutti da vedere e giocare!
Guardando attraverso il pannello di amministrazione noterai la pagina delle statistiche in cui troverai tutte le informazioni sulle installazioni. Altre opzioni includono la modifica di un gioco già inviato, la gestione dei membri del team, la compatibilità, i pagamenti, lo stato e le versioni. Tieni d'occhio le recensioni degli utenti poiché rappresentano un'ottima fonte di feedback!
Come puoi vedere, è molto semplice adattare il tuo gioco a Firefox OS e pubblicarlo nel Marketplace. La documentazione è pronta, tutte le informazioni necessarie sono lì ad aspettarti. È stato molto divertente lavorare su Captain Rogers pensando a Firefox OS. Sono molto curioso di come Enclave Games sarà percepito nel Marketplace rispetto ad altri sviluppatori. Se hai qualche opinione sul gioco stesso (o vuoi testarlo sul tuo dispositivo e dare un feedback), Firefox OS o il Marketplace si sentono liberi di discuterlo nei commenti!
Sei ai margini del mercato mobile in rapida crescita con un enorme potenziale in cui gli editori stanno imparando velocemente che HTML5 è la tecnologia del futuro. Ci sono infinite possibilità, devi solo cogliere l'occasione, sfruttare l'opportunità e superare la competizione!
Non si sa come funzionerà. Credo davvero nell'idea di avere un sistema operativo mobile HTML5, ma il futuro dipende dalla reazione del mercato insieme ai clienti. In un modo o nell'altro avremo tempi entusiasmanti per lo sviluppo mobile HTML5. Niente qui è uno sforzo inutile, poiché i giochi sono in esecuzione su tutte le piattaforme e ottengono un accesso speciale su Firefox OS. Anche se Firefox OS fallisce, il tuo lavoro è ancora compatibile con il web piuttosto che con una sola piattaforma.
