Ionic Framework - Configuração do ambiente e a criação da primeira APP
-
Upload
fabio-godoy -
Category
Software
-
view
1.881 -
download
1
description
Transcript of Ionic Framework - Configuração do ambiente e a criação da primeira APP
Ionic FrameworkDesenvolvimento Mobile Híbrido Multi Plataforma
Por Fábio Godoy
Quem sou eu?Formado em Sistemas de Informação, especialista em Gerenciamento de Projetos.Gerente de Fábrica de Software da Betha Sistemas (www.betha.com.br), com as certificações: OCJP, OCWCD, OCBCD, CSM.
Por onde iremos?● Origem do framework● Porque desenvolvimento híbrido?● Configurando o ambiente● Criando nossa aplicação
Origem do FrameworkE no princípio, tudo era PhoneGap ...Foi um framework criado pela Nitobi Software, premiado pela O’Reilly Media em 2009, e aceito por grandes empresas do mercado móvel, como a Apple por exemplo.Em 2011 a Nitobi foi comprada pela Adobe, que cedeu o núcleo do PhoneGap para a Apache Foundation, dando origem a um novo projeto chamado Apache Cordova.
Origem do FrameworkEntão Temos
PhoneGap x Apache Cordova (Pago) (Gratuito)
http://cordova.apache.org
Origem do FrameworkTwitter Bootstrap
Uma coleção de ferramentas utilizadas para criação de websites e aplicações web ricas, contém um conjunto de componentes html, css e javascript.Foi criado e utilizado internamente pelo Twitter, que em 2011 abriu seu código para a comunidade, e 6 meses depois já era o projeto com maior número de estrelas no github.
http://www.getbootstrap.com
Origem do FrameworkAngularJS
Framework Javascript mantido pela Google, criado para o desenvolvimento de SPAs (Single Page Applications).Implementou na web o conceito two way databinding.
View reflete o ControllerController reflete a View
http://www.angularjs.org
Origem do Framework
Ok, viemos falar de Ionic, mas até agora falamos de outros 3
frameworks ...
Origem do FrameworkO Ionic Framework foi construído sobre estes outros poderosos frameworks
http://www.ionicframework.com
Porque Desenvolvimento Híbrido?
Há um tempo atrás … escrevi um post no linkedin, contando uma história sobre como eu encontrei o Ionic e os motivos que me levaram a optar por ele, abaixo o link para o artigo original (leiam irmãos!!) e um breve resumo.
https://www.linkedin.com/today/post/article/20140612154131-26248656-ionic-framework-porque-utilizar
Porque Desenvolvimento Híbrido?
● Baixa curva de aprendizado● Menor custo no desenvolvimento● Mesmo código, várias plataformas● Compatibilidade entre dispositivos
Porque Desenvolvimento Híbrido?
E porque o Ionic?
1) MVC - quando se fala em aplicativos híbridos se fala em javascript, simples assim e não tem jeito, então o framework precisa garantir uma arquitetura MVC para uma boa organização, leitura e entendimento do código fonte.
2) Boa Suíte de Componentes - pois bem, se vou escolher um framework, os componentes deste precisam ser muito parecidos, o ideal é que sejam iguais, aos nativos das plataformas e que sejam suficientes para minha app, um framework com dois ou três componentes não serviria.
Porque Desenvolvimento Híbrido?
E porque o Ionic?
3) Produtivo! Como não me considero um ultra mega super expert em javascript precisava de algo abstraísse o máximo possivel, para que meu foco fosse necessariamente o objetivo da minha app.
Para conferir o final dessa história emocionante, leia o post dos slides anteriores.
Configurando o AmbienteComeçando pelo começo, hoje em dia tudo no universo javascript começa pela instalação do nodejs.1) Vá para o site: http://nodejs.org, e siga os
procedimentos de instalação (se tiver dúvida me chame, se estiver vendo a apresentação pelo slideshare, bem aí só lamento =) ).
Configurando o AmbienteVamos ver se tudo deu certo na instalação. Se estiver no windows,gosto não se discute, abra um prompt do DOS, agora se tiver usando algum SISTEMA OPERACIONAL, abra um shell (terminal) digite npm e tecle enter.Você deve ter visto uma imagem semelhante a esta:
Configurando o Ambiente
Configurando o AmbienteSe você estiver usando o windows (gosto não se discute), você pode ter se deparado com um erro semelhante a este:Error: ENOENT, stat 'C:\Users\RT\AppData\Roaming\npm'
A correção é simples, a última pasta 'npm' não foi criada, é necessário copiar o caminho que deu o erro na sua máquina, e criar o diretório 'npm' manualmente.
Configurando o Ambiente2) Próximo passo, instalar o cordova e o ionic:Ainda no shell (sim eu espero que você esteja num shell).
npm install -g cordova ionic
Configurando o Ambiente3) Hora de instalar o Android SDK, escolhi o Android pela
facilidade, pode ser baixado e compilado em qualquer sistema operacional (até no windows) sem pagar nada.
Acesse o endereço: http://developer.android.com/sdk/index.html e clique no link get the sdk for an existing IDE.
Configurando o AmbienteAtenção, é muito importante configurar a variável de ambiente ANDROID_HOME no seu sistema.Para confirmar a correta instalação, digite no shell: androidDeverá ser aberto o sdk manager, conforme imagem.
Configurando o Ambiente
Configurando o AmbienteAté aqui já seria possível:
● Criar um projeto Ionic● Adicionar a plataforma android● Compilar um app nativo android (ops! para isto ainda
precisamos instalar mais uma ferramenta)
Configurando o Ambiente4) Vá até o site:
ant.apache.orgBasta fazer o download da última versão, descompactar em um diretório a sua escolha.IMPORTANTE: Você precisa configurar a variável de ambiente ANT_HOME, para que possamos compilar a app nativa.
Configurando o AmbienteO que temos até aqui?
O ambiente Ionic configurado, pronto para gerar nosso primeiro aplicativo híbrido e a partir dele gerar uma versão compilada para o Android.
Configurando o AmbienteUtilizaremos como IDE de desenvolvimento o Notepad++ ou o TextMate, que podem ser baixados respectivamente nos endereços abaixo:
http://macromates.com/ (MAC ou LINUX)http://notepad-plus-plus.org/ (windows)
Configurando o AmbienteExiste três possibilidades de iniciar um projeto Ionic:● ionic start <nome do aplicativo> blank● ionic start <nome do aplicativo> tabs● ionic start <nome do aplicativo> sidemenu
Configurando o Ambiente
Configurando o AmbienteTestando tudo!Abra um shell (command) e digite:ionic start helloworld blank (um diretório chamado 'helloworld' foi criada, e dentro dela o diretório 'www' onde iremos realizar o trabalho todo.
Configurando o AmbienteTestando tudo!Dentro do diretório blank, pela linha de comando digite:ionic serveCaso seja apresentado algumas opções escolha o número que corresponda a 'localhost'O navegador padrão será aberto com a aplicação e cada alteração feita no código, refletirá na hora no navegador, sem necessidade de recarregar
Configurando o AmbienteTestando tudo!Digite android na linha de comando, que o SDK Manager será exibido, precisamos adicionar um emulador para ver nossa app rodando, vá no menu "Tools" e escolha a opção Manage AVDs… e lá crie seu novo dispositivo.
Configurando o Ambiente
Configurando o AmbienteTestando tudo!Beleza, último slide sobre o ambiente (prometo), na linha de comando dentro da pasta 'helloworld' digite:● ionic platform add android (vai adicionar suporte ao
android)● ionic emulate android (resultado no próximo slide)
Configurando o Ambiente
Vamos ao que Interessa!
Criando nossa AplicaçãoIremos criar um cadastro de cliente, que funcionará de sem depender da internet, e irá possuir os seguintes atributos:Nome CompletoEmailTelefoneEndereço (uf, cidade, bairro, rua, nº, cep, complemento)Observação (informações úteis sobre o cliente)
Criando nossa Aplicação
Criando nossa Aplicação
Não se desespere!Vou mandar um passo a passo semelhante a este, para
criar a app que está no slide anterior.www.linkedin.com/in/fgodoy
@fabiorgodoy