Baixar para ler offline
Carregado porMichel Anderson Lütz Teixeira
Desenvolvendo com IONIC
O documento discute o desenvolvimento de aplicativos com Node.js, Ionic e Angular, incluindo como instalar as ferramentas necessárias, criar um projeto Ionic, estrutura de diretórios e uso de componentes e câmera nativa.
Desenvolvendo com IONIC
- 1.
- 3. Node JS É umaplataforma 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 LinuxUBUNTU Fontes: https://nodejs.org/en/about/ O NPM já vem nestes pacotes
- 6. Fontes: https://goo.gl/zR5OOs Resolvendo problemade 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 instalarTybeScript 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 Appcom 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 Appcom 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 Angular2 Ionic 2 Angular 4 Ionic 2.2.2
- 14.
- 15.
- 16.