Desenvolvendo com IONIC

1. IONIC2
Desenvolvendo com

3. Node JS
É uma plataforma para desenvolvimento de aplicações
server-side baseadas em rede utilizando JavaScript e o
V8 JavaScript Engine...
Site oficial: https://nodejs.org

4. Exemplo de Código
Fonte: https://nodejs.org/en/about/
Com este código iniciamos
um servidor web em nosso
localhost

5. Instalando no Linux UBUNTU
Fontes: https://nodejs.org/en/about/
O NPM já vem nestes
pacotes

6. Fontes: https://goo.gl/zR5OOs
Resolvendo problema de permissão npm
Opção 1: Altere a permissão para o diretório padrão de npm
Encontre o caminho para o diretório npm:
npmconfiggetprefix
Para muitos sistemas, este será / usr / local.
AVISO: Se o caminho exibido for apenas / usr, mude para a Opção 2 ou estragará suas permissões.
Altere o proprietário dos diretórios do npm para o nome do usuário atual (seu nome de usuário!):
sudochown-R$(whoami)$(npmconfiggetprefixo)/{lib/node_modules,bin,share}
Isso altera as permissões das subpastas usadas pelo npm e algumas outras ferramentas (lib / node_modules, bin e share).
Opção 2: Alterar o diretório padrão de npm para outro diretório
Crie um diretório para instalações globais:
mkdir~/.npm-global
Configurar o npm para usar o novo caminho do diretório:
NPM_CONFIG_PREFIX=~/.npm-global
Teste: Baixe um pacote globalmente sem usar o sudo.
npm install-gjshint

7. Usando NPM cli
Fontes: https://docs.npmjs.com/files/package.json
Todos os projetos desenvolvidos com node js, utilizam o
arquivo package.json para armazenar as informações do
projeto, scripts e dependências de módulos.
Podemos iniciar um novo projeto da seguinte forma:
mkdir olaMundo
cd olaMundo
npminit
O cli ira lhe fazer algumas perguntas, preencha conforme seu projeto.
Ex: Arquivo package.json
gerado pela cli

8. Usando NPM cli - npm install <pacote>
Fontes: https://docs.npmjs.com/cli/install
Podemos instalar um pacote para nosso projeto sempre que precisar
npm instal --save jslint
Ao Executar este comando o npm cria a entrada de dependencies no
arquivo de package.json
A pasta node_modules também
é criada quando não existe

9. Usando TypeScript
Podemos instalar TybeScript com o comando npm install
npm instal -g typescript
Após a instalação execute o comando tsc --init para que seja criado
o arquivo tsconfig.json
Ex: Olá Mundo

10. Entendendo Aplicativos Hibridos
Phonegap (Cordova) é um framework para desenvolvimento de apps
mobile híbrido.
O Phonegap funciona como um container (wrapper) para o app,
permitindo o desenvolvimento do mesmo com JavaScript/HTML/CSS.
O app final gerado é com a extensão nativa de cada plataforma (Android,
iOS, Windows Phone), permitindo que o mesmo seja enviado e
publicado nas app stores (Apple Store, Google Play, Microsoft
Marketplace).
• Phonegap é não tem componentes de interface
• Ionic é uma pilha de componentes e frameworks que facilita o
desenvolvimento de aplicações híbridas.

11. Meu primeiro App com IONIC e Angular
O requisito para criar o primeiro app é ter o NodeJS, ionic e cordova
instalados na maquina via npm.
npm install -g ionic cordova
ionic start meuapp tabs
Para criar um aplicativo com os presets ou em branco use um dos comandos abaixo.
ionic start meuapp blank ionic start meuapp sidemenu

12. Meu primeiro App com IONIC e Angular
Após o download dos arquivos do ionic para o preset escolhido, já é
possível ver o app rodando.
cd <meuapp>
ionic serve
Navegador abre com o seu app já rodando
Você pode usar o endereço http://localhost:8100/ionic-lab para ver seu aplicativo com
interfaces das três plataformas disponíveis iOS, Android, Microsoft.

13. Estrutura de diretórios
Angular 2 Ionic 2 Angular 4 Ionic 2.2.2

14. Componentes
https://ionicframework.com/docs/components
https://github.com/driftyco/ionic-preview-app/tree/master/src/pages/segments/basic

15. Native - Camera
https://ionicframework.com/docs/native/camera/
Instalando

16. Let's code