Neste tutorial vou usar apenas o editor Brackets para criar o aplicativo a nada mais… nada de PhoneGap, Intel XDK, Atom, Visual Studio ou Android Studio, nada disso.
A ideia aqui é usar o mínimo de ferramentas possíveis para resolver os mesmos problemas, então, mãos na massa.
Preparando seu computador para desenvolver para mobile
Instalando o NodeJS e NPM para criar seu primeiro aplicativo
Para facilitar a criação de aplicativos vamos instalar o NPM (Node Package Manager) em nossos computadores. NPM é gerenciador de pacotes que vem junto com o Node.JS e facilita muuuuito a vida de qualquer desenvolvedor.
Faça o download do NodeJS aqui Escolha a opção Windows Installer (.msi) e verifique também se a versão do seu sistema é 32 ou 64 bits. Não é necessária nenhuma ação sua após a instalação.
Preparando seu Brackets
Se você é meu aluno provavelmente já foi evangelizado no uso deste editor e já deve ter ele instalado em seu computador, mas caso não tenha; faça o download aqui.
Se você já tem o Brackets instalado, verifique então se existem atualizações. É importante sempre manter seu editor atualizado. Clique no menu Help > Check for Updates
Agora vamos criar nosso primeiro App.
A extensão Shell Brackets
Execute comandos do prompt diretamente do Brackets
Vamos instalar o plugin que vai criar toda a mágica.
Clique em File > Extension Manager
Clique na aba AVALIABLE
Localize o plugin Shell Brackets
Inicie a instalação.
Após a instalação o plugin ficará disponível na barra direita do Brackets.
Instalando e atualizando o Apache Cordova
Acesso nativo aos recursos do seu dispositivo Android e iOS
Como já vimos, o Apache Cordova permite que você acesse os recursos nativos dos dispositivos móveis, como GPS, lista de contatos, Internet, Câmera, Gravador de áudio, arquivos, etc…
Vamos testar o Shell Brackets. Clique no ícone da extensão como mostrada na imagem acima, um prompt será exibido na parte inferior da tela. Um prompt aguarda o seu comando, então digite o comando
npm install -g cordova
Não se assuste, a instalação é demorada mesmo!!!!
Importante: Você não precisa e nem deve instalar o Cordova sempre que for iniciar um novo aplicativo. Caso já tenha o Cordova instalado, recomendo que execute o comando npm update -g cordova
Criando o primeiro aplicativo com Cordova
Muito fácil e rápido
Com o Cordova instalado, temos agora que definir um local para o nosso Aplicativo. Irei criar meu aplicativo dentro da pasta Documentos. Para isso podemos usar o comando
cd c:\users\nomedousuariodoWindows\Documents
Para criar nosso aplicativo dentro da pasta Documentos, usamos o comando;
Obviamente você poderá substituir o texto MeuPrimeiroApp por outro qualquer.
O Cordova irá criar uma pasta chamada MeuPrimeiroApp, devemos acessá-la, digite;
cd MeuPrimeiroApp
Você também poderá ver no explorar de arquivos que o comando acima criou uma estrutura de arquivos para o seu aplicativo.
Adicionando a pasta do aplicativo no Brackets.
Organização e produtividade.
A pasta que iremos salvar nossos arquivos HTML, CSS e JS é a pasta www. Adicione este pasta ao Brackets
No Brackets, clique no menu File > Open Folder
Localize a pasta www criada pelo Cordova.
Pronto! Agora podemos nos organizar melhor. Perceba que já existe um arquivo index.html criado. Este arquivo é o template padrão do Cordova e iremos utilizar ele para criar as páginas de nosso aplicativo.
Aplicativos para Android e iOS
Aplicações híbridas e cross-platftorm
Com a aplicação criada, vamos executar mais dois comandinhos mágicos. Se atente que estes comandos devem ser executados dentro da pasta do seu projeto, ou seja, não esqueça de executar um cd MeuPrimeiroApp antes conforme já explicado acima.
cordova platform add android
e depois execute o comando
cordova platform add ios
Instalando o Emulador
Testando o aplicativo em vários dispositivos no Ripple Emulator.
Vamos pegar emprestado o emulador do PhoneGap, o Ripple Emulator. Através dele poderemos testar nossas aplicações em vários dispositivos diferentes.
Para instalar o Ripple Emulator, execute o comando;
npm install -g ripple-emulator
Executando seu primeiro aplicativo
Como emular aplicativos Cordova
Agora acesse a pasta www, use o comando
cd www
e para executar o emulador use o comando
ripple emulate
O ripple será executado no seu navegador padrão. Recomendo que deixe o Google Chrome o Firefox como navegador padrão. O ripple sempre irá executar o arquivo index.html, conforme mostra a imagem abaixo a tela inicial é exatamente o arquivo index.html que se encontra na pasta www.
Editando e criando
Dando vida ao seu aplicativo.
Agora basta editar o arquivo index.html e criar novos arquivos.. Obviamente é interessante que escolha algum framework de estilização para o seu aplicativo.
Na parte 2 deste artigo veremos como criar um aplicativo usando o Framework 7, até lá!
Anderson Oliveira é desenvolvedor, escritor e docente no CEETPS - Centro Estadual de Educação Tecnologia de São Paulo. Atualmente trabalha na Administração Central do CPS e leciona aulas de programação na Etec Prof. Carmine Biagio Tundisi de Atibaia.
