Tutorial do Apache Cordova: Desenvolvendo aplicativos móveis com o Cordova

Os aplicativos móveis estão surgindo em todos os lugares, começando com smartphones e tablets, relógios inteligentes e em breve também serão encontrados em outros dispositivos vestíveis. 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 uma empresa de desenvolvimento de aplicativos móveis.

É aqui que se tornar um desenvolvedor Apache Cordova bem versado pode ser útil, fornecendo uma maneira de desenvolver aplicativos móveis usando tecnologias padrão da Web — 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 padrão da web. 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 por problemas de desempenho ou falta de um método de acesso a hardware específico.

Cordova PhoneGap?

Não existe isso, 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 renomeou como Apache Cordova. Uma analogia comum que você encontrará com frequência é que o Cordova é para o PhoneGap o que o WebKit é para o Chrome ou o Safari.

Obviamente, as diferenças entre Cordova e PhoneGap eram mínimas no início. Com o tempo, o Adobe PhoneGap desenvolveu seu próprio conjunto de recursos proprietários, enquanto o Cordova era – e ainda é – suportado pela comunidade de código aberto. Esta revisão e tutorial do Apache Cordova examinará o desenvolvimento do aplicativo Cordova com mais detalhes e, embora alguns deles possam se aplicar ao PhoneGap, isso não deve ser considerado um tutorial do PhoneGap por si só .

Recursos do Apache Cordova

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 serve como um wrapper para o código nativo e é consistente em todos os dispositivos. Você pode considerar o Cordova como um contêiner de aplicativos com uma visualização da web, que cobre toda a tela do dispositivo. A visualização da Web usada pelo Cordova é a mesma visualização da Web usada pelo sistema operacional nativo. No iOS, este é o padrão Objective-C UIWebView ou uma classe WKWebView personalizada; no Android, este é android.webkit.WebView .

O Apache Cordova vem com um conjunto de plugins pré-desenvolvidos que fornecem acesso à câmera do dispositivo, GPS, sistema de arquivos, etc. À medida que os dispositivos móveis evoluem, adicionar suporte para hardware adicional é simplesmente uma questão de desenvolver novos plugins.

Por fim, os aplicativos Cordova são instalados da mesma forma que os aplicativos nativos. Isso significa que compilar seu código para iOS produzirá um arquivo IPA, para Android um arquivo APK e compilar para Windows Phone produzirá um arquivo XAP. Se você se esforçar o suficiente no processo de desenvolvimento, seus usuários podem nem perceber que não estão usando um aplicativo nativo.

Fluxos de trabalho de desenvolvimento do Apache Cordova

Existem dois caminhos básicos que você pode seguir ao desenvolver com o Cordova:

• Quando sua intenção é implantar um aplicativo no maior número de plataformas possível, com pouco ou nenhum desenvolvimento específico de plataforma, você deve usar o fluxo de trabalho multiplataforma. A principal ferramenta que suporta esse fluxo de trabalho é a Interface de Linha de Comando (CLI) do Cordova, que serve como uma abstração de nível superior para configurar e construir seu aplicativo para diferentes plataformas. Este é o caminho de desenvolvimento mais comumente usado.
• Se você planeja desenvolver seu aplicativo com uma plataforma específica em mente, deve usar o fluxo de trabalho centrado na plataforma. Dessa forma, você poderá ajustar e modificar seu código em um nível mais baixo, misturando componentes nativos com componentes do Cordova. Mesmo que você possa usar essa abordagem para desenvolvimento multiplataforma, o processo será mais longo e tedioso.

Geralmente, é recomendável começar com o fluxo de trabalho de desenvolvimento multiplataforma, pois 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 poderá alternar para o desenvolvimento multiplataforma, pois a CLI substituirá suas personalizações assim que você executar o processo de compilação.

Pré-requisitos e instalação do Cordova

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 os diretórios sdk/tools e sdk/platform-tools à sua variável PATH . A variável PATH é usada pelo Cordova para procurar os binários necessários para o processo de compilaçã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 devem ser configurados para as pastas bin do JDK e Ant, e após instalar o Android SDK, defina a variável ANDROID_HOME para Android/Sdk . Todos os locais nas três variáveis *_HOME também devem estar em sua variável PATH .

Depois de instalar o comando SDK android 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 do Android. Você provavelmente precisaria do Android SDK Tools, Android SDK Platform tools, Android SDK Build-tools, SDK Platform, APIs do Google Intel x86 Atom System Image, Sources for Android SDK e Intel x86 Emulator Accelerator (instalador do HAXM) . Depois disso você poderá criar um emulador com android avd .

A CLI do Cordova depende do Node.js e do cliente Git, então vá em frente e baixe e instale o Node de nodejs.org e o Git de git-scm.com. Você usará o npm para instalar a própria CLI do Cordova, bem como para instalar plugins adicionais, e o Cordova usará o git nos bastidores para baixar as dependências necessárias. Por fim, 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 que você precisará:

• Java
• Formiga
• SDK do Android
• NodeJS
• Git

E essas variáveis ​​de ambiente precisarão ser atualizadas:

• PATH
• JAVA_HOME
• ANT_HOME
• ANDROID_HOME

Inicializando um aplicativo

Desde que você 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 você gostaria de criar seu primeiro projeto Cordova. Para inicializar um aplicativo, digite o seguinte comando:

 cordova create toptal toptal.hello HelloToptal

A linha de comando consiste no nome do comando cordova , seguido do 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

A pasta www contém o núcleo do seu aplicativo. É aqui que você colocará o código do aplicativo que é comum para todas as plataformas.

Embora o Cordova permita desenvolver facilmente um aplicativo para diferentes plataformas, às vezes você precisa adicionar personalizações. Ao desenvolver para várias plataformas, você não deseja modificar os arquivos de origem nos vários diretórios platforms/[platform-name][assets]/www , porque eles são substituídos regularmente pelos arquivos www de nível superior.

Nesse ponto, você também pode abrir o arquivo config.xml e alterar os metadados do seu aplicativo, como autor e descrição.

Adicione sua primeira plataforma usando:

 cordova platform add android

Se você mudar de ideia mais tarde, poderá remover uma plataforma do processo de compilação facilmente:

 cordova platform rm android

Ao inspecionar o diretório de plataformas, você notará a pasta android dentro dele. Para cada plataforma adicionada, o Cordova criará um novo diretório em plataformas e duplicará a pasta www dentro dele. Se, por exemplo, você deseja personalizar seu aplicativo para Android, você pode modificar os arquivos em platforms/android/assets/www e alternar para ferramentas shell específicas da plataforma.

No entanto, lembre-se de que, se você reconstruir seu aplicativo com a CLI (usada para desenvolvimento multiplataforma), o Cordova substituirá as alterações feitas para cada plataforma, portanto, certifique-se de tê-las sob controle de versão ou faça alterações específicas da plataforma alterações depois de concluir o desenvolvimento multiplataforma. Como mencionamos anteriormente, é fácil passar do desenvolvimento multiplataforma para o desenvolvimento específico da plataforma. Mover-se na outra direção não é.

Se você quiser continuar usando o fluxo de trabalho multiplataforma e ainda fazer personalizações específicas da plataforma, use a pasta de mesclagem de nível superior. A partir da versão 3.5 do Cordova, essa pasta foi removida do modelo de aplicativo padrão, mas se você precisar, basta 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 na pasta www de nível superior. Dessa forma, você pode adicionar novos arquivos de origem para determinadas plataformas ou substituir arquivos de origem de nível superior inteiros por outros específicos da plataforma. Tomemos 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á os arquivos app.js e android.js , mas o arquivo de saída para Windows Phone 8 conterá apenas o arquivo app.js que se encontra na pasta merges/wp8 , pois o arquivos em merges/[platform] substituem os arquivos em www .

O diretório de plugins contém informações sobre os plugins de cada plataforma. Neste ponto, você deve ter apenas o arquivo android.json 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ê pode usar o emulador também, se quiser.

Cordova fornece várias etapas de CLI para construir 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 pode executar emulador também). 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 pela porta USB, habilitar o modo de depuração USB e implantar seu primeiro aplicativo Apache Cordova diretamente no seu dispositivo, bastando executar:

 cordova run

Isso copiará todos os seus arquivos em platforms/* e executará todas as tarefas necessárias.

Você pode limitar o escopo do processo de compilação especificando o nome da plataforma para a qual deseja compilar 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"

Tutorial prático do Apache Cordova

Vamos criar um aplicativo tutorial simples para demonstrar o uso do Cordova e seus plugins. A demonstração inteira pode ser encontrada neste repositório do GitHub para que você possa baixá-la e ver partes dela junto com este breve tutorial do Cordova.

Usaremos a configuração inicial que você criou e adicionaremos código adicional. Digamos que queremos adicionar novos projetos a um banco de dados imaginário Toptal, bem como visualizar os existentes. Abra index.html e configure duas guias da seguinte maneira:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no" /> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" /> <link rel="stylesheet" type="text/css" href="css/toptal.css" /> <title>Hello Toptal</title> </head> <body> <div> <div> </div> </div> <footer> <ul> <li class="tab-button active" data-tab="#search-tab">Search Projects</li> <li class="tab-button" data-tab="#add-tab">Post a Project</li> </ul> </footer> <div></div> <script src="js/lib/jquery-1.11.1.min.js"></script> <script src="js/lib/jquery.mobile-1.4.5.min.js"></script> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/SQLiteStorageService.js"></script> <script type="text/javascript" src="js/Controller.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html>

Observe que adicionei Bootstrap e jQuery Mobile como dependências. Esteja ciente de que soluções e estruturas muito melhores foram desenvolvidas para criar aplicativos híbridos modernos, mas como a maioria (se nã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 as suas próprias, se preferir.

Vamos passar para o arquivo index.js e reduzi-lo 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 preconizada para aplicativos Cordova é configurar 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 para 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 arquivo index.js declarando-o primeiro e construindo-o no método onDeviceReady:

 // top of index.js var controller = null

 // inside onDeviceReady method controller = new Controller();

Por fim, 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 módulo node-static npm. Além disso, aqui você pode começar a pensar em usar algum framework como PhoneGap e/ou Ionic. Todos eles fornecem uma variedade 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 postados:

Tudo o que temos agora é um aplicativo web clássico rodando dentro de uma visualização 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 ir:

• Armazenamento local
• WebSQL
• BD indexado
• Armazenamento do lado do servidor acessado por meio de um serviço da web
• Plugins de terceiros que fornecem outras opções

LocalStorage é bom para armazenar pequenas quantidades de dados, mas não será suficiente se você estiver criando um aplicativo com muitos dados, pois o espaço disponível varia de 3 a 10 MB. IndexedDB pode ser uma solução melhor para este caso. O WebSQL está obsoleto e não é suportado em algumas plataformas. Por fim, o uso de serviços da Web para buscar e modificar dados se encaixa bem no paradigma SPA, mas é interrompido quando seu aplicativo fica offline. Técnicas de PWA junto com Service Workers chegaram recentemente ao mundo Cordova para ajudar com isso.

Além disso, existem muitos plugins adicionais de terceiros que vêm para preencher as lacunas no núcleo do Cordova. O plug-in Arquivo pode ser bastante útil, pois fornece acesso ao sistema de arquivos do dispositivo, permitindo criar e armazenar 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 espaços reservados. Não se esqueça de adicionar SQLiteStorageService.js ao seu arquivo index.html acima de Controller.js e inicializá-lo em seu controller modificando a função init do Controller:

 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 no service.addProject(), você notará que ele faz uma chamada para o método navigator.geolocation.getCurrentPosition(). Cordova tem um plugin 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 mudar.

Por fim, vamos adicionar os manipuladores de eventos 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 = '<a target="_blank" href="https://www.google.com.au/maps/preview/@' + project.location.latitude + ',' + project.location.longitude + ',10z">Click to open map</a>'; $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 plugins de diálogo, execute o seguinte:

 cordova plugin add org.apache.cordova.dialogs cordova plugin add org.apache.cordova.console

O plugin cordova.console irá ajudá-lo na depuração ativando a função console.log() dentro dos emuladores.

Você pode depurar facilmente aplicativos Android 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ê deverá ver seu dispositivo na lista e poderá abrir seu console de depuração.

O Safari fornece a mesma funcionalidade para depurar aplicativos iOS executados em dispositivos ou emuladores conectados por USB. Basta ativar as Ferramentas do desenvolvedor na guia Configurações do Safari> Avançado.

O plug-in cordova.dialogs permite notificações nativas. Uma prática comum é redefinir o método windows.alert 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 "Toptal", // title 'OK' // buttonName ); }; } }

A função overrideBrowserAlert deve ser chamada dentro do manipulador de eventos deviceready .

Agora você deve poder adicionar novos projetos e visualizar os existentes no banco de dados. Se você marcar a caixa de seleção "Incluir local", o dispositivo fará uma chamada para a API de geolocalização e adicionará sua localização atual ao projeto.

Vamos dar um toque final ao aplicativo definindo um ícone e uma tela inicial. Adicione o seguinte ao seu arquivo config.xml :

 <platform name="android"> <icon src="www/img/logo.png" /> <splash src="www/img/logo.png" density="mdpi"/> <splash src="www/img/logo.png" density="hdpi"/> <splash src="www/img/logo.png" density="xhdpi"/> </platform>

Por fim, coloque uma imagem de logotipo na pasta www/img .

Seu próprio aplicativo Cordova

Passamos pelas etapas básicas do desenvolvimento do aplicativo 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 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 criar aplicativos que entrarão em produção, é recomendável usar 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 Ionic, Framework7, Weex, Ratchet, Kendo UI e Onsen UI. Boa sorte!