O Apache Cordova é um framework de desenvolvimento móvel de código aberto. Os desenvolvedores podem criar aplicações multiplataforma usando tecnologias web padrão — HTML5, CSS3 e JavaScript. A aplicação é executada dentro de um contêiner adaptado para cada plataforma, acessando recursos do dispositivo por meio de ligações de API compatíveis com os padrões, como sensores, dados locais e estado da rede.
Um único repositório de código compatível com várias plataformas, totalmente gratuito e de código aberto.
O Apache Cordova é uma boa escolha se você se encaixar em um dos cenários abaixo:
- Você é desenvolvedor móvel e quer disponibilizar uma mesma aplicação em diversas plataformas, sem precisar desenvolver separadamente para cada linguagem e cadeia de ferramentas;
- Você é desenvolvedor web e deseja empacotar uma aplicação web para publicação nas principais lojas de aplicativos;
- Você é desenvolvedor móvel que precisa combinar componentes nativos com uma WebView (janela de navegador dedicada), para permitir que códigos web acessem APIs de baixo nível do dispositivo; ou pretende criar plugins para estabelecer comunicação entre código nativo e a WebView.
Uma aplicação Cordova é formada por diversos componentes. A imagem abaixo apresenta uma visão geral de alto nível da arquitetura de aplicações Cordova.
WebView (Visor Web)
A WebView com suporte ao Cordova pode exibir toda a interface da aplicação. Em algumas plataformas, ela também pode ser integrada como componente em aplicações híbridas, funcionando ao lado de controles nativos.
Web App (Aplicação Web)
É aqui onde ficam seus códigos de negócio. A aplicação é implementada como um conjunto de páginas web, tendo como ponto de entrada padrão o arquivo local index.html. A página carrega os arquivos CSS, JavaScript, imagens, mídias e outros recursos necessários. Toda a aplicação roda dentro da WebView contida no contêiner nativo e, depois, é empacotada para distribuição nas lojas de aplicativos.
Dentro do contêiner existe um arquivo fundamental: o config.xml. Esse arquivo guarda as informações básicas da aplicação e define os parâmetros de execução, como a permissão para alternar entre orientação retrato e paisagem da tela.
Plugins
Os plugins são um componente essencial do ecossistema Cordova. Eles funcionam como uma ponte para permitir a comunicação entre o Cordova e o código nativo, além de encapsular APIs padrão dos dispositivos, possibilitando ao JavaScript chamar rotinas nativas.
A equipe oficial do Apache Cordova mantém um conjunto de plugins centrais que disponibilizam interfaces para acessar funções básicas do dispositivo: estado da bateria, câmera, lista de contatos e muito mais.
Além dos plugins centrais oficiais, existem muitos plugins de terceiros que implementam funcionalidades extras nem sempre compatíveis com todas as plataformas. Você pode encontrar plugins Cordova por meio de plataformas de busca ou pelo npm; também é possível criar seus próprios plugins seguindo o Guia de Desenvolvimento de Plugins. Um caso comum: estabelecer comunicação entre o Cordova e componentes nativos personalizados.
Aviso: ao criar um novo projeto Cordova, nenhum plugin vem instalado por padrão, essa é a regra das versões recentes. Todos os plugins, sejam centrais ou de terceiros, devem ser instalados manualmente de forma explícita.
O Cordova não oferece controles de interface nem frameworks frontend MV. Ele apenas fornece um ambiente de execução para os códigos web. Se você precisar de componentes visuais ou uma arquitetura frontend, terá que escolher e integrar um framework ao seu projeto.
Dois fluxos de desenvolvimento
O Cordova disponibiliza duas formas principais de trabalho para montar aplicações móveis. Em muitos casos, ambos conseguem atingir o objetivo, mas cada um tem suas vantagens:
Fluxo multiplataforma (Ferramenta de linha de comando CLI)
Ideal para projetos com muitas plataformas alvo e pouca necessidade de ajustes específicos para cada sistema. A ferramenta principal é a cordova CLI. A CLI é uma ferramenta de alto nível capaz de montar projetos para várias plataformas de uma vez, ocultando os detalhes dos scripts internos: ela copia os recursos web compartilhados para as pastas de cada plataforma, configura automaticamente os ambientes, executa os scripts de compilação para gerar pacotes instaláveis e conta com uma interface de linha de comando unificada para gerenciar plugins.
Fluxo específico por plataforma
Indicado para desenvolvimento focado em uma única plataforma, quando são necessárias alterações profundas nos arquivos do projeto de baixo nível.
Cenário típico: combinar componentes nativos customizados com a WebView do Cordova dentro de uma aplicação.
Escolha esse fluxo se precisar editar diretamente os arquivos do projeto dentro do SDK da plataforma.
Esse fluxo baseia-se nos scripts de baixo nível exclusivos de cada plataforma, com o auxílio da ferramenta independente Plugman para gerenciar plugins. Embora também sirva para criar aplicações multiplataforma, o custo é maior: não há uma ferramenta de alto nível para gerenciar tudo de forma unificada, cada plataforma precisa ser compilada separadamente e manter suas próprias configurações de plugins.
Uma vez que você troca o modo CLI para o modo SDK da plataforma + scripts de baixo nível, não há volta.
A CLI mantém uma fonte de código compartilhada entre plataformas e sobrescreve os arquivos nas pastas das plataformas em cada compilação. Se quiser preservar alterações feitas nos arquivos da pasta da plataforma, é obrigatório mudar para o modo de scripts de baixo nível. Nesse modo, o sistema deixa de ler o código web compartilhado e passa a usar diretamente os arquivos independentes da pasta da plataforma.
Instalando o Cordova
A forma de instalação depende do fluxo de desenvolvimento escolhido:
Vamos usar como exemplo o fluxo multiplataforma via CLI.
A ferramenta de linha de comando Cordova (CLI) é distribuída como pacote npm.
Siga os passos abaixo para instalar a cordova CLI:
- Baixe e instale o Node.js. Após a instalação, você conseguirá executar os comandos
nodeenpmdiretamente no terminal. - (Opcional) Se ainda não tiver o Git instalado, baixe e instale o cliente Git. Depois da instalação, você conseguirá rodar o comando
gitno prompt de comando (terminal). A CLI do Cordova e o npm utilizam o git para baixar recursos a partir de repositórios quando necessário. - Use a ferramenta npm inclusa no Node.js para instalar o módulo cordova; o npm fará o download automaticamente.
Instalar o nodejs
Instalar o Node.js é simples: baixe o arquivo msi (para sistemas Windows) e execute clicando duas vezes, basta seguir os passos padrão do assistente. Ao terminar a instalação
Abra o terminal CMD para verificar se a instalação funcionou.
Digite os dois comandos abaixo. A instalação só está correta se ambos retornarem um número de versão (o resultado deve mostrar uma versão, como na imagem abaixo)
node -v
npm -v
Depois de instalar o Node.js com sucesso, vamos instalar o cordova
Sistemas macOS / Linux:
npm install -g cordovaUsuários de macOS e Linux: se quiser instalar a ferramenta em pastas com restrição de permissão, como /usr/local/share, talvez seja necessário adicionar sudo ao comando npm.
Mas se você usar gerenciadores de versão como nvm / nave, ou se a pasta atual tiver permissão de gravação, não precisa usar o sudo.
Além disso, recomenda-se evitar usar o npm com sudo para prevenir problemas de permissão e falhas na instalação de pacotes.
Prefira gerenciar o Node.js e o npm com o nvm (Node Version Manager) ou nave; dessa forma, quase nunca será necessário usar sudo ao instalar pacotes.
Sistema Windows:
C:\>npm install -g cordovaO parâmetro -g significa instalação global do cordova. Sem esse parâmetro, o pacote só será instalado dentro da subpasta node_modules do diretório atual.
Ao concluir a instalação, execute apenas o comando cordova (sem parâmetros) no terminal. Se as informações de ajuda forem exibidas normalmente, a instalação deu certo.
No processo de instalação, aparecerá a mensagem “added 217 packages in 14s”
Verificar se a instalação foi concluída
cordova -vSe um número de versão for mostrado normalmente (ex: 13.0.0), tudo está pronto para uso.
Requisitos do sistema e suporte de versões
| Versão da CLI Cordova | Versão mínima suportada do Node.js |
|---|---|
| 13.x | >=20.17.0 |
| 12.x | >=16.13.0 |
| 11.x | >=12.0.0 |
| 10.x | >=10.0.0 |
| 9.x | >=6.0.0 |
Agora que a instalação está concluída, podemos começar a estudar o cordova propriamente dito.
Apresentação e instalação