Prepare-se para as provas
Estude fácil! Tem muito documento disponível na Docsity
Ganhe pontos para baixar
Ganhe pontos ajudando outros esrudantes ou compre um plano Premium
Guias e Dicas
Prepare-se para as provas
Estude fácil! Tem muito documento disponível na Docsity
Encontrar documentos
Prepare-se para as provas com trabalhos de outros alunos como você, aqui na Docsity
Pesquisar documentos Store
Os melhores documentos à venda: Trabalhos de alunos formados
Videoaulas
Prepare-se com as videoaulas e exercícios resolvidos criados a partir da grade da sua Universidade
Quiz
Responda perguntas de provas passadas e avalie sua preparação.
Ganhe pontos para baixar
Ganhe pontos ajudando outros esrudantes ou compre um plano Premium
Comunidade
Pergunte à comunidade
Peça ajuda à comunidade e tire suas dúvidas relacionadas ao estudo
Ranking universidades
Descubra as melhores universidades em seu país de acordo com os usuários da Docsity
Guias grátis
Os eBooks que salvam estudantes!
Baixe gratuitamente nossos guias de estudo, métodos para diminuir a ansiedade, dicas de TCC preparadas pelos professores da Docsity
1 Ionic Framework - Essencial.pdf, Resumos de Gestão da Tecnologia da Informação
1 Ionic Framework - Essencial.pdf
Tipologia: Resumos
2019
1 / 51
Esta página não é visível na pré-visualização
Não perca as partes importantes!
Documentos relacionados
Pré-visualização parcial do texto
Baixe 1 Ionic Framework - Essencial.pdf e outras Resumos em PDF para Gestão da Tecnologia da Informação, somente na Docsity!
Sobre este Ebook
O desenvolvimento de aplicativos móveis já não é novidade e está bem consolidado em
suas plataformas. Mas algumas discussões sempre ocorrem na hora de definir qual
plataforma desenvolver, se você procura está reposta neste ebook não irá encontrar,
pois são vários os fatores, e pontos de analise, que definem se você deve desenvolver
nativo ou híbrido e vamos deixar essa discussão para um outro momento.
Este ebook é o primeiro de uma série de ebooks que irão abordar o Ionic Framework,
neles você irá encontrar, de forma simples e objetiva, explicações, exemplos e muito
código sobre o desenvolvimento de aplicativos móveis híbridos. Cada ebook irá abordar
um tema específico, exceto este primeiro que é a base de aprendizado para os demais
assuntos.
Todos os ebooks elaborados por mim serão gratuitos, pois o objetivo central destes
materiais é o compartilhamento de conhecimento e disseminação deste framework
fantástico.
Público alvo
Este ebook foi escrito para você que está começando no mundo do desenvolvimento de
aplicativos móveis e tem interesse em aprender sobre uma tecnologia híbrida. Não
iremos abordar padrões de desenvolvimento e não vamos utilizar lógicas de
programação complexas para facilitar o aprendizado e ter um público mais amplo, tendo
em vista que iniciantes também no mundo da programação podem estar lendo este
ebook.
Este material não deverá ser seu único ponto de referência e guia, pois existem outros
ebooks, livros e blogs que falam sobre Ionic Framework e podem ampliar seu
conhecimento.
Sobre o autor
Fábio Rogério da Silva José , conhecido como Fábio Rogério SJ nas redes sociais, é
desenvolvedor de aplicações web e mobile desde quando o Internet Explorer 7 erá um
pesadelo e desenvolver aplicativos híbridos com tecnologias web era um trabalho árduo,
ou seja, desde 2007.
Atualmente Fábio Rogério trabalha com consultoria e treinamento em desenvolvimento
de aplicações web e mobile utilizando tecnologias híbridas. E também é professor, de
curso superior, onde ministra as disciplinas de desenvolvimento frontend ,
desenvolvimento de aplicativos móveis, web design, design de interação e lógica de
programação.
- Introdução
- Apache Cordova
- AngularJS
- ngCordova
- Ionic 2.0
- Instalando ambiente
- NodeJS
- Git
- Sublime Text
- Cordova e Ionic CLI
- Criando o primeiro app
- Estrutura dos projetos Ionic
- config.xml
- www
- Componentes
- Header
- Content
- Footer
- SubHeader e SubFooter
- Cores
- Icons
- Buttons
- List
- Cards
- Forms
- Toggle
- Checkbox
- Radio Buttons
- Range
- Select
- Tabs
- Grid
- Conclusão sobre componentes
- Empacotando o aplicativo
- Android
- iOS
- Próximo passo
Introdução
Desenvolver aplicativos móveis geralmente é divertido e, em muitos casos, uma tarefa
complexa dependendo dos requisitos do projeto. Escolher qual tecnologia utilizar é um
ponto altamente discutido nas comunidades e é a etapa principal do ciclo do
desenvolvimento, pois se você escolher a tecnologia “errada” o custo para migrar toda a
aplicação pode ser alto. Acredito que não existe uma tecnologia “errada”, mas sim
pessoas que não dominam tal tecnologia.
O Ionic é um framework open source e um dos frameworks , para desenvolver aplicativos
híbridos, mais utilizado no mundo, tendo mais de 23 mil stars e mais de 4 mil forks no
Github.
Sua premissa é utilizar tecnologias web, como HTML5, CSS e JavaScript, para
desenvolver aplicativos móveis híbridos, ou seja, aplicativos que usam tecnologias web e
também nativas. Se você sabe criar um site você conseguirá criar um aplicativo sem
muito esforço.
O diferencial do Ionic Framework é sua preocupação com a performance e ganho de
produtividade no desenvolvimento. Você vai comprovar isto no decorrer desde material
enquanto for criando os projetos exemplos.
O Ionic utiliza como base o projeto Apache Cordova e dispõe de uma seria de
componentes e um CLI ( command-line interface ) completo para criar, testar e publicar
aplicativos com apenas alguns comandos.
Apache Cordova
Em um evento chamado iPhoneDevCamp, ocorrido em São Francisco em 2006, três
jovens criaram uma plataforma para criar aplicativos com HTML5/CSS/JS denominado
PhoneGap. Em 2010 a Apple confirmou que a plataforma estava de acordo com os
parâmetros da licença para desenvolvedores iOS.
Em 2011 a Adobe comprou o PhoneGap e doou o código fonte do projeto para a
fundação Apache, porem o nome “PhoneGap” ficou exclusivo para a Adobe e o projeto
foi renomeado para Apache Cordova.
O Apache Cordova também é open source e é utilizado pelo Ionic para acessar as
funcionalidades nativas dos aparelhos móveis como acelerômetro, câmera e geo
localização. Ele também tem como requisito gerar o aplicativo para diferentes
plataformas como Android, iOS, Windows Phone, blackberry entre outros.
Instalando ambiente
Todos os comandos do Ionic, como criar um novo projeto, testar e distribuir, são feitos
direto no terminal através de um CLI ( command-line interface ) chamado Ionic CLI. O
Ionic CLI utiliza o NodeJS para executar tarefas e o Git para baixar alguns pacotes.
Para instalar o Ionic Framework você precisa ter instalado o NodeJS, Git e um editor de
códigos.
O Ionic pode ser instalado em Windows, Linux ou Mac, os passos seguintes são os
mesmos para os três sistemas operacionais.
NodeJS
NodeJS, ou Node.js, é uma plataforma construída sobre o motor JavaScript do Google
Chrome para facilmente construir aplicações rápidas e escaláveis. Para instalar o NodeJS
baixe a última versão, no site oficial, escolhendo seu sistema operacional:
https://nodejs.org.
Após baixado abra o executável e siga os passos de instalação até aparecer a tela de
instalação concluída. Juntamente com o NodeJS é instalado o NPM ( Node Package
Manager) , que é o gerenciador de pacotes dos módulos escritos em JavaScript utilizando
o NodeJS.
Git
Git é um sistema de controle de versão distribuído e um sistema de gerenciamento de
código fonte, com ênfase em velocidade. O Git foi inicialmente projetado e desenvolvido
por Linus Torvalds para o desenvolvimento do kernel Linux, mas foi adotado por muitos
outros projetos.
Como outros projetos open source o Ionic esta hospedado no GitHub, que é um servidor
de Git gratuito para projetos abertos, sendo assim precisamos do Git instalado na
maquina. Para instalar entre no link: https://git-scm.com/downloads e baixe a versão
para seu sistema operacional.
Após baixado siga os passos e deixe as configurações padrões de instalação até concluir.
Sublime Text
Sublime Text é um editor de código simples, rápido e eficiente, porem este passo não é
obrigatório caso você já utilize um outro editor. Para baixar o Sublime Text acesse o link:
https://www.sublimetext.com/3.
Cordova e Ionic CLI
Com o NodeJS e Git instalado vamos instalar o Cordova e o Ionic, o processo é bem
simples e consiste em apenas um comando, pois vamos utilizar o NPM para fazer a
instalação.
Abra um terminal, certifique-se que você tenha permissão de administrador, e digite o
comando abaixo. Os exemplos deste material são apresentados em ambiente Windows,
sendo assim para acessar o terminal abra o programa CMD.
npm install g cordova ionic
Este processo pode demorar alguns minutos dependendo de sua conexão. Ao concluir
digite o comando abaixo para verificar se a instalação foi efetuada com sucesso:
ionic version
Se estiver instalado corretamente a versão do Ionic Framework deverá ser apresentada
no terminal.
Se você teve algum problema desconhecido na instalação acesse a lista de discussão
sobre o ambiente de instalação no link abaixo e deixe sua dúvida:
http://fabiorogeriosj.com.br/desenvolvendo-aplicativos-mobile-ionic-post-1.html
Para testar nosso primeiro aplicativo entre na pasta que foi criada com o nome do seu
aplicativo, via linha de comando:
cd PrimeiroApp
Em seguida digite o comando para rodar o aplicativo no browser :
ionic serve
Na primeira vez que você executa este comando o Ionic irá perguntar em qual IP você
deseja deixar acessível seu projeto, para este momento escolha localhost. Você verá
seu aplicativo executando no navegador.
Estrutura dos projetos Ionic
Quando criamos um novo aplicativo, o Ionic utiliza o Cordova para cria a estrutura base
do aplicativo já com o template escolhido, pois como dito anteriormente o Ionic utiliza o
Cordova como base para realizar algumas tarefas.
Abra a pasta PrimeiroApp e veja os seguintes arquivos:
Vamos discutir cada arquivo no seu devido momento, por enquanto precisamos apenas
conhecer o config.xml e a pasta www.
config.xml
Neste arquivo é definido os principais parâmetros de inicialização e permissões que o
Cordova precisa para startar e compilar, para diferentes plataformas, seu aplicativo.
Se você estiver utilizando o Sublime Text abra seu projeto e verifique o arquivo
config.xml:
Componentes
O Ionic Framework disponibiliza diversos componentes para criar seu aplicativo, estes
componentes nada mais são que classes em CSS para renderizar da melhor forma seu
elemento em HTML. Você pode adicionar mais atributos em CSS nos componentes ou
até mesmo criar seu próprio componente.
Existem duas formas de utilizar alguns dos componentes do Ionic:
● Utilizar elementos nativos do HTML e adicionar as classes CSS
- ...
● Ou utilizar as nomenclaturas dos elementos já customizados do Ionic:
O resultado das duas formas são os mesmos. Neste material vamos utilizar, na maioria
dos casos, os nomes de elementos do Ionic, para reduzir a digitação de códigos.
Header
Header é um componente que fica sempre fixo no topo, utilizado para adicionar título e
botões de ações sobre a tela aberta.
Lembrando que você pode adicionar novos elementos no CSS para modificar de forma
diferente ao que o Ionic disponibiliza ou até mesmo criar um Header totalmente novo
com o seu próprio CSS.
Crie um novo projeto chamado AppHeader, não se esqueça de sair da pasta do projeto
criado anteriormente, para que não gere confusão nas pastas.
Para voltar uma pasta anterior por linha de comando, digite:
cd ..
Para criar, entrar na pasta e rodar um novo app digite:
ionic start appHeader blank
cd appHeader
ionic serve
Quando criamos um novo app com o template blank o index.htmljá contem um
Header, Vamos editá-lo alterando o arquivo www/index.html.
Alteramos o estilo do Header e alteramos o seu título. Veremos como adicionar botões
na sessão Buttons.
Quando você faz alguma alteração no seu projeto e salva, o aplicativo no browser é
automaticamente recarregado. Você verá um resultado igual a este:
Esta visualização não é muito útil pois não simula o tamanho de tela do device. Você
pode redimensionar seu browser para que fique menor na largura ou utilizar o módulo
visualização mobile do Chrome. Para isso pressione F11 no Windows/Linux ou
option+command+J no Mac. Ao lado direito do terminal que foi apresentado clique nos
três pontinhos e escolha a visualização Dock to right , para que seu terminal fique ao lado
direito da pagina que é exibida.
Em seguida, ao lado esquerdo do terminal, habilite a visualização para device , com isso
seu aplicativo será apresentado e configurado nos padrões de um smartphone :
parágrafo 4
parágrafo 5
parágrafo 6