Workshop frontend
- 2. 2 FrontEnd É responsável por “dar vida” à interface. HTML (linguagem de marcação) CSS (linguagem de estilo) JavaScript (linguagem de script/programação) Trabalha com a parte da aplicação que interage diretamente com o usuário.
- 3. 3 Linguagens e Frameworks Nos últimos anos, esta área também viu a introdução de outras linguagens e frameworks, como TypeScript, Angular, Bootstrap, Sass, etc. Que podem ser utilizadas de acordo com as necessidades da aplicação.
- 4. 4 TypeScript Subconjunto de JavaScript TypeScript é uma linguagem de programação criada e mantida pela Microsoft. Basicamente é um subconjunto de JavaScript que acrescenta tipagem de objetos (opcional), estrutura de classes e é totalmente baseada em programação orientada a objeto. Por ser um superconjunto do JavaScript, qualquer código dessa linguagem pode ser colocado em um arquivo TypeScript.
- 5. 5 Nativescript É um framework open source para construção de aplicativos móveis nativos usando JavaScript ou Typescript Por que Nativescript ?
- 6. 6 01 Desempenho nativo UI bonita, acessível, nativa em plataforma - sem WebViews. 03 Fácil de aprender Use as habilidades da web que você já tem para desenvolver aplicativos verdadeiramente nativos com JavaScript, CSS e marcação de UI nativa. 02 Extensível Reutilize facilmente os plug-ins existentes do npm. 04 Plataforma cruzada Escreva e implante aplicativos móveis nativos para iOS e Android a partir de uma única base de código. 05 Open Source O NativeScript é 100% gratuito e de código aberto.
- 7. 7 npm install -g nativescript Instalação Após a instalação, a configuração do sistema deve ter: JDK 8 e SDK para Android
- 8. 8 Angular + NativeScript = ❤ Com o NativeScript e o Angular, uma única base de código pode ser usada para criar aplicativos da Web e aplicativos móveis nativos com desempenho e energia 100% nativos.
- 9. 9 tns create <NomeDoProjeto> Criando aplicativos
- 10. 10 Passo 1 Acesse as configurações do Android, deslize a tela até o fim e toque em "Sobre o dispositivo". Passo 2 No fim da tela, toque rapidamente sete vezes seguidas sobre "Número da versão". Faça isso até ver a mensagem "Você agora é um desenvolvedor". Passo 3 Voltando à tela principal de configurações, um novo menu chamado "Programador" estará disponível. Abra para ativar ou desativar as ferramentas de desenvolvedor. Modo Desenvolvedor Como ativar a depuração USB do Android
- 11. 11 Executando tns run android ou tns preview
- 13. 13 Layouts É a marcação base de todas as visualizações que fornecem posicionamento de elementos filho.
- 14. 14 Comandos CLI Extensões de comando da CLI do NativeScript para adicionar alguns dos comandos da CLI Angular. Para gerar um componente, execute: tns generate component <component-name> Para criar um componente dentro de um módulo, execute: tns generate component <component-name> <module-name> Para criar um módulo, execute: tns generate module <module-name>
- 15. Mão na massa Mão na massa Mão na massa Mão na massa