├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md └── aulas ├── aula01 ├── aula.md ├── desafios.md └── resumo.md ├── aula02 ├── assets │ ├── 01.png │ ├── 03.png │ └── 04.png ├── aula.md ├── desafio.md └── resumo.md ├── aula03 ├── assets │ ├── 01.png │ └── 02.png ├── aula.md └── resumo.md ├── aula04 ├── assets │ ├── camera.png │ ├── img01.png │ ├── img02.gif │ ├── img03.png │ ├── img04.gif │ └── img05.jpg ├── aula.md └── desafios.md ├── aula05 ├── assets │ ├── img01.png │ ├── img02.gif │ └── img02.png └── aula.md ├── aula08 └── aula.md ├── aula09 └── aula.md └── aula10 └── aula.md /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Código de Conduta para Colaboradores 2 | 3 | ## Nossa promessa 4 | 5 | Com o interesse de fomentar uma comunidade aberta e acolhedora, nós, como colaboradores e administradores, comprometemo-nos a fazer da participação neste projeto uma experiência livre de qualquer possibilidade de assédio para todos, independentemente da aparência pessoal, classe social, deficiência de qualquer natureza, diferença de corpo, etnia, idade, identidade ou expressão de gênero, identidade ou orientação sexual, nacionalidade, nível de experiência, ou religião. 6 | 7 | ## Nossos padrões 8 | 9 | Exemplos de comportamentos que contribuem para criar um ambiente positivo incluem: 10 | 11 | * Usar linguagem acolhedora e inclusiva 12 | * Respeitar pontos de vista e experiências diferentes 13 | * Aceitar crítica construtiva 14 | * Focar no que é melhor para a comunidade 15 | * Mostrar empatia com outros membros da comunidade 16 | 17 | Exemplos de comportamentos inaceitáveis por parte dos participantes incluem: 18 | 19 | * Uso de linguagem ou imagens de conotação ou apelo sexuais e comportamentos de sugiram transgressão considerada libidinosa ou abusiva 20 | * Comentários insultuosos e/ou depreciativos e ataques pessoais ou políticos (*Trolling*) 21 | * Assédio público ou privado 22 | * Publicar informação pessoal de outros sem permissão explícita, como, por exemplo, um endereço eletrônico ou residencial 23 | * Qualquer outra forma de conduta que seja considerada naturalmente inapropriada para um ambiente profissional 24 | 25 | ## Nossas responsibilidades 26 | 27 | Os administradores do projeto são responsáveis por esclarecer os padrões de comportamento e deverão tomar providência corretiva apropriada e justa em resposta a qualquer qualquer tipo de comportamento inaceitável. 28 | 29 | Os administradores do projeto têm o direito e a responsabilidade de remover, editar ou rejeitar comentários, commits, código, edições na wiki, erros ou outras formas de contribuição que não estejam de acordo com este Código de Conduta, bem como banir temporariamente ou permanentemente qualquer colaborador por qualquer outro comportamento que se considere impróprio, perigoso, ofensivo ou problemático. 30 | 31 | ## Escopo 32 | 33 | Este Código de Conduta aplica-se dentro dos espaços do projeto ou qualquer espaço público onde alguém represente o mesmo ou a sua comunidade. Exemplos de representação do projeto ou comunidade incluem usar um endereço de email oficial do Vai na Web, fazer posts através de uma conta de mídia social oficial, ou estar sob a designação de representante em evento online ou offline. A representação de um projeto pode ser ainda definida e esclarecida pelos administradores do projeto. 34 | 35 | ## Aplicação 36 | 37 | Comportamento abusivo, assedioso ou de outras formas de conduta reprováveis pode ser comunicados contatando a equipe responsável pelo projeto. Todas as queixas serão revistas e investigadas e resultarão em resposta necessária e apropriada à situação. A equipe deve manter a confidencialidade quanto à autoria da denúncia. Demais detalhes de políticas de aplicação podem ser postadas separadamente. 38 | 39 | Administradores do projeto que não sigam ou venham a romper o Código de Conduta podem enfrentar repercussões temporárias ou permanentes determinadas por outros membros da liderança do projeto. 40 | 41 | ## Atribuição 42 | 43 | Este Código de Conduta é adaptado do [Contributor Covenant](http://contributor-covenant.org), 44 | versão 1.4, disponível em [http://contributor-covenant.org/version/1/4/pt_br/](http://contributor-covenant.org/version/1/4/pt_br/) 45 | ;; 46 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contribuindo no VaiNaWeb 2 | 3 | Antes de tudo, queremos que saiba que é com grande alegria que te agradecemos por abraçar nossa missão. :tada: 4 | 5 | O VaiNaWeb é um projeto inteiramente Open Source e aqui estão algumas diretrizes que você deve seguir se deseja tornar-se colaborador. 6 | 7 | ## O que eu deveria saber antes de começar? 8 | 9 | ### Como tudo começou 10 | 11 | O Vai na Web é um programa de iniciativa do Precisa Ser em parceria com o Educap, para promover cursos de desenvolvimento web para jovens, em organizações de base comunitária. 12 | 13 | Sabemos que existe muito potencial expressivo, profissional e criativo a ser revelado em regiões de precariedade social. 14 | Em busca de descobrir e expandir talentos inexplorados, o Vai na Web procura despertar os jovens para as possibilidades trazidas pela tecnologia. 15 | 16 | Com os avanços na área de tecnologia da informação, torna-se cada vez mais imprescindível o acesso e o aprendizado das técnicas para uso, contribuição e domínio das ferramentas em desenvolvimento web. Encontramos neste curso a oportunidade incentivar a auto descoberta desses jovens para uma jornada de desenvolvimento pessoal e sucesso profissional. 17 | 18 | ### Valores do projeto 19 | 20 | * Inclusivo 21 | * Empoderador 22 | * Empático 23 | * Totalmente Open Source 24 | 25 | ### Código de conduta 26 | 27 | Com o interesse de fomentar uma comunidade aberta e acolhedora, nós, como colaboradores e administradores, comprometemo-nos a fazer da participação neste projeto uma experiência livre de qualquer possibilidade de assédio para todos, independentemente da aparência pessoal, classe social, deficiência de qualquer natureza, diferença de corpo, etnia, idade, identidade ou expressão de gênero, identidade ou orientação sexual, nacionalidade, nível de experiência, ou religião. [Saiba mais](CODE_OF_CONDUCT.md) 28 | 29 | ## Como eu posso contribuir? 30 | 31 | * Criando conteúdo através de Pull Requests 32 | * Sugerindo conteúdo através de Issues 33 | * Reportando possíveis erros através de Issues 34 | * Corrigindo possíveis erros através de Pull Requests -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. 2 | To view a copy of this license, visit https://creativecommons.org/licenses/by-nc-sa/4.0/ 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # VaiNaWeb 2 | 3 | O Vai Na Web é um programa de educação em tecnologias digitais avançadas que busca democratizar o ensino e aprendizado de tecnologia e ajudar na emancipação dos nossos jovens nos desafios da nova era digital. 4 | 5 | Todo o conteúdo criado no decorrer das aulas é aberto e pode ser acompanhado aqui. :sparkles: 6 | 7 | ## Sobre as aulas 8 | 9 | São idealizadas, planejadas e executadas por pessoas que sabem que a informação precisa ser acessível. Vamos fortalecer a autonomia de criação e a capacidade profissional juntos, através de aulas que transmitem técnica e cidadania. 10 | 11 | Todo o conteúdo do curso possui uma linguagem clara. As aulas são pensadas gradativamente, com base em como os alunos de cada turma se sentem, de forma que cada aula, resumo, ou outro material seja realmente empático. O Vai na Web foi criado pelo compromisso de revelar as pessoas, ideias e dons incríveis que ficaram escondidos pelas barreiras da falta de oportunidade. 12 | 13 | Nesse módulo vamos criar **Aplicações Web Progressivas** com VueJS, aplicações que combinam o melhor da Web e o melhor dos aplicativos. :rocket: 14 | 15 | ### Aula 01 - [Introdução](aulas/aula01/aula.md) 16 | 17 | **Objetivos:** Entender os conceitos que definem uma PWA.
18 | **Formato de apresentação:** Apresentação em slides, demonstrações.
19 | **Ferramentas e materiais de apoio:** [gitbook](https://vainaweb.gitbooks.io/progressive-web-app/), [slides](http://slides.com/vainaweb/pwa-01), [resumo](aulas/aula01/resumo.md).
20 | **Duração:** 3 horas. 21 | 22 | ### Aula 02 - [Começando com VUE](aulas/aula02/aula.md) 23 | 24 | **Objetivos:** Conhecer os primeiros comandos do VueJS, entender o two-way data-binding e mais algumas coisas.
25 | **Formato de apresentação:** Apresentação em slides, demonstrações, exercícios de fixação com desafios.
26 | **Ferramentas e materiais de apoio:** [gitbook](https://vainaweb.gitbooks.io/progressive-web-app/), [slides](http://slides.com/vainaweb/pwa-02), [resumo](aulas/aula02/resumo.md).
27 | **Duração:** 3 horas. 28 | 29 | ### Aula 03 - [Criando novas páginas e componentes](aulas/aula03/aula.md) 30 | 31 | **Objetivos:** Criação de novos componentes e compreensão do vue-router.
32 | **Formato de apresentação:** Apresentação em slides, demonstrações, exercícios de fixação com desafios.
33 | **Ferramentas e materiais de apoio:** [gitbook](https://vainaweb.gitbooks.io/progressive-web-app/), [slides](http://slides.com/vainaweb/pwa-03), [resumo](aulas/aula03/resumo.md).
34 | **Duração:** 3 horas. 35 | 36 | ### Aula 04 - [Eventos e métodos](aulas/aula04/aula.md) 37 | 38 | **Objetivos:** Compreender como ouvir os eventos da página e disparar métodos.
39 | **Formato de apresentação:** Apresentação em slides, demonstrações, exercícios de fixação com desafios.
40 | **Ferramentas e materiais de apoio:** [gitbook](https://vainaweb.gitbooks.io/progressive-web-app/), [slides](http://slides.com/vainaweb/pwa-04), [resumo](aulas/aula04/resumo.md).
41 | **Duração:** 3 horas. 42 | 43 | ### Aula 05 - [Estruturas Condicionais](aulas/aula05/aula.md) 44 | 45 | **Objetivos:** Aprender a aproveitar o poder das estruturas condicionais
46 | **Formato de apresentação:** Apresentação em slides, demonstrações, exercícios de fixação com desafios.
47 | **Ferramentas e materiais de apoio:** [gitbook](https://vainaweb.gitbooks.io/progressive-web-app/), [slides](http://slides.com/vainaweb/pwa-05), [resumo](aulas/aula05/resumo.md).
48 | **Duração:** 3 horas. 49 | 50 | ### Aula 06 - [Estruturas de Repetição](aulas/aula06/aula.md) 51 | 52 | **Objetivos:** Aprender a aproveitar o poder das estruturas repetição
53 | **Formato de apresentação:** Apresentação em slides, demonstrações, exercícios de fixação com desafios.
54 | **Ferramentas e materiais de apoio:** [gitbook](https://vainaweb.gitbooks.io/progressive-web-app/), [slides](http://slides.com/vainaweb/pwa-05), [resumo](aulas/aula05/resumo.md).
55 | **Duração:** 3 horas. 56 | 57 | ### Aula 07 - [Comunicação entre componentes](aulas/aula07/aula.md) 58 | 59 | **Objetivos:**
60 | **Formato de apresentação:** Apresentação em slides, demonstrações, exercícios de fixação com desafios.
61 | **Ferramentas e materiais de apoio:** [gitbook](https://vainaweb.gitbooks.io/progressive-web-app/), [slides](http://slides.com/vainaweb/pwa-06), [resumo](aulas/aula06/resumo.md).
62 | **Duração:** 3 horas. 63 | 64 | ### Aula 08 - [Comunicação entre componentes com VUEX](aulas/aula08/aula.md) 65 | 66 | **Objetivos:**
67 | **Formato de apresentação:** Apresentação em slides, demonstrações, exercícios de fixação com desafios.
68 | **Ferramentas e materiais de apoio:** [gitbook](https://vainaweb.gitbooks.io/progressive-web-app/), [slides](http://slides.com/vainaweb/pwa-07), [resumo](aulas/aula07/resumo.md).
69 | **Duração:** 3 horas. 70 | 71 | ### Aula 09 - [Consumindo uma API](aulas/aula09/aula.md) 72 | 73 | **Objetivos:** Entender sobre os protocólos HTTP, como fazer requisições, e consumir serviços.
74 | **Formato de apresentação:** Apresentação em slides, demonstrações, exercícios de fixação com desafios.
75 | **Ferramentas e materiais de apoio:** [gitbook](https://vainaweb.gitbooks.io/progressive-web-app/), [slides](http://slides.com/vainaweb/pwa-08), [resumo](aulas/aula08/resumo.md).
76 | **Duração:** 3 horas. 77 | 78 | ### Aula 10 - [Service Worker](aulas/aula10/aula.md) 79 | 80 | **Objetivos:**
81 | **Formato de apresentação:** Apresentação em slides, demonstrações, exercícios de fixação com desafios.
82 | **Ferramentas e materiais de apoio:** [gitbook](https://vainaweb.gitbooks.io/progressive-web-app/), [slides](http://slides.com/vainaweb/pwa-08), [resumo](aulas/aula08/resumo.md).
83 | **Duração:** 3 horas. 84 | 85 | ### Aula 11 - [Push notifications](aulas/aula11/aula.md) 86 | 87 | **Objetivos:**
88 | **Formato de apresentação:** Apresentação em slides, demonstrações, exercícios de fixação com desafios.
89 | **Ferramentas e materiais de apoio:** [gitbook](https://vainaweb.gitbooks.io/progressive-web-app/), [slides](http://slides.com/vainaweb/pwa-08), [resumo](aulas/aula08/resumo.md).
90 | **Duração:** 3 horas. 91 | -------------------------------------------------------------------------------- /aulas/aula01/aula.md: -------------------------------------------------------------------------------- 1 | # Introdução 2 | 3 | > “Em algum lugar, algo incrível está esperando para ser descoberto.” 4 | > — Carl Sagan 5 | 6 | Nesse módulo vamos criar **aplicações web progressivas**, vamos chama-las de PWA, com VueJS. As aplicações web progressivas combinam o melhor da Web e o melhor dos aplicativos. 7 | 8 | Uma aplicação progressiva, como o próprio nome sugere está mesmo sempre em progresso. Isso quer dizer que ela está sempre ganhando mais recursos e se tornando mais poderosa, assim como a própria web sempre foi. 9 | 10 | Comparando como eram feitas as coisas na web logo quando ela foi criada percebemos o quanto ela foi mudando ao longo dos anos, o quanto ela melhorou e continua melhorando de **forma progressiva**. Vale notar também que enquanto ela foi ganhando novos poderes os antigos não pararam de funcionar, esse é um detalhe importante e que tem tudo a ver também com PWA. 11 | 12 | Por definição elas precisam ser **confiáveis**, **rápidas**, **engajadoras**. São caractertíscas de uma PWA: 13 | 14 | - **Progressiva** - Funciona para qualquer usuário, em qualquer navegador, é criada com aprimoramento progressivo 15 | - **Responsiva** - Se adequa a diferentes dispositivos 16 | - **Independente de conectividade** - Funciona offline 17 | - **Atual** - Sempre atualizada graças ao processo de atualização do service worker 18 | - **Segura** - Fornecida via HTTPS para evitar invasões 19 | - **Descobrível** - Permite ser encontrada por mecanismos de buscas 20 | - **Re-envolvente** - Facilita o reengajamento com recursos como notificações 21 | - **Instalável** - Permite que os usuários guardem os aplicativos mais úteis em suas telas iniciais sem precisar fazer instalação 22 | - **Linkável** - Compartilhada facilmente por URL. 23 | -------------------------------------------------------------------------------- /aulas/aula01/desafios.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VaiNaWeb/progressive-web-apps/d68928b930f9136461571425c05c572b7d663a0e/aulas/aula01/desafios.md -------------------------------------------------------------------------------- /aulas/aula01/resumo.md: -------------------------------------------------------------------------------- 1 | # Resumo 2 | 3 | - As aplicações web progressivas, ou PWA, combinam o melhor da Web e o melhor dos aplicativos. 4 | - Uma aplicação progressiva, como o próprio nome sugere está mesmo sempre em progresso. Isso quer dizer que ela está sempre ganhando mais recursos e se tornando mais poderosa, assim como a própria web sempre foi. 5 | - Por definição uma PWA precisa ser confiável, rápida e engajadora. 6 | - Criada e mantida pela comunidade Open Source. É uma biblioteca em Javascript para construção de interfaces com o usuário. 7 | - Uma interface com o usuário é um espaço em que interações entre humanos e máquinas acontecem. 8 | - Interfaces web modernas construídas em VueJS têm componentes reativos, ou seja componentes que reagem às interações com o usuário. 9 | - Podemos dividir uma interface em vários componentes. 10 | -------------------------------------------------------------------------------- /aulas/aula02/assets/01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VaiNaWeb/progressive-web-apps/d68928b930f9136461571425c05c572b7d663a0e/aulas/aula02/assets/01.png -------------------------------------------------------------------------------- /aulas/aula02/assets/03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VaiNaWeb/progressive-web-apps/d68928b930f9136461571425c05c572b7d663a0e/aulas/aula02/assets/03.png -------------------------------------------------------------------------------- /aulas/aula02/assets/04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VaiNaWeb/progressive-web-apps/d68928b930f9136461571425c05c572b7d663a0e/aulas/aula02/assets/04.png -------------------------------------------------------------------------------- /aulas/aula02/aula.md: -------------------------------------------------------------------------------- 1 | # Começando com VUE 2 | 3 | > "Eu sempre fiz algo que eu estava pouco preparada para fazer. Eu acho que é assim que você cresce. Quando há aquele momento de 'Wow, não tenho certeza de que posso fazer isso', e você passa por esses momentos, é quando você tem um avanço." 4 | > — Marissa Mayer 5 | 6 | Como aprendemos anteriormente, uma interface pode e deve ser divida em vários componentes. Vamos começar a criar nossos primeiros componentes usando o Vue.js. 7 | 8 | ## Tudo numa coisa só 9 | 10 | Vue trabalha na estrutura de HTML, CSS e JS em um único arquivo, chamamos isso de **Single file components**, o componente inteiro em um arquivo. 11 | 12 | Um componente em Vue se divide em três tags: template, script, e style. Dentro da tag template é onde colocamos o HTML normal que já conhecemos, divs, headers, parágrafos, etc. Dentro de script colocamos o javascript. E por fim, em style colocamos o nosso CSS. 13 | 14 | ```vue 15 | 17 | 18 | 20 | 21 | 23 | ``` 24 | 25 | Podemos usar um atributo em style chamado scoped, se usarmos, os estilos declarados no componente estilizam somente esse componente, o que pode ser bem útil em grandes aplicações. 26 | 27 | ```vue 28 | 33 | 34 | 39 | 40 | 51 | ``` 52 | ![olavue](assets/01.png) 53 | 54 | ## Ligando dados 55 | 56 | Dentro do template podemos usar a **sintaxe mustache**, {{ duas chaves }}, e colocar expressões em Javascript. Criamos um mustache com uma varíável chamada mensagem e atribuímos a ela uma frase. Você pode entender uma variável como um espacinho na memória reservado a guardar alguma coisa, algo como reservar um espaço em um armário para guardar futuramente alguma coisa. 57 | 58 | ```vue 59 | 64 | 65 | 75 | 76 | 78 | ``` 79 | Nossos dados estão ligados. O que acontece dentro de template reflete também no script, e o que acontece no Javsacript também reflete no template. 80 | 81 | O vue tem algumas palavras reservadas chamadas de Diretivas que nos permitem adicionar alguns comportamentos. Uma dessas diretivas é a **v-model**, vamos usa-la para criar um two-way **data binidng**, ou ligação de dados por dois caminhos em um elemento. 82 | 83 | O v-model é semelhante a outros atributos comuns que usamos no HTML, adicionamos como valor nesse atributo a nossa variável, depois usamos um mustache com a mesma variável para mostrar o que o usuário digitou em nosso input. Os dados estão mesmo ligados! Esse é um recurso incrível e o usaremos muito em nossas aplicações. 84 | 85 | ```vue 86 | 93 | 94 | 104 | 105 | 107 | ``` 108 | ![olavue](assets/03.png) 109 | 110 | -------------------------------------------------------------------------------- /aulas/aula02/desafio.md: -------------------------------------------------------------------------------- 1 | # Desafio01: Explore o que você já aprendeu! 2 | 3 | 1. Crie dois novos componentes 4 | 2. Configure as páginas usando o Router 5 | 6 | # Desafio02: Crie novas reações! 7 | 8 | 1. Crie um componente para receber dados em um formulário 9 | 2. Exiba esses dados como no exemplo abaixo: 10 | 11 | ![asset](assets/04.png) 12 | -------------------------------------------------------------------------------- /aulas/aula02/resumo.md: -------------------------------------------------------------------------------- 1 | # Começando com VUE 2 | 3 | - Vue trabalha na estrutura de HTML, CSS e JS em um único arquivo, chamamos isso de Single file components, o componente inteiro em um arquivo. 4 | - Um componente em Vue se divide em três tags: template, script, e style. Dentro da tag template é onde colocamos o HTML normal que já conhecemos, divs, headers, parágrafos, etc. Dentro de script colocamos o javascript. E por fim, em style colocamos o nosso CSS. 5 | - Podemos usar um atributo em style chamado scoped, se usarmos, os estilos declarados no componente estilizam somente esse componente, o que pode ser bem útil em grandes aplicações. 6 | - Dentro do template podemos usar a sintaxe mustache, {{ duas chaves }}, e colocar expressões em Javascript. Criamos um mustache com uma varíável chamada mensagem e atribuímos a ela uma frase. 7 | - Você pode entender uma variável como um espacinho na memória reservado a guardar alguma coisa, algo como reservar um espaço em um armário para guardar futuramente alguma coisa. 8 | - Nossos dados estão ligados. O que acontece dentro de template reflete também no script, e o que acontece no Javsacript também reflete no template. 9 | - O vue tem algumas palavras reservadas chamadas de Diretivas que nos permitem adicionar alguns comportamentos. Uma dessas diretivas é a v-model, vamos usa-la para criar um two-way data binidng, ou ligação de dados por dois caminhos em um elemento. 10 | - O v-model é semelhante a outros atributos comuns que usamos no HTML, um exemplo: adicionamos como valor nesse atributo a nossa variável, depois usamos um mustache com a mesma variável para mostrar o que o usuário digitou em nosso input. 11 | -------------------------------------------------------------------------------- /aulas/aula03/assets/01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VaiNaWeb/progressive-web-apps/d68928b930f9136461571425c05c572b7d663a0e/aulas/aula03/assets/01.png -------------------------------------------------------------------------------- /aulas/aula03/assets/02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VaiNaWeb/progressive-web-apps/d68928b930f9136461571425c05c572b7d663a0e/aulas/aula03/assets/02.png -------------------------------------------------------------------------------- /aulas/aula03/aula.md: -------------------------------------------------------------------------------- 1 | # Criando novas páginas e componentes 2 | 3 | > "Eu não gosto de estudar, eu odeio estudar. Eu gosto de aprender, aprender é lindo." 4 | > — Natalie Portman 5 | 6 | Já entendemos o que são componentes, agora vamos aprender a criar os nossos próprios componentes e páginas através do vue-router. Vamos criar um novo componente chamado Ola.vue com o seguinte conteúdo: 7 | 8 | ```vue 9 | 14 | 15 | 21 | 22 | 37 | ``` 38 | 39 | Na estrutura que criamos já existe um arquivo com o vue-router estruturado, vamos agora modifica-lo, ele está dentro da pasta src/router, em um arquivo index.js. 40 | 41 | Agora precisamos criar uma rota para esse componente no vue-router. Nas primeiras linhas estamos importando o Vue, o Router, e o componnte Hello. Vamos adicionar mais uma linha para importar o nosso Ola. 42 | 43 | Feito isso, precisamos também de configurar a rota, o vue já criou a nossa primeira rota, a path '/', o nosso componente que é exibido como primeira página. Vamos criar uma segunda com '/Ola' 44 | 45 | ```js 46 | import Vue from 'vue' 47 | import Router from 'vue-router' 48 | import Hello from '@/components/Hello' 49 | import Ola from '@/components/Ola' 50 | 51 | Vue.use(Router) 52 | 53 | export default new Router({ 54 | routes: [ 55 | { 56 | path: '/', 57 | name: 'Hello', 58 | component: Hello 59 | }, 60 | { 61 | path: '/Ola', 62 | name: 'Ola', 63 | component: Ola 64 | } 65 | ] 66 | }) 67 | ``` 68 | 69 | ![olavue](assets/02.png) 70 | 71 | Agora temos uma nova página para nosso componente Ola. Podemos criar mais um componente dentro de nosso componente. 72 | 73 | Vamos criar um novo arquivo chamado Gato.vue com o seguinte conteúdo: 74 | ```vue 75 | 80 | 81 | 86 | 87 | 92 | ``` 93 | Agora vamos chamar nosso componente Gato dentro do componente Ola. Dentro do template usamos como tag o nome do nosso componente! 94 | 95 | ```vue 96 | 102 | ``` 103 | 104 | Dentro do script importamos o componente assim: 105 | 106 | ```vue 107 | 115 | ``` 116 | 117 | ![olavue](assets/01.png) 118 | -------------------------------------------------------------------------------- /aulas/aula03/resumo.md: -------------------------------------------------------------------------------- 1 | # Criando novas páginas e componentes 2 | 3 | - Criamos novas telas criando novos componentes 4 | - Uma aplicação pode possuir vários componentes 5 | - Usamos o vue-router para configurar as rotas dessas novas páginas 6 | - Um componente pode estar dentro de outro componente, ou seja, pode ter componentes filhos 7 | -------------------------------------------------------------------------------- /aulas/aula04/assets/camera.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VaiNaWeb/progressive-web-apps/d68928b930f9136461571425c05c572b7d663a0e/aulas/aula04/assets/camera.png -------------------------------------------------------------------------------- /aulas/aula04/assets/img01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VaiNaWeb/progressive-web-apps/d68928b930f9136461571425c05c572b7d663a0e/aulas/aula04/assets/img01.png -------------------------------------------------------------------------------- /aulas/aula04/assets/img02.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VaiNaWeb/progressive-web-apps/d68928b930f9136461571425c05c572b7d663a0e/aulas/aula04/assets/img02.gif -------------------------------------------------------------------------------- /aulas/aula04/assets/img03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VaiNaWeb/progressive-web-apps/d68928b930f9136461571425c05c572b7d663a0e/aulas/aula04/assets/img03.png -------------------------------------------------------------------------------- /aulas/aula04/assets/img04.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VaiNaWeb/progressive-web-apps/d68928b930f9136461571425c05c572b7d663a0e/aulas/aula04/assets/img04.gif -------------------------------------------------------------------------------- /aulas/aula04/assets/img05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VaiNaWeb/progressive-web-apps/d68928b930f9136461571425c05c572b7d663a0e/aulas/aula04/assets/img05.jpg -------------------------------------------------------------------------------- /aulas/aula04/aula.md: -------------------------------------------------------------------------------- 1 | # Eventos e Métodos 2 | 3 | Há muitos eventos que acontecem em nossa página, como eventos do mouse, eventos do teclado, etc. E podemos manipula-los conforme nossas necessidades. 4 | 5 | Mais uma diretiva bem legal do Vue é a [v-on](https://br.vuejs.org/v2/guide/events.html#Escutando-Eventos), podemos usa-la para escutar os [eventos](https://pt.khanacademy.org/computing/computer-programming/html-css-js/html-js-dom-events/a/dom-event-types) do DOM em nossa página e adicionar alguma modificação quando eventos forem chamados. Exemplo: 6 | 7 | Queremos escutar o evento Click do mouse em um botão, então adicionamos dentro da tag desse botão a diretiva v-on:click. 8 | 9 | ```vue 10 | 15 | 16 | 26 | ``` 27 | ![img01](assets/img01.png) 28 | 29 | Já adicionamos nossa diretiva, mas não tinhamos feito nada com ela ainda. Agora vamos fazer isso! Vamos alterar o valor da nossa variável frase, quando o evento click for chamado vamos alterar esssa frase. 30 | 31 | ```vue 32 | 37 | 38 | 48 | ``` 49 | ![img02](assets/img02.gif) 50 | 51 | ## Combinando eventos e métodos 52 | 53 | Precisamos nesse próximo exemplo capturar o evento de click e disparar um método quando ele for chamado. Como já aprendemos, vamos usar a diretiva v-on, e para escutar o click v-on:click 54 | 55 | ```vue 56 | 64 | 65 | 75 | ``` 76 | ![img03](assets/img03.png) 77 | 78 | Temos duas imagens, a primeira é a câmera, onde adicionamos a nossa diretiva para capturar o click, e a segunda recebe uma variável foto que começa vazia. Quando o evento click for chamado, vamos chamar um método para adicionar uma imagem em nossa tag img adicionando o link de uma imagem dentro da variável vazia que criamos. 79 | 80 | Abaixo de data, adicionamos methods, é onde podemos incluir os nossos métodos. Podemos entender um método como uma ação. Criamos agora nosso método, e chamamos ele de tiraFoto() 81 | 82 | ```vue 83 | 91 | 92 | 107 | ``` 108 | ![img04](assets/img04.gif) 109 | -------------------------------------------------------------------------------- /aulas/aula04/desafios.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /aulas/aula05/assets/img01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VaiNaWeb/progressive-web-apps/d68928b930f9136461571425c05c572b7d663a0e/aulas/aula05/assets/img01.png -------------------------------------------------------------------------------- /aulas/aula05/assets/img02.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VaiNaWeb/progressive-web-apps/d68928b930f9136461571425c05c572b7d663a0e/aulas/aula05/assets/img02.gif -------------------------------------------------------------------------------- /aulas/aula05/assets/img02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VaiNaWeb/progressive-web-apps/d68928b930f9136461571425c05c572b7d663a0e/aulas/aula05/assets/img02.png -------------------------------------------------------------------------------- /aulas/aula05/aula.md: -------------------------------------------------------------------------------- 1 | # Renderizando Condições 2 | 3 | Vamos aprender a usar o poder das estruturas condicionais em nossos componentes. As estruturas condicionais estão presentes em nossa vida o tempo inteiro, é quando perguntamos 'se'. Por exemplo: 4 | 5 | Se chover então eu vou ficar em casa, senão eu vou para a rua. 6 | 7 | ![img02](assets/img02.png) 8 | 9 | Vamos analisar um exemplo prático! 10 | 11 | ```vue 12 | 32 | 33 | 58 | ``` 59 | Nada de novo até aqui, nesse exemplo, criamos o placar de um time usando métodos para adicionar ou remover pontos. Agora queremos melhorar esse placar! Queremos saber quem é o vencedor. Antes, vamos definir a lógica do que queremos fazer: Se o Time Roxo tiver mais pontos que o Time Amarelo então o Time Roxo é o vencedor, senão o Time Amarelo é o vencedor. 60 | 61 | Em Javascript essa estrutura ficaria mais ou menos assim: 62 | 63 | ```js 64 | if() { 65 | 66 | } else { 67 | 68 | } 69 | ``` 70 | If significa se, e else significa senão. Se colocarmos uma expressão dentro dos parenteses do primeiro if e essa expressão for verdadeira então podemos retornar o que está dentro das chaves dele, senão retornamos o que está dentro das chaves do else. Para continuar nosso exemplo, vamos colocar essa estrutura dentro de um método que chamaremos de mostraVencedor, assim: 71 | 72 | ```js 73 | mostraVencedor() { 74 | if () { 75 | 76 | } else { 77 | 78 | } 79 | } 80 | ``` 81 | 82 | Ainda precisamos incluir a expressão que queremos dentro do if, para isso vamos usar também operadores relacionais. Em Javascript temos: 83 | 84 | **>** maior que
85 | **<** menor que
86 | **=>** maior ou igual que
87 | **<=** menor ou igual que
88 | **==** igual
89 | **===** igual em valor e tipo de dado
90 | **!=** diferente
91 | 92 | Definimos que nossa se o Time Roxo fosse maior que o Time Amarelo então retornaríamos que o Time Roxo é o vencedor. Criamos lá no data() uma variável chamada vencedor para receber nosso retorno. Nosso método ficou assim: 93 | 94 | ```js 95 | mostraVencedor() { 96 | if (this.TimeRoxo > this.timeAmarelo) { 97 | return this.vencedor = 'Time Roxo venceu' 98 | } else { 99 | return this.vencedor = 'Time Amarelo venceu' 100 | ``` 101 | Se essse valor que está na varíável TimeRoxo for maior que essa variável TimeAmarelo então retornamos essa variável vencedor com o conteúdo Time Roxo venceu. Senão, retornamos essa varíável vencedor com o conteúdo Time Amarelo venceu. Nosso componente final ficou assim: 102 | 103 | ```vue 104 | 126 | 127 | 160 | ``` 161 | Esse código ainda pode ser melhorado! E se os times ficarem com os mesmos pontos? Ou ainda, e se for regra que os pontos fiquem sempre entre 0 e 10? Se você pensou em incluir mais condições em nosso métodos pensou certo, sinta-se livre para criar essas novas alterações! 162 | -------------------------------------------------------------------------------- /aulas/aula08/aula.md: -------------------------------------------------------------------------------- 1 | # Comunicação com Vuex 2 | 3 | O Vuex é uma biblioteca em Vuex que é responsável por fornecer um padrão de gerenciamento de estados. É um lugar centralizado para guardar os dados para todos os componentes em uma aplicação. 4 | -------------------------------------------------------------------------------- /aulas/aula09/aula.md: -------------------------------------------------------------------------------- 1 | # Consumindo uma API 2 | 3 | Vamos falar um pouco da história da web novamente para entendermos como ela funciona hoje. 4 | 5 | Em nosso módulo primeiros passos na web, aprendemos que quando estamos navegando na web, o navegador envia requisições para um servidor e o servidor, por sua vez, nos devolve uma resposta em um formato específico ou realiza alguma ação caso pedirmos. 6 | 7 | Quando a web nasceu, ela era usada para interconectar documentos. Hoje temos uma web de dados! Antes precisávamos criar vários arquivos em HTML, e esses arquivos eram servidos em nosso navegador, por muito tempo foi tudo simples assim, e ainda pode ser. 8 | 9 | Contudo, atualmente não trocamos mais apenas documentos, agora podemos criar não somente sites, mas também aplicações, e em nessas aplicações precisamos consumir ou ainda gerar dados e mais dados! 10 | 11 | A web que conhecemos evoliu muito, e nosso navegador ganhou maiores poderes. 12 | 13 | ## Métodos HTTP 14 | 15 | Muita coisa mudou, mas continuamos fazendo requisições. Nas requisições, especificamos o que chamamos de método HTTP ou verbo, temos vários verbos diferentes. Os principais verbos HTTP são: 16 | 17 | - GET: Usamos para pegar algo 18 | - POST: Usamos para enviar algo 19 | - PUT: Usamos para editar algo 20 | - DELETE: Usamos para excluir algo 21 | 22 | ## Axios 23 | 24 | > "Existe uma ferramenta para cada tarefa, e uma tarefa para cada ferramenta." 25 | > – Tywin Lannister, A Storm of Swords 26 | 27 | Vamos usar o Axios como ferramenta, o axios é uma biblioteca que usaremos como um cliente HTTP, ele funciona no navegador ou no servidor. Em nosso caso, vamos instalar a biblioteca no nosso projeto. 28 | 29 | Lembre-se de usar --save para adicionar essa dependência no package.json 30 | 31 | ```bash 32 | npm install axios --save 33 | ``` 34 | 35 | Faremos requisições dentro de nossos próprios componentes para consumir dados de uma API. Há muitas APIs abertas por aí, então não se preocupe ainda se você não tem uma. 36 | 37 | Dentro da tag script, fora do export, vamos importar a biblioteca: 38 | 39 | ```vue 40 | 47 | ``` 48 | Depois, é só chamar a requisição, vamos fazer isso dentro de um created() do Vue. 49 | 50 | Essa estrutura que estamos usando no axios se chama [promise](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise). Uma promessa, que representa um valor que pode estar disponível, ou não, conceitualmente se a promessa for cumprida usamos o then para retorna-la, se não, se a promessa foi rejeitada usamos o catch. 51 | 52 | Por fins didáticos, por enquanto vamos usar uma API falsa para explicar como o Axios funciona. Vamos consumir os dados que vem do [jsonplaceholder](https://jsonplaceholder.typicode.com/). 53 | 54 | Nossa requisição retornará um [JSON](https://pt.wikipedia.org/wiki/JSON), essa é uma das melhores formas de trabalhar com dados na web, que vem de um endpoint do jsonplaceholder. 55 | 56 | Dentro de axios.get() vamos colocar o endpoint que queremos, um endpoint é uma URL onde seu serviço pode ser acessado por uma aplicação. 57 | 58 | Para guardar essese valores, vamos criar também um array vazio no data, depois disso, já estamos recebendo os dados e podemos usar facilmente no componente. 59 | 60 | ```vue 61 | 78 | ``` 79 | 80 | Vou assumir que você está usando a extensão do VUE no navegador, e sabe que é hora de ver como esses dados estão chegando no data e ver quais propriedades estão disponíveis. Se não sabia, pois saiba que é isso mesmo, use suas ferramentas ao seu favor. 81 | 82 | Duas propriedades que vieram em nosso JSON são o name e o email. Vamos criar um v-for e exibir essas informações! 83 | 84 | ```vue 85 | 95 | ``` 96 | -------------------------------------------------------------------------------- /aulas/aula10/aula.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | O service worker é uma forma que usamos para dizer ao navegador o modo que ele deve agir em determinadas situações. Exemplo: posso verificar com o service worker se há conexão com internet, se houver busco coisas na API, se não busco coisas no cache. 4 | 5 | Quando usamos o template pwa do vue, já temos previamente configurado um precaching com o service work que já serve todos os arquivos estáticos. 6 | --------------------------------------------------------------------------------