SlideShare uma empresa Scribd logo
1 de 10
Mobile Apps
Construindo Mobile Apps com Ionic
Theo Alexandre Miliani
Desenvolvedor web 17 anos
O Que é o Ionic?
Ionic é um framework JavaScript para confecção
de Aplicativos em webview.
Híbrido, sendo que o mesmo código serve para
todos os dispositivos.
Tem acesso ao hardware através do cordova.
Como se Instala o Ionic?
Para Instalar o Ionic no Visual Studio, devemos
instalar uma extensão que insere os templates e
modifica o intelisense para que possamos usar.
No prompt de comando instalamos o node.js, para
usar o gerenciador de pacotes NPM e rodamos o
comando npm install –g cordova ionic
Iniciando no VS
Ao Abrir o Visual Studio Basta selecionar novo
projeto que ele aparecerá entre as opções
Iniciando no Prompt
No prompt, devemos criar a estrutura de pastas e
entrar nelas para só então rodar o comando:
Ionic Start
Se abrirá um menu que guiará para os passos
seguintes
Testando no VS
No Visual Studio, basta que se clique no botão:
Simular no Navegador
Porém, antes de rodar a primeira vez será pedido
que se instale uma extensão
Testando no prompt
No prompt de comando basta apenas que depois de
entrar no projeto do App rodemos o comando:
Ionic serve
E pro caso de testar já no tamanho aproximado da
tela do celular:
ionic serve --lab
Testando no Celular
Para se testar no celular temos que instalar um app próprio
chamado Ionic View, criar uma conta, logar no no app e no
prompt de comando rodar o comando
Ionic Upload
Isso já fara com que o app do celular possa recuperar o
projeto e testar
Procurando Templates
Como tudo no mundo existe templates lindos e
gratuitos no Google, bastante apenas procurar

Mais conteúdo relacionado

Semelhante a Conhecendo o Ionic

.Net 2.0 Instalando Sua AplicaçãO Com Click Once
.Net 2.0   Instalando Sua AplicaçãO Com Click Once.Net 2.0   Instalando Sua AplicaçãO Com Click Once
.Net 2.0 Instalando Sua AplicaçãO Com Click Once
infinitopublicidade
 
435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdf435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdf
Julia469065
 
Desenvolvendo Para I Phone Em Linux
Desenvolvendo Para I Phone Em LinuxDesenvolvendo Para I Phone Em Linux
Desenvolvendo Para I Phone Em Linux
Erisvaldo Junior
 

Semelhante a Conhecendo o Ionic (20)

Sinesio bittencourt - Ionic framework {Aplicações móveis híbridas}
Sinesio bittencourt - Ionic framework  {Aplicações móveis híbridas}Sinesio bittencourt - Ionic framework  {Aplicações móveis híbridas}
Sinesio bittencourt - Ionic framework {Aplicações móveis híbridas}
 
Iniciando o desenvolvimento de uma aplicação em android
Iniciando o desenvolvimento de uma aplicação em androidIniciando o desenvolvimento de uma aplicação em android
Iniciando o desenvolvimento de uma aplicação em android
 
.Net 2.0 Instalando Sua AplicaçãO Com Click Once
.Net 2.0   Instalando Sua AplicaçãO Com Click Once.Net 2.0   Instalando Sua AplicaçãO Com Click Once
.Net 2.0 Instalando Sua AplicaçãO Com Click Once
 
Hello world hybrid apps oportunidades com ionic framework v2
Hello world hybrid apps  oportunidades com ionic framework v2Hello world hybrid apps  oportunidades com ionic framework v2
Hello world hybrid apps oportunidades com ionic framework v2
 
UFABC React Native
UFABC React NativeUFABC React Native
UFABC React Native
 
Aprendendo a programar <3
Aprendendo a programar <3Aprendendo a programar <3
Aprendendo a programar <3
 
Ionic 2 como ferramenta para desenvolvimento móvel
Ionic 2 como ferramenta para desenvolvimento móvelIonic 2 como ferramenta para desenvolvimento móvel
Ionic 2 como ferramenta para desenvolvimento móvel
 
Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...
Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...
Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...
 
FabricApp - Equipa A
FabricApp - Equipa AFabricApp - Equipa A
FabricApp - Equipa A
 
Introdução ao Visuino por Swellington
Introdução ao Visuino por SwellingtonIntrodução ao Visuino por Swellington
Introdução ao Visuino por Swellington
 
Aprendendo Angular com a CLI
Aprendendo Angular com a CLIAprendendo Angular com a CLI
Aprendendo Angular com a CLI
 
435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdf435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdf
 
Asp.net core
Asp.net coreAsp.net core
Asp.net core
 
Instalando e Configurando o JIL SDK. Crie seu primeiro widget com a ferramenta.
Instalando e Configurando o JIL SDK. Crie seu primeiro widget com a ferramenta.Instalando e Configurando o JIL SDK. Crie seu primeiro widget com a ferramenta.
Instalando e Configurando o JIL SDK. Crie seu primeiro widget com a ferramenta.
 
Hybrid app phonegap angular ionic
Hybrid app   phonegap angular ionicHybrid app   phonegap angular ionic
Hybrid app phonegap angular ionic
 
Mobile Summit Brazil: Ionic 2
Mobile Summit Brazil: Ionic 2Mobile Summit Brazil: Ionic 2
Mobile Summit Brazil: Ionic 2
 
Asp.Net Core - Meetup BH
Asp.Net Core - Meetup BHAsp.Net Core - Meetup BH
Asp.Net Core - Meetup BH
 
Desenvolvendo Para I Phone Em Linux
Desenvolvendo Para I Phone Em LinuxDesenvolvendo Para I Phone Em Linux
Desenvolvendo Para I Phone Em Linux
 
Minicurso de App Inventor
Minicurso de App InventorMinicurso de App Inventor
Minicurso de App Inventor
 
Oficina App Inventor
Oficina App InventorOficina App Inventor
Oficina App Inventor
 

Conhecendo o Ionic

  • 1. Mobile Apps Construindo Mobile Apps com Ionic Theo Alexandre Miliani Desenvolvedor web 17 anos
  • 2.
  • 3. O Que é o Ionic? Ionic é um framework JavaScript para confecção de Aplicativos em webview. Híbrido, sendo que o mesmo código serve para todos os dispositivos. Tem acesso ao hardware através do cordova.
  • 4. Como se Instala o Ionic? Para Instalar o Ionic no Visual Studio, devemos instalar uma extensão que insere os templates e modifica o intelisense para que possamos usar. No prompt de comando instalamos o node.js, para usar o gerenciador de pacotes NPM e rodamos o comando npm install –g cordova ionic
  • 5. Iniciando no VS Ao Abrir o Visual Studio Basta selecionar novo projeto que ele aparecerá entre as opções
  • 6. Iniciando no Prompt No prompt, devemos criar a estrutura de pastas e entrar nelas para só então rodar o comando: Ionic Start Se abrirá um menu que guiará para os passos seguintes
  • 7. Testando no VS No Visual Studio, basta que se clique no botão: Simular no Navegador Porém, antes de rodar a primeira vez será pedido que se instale uma extensão
  • 8. Testando no prompt No prompt de comando basta apenas que depois de entrar no projeto do App rodemos o comando: Ionic serve E pro caso de testar já no tamanho aproximado da tela do celular: ionic serve --lab
  • 9. Testando no Celular Para se testar no celular temos que instalar um app próprio chamado Ionic View, criar uma conta, logar no no app e no prompt de comando rodar o comando Ionic Upload Isso já fara com que o app do celular possa recuperar o projeto e testar
  • 10. Procurando Templates Como tudo no mundo existe templates lindos e gratuitos no Google, bastante apenas procurar