ionic + cordova para desenvolvimento mobile
TRANSCRIPT
![Page 1: Ionic + Cordova para Desenvolvimento Mobile](https://reader034.vdocuments.site/reader034/viewer/2022051404/5874f72b1a28ab917a8b8247/html5/thumbnails/1.jpg)
Workshop: Ionic + Cordova
![Page 2: Ionic + Cordova para Desenvolvimento Mobile](https://reader034.vdocuments.site/reader034/viewer/2022051404/5874f72b1a28ab917a8b8247/html5/thumbnails/2.jpg)
Waldyr FelixArquiteto Líder na FCamara desde 2013Microsoft MVP desde 2012Palestrante desde 2010Programador desde 2005
var contatos = {email : ”[email protected]”,blog: ”waldyrfelix.net”,
};
![Page 3: Ionic + Cordova para Desenvolvimento Mobile](https://reader034.vdocuments.site/reader034/viewer/2022051404/5874f72b1a28ab917a8b8247/html5/thumbnails/3.jpg)
Mercado de Mobilidade
* Pesquisa Instituto Datafolha 2014
62,5 Milhões O mercado brasileiro possui mais de 62 milhões de usuários de dispositivos móveis.
Celular
Computador
Notebook
Tablet
0 10 20 30 40 50 60
% dos meios de acesso a internet do consumidor brasileiro
52% Preferem o CelularCelulares são o meio de acesso preferido dos usuários quando estão em casa.
67% Investirão em Mobile 67% das empresas brasileiras pretendem investir no seguimento de mobilidade nos próximos 12 meses.
Mobile como EstratégiaAs empresas que pretendem investir em mobile tem estratégias diferentes, onde:
67% ganho de produtividade57% melhor atendimento aos clientes50% melhoria de gestão
![Page 4: Ionic + Cordova para Desenvolvimento Mobile](https://reader034.vdocuments.site/reader034/viewer/2022051404/5874f72b1a28ab917a8b8247/html5/thumbnails/4.jpg)
Aplicações Nativas
Opções Tecnológicas
Aplicações Híbridas
Aplicações Cross-Platform
![Page 5: Ionic + Cordova para Desenvolvimento Mobile](https://reader034.vdocuments.site/reader034/viewer/2022051404/5874f72b1a28ab917a8b8247/html5/thumbnails/5.jpg)
Aplicações Híbridas Ionic Desenvolvimento de aplicações mobile usando HTML e AngularJS.
Linguagem e componentes conhecidos Com o Ionic é possível desenvolver os apps utilizando linguagens de programação e componentes já conhecidos dos programadores.
Compatível com diversas plataformas:
Desenvolvimento com Ionic
![Page 6: Ionic + Cordova para Desenvolvimento Mobile](https://reader034.vdocuments.site/reader034/viewer/2022051404/5874f72b1a28ab917a8b8247/html5/thumbnails/6.jpg)
Pré Requisitos para Desenvolver
$> npm install -g cordova$> npm install -g bower$> npm install -g ionic
Aplicações Híbridas Ionic• Instalar o Node.js
• Instalar um editor de texto como o Atom
• Instalar o Bower, Ionic e Cordova através do NPM:
![Page 7: Ionic + Cordova para Desenvolvimento Mobile](https://reader034.vdocuments.site/reader034/viewer/2022051404/5874f72b1a28ab917a8b8247/html5/thumbnails/7.jpg)
Componente ngCordova
![Page 8: Ionic + Cordova para Desenvolvimento Mobile](https://reader034.vdocuments.site/reader034/viewer/2022051404/5874f72b1a28ab917a8b8247/html5/thumbnails/8.jpg)
Plugins
CAMERA TOUCH ID GEOLOCATION
PUSH NOTIFICATION OAUTH
![Page 9: Ionic + Cordova para Desenvolvimento Mobile](https://reader034.vdocuments.site/reader034/viewer/2022051404/5874f72b1a28ab917a8b8247/html5/thumbnails/9.jpg)
Criando um Projeto no Ionic
$> ionic templates
$> ionic start sidemenu
Inicar projeto
Templates
![Page 10: Ionic + Cordova para Desenvolvimento Mobile](https://reader034.vdocuments.site/reader034/viewer/2022051404/5874f72b1a28ab917a8b8247/html5/thumbnails/10.jpg)
Estrutura do Projeto
Plataformas que serão usadas na App
Ações personalizadas a serem executadas quando a App passar para o contexto do Cordova.
Plugins instalados na App
Arquivos de estilo SASS
Onde é de fato desenvolvida a App, subpastas: css, img, js, lib e templates
![Page 11: Ionic + Cordova para Desenvolvimento Mobile](https://reader034.vdocuments.site/reader034/viewer/2022051404/5874f72b1a28ab917a8b8247/html5/thumbnails/11.jpg)
Executando uma Aplicação
$> ionic serveExecutar no browser
$> ionic serve --labou
![Page 12: Ionic + Cordova para Desenvolvimento Mobile](https://reader034.vdocuments.site/reader034/viewer/2022051404/5874f72b1a28ab917a8b8247/html5/thumbnails/12.jpg)
Build da Aplicação
$> ionic platform add androidAdicionando Android/iOS
$> ionic build android
$> ionic platform add ios
Gerando Pacotes Android/iOS
$> ionic build ios
![Page 13: Ionic + Cordova para Desenvolvimento Mobile](https://reader034.vdocuments.site/reader034/viewer/2022051404/5874f72b1a28ab917a8b8247/html5/thumbnails/13.jpg)
Emulando a AplicaçãoEmuladores NativosSe for iOS é necessário instalar o "ios-sim"
$> ionic emulate ios$> ionic emulate android
![Page 14: Ionic + Cordova para Desenvolvimento Mobile](https://reader034.vdocuments.site/reader034/viewer/2022051404/5874f72b1a28ab917a8b8247/html5/thumbnails/14.jpg)
Teste e Debug de AplicativosIonic ViewServiço do Ionic para facilitar o teste de aplicações entre dispositivos. http://view.ionic.io
Teste no BrowserUtilizando o Chrome DevTools como ferramenta de debug. $> ionic serve
Emuladores Emulando um dispositivo real no computador do desenvolvedor. $> ionic emulate
Teste no dispositivoRealizando um teste dentro do dispositivo conectado ao Chrome DevTools para debug. $> ionic run + Chrome Inspect
![Page 15: Ionic + Cordova para Desenvolvimento Mobile](https://reader034.vdocuments.site/reader034/viewer/2022051404/5874f72b1a28ab917a8b8247/html5/thumbnails/15.jpg)
Ionic ViewJeito Fácil de Testar Aplicativos$> ionic login$> ionic upload
$> ionic share [email protected]
![Page 16: Ionic + Cordova para Desenvolvimento Mobile](https://reader034.vdocuments.site/reader034/viewer/2022051404/5874f72b1a28ab917a8b8247/html5/thumbnails/16.jpg)
Demonstração
![Page 17: Ionic + Cordova para Desenvolvimento Mobile](https://reader034.vdocuments.site/reader034/viewer/2022051404/5874f72b1a28ab917a8b8247/html5/thumbnails/17.jpg)
Futuro do Ionic
![Page 18: Ionic + Cordova para Desenvolvimento Mobile](https://reader034.vdocuments.site/reader034/viewer/2022051404/5874f72b1a28ab917a8b8247/html5/thumbnails/18.jpg)
Uma Nova Estratégia Mobile
Mobile Smart ProjectCuidamos de todo o processo de desenvolvimento de seu app, desde a concepção até a publicação nas lojas de aplicativos.
Nosso propósito é desenvolver apps mobile rapidamente através de uma metodologia de engenharia de valor que promove a assertividade que o seu negócio precisa.
![Page 19: Ionic + Cordova para Desenvolvimento Mobile](https://reader034.vdocuments.site/reader034/viewer/2022051404/5874f72b1a28ab917a8b8247/html5/thumbnails/19.jpg)
Desenvolvimento inteligenteDesenvolvemos seu aplicativo apenas uma vez e publicamos nas principais lojas de apps.
Porque Mobile Smart Project
Equipe especializadaProfissionais formados através da experiência em projetos rápidos e de alto valor para o negócio.
Feito para todos os dispositivosTenha um aplicativo que funcione nas principais plataformas do mercado: iOS, Android e Windows Phone.
Valide suas ideiasDesenvolva seu App na velocidade de suas ideias e esteja no ar rapidamente.
Investimento fixoSaiba exatamente quanto vai pagar no início do projeto, independente das funcionalidades do seu app.
![Page 20: Ionic + Cordova para Desenvolvimento Mobile](https://reader034.vdocuments.site/reader034/viewer/2022051404/5874f72b1a28ab917a8b8247/html5/thumbnails/20.jpg)
Engenharia de Valor Arquitetura de Solução Plano de Execução Construção
Construir
Aprender MedirNosso modelo é baseado nos
métodos
eXtreme Programming
Lean Startup Design Thinking
MVP
Scrum
Mobile Smart Project: Como Fazemos
![Page 21: Ionic + Cordova para Desenvolvimento Mobile](https://reader034.vdocuments.site/reader034/viewer/2022051404/5874f72b1a28ab917a8b8247/html5/thumbnails/21.jpg)
Jornadas do Usuário
Visão do Produto Objetivo do Produto Objetivo Estratégicos Personas
Funcionalidades Matriz de Valor Canvas MVP
Definição de cliente final, problema, nome do produto, categoria, benefício chave, concorrentes, diferença chave.
Organização e planejamento de entregas do produto além do primeiro MVP.
Desenvolvimento de uma matriz estratégica com aspectos de esforço e valor por feature.
Descrição de uma ação ou interação de um usuário com o produto. Por exemplo: cadastrar usuários, consultar extrato.
Descrição dos percursos de um usuário por uma sequência de passos para alcançar um objetivo.
Mapeamento de características e necessidades específicas do usuário final.
Definição de objetivos a serem utilizados como critérios. Exemplo: Aumentar Receita, Fortalecer a Marca.
Definição de produto é, produto não é, produto faz, produto não faz.
Mobile Smart Project: Engenharia
![Page 22: Ionic + Cordova para Desenvolvimento Mobile](https://reader034.vdocuments.site/reader034/viewer/2022051404/5874f72b1a28ab917a8b8247/html5/thumbnails/22.jpg)
CONSTRUIR PrototipaçãoDesenvolvimento Único
Testes em Tempo RealAderência aos Padrões de Mercado
Desenvolvimento EspecializadoEntrevistas de Clientes
Revisões de Visão do ProdutoFeedbacks Quantitativos do ClienteFeedbacks Qualitativos do ClienteTestes com Usuários ReaisDefinição de Escopo
APRENDERAprendizado Rápido
PUBLICAÇÃOLicenciamento IncluídoPublicação nas Lojas de AplicativosPossibilidade de EvoluçãoEntrega do Código Fonte ao Cliente
Entrega Final
Mobile Smart Project: Construção