O documento apresenta as principais ferramentas e conceitos para iniciar o desenvolvimento de aplicativos híbridos com Ionic e TypeScript usando o VSCode. Ele discute o que é o Ionic, Node e NPM, Ionic CLI, Ionic Native, TypeScript e extensões úteis do VSCode para Ionic.

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

10. Exemplos

11. /dotnetsaopaulo

12. Muito Obrigado