Índice
Combinado com uma estrutura de interface com o usuário, como jQuery Mobile ou Dojo Mobile, isso permite um aplicativo na forma nativa, mas desenvolvido em HTML, CSS e Javascript. Isso implica que, se tivermos um aplicativo da web, podemos convertê-lo em um aplicativo nativo para Android, já que o Apache Cordova funcionará como um servidor da web embutido em nosso dispositivo móvel.Esta Api nos dá a possibilidade de construir aplicativos móveis que rodarão localmente no dispositivo móvel e serão baseados em Web design e desenvolvimento, então com Apache Cordova podemos acessar via Javascript as funcionalidades do dispositivo móvel como câmera, dados, conexões wi-fi ou redes, teclado ou som, geolocalização, nosso próprio banco de dados embutido e qualquer outra funcionalidade disponível.
É necessário ter Android SDK, Gerenciador de dispositivos Android Y Java jre instalado, apontando também os executáveis para as variáveis do sistema.
Para começar, devemos instalar node.js, que é um framework que permite criar um servidor que usa javascript como linguagem cliente e o Cordova é instalado usando o gerenciador de pacotes denominado NPM, que faz parte do Node.js.
A instalação será feita primeiro no Linux, acessaremos o terminal em modo root e baixaremos o arquivo node.js com o seguinte comando:
wget http://nodejs.org/dist/v0.10.34/node-v0.10.34-linux-x86.tar.gz
Descompacte e copie para outro diretório
sudo tar -C / usr / local --strip-components 1 -xzf node-v0.10.34-linux-x86.tar.gz
Nós instalamos os pacotes correspondentes
ls -l / usr / local / bin / node ls -l / usr / local / bin / npm
Em seguida, passamos para o instalador do Apache Cordova
sudo npm install -g cordova
Para verificar se ele foi instalado corretamente, podemos escrever no terminal cordova -v e ele retornará a versão do Apache Cordova instalada.
Após a instalação, podemos criar aplicativos com Cordova, para criar um aplicativo vamos para um diretório de projeto que temos e, a partir do terminal, escrevemos os comandos sugeridos:
A estrutura do comando será:
cordova criar diretório de projeto component.package.class
então, por exemplo, nosso aplicativo será:
cordova create misapp com.tutoriales.misapp MiApp01
Isso criará a estrutura do projeto e fará o download de todos os pacotes necessários e atualizados que utilizaremos em nosso aplicativo.
cordova emular androidPodemos ver como o diretório foi criado aplicação errada, dentro da estrutura da aplicação e aí podemos encontrar o seguinte conteúdo.
Na pasta plataformas Contém os arquivos necessários para que Cordova possa interagir com os diferentes dispositivos, aqui adicionaremos as plataformas que queremos testar nosso aplicativo.
Exemplo do terminal, vamos executar o seguinte comando para usar a plataforma Android
plataforma cordova adicionar android
O resultado será:
# / projects / misapp / www $ cordova platform add android Criando projeto android… Criando projeto Cordova para a plataforma Android: Caminho: plataformas / android Pacote: com.tutoriales.misapp Nome: MiApp01 Android target: android-19 Copiando arquivos de modelo… Projeto criado com sucesso.
Isso irá configurar um emulador válido para Androd versão 19 que é o Versão API 19 ou também Android 4.4 (KITKAT) ou seja, podemos emular qualquer dispositivo que execute esta versão ou inferior. Algumas plataformas suportadas são Amazon Fire OS, Android, BlackBerry, Firefox OS, iOS, Windows Phone, Neste tutorial, vamos nos concentrar no Android.
No livro de endereços www É onde a própria aplicação será desenvolvida, onde ficarão hospedados os arquivos HTML, CSS, imagens e Javascript bem como todos os recursos necessários para a nossa aplicação, lembrando que é uma página web que rodará nativamente dentro de um servidor e também um navegador da web integrado que será executado como um aplicativo nativo no Android.
Quando criamos nosso projeto dentro do diretório www, uma estrutura genérica do projeto será criada definido com o código necessário para executar um aplicativo simples do tipo "Olá mundo“Portanto, temos um exemplo ou modelo de um aplicativo executável para testar se ele funciona antes da programação, no entanto, para executá-lo devemos primeiro adicionar a plataforma ou plataformas, por exemplo, se quisermos testá-lo em dispositivos Android e iOS, nós use o seguinte comando:
Para Android
cordova construir AndroidPara ios
cordova construir iOS
Sempre que executarmos o comando dentro do diretório do aplicativo, ele saberá que este é o aplicativo a ser compilado. Uma vez compilado no diretório plataformas / plataformas / android / ant-build / ele irá gerar arquivos para nós.
CordovaApp-debug.apk
Qual será o arquivo apk instalável e executável em qualquer dispositivo Android. Para executá-lo, o diretório do aplicativo deve ter permissões de acesso total. Agora vamos executá-lo pela primeira vez com o emulador para isso que escrevemos no terminal.
cordova emular android
Agora podemos começar a criar nosso aplicativo editando o arquivo index.html encontrado no diretório www. O código é simples, o meta detecta o tipo de dispositivo, as janelas de visualização irão adaptar o conteúdo à resolução e ao tamanho da tela do dispositivo.
O resto do código é HTML5, o arquivo cordoba.js terá a configuração do servidor e o arquivo index.js será onde programaremos nossos scripts para dar interatividade à aplicação.
Miapp01Conectando ao dispositivo
Dispositivo está pronto
Vamos fazer algumas alterações com Html5 e CSS3 para testar e também testaremos outro dispositivo. Vamos criar um formulário com dois campos dentro da camada do aplicativoNome:
E-mail:
Procuramos a pasta css dentro do arquivo index.css e adicionaremos o seguinte código para estilizar o botão .btn {background: # 3498db; imagem de fundo: -webkit-linear-gradient (parte superior, # 3498db, # 2980b9); imagem de fundo: -moz-linear-gradient (superior, # 3498db, # 2980b9); imagem de fundo: -ms-linear-gradient (superior, # 3498db, # 2980b9); imagem de fundo: -o-linear-gradient (parte superior, # 3498db, # 2980b9); imagem de fundo: gradiente linear (para baixo, # 3498db, # 2980b9); -webkit-border-radius: 28; -moz-border-radius: 28; raio da borda: 28px; família da fonte: Arial; cor: #ffffff; tamanho da fonte: 20px; preenchimento: 10px 20px 10px 20px; decoração de texto: nenhum; } .btn: hover {background: # 3cb0fd; imagem de fundo: -webkit-linear-gradient (top, # 3cb0fd, # 3498db); imagem de fundo: -moz-linear-gradient (top, # 3cb0fd, # 3498db); imagem de fundo: -ms-linear-gradient (top, # 3cb0fd, # 3498db); imagem de fundo: -o-linear-gradient (top, # 3cb0fd, # 3498db); imagem de fundo: gradiente linear (para baixo, # 3cb0fd, # 3498db); decoração de texto: nenhum; }
Depois de fazer as modificações, salvamos os arquivos e executamos novamente com o comando cordova emulate android, anteriormente configuramos outro dispositivo no Gerenciador de dispositivos Android.
PROLONGAR
Até agora, vemos como criar aplicativos com HTML5, CSS3 e Javascript ou Jquery móvel para diferentes dispositivos móveis, independentemente de ser um telefone móvel ou uma TV com suporte para Android. Um aspecto muito importante a ter em mente é que todo o design deve ser considerado adaptável ou responsivo.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo
