ionic + cordova para desenvolvimento mobile
TRANSCRIPT
Workshop: Ionic + Cordova
Waldyr FelixArquiteto Líder na FCamara desde 2013Microsoft MVP desde 2012Palestrante desde 2010Programador desde 2005
var contatos = {email : ”[email protected]”,blog: ”waldyrfelix.net”,
};
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
Aplicações Nativas
Opções Tecnológicas
Aplicações Híbridas
Aplicações Cross-Platform
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
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:
Componente ngCordova
Plugins
CAMERA TOUCH ID GEOLOCATION
PUSH NOTIFICATION OAUTH
Criando um Projeto no Ionic
$> ionic templates
$> ionic start sidemenu
Inicar projeto
Templates
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
Executando uma Aplicação
$> ionic serveExecutar no browser
$> ionic serve --labou
Build da Aplicação
$> ionic platform add androidAdicionando Android/iOS
$> ionic build android
$> ionic platform add ios
Gerando Pacotes Android/iOS
$> ionic build ios
Emulando a AplicaçãoEmuladores NativosSe for iOS é necessário instalar o "ios-sim"
$> ionic emulate ios$> ionic emulate android
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
Ionic ViewJeito Fácil de Testar Aplicativos$> ionic login$> ionic upload
$> ionic share [email protected]
Demonstração
Futuro do Ionic
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.
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.
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
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
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
