SlideShare uma empresa Scribd logo
Iniciando o desenvolvimento de aplicativos
híbridos com Ionic + TypeScript e VSCode
Milton Câmara
• Microsoft Certified Professional
• Microsoft Certified Solution Associate
• 13 anos de experiência com Tecnologia
• 8 anos de experiência com turismo
miltoncamara@mcamara mcamara.net
Agenda
• O que é o Ionic
• Node e NPM
• Ionic CLI
• Ionic Native / Cordova
• TypeScript
• VSCode - Extensões
O que é Ionic
• Aplicativos Híbridos
• WebView
• Multiplataforma
• Framework / Stack
• Angular – Criação da parte Web
• Html – Linguagem de marcação para gerar os componentes visuais na tela
• Sass – Pré Processador para CSS
• Cordova – Integração com recursos nativos dos dispositivos
Ionic é um framework para desenvolvimento de aplicações para dispositivos
móveis que visa o desenvolvimento de apps híbridas e de rápido e fácil
desenvolvimento.
Node + Npm
Node.js é uma plataforma para desenvolvimento de aplicações server-side
baseadas em rede utilizando JavaScript e o V8 JavaScript Engine, ou seja, com
Node.js podemos criar uma variedade de aplicações Web utilizando apenas
código em JavaScript.
NPM é o nome reduzido de Node Package Manager (Gerenciador de Pacotes do
Node). A NPM é duas coisas: Primeiro, e mais importante, é um repositório
online para publicação de projetos de código aberto para o Node.js; segundo,
ele é um utilitário de linha de comando que interage com este repositório
online, que ajuda na instalação de pacotes, gerenciamento de versão e
gerenciamento de dependências.
Ionic CLI
• Conjunto de CLI’s
• Cordova CLI – Emulate, Run, Build, Compile
• Angular CLI – Components, Directive, Pipe, Service
• Extras – Link, Signup, Login
Command Line Interface ou Interface por Linhas de Comando
$ npm install -g ionic@latest
Ionic Native
• Camera
• GeoLocation
• Calendar
• Contacts
• SQLite
É uma abstração do Cordova / PhoneGap através do TypeScript que torna a
adição de qualquer funcionalidade nativa que você precisa para o seu aplicativo
móvel.
TypeScript
• Open Source
• Fortemente Tipado
• Aproveita Orientação a Objetos
• Angular 2
SuperConjunto que possibilita que você escreva código JavaScript na forma que
foi acostumado quando aprendeu Orientação a Objetos.
VSCode – Extensões para Ionic
• Ionic 2 Commands with Snippets
• Ionic 3 ionView Snippets
• Ionic2 VSCode
• Angular 4 TypeScript Snippets
As extensões do VSCode permitem que você adicione idiomas, depuradores e
ferramentas para suportar o fluxo de desenvolvimento. Também é possível criar
a sua própria extensão ontem temos uma API que nos liga diretamente a
interface do VSCode
Exemplos
/dotnetsaopaulo
Muito Obrigado

Mais conteúdo relacionado

Mais procurados

Aumentando reaproveitamento de código com MvvmCross
Aumentando reaproveitamento de código com MvvmCrossAumentando reaproveitamento de código com MvvmCross
Aumentando reaproveitamento de código com MvvmCross
akamud
 
Introdução ao Ruby on Rails (SOCIESC)
Introdução ao Ruby on Rails (SOCIESC)Introdução ao Ruby on Rails (SOCIESC)
Introdução ao Ruby on Rails (SOCIESC)
Julio Monteiro
 
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
Criciúma Dev
 
Angular 4 Ionic 3 Cordova 5
Angular 4 Ionic 3 Cordova 5Angular 4 Ionic 3 Cordova 5
Angular 4 Ionic 3 Cordova 5
Dannyrooh F de Campos
 
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}
Sinesio Bittencourt
 
TDC2017 | São Paulo - Trilha Mobile How we figured out we had a SRE team at -...
TDC2017 | São Paulo - Trilha Mobile How we figured out we had a SRE team at -...TDC2017 | São Paulo - Trilha Mobile How we figured out we had a SRE team at -...
TDC2017 | São Paulo - Trilha Mobile How we figured out we had a SRE team at -...
tdc-globalcode
 
Escalabilidade com docker - ASP.NET Conference 2016
Escalabilidade com docker - ASP.NET Conference 2016Escalabilidade com docker - ASP.NET Conference 2016
Escalabilidade com docker - ASP.NET Conference 2016
Rodolfo Fadino Junior
 
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
Ricardo Netto - MCP, MSP
 
Asp.net core
Asp.net coreAsp.net core
Asp.net core
Tanato Cartaxo
 
Asp.Net Core - Meetup BH
Asp.Net Core - Meetup BHAsp.Net Core - Meetup BH
Asp.Net Core - Meetup BH
André Paulovich
 
DevPira Festival 21 - .NET6 Uma nova forma de construir apis MinimalAPIs
DevPira Festival 21 - .NET6 Uma nova forma de construir apis MinimalAPIsDevPira Festival 21 - .NET6 Uma nova forma de construir apis MinimalAPIs
DevPira Festival 21 - .NET6 Uma nova forma de construir apis MinimalAPIs
Júnior Porfirio
 
Trabalho Framework Web mobile puc
Trabalho Framework Web mobile pucTrabalho Framework Web mobile puc
Trabalho Framework Web mobile puc
Mateus Ramos
 
Palestra UFPR - Intro Ionic framework + WordPress
Palestra UFPR - Intro Ionic framework + WordPressPalestra UFPR - Intro Ionic framework + WordPress
Palestra UFPR - Intro Ionic framework + WordPress
Rômulo Zoch
 
Novidades do ASP.NET MVC 4
Novidades do ASP.NET MVC 4Novidades do ASP.NET MVC 4
Novidades do ASP.NET MVC 4
Waldyr Felix
 
RIA e Flex - Dando formas à Inovação
RIA e Flex - Dando formas à InovaçãoRIA e Flex - Dando formas à Inovação
RIA e Flex - Dando formas à Inovação
Leonardo Braga
 
ASP.NET SignalR + SPA com AngularJS
ASP.NET SignalR + SPA com AngularJSASP.NET SignalR + SPA com AngularJS
ASP.NET SignalR + SPA com AngularJS
Waldyr Felix
 
ASP.NET Identity
ASP.NET IdentityASP.NET Identity
ASP.NET Identity
Rodrigo Kono
 
O novo Visual Studio 2012
O novo Visual Studio 2012O novo Visual Studio 2012
O novo Visual Studio 2012
Rodrigo Kono
 
.NET 2015, ASP.NET 5, C# 6 e tudo mais
.NET 2015, ASP.NET 5, C# 6 e tudo mais.NET 2015, ASP.NET 5, C# 6 e tudo mais
.NET 2015, ASP.NET 5, C# 6 e tudo mais
akamud
 
Uaijug ADF - spring boot - microservice - Introdução
Uaijug ADF - spring boot - microservice - IntroduçãoUaijug ADF - spring boot - microservice - Introdução
Uaijug ADF - spring boot - microservice - Introdução
Rogerio Fontes
 

Mais procurados (20)

Aumentando reaproveitamento de código com MvvmCross
Aumentando reaproveitamento de código com MvvmCrossAumentando reaproveitamento de código com MvvmCross
Aumentando reaproveitamento de código com MvvmCross
 
Introdução ao Ruby on Rails (SOCIESC)
Introdução ao Ruby on Rails (SOCIESC)Introdução ao Ruby on Rails (SOCIESC)
Introdução ao Ruby on Rails (SOCIESC)
 
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
 
Angular 4 Ionic 3 Cordova 5
Angular 4 Ionic 3 Cordova 5Angular 4 Ionic 3 Cordova 5
Angular 4 Ionic 3 Cordova 5
 
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}
 
TDC2017 | São Paulo - Trilha Mobile How we figured out we had a SRE team at -...
TDC2017 | São Paulo - Trilha Mobile How we figured out we had a SRE team at -...TDC2017 | São Paulo - Trilha Mobile How we figured out we had a SRE team at -...
TDC2017 | São Paulo - Trilha Mobile How we figured out we had a SRE team at -...
 
Escalabilidade com docker - ASP.NET Conference 2016
Escalabilidade com docker - ASP.NET Conference 2016Escalabilidade com docker - ASP.NET Conference 2016
Escalabilidade com docker - ASP.NET Conference 2016
 
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
 
Asp.net core
Asp.net coreAsp.net core
Asp.net core
 
Asp.Net Core - Meetup BH
Asp.Net Core - Meetup BHAsp.Net Core - Meetup BH
Asp.Net Core - Meetup BH
 
DevPira Festival 21 - .NET6 Uma nova forma de construir apis MinimalAPIs
DevPira Festival 21 - .NET6 Uma nova forma de construir apis MinimalAPIsDevPira Festival 21 - .NET6 Uma nova forma de construir apis MinimalAPIs
DevPira Festival 21 - .NET6 Uma nova forma de construir apis MinimalAPIs
 
Trabalho Framework Web mobile puc
Trabalho Framework Web mobile pucTrabalho Framework Web mobile puc
Trabalho Framework Web mobile puc
 
Palestra UFPR - Intro Ionic framework + WordPress
Palestra UFPR - Intro Ionic framework + WordPressPalestra UFPR - Intro Ionic framework + WordPress
Palestra UFPR - Intro Ionic framework + WordPress
 
Novidades do ASP.NET MVC 4
Novidades do ASP.NET MVC 4Novidades do ASP.NET MVC 4
Novidades do ASP.NET MVC 4
 
RIA e Flex - Dando formas à Inovação
RIA e Flex - Dando formas à InovaçãoRIA e Flex - Dando formas à Inovação
RIA e Flex - Dando formas à Inovação
 
ASP.NET SignalR + SPA com AngularJS
ASP.NET SignalR + SPA com AngularJSASP.NET SignalR + SPA com AngularJS
ASP.NET SignalR + SPA com AngularJS
 
ASP.NET Identity
ASP.NET IdentityASP.NET Identity
ASP.NET Identity
 
O novo Visual Studio 2012
O novo Visual Studio 2012O novo Visual Studio 2012
O novo Visual Studio 2012
 
.NET 2015, ASP.NET 5, C# 6 e tudo mais
.NET 2015, ASP.NET 5, C# 6 e tudo mais.NET 2015, ASP.NET 5, C# 6 e tudo mais
.NET 2015, ASP.NET 5, C# 6 e tudo mais
 
Uaijug ADF - spring boot - microservice - Introdução
Uaijug ADF - spring boot - microservice - IntroduçãoUaijug ADF - spring boot - microservice - Introdução
Uaijug ADF - spring boot - microservice - Introdução
 

Semelhante a Iniciando o desenvolvimento de aplicativos híbridos com VS Code + Ionic + TypeScript

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
Gustavo Costa
 
Integrando WordPress com Ionic 3.
Integrando WordPress com Ionic 3.Integrando WordPress com Ionic 3.
Integrando WordPress com Ionic 3.
Sinesio Bittencourt
 
la 02Aula02 introdução phone_gap
la 02Aula02 introdução phone_gapla 02Aula02 introdução phone_gap
la 02Aula02 introdução phone_gap
Roberson Alves
 
DevFest Nordeste: Ionic 2
DevFest Nordeste: Ionic 2DevFest Nordeste: Ionic 2
DevFest Nordeste: Ionic 2
Loiane Groner
 
Construindo Aplicativos móveis conectados com Xamarin e Azure Mobile Services
Construindo Aplicativos móveis conectados com Xamarin e Azure Mobile ServicesConstruindo Aplicativos móveis conectados com Xamarin e Azure Mobile Services
Construindo Aplicativos móveis conectados com Xamarin e Azure Mobile Services
William S. Rodriguez
 
Mobile Summit Brazil: Ionic 2
Mobile Summit Brazil: Ionic 2Mobile Summit Brazil: Ionic 2
Mobile Summit Brazil: Ionic 2
Loiane Groner
 
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicCurso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Felipe Blini
 
Write once, run "everywhere"
Write once, run "everywhere"Write once, run "everywhere"
Write once, run "everywhere"
Stefan Horochovec
 
Mono Codebits
Mono CodebitsMono Codebits
Mono Codebits
Celso Martinho
 
DevFest BH: Ionic 2
DevFest BH: Ionic 2DevFest BH: Ionic 2
DevFest BH: Ionic 2
Loiane Groner
 
Ionic 2 na pratica!
Ionic 2 na pratica!Ionic 2 na pratica!
Ionic 2 na pratica!
Loiane Groner
 
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...
Marcelo Marques Gonçalves
 
Desenvolvimento de aplicativo utilizando o framework ionic
Desenvolvimento de aplicativo utilizando o framework ionicDesenvolvimento de aplicativo utilizando o framework ionic
Desenvolvimento de aplicativo utilizando o framework ionic
Universidade Federal Rural do Semi Arido
 
ASP.NET vNext no .NET Architects Days 2014
ASP.NET vNext no .NET Architects Days 2014ASP.NET vNext no .NET Architects Days 2014
ASP.NET vNext no .NET Architects Days 2014
Giovanni Bassi
 
.NET 6: O que há de novo e o que está por vir?
.NET 6: O que há de novo e o que está por vir?.NET 6: O que há de novo e o que está por vir?
.NET 6: O que há de novo e o que está por vir?
Letticia Nicoli
 
Workshop - Cordova e Ionic
Workshop - Cordova e IonicWorkshop - Cordova e Ionic
Workshop - Cordova e Ionic
Felipe Lastowizka
 
Ionic 3
Ionic 3Ionic 3
Ionic 3
Loiane Groner
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.
Valmir Justo
 
Mobile apps com Xamarin e Azure Mobile Services - The Developers Conference P...
Mobile apps com Xamarin e Azure Mobile Services - The Developers Conference P...Mobile apps com Xamarin e Azure Mobile Services - The Developers Conference P...
Mobile apps com Xamarin e Azure Mobile Services - The Developers Conference P...
William S. Rodriguez
 
Introducao ao Ionic 2 na pratica
Introducao ao Ionic 2 na praticaIntroducao ao Ionic 2 na pratica
Introducao ao Ionic 2 na pratica
Loiane Groner
 

Semelhante a Iniciando o desenvolvimento de aplicativos híbridos com VS Code + Ionic + TypeScript (20)

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
 
Integrando WordPress com Ionic 3.
Integrando WordPress com Ionic 3.Integrando WordPress com Ionic 3.
Integrando WordPress com Ionic 3.
 
la 02Aula02 introdução phone_gap
la 02Aula02 introdução phone_gapla 02Aula02 introdução phone_gap
la 02Aula02 introdução phone_gap
 
DevFest Nordeste: Ionic 2
DevFest Nordeste: Ionic 2DevFest Nordeste: Ionic 2
DevFest Nordeste: Ionic 2
 
Construindo Aplicativos móveis conectados com Xamarin e Azure Mobile Services
Construindo Aplicativos móveis conectados com Xamarin e Azure Mobile ServicesConstruindo Aplicativos móveis conectados com Xamarin e Azure Mobile Services
Construindo Aplicativos móveis conectados com Xamarin e Azure Mobile Services
 
Mobile Summit Brazil: Ionic 2
Mobile Summit Brazil: Ionic 2Mobile Summit Brazil: Ionic 2
Mobile Summit Brazil: Ionic 2
 
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicCurso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
 
Write once, run "everywhere"
Write once, run "everywhere"Write once, run "everywhere"
Write once, run "everywhere"
 
Mono Codebits
Mono CodebitsMono Codebits
Mono Codebits
 
DevFest BH: Ionic 2
DevFest BH: Ionic 2DevFest BH: Ionic 2
DevFest BH: Ionic 2
 
Ionic 2 na pratica!
Ionic 2 na pratica!Ionic 2 na pratica!
Ionic 2 na pratica!
 
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...
 
Desenvolvimento de aplicativo utilizando o framework ionic
Desenvolvimento de aplicativo utilizando o framework ionicDesenvolvimento de aplicativo utilizando o framework ionic
Desenvolvimento de aplicativo utilizando o framework ionic
 
ASP.NET vNext no .NET Architects Days 2014
ASP.NET vNext no .NET Architects Days 2014ASP.NET vNext no .NET Architects Days 2014
ASP.NET vNext no .NET Architects Days 2014
 
.NET 6: O que há de novo e o que está por vir?
.NET 6: O que há de novo e o que está por vir?.NET 6: O que há de novo e o que está por vir?
.NET 6: O que há de novo e o que está por vir?
 
Workshop - Cordova e Ionic
Workshop - Cordova e IonicWorkshop - Cordova e Ionic
Workshop - Cordova e Ionic
 
Ionic 3
Ionic 3Ionic 3
Ionic 3
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.
 
Mobile apps com Xamarin e Azure Mobile Services - The Developers Conference P...
Mobile apps com Xamarin e Azure Mobile Services - The Developers Conference P...Mobile apps com Xamarin e Azure Mobile Services - The Developers Conference P...
Mobile apps com Xamarin e Azure Mobile Services - The Developers Conference P...
 
Introducao ao Ionic 2 na pratica
Introducao ao Ionic 2 na praticaIntroducao ao Ionic 2 na pratica
Introducao ao Ionic 2 na pratica
 

Iniciando o desenvolvimento de aplicativos híbridos com VS Code + Ionic + TypeScript

  • 1. Iniciando o desenvolvimento de aplicativos híbridos com Ionic + TypeScript e VSCode
  • 2. Milton Câmara • Microsoft Certified Professional • Microsoft Certified Solution Associate • 13 anos de experiência com Tecnologia • 8 anos de experiência com turismo miltoncamara@mcamara mcamara.net
  • 3. Agenda • O que é o Ionic • Node e NPM • Ionic CLI • Ionic Native / Cordova • TypeScript • VSCode - Extensões
  • 4. O que é Ionic • Aplicativos Híbridos • WebView • Multiplataforma • Framework / Stack • Angular – Criação da parte Web • Html – Linguagem de marcação para gerar os componentes visuais na tela • Sass – Pré Processador para CSS • Cordova – Integração com recursos nativos dos dispositivos Ionic é um framework para desenvolvimento de aplicações para dispositivos móveis que visa o desenvolvimento de apps híbridas e de rápido e fácil desenvolvimento.
  • 5. Node + Npm Node.js é uma plataforma para desenvolvimento de aplicações server-side baseadas em rede utilizando JavaScript e o V8 JavaScript Engine, ou seja, com Node.js podemos criar uma variedade de aplicações Web utilizando apenas código em JavaScript. NPM é o nome reduzido de Node Package Manager (Gerenciador de Pacotes do Node). A NPM é duas coisas: Primeiro, e mais importante, é um repositório online para publicação de projetos de código aberto para o Node.js; segundo, ele é um utilitário de linha de comando que interage com este repositório online, que ajuda na instalação de pacotes, gerenciamento de versão e gerenciamento de dependências.
  • 6. Ionic CLI • Conjunto de CLI’s • Cordova CLI – Emulate, Run, Build, Compile • Angular CLI – Components, Directive, Pipe, Service • Extras – Link, Signup, Login Command Line Interface ou Interface por Linhas de Comando $ npm install -g ionic@latest
  • 7. Ionic Native • Camera • GeoLocation • Calendar • Contacts • SQLite É uma abstração do Cordova / PhoneGap através do TypeScript que torna a adição de qualquer funcionalidade nativa que você precisa para o seu aplicativo móvel.
  • 8. TypeScript • Open Source • Fortemente Tipado • Aproveita Orientação a Objetos • Angular 2 SuperConjunto que possibilita que você escreva código JavaScript na forma que foi acostumado quando aprendeu Orientação a Objetos.
  • 9. VSCode – Extensões para Ionic • Ionic 2 Commands with Snippets • Ionic 3 ionView Snippets • Ionic2 VSCode • Angular 4 TypeScript Snippets As extensões do VSCode permitem que você adicione idiomas, depuradores e ferramentas para suportar o fluxo de desenvolvimento. Também é possível criar a sua própria extensão ontem temos uma API que nos liga diretamente a interface do VSCode

Notas do Editor

  1. Agradecimento ao .NET SP, Renato Groffe e equipe pelo convite em participar deste Meetup
  2. Apresentação