Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic

963 views

Published on

Nesse projeto vamos ver que um aplicativo híbrido é uma página HTML como qualquer outra tendo apenas que ser otimizada para caber em telas pequenas de maneira responsiva e com componentes otimizados para Touch Screen, para isso usamos bibliotecas CSS e JS como o Materialize, Bootstrap, entre várias outras.

A nossa página HTML também deve se comportar como um aplicativo móvel, para isso o nosso 'site' deve ser um SPA (Single Page Application), ou seja, uma única página HTML com uma área reservada para a renderização das views que serão injetadas via AJAX, para isso podemos usar bibliotecas como JQuery para nos ajudar com o AJAX e a manipulação do DOM, mas é preferível usar frameworks front-end como AngularJS, ReactJS, entre outros que nos entregam uma sistema de SPA pronto e organizam nosso código com o pattern MVC, eliminando o código spaghetti.

Veremos tbm que essa página precisa ter as views injetadas com transições animadas entre telas que devem ser feitas feitas CSS que usa aceleração da CPU por questões de performance.

Além de tudo isso, precisamos ter acesso às APIs nativas dos devices, pra isso precisamos integrar nossa página HTML com o Cordova, adicionar plugins e usar os eventos que ele emite pra nos ajudar no ciclo-de-vida da nossa aplicação. Vamos entender a diferença entre PhoneGap e Cordova e que o nosso aplicativo vai rodar embarcado em uma WebView, o que realmente é uma WebView e que essa é apenas uma Activity e que segue o mesmo ciclo-de-vida de qualquer outra Activity.

Veremos também que essa página HTML precisa ter elementos UI mínimos e obrigatórios para qualquer aplicativo móvel. Todo aplicativo deve ter uma barra de status que combine com o design utilizado, uma barra de navegação fixa com um título e um botão voltar, a área do conteúdo e um rodapé (opcional) e que para fazermos isso contamos com a ajuda de bibliotecas com o Materialize, Bootstrap, JQuery Mobile, etc...

Antes de terminar vamos ver com um bom ícone e uma splash screen são importantes para um aplicativo móvel e que temos dezenas de tamanhos e resoluções de arquivos para criar, exportar e registrar no nosso XML de configurações e como podemos usar o Ionic Resources pra fazer esse trabalho pesado pra nós.

E depois como emular tudo isso, como fazer Debug e identificar erros, como visualizar nos devices e depois fazer o Build e publicar nas lojas de aplicativos móveis

Como se não bastasse temos que levar em consideração a experiência do usuário em cada plataforma, veremos como o usuário do iPhone espera que os elementos do UI sejam e como o aplicativo deve se comportar e como os dos Android esperam, e entenderemos que o Material Design jamais deve ser entregue no IOS e que precisamos de um UI agnóstico de plataforma.

Veremos como tudo isso fica muito fácil e simples com o Ionic Framework que toma o controle de tudo isso e nos permite ser muito mais produtivo

Published in: Software
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
963
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
90
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • O QUE É HIBRIDO
  • HIBRIDO NO MUNDO MOBILE
  • Talvez no futuro o cenario web seja suficiente pra muitos tipos de aplicativos
  • Não é uma escolha crucial, híbrido quase sempre é o suficiente
  • Pontos fortes e fracos entre app e web, decisao nao crucial

    Qual plataforma vc quer atacar? (Android, IOS, WP)

    Web:
    busca de conteudo despretenciosamente
    Nao exige compromisso do usuario
    Engajamente mais dificil
    Nao tem instalacao
    Nao tem experiencia nativa

    Nativo:
    Oferece experiencia nativa a cada plataforma
    Causa maior engajamento
    App que exigem bastante processamento, multithreading, apps que precisam ficar rodando servicos em background (consome mta bateria)

    Hibrido
    Suficiente na maioria dos casos

    O cordova nps da muitos recursos pra desenvolvermos uma app mas eh claro que no nativo vc tem acesso a muito mais possibilidades de desenvolvimento, se vc tiver bastante prazo, orcamento e uma equipe especializada em cada plataforma, pode ser mais interessante ir pro nativo
  • Eles rodam em uma webview que é um interpretador de html, css e js, e isso é inerentemente mais lento do que qualquer coisa feita nativamente na plataforma, isso é um fato. O que precisamos fazer é cercar o maior quantidade possível de gargalo, criar um js performático pra ter uma performance aceitável. E fato é: a maioria dos app náo precisam de ultra performance, só precisam parecerem rápidas
    Estrategia mista: primeiro HTML5 hibrido (prototipo, testes), depois nativo (entregando parcialmente pra cada plataforma), webapp tambem
  • Existe apps com phonegap que receberam destaque na app store
  • Prática: apenas pra demonstrar que qualquer código html, css e js simples ou complexo pode ser empacotado pelo Cordova e rodar como uma app nativa

    Escrever código
    PhoneGap Desktop
    PhoneGap Developer App
    PhoneGap Build (online)
    Entregar
    http://google.github.io/material-design-icons/ (tutorial como disponibilizar os icones localmente)
    https://design.google.com/icons/ (todos os icones com codigo numerico)
  • PhoneGap Desktop App: http://phonegap.com/getstarted/
    PhoneGap Mobile App
  • gerenciamento de memória, concorrências entre threads, deploy nas lojas de aplicativos, experiência do usuário na hora do download/instalação, capacidades de cada plataforma mobile e experiência do usuário
  • MESMO AMBIENTE DEVE SER CONFIGURADO
  • https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html c:/Users/blini/AppData/Local/Android/SDK
    Download Java: http://goo.gl/WZATRd
    Configuração Java no Windows: http://goo.gl/dr86Bq
    Download Android SDK (Android Studio): http://goo.gl/3LzYa6
    Download Genymotion: http://genymotion.com/download
    npm install -g phonegap
    ANDROID_HOME = C:\Users\blini\AppData\Local\Android\sdk
    JAVA_HOME = C:\Program Files\Java\jdk1.8.0_92
    Path: %JAVA_HOME%\bin %ANDROID_HOME%\tools %ANDROID_HOME%\platform-tools (java -version, )
    Javac -v
    Java -version
    Adb version
  • https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html
    A partir do Xcode 7 o teste no device é gratuito, soh abrir a aplcação e dar um play
    Sem MAC:
    Nós precisamos buildar o projeto, gerar as chaves de desenvolvedor, usar emulador do iOS, executar no aparelho de testes e publicar na App Store da Apple.
    Buildar: é possível usar o PhoneGap Build para isso, mas é necessário gerar as chaves do desenvolvedor em um Mac;
    Geração das chaves: com alguns hacks, é possível hoje em dia gerar as chaves no Windows se tiver a conta paga da Apple
    Testar no dispositivo: se usar o PhoneGap Build com suas chaves, é possível instalar no aparelho usando iTunes
    Publicar na loja e emular somente com MAC
  • https://cordova.apache.org/docs/en/latest/guide/platforms/wp8/index.html
    Exige Windows para Emular, registrar o aparelho e testar no aparelho
    No MAC: pode instalar o Window em uma máquina virtual ou em uma partição, é permitido tanto pela Microsoft quanto pela Apple
    No Linux: Basicamente, você só consegue desenvolver para Android. Se quiser iOS, vai precisar de Mac. Se quiser Windows Phone, vai precisar de Windows.
  • http://materializecss.com/
    Instalar node
    Instalar PhoneGap e Cordova CLI
    Instalar o Git
    Configurar ambiente Android
    http://swapi.co/api/
    Desenvolver código
    Run Browser
    Emular
    Debug no Chrome
    Rodar no Device
    Build PhoneGap CLI
    Entregar

    Ambiente Java e Android Configurado
    Emulador Genymotion
    Dispositivo Android
    Google Chrome no Desktop
  • https://cordova.apache.org/plugins/
  • Prática: Nova Funcionalidade WeLoveStarWars

    Cordova
  • Prática: Web App WeLoveStarWars

    Cordova
    Grunt ou Gulp
    Bower
    GitHub
    Angular
    Materialize materializecss.com
  • O que a gente precisa pra desenvolver app moveis normalmente?

    Comunicar com as APIs nativa dos devices - Cordova
    Sistema de SPA comunicando com uma Web API onde estão os dados: frameworks como Angular, React, JQuery Mobil, Zepto, etc…
    Aparência de app e transições de tela: bibliotecas css (Materialize, Bootstrap, etc...)
  • Nao precisamos aprender as linguagens e builds pra cada plataforma
  • Adobe Systems purchased Nitobi in 2011, rebranded it as PhoneGap, and later released an open source version of the software called Apache Cordova

    PhoneGap Main Services (que nos interessam):
    PhoneGap Build
    PhoneGap Desktop
    PhoneGap Developer
    PhoneGap CLI
    Hydration
    Debug Remoto com Weirne
    Assinatura dos binarios

    WP: o aparelho precisa estar registrado e comprar uma uma conta de developer microsoft
    iOS: Certificados da apple pra fazer o build, pra isso deve comprar uma conta de desenvolvedor e ter um mac com Xcode pra gerar as chaves
    Android: tranquilo

    PhonGap Build:
    Toda a infraestrutura necessaria na nuvem pra fazer o build para cada plataforma, sem a necessidade de ter um Mac ou um Windows

  • Cordova applications are ordinarily implemented as a browser-based WebView within the native mobile platform
    Podemos criar webviews na mao atraves das apis nativas para rodar nossos codigos html, mas eh mto dificil de criar uma webview dada as peculiaridades de cada prataforma, o que o cordova faz pra nós é criar uma webview cross-platform

    Todas as plataformas móvel oferecem
    É relativamente simples criar e chamar uma webview com o código nativo para executar um html, mas não é fácil uma webview cross-platform
    Exemplo: facebook

    PhoneGap Build:
    Cria o código nativo que chama uma webview usando o Cordova
    Empacota tudo em 1 aplicativo - tanto a parte nativa de chamar uma webview quanto todo o nosso codigo html, css e js
  • Muitas apps usam webview para renderozar html dentro do seu fluxo
    Cordova inovou ao renderizar uma app inteira dentro de uma webview
  • O cordova tem um conjunto de APIs que faz a inteface com a WebView usando JavaScript e depois conversa com o device na sua linguagem nativa, provendo uma ponte entre os dois
  • Sempre ter em mente qual plataforma vc quer dar suporte
  • An activity is a single, focused thing that the user can do
    Native Android apps typically consist of a series of activities that the user interacts with
    Cordova applications on the Android platform are executed within a Webview that is embedded in a singleAndroid activity. The lifecycle of this activity is exposed to your application through the document events that are fired
  • This container has a very crucial file - config.xml file that provides information about the app and specifies parameters affecting how it works, such as whether it responds to orientation shifts.

    Config.xml: Configurar o PhoneGap Build: config.xml
    Nome, Id, version, author, description
    Orientacao
    Barra de status no topo
    Permissoes
    Icone e splash screen
    plugins
    Restringir versoes do android (Android 2 tinha webview com muito bug) usar versao minima da SDK como 16
    http://docs.build.phonegap.com/en_US/configuring_preferences.md.html
  • Trabalhoso fazer na mao

    Iphone: 16 icones e 10 splash screen
    Android: 6 icones e 12 splash screen
  • Usando o servico do ionic:

    Icone.png deve ser quadrado, o desenho ocupar quase toda a área útil, sem bordas arredondadas e no mínimo 192x192 px
    Splash screen também deve ser quadrado e bem grande, recomendo 4096px, desenho centralizado e longe das bordas

    http://ionicframework.com/docs/cli/icon-splashscreen.htm l
  • Outros desenvolvedores que irão trabalhar junto saberão quais as plataformas que o app dá suporte e poderão fazer build e adicionar as plataformas no seu ambiente de desenvolvimento
    Pasta platforms tem muitos arquivo, é pesado para armazenar em versionadores e compartilhar em repositórios online com o GitHub, nao comitar tbm a pasta plugins
    Spec e opcional e define a versão do android ou ios
    $ cordova prepare (instala as plataformas presentes no xml)
    $ cordova platform add android --save (adiciona a platforma android e registra o engine android no xml)
    $ cordova platform save (adiciona as plataformas que já estão instaladas mas não estão registradas no xml)
  • Outros desenvolvedores que irão trabalhar junto saberão quais as plataformas que o app dá suporte e poderão fazer build e adicionar as plataformas no seu ambiente de desenvolvimento
    Pasta plugins tem muitos arquivo, é pesado para armazenar em versionadores e compartilhar em repositórios online com o GitHub, nao comitar tbm a pasta plugins
    Spec e opcional e define a versão do android ou ios
    $ cordova plugin add cordova-plugin-whitelist --save (add e salva no xml)
    $ cordova plugin rm cordova-plugin-whitelist --save (remove e atualiza xml)
    $ cordova plugin ls (lista pliugins na pasta plugins)
    $ cordova plugin save (adiciona os plugins adicionados que nao estão no xml)
  • verify which version of the JDK you have: open a command line and type javac -version. If the JDK is not available or the version is lower than 1.8, download the Java SE Development Kit 8

    É muito importante conhecer muito bem como funciona o cordova na plataforma que vc está desenvolvendo
  • A web hoje está muito mais voltada ao front-end que o back-end
    O quanto manutenível está nosso código? (próximo slide)
  • O quão fácil está fazer alterações no html?
    Nós precisamos fazer separações entre requisições ajax, marcação de html e regras e negócio
    Pedaços de software independente e reutilizáveis
    Um não interfere o outro e um não quebra o outro!
  • Objeto $scope pega os dados de um Service, o Controller trabalha com esses dados e envia para a View
    MVC - dados no Model, Controller acessa eeses dados, trata e envia pra View.
    A view recebe dados do usuário, manda pro Controller que trata, valida e envia pro Model
    No final é semelhante ao que fizemos anteriormente quando nós interagimos com o resultado do ajax, construímos o HTML e injetamos no DOM só que no Angular a gente faz isso separando as funcionalidades em diversos componentes
  • Responsável por cuidar dos dados da Factory para a View e comunicar com Services, validar dados e regras de negócio


    Controller takes the data from model (scope objects or the response from a service) and then fuse them to form the final view that gets displayed on the web page
  • Angular é dirigido por HTML
  • Quando injetado teremos o valor que é retornado ao invocar a function passada como referência no modulo.factory

    É apenas uma function que pode ser chamada (executada), e por causa disso nós temos que retornar um objeto explicitamente.
  • Quando injetado teremos uma instancia do objeto/função (implicitamente teremos new nomeDoServico)

    É um objeto que encapsula pedaços de código e Regras de Negócio (códigos como console.log) e pode ser injetados em diretivas e Controllers;

    Inicializados só quando necessáio - quando um componente depende deles.

    São singleton (são inicializados apenas 1 vez durante o ciclo de vida do aplicativo)
    É como uma classe (tem o this)
    Perfect to share data between controllers and keep them in memory if need
    Servem para reusar pedaços de código pela app
  • Muito simples e muito poderoso! E é uma solução perfeita para para componentes reusáveis
  • Dependencias injeta com o wiredep nos comentarios
    Separamos com pastas
    Assistir mudancas
  • UI-Router is a client-side router for single page web applications.
  • Controllers são instanciados sob demanda, quando o usuário navega para um estado via URL, o $stateProvider irá carregar o template correto dentro da View e depois ligar o controller no scopo do template.
  • Cordova does not provide any UI widgets or MV* frameworks
  • Framework Front-end para desenvolver aplicativos móveis híbridos com HTML5.
    Nos dá componentes HTML, CSS e JS otimizados pra mobile e animações e interatividade que os aplicativos móveis requerem

    O Ionic tem performance através de manipulação mínima do DOM e transiçoes CSS que usam aceleração de hardware.

    Integrado lindamente com Angular e Cordova, tem seu própri CLI com todos comandos do Cordova e os seus próprios comando.
    Tem um servidor com livereload, usa Gulp, Bower e SASS, e faz scaffold de projetos

    As possibilidades de desenvolvimento são infinitas, bem vindo ao mundo das possibilidades com o Ionic! :)
  • Os componentes do Ionic são construídos usando as Diretivas do Angular
    Se você quiser adicionar uma barra de navegação na sua app Ionic, tudo o que vc precisa fazer adicionar a tag <ion-nav-bar /> ou <div class=”ion-nav-bar” />
  • Os componentes foram criados com foco visual independente de plataforma e usabilidade otimizada para mobile e touch screen
    it is the best HTML5 mobile framework available.
    It has a great set of components
    amazing default user interface tailored to various platforms
    performance that makes most apps feel completely native
    performance is continuuing to improve
    the same reasons that make Ionic such a powerful framework for hybrid apps will translate directly over to progressive web apps
    like support for service workers
  • Os componentes do Ionic são construídos usando as Diretivas do Angular
    Se você quiser adicionar uma barra de navegação na sua app Ionic, tudo o que vc precisa fazer adicionar a tag <ion-nav-bar /> ou <div class=”ion-nav-bar” />
  • http://phonegap.com/getstarted/

    Instalar o Bower
    Instalar o Gulp
    Adicionar Materialize e jquery via bower
    Transferir e Injetar Materialize e jquery via Gulp

    $ npm install -g phonegap

    $ phonegap -v

    $ phonegap (ver os comandos da CLI do PhoneGap)

    $ phonegap cordova (ver os comandos da CLI Cordova)

    $ npm install -g cordova

    $ cordova -v

    $ cordova (ver os comandos do Cordova)

    $ cordova create <path> --id <com.dominio.nome> --name <nomeProjeto>

    $ cordova platform add browser

    $ phonegap serve - visualizar app no browser

    $ cordova run - abre o Chrome com algumas configuracoes de seguranca alteradas, nao dah reload com F5

    Todo nosso codigo fica dentro da pasta www

    PhoheGap cria o projeto com todos os plugins e pode escolher templates ($ phonegap templates) e o config.xml com um namespace do cordova

    Cordova cria um projeto mais enxuto somente com o plugin white-list e o config.xml com um namespace do cordova

    $ phonegap run browser (platform add browser --save)

    $ phonegap run android (platform add android --save)

    netstat -ano | findstr 5037

    adb devices (run to check which android devices are plugged and available to run on the machine (emulator or USB))
    adb install <path_to_apk>
    https://developer.android.com/studio/command-line/adb.html#stopping
    https://developer.android.com/studio/run/oem-usb.html#Drivers

    https://build.phonegap.com/plugins
    https://cordova.apache.org/plugins/


    Criar primeiro modulo
    Criar as pastas
    Extrair conteudos das views
  • Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic

    1. 1. Desenvolvimento de Aplicativos Móveis Abordagem Híbrida: Aproveitando seus conhecimentos WEB junto com PhoneGap, Cordova, Angular e com foco no Ionic
    2. 2. Felipe Blini - Tecnólogo em Desenvolvimento de Sistemas para Internet - Formado em 2006 pela Unoeste - Presidente Prudente/SP - Desenvolvendo Softwares desde 2004 - Experiência como dono de agência de TI de 2006 a 2009 - Experiência em uma Multinacional e no Governo - Experiência em diversas startups, sendo uma premiada internacionalmente - Experiência internacional no Chile, Alemanha, Espanha, Hungria e
    3. 3. Híbrido?
    4. 4. Aplicativos Híbridos = Aplicativo Web com Acesso Nativo
    5. 5. Tipos de Aplicativos Móveis - Aplicativos Nativos - Online - Offline - HTML5 (Web App) - Site normal - acessa usando uma url - Progressive Web Apps - Web App Instalável - Aplicativos Híbridos - Site normal empacotado pelo Cordova, roda em uma WebView com acesso nativo a funcionalidades do SO
    6. 6. Nativo, Web App ou Híbrido?
    7. 7. Fonte (imagem): http://blog.bravi.com.br/comparativo-as-diferencas-entre-desenvolvimento-nativo-hibrido-e-web-app/ WEB APP Parcial
    8. 8. Nativo (1 plataforma) - Aprendizagem - Investimento - Prazo Nativo (+ de 1 plataforma)- Manutenção - Versionamento - Evolução - Detecção e Correção bugs - Add e Remover Funcionalidades Híbrido - Aprendizagem (você já sabe) - Investimento - Prazo - Mão de Obra - Write once, run anywhere - Performance??? Web App - Engajamento - Desoretencioso - PWA
    9. 9. Aplicativos híbridos são lentos? http://venturebeat.com/2012/12/13/facebook-android/#s:fb-android-3
    10. 10. Nop!
    11. 11. Porque HTML5? - Importância da web - Principal tecnologia - Mais popular - APIs e recursos mobile Estilizar Inteligência
    12. 12. A WeLoveStarWars - Cliente: Loja física especializada em intens da série Star Wars - Querem um app que será instalado em tablets Android espalhados pela loja - Usuários do app: visitantes da loja que querem conhecer mais sobre todos os filmes do Star Wars: - Lista dos filmes - Para cada filme: - Personagens - Veículos
    13. 13. Qual seria a melhor solução? - Não acessa recursos nativo - Não precisa de ultra performance - Deve ser instalado nativamente em tablets - Rodar apenas no Android - Prazo apertado - Orçamento baixo - Dados disponíveis em uma api web - Web App instalável para Android (PhoneGap) Requisitos: Resposta:
    14. 14. Workflow - Aplicativo Móvel 1)Mockup das Telas 2)Protótipo 3)Desenvolvimento 4)Testes no Browser* 5)Testes em Emuladores 6)Testes em Devices 7)Entrega (instalar nos tablets)
    15. 15. Workflow de Teste App PhoneGap 1) Teste o tanto que der no navegador (ambiente limitado) 2) Teste no PhoneGap Developer App 3) Use PhoneGap Build online e instale o app no device Debug - Chrome e Safari - Weinre (http://docs.phonegap.com/references/developer-app/debugging)
    16. 16. Aparência e Comportamento de App - Aplicativos móveis têm que ter - Navbar - Statusbar customizada - Botão voltar - Área de renderização de conteúdo - Ícone e Splash Screen - Componentes UI otimizados para Touch Screen - Aplicativos móveis são - SPA (Single Page Aplications) com transições entre telas - Aplicativos móveis híbridos - Respeitam essas regras
    17. 17. + Desenvolver o Protótipo PhoneGap Build
    18. 18. Mockup Pencil (desktop - free) - Ionic Creator (web - freemium) - Moqup (web - freemium)
    19. 19. Testar e Entregar PhoneGap Build
    20. 20. Mão na massa - Protótipo testar - empacotar - instalar - entregar
    21. 21. Fixando o Aprendizado 1 1)Em um editor de texto, crie o projeto e estrutura de pastas usada] 2)Crie um arquivo index.html com a estrutura mostrada em estrutura.txt 3)Adicione as marcações HTML do index.html de exemplo 4)Referencie as bibliotecas de terceiros da pasta vendors 5)Instale o PhoneGap Desktop na sua máquina 6)Crie um novo projeto PhoneGap e copie os arquivos na pasta www 7)Rode o servidor do PhoneGap
    22. 22. O cliente gostou! Bora desenvolver, mas espera! Mundo WEB != Mundo Mobile Estude Mobile e prepare-se Mundo Mobile Híbrido == Mundo Mobile Mesmo ambiente de desenvolvimento, UX deve ser a mesma Mundo do Carro Híbrido == Mundo do Carro Normal O ambiente de desenvolvimento é o mesmo, mesma UX
    23. 23. Ambiente de Desenvolvimento Mobile
    24. 24. - Java Development Kit (JDK) - Android SDK - SDK Packages - Android Studio - Genymotion - MAC e um device com iOS 8 - iOS SDK - Xcode - Windows 8 Pro 64 bits - WP8 - Windows Phone SDK - Visual Studio 2012 Ambiente de Desenvolvimento Mobile
    25. 25. Preparando o Ambiente para Desenvolvimento Android https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html - Java Development Kit (JDK) - Android SDK - Android Studio - Adicionar o Pacote SDK para a versão da API desejada - Genymotion (alternativa para o emulador do Android Studio) - Configurar Variáveis de Ambiente JAVA_HOME e ANDROID_HOME e diretórios 'tools' e 'platform-tools' do Android SDK - java -version
    26. 26. Preparando o Ambiente para Desenvolvimento iOS https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html - Mac rodando OS X 10.9 ou superior - iOS 8 SDK (incluído OS X) - Xcode 6.0 ou superior (gratuito) - iPhone 4s ou superior ou iPad 3 ou iPod Touch geração 5 - Publicar na App Store: exige Xcode e uma conta de desenvolvedor que custa $99 anuais.
    27. 27. Preparando o Ambiente para Desenvolvimento Windows Phone https://cordova.apache.org/docs/en/latest/guide/platforms/wp8/index.html - Windows 8.1 ou superior, na versão Pro 64 bits. - Visual Studio - Para emular: processador Intel moderno com suporte a Hyper-V; - Windows Phone 8 registrado na SDK e intalar o app pelo Desktop - Publicar na WP Store: via Web, exige uma conta de desenvolvedor, custa $19 por ano.
    28. 28. Mão na massa: Integrar o app à API Web PhoneGap CLI - $ phonegap create - $ phonegap serve - $ phonegap plugin - $ phonegap platform - $ phonegap build - $ phonegap run - $ phonegap run --emulator - $ phonegap emulate
    29. 29. Fixando o Aprendizado 2 1) Configure o Ambiente Java e Android e o teste o ambiente 2) Instale o Node e o NPM e teste a instalação 3) Instale e teste o Git 4) Instale o PhoneGap CLI e teste 5) Crie um novo projeto PhoneGap através do CLI e rode e visualize no Browser 6) Abra o projeto em um editor de texto e teste o Livereload do PhoneGap 7) Pare o servidor, exclua o conteúdo da pasta www e transfira os arquivos do projeto 8) Exclua os plugins e plataformas adicionados pelo PhoneGap e adicione o plugin whitelist e a plataforma Browser (sempre registrando no config.xml) 9) Integre o código à API web (cole o codigo js e comente onde a api está sendo consultada)
    30. 30. Nova Funcionalidade para a WeLoveStarWars - Cliente gostou e deseja agora um leitor de QR Code para ler o código de baras dos itens e mostrar uma descrição de cada personagem à venda na loja. App em fullscreen e apenas modo retrato Requisitos Funcionais: - O cliente vai gerar QR Codes com os IDs dos personagens que estão no BD e colar nos itens - Os clientes da loja vão levar esses items até o tablet, escolher a opção ‘escanear personagem’ - O app vai ler o QR Code e abrir uma tela com a descrição do personagem
    31. 31. Requisitos - Acessar a funcionalidade nativa de leitor de código de barras - Criar nova View e novo código consultando a API web - Apenas para Android e apenas para os tablets da loja Considerações: - Funcionalidade simples e o Cordova tem um plugin pronto - Já temos o projeto integrado no Cordova - Nosso código já está bem complexo com apenas 2 views
    32. 32. Qual seria a melhor solução?? - Continuar no híbrido? - Partir pro nativo?
    33. 33. - Aplicativo Híbrido - SPA com Angular - Acesso nativo com o Cordova - Gerenciar as dependências com Bower e Gulp ou Grunt
    34. 34. Aplicativo Híbrido - Relembrando o Conceito Código web rodando de maneira embarcada dentro de uma plataforma nativa, COM ACESSO a recursos e funcionalidades nativas. O que a gente vai precisar? - Acesso às APIs nativas - Cordova - Acesso à API Web - $http Angular - Sistema de SPA - Angular - Aparência de app Android - Materialize
    35. 35. Acesso às APIs nativas: Obrigado Cordova! https://cordova.apache.org/docs
    36. 36. PhoneGap e Cordova - História e Eliminando Confusão Código Open-Source Produto e Serviços 1 dos serviços do PhoneGap PhoneGap: Distribuição Open Source do Cordova (http://phonegap.com)
    37. 37. 1 código-fonte Rodando em todas plataformas Write Once, Run Anywhere Cordova
    38. 38. Cordova: Arquitetura
    39. 39. Cordova: Arquitetura > Webview - Componente Nativo - Navegador enxuto (sem interface) - Tem acesso as APIs nativas do device - Invólucro da nossa app - Cordova app = são Embedding WebViews - Cordova cria e chama uma nova WebView com poderes especiais para cada plataforma - Android WebViews
    40. 40. Cordova: Arquitetura > Webview Motor de Renderização de HTML
    41. 41. Cordova Mistura tecnologias web (JavaScript) com componentes nativos (WebView) que pode acessar APIs do nível do device. Acesso nativo ao device com JavaScript: - Battery Status - Camera - Contacts - File - Geolocation - Media Capture - Vibration - Network Information - etc JavaScript Cordova Interpretador Código Nativo (Ponte)
    42. 42. Cordova: Arquitetura > Web App - Onde o código reside - Criado como uma página web - Executado dentro de uma WebView - config.xml
    43. 43. Cordova: Arquitetura > Plugins - Parte integral do Ecossistema do Cordova - Encapsula código JavaScript que acessa as APIs nativas - Interface de comunicação entre o Cordova e componentes nativos - Permite invocar código nativo através de JavaScript - Provê plugins principais e vários outros criados pela comunidade (https://cordova.apache.org/plugins/) - Pode criar seus próprios plugins - Todo plugin deve ser explicitamente adicionado no projeto
    44. 44. Cordova: API
    45. 45. Ciclo de Vida da Aplicação Cordova - Igual às Activities Lifecycle - Apps contém diversas Activities - Webview: é um activity
    46. 46. Activity
    47. 47. O Arquivo config.xml Configurações globais do app e para plataformas específicas - Nome do app, ícone, splash screen, autor, descriçao do app - Permissoes do app, versões das plataformas - Preferências (globais ou por plataforma): - Orientação, fullscreen, cor de fundo, overscroll. - <preference name=”Orientation” value=”portrait” /> (global) - <platform name=”android”> <preference name=”Overscroll” value=”false” /> </platform http://docs.build.phonegap.com/en_US/configuring_preferences.md.html (configurando preferências)
    48. 48. O Arquivo config.xml > ícone e splash screen - Criar os arquivos e apontar o caminho no config.xml - <icon src=”resources/icon.png” width=”” height=”” /> - <splash src=”resources/spash.png” width=”” height=”” /> - Adicionar plugin Splash Screen - <preference name="SplashScreenDelay" value="2000" /> - <preference name="FadeSplashScreenDuration" value="2000" /> - Criar, exportar e registrar TODAS imagens para as diversas plataformas,
    49. 49. Ícones e Splash Screen > Arquivo base icon.png splash.psd
    50. 50. Mão na massa: Ionic Resources
    51. 51. Fixando o aprendizado 3 - Ionic Resources 1)Exclua os icones e splash do config.xml 2)Instale o Ionic 3)Converta o projeto para um projeto Ionic 4)Exclua a pasta www/res 5)Crie a pasta ./resources 6)Crie os arquivos base icon.png e splash.psd 7)Gere os arquivos com o Ionic Resources
    52. 52. O Arquivo config.xml > engines - Plataformas que o app dá suporte - Controla a pasta platforms - Útil para outros desenvolvedores da equipe - Importante para versionadores como o Git (não deve ser versionada) - <engine name=”android” spec=”5.0.0” /> - <engine name=”ios” spec=”4.0.1” /> $ cordova platform add android --save $ cordova prepare
    53. 53. O Arquivo config.xml > plugins - Plugins que o app depende - Controla a pasta plugins - Útil para outros desenvolvedores da equipe - Importante para versionadores como o Git (não deve ser versionada) - <plugin name=”cordova-plugin-whitelist” spec=”~1.2.2” /> $ cordova plugin add cordova-plugin-whitelist --save $ cordova plugin rm cordova-plugin-whitelist --save $ cordova plugin ls
    54. 54. Mais sobre o Cordova - Plataformas https://cordova.apache.org/docs “É muito importante conhecer bem como funciona o Cordova na plataforma que vc está desenvolvendo”
    55. 55. Angular - O Framework Font-end da Google - Muito mais que um simples SPA - Framework Front-end Completo - Manipulação do DOM (foco na RN) - Separação de Interesses no Front-end (MVC), testes de unidades - Concistência entre a Visão e o Modelo - Injeção de Dependências - Services e Factory - Diretivas
    56. 56. Porque Angular? - Google e Microsoft - Comunidade - Curva de Aprendizado - MVC feito do jeito certo - Pronto pra testes de unidade - Integração com bibliotecas - Material Design (Angular Material) - Bootstrap (angular.bootstrap) - Google Maps (NgMap)
    57. 57. Porque Angular?
    58. 58. Separação de Interesses
    59. 59. Angular: MVC Modelo = objeto $scope Visão = HTML Controlador = Angular Controller Service/Factory Dados Trata os Dados
    60. 60. Angular: Controller $scope busca os dados em um -> Factory -> Controller manipula e envia -> View onde o conteúdo (dados) e injetado Executado apenas quando necessário $scope = two-way data binding Caminho inverso: View recebe dados do usuário ($scope) -> Controller valida e trata -> envia para um Service (Factory)
    61. 61. Angular: View HTML, recebe dados do usuário e é “colada” (binding) com o Controller através do objeto $scope - Habitat das Diretivas do Angular
    62. 62. Angular: Model e Angular Expression (AE) Model é o objeto $scope: a “cola” entre a view e o controller - Two-way Data Binding - POJO Angular Expression (AE) é representada por {{ }}, então: No Controller: $scope.nomeFruta = “banana”; No HTML: <p>Fruta: {{ nomeFruta }}</p>
    63. 63. Angular: Directives - HTML (atributos ng-*) - ng-app - ng-model - ng-controller - ng-repeat - filter
    64. 64. Demo
    65. 65. Angular: Directives - HTML (atributos ng-*) - ng-hide - ng-show - ng-if - ng-click, ng-blur, ng-mouseover…. (e todos os outros eventos do JavaScript)
    66. 66. Demo
    67. 67. Angular: Factory modulo.factory('myFactory', function() { // factory sempre retorna um objeto // pode executar código antes var someText = “How are you?”; return { sayHello : function(name) { return "Hi " + name + "!" + someText; } } });
    68. 68. Angular: Services app.service('myService', function() { // service é um objeto que quando injetado é instanciado implicitamente com a palavra-chave new this.sayHello = function(name) { return "Hi " + name + "!"; }; }); Serviços prontos pra uso: $http, $timeout, $interval, $log ... Pedaços de lógica de negócios reutilizáveis por toda a aplicação
    69. 69. O Serviço $http - Injetado como qualquer outro artefato do Angular - Recebe como parâmetro um objeto: - { method: método utilizado, pode ser GET, POST, PUT ou DELETE url: endereço do recurso acessado data: objeto no qual cada propriedade será um parâmetro na requisição } - $http({method: 'GET', url: '/filmes/'}); - $http.get(‘url’) e $http.post(‘url’)
    70. 70. O Serviço $http não retorna dados O que seria isso: $http({method: 'GET', url: '/filmes'}, function(resposta) { var dados = resposta; // dados é um array pronto pra ser usado }); É isso: var dados = $http({method: 'GET', url: '/filmes'}); console.log(dados); // exibe undefined A variável dados é uma promise e tem a promessa de conter dados em um futuro próximo, assim podemos seguir em frente sabendo que ele vai cumprir a promessa
    71. 71. O Padrão Promise Como na vida real, ao receber uma promessa de alguém, seguimos nossa vida sabendo que ela pode ser cumprida ou não, por isso a promise tem estados: - Fullfiled: a promessa foi cumprida - Rejected: promessa rejeitada (fudeu, a pessoa disse que não vai cumprir) - Failed: nem cumprida e nem rejeitada (fudeu, deu um erro e a pessoa morreu) Promises têm um método then() e catch();
    72. 72. Funções Catch, Success e Error do $http promise.success(function(data, status, headers, config) {}) .error(function(statusText, status, headers, config) {}); Fullfiled Rejected ou Failed var promise = $http({method: 'GET', url: '/filmes'}); promise.then(function() {}, function() {}); Fullfiled Rejected ou Failed promise.then(function() {}).then(function() {}).then(function() {}).catch(function() {}); Fullfiled Fullfiled Rejected ou Failed
    73. 73. Demo
    74. 74. ngAnimate - Adiciona ou remove classes pré-definidas para um conjunto de diretivas, sendo elas: - ng-show - ng-hide - ng-class - ng-view - ng-include - ng-repeat - ng-if - ng-switch https://docs.angularjs.org/api/ngAnimate http://www.w3schools.com/angular/angular_animations.asp Adiciona ou remove a classe ng-hide Adiciona a classe ng-enter quanto entra no DOM E a classe ng-leave quanto sai no DOM Use essa funcionalidade para adicionar propriedades de animação no CSS
    75. 75. Angular: Custom Directives modulo.directive(“minhaDiretiva”, function() { return { templateUrl: “estrelas.html”, restrict: [“ACEM”], link: function(scope, iElement, iAttrs) { } } }); “A” <div minha-diretiva /> “E” <minha-diretiva /> “C” <div class=”minha-diretiva”> “M” <!-- minha-diretiva --> https://docs.angularjs.org/guide/directive
    76. 76. Demo
    77. 77. App Mobile sem CDN, por favor! - Entrar nos sites de cada biblioteca - Fazer download - Descompactar - Adicionar em uma pasta dentro do projeto - Referenciar no HTML - Identificar dependências e adicioná-las também - E depois pra minificar e juntar como o nosso JavaScript’s e CSSs??
    78. 78. - Toda tarefa repetitiva e sem criatividade, robôs podem fazer pra nós Gulp 1) Define tarefas com gulp.task() 2) Procura por mudanças em arquivos com gulp.watch() 3) Abre arquivos/diretório com gulp.src() 4) Cospe arquivos/diretorios com gulp.dest() Usa sequências de pipe() O Ionic usa o Gulp!
    79. 79. Com ajuda do Bower 1) Instalar e remover dependência com o Bower 2) Toda vez que o bower.json mudar, atualizar as referências no HTML 3) Separar arquivos de Desenvolvimento dos de Deploy 4) Integrar essas mudanças com o Livereload do Ionic Serve a) Sempre que alterar um arquivo Dev fazer o deploy na hora 5) Achar todos arquivos JavaScript referenciados no HTML a) Minificar (Uglify) b) Juntar em 1 arquivo só c) Salvar em algum lugar
    80. 80. Demo
    81. 81. Rotas Conectam Views e Controllers através de URLs e/ou Estados - Rota padrão do Angular: ngRoute - Organizadas por URLs - A View é sempre injetada no mesmo lugar pré-definido - Ionic usa uma rota mais flexível: UI-Router - Organizada por states da aplicação e opcionalmente por URLl, e comportamentos - Pode conter mais de 1 view na mesma rota que são injetadas em lugares distintos - Um state é como a UI se parece e o que ela está fazendo em um certo momento
    82. 82. UI Router - Padrão do Ionic UI-Router is a client-side router for single page web applications. Roteador client-side atualiza a URL do browser assim que o cliente navega pela SPA e mapeia funcionalidades em states e URLs (opcional)
    83. 83. UI Router - Trabalha com states <!-- na index.html --> <body ng-controller="MainCtrl"> <section ui-view></section> </body> // no arquivo de coniguração de rotas $stateProvider.state('contacts', { template: '<h1>My Contacts</h1>' }) Templates são injetados nos estados pais (<ui-view>). Um state é ativado com o comando $state.go() , em um links dentro de ui-sref=”” ou navegando pra uma url com um estado associado Top level state
    84. 84. UI Router Assinando um Controller a um template: $stateProvider.state('contacts', { template: ..., Controller: function($scope) { $scope.title = ‘Contacts’ } }) Alternativamente pode-se adicionar a sintaxe ‘controller as’ $stateProvider.state('contacts', { template: ..., controller: 'ContactsCtrl', controllerAs: 'contact' }) $stateProvider.state('contacts', { template: ..., controller: 'ContactsCtrl as contact' }) ou
    85. 85. UI Router > Resolve Objects e Custom Datas - Data: Injeta no Controller dados específicos do state - Resolve: Resolve dependências (objetos) e injeta no Controller - Devem ser resolvidos - bloqueiam acesso $stateProvider.state('contacts', { template: ..., controller: 'ContactsCtrl', resolve: { autentica: function($http){ // $http returns a promise for the url data return $http({method: 'GET', url: '/someUrl'}); } }, data: { customData1: 44 } }) controller: function($scope, $state, autentica) { $scope.autenticado = autentica.data; console.log($state.current.data.customData1) }
    86. 86. UI Router > Eventos onEnter e onExit $stateProvider.state('contacts', { template: ..., controller: 'ContactsCtrl', resolve: { autentica: function($http){ // $http returns a promise for the url data return $http({method: 'GET', url: '/someUrl'}); } } onEnter: function(title){ if(autentica.data){ ... do something ... } }, onExit: function(title){ if(autentica.data){ ... do something ... } } }) Outros eventos:https://github.com/angular-ui/ui-router/wiki#state-change-events - Chamados antes de entrar ou sair de um state - Têm acesso a todas às dependências do Resolve
    87. 87. UI Router > Nested States e Nested Views States podem ser aninhados com outros states .state('contacts.list', {}) ou parent: 'contacts' O state list é filho do state contacts e herda apenas os resolvers e custom datas http://goo.gl/kOG3je. Quando o list é ativado o contacts é implicitamente ativado também <ui-view> <ui-view> Template da list Template da contacts index Contacts.list é ativado
    88. 88. UI Router > Abstract States Usado nos starters Sidemenu e Tabs do Ionic Ativados implicitamente quando quando ativamos filhos Não podem ser ativados sozinhos Úteis para qualquer tipo de herança entre todos os filhos: - Templates - Resolvers - Custom Datas - Controller - $scope
    89. 89. UI Router > Multiple Named Views https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views <!-- index.html --> <body> <div ui-view="filters"></div> <div ui-view="tabledata"></div> <div ui-view="graph"></div> </body> $stateProvider .state('report',{ views: { 'filters': { templateUrl: 'report-filters.html',controller: ‘RCtrl’ }, 'tabledata': { templateUrl: 'report-table.html', controller: ‘TRCtrl’ }, 'graph': { templateUrl: 'report-graph.html', controller: ‘GRCtrl’ } } }); Usado no starter Tabs do Ionic
    90. 90. UI Router > URL Routing Ideal para passar parâmetros: $stateProvider .state('contacts.detail', { url: "/contacts/:contactId", ou url: "/contacts/{contactId}" e ainda url: "/contacts/{contactId:int}" templateUrl: 'contacts.detail.html', controller: function ($stateParams) { // If we got here from a url of /contacts/42 expect($stateParams).toBe({contactId: "42"}); } }) https://github.com/angular-ui/ui-router/wiki/URL-Routing
    91. 91. UI Router > URL Routing e Nested Views juntos Combina a URL do filho com a do pai $stateProvider .state('contacts', { url: '/contacts', ... }) .state('contacts.list', { url: '/list', ... }); https://github.com/angular-ui/ui-router/wiki/URL-Routing 'contacts' state é acessado com "/contacts" 'contacts.list' state é acessado com "/contacts/list".
    92. 92. UI Router > Organizando States var contactState = { name: 'contacts', url: "/contacts/:contactId" templateUrl: 'contacts.detail.html', Controller: ContactController }; $stateProvider.state(contactState);
    93. 93. UI Router > Principais Componentes e Documentação $state / $stateProvider: Gerencia as definições e comportamentos dos states Diretiva ui-sref: Equivalente ao href ou ng-href dos elementos <a /> com excessão que o valor será o nome de um state. Adiciona implicitamente o href de acordo com a URL associada no state. <ui-view />: Renderiza a view definida no state atual. Pode se dizer que são Placeholders. - Ionic: <ion-nav-view /> - Angular (ngRoute): <ngview /> $urlRouter / $urlRouterProvider: Gerencia a lista de rotas e regras de rotas procurando em todas qual é a que combina com a que está sendo requisitada. Executa sempre que há uma mudança de state. https://github.com/angular-ui/ui-router/wiki/The-Components (descrição dos componentes) http://angular-ui.github.io/ui-router/site/#/api/ui.router (documentação do UI Router)
    94. 94. Angular Methods: Run e Config - Config é executado antes de tudo (um ótimo lugar para configurar rotas) - Run é executado depois do config() e antes do resto
    95. 95. Mão na massa: Adicionando Rotas
    96. 96. Opções de Desenvolvimento com Cordova 1) PhoneGap - Instale o PhoneGap - Cria as telas HTML - Referencia o script do cordova <script src=’cordava.js’ /> - Criar seus próprios CSS e JS - Adiciona plugins do Cordova no JS - Faz o build online no PhoneGap Build ou pela linha de comando 1.2) Adicione bibliotecas 2) Ou use Frameworks
    97. 97. Alternativas para Desenvolvimento Nativo com JS http://felipeblini.net/Desenvolvimento-de-Aplicativos-Moveis-com-Javascript-Ionic-React-Native-e-NativeScript
    98. 98. UI em Aplicativos Híbridos Multi-plataforma Platform Agnostic!
    99. 99. http://ionicframework.com Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components and tools for building highly interactive native and progressive web apps. Built with Sass, optimized for AngularJS.
    100. 100. Ambiente Necessário
    101. 101. - Escrito em cima do Angular (MVC, SPA, $http, ID, etc) - Performance (animações UI) - Componentes visuais focados em mobile e touch screen - Documentação completa - Suporte da comunidade e individual para empresas - Muito fácil de aprender e começar
    102. 102. Ionic Bundle ionic.bundle.js Concatenação do - ionic.js - Angular.js - Angular-animate.js - Angular-sanitize.js - Angular-ui-router.js
    103. 103. - Ecossistema (Ionic Platform) - Ionic View - Ionic Creator - Ionic Market - Ionic CLI - Cordova CLI
    104. 104. - Sistema de Grid em FlexBox - Botões - Listas - Cards - Ícones (http://ionicframework.com/docs/v2/ionicons/) - Formulários e muitos outros... - Disponíveis em SASShttp://ionicframework.com/docs/components/ Componentes do Ionic
    105. 105. Componentes do Ionic <ul class="list"> <li class="item"> … </li> </ul> <ion-list> <ion-item> … </ion-item> </ion-list> ou http://ionicframework.com/docs/components/ São diretivas criadas com Angular, como qualquer outra
    106. 106. Diretivas de navegação <ion-header-bar>: Header fixo. Título e dois botões <ion-nav-button> <ion-nav-bar>: Navegação no header. Ela que muda o título da <ion-nav-bar> e cuida dos headers das Views injetadas. Define o(s) <ion-nav-button> do header <ion-nav-button>: Adiciona-se 2 na <ion-nav-bar>. O primeiro vai pra esquerda e o segundo pra direita (back-button e toggle menu por exemplo) <ion-nav-back-button>: Botão voltar. Deve estar dentro da <ion-nav-bar> <ion-refresher> Atualiza o <ion-content > quando ocorre um overscroll <ion-infinite-scroll> Atualia o <ion-content> quando o limite de scroll for atingido
    107. 107. <ion-pane>: Similar a uma <div> <ion-view>: Define uma nova View. Será injetado no <ion-nav-view> - hide-nav-bar: Propriedade da <ion-view> que esconde ou não a <ion-nav-bar> - hide-back-button: Propriedade da <ion-view> que esconde ou não o <ion-nav-back- button> <ion-nav-view>: Extensão da <ui-view> do UI Router. Semelhante ao <ng-view> do Angular. Onde o conteúdo da <ion-view> é injetado <ion-content>: Conteúdo da View. Gerencia conteúdos. Possui uma classe CSS "has-header" que é adicionada automaticamente caso exista uma <ion-header-bar> por perto Diretivas de navegação
    108. 108. Nosso primeiro app com Ionic - Instalando o Ionic - Ionic CLI - Scaffolding de Templates - Códigos Boilerplates do Ionic - Gerenciador de aps (https://apps.ionic.io/apps) - O Ionic View (http://docs.ionic.io/tools/view/) - O Ionic Creator (https://creator.ionic.io)
    109. 109. Mão na massa: Enfim Ionic...

    ×