Este guia de início rápido apresenta uma cadeia de ferramentas recomendadas para a criação de Open Web Apps, e descreve os requisitos específicos para a construção de aplicativos para o Firefox OS.
Se você estiver familiarizado com HTML, CSS e JavaScript, mas é novo na criação de aplicativos com uma arquitetura MVC, visite nosso guia de Arquitetura de Web App Moderna, que fornece orientações passo-a-passo sobre como criar um aplicativo com as ferramentas apresentadas aqui.
Existem muitas maneiras diferentes de construiir uma aplicação para web aberta. Com tantos frameworks, bibliotecas e opções de ferramentas para escolher, estreitar a melhor abordagem pode ser uma tarefa assustadora. Para ajudar com essa responsabilidade, a Mozilla publicou um conjunto de bibliotecas JavaScript e ferramentas recomendadas que você pode usar para escrever seu próximo aplicativo. Desde a criação do projeto à modelagem e implantação, esta cadeia de ferramentas irá ajudá-lo a criar rapidamente aplicativos web impressionantes em menos tempo.
A maioria das técnicas que descrevemos ao longo deste guia aplicam-se a abrir aplicativos web em geral, por isso são independentes de plataforma. Ao longo do caminho, nós também vamos apresentar-lhe algumas ferramentas e conceitos adicionais para a construção de aplicativos do Firefox OS. Firefox OS Apps são aplicativos web abertos que podem ser instalados no Firefox OS (conferindo algumas vantagens), mas são construídos usando tecnologias web padrões - para muito mais informações sobre o desenvolvimento de aplicativos para o Firefox OS, consulte Aplicativos instaláveis para o Firefox OS.
Nota: Se você estiver procurando por um guia de início rápido para a criação de aplicativos do Firefox OS, incluindo o que é necessário e como eles diferem de aplicativos da web abertas regulares (que estava neste URL), por favor consulte o nosso Guia essencial de aplicativos do Firefox OS.
Cadeia de ferramentas recomendadas da Mozilla
A cadeia de ferramentas recomendadas da Mozilla consiste em um framework MVC para organizar o código do seu aplicativo, uma ferramenta de linha de comando para lidar com tarefas repetitivas de desenvolvimento, e diversas bibliotecas JavaScript que tornam mais fácil de implementar características comuns de aplicativos. Nós vamos melhoraremos esta cadeia de ferramentas com o passar do tempo.
- O Framework: Ember.js
- Ember.js é um framework JavaScript do lado do cliente que ajudará você a organizar o código do seu aplicativo. Aplicações Ember fornecem uma arquitetura MVC (Modelo-Visão-Controlador) para seu aplicativo, fazendo-o mais flexível e mais fácil de iterar em como você constrói. À medida que percorremos este guia, você será introduzido aos conceitos fundamentais da arquitetura Ember e MVC.
- A Ferramentaria: Ember e Ember CLI
- Nós recomendamos o Ember como um bom framework de aplicativos, portanto, podemos tirar proveito da ferramenta de linha de comando Ember CLI para lidar com algumas das tarefas de desenvolvimento mais repetitivas e tediosas. Esta ferramenta de linha de comando irá ajudar a gerar modelos para a sua aplicação, e concatenar, construir e apoucar os seus arquivos para torná-los prontos para a produção.
- AS Bibliotecas
- Bibliotecas JavaScript farão funções difíceis do aplicativo mais fáceis de implementar, e te permite escrever um código mais limpo e legível. Algumas das bibliotecas que apresentaremos são:
- Handlebars para escrever modelos de aplicações.
- LocalForage para armazenar e gerenciar dados off-line.
Essa cadeia de ferramentas serve para mim?
A ênfase aqui deve ser em "recomendado": não estamos tentando promover um conjunto específico de ferramentas para qualquer outro motivo que não o pragmatismo. Nós não estamos tentando dizer que você não deve tentar outras ferramentas, ou que nossas escolhas são as melhores para todos. Se você já tem experiência em desenvolvimento de aplicativos web, você provavelmente já tem seus favoritos. Se, no entanto, você está apenas começando com a construção de aplicações complexas e modernas da web, está frustrado com o grande número de opções disponíveis, e quer apenas uma cadeia de ferramentas que funciona, estes guias são para você.
Conhecimento necessário
É necessário algum conhecimento em HTML, CSS, e JavaScript, mas nossa missão é acelerar o processo de desenvolvimento de um aplicativo para desenvolvedores com todas os níveis de habilidade. Para iniciantes, recomendamos a leitura de nosso guia Iniciando com a web antes de pular para o processo de desenvolvimento de aplicativos. MDN é uma boa fonte para aprender princípios de:
Além disso, enquanto você não precisa saber Ember, algum conhecimento prévio seria útil. Vamos explicar conceitos básicos de Ember, juntamente com exemplos de código mais adiante neste guia, mas a documentação mais completa pode ser encontrada em https://emberjs.com/.
Instalação
Para começar a usar a cadeia de ferramentas recomendadas da Mozilla, você precisa usar um terminal ou prompt de comando em sua determinada plataforma (Mac, Linux ou Windows) para instalar e usar Ember e Ember CLI:
- Você precisa ter o Git para algumas das funções do Ember.
- Ember CLI requer Node.js e Bower. Antes de avançar para os próximos passos, baixe e instale o Node.js e vá aqui para o Bower.
- Abra seu Terminal ou Prompt de Comando:
-
Instale o Ember CLI usando o gerenciador de pacotes node (NPM):
npm install -g ember-cli
-
Para confirmar o êxito da instalação, digite:
ember -v
Solucionando problemas
- Eu não sei onde está minha linha de comando/terminal!
- Todo sistema operacional tem uma ferramenta de linha de comando por padrão. Veja essa lista de instruções.
- Minhas permissões do NPM estão dando erro!
- Se você receber um erro sobre permissões e está num Linux, Mac OS X, ou outro derivado do Unix, você pode ter problemas com a propriedade de seu diretório .npm. Vamos adicionar algumas soluções sugeridas aqui em breve. Nós incentivamos as pessoas a não utilizar o comando
sudo
com o npm, já que os pacotes podem executar comandos arbitrários.
Próximos passos
Na próxima seção do início rápido, vamos usar a nossa ferramenta Ember CLI recém-instalada para gerar um esquelo da estrutura da aplicação para podermos começar a trabalhar com ela.
Junte-se à comunidade Web apps
- IRC: #apps (saiba mais)
- Outros canais IRC: #openwebapps, #webapi