O workshop abordou o desenvolvimento de aplicações híbridas usando Ionic e Cordova, apresentando as principais ferramentas e etapas do processo como a criação de projetos, estrutura, emulação e publicação das apps. O palestrante também discutiu tendências do mercado mobile e apresentou uma estratégia para desenvolvimento de aplicativos.

1. Workshop:
Ionic + Cordova

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. 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. Aplicações Nativas
Opções Tecnológicas
Aplicações Híbridas
Aplicações Cross-Platform

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. 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. Componente ngCordova

8. Plugins
CAMERA TOUCH ID GEOLOCATION
PUSH NOTIFICATION OAUTH

9. Criando um Projeto no Ionic
$> ionic templates
$> ionic start sidemenu
Inicar projeto
Templates

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. Executando uma Aplicação
$> ionic serve
Executar no browser
$> ionic serve --lab
ou

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. Emulando a Aplicação
Emuladores Nativos
Se for iOS é necessário instalar o "ios-sim"
$> ionic emulate ios
$> ionic emulate android

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. Ionic View
Jeito Fácil de Testar Aplicativos
$> ionic login
$> ionic upload
$> ionic share waldyr.felix@fcamara.com.br

16. Demonstração

17. Futuro do Ionic

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. 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. 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. 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. 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. Obrigado
Contatos:
waldyr.felix@fcamara.com.br
http://waldyrfelix.net