Ionic + Cordova para Desenvolvimento Mobile

1.232 visualizações

Publicada em

Workshop realizado para os desenvolvedores da FCamara.

Publicada em: Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.232
No SlideShare
0
A partir de incorporações
0
Número de incorporações
198
Ações
Compartilhamentos
0
Downloads
21
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Ionic + Cordova para Desenvolvimento Mobile

  1. 1. Workshop: Ionic + Cordova
  2. 2. Waldyr Felix Arquiteto Líder na FCamara desde 2013 Microsoft MVP desde 2012 Palestrante desde 2010 Programador desde 2005 var contatos = { email : ”waldyr.felix@fcamara.com.br”, blog: ”waldyrfelix.net”, };
  3. 3. 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. 0 10 20 30 40 50 60 Celular Computador Notebook Tablet % dos meios de acesso a internet do consumidor brasileiro 52% Preferem o Celular Celulares 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égia As empresas que pretendem investir em mobile tem estratégias diferentes, onde: 67% ganho de produtividade 57% melhor atendimento aos clientes 50% melhoria de gestão
  4. 4. Aplicações Nativas Opções Tecnológicas Aplicações Híbridas Aplicações Cross-Platform
  5. 5. 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
  6. 6. 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:
  7. 7. Componente ngCordova
  8. 8. Plugins CAMERA TOUCH ID GEOLOCATION PUSH NOTIFICATION OAUTH
  9. 9. Criando um Projeto no Ionic $> ionic templates $> ionic start sidemenu Inicar projeto Templates
  10. 10. 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
  11. 11. Executando uma Aplicação $> ionic serve Executar no browser $> ionic serve --lab ou
  12. 12. Build da Aplicação $> ionic platform add android Adicionando Android/iOS $> ionic build android $> ionic platform add ios Gerando Pacotes Android/iOS $> ionic build ios
  13. 13. Emulando a Aplicação Emuladores Nativos Se for iOS é necessário instalar o "ios-sim" $> ionic emulate ios $> ionic emulate android
  14. 14. Teste e Debug de Aplicativos Ionic View Serviço do Ionic para facilitar o teste de aplicações entre dispositivos. http://view.ionic.io Teste no Browser Utilizando o Chrome DevTools como ferramenta de debug. $> ionic serve Emuladores Emulando um dispositivo real no computador do desenvolvedor. $> ionic emulate Teste no dispositivo Realizando um teste dentro do dispositivo conectado ao Chrome DevTools para debug. $> ionic run + Chrome Inspect
  15. 15. Ionic View Jeito Fácil de Testar Aplicativos $> ionic login $> ionic upload $> ionic share waldyr.felix@fcamara.com.br
  16. 16. Demonstração
  17. 17. Futuro do Ionic
  18. 18. Uma Nova Estratégia Mobile Mobile Smart Project Cuidamos 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.
  19. 19. Desenvolvimento inteligente Desenvolvemos seu aplicativo apenas uma vez e publicamos nas principais lojas de apps. Porque Mobile Smart Project Equipe especializada Profissionais formados através da experiência em projetos rápidos e de alto valor para o negócio. Feito para todos os dispositivos Tenha um aplicativo que funcione nas principais plataformas do mercado: iOS, Android e Windows Phone. Valide suas ideias Desenvolva seu App na velocidade de suas ideias e esteja no ar rapidamente. Investimento fixo Saiba exatamente quanto vai pagar no início do projeto, independente das funcionalidades do seu app.
  20. 20. Engenharia de Valor Arquitetura de Solução Plano de Execução Construção Construir Aprender Medir Nosso modelo é baseado nos métodos eXtreme Programming Lean Startup Design Thinking MVP Scrum Mobile Smart Project: Como Fazemos
  21. 21. 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
  22. 22. CONSTRUIR Prototipação Desenvolvimento Único Testes em Tempo Real Aderência aos Padrões de Mercado Desenvolvimento Especializado Entrevistas de Clientes Revisões de Visão do Produto Feedbacks Quantitativos do Cliente Feedbacks Qualitativos do Cliente Testes com Usuários Reais Definição de Escopo APRENDER Aprendizado Rápido PUBLICAÇÃO Licenciamento Incluído Publicação nas Lojas de Aplicativos Possibilidade de Evolução Entrega do Código Fonte ao Cliente Entrega Final Mobile Smart Project: Construção
  23. 23. Obrigado Contatos: waldyr.felix@fcamara.com.br http://waldyrfelix.net

×