Os aplicativos móveis estão surgindo em todos os lugares, começando com smartphones e tablets, até relógios inteligentes e, em breve, serão encontrados em outros wearables também. No entanto, desenvolver para cada plataforma móvel separada pode ser uma tarefa exaustiva, especialmente se seus recursos forem limitados ou se você for um único desenvolvedor em vez de um empresa de desenvolvimento de aplicativos móveis .
É aqui que se torna um desenvolvedor Apache Cordova bem versado pode ser útil ao fornecer uma maneira de desenvolver aplicativos móveis usando tecnologias da web padrão - HTML5, CSS3 e JavaScript.
Em 2009, uma startup chamada Nitobi criou o PhoneGap, uma API de código aberto para acessar recursos móveis nativos, com o objetivo de permitir que os desenvolvedores criem aplicativos móveis usando tecnologias da web padrão. Na visão de Nitobi, a maioria dos aplicativos móveis logo seria desenvolvida usando PhoneGap, mas os desenvolvedores ainda teriam a opção de escrever código nativo quando necessário, seja devido a problemas de desempenho ou falta de um método de acesso a hardware específico.
Não existe tal coisa, realmente. O que aconteceu foi que a Adobe adquiriu a Nitobi em 2011 e doou o núcleo de código aberto para a Apache Software Foundation, que o rebatizou de Apache Cordova. Uma analogia comum que você encontrará com frequência é que Cordova é para o PhoneGap o que o WebKit é para o Chrome ou Safari.
Obviamente, as diferenças entre Cordova e PhoneGap eram mínimas no início. Com tempo, Adobe PhoneGap desenvolveu seu próprio conjunto de recursos proprietários, enquanto Cordova era - e ainda é - apoiado pela comunidade de código aberto. Esta revisão e tutorial do Apache Cordova examinará o desenvolvimento do aplicativo Cordova em mais detalhes e, embora alguns deles possam se aplicar ao PhoneGap, isso não deve ser considerado um tutorial do PhoneGap, per se .
Em essência, o Cordova não tem limitações em relação aos aplicativos desenvolvidos nativamente. O que você obtém com o Cordova é simplesmente uma API JavaScript, que funciona como um wrapper para o código nativo e é consistente em todos os dispositivos. Você pode considerar o Cordova como um contêiner de aplicativo com uma visualização da web, que cobre toda a tela do dispositivo. A visualização da web usada pelo Cordova é a mesma usada pelo sistema operacional nativo. No iOS, este é o Objective-C UIWebView
ou um personalizado WKWebView
classe; no Android, é android.webkit.WebView
.
O Apache Cordova vem com um conjunto de plug-ins pré-desenvolvidos que fornecem acesso à câmera do dispositivo, GPS, sistema de arquivos, etc. Conforme os dispositivos móveis evoluem, adicionar suporte para hardware adicional é simplesmente uma questão de desenvolver novos plug-ins.
Finalmente, os aplicativos Cordova instalam assim como aplicativos nativos . Isso significa que construir seu código para iOS produzirá um arquivo IPA, para Android um arquivo APK e construir para Windows Phone produzirá um arquivo XAP. Se você colocar esforço suficiente no processo de desenvolvimento, seus usuários podem nem perceber que não estão usando um aplicativo nativo.
Existem dois caminhos básicos que você pode seguir ao desenvolver com o Cordova:
Geralmente, é recomendável começar com o fluxo de trabalho de desenvolvimento de plataforma cruzada, já que mudar para o desenvolvimento centrado na plataforma é bastante simples. No entanto, se você iniciar inicialmente com o fluxo de trabalho centrado na plataforma, não será capaz de alternar para o desenvolvimento de plataforma cruzada, pois a CLI substituirá suas personalizações assim que você executar o processo de construção.
Antes de instalar e executar qualquer coisa relacionada ao Cordova, você precisará instalar o SDK para cada plataforma para a qual pretende construir seu aplicativo. Vamos nos concentrar na plataforma Android neste artigo; no entanto, o processo envolvendo outras plataformas é semelhante.
Você deve baixar o Android SDK encontrado Aqui . Para Windows, o SDK vem como um instalador, enquanto para Linux e OSX vem como um arquivo que pode ser simplesmente extraído. Após extrair / instalar o pacote, você precisará adicionar o sdk/tools
e sdk/platform-tools
diretórios para seus PATH
variável. O PATH
variável é usada pelo Cordova para procurar os binários necessários para o processo de construção. Se você não tem o Java instalado, você deve ir em frente e instalar o JDK junto com o Ant. ANT_HOME
e JAVA_HOME
deve ser definido para as pastas bin do JDK e Ant e, após instalar o Android SDK, defina o ANDROID_HOME
variável para Android/Sdk
. Todos os locais nos três *_HOME
variáveis também devem estar em seu PATH
variável.
Depois de instalar o SDK android
comando ficará disponível em sua linha de comando. Execute-o para abrir o gerenciador do SDK e instalar as ferramentas mais recentes e a API Android. Você provavelmente precisaria Android SDK Tools, Android SDK Platform tools, Android SDK Build-tools, SDK Platform, imagens de sistema Intel x86 Atom de APIs do Google, fontes para Android SDK e Intel x86 Emulator Accelerator (instalador HAXM) . Depois disso, você poderá criar um emulador com android avd
.
Cordova CLI depende do Node.js e do cliente Git, então vá em frente, baixe e instale o Node de nodejs.org e Git de git-scm.com . Você usará o npm para instalar o Cordova CLI em si, bem como para instalar plug-ins adicionais, e o Cordova usará o git nos bastidores para baixar as dependências necessárias. Finalmente, corra
npm install -g cordova
… Para instalar o Cordova CLI globalmente (npm install cordova
não é suficiente por si só.)
Para resumir, estes são os pacotes de que você precisará:
E essas variáveis de ambiente precisarão ser atualizadas:
PATH
JAVA_HOME
ANT_HOME
ANDROID_HOME
Desde que tenha instalado o Cordova com sucesso, agora você deve ter acesso ao utilitário de linha de comando do Cordova. Abra seu terminal ou linha de comando e navegue até um diretório onde deseja criar seu primeiro projeto Cordova. Para inicializar um aplicativo, digite o seguinte comando:
cordova create toptal toptal.hello HelloApeeScape
A linha de comando consiste no nome do comando cordova
, seguido pelo subcomando create
. O subcomando é chamado com três parâmetros adicionais: A pasta onde o aplicativo será colocado, o namespace do aplicativo e seu nome de exibição. Isso inicializa o aplicativo em uma pasta com a seguinte estrutura:
toptal/ |-- hooks/ |-- platforms/ |-- plugins/ |-- www/ `-- config.xml
O www
pasta contém o núcleo do seu aplicativo. É aqui que você colocará o código do aplicativo, comum a todas as plataformas.
Embora o Cordova permita desenvolver facilmente um aplicativo para diferentes plataformas, às vezes é necessário adicionar personalizações. Ao desenvolver para várias plataformas, você não deseja modificar os arquivos de origem nos diversos platforms/[platform-name][assets]/www
diretórios, porque eles são substituídos regularmente com os de nível superior www
arquivos.
Neste ponto, você também pode abrir o config.xml
arquivo e altere os metadados de seu aplicativo, como autor e descrição.
Adicione sua primeira plataforma usando:
cordova platform add android
Se mudar de ideia mais tarde, você pode remover uma plataforma do processo de construção facilmente:
cordova platform rm android
Ao inspecionar o diretório de plataformas, você observará o android
pasta dentro dele. Para cada plataforma adicionada, o Cordova criará um novo diretório nas plataformas e duplicará o www
pasta dentro dele. Se, por exemplo, você deseja personalizar seu aplicativo para Android, pode modificar os arquivos em platforms/android/assets/www
e mudar para ferramentas shell específicas da plataforma.
No entanto, lembre-se de que, se você reconstruir seu aplicativo com a CLI (usada para desenvolvimento de plataforma cruzada), o Cordova substituirá as alterações feitas em cada plataforma, portanto, certifique-se de tê-las sob controle de versão ou especifique a plataforma alterações depois de terminar o desenvolvimento de plataforma cruzada. Como mencionamos anteriormente, mudar de plataforma cruzada para desenvolvimento específico de plataforma é fácil. Mover-se na outra direção não é.
Se você deseja continuar usando o fluxo de trabalho de plataforma cruzada e ainda fazer personalizações específicas da plataforma, você deve usar a pasta de mesclagens de nível superior. Do Cordova versão 3.5 em diante, esta pasta foi removida do modelo de aplicativo padrão, mas se você precisar, pode simplesmente criá-la junto com os outros diretórios de nível superior (hooks
, platforms
, plugins
e www
).
As personalizações específicas da plataforma são colocadas em merges/[platform-name]
e são aplicadas após os arquivos de origem no nível superior www
pasta. Dessa forma, você pode adicionar novos arquivos de origem para determinadas plataformas ou pode substituir todos os arquivos de origem de nível superior por arquivos específicos da plataforma. Veja a seguinte estrutura, por exemplo:
merges/ |-- wp8/ | `-- app.js |-- android/ | `-- android.js |-- www/ `-- app.js
Nesse caso, o arquivo de saída para Android conterá app.js
e android.js
arquivos, mas o arquivo de saída para Windows Phone 8 conterá apenas o app.js
que se encontra em merges/wp8
pasta, uma vez que os arquivos em merges/[platform]
sobrescrever os arquivos em www
.
O diretório de plug-ins contém informações para os plug-ins de cada plataforma. Neste ponto, você deve ter apenas o android.json
arquivo que deve ter a seguinte estrutura:
{ 'prepare_queue': { 'installed': [], 'uninstalled': [] }, 'config_munge': { 'files': {} }, 'installed_plugins': {}, 'dependent_plugins': {} }
Vamos construir o aplicativo e implantá-lo em um dispositivo Android. Você também pode usar o emulador, se quiser.
Cordova fornece várias etapas de CLI para criar e executar seus aplicativos: cordova prepare
, cordova compile
, cordova build
(que é um atalho para os dois anteriores), cordova emulate
e cordova run
(que incorpora build
e também pode executar o emulador). Isso não deve confundi-lo, porque na maioria dos casos você gostaria de construir e executar seu aplicativo no emulador:
cordova run --emulator
Se desejar, você pode conectar seu dispositivo por meio da porta USB, habilitar o modo de depuração USB e implantar seu primeiro aplicativo Apache Cordova diretamente em seu dispositivo, simplesmente executando:
em qual linguagem de programação o Linux é escrito
cordova run
Isso copiará todos os seus arquivos em platforms/*
e execute todas as tarefas necessárias.
Você pode limitar o escopo do processo de construção especificando o nome da plataforma para a qual deseja construir o aplicativo e / ou até mesmo o emulador específico, por exemplo:
cordova run android --emulator
ou
cordova run ios --emulator --target='iPhone-8-Plus'
Vamos criar um aplicativo tutorial simples para demonstrar o uso do Cordova e seus plug-ins. A demonstração completa pode ser encontrada em este repositório GitHub para que você possa baixá-lo e percorrer partes dele junto com este breve tutorial do Cordova.
Usaremos a configuração inicial que você criou e adicionaremos código adicional. Digamos que desejamos adicionar novos projetos a um banco de dados ApeeScape imaginário, bem como visualizar os existentes. Abra index.html e configure duas guias da seguinte maneira:
Hello ApeeScape
Observe que eu adicionei Bootstrap e jQuery Móvel como dependências. Esteja ciente de que soluções e estruturas muito melhores foram desenvolvidas para construir aplicativos híbridos modernos, mas como a maioria (senão todos) os desenvolvedores da web estão familiarizados com essas duas bibliotecas, faz sentido usá-las para um tutorial para iniciantes. Você pode baixar as folhas de estilo do GitHub ou usar a sua própria, se preferir.
Vamos passar para o index.js
arquivo e reduza-o ao seguinte:
var app = { // Application Constructor initialize: function() { if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) { document.addEventListener('deviceready', this.onDeviceReady, false); } else { this.onDeviceReady(); } }, onDeviceReady: function() { // We will init / bootstrap our application here }, }; app.initialize();
Lembre-se de que a arquitetura defendida para os aplicativos Cordova é a configuração de um aplicativo de página única (SPA). Dessa forma, todos os recursos são carregados apenas uma vez quando o aplicativo é iniciado e podem permanecer na visualização da Web enquanto o aplicativo estiver em execução. Além disso, com SPAs, o usuário não terá recarregamentos de página que não são simplesmente típicos de aplicativos nativos. Tendo isso em mente, vamos configurar um controlador simples para alternar entre as duas guias:
var Controller = function() { var controller = { self: null, initialize: function() { self = this; this.bindEvents(); self.renderSearchView(); }, bindEvents: function() { $('.tab-button').on('click', this.onTabClick); }, onTabClick: function(e) { e.preventDefault(); if ($(this).hasClass('active')) { return; } var tab = $(this).data('tab'); if (tab === '#add-tab') { self.renderPostView(); } else { self.renderSearchView(); } }, renderPostView: function() { $('.tab-button').removeClass('active'); $('#post-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); $('#tab-content').load('./views/post-project-view.html', function(data) { $('#tab-content').find('#post-project-form').on('submit', self.postProject); }); }, renderSearchView: function() { $('.tab-button').removeClass('active'); $('#search-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); var $projectTemplate = null; $('#tab-content').load('./views/search-project-view.html', function(data) { $projectTemplate = $('.project').remove(); // Load projects here }); } } controller.initialize(); return controller; }
O controlador tem dois métodos até agora, um para renderizar a visualização de pesquisa e outro para renderizar a visualização pós-projeto. Vamos inicializá-lo em nosso index.js
primeiro declarando-o no topo e construindo-o no método onDeviceReady:
// top of index.js var controller = null
// inside onDeviceReady method controller = new Controller();
Finalmente, adicione uma referência de script em index.html
acima da referência a index.js
. Você pode baixar as visualizações de Pesquisa e Postagem diretamente do GitHub. Como as visualizações parciais são lidas de um arquivo, alguns navegadores como o Chrome, ao tentar renderizar sua página, reclamarão de solicitações entre domínios.
A solução possível aqui seria executar um servidor estático local, por exemplo, usando o node-static
módulo npm. Além disso, aqui você pode começar a pensar em usar algum framework, como PhoneGap e / ou Ionic. Todos eles fornecem uma gama de ferramentas de desenvolvimento, incluindo emulação no navegador, recarregamento a quente e geração de código (scaffolding).
Por enquanto, vamos simplesmente implantar em um dispositivo Android executando o seguinte:
cordova run android
Neste ponto, seu aplicativo deve ter duas guias. A primeira guia permite que os projetos sejam pesquisados:
A segunda aba permite que novos projetos sejam publicados:
Tudo o que temos agora é um aplicativo da web clássico rodando dentro de uma visualização da web. Nós realmente não usamos nenhum dos recursos nativos, então vamos tentar fazer isso agora. Uma dúvida comum é como armazenar dados localmente no dispositivo ou, mais precisamente, que tipo de armazenamento usar. Existem várias maneiras de fazer:
LocalStorage é adequado para armazenar pequenas quantidades de dados, mas não será suficiente se você estiver criando um aplicativo com muitos dados, já que o espaço disponível varia de 3 a 10 MB. IndexedDB pode ser uma solução melhor para esse caso. O WebSQL está obsoleto e não é compatível com algumas plataformas. Por fim, o uso de serviços da web para buscar e modificar dados se encaixa bem no paradigma SPA, mas falha quando seu aplicativo fica offline. Técnicas de PWA junto com Service Workers recentemente entraram no mundo de Cordova para ajudar nisso.
Além disso, existem muitos plug-ins de terceiros adicionais que vêm para preencher as lacunas no núcleo do Cordova. O plugin de arquivo pode ser bastante útil, pois fornece acesso ao sistema de arquivos do dispositivo, permitindo que você crie e armazene arquivos. Por enquanto, vamos tentar o SQLitePlugin, que fornece um banco de dados SQLite local. Você pode adicioná-lo ao seu projeto executando:
cordova plugin add https://github.com/brodysoft/Cordova-SQLitePlugin
SQLitePlugin fornece uma API para o banco de dados SQLite do dispositivo e serve como um verdadeiro mecanismo de persistência. Podemos criar um serviço de armazenamento simples da seguinte maneira:
SQLiteStorageService = function () { var service = {}; var db = window.sqlitePlugin ? window.sqlitePlugin.openDatabase({name: 'demo.toptal', location: 'default'}) : window.openDatabase('demo.toptal', '1.0', 'DB para FactAV', 5000000); service.initialize = function() { // Initialize the database var deferred = $.Deferred(); db.transaction(function(tx) { tx.executeSql( 'CREATE TABLE IF NOT EXISTS projects ' + '(id integer primary key, name text, company text, description text, latitude real, longitude real)' ,[], function(tx, res) { tx.executeSql('DELETE FROM projects', [], function(tx, res) { deferred.resolve(service); }, function(tx, res) { deferred.reject('Error initializing database'); }); }, function(tx, res) { deferred.reject('Error initializing database'); }); }); return deferred.promise(); } service.getProjects = function() { // fetch projects } service.addProject = function(name, company, description, addLocation) { // add a new project } return service.initialize(); }
Você pode baixar o código para buscar e adicionar projetos do GitHub e colá-lo nos respectivos marcadores. Não se esqueça de adicionar SQLiteStorageService.js ao seu arquivo index.html acima do Controller.js e inicializá-lo em seu controlador modificando a função init do Controlador:
initialize: function() { self = this; new SQLiteStorageService().done(function(service) { self.storageService = service; self.bindEvents(); self.renderSearchView(); }).fail(function(error) { alert(error); }); }
Se você der uma olhada em service.addProject (), notará que ele faz uma chamada para o método navigator.geolocation.getCurrentPosition (). Cordova tem um plug-in de geolocalização que você pode usar para obter a localização atual do telefone, e você pode até usar o método navigator.geolocation.watchPosition () para receber atualizações quando a posição do usuário muda.
Finalmente, vamos adicionar os identificadores de evento do controlador para adicionar e buscar projetos do banco de dados:
renderPostView: function() { $('.tab-button').removeClass('active'); $('#post-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); $('#tab-content').load('./views/post-project-view.html', function(data) { $('#tab-content').find('#post-project-form').on('submit', self.postProject); }); }, postProject: function(e) { e.preventDefault(); var name = $('#project-name').val(); var description = $('#project-description').val(); var company = $('#company').val(); var addLocation = $('#include-location').is(':checked'); if (!name || !description || !company) { alert('Please fill in all fields'); return; } else { var result = self.storageService.addProject( name, company, description, addLocation); result.done(function() { alert('Project successfully added'); self.renderSearchView(); }).fail(function(error) { alert(error); }); } }, renderSearchView: function() { $('.tab-button').removeClass('active'); $('#search-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); var $projectTemplate = null; $('#tab-content').load('./views/search-project-view.html', function(data) { $('#addressSearch').on('click', function() { alert('Not implemented'); }); $projectTemplate = $('.project').remove(); var projects = self.storageService.getProjects().done(function(projects) { for(var idx in projects) { var $div = $projectTemplate.clone(); var project = projects[idx]; $div.find('.project-name').text(project.name); $div.find('.project-company').text(project.company); $div.find('.project-description').text(project.description); if (project.location) { var url = ' Click to open map '; $div.find('.project-location').html(url); } else { $div.find('.project-location').text('Not specified'); } $tab.append($div); } }).fail(function(error) { alert(error); }); }); }
Para adicionar o console e os plug-ins de diálogo, execute o seguinte:
cordova plugin add org.apache.cordova.dialogs cordova plugin add org.apache.cordova.console
O plug-in cordova.console o ajudará na depuração, habilitando o console.log()
função em emuladores.
Você pode depurar aplicativos Android facilmente por meio do depurador remoto do Chrome. Depois de conectar seu dispositivo, clique no menu suspenso no canto superior direito (abaixo do botão X), expanda Mais ferramentas e clique em Inspecionar dispositivos. Você deve ver seu dispositivo na lista e deve ser capaz de abrir seu console de depuração.
O Safari oferece a mesma funcionalidade para depurar aplicativos iOS executados em um dispositivo ou emulador conectado por USB. Basta habilitar as Ferramentas do desenvolvedor em Configurações do Safari> guia Avançado.
O plug-in cordova.dialogs permite notificações nativas. Uma prática comum é redefinir o windows.alert
método usando a API cordova.dialogs da seguinte maneira:
overrideBrowserAlert: function() { if (navigator.notification) { // Override default HTML alert with native dialog window.alert = function (message) { navigator.notification.alert( message, // message null, // callback 'ApeeScape', // title 'OK' // buttonName ); }; } }
O overrideBrowserAlert
função deve ser chamada dentro de deviceready
manipulador de eventos.
Agora você deve ser capaz de adicionar novos projetos e visualizar os existentes no banco de dados. Se você marcar a caixa de seleção “Incluir localização”, o dispositivo fará uma chamada para a API de geolocalização e adicionará sua localização atual ao projeto.
Vamos adicionar um toque final ao aplicativo, definindo um ícone e uma tela inicial. Adicione o seguinte ao seu config.xml
Arquivo:
www/img
Por fim, coloque uma imagem de logotipo em
|_+_|pasta.
Passamos pelas etapas básicas de desenvolvimento de aplicativos Apache Cordova e usamos nossa própria arquitetura JavaScript e Folha de estilo CSS . Este tutorial do Cordova foi uma tentativa de mostrar o potencial do Apache Cordova como um meio de desenvolver aplicativos móveis usando tecnologias familiares, reduzindo o tempo de desenvolvimento e o esforço necessário para construir vários aplicativos para diferentes plataformas.
No entanto, ao construir aplicativos que entrarão em produção, é recomendável que você use uma estrutura existente. Além de estruturar seu aplicativo em uma arquitetura predefinida, isso também pode fornecer um conjunto de componentes que ajudarão seu aplicativo a se aproximar da aparência nativa. Alguns frameworks dignos de nota são Iônico , Framework7 , Weex , chave catraca , Kendo UI e IU Onsen . Boa sorte!
Relacionado: Frameworks Cordova: Ionic vs. Framework7Apache Cordova é uma estrutura para a criação de aplicativos móveis de plataforma cruzada usando tecnologias da web padrão. Essencialmente, é um contêiner de aplicativo com uma visualização da web que cobre toda a tela do dispositivo.
Atualmente, PhoneGap se refere a um produto desenvolvido pela Adobe em cima do Apache Cordova. Originalmente, era a estrutura feita pela Nitobi antes da Adobe adquiri-la e abri-la como Apache Cordova.
WebView do Android e UIWebView do iOS são as classes que os respectivos sistemas operacionais usam para exibir páginas da web em tela inteira. Os desenvolvedores podem construir navegadores da web com eles ou, no caso do Apache Cordova, usá-los para exibir um aplicativo da web como se fosse um aplicativo nativo.
Os plug-ins do Apache Cordova permitem maior acesso aos recursos de plataforma cruzada. Podem ser serviços baseados em hardware, como geolocalização, ou funcionalidade puramente baseada em software, como acesso ao banco de dados SQLite fornecido pelo sistema operacional.