Apps Híbridas com Cordova e

Prévia do material em texto

Apps Híbridas com Cordova e Ionic
Nesse artigo você vai entender o que são as apps híbridas, quais as vantagens e desvantagens que elas possuem em relação as apps nativas e qual papel o Cordova e o Ionic exercem nesse assunto.
Uma mobile app nativa é aquela desenvolvida com as linguagens padrão da SDK do dispositivo. No caso do Android o Java e no caso do iOS o Objective-C, e mais recentemente o Swift. Já uma app híbrida é aquela que é toda desenvolvida com html, css e javascript e que mesmo assim pode ser empacotada e distribuída nas app stores como uma app nativa.
O desenvolvimento híbrido consiste em utilizar html, css e javascript para a construção de uma mobile app que depois será instalada e executada do mesmo modo de uma app nativa. Isso só é possível pois, assim que a app é aberta pelo usuário, todo esse código roda dentro de algo chamado webview.
Webview é o nome dado a um tipo especial de browser que começa a rodar assim que a app híbrida é aberta pelo usuário. É dentro desse browser que a app é executada. É claro que o usuário não sabe que está dentro de um browser pois essa webview não contém componentes característicos de um, como a barra de endereço e barra de favoritos, por exemplo. A webview contém apenas o necessário para que o html, css e javascript funcionem. Ela se comporta como a engine de renderização da app.
Por isso o nome híbrido: uma parte da app é feita em código nativo para ser empacotada e distribuída nas app stores, e a outra parte é feita de código não nativo (html, css e javascript) que implementa todo o visual e o comportamento da app.
A grande sacada de uma webview é que ela não se limita à renderização da app. Ela também consegue acessar recursos nativos do dispositivo como a camera, microfone, acelerômetro, etc… Isso é possível graças a uma interface javascript que torna a webview apta a executar código nativo nos dispositivos.
Ou seja, no desenvolvimento híbrido é possível usar apenas javascript para acessar os recursos nativos do dispostivo, coisa que nenhum browser comum instalado no aparelho seria capaz de acessar.
Apps híbridas vs Apps nativas
A principal limitação de uma app híbrida se dá em termos de performance e fluidez. Atualmente uma app híbrida não consegue ser tão fluída e performática quanto uma app nativa, já que a renderização nativa ainda está muito a frente do poder de renderização de uma webview.
Já a principal vantagem de uma app híbrida é sem dúvida ter uma única base de código capaz de rodar em diversos sistemas diferentes. Ao invés de dar manuntenção para uma base em Java para Android, em outra em Objective-C para iOS e mais uma em C# para windows phone por exemplo, em uma app híbrida só é necessário dar manutenção em única base de código que, por sua vez, poderá ser empacotada e distribuída para todas as plataformas disponíveis.
Além da vantagem que temos com uma única base de código, existe outra tão importante quanto: um bom desenvolvedor web é capaz de usar experiência que já possui para a construção de uma app híbrida, e de um modo geral pessoas assim são bem mais fáceis de serem encontradas do que desenvolvedores focados em plataformas específicas.
Cordova e Phonegap
Atualmente o desenvolvimento híbrido possui 2 plataformas principais, o cordova e o phonegap. Os dois servem ao mesmo propósito, que é de um modo transparente para o desenvolvedor, criar uma app nativa capaz de abrir uma webview para a execução do html, css e javascript criados pelo desenvolvedor. Paralelo a isso, eles também tem o conceito de plugins que são usados para acessar os recursos do dispositivo. Por motivos que serão expostos mais adiante, daqui pra frente farei referência apenas ao cordova, embora tudo que for dito funcione da mesma maneira em ambos.
Através do comando build do cordova, o código não nativo (html, css e javascript) da app é empacotado dentro de uma app nativa. O build pode ser considerado a principal funcionalidade do cordova e do phonegap. input do build são os arquivos html, css e javascript além de alguns arquivos de configuração do seu projeto, e o output é uma app nativa que, ao ser executada, abre a webview que vai renderizar a app.
Outro comando muito importante do cordova é o plugin. Através do plugin add e do plugin rm os plugins que acessam os recursos nativos da app podem ser adicionados e removidos. O repositório de plugins do cordova se encontra em http://plugins.cordova.io. Lá é possível buscar por qualquer plugin registrado. É importante notar que o cordova por padrão não vem com nenhum plugin instalado. Isso é feito para que o build final da sua app não fique sobrecarregado com plugins que você não vai precisar.
Algo interessante sobre os plugins do cordova é que, dado que você tenha algum domínio das linguagens nativas, você pode criar o seu próprio plugin customizado. Um projeto recente que trabalhei exigiu a criação de um plugin para capturar os dados da operadora do dispositivo. Como ainda não existia um plugin do cordova para esse fim, acabei criando um tanto para Android quanto para iOS. O código é open source e está disponível no github.
Se tanto o cordova quanto o phonegap servem para a mesma coisa, qual a diferença? Tudo começou quando uma empresa chamada Nitobi criou o phonegap em 2009. Em 2011 a Adobe comprou a Nitobi e pouco tempo depois doou para a Apache o core desse projeto. Entre outros motivos a Adobe queria se certificar que outras empresas pudessem contribuir com o projeto. A Apache então foi uma escolha natural para a Adobe pois muitas grandes empresas já confiavam na Apache e estavam confortável com as suas licenças. Por fim, para evitar problemas com o nome phonegap que é uma marca registrada da Adobe, debaixo da Apache o projeto recebeu o nome de cordova.
Dessa forma, o phonegap pode ser considerado uma distribuição do cordova. Tanto um quanto o outro são projetos opensource, mas ao redor do phonegap a Adobe já lançou e deve continuar lançando alguns serviços, como o Phonegap Build. Uma boa maneira de entender isso é enxergar o phonegap como sendo o cordova cercado por alguns serviços extras (e possivelmente pagos) da Adobe.
Independente da plataforma escolhida, grande parte do trabalho de construir de uma app híbrida se concentra na construção da interface. Em uma mobile app é necessário não só construir componentes como menus, tabs e formulários responsivos, mas também é necessário garantir a performance e o bom comportamento desses componentes diversos em sistemas, dispositivos e tamanhos de tela diferentes.
A complexidade na construção desses componentes se tornou um sério problema. Tempo e dinheiro que deveriam estar centralizados nas funcionalidades do modelo de negócios estavam indo para na construção dos componentes mais básicos da app.
Ionic
Para resolver esse problema, surgiu no final de 2013 um projeto chamado ionic. O ionic é uma SDK de componentes visuais focados em mobile apps híbridas. Seus diversos componentes html e css e funcionalidades javascript são bastante simples de usar e livram o desenvolvedor de ter que codificar tudo apartir do zero.
O ionic precisa do cordova instalado para conseguir rodar nos dispositivos. Como o ionic é uma SDK javascript, sem o cordova o ionic também funciona, mas o resultado só pode ser visto através de um browser de um desktop ou do próprio dispositivo. O cordova é necessário para que a app consiga ser instalada e executada nos dispositivos.
A atenção com a performance é um dos fatores que diferenciam o ionic de seus rivais mais como o jQuery Mobile e o Sencha Touch. O equipe por trás do ionic procura otimizar a performance de todas os componentes que eles criam pois eles sabem que a fluidez e a responsividade de uma app híbrida são fatores chaves, pois quanto mais próximo de um feeling nativo eles conseguirem chegar, melhor recebida serão as apps e o próprio ionic.
Um outro fator diferencial do ionic é fato dele ser baseado no angular, que é um framework javascript aplamente adotado pela comunidade e que traz um enorme ganho deprodutividade para os desenvolvedores. Ser baseado em angular também signfica que quem já trabalha com ele vai conseguir reutilizar no ionic todo o conhecimento previamente adquirido.
O ionic também conta com uma excelente documentação e com um fórum próprio bastante ativo onde perguntas são respondidas em até poucos dias. Recentemente o ionic começou a oferecer também alguns serviços que no momento em que escrevo esse post ainda estão em beta, como o Ionic Creator, Ionic View e as Push Notifications.
Fim
Essa foi a primeira parte da série de artigos sobre desenvolvimento híbrido. Na segunda parte vou mostrar como instalar e configurar o ambiente para desenvolver uma aplicação cordova utilizando ionic e consumindo dados de uma API REST.
Aplicativo Híbrido
Aplicativo híbrido é um misto de desenvolvimento nativo e design responsivo. Normalmente é desenvolvido usando HTML5, CSS e JavaScript e exibido em um Webview, que é um Navegador Web embutido dentro do aplicativo.
Tem algumas vantagens como menor custo de desenvolvimento e desvantagens como limitações para funcionamento off-line e performance.
Existem também alguns frameworks que facilitam esse tipo de desenolvimento como PhoneGap e Titanium. Nós já fizemos alguns apps e protótipos usando essas tecnologias, mas não vimos grandes vantagens em termos de custo e complexidade técnica.
.:.
Em suma, cada situação tem sua aplicação e suas limitações, por isso fiz uma tabela para deixar mais fácil esse entendimento:
Em arquitetura de software há muitas camadas entre o hardware e o usuário final. Cada uma pode ser dita como tendo um front-end e um back-end. O front é uma abstração, simplificando o componente subjacente pelo fornecimento de uma interface amigável.
Em projetos de software, por exemplo, a arquitetura modelo-visão-controlador fornece o front-end e o back-end para o banco de dados, o usuário e para os componentes de processamento. A separação de sistemas de software em front-end e back end simplifica o desenvolvimento e separa a manutenção. Uma regra de ouro é que o lado front (ou "cliente") é qualquer componente manipulado pelo usuário. O código do lado servidor (ou "back-end") reside no servidor. A confusão surge quando alguém tem que fazer edições no front-end para arquivos do lado servidor. Muitos projetistas HTML, por exemplo, não precisam estar no servidor quando eles estão desenvolvendo o HTML. Reciprocamente, engenheiros do lado servidor, por definição, nunca estão em qualquer coisa, mas um servidor. Considera-se os dois para, finalmente, fazer um site web funcional e interativo.
Para subsistemas de computação maiores, um gerenciador de arquivos gráfico é um front-end para o sistema de arquivos do computador e um shell faz a interface com o sistema operacional. O front-end reveste o usuário e o back-end executa os programas do sistema operacional em resposta.
Front-end e back-end
Usar a interface de linha de comando (ILC) exige a aquisição de terminologia especial e memorização de comandos, desta forma uma interface gráfica do usuário (IGU) age como um ambiente desktop de front-end, em vez disso. No ambiente Unix, ncurses é um front-end semi-gráfico simples para a ILC. No nível de ILC do Unix, propriamente dito, muitos programas orientados a stream de bytes (isto é, usando stdin/stdout/stderr como suas interfaces) agem como filtros - programas standalone que também podem servir como front-ends e back ends para outros programas. (Eles funcionam canalizando dados entre eles mesmos, muitas vezes para processamento de texto. Por exemplo: $ grep palavra ~usuario/dir/arquivodeentrada | sort | tee ~usuario/dir/arquivodesaida)
Em alguns sistemas, tais como aqueles baseados em Unix chama-se front-end às interfaces gráficas que permitem ao usuário interagir com programas que trabalham originalmente em modo texto.
A título de exemplo temos o comando mkfs pertencente à construção de vários sistemas de ficheiros
O que faz um desenvolvedor Front-end de aplicativos
Front-end e Back-end - Esses são dois conceitos muito utilizados quando se fala emdesenvolvimento de aplicativos, sistemas e páginas web. Ao fazer uma breve pesquisa pela internet, podemos encontrar diferentes maneiras de definir ambos conceitos e o perfil dos profissionais de cada uma das áreas.
 
Entretanto, quando se fala em projetos de aplicativos, por exemplo, podemos definir o profissional de Back-end como aquele desenvolve APIs, cria banco de dados e demais funcionalidades que uma aplicação deverá ter e que não são visualmente acessíveis aos usuários.
 
Já o desenvolvedor Front-end cuida de toda a parte de interação com o usuário, ou seja, atua na criação de recursos visuais que farão o usuário interagir com o aplicativo.
 
Neste artigo, falaremos um pouco sobre o profissional de Front-end de aplicativos. Afinal, qual o papel desse profissional em um projeto mobile e quais conhecimentos ele deve ter? Acompanhe os detalhes a seguir para saber mais.
 
Responsabilidades de um profissional Front-end
 
De maneira geral, um desenvolvedor Front-end é responsável por projetar, desenvolver e otimizar as interfaces de projetos de aplicativos, sistemas e páginas web. Dentre suas responsabilidades, podemos destacar:
 
Atuar junto com a equipe de design para desenvolver interfaces interativas para satisfazer as necessidades dos usuários;
Criar interfaces rápidas e ágeis;
Produzir código limpo, bem documentado e estruturado;
 
Qual a importância de um profissional Front-end?
 
Assim como os desenvolvedores de Back-end, os profissionais de Front-end também possuem um grande valor em projetos de aplicativos. Confira abaixo alguns fatos que mostram a importância de contar com um profissional de Front-end em seus projetos:
 
80% do tempo de carregamento de uma aplicação é gasto no Front-end, portanto, para ter um aplicativo com alta performance, é fundamental contar com um bom profissional de Front-end.
Os aplicativos estão cada vez mais complexos e detalhados, tornando cada vez mais necessária a presença de um especialista em interfaces;
A parte visual de um aplicativo dá a primeira impressão aos usuários. Portanto, se ele estiver quebrado, existe um grande risco do aplicativo fracassar.
 
O que um desenvolvedor Front-end precisa saber?
 
Qualquer profissional, precisa ter determinadas habilidades para poder atuar em sua área. E para o profissional de Front-end também não é diferente. Vejamos algumas das principais habilidades que este profissional deve ter:
 
HTML e CSS
 
Essas duas linguagens são requisitos básicos para todo desenvolvedor Front-End. Sabe aquele menu para acessar as informações de um aplicativo, ou aquele formulário de contato? Para construí-los é necessário dominar as linguagens de HTML e CSS.
 
Java Script
 
Ter conhecimentos sólidos em Javascript também é outro requisito fundamental para um desenvolvedor Front-end. Por meio dessa linguagem é possível dinamizar elementos em um aplicativo, além de criar recursos como galerias Lightbox, entre outros.
 
O domínio em determinados frameworks como Angularjs, Backbone, PhoneGap (mobile), Knockout, Ember, também são grandes diferenciais para este tipo de profissional.
 
Softwares para edição de imagem
 
Os aspectos visuais de um aplicativo, sistema ou página web são muito importantes para a usabilidade do projeto. O adequado uso de imagens e a combinação correta de cores, são alguns dos aspectos mais importantes para se ter um projeto moderno e interativo.
 
Neste caso, é fundamental que o profissional de Front-End tenha pleno conhecimento de ferramentas para edição de imagens. Abobe Photoshop e Fireworks são algumas das mais utilizadas.
 
Versionamento
 
Ter conhecimentos sobre controle de versão de aplicações também é uma tarefa importante para um desenvolvedor Front-end. Isto porque versionar códigos se tornou uma prática essencial para a grande maioria dos projetos.
 
Atualmente o modelo Git, é o mais utilizado, sendo aplicado em conjunto com oGithub. O modeloSVN também é adotado por algumas empresas.
 
Conforme se pode observar, para ter um aplicativo de sucesso, é importante contar com profissionais de Front-end que atuarão em todo o processo de interação com o usuário. E se hoje vemos grandes cases como o WhatsApp, Pokémon Go, Snapchat, Uber, entre outros, é fato que grande parte do sucesso desses aplicativos se deve ao trabalho de ótimos profissionais de Front-end.
 
Nós da Dub Soluções, somos especializados em desenvolvimento de aplicativos e contamos com excelentes desenvolvedores de Front-end. Portanto, seja qual for a necessidade, conte conosco para ter um aplicativo de sucesso.
Afinal, o que é Frontend e o que é Backend?
Você sabe separar o que é o frontend de uma aplicação e o que é o backend? Se não sabe, esse artigo vai te ajudar
Desde que comecei a trabalhar com web, e isso já tem bons anos, vejo os termos frontend e backend sendo muito utilizados, e não são utilizados apenas por programadores e designers, mas já existem clientes, pessoas de fora do setor que utilizam esses termos na hora de fazer um briefing ou nas reuniões pré e pós projeto.
A definição mais comum que podemos observar para frontend e backend é a seguinte: FRONTEND => É o site. BACKEND => É o painel administrativo, que vai gerenciar o conteúdo. A resposta não está totalmente correta, pois o painel administrativo também é um frontend. Vejamos uma definição mais objetiva de cada um:
FRONTEND => Interface de interação com o usuário
BACKEND => Sistema responsável pela regra de negócios, webservices e APIs de uma aplicação
Com base na definição acima, vamos exemplificar essa separação levando em conta um projeto de classificados de veículos online, composto pelos seguintes itens:
Site
Aplicativos para celular
API
Gerenciador de Conteúdo (painel de controle)
Sabendo esses itens, vamos separar o que é frontend e o que é backend:
FRONTEND => site, aplicativos para celular, gerenciador de conteúdo
BACKEND => sistema com a regra de negócios e operações que são realizadas através do gerenciador de conteúdo, API.
Em alguns casos, em projetos mais complexos, a própria API não deve ser considerada como backend, pois ela possui uma arquitetura muito própria, com infraestrutura de hardware específica para ela, sendo uma mediadora da comunicação entre as aplicações e o backend.
Você já ouviu ou leu o perfil de algum programador, e este se diz programador frontend ou programador backend? Essa é uma boa forma de compreender a diferença entre os termos e colocar cada um no seu devido lugar.
O programador frontend é aquele que cuida de toda a parte de interação com o usuário, já o programador backend é o profissional que desenvolve o sistema que vai ser utilizado para gestão dos dados, sistema esse que terá interatividade com o usuário e utilizará a interface que foi desenvolvida pelo programador frontend.
Agora que você já sabe o que realmente é frontend e backend, você é um programador frontend ou backend?
Como Publicar um app no Google Play?
Criar um app pode ser uma experiência fantástica, mas na hora de distribuí-lo temos que encarar certas burocracias. Seja pra publicar na App Store ou na loja do Google, é sempre bom ter um manual do lado pra não se perder, fazendo esse processo demorar mais do que deveria.
Quanto mais rápido seu produto ou serviço estiver em contato com o público, mais cedo você vai ter feedbacks que vão ser decisivos para o sucesso do seu app. Esse post é um tutorial simplificado de como publicar no Google Play. Vamos lá!
1. Crie uma conta de Desenvolvedor do Google
O primeiro passo é criar uma conta de desenvolvedor do Google que custa $25 USD como taxa de registro. O cadastro pode ser feito por pessoas ou empresas. O Google recomenda que empresas criem uma conta separada para usar esse serviço.
Esse post é um tutorial de como publicar na App Store.
Separamos o processo todo em três passos e no meio incluímos algumas dicas que você pode aproveitar. Vamos lá?
1. Crie uma conta no iOS Developer Program
O iOS Developer Program é o serviço obrigatório pra quem quer distribuir apps na loja da Apple. A inscrição custa uma taxa de 99 USD por ano e pode ser assinada por uma pessoa ou por uma empresa.
De um serviço backend para uma View: Uma chamada de serviço, como um status, busca dados do backend. Ele coloca os dados em um modelo de fluxo imutável. Um Interactor acompanhando esse fluxo nota esses novos dados e os passa para o Presenter. O Presenter formata os dados e envia para a View.
De uma View para um serviço backend: O usuário clica em um botão, como “Entrar”, e a View passa a interação para o Presenter. O Presenter chama um método “Entrar” no Interactor que resulta em uma chamada de serviço para realmente entrar. A chave recebida é publicada em um fluxo pelo serviço. Um Interactor acompanhando esse fluxo altera para o Riblet “Home”.
Desenvolvedor front-end: é o responsável que projeta as interfaces de um website. São eles que trabalham com o HTML e o CSS
para construir as páginas web.
Desenvolvedor back-end: é o responsável por dinamizar o site através das linguagens de programação(Java,C#,DELPHI,PHP).
Cada um dos papéis são muito importantes e eles possui dependência um do outro. Afinal de contas o que adianta um layout chamativo se o site é estático, ou se o site é construído utilizando as melhores práticas de programação, contudo a sua usabilidade é fraca
Front-end
O desenvolvedor front-end é responsável por "dar vida" à interface. Trabalha com a parte da aplicação que interage diretamente com o usuário. Por isso, é importante que esse desenvolvedor também se preocupe com a experiência do usuário.
Na parte de estudo, este profissional foca em HTML (linguagem de marcação), CSS (linguagem de estilo) e JavaScript (linguagem de script/programação).
Back-end
Como o nome sugere, o desenvolvedor back-end trabalha na parte de "trás" da aplicação. Ele é o responsável, em termos gerais, pela implementação da regra de negócio.
Em uma aplicação web, este desenvolvedor, quando focado, não toca na parte visual da aplicação. Por lidar com a regra de negócio, as vezes um programador de sistemas, como de aplicações comerciais e até científicas, pode ser chamado de desenvolvedor back-end. E geralmente, nessas aplicações, este desenvolvedor trabalha um pouco com a parte visual. Por isso, para este artigo, o desenvolvedor back-end levado em conta, é o desenvolvedor de aplicações web.
Quando falamos de back-end em desenvolvimento web, nos deparamos com várias linguagens, como Go, Clojure, C#, PHP, Java, Python, Ruby, entre outras. Cada uma possui vantagens e desvantagens em relação ao uso no desenvolvimento web, bem como no mercado de trabalho.
Site mobile (web app) x Aplicativo para Celular (app)
A diferença entre um web app e um app é grande. Tecnicamente, é 100% diferente.
Um aplicativo para celular é um software, que precisa ser instalado no smartphone e roda diretamente no sistema operacional. Já o site mobile roda em um browser, afinal, ele é um website com um formato diferenciado.
Um aplicativo mobile (app) pode atingir um desempenho muito melhor e tem capacidade para utilizar os recursos do dispositivo. A experiência do usuário é muito superior.
Grandes empresas costumam ter as duas soluções, pois há usuários resistentes a baixar um aplicativo. Nesse caso, o web app roda diretamente no navegador e não exige a instalação. Para o visitante faz sentido instalar (baixar) um app quando ele vai utilizá-lo com frequência. Quando é para usar uma única vez. Para consultar um produto esporadicamente, por exemplo, é mais cômodo usar o site mobile.
Por se tratar de um software, um app precisa lidar com as diferenças entre sistemas operacionais. É uma tecnologia mais recente e tem menos mão de obra disponível. Esse conjunto de fatores torna um projeto de aplicativo cerca de 3 vezes maior o valor, em relação à um webapp