preloder

Criando seu primeiro aplicativo com Cordova usando apenas o Brackets (Parte 1)

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.

  1. Clique em File > Extension Manager
  2. Clique na aba AVALIABLE
  3. Localize o plugin Shell Brackets
  4. 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;

cordova create MeuPrimeiroApp org.apache.cordova.MeuPrimeiroApp

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

  1. No Brackets, clique no menu File > Open Folder
  2. 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á!

 

 

 

Deixe seu comentário