├── CODE_OF_CONDUCT.md
├── README.md
├── workshop-1
├── agenda
│ ├── 1-criando-o-projeto-no-vue-cli.md
│ ├── 10-desenvolvendo-o-botão-ponto.md
│ ├── 11-desenvolvedo-a-lógica-para-setar-os-números-no-display.md
│ ├── 12-desenvolvendo-o-botão-resultado.md
│ ├── 13-desenvolvendo-o-botão-dividir.md
│ ├── 14-desenvolvendo-o-botão-multiplicar.md
│ ├── 15-desenvolvendo-o-botão-diminuir.md
│ ├── 16-desenvolvendo-o-botão-somar.md
│ ├── 17-refatorando-o-projeto.md
│ ├── 18-separando-os-arquivos-do-componente-calculadora-vue.md
│ ├── 19-realizando-a-separação-do-bloco-style.md
│ ├── 2-alterando-as-configurações-do-projeto.md
│ ├── 20-realizando-a-separação-do-bloco-script.md
│ ├── 21-finalização-do-desenvolvimento-do-arquivo-index-vue.md
│ ├── 22-o-que-é-azure-app-service.md
│ ├── 23-criando-uma-conta-no-azure.md
│ ├── 24-hospedando-a-aplicação-no-azure-app-service.md
│ ├── 3-alterando-o-componente-no-projeto.md
│ ├── 4-incluindo-css-no-componente-calculadora-vue.md
│ ├── 5-desenvolvendo-o-display.md
│ ├── 6-desenvolvendo-o-botão-c.md
│ ├── 7-desenvolvendo-o-botão-sinal.md
│ ├── 8-desenvolvendo-o-botão-porcentagem.md
│ └── 9-desenvolvendo-a-junção-dos-números.md
├── projeto-1
│ ├── .babelrc
│ ├── .editorconfig
│ ├── .eslintignore
│ ├── .eslintrc.js
│ ├── .gitignore
│ ├── .postcssrc.js
│ ├── README.md
│ ├── build
│ │ ├── build.js
│ │ ├── check-versions.js
│ │ ├── logo.png
│ │ ├── utils.js
│ │ ├── vue-loader.conf.js
│ │ ├── webpack.base.conf.js
│ │ ├── webpack.dev.conf.js
│ │ └── webpack.prod.conf.js
│ ├── config
│ │ ├── dev.env.js
│ │ ├── index.js
│ │ └── prod.env.js
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ │ ├── App.vue
│ │ ├── assets
│ │ │ └── logo.png
│ │ ├── components
│ │ │ └── Calculadora
│ │ │ │ ├── calculadora.css
│ │ │ │ ├── calculadora.js
│ │ │ │ └── index.vue
│ │ └── main.js
│ └── static
│ │ └── .gitkeep
└── workshop-1.md
├── workshop-2
├── agenda
│ ├── 1-criando-o-projeto-no-vue-cli.md
│ ├── 10-criando-propriedades-e-metodo-editar-ao-componente-todo-vue.md
│ ├── 11-desenvolvendo-o-botão-exclusão-ao-componente-todo.md
│ ├── 12-desenvolvendo-o-botão-adição.md
│ ├── 13-desenvolvendo-o-botão-pendente-concluído.md
│ ├── 14-inclusão-do-sweetalert-no-arquivo-app-vue.md
│ ├── 15-inclusão-do-sweetalert-no-arquivo-todo-list-vue.md
│ ├── 16-alterando-a-estrutura-do-projeto-e-router.md
│ ├── 17-o-que-é-azure-storage-account.md
│ ├── 18-criando-uma-conta-no-azure.md
│ ├── 19-criando-conta-do-azure-storage-no-vscode.md
│ ├── 2-alterando-as-configurações-do-projeto.md
│ ├── 20-realizando-deploy-da-aplicação-no-azure-storage-account-no-vscode.md
│ ├── 3-incluindo-semantic-ui-na-aplicação-vuejs.md
│ ├── 4-alterando-o-componente-no-projeto.md
│ ├── 5-alterando-as-configurações-no-arquivo-App-vue.md
│ ├── 6-desenvolvendo-o-nosso-primeiro-componente-todo-list-vue.md
│ ├── 7-criando-dados-para-o-componente-todo-list.md
│ ├── 8-renderizando-os-dados-do-componente.md
│ └── 9-criando-e-editando-o-componente-todo.md
├── projeto-2
│ ├── .babelrc
│ ├── .editorconfig
│ ├── .eslintignore
│ ├── .eslintrc.js
│ ├── .gitignore
│ ├── .postcssrc.js
│ ├── LICENSE
│ ├── README.md
│ ├── build
│ │ ├── build.js
│ │ ├── check-versions.js
│ │ ├── logo.png
│ │ ├── utils.js
│ │ ├── vue-loader.conf.js
│ │ ├── webpack.base.conf.js
│ │ ├── webpack.dev.conf.js
│ │ └── webpack.prod.conf.js
│ ├── config
│ │ ├── dev.env.js
│ │ ├── index.js
│ │ └── prod.env.js
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ │ ├── App.vue
│ │ ├── assets
│ │ │ └── logo.png
│ │ ├── components
│ │ │ └── pages
│ │ │ │ ├── CreateTodo
│ │ │ │ ├── CreateTodo.js
│ │ │ │ └── index.vue
│ │ │ │ ├── Todo
│ │ │ │ ├── Todo.js
│ │ │ │ └── index.vue
│ │ │ │ └── TodoList
│ │ │ │ ├── TodoList.js
│ │ │ │ └── index.vue
│ │ ├── main.js
│ │ └── middlewares
│ │ │ └── router.js
│ ├── static
│ │ └── .gitkeep
│ └── yarn.lock
└── workshop-2.md
└── workshop-3
├── projeto-3
└── README.md
└── workshop-3.md
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Código de Conduta
2 |
3 | ## Nossa promessa
4 |
5 | Com o interesse de fomentar uma comunidade aberta e acolhedora,
6 | nós, como colaboradores e administradores deste projeto, comprometemo-nos
7 | a fazer a participação deste projeto uma experiência livre de assédio
8 | para todos, independentemente da aparência pessoal, deficiência,
9 | etnia, gênero, idade, identidade ou expressão de gênero, identidade
10 | ou orientação sexual, nacionalidade, nível de experiência, porte físico,
11 | raça ou religião.
12 |
13 | ## Nossos padrões
14 |
15 | Exemplos de comportamentos que contribuem a criar um ambiente positivo incluem:
16 |
17 | * Usar linguagem acolhedora e inclusiva
18 | * Respeitar pontos de vista e experiências diferentes
19 | * Aceitar crítica construtiva com graça
20 | * Focar no que é melhor para a comunidade
21 | * Mostrar empatia com outros membros da comunidade
22 |
23 | Exemplos de comportamentos inaceitáveis por parte dos participantes incluem:
24 |
25 | * Uso de linguagem ou imagens sexuais e atenção ou avanço sexual indesejada
26 | * Comentários insultuosos e/ou depreciativos e ataques pessoais ou políticos (*Trolling*)
27 | * Assédio público ou privado
28 | * Publicar informação pessoal de outros sem permissão explícita, como, por exemplo, um endereço eletrônico ou residencial
29 | * Qualquer outra forma de conduta que pode ser razoavelmente considerada inapropriada num ambiente profissional
30 |
31 | ## Nossas responsibilidades
32 |
33 | Os administradores do projeto são responsáveis por esclarecer os padrões de
34 | comportamento e deverão tomar ação corretiva apropriada e justa em resposta
35 | a qualquer instância de comportamento inaceitável.
36 |
37 | Os administradores do projeto têm o direito e a responsabilidade de
38 | remover, editar ou rejeitar comentários, commits, código, edições
39 | na wiki, erros ou outras formas de contribuição que não estejam de
40 | acordo com este Código de Conduta, bem como banir temporariamente ou
41 | permanentemente qualquer colaborador por qualquer outro comportamento
42 | que se considere impróprio, perigoso, ofensivo ou problemático.
43 |
44 | ## Escopo
45 |
46 | Este Código de Conduta aplica-se dentro dos espaços do projeto ou
47 | qualquer espaço público onde alguém represente o mesmo ou a sua
48 | comunidade. Exemplos de representação do projeto ou comunidade incluem
49 | usar um endereço de email oficial do projeto, postar por uma conta de
50 | mídia social oficial, ou agir como um representante designado num evento
51 | online ou offline. A representação de um projeto pode ser ainda definida e
52 | esclarecida pelos administradores do projeto.
53 |
54 | ## Aplicação
55 |
56 | Comportamento abusivo, de assédio ou de outros tipos pode ser
57 | comunicado contatando a equipe do projeto **[AQUI](gllemos@microsoft.com)**. Todas as queixas serão revistas e investigadas e
58 | resultarão numa resposta necessária e apropriada à situação.
59 | A equipe é obrigada a manter a confidencialidade em relação
60 | ao elemento que reportou o incidente. Demais detalhes de
61 | políticas de aplicação podem ser postadas separadamente.
62 |
63 | Administradores do projeto que não sigam ou não mantenham o Código
64 | de Conduta em boa fé podem enfrentar repercussões temporárias ou permanentes
65 | determinadas por outros membros da liderança do projeto.
66 |
67 | ## Atribuição
68 |
69 | Este Código de Conduta é adaptado do [Contributor Covenant](https://www.contributor-covenant.org),
70 | versão 1.4, disponível em https://www.contributor-covenant.org/pt-br/version/1/4/code-of-conduct.html
71 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Workshop - Vue.js com Azure
2 | [](https://postimg.cc/k2XF2BRN)
3 |
4 | Repositório responsável pelos workshops de Vue.js com Azure.
5 |
6 | ## Recursos Utilizados 🚀
7 |
8 | * **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=javascript-0000-gllemos)**
9 | * **[Node.js](https://nodejs.org/en/)**
10 | * **[Vue.js](https://vuejs.org/)**
11 | * **[Vue-CLI](https://cli.vuejs.org/)**
12 | * **[MongoDb Community Server](https://www.mongodb.com/download-center/community)**
13 | * **[MongoDb Compass GUI](https://www.mongodb.com/download-center/compass)**
14 | * **[Postman](https://www.getpostman.com/)**
15 | * **[Azure Web App Service](https://azure.microsoft.com/services/app-service/?WT.mc_id=javascript-0000-gllemos)**
16 | * **[Azure Storage Account](https://azure.microsoft.com/services/storage/?WT.mc_id=javascript-0000-gllemos)**
17 | * **[Azure CosmosDb](https://azure.microsoft.com/services/cosmos-db/?WT.mc_id=javascript-0000-gllemos)**
18 | * **[Conta - Azure](https://azure.microsoft.com/?WT.mc_id=javascript-0000-gllemos)**
19 |
20 | ## Conta - Azure for Students ⭐️
21 |
22 | Caso você seja um(a) estudante de alguma Instituição de Ensino de Faculdade ou Universidade, poderá criar sua conta no **[Azure for Students](https://azure.microsoft.com/free/students/?WT.mc_id=javascript-0000-gllemos)**. Essa conta te dará o benefício em possuir crédito de USD 100,00 para usar os serviços de maneira gratuita, sem necessidade de possuir um cartão de crédito. Para ativar essa conta, bastam acessar o link ao lado: **[AQUI](https://azure.microsoft.com/free/students/?WT.mc_id=javascript-0000-gllemos)**
23 |
24 | ## Pré-requisitos 📌
25 |
26 | Para a realização dos workshops de Vue.js, se faz necessário ter noções de: **HTML, CSS & JavaScript**. Pensando nisso, estou disponibilizando abaixo dois cursos grátis de:
27 |
28 | * **[Crie um site simples usando HTML, CSS e JavaScript](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=javascript-0000-gllemos)**
29 |
30 | * **[Desenvolva aplicativos Web com o Visual Studio Code](https://docs.microsoft.com/learn/modules/develop-web-apps-with-vs-code/?WT.mc_id=javascript-0000-gllemos)**
31 |
32 | Realizando esses 2 cursos, vocês já estarão aptos para realizar os workshops:
33 |
34 | * **[workshop-1](workshop-1/workshop-1.md)**
35 |
36 | * **[workshop-2](workshop-2/workshop-2.md)**
37 |
38 | Já o Workshop-3, se faz necessário ter noções de: **Node.js & MongoDb**. Para isso, recomendo os cursos grátis:
39 |
40 | * **[Tutorial: CRUD API RESTful com: Node + Express + MongoDb](https://www.youtube.com/playlist?list=PLb2HQ45KP0WstF2TXsreWRv-WUr5tqzy1)**
41 |
42 | * **[Curso: Criando APIs com NodeJs](https://www.youtube.com/playlist?list=PLHlHvK2lnJndvvycjBqQAbgEDqXxKLoqn)**
43 |
44 | Realizando esses dois cursos, você já estará totalmente apto para realizar o workshop:
45 |
46 | * **[workshop-3](workshop-3/workshop-3.md)**
47 |
48 | ## O que eu vou aprender?! 📕
49 |
50 | Esse repositório possui 3 workshops, dependendo do tempo do meetup que será realizado o desenvolvimento das aplicações.
51 |
52 | Os níveis estão divididos em:
53 |
54 | * Inicial (workshop-1)
55 | * Intermediário (workshop-2)
56 | * Avançado (workshop-3)
57 |
58 | A intenção é que todas as pessoas desenvolvedoras possam aprender Vue.js desenvolvendo aplicações do dia-a-dia usando desde conceitos básicos à avançados de Vue.js.
59 |
60 | Após o desenvolvimento de cada projeto, ensinaremos a realizar o deploy/host dos projetos na nuvem usando o **[Azure App Service](https://azure.microsoft.com/?WT.mc_id=javascript-0000-gllemos)** e **[Azure Storage Account](https://azure.microsoft.com/services/storage/?WT.mc_id=javascript-0000-gllemos)**
61 |
62 | ## Projetos a serem Desenvolvidos 💾
63 |
64 | Conforme explicado, os workshops estão nivelados. Assim sendo, segue a descrição e o tempo que cada worshop terão (aproximadamente):
65 |
66 | | Workshop | Nível | Projeto | Tempo de Duração (aproximadamente) |
67 | |---|---|---|---|
68 | | **[workshop-1](workshop-1/workshop-1.md)** | Iniciante | Calculadora em Vue.js | 1h 30min |
69 | | **[workshop-2](workshop-2/workshop-2.md)** | Intermediário | Todo-List | 2h 30min |
70 | | **[workshop-3](workshop-3/workshop-3.md)** | Avançado | SPA: MEVN | 4h 30min |
71 |
72 | ## Workshops 💻
73 |
74 | Durante o workshop, estaremos trabalhando com 3 workshops, que tem como principal objetivo ensinar a desenvolver projetos em Vue.js e no final integrar as aplicações na plataforma Azure.
75 |
76 | * **[workshop-1 - Calculadora em Vue.js](workshop-1/projeto-1/README.md)**
77 | * **[workshop-2 - Todo-List em Vue.js](workshop-2/projeto-2/README.md)**
78 | * **[workshop-3 - Single Page Application com MEVN](workshop-3/projeto-3/README.md)**
79 |
80 | ## Agenda 📒
81 |
82 | * **[Workshop 1 - Calculadora em Vue.js](workshop-1/workshop-1.md)**
83 |
84 | * **[Workshop 2 - Todo-List em Vue.js](workshop-2/workshop-2.md)**
85 |
86 | * **[Workshop 3 - Single Page Application com MEVN](workshop-3/workshop-3.md)**
87 |
88 | ## Tenho Dúvidas... O que Faço?! ❓
89 |
90 | Caso tenham dúvidas aos códigos dos projetos relacionados aos workshops, sintam-se a vontade em abrir uma **[ISSUE AQUI](https://github.com/glaucia86/vuejs-workshop/issues)**. Assim que possível, estarei respondendo as todas as dúvidas que tiverem!
91 |
92 | **(documentação em desenvolvimento)**
93 |
--------------------------------------------------------------------------------
/workshop-1/agenda/1-criando-o-projeto-no-vue-cli.md:
--------------------------------------------------------------------------------
1 | ## Criando o Projeto no Vue-CLI
2 |
3 | Antes de criarmos um projeto no Vue-CLI há necessidade de instalar o pacote globalmente, para isso digitem o comando abaixo no prompt de comando:
4 |
5 | ```
6 | > npm install --global vue-cli
7 | ```
8 |
9 | Depois de instalar todos os recursos acima e incluso o Vue-CLI, agora vamos criar o projeto da calculadora. Digitem o comando abaixo:
10 |
11 | ```
12 | > vue init webpack calculadora-app
13 | ```
14 |
15 | Após digitar o comando acima, aparecerá várias perguntas como você deseja configurar o seu projeto. Para isso, seguem conforme o gif abaixo:
16 |
17 | [](https://cdn-images-1.medium.com/max/1350/1*pVRvKav3CFRQSOBye5ixtQ.gif)
18 |
19 | Depois de fazer tudo isso, bastam seguir os comandos abaixo para executar a aplicação Vue.js:
20 |
21 | ```
22 | > cd calculadora-app
23 | > npm run dev
24 | ```
25 |
26 | Vai pedir para abrir a página no **localhost:8080**. Se a imagem abaixo aparecer é porque você criou a aplicação com Vue-CLI com sucesso!
27 |
28 | 
29 |
30 | Agora vamos fazer pequenas alterações no projeto.
31 |
--------------------------------------------------------------------------------
/workshop-1/agenda/10-desenvolvendo-o-botão-ponto.md:
--------------------------------------------------------------------------------
1 | ## Desenvolvendo o Botão '.' (ponto)
2 |
3 | Toda Calculadora necessita de 'ponto', não é mesmo? No nosso caso não será diferente!
4 | Incluem os seguintes blocos de código abaixo:
5 |
6 | ```vue
7 |
8 |
9 |
.
10 |
11 |
12 | ```
13 |
14 | ```vue
15 |
22 | ```
23 |
24 | Executem a aplicação, clique no botão 'ponto' e vejam o resultado:
25 |
26 | [](https://postimg.cc/LgFL8gV3)
--------------------------------------------------------------------------------
/workshop-1/agenda/11-desenvolvedo-a-lógica-para-setar-os-números-no-display.md:
--------------------------------------------------------------------------------
1 | ## Desenvolvedo a lógica para Setar os Números no Display
2 |
3 | O desenvolvimento da Calculadora está quase terminando, notem que agora só falta desenvolver os operadores matemáticos, que são os mais fáceis para desenvolver. Mas, antes de desenvolvermos as operações, precisamos criar uma lógica para setar, por assim dizer, os números.
4 |
5 | Por exemplo: se desejamos realizar a soma de dois números: 10 + 5, precisaremos criar uma lógica que, quando o usuário for clicar nos botões de operação, precisará setar esses números no display, certo? Para isso, vamos incluir os seguintes blocos de código:
6 |
7 | ```vue
8 |
14 | ```
15 |
16 | Pronto! Isso já é mais do que suficiente! Agora sim, podemos desenvolver as 4 operações matemáticas, incluso o resultado, para enfim concluirmos a nossa Calculadora!
--------------------------------------------------------------------------------
/workshop-1/agenda/12-desenvolvendo-o-botão-resultado.md:
--------------------------------------------------------------------------------
1 | ## Desenvolvendo o Botão '=' (resultado)
2 |
3 | Antes de desenvolver as 4 operações, vamos desenvolver o botão do resultado '='. Para isso,
4 | inclua os seguintes blocos de código:
5 |
6 | ```vue
7 |
8 |
9 |
=
10 |
11 |
12 | ```
13 |
14 | ```vue
15 |
24 | ```
25 |
26 | Agora sim, podemos além de desenvolver as 4 operações matemáticas e já testando se estão funcionando devidamente. Vamos continuar que tá quase no final.
--------------------------------------------------------------------------------
/workshop-1/agenda/13-desenvolvendo-o-botão-dividir.md:
--------------------------------------------------------------------------------
1 | ## Desenvolvendo o Botão '÷' (dividir)
2 |
3 | Novamente, inclua o método **dividir** na tag **template** e desenvolva a lógica da divisão na tag **script**, conforme abaixo:
4 |
5 | ```vue
6 |
7 |
10 |
11 | ```
12 |
13 | ```vue
14 |
20 | ```
21 | E agora, vamos testar todos os botões da nossa Calculadora!
22 |
23 | [](https://gifyu.com/image/ExZT)
24 |
25 | E enfim terminamos a nossa Calculadora!
--------------------------------------------------------------------------------
/workshop-1/agenda/17-refatorando-o-projeto.md:
--------------------------------------------------------------------------------
1 | ## Refatorando o projeto
2 |
3 | Em Vue.js, há 2 maneiras em que você pode estruturar o seu projeto:
4 |
5 | * **[Single-File Component](https://br.vuejs.org/v2/guide/single-file-components.html)**: que seria trabalhar com os escopos HTML, CSS e JavaScript em um único arquivo **.vue**, a qual centralizará todas as responsabilidades pela aparência e comportamento
6 |
7 | * **[Fazer split dos arquivos](https://forum.vuejs.org/t/split-single-file-component/34155)**: que seria fazer uma separação de responsabilidade, visando o conceito **[SOLID](https://www.infoq.com/br/news/2014/02/solid-principios-javascript/)**.
8 |
9 | Nessa parte do tutorial, estarei explicando como realizar a separação dos arquivos de uma maneira correta e seguindo o **[Style Guide](https://vuejs.org/v2/style-guide/)** do Vue.js de nomenclatura de arquivos e pastas.
10 |
11 | Vamos nessa?!
--------------------------------------------------------------------------------
/workshop-1/agenda/18-separando-os-arquivos-do-componente-calculadora-vue.md:
--------------------------------------------------------------------------------
1 | ## Separando os arquivos do componente 'Calculadora.vue'
2 |
3 | Abram o Visual Studio Code e o projeto da Calculadora. Dentro da pasta `src -> components`, crie uma pasta chamada `Calculadora`.
4 |
5 | Depois dentro da pasta `Calculadora`, crie os seguintes arquivos:
6 |
7 | * index.vue (altere o arquivo 'Calculadora.vue' para 'index.vue')
8 | * calculadora.css
9 | * calculadora.js
10 |
11 | A estrutura das pastas ficarão da seguinte forma:
12 |
13 | [](https://postimg.cc/zVYmKNJ2)
14 |
15 | Feito isso, vamos agora realizar a separação dos arquivos.
16 |
--------------------------------------------------------------------------------
/workshop-1/agenda/19-realizando-a-separação-do-bloco-style.md:
--------------------------------------------------------------------------------
1 | ## Realizando a separação do bloco style
2 |
3 | Abram o arquivo `index.vue` e copiem todo o conteúdo contido na tag `` e cole no arquivo `calculadora.css`.
4 |
5 | O arquivo `calculadora.css` deverá ficar da seguinte maneira:
6 |
7 | ```css
8 | .calculadora {
9 | margin: 0 auto;
10 | width: 350px;
11 | font-size: 40px;
12 | display: grid;
13 | grid-template-columns: repeat(4, 1fr);
14 | grid-auto-rows: minmax(50px, auto);
15 | }
16 |
17 | .display {
18 | grid-column: 1 / 5;
19 | background-color: #333;
20 | color: white;
21 | }
22 |
23 | .zero {
24 | grid-column: 1 / 3;
25 | }
26 |
27 | .botao {
28 | background-color: #f2f2f2;
29 | border: 1px solid #999;
30 | }
31 |
32 | .operadores {
33 | background-color: orange;
34 | color: white;
35 | }
36 | ```
37 |
38 | Já no arquivo `index.vue`, vamos agora realizar a referência do arquivo `calculadora.css` dentro da tag `` e notem como deve ficar:
39 |
40 | ```vue
41 |
42 | ```
43 |
44 | Execute a aplicação e veja se está tudo funcionando. Se sim. Vamos dar continuidade!
--------------------------------------------------------------------------------
/workshop-1/agenda/2-alterando-as-configurações-do-projeto.md:
--------------------------------------------------------------------------------
1 | ## Alterando as configurações do Projeto
2 |
3 | Vou pedir para vocês abrirem o projeto no Visual Studio Code e logo em seguida abrir o arquivo **package.json**, pois precisaremos fazer uma pequena alteração nele (alterar a linha 8):
4 |
5 | ```json
6 | // package.json
7 |
8 | {
9 | "name": "calculadora-app",
10 | "version": "1.0.0",
11 | "description": "Calculadora em Vue.js",
12 | "author": "Glaucia Lemos",
13 | "private": true,
14 | "scripts": {
15 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --open --hot",
16 | "start": "npm run dev",
17 | "lint": "eslint --ext .js,.vue src",
18 | "build": "node build/build.js"
19 | },
20 | (...)
21 |
22 | ```
23 |
24 | Essa alteração na linha 8 nos permitirá quando formos executar o comando: **npm run dev**, de abrir o browser automaticamente! O que nos auxiliará bastante na hora de desenvolver.
25 |
26 | Vamos seguir adiante pois precisaremos alterar os componentes criados no Vue-CLI.
27 |
--------------------------------------------------------------------------------
/workshop-1/agenda/20-realizando-a-separação-do-bloco-script.md:
--------------------------------------------------------------------------------
1 | ## Realizando a separação do bloco script
2 |
3 | O procedimento será muito parecido com o que fizemos no arquivo `calculadora.css`. Abram o arquivo `index.vue` e copie todo o bloco de script e cole no arquivo `Calculadora.js`
4 |
5 | O arquivo `Calculadora.js`, ficará da seguinte forma:
6 |
7 | ```js
8 | /**
9 | * Arquivo: src/components/Calculadura.js
10 | * Data: 20/06/2019
11 | * Author: Glaucia Lemos
12 | * Descrição: arquivo responsável por tratar toda a lógica da Calculadora.
13 | */
14 |
15 | export default {
16 | name: 'Calculadora',
17 | data() {
18 | return {
19 | numeroAnterior: null,
20 | valorCorrente: '',
21 | operador: null,
22 | operadorClicado: false,
23 | };
24 | },
25 |
26 | methods: {
27 | // Método responsável por limpar o display da 'Calculadora'
28 | limpar() {
29 | this.valorCorrente = '';
30 | },
31 |
32 | /*
33 | * Método responsável por colocar o sinal '-' ou '+' para realização de operações
34 | * matemáticas especiais.
35 | */
36 | sinal() {
37 | this.valorCorrente = this.valorCorrente.charAt(0) === '-'
38 | ? this.valorCorrente.slice(1)
39 | : `-${this.valorCorrente}`;
40 | },
41 |
42 | // Método responsável por realizar operações com 'porcentagem':
43 | porcentagem() {
44 | this.valorCorrente = `${parseFloat(this.valorCorrente) / 100}`;
45 | },
46 |
47 | // Método responsável por juntar os números no display da Calculadora:
48 | juntarNumeros(numero) {
49 | if (this.operadorClicado) {
50 | this.valorCorrente = '';
51 | this.operadorClicado = false;
52 | }
53 | this.valorCorrente = `${this.valorCorrente}${numero}`;
54 | },
55 |
56 | // Método responsável por adicionar 'ponto' no display da Calculadora:
57 | ponto() {
58 | if (this.valorCorrente.indexOf('.') === -1) {
59 | this.juntarNumeros('.');
60 | }
61 | },
62 |
63 | // Método responsável por 'resetar' o valor na Calculadora:
64 | setarValor() {
65 | this.numeroAnterior = this.valorCorrente;
66 | this.operadorClicado = true;
67 | },
68 |
69 | // Método responsável por realizar a operação da 'divisão' da Calculadora
70 | dividir() {
71 | this.operador = (a, b) => a / b;
72 | this.setarValor();
73 | },
74 |
75 | // Método responsável por realizar a operação da 'multiplicação' da Calculadora
76 | multiplicar() {
77 | this.operador = (a, b) => a * b;
78 | this.setarValor();
79 | },
80 |
81 | // Método responsável por realizar a operação da 'diminuir' da Calculadora
82 | diminuir() {
83 | this.operador = (a, b) => a - b;
84 | this.setarValor();
85 | },
86 |
87 | // Método responsável por realizar a operação da 'adição' da Calculadora
88 | somar() {
89 | this.operador = (a, b) => a + b;
90 | this.setarValor();
91 | },
92 |
93 | // Método responsável por apresentar o resultado das operações na Calculadora
94 | resultado() {
95 | this.valorCorrente = `${this.operador(
96 | parseFloat(this.numeroAnterior),
97 | parseFloat(this.valorCorrente),
98 | )}`;
99 | this.numeroAnterior = null;
100 | },
101 | },
102 | };
103 | ```
104 |
105 | Agora, volte ao arquivo `index.vue` e vamos referenciar o arquivo `Calculadora.js`, dentro da tag script, da seguinte forma:
106 |
107 | ```vue
108 |
109 | ```
110 |
111 | Execute a aplicação e veja se está tudo funcionando. Se sim, terminamos! 😊
--------------------------------------------------------------------------------
/workshop-1/agenda/21-finalização-do-desenvolvimento-do-arquivo-index-vue.md:
--------------------------------------------------------------------------------
1 | ## Finalização do desenvolvimento do arquivo 'index.vue'
2 |
3 | Observem que, o arquivo `index.vue` ficou muito mais clean e melhor para manter. Gosto dessa abordagem, devido ao bloco de script e css que tendem a ficar maiores caso o projeto seja extensivo, dificultando a manutenção desses componentes.
4 |
5 | Não é errado usar o conceito Single-File Component, repito, gosto da abordagem de separação de arquivos por motivos pessoais. Assim sendo, caso deseja manter o projeto seguindo o SFC, não tem problemas!
6 |
7 | Bom, o nosso projeto está pronto e preparado para ser enviado para a nuvem. Para isso, vamos usar o **[Azure App Service](https://azure.microsoft.com/?WT.mc_id=vuejsworkshop-github-gllemos)**, um dos serviços do Azure para realizar hospegadem de páginas estáticas de maneira simples e gratuita*
8 |
9 | Vamos agora hospedar a nossa aplicação na nuvem!
--------------------------------------------------------------------------------
/workshop-1/agenda/22-o-que-é-azure-app-service.md:
--------------------------------------------------------------------------------
1 | ## O que é Azure App Service?
2 |
3 | O **[Azure App Service](https://azure.microsoft.com/services/app-service/?WT.mc_id=vuejsworkshop-github-gllemos)** é um serviço que te permite implementar e hospedar de maneira muito rápida aplicativos Web em diferentes linguagens: .NET, .NET Core, Node.js, Java, PHP, Ruby ou Python.
4 |
5 | Independente do Sistema Operacional que você esteja usando, seja ela: Windows ou Linux. Você pode também automatizar o seu código com o GitHub, Azure DevOps ou qualquer outro repositório Git.
6 |
7 | Caso desejam saber como implementar/hospedar uma aplicação Web no Azure App Service em: Node.js e Site HTML estático, segue os links abaixo para leitura:
8 |
9 | * **[Criar aplicativo Node.js no Azure App Service](https://docs.microsoft.com/azure/app-service/app-service-web-get-started-nodejs?WT.mc_id=vuejsworkshop-github-gllemos)**
10 |
11 | * **[Criar um aplicativo Web HTML estático no Azure App Service](https://docs.microsoft.com/azure/app-service/app-service-web-get-started-html?WT.mc_id=vuejsworkshop-github-gllemos)**
12 |
13 | E também, você poderá implementar o Azure App Service usando o Visual Studio Code. Para entender mais, segue os links abaixo:
14 |
15 | * **[Deploy to Azure using App Service](https://code.visualstudio.com/tutorials/app-service-extension/getting-started?WT.mc_id=vuejsworkshop-github-gllemos)**
16 |
17 | * **[Deploy a static website to Azure](https://code.visualstudio.com/tutorials/static-website/getting-started?WT.mc_id=vuejsworkshop-github-gllemos)**
18 |
19 | Mas, fiquem calmos que estaremos ensinando aqui o passo a passo como podemos realizar essa implementação/hospedagem da nossa aplicação! 😉
20 |
--------------------------------------------------------------------------------
/workshop-1/agenda/23-criando-uma-conta-no-azure.md:
--------------------------------------------------------------------------------
1 | ## Criando Conta no Azure
2 |
3 | Para realizar a implementação da nossa aplicação na nuvem, vamos precisar criar uma conta no Azure. Há dois tipos de contas:
4 |
5 | * **[Conta Azure](https://azure.microsoft.com/?WT.mc_id=vuejsworkshop-github-gllemos)**: que é a conta comum para quem não é estudante.
6 |
7 | * **[Azure for Students](https://azure.microsoft.com/free/students/?WT.mc_id=vuejsworkshop-github-gllemos)**: que é uma conta do Azure dedicada para Universitários e que permite usar o valor de USD 100,00 de maneira gratuita e sem necessidade em obter um cartão de crédito.
8 |
9 | Como o enfoque nessa parte do workshop é realizar a implementação da nossa aplicação na nuvem, há um curso inteiramente grátis que ensina como você pode criar uma conta no Azure de maneira simples e prático:
10 |
11 | * **[Criando uma conta do Azure](https://docs.microsoft.com/learn/modules/create-an-azure-account/?WT.mc_id=vuejsworkshop-github-gllemos)**
12 |
13 | Depois de realizar o curso, automaticamente você já criará uma conta no Azure. Ao terminar, podemos seguir com o nosso workshop!
--------------------------------------------------------------------------------
/workshop-1/agenda/24-hospedando-a-aplicação-no-azure-app-service.md:
--------------------------------------------------------------------------------
1 | ## Hospedando a aplicação no Azure App Service
2 |
3 | ### Executando o comando 'Build'
4 |
5 | A primeira coisa que precisamos fazer, antes de realizar a implementação e hospedagem da nossa aplicação é executar o comando `build` na nossa aplicação.
6 |
7 | Antes de executar o comando `npm run build`, será necessário realizar algumas alterações significativas no arquivo `package.json`.
8 |
9 | Abre o arquivo `package.json` e altere a versão do pacote abaixo:
10 |
11 | ```json
12 | "optimize-css-assets-webpack-plugin": "^3.2.0",
13 | ```
14 |
15 | Depois, execute o comando no prompt de comando:
16 |
17 | ```bash
18 | rm -rf node_modules
19 | ```
20 |
21 | Esse comando fará que desinstale a nossa pasta `node_modules`. Após isso, agora execute o comando:
22 |
23 | ```bash
24 | npm install
25 | ```
26 |
27 | Depois de realizar os passos acima, podemos executa o seguinte comando:
28 |
29 | ```bash
30 | > npm run build
31 | ```
32 |
33 | Ao executar esse comando, ele criará uma pasta `dist` no projeto. E é justamente os arquivos contidos nessa pasta que precisaremos enviar para implementar na nuvem.
34 |
35 | Agora sim, podemos hospedar a nossa aplicação.
36 |
37 | ### Criando um Resource Group no Portal Azure
38 |
39 | Entre agora no **[Portal Azure](https://azure.microsoft.com/features/azure-portal/?WT.mc_id=vuejsworkshop-github-gllemos)** e siga conforme os passos abaixo:
40 |
41 | 1 - Clique em **Resource Groups**
42 |
43 | [](https://postimg.cc/xX2JvgR9)
44 |
45 | 2 - Clique no botão **Add New Resource Group**
46 |
47 | [](https://postimg.cc/mt030Qyn)
48 |
49 | 3 - Escolha a Subscription que aparecerá para você e depois crie um nome para o campo **Resource Group**. No meu caso será: **CalcVueResourceGroup**. E por fim, escolha a **Region**, no meu caso escolherei: **(US) Central US**
50 |
51 | [](https://postimg.cc/XXcFNK3f)
52 |
53 | 4 - Depois clique no botão: **Review and Create** e depois **Create**
54 |
55 | [](https://postimg.cc/bDRJPTbd)
56 |
57 | Feito isso, você já terá criado um **Resource Group** para a sua aplicação. Vamos dar continuidade!
58 |
59 | ### Criando um Resource: Web App
60 |
61 | Siga os seguintes passos abaixo:
62 |
63 | 1 - Clique no botão: **Create a Resource** onde há um sinal de +
64 |
65 | [](https://postimg.cc/1fVQcBt6)
66 |
67 | 2 - Na caixa de pesquisa, digite: **Web App** e depois clique no botão: **Create**
68 |
69 | [](https://postimg.cc/K17CJHyK)
70 |
71 | 3 - Aparecerá uma outra janela, onde você deverá preencher da seguinte maneira:
72 |
73 | * **Subscription:** (o mesmo Subscription do passo anterior)
74 |
75 | * **Resource Group:** escolher o Resource Group que você criou no passo anterior. No meu caso: **CalcVueResourceGroup**
76 |
77 | * **Web App Name:** aqui colocaremos o nome do link da nossa aplicação. Deverá ser um nome único. No meu caso, colocarei: **glau-calc-vue**
78 |
79 | * **Publish:** escolher a opção **Code**
80 |
81 | * **Runtime Stack:** aqui devemos escolher o runtime. Como estamos trabalhando com o JavaScript, vamos escolher a versão: **Node 10.0**
82 |
83 | * **Operating System:** escolher a versão **Windows**
84 |
85 | * **Region:** a mesma região que escolhemos no passo anterior. No meu caso: **Central US**
86 |
87 | Deverá ficar da seguinte maneira:
88 |
89 | [](https://postimg.cc/CnLjpdZT)
90 |
91 | Na parte de App Service Plan, vamos criar um novo. Para isso, clique no botão: **Create New** -> criar um novo nome: **CalcVueServicePlan** -> **OK**
92 |
93 | [](https://postimg.cc/47F3n3LT)
94 |
95 | Agora a cereja do bolo! Vamos alterar o plano para hospedagem grátis. Para isso, faça o seguinte:
96 |
97 | 1 - Em **Sku and size** clique em **Change size**. Depois disso abrirá a seguinte janela:
98 |
99 | [](https://postimg.cc/p9sW1Ttn)
100 |
101 | 2 - Clique na caixa: **Dev/Test** e depois escolha a opção **F1** -> e depois clique no botão **Apply**
102 |
103 | [](https://postimg.cc/w1WZCs7H)
104 |
105 | 3 - Na tag **Monitoring**, desativar o **Application Insigths** com a opção **No**
106 |
107 | [](https://postimg.cc/PP02YzpC)
108 |
109 | 4 - E por último, clicar no botão: **Review and Create** -> **Create**
110 |
111 | [](https://postimg.cc/bdBTfHRm)
112 |
113 | Feito isso, criará um **Web App** para nós!
114 |
115 | 5 - Agora, cliquem em **Go to resource**
116 |
117 | [](https://postimg.cc/m1tK2LqJ)
118 |
119 | 6 - Show! Aparecerá uma outra tela para vocês. Essa tela mostra toda a configuração da nossa aplicação. Nessa tela cliquem na url da aplicação: **https://glau-calc-vue.azurewebsites.net**
120 |
121 | [](https://postimg.cc/0rsfkygw)
122 |
123 | Abrirá a seguinte página:
124 |
125 | [](https://postimg.cc/jWy7mySk)
126 |
127 | 7 - Vamos entrar no Kudu's da nossa aplicação. Para isso, façam o seguinte, precisaremos colocar `scm` na url da aplicação, digite da seguinte maneira: `https://glau-calc-vue.scm.azurewebsites.net/`
128 |
129 | 8 - Abrirá a seguinte página:
130 |
131 | [](https://postimg.cc/Rq2nSPJb)
132 |
133 | 9 - Depois clique em **CMD**
134 |
135 | [](https://postimg.cc/ppDy2PHp)
136 |
137 | 10 - Depois clique em: **Site** -> **wwwroot**
138 |
139 | [](https://postimg.cc/TLDfCc2p)
140 |
141 | 11 - Chegando até esse ponto, vamos agora transferir todos os arquivos da pasta `dist` do nosso projeto para dentro dessa página conforme o gif abaixo:
142 |
143 | [](https://gifyu.com/image/EmRI)
144 |
145 | 12 - Feito isso, digite a url da aplicação: `https://glau-calc-vue.azurewebsites.net/` e vejam que a aplicação estará online e funcionando e hospedado na nuvem de maneira gratuita!
146 |
147 | [](https://postimg.cc/2qJB1TX6)
148 |
149 |
150 |
151 |
152 |
153 |
154 |
--------------------------------------------------------------------------------
/workshop-1/agenda/3-alterando-o-componente-no-projeto.md:
--------------------------------------------------------------------------------
1 | ## Alterando o componente no Projeto
2 |
3 | Vamos alterar algumas coisas no projeto. Uma delas é alterar o nome do componente para ‘Calculadora’.
4 |
5 | Vá até: **src -> components**
6 |
7 | Ali, altere de **HelloWorld** para **Calculadora.vue**
8 |
9 | 
10 |
11 | Show! Agora abre o arquivo **App.vue** e vamos fazer as alterações necessárias, senão não conseguiremos executar a aplicação. No final o aquivo **App.vue** ficará da seguinte maneira:
12 |
13 | ```vue
14 | //==> App.vue
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
31 |
32 |
42 | ```
43 |
44 | Agora, vamos focar no arquivo **Calculadora.vue**, pois é onde toda a brincadeira vai acontecer! 😉
--------------------------------------------------------------------------------
/workshop-1/agenda/4-incluindo-css-no-componente-calculadora-vue.md:
--------------------------------------------------------------------------------
1 | ## Incluindo Css no Componente Calculadora.vue
2 |
3 | Abram o arquivo **Calculadora.vue** e alterem conforme o código abaixo:
4 |
5 | ```vue
6 |
7 |
8 |
9 |
13 |
14 |
15 |
17 | ```
18 |
19 | O arquivo ficará ‘cru’ por assim dizer mesmo. Pois nessa primeira parte, focaremos nas tags: template e style. Inclusive, já peço para que vocês deem uma olhada na excelente documentação do Vue.js — que está totalmente em português!
20 |
21 | [](https://br.vuejs.org/v2/guide/index.html)
22 |
23 | Show! Agora, vamos começar a programar! Crie na tag **style** a classe: **.calculadora** e faça algumas alterações na tag **template**
24 |
25 | ```vue
26 |
27 |
28 |
teste
29 |
teste
30 |
teste
31 |
teste
32 |
teste
33 |
teste
34 |
teste
35 |
teste
36 |
teste
37 |
teste
38 |
teste
39 |
teste
40 |
teste
41 |
teste
42 |
teste
43 |
teste
44 |
teste
45 |
teste
46 |
teste
47 |
teste
48 |
49 |
50 |
51 |
55 |
56 |
57 |
64 | ```
65 |
66 | Depois de realizar essas alterações vocês perceberão no browser algumas mudanças que dá a entender que estamos desenvolvendo uma Calculadora:
67 |
68 | 
69 |
70 | Vamos continuar focando no Css! Vamos tratar o display principal da nossa Calculadora. Para isso, vamos criar uma outra classe chamada: .display e alterar o código conforme abaixo: **(alterações nas linhas 3 e 42–46)**
71 |
72 | ```vue
73 |
74 |
75 |
1.565854
76 |
teste
77 |
teste
78 |
teste
79 |
teste
80 |
teste
81 |
teste
82 |
teste
83 |
teste
84 |
teste
85 |
teste
86 |
teste
87 |
teste
88 |
teste
89 |
teste
90 |
teste
91 |
teste
92 |
teste
93 |
teste
94 |
teste
95 |
96 |
97 |
98 |
102 |
103 |
104 |
116 | ```
117 |
118 | E vejam o resultado abaixo:
119 |
120 | 
121 |
122 | Observem que já conseguimos mentalizar e ver que de fato temos um display dos resultados da nossa Calculadora ganhando corpo. Mas, vamos continuar!
123 |
124 | Vamos alterar também o font-size da nossa Calculadora. Volte na classe .calculadora e inclua dentro da classe a seguinte linha
125 |
126 | ```vue
127 | font-size: 40px;
128 | ```
129 |
130 | E vejam o resultado:
131 |
132 | 
133 |
134 | Agora, vamos ordenar os botões da Calculadora e criar uma classe chamada: **.zero** e sigam conforme o código:
135 |
136 | ```vue
137 |
138 |
139 |
0
140 |
C
141 |
+/-
142 |
%
143 |
÷
144 |
7
145 |
8
146 |
9
147 |
x
148 |
4
149 |
5
150 |
6
151 |
-
152 |
1
153 |
2
154 |
3
155 |
+
156 |
0
157 |
.
158 |
=
159 |
160 |
161 |
162 |
166 |
167 |
168 |
184 | ```
185 |
186 | E olhem o resultado:
187 |
188 | 
189 |
190 | Olha a nossa Calculadora já ganhando forma! Mas, começar a trabalhar com os botões. Para isso, vamos criar uma classe chamada: .botoes e vejam como vai ficar o código agora:
191 |
192 | ```vue
193 |
194 |
195 |
0
196 |
C
197 |
+/-
198 |
%
199 |
÷
200 |
7
201 |
8
202 |
9
203 |
x
204 |
4
205 |
5
206 |
6
207 |
-
208 |
1
209 |
2
210 |
3
211 |
+
212 |
0
213 |
.
214 |
=
215 |
216 |
217 |
218 |
222 |
223 |
224 |
244 | ```
245 |
246 | E o resultado:
247 |
248 | 
249 |
250 | Estamos terminando a parte do css. Precisamos redimensionar essa Calculadora. Como podem ver, ela está ocupando toda página! Para isso, façam as alterações necessárias conforme o código abaixo:
251 |
252 | ```vue
253 |
254 |
255 |
0
256 |
C
257 |
+/-
258 |
%
259 |
÷
260 |
7
261 |
8
262 |
9
263 |
x
264 |
4
265 |
5
266 |
6
267 |
-
268 |
1
269 |
2
270 |
3
271 |
+
272 |
0
273 |
.
274 |
=
275 |
276 |
277 |
278 |
282 |
283 |
284 |
310 | ```
311 |
312 | E vejam o resultado final da nossa Calculadora!
313 |
314 | 
315 |
316 | Ficou linda não é mesmo?! 😍
317 |
--------------------------------------------------------------------------------
/workshop-1/agenda/5-desenvolvendo-o-display.md:
--------------------------------------------------------------------------------
1 | ## Desenvolvendo o 'Display'
2 |
3 | Abram o **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=devto-blog-gllemos)**. Após isso, abram a pasta: **src** e depois o arquivo **Calculadora.vue**
4 |
5 | Vamos focar na parte das tags de **script**.
6 | É justamente aí que toda a lógica da nossa Calculadora acontecerá!
7 |
8 | Digitem o código abaixo:
9 |
10 | ```vue
11 |
22 | ```
23 | Aqui estamos criando uma variável que será responsável pelo 'Display' da nossa Calculadora.
24 |
25 | Feito isso, já deixem executando a aplicação ao lado, para que possamos acompanhar o desenvolvimento e se está tudo correndo bem.
26 |
27 | Na seção template, inclua a seguinte linha de código:
28 |
29 | ```vue
30 |
31 |
32 |
{{valorCorrente || '0'}}
33 |
C
34 |
+/-
35 |
%
36 |
÷
37 |
7
38 |
8
39 |
9
40 |
x
41 |
4
42 |
5
43 |
6
44 |
-
45 |
1
46 |
2
47 |
3
48 |
+
49 |
0
50 |
.
51 |
=
52 |
53 |
54 | ```
55 | Após isso, execute a aplicação e deverá aparecer da seguinte forma como a imagem abaixo:
56 |
57 | [](https://postimg.cc/5H4qWztc)
58 |
59 | O display da nossa Calculadora já está funcionando. Agora, vamos desenvolver a lógica dos demais botões!
--------------------------------------------------------------------------------
/workshop-1/agenda/6-desenvolvendo-o-botão-c.md:
--------------------------------------------------------------------------------
1 | ## Desenvolvendo o Botão 'C'
2 |
3 | O botão limpar, que está representado pela letra C na Calculadora, será desenvolvido da seguinte maneira.
4 |
5 | Vá até a tag de template e inclua o código abaixo:
6 |
7 | ```vue
8 |
9 |
10 |
{{valorCorrente || '0'}}
11 |
12 | (...)
13 |
14 |
15 | ```
16 |
17 | Notem que estamos incluindo o **@click**. Isso representa que começaremos a trabalhar com Manipulação de Eventos no Vue.js. Se desejarem aprender um pouco mais a respeito, bastam acessar a Documentação do Vue.js que trata justamente dessa parte - **[AQUI](https://br.vuejs.org/v2/guide/events.html)**
18 |
19 | Para todos os botões que envolverão click, usaremos esse recurso. Que pode ser:
20 |
21 | * @click=""
22 | * v-on:click=""
23 |
24 | Das duas formas estão corretas. O mais utilizado é: **v-on:click**. Então, vamos utilizar a forma mais corriqueira.
25 |
26 | Vamos fazer o seguinte agora, vamos colocar todas as ações do **v-on:click** em todos os botões agora:
27 |
28 | ```vue
29 |
30 |
31 |
{{valorCorrente || '0'}}
32 |
C
33 |
+/-
34 |
%
35 |
÷
36 |
7
37 |
8
38 |
9
39 |
x
40 |
4
41 |
5
42 |
6
43 |
-
44 |
1
45 |
2
46 |
3
47 |
+
48 |
0
49 |
.
50 |
=
51 |
52 |
53 | ```
54 | Agora vamos desenvolver a lógica do 'limpar'. Vá até a tag **script** e inclua o seguinte método abaixo:
55 |
56 | ```vue
57 |
73 | ```
74 | Execute a aplicação e veja se vai funcionar!
--------------------------------------------------------------------------------
/workshop-1/agenda/7-desenvolvendo-o-botão-sinal.md:
--------------------------------------------------------------------------------
1 | ## Desenvolvendo o Botão '+/-'
2 |
3 | Agora vamos desenvolver o botão **+/-** da Calculadora, para isso, altere os seguintes códigos.
4 |
5 | Na tag **template** crie a função **sinal**:
6 |
7 |
8 | ```vue
9 |
10 |
11 |
+/-
12 |
13 |
14 | ```
15 |
16 | Na tag **script** desenvolva o método **sinal**
17 |
18 | ```vue
19 |
26 | ```
27 |
28 | Estamos usando nessa operação o **chartAt** e o **slice**. Para entender melhor esses métodos, recomendo as leituras abaixo:
29 |
30 | * **[chartAt](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String/charAt)**
31 | * **[slice](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)**
32 |
33 | Se executar a calculadora, você observará que o sinal de +/- estão funcionando devidamente.
34 |
35 | [](https://postimg.cc/ygjv0hYn)
36 |
37 | Vamos continuar!
--------------------------------------------------------------------------------
/workshop-1/agenda/8-desenvolvendo-o-botão-porcentagem.md:
--------------------------------------------------------------------------------
1 | ## Desenvolvendo o Botão '%'
2 |
3 | A lógica sempre será essa daqui para frente: cria um método na ação do **v-on:click=""** na tag **template** e logo em seguida, desenvolvemos a lógica desse método na tag **script**.
4 |
5 | ```vue
6 |
7 |
8 |
%
9 |
10 |
11 | ```
12 |
13 | ```vue
14 |
19 | ```
20 | Execute a aplicação veja se está funcionando devidamente.
--------------------------------------------------------------------------------
/workshop-1/agenda/9-desenvolvendo-a-junção-dos-números.md:
--------------------------------------------------------------------------------
1 | ## Desenvolvendo a Junção dos Números
2 |
3 | Se vocês observarem até nesse ponto do artigo, os números não estão juntando. Para isso, vamos alterar o código da seguinte maneira na tag **template**
4 |
5 | ```vue
6 |
7 |
8 |
{{valorCorrente || '0'}}
9 |
C
10 |
+/-
11 |
%
12 |
÷
13 |
7
14 |
8
15 |
9
16 |
x
17 |
4
18 |
5
19 |
6
20 |
-
21 |
1
22 |
2
23 |
3
24 |
+
25 |
0
26 |
.
27 |
=
28 |
29 |
30 | ```
31 | E na tag **script** façam o seguinte:
32 |
33 | ```vue
34 |
44 | ```
45 |
46 | Ao executarem agora a aplicação, verão que a Calculadura já está ganhando bem mais funcionalidades do que antes. Vamos continuar, pois agora falta pouca coisa!
--------------------------------------------------------------------------------
/workshop-1/projeto-1/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | ["env", {
4 | "modules": false,
5 | "targets": {
6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
7 | }
8 | }],
9 | "stage-2"
10 | ],
11 | "plugins": ["transform-vue-jsx", "transform-runtime"]
12 | }
13 |
--------------------------------------------------------------------------------
/workshop-1/projeto-1/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
--------------------------------------------------------------------------------
/workshop-1/projeto-1/.eslintignore:
--------------------------------------------------------------------------------
1 | /build/
2 | /config/
3 | /dist/
4 | /*.js
5 |
--------------------------------------------------------------------------------
/workshop-1/projeto-1/.eslintrc.js:
--------------------------------------------------------------------------------
1 | // https://eslint.org/docs/user-guide/configuring
2 |
3 | module.exports = {
4 | root: true,
5 | parserOptions: {
6 | parser: 'babel-eslint'
7 | },
8 | env: {
9 | browser: true,
10 | },
11 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
12 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
13 | extends: ['plugin:vue/essential', 'airbnb-base'],
14 | // required to lint *.vue files
15 | plugins: [
16 | 'vue'
17 | ],
18 | // check if imports actually resolve
19 | settings: {
20 | 'import/resolver': {
21 | webpack: {
22 | config: 'build/webpack.base.conf.js'
23 | }
24 | }
25 | },
26 | // add your custom rules here
27 | rules: {
28 | // don't require .vue extension when importing
29 | 'import/extensions': ['error', 'always', {
30 | js: 'never',
31 | vue: 'never'
32 | }],
33 | // disallow reassignment of function parameters
34 | // disallow parameter object manipulation except for specific exclusions
35 | 'no-param-reassign': ['error', {
36 | props: true,
37 | ignorePropertyModificationsFor: [
38 | 'state', // for vuex state
39 | 'acc', // for reduce accumulators
40 | 'e' // for e.returnvalue
41 | ]
42 | }],
43 | // allow optionalDependencies
44 | 'import/no-extraneous-dependencies': ['error', {
45 | optionalDependencies: ['test/unit/index.js']
46 | }],
47 | // allow debugger during development
48 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/workshop-1/projeto-1/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | /dist/
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Editor directories and files
9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 |
--------------------------------------------------------------------------------
/workshop-1/projeto-1/.postcssrc.js:
--------------------------------------------------------------------------------
1 | // https://github.com/michael-ciniawsky/postcss-load-config
2 |
3 | module.exports = {
4 | "plugins": {
5 | "postcss-import": {},
6 | "postcss-url": {},
7 | // to edit target browsers: use "browserslist" field in package.json
8 | "autoprefixer": {}
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/workshop-1/projeto-1/README.md:
--------------------------------------------------------------------------------
1 | # Projeto: Calculadora em Vue.js 2
2 |
3 | [](https://postimg.cc/vcxkyCp6)
4 |
5 | A demo consiste no desenvolvimento de uma Calculadora Simples. Onde ao final do desenvolvimento do projeto estaremos realizando a hospedagem do projeto no **[Azure App Service](https://azure.microsoft.com/?WT.mc_id=vuejsworkshop-github-gllemos)**.
6 |
7 | ## Recursos Utilizados 🚀
8 |
9 | * **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=vuejsworkshop-github-gllemos)**
10 | * **[Node.js](https://nodejs.org/en/)**
11 | * **[Vue.js](https://vuejs.org/)**
12 | * **[Vue-CLI](https://cli.vuejs.org/)**
13 | * **[Azure App Service](https://azure.microsoft.com/?WT.mc_id=vuejsworkshop-github-gllemos)**
14 |
15 | ## Executando Localmente o Projeto 🔥
16 |
17 | Caso você deseja executar o projeto na sua máquina local, basta seguir os passos abaixo:
18 |
19 | ### Começando... 🌀
20 |
21 | Para começar, você deve simplesmente clonar o repositório do projeto na sua máquina e instalar as dependências.
22 |
23 | ### Instalando as Dependências (via Windows): ❗️
24 |
25 | Abre o cmd (caso esteja utilizando o Windows) e digite a path do seu projeto
26 |
27 | ```bash
28 | > cd "C:\Users\NomeDoComputador\Documents\..."
29 | ```
30 |
31 | Depois, quando estiver na pasta do projeto, basta digitar no cmd a seguinte instrução: (dentro do calculadora-app)
32 |
33 | ```bash
34 | > npm install
35 | ```
36 |
37 | Ao digitar a instrução acima, automaticamente ele irá baixar todas as dependências listadas e definidas no arquivo **package.json**:
38 |
39 | `node_modules` - que contêm os packages do npm que precisará para o projeto.
40 |
41 | ### Executando a Aplicação 💨
42 |
43 | Bom, agora na mesma tela do cmd, basta iniciar o server para o projeto ser executado localmente.
44 |
45 | ```bash
46 | > npm run dev
47 | ```
48 | ## Demo da Aplicação (Online) ⭐️
49 |
50 | Caso desejam visualizar a demo da aplicação na nuvem, bastam acessar o link **[AQUI](https://glau-calc-vue.azurewebsites.net/)**.
51 |
52 |
53 | ## Tenho Dúvidas... O que Faço?! ❓
54 |
55 | Se tiverem alguma dúvida referente ao código desenvolvido ou para configurar o ambiente, bastam criar uma **[ISSUE](https://github.com/glaucia86/vuejs-workshop/issues)** no GitHub que estarei respondendo a vocês!! :heart: :heart: :heart: :blush:
56 |
--------------------------------------------------------------------------------
/workshop-1/projeto-1/build/build.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | require('./check-versions')()
3 |
4 | process.env.NODE_ENV = 'production'
5 |
6 | const ora = require('ora')
7 | const rm = require('rimraf')
8 | const path = require('path')
9 | const chalk = require('chalk')
10 | const webpack = require('webpack')
11 | const config = require('../config')
12 | const webpackConfig = require('./webpack.prod.conf')
13 |
14 | const spinner = ora('building for production...')
15 | spinner.start()
16 |
17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
18 | if (err) throw err
19 | webpack(webpackConfig, (err, stats) => {
20 | spinner.stop()
21 | if (err) throw err
22 | process.stdout.write(stats.toString({
23 | colors: true,
24 | modules: false,
25 | children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
26 | chunks: false,
27 | chunkModules: false
28 | }) + '\n\n')
29 |
30 | if (stats.hasErrors()) {
31 | console.log(chalk.red(' Build failed with errors.\n'))
32 | process.exit(1)
33 | }
34 |
35 | console.log(chalk.cyan(' Build complete.\n'))
36 | console.log(chalk.yellow(
37 | ' Tip: built files are meant to be served over an HTTP server.\n' +
38 | ' Opening index.html over file:// won\'t work.\n'
39 | ))
40 | })
41 | })
42 |
--------------------------------------------------------------------------------
/workshop-1/projeto-1/build/check-versions.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const chalk = require('chalk')
3 | const semver = require('semver')
4 | const packageConfig = require('../package.json')
5 | const shell = require('shelljs')
6 |
7 | function exec (cmd) {
8 | return require('child_process').execSync(cmd).toString().trim()
9 | }
10 |
11 | const versionRequirements = [
12 | {
13 | name: 'node',
14 | currentVersion: semver.clean(process.version),
15 | versionRequirement: packageConfig.engines.node
16 | }
17 | ]
18 |
19 | if (shell.which('npm')) {
20 | versionRequirements.push({
21 | name: 'npm',
22 | currentVersion: exec('npm --version'),
23 | versionRequirement: packageConfig.engines.npm
24 | })
25 | }
26 |
27 | module.exports = function () {
28 | const warnings = []
29 |
30 | for (let i = 0; i < versionRequirements.length; i++) {
31 | const mod = versionRequirements[i]
32 |
33 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
34 | warnings.push(mod.name + ': ' +
35 | chalk.red(mod.currentVersion) + ' should be ' +
36 | chalk.green(mod.versionRequirement)
37 | )
38 | }
39 | }
40 |
41 | if (warnings.length) {
42 | console.log('')
43 | console.log(chalk.yellow('To use this template, you must update following to modules:'))
44 | console.log()
45 |
46 | for (let i = 0; i < warnings.length; i++) {
47 | const warning = warnings[i]
48 | console.log(' ' + warning)
49 | }
50 |
51 | console.log()
52 | process.exit(1)
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/workshop-1/projeto-1/build/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/glaucia86/vuejs-workshop/d5137629d31c9b1501edba305a82122c1a7cda4b/workshop-1/projeto-1/build/logo.png
--------------------------------------------------------------------------------
/workshop-1/projeto-1/build/utils.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const path = require('path')
3 | const config = require('../config')
4 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
5 | const packageConfig = require('../package.json')
6 |
7 | exports.assetsPath = function (_path) {
8 | const assetsSubDirectory = process.env.NODE_ENV === 'production'
9 | ? config.build.assetsSubDirectory
10 | : config.dev.assetsSubDirectory
11 |
12 | return path.posix.join(assetsSubDirectory, _path)
13 | }
14 |
15 | exports.cssLoaders = function (options) {
16 | options = options || {}
17 |
18 | const cssLoader = {
19 | loader: 'css-loader',
20 | options: {
21 | sourceMap: options.sourceMap
22 | }
23 | }
24 |
25 | const postcssLoader = {
26 | loader: 'postcss-loader',
27 | options: {
28 | sourceMap: options.sourceMap
29 | }
30 | }
31 |
32 | // generate loader string to be used with extract text plugin
33 | function generateLoaders (loader, loaderOptions) {
34 | const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
35 |
36 | if (loader) {
37 | loaders.push({
38 | loader: loader + '-loader',
39 | options: Object.assign({}, loaderOptions, {
40 | sourceMap: options.sourceMap
41 | })
42 | })
43 | }
44 |
45 | // Extract CSS when that option is specified
46 | // (which is the case during production build)
47 | if (options.extract) {
48 | return ExtractTextPlugin.extract({
49 | use: loaders,
50 | fallback: 'vue-style-loader'
51 | })
52 | } else {
53 | return ['vue-style-loader'].concat(loaders)
54 | }
55 | }
56 |
57 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html
58 | return {
59 | css: generateLoaders(),
60 | postcss: generateLoaders(),
61 | less: generateLoaders('less'),
62 | sass: generateLoaders('sass', { indentedSyntax: true }),
63 | scss: generateLoaders('sass'),
64 | stylus: generateLoaders('stylus'),
65 | styl: generateLoaders('stylus')
66 | }
67 | }
68 |
69 | // Generate loaders for standalone style files (outside of .vue)
70 | exports.styleLoaders = function (options) {
71 | const output = []
72 | const loaders = exports.cssLoaders(options)
73 |
74 | for (const extension in loaders) {
75 | const loader = loaders[extension]
76 | output.push({
77 | test: new RegExp('\\.' + extension + '$'),
78 | use: loader
79 | })
80 | }
81 |
82 | return output
83 | }
84 |
85 | exports.createNotifierCallback = () => {
86 | const notifier = require('node-notifier')
87 |
88 | return (severity, errors) => {
89 | if (severity !== 'error') return
90 |
91 | const error = errors[0]
92 | const filename = error.file && error.file.split('!').pop()
93 |
94 | notifier.notify({
95 | title: packageConfig.name,
96 | message: severity + ': ' + error.name,
97 | subtitle: filename || '',
98 | icon: path.join(__dirname, 'logo.png')
99 | })
100 | }
101 | }
102 |
--------------------------------------------------------------------------------
/workshop-1/projeto-1/build/vue-loader.conf.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const utils = require('./utils')
3 | const config = require('../config')
4 | const isProduction = process.env.NODE_ENV === 'production'
5 | const sourceMapEnabled = isProduction
6 | ? config.build.productionSourceMap
7 | : config.dev.cssSourceMap
8 |
9 | module.exports = {
10 | loaders: utils.cssLoaders({
11 | sourceMap: sourceMapEnabled,
12 | extract: isProduction
13 | }),
14 | cssSourceMap: sourceMapEnabled,
15 | cacheBusting: config.dev.cacheBusting,
16 | transformToRequire: {
17 | video: ['src', 'poster'],
18 | source: 'src',
19 | img: 'src',
20 | image: 'xlink:href'
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/workshop-1/projeto-1/build/webpack.base.conf.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const path = require('path')
3 | const utils = require('./utils')
4 | const config = require('../config')
5 | const vueLoaderConfig = require('./vue-loader.conf')
6 |
7 | function resolve (dir) {
8 | return path.join(__dirname, '..', dir)
9 | }
10 |
11 | const createLintingRule = () => ({
12 | test: /\.(js|vue)$/,
13 | loader: 'eslint-loader',
14 | enforce: 'pre',
15 | include: [resolve('src'), resolve('test')],
16 | options: {
17 | formatter: require('eslint-friendly-formatter'),
18 | emitWarning: !config.dev.showEslintErrorsInOverlay
19 | }
20 | })
21 |
22 | module.exports = {
23 | context: path.resolve(__dirname, '../'),
24 | entry: {
25 | app: './src/main.js'
26 | },
27 | output: {
28 | path: config.build.assetsRoot,
29 | filename: '[name].js',
30 | publicPath: process.env.NODE_ENV === 'production'
31 | ? config.build.assetsPublicPath
32 | : config.dev.assetsPublicPath
33 | },
34 | resolve: {
35 | extensions: ['.js', '.vue', '.json'],
36 | alias: {
37 | 'vue$': 'vue/dist/vue.esm.js',
38 | '@': resolve('src'),
39 | }
40 | },
41 | module: {
42 | rules: [
43 | ...(config.dev.useEslint ? [createLintingRule()] : []),
44 | {
45 | test: /\.vue$/,
46 | loader: 'vue-loader',
47 | options: vueLoaderConfig
48 | },
49 | {
50 | test: /\.js$/,
51 | loader: 'babel-loader',
52 | include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
53 | },
54 | {
55 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
56 | loader: 'url-loader',
57 | options: {
58 | limit: 10000,
59 | name: utils.assetsPath('img/[name].[hash:7].[ext]')
60 | }
61 | },
62 | {
63 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
64 | loader: 'url-loader',
65 | options: {
66 | limit: 10000,
67 | name: utils.assetsPath('media/[name].[hash:7].[ext]')
68 | }
69 | },
70 | {
71 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
72 | loader: 'url-loader',
73 | options: {
74 | limit: 10000,
75 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
76 | }
77 | }
78 | ]
79 | },
80 | node: {
81 | // prevent webpack from injecting useless setImmediate polyfill because Vue
82 | // source contains it (although only uses it if it's native).
83 | setImmediate: false,
84 | // prevent webpack from injecting mocks to Node native modules
85 | // that does not make sense for the client
86 | dgram: 'empty',
87 | fs: 'empty',
88 | net: 'empty',
89 | tls: 'empty',
90 | child_process: 'empty'
91 | }
92 | }
93 |
--------------------------------------------------------------------------------
/workshop-1/projeto-1/build/webpack.dev.conf.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const utils = require('./utils')
3 | const webpack = require('webpack')
4 | const config = require('../config')
5 | const merge = require('webpack-merge')
6 | const path = require('path')
7 | const baseWebpackConfig = require('./webpack.base.conf')
8 | const CopyWebpackPlugin = require('copy-webpack-plugin')
9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
10 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
11 | const portfinder = require('portfinder')
12 |
13 | const HOST = process.env.HOST
14 | const PORT = process.env.PORT && Number(process.env.PORT)
15 |
16 | const devWebpackConfig = merge(baseWebpackConfig, {
17 | module: {
18 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
19 | },
20 | // cheap-module-eval-source-map is faster for development
21 | devtool: config.dev.devtool,
22 |
23 | // these devServer options should be customized in /config/index.js
24 | devServer: {
25 | clientLogLevel: 'warning',
26 | historyApiFallback: {
27 | rewrites: [
28 | { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
29 | ],
30 | },
31 | hot: true,
32 | contentBase: false, // since we use CopyWebpackPlugin.
33 | compress: true,
34 | host: HOST || config.dev.host,
35 | port: PORT || config.dev.port,
36 | open: config.dev.autoOpenBrowser,
37 | overlay: config.dev.errorOverlay
38 | ? { warnings: false, errors: true }
39 | : false,
40 | publicPath: config.dev.assetsPublicPath,
41 | proxy: config.dev.proxyTable,
42 | quiet: true, // necessary for FriendlyErrorsPlugin
43 | watchOptions: {
44 | poll: config.dev.poll,
45 | }
46 | },
47 | plugins: [
48 | new webpack.DefinePlugin({
49 | 'process.env': require('../config/dev.env')
50 | }),
51 | new webpack.HotModuleReplacementPlugin(),
52 | new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
53 | new webpack.NoEmitOnErrorsPlugin(),
54 | // https://github.com/ampedandwired/html-webpack-plugin
55 | new HtmlWebpackPlugin({
56 | filename: 'index.html',
57 | template: 'index.html',
58 | inject: true
59 | }),
60 | // copy custom static assets
61 | new CopyWebpackPlugin([
62 | {
63 | from: path.resolve(__dirname, '../static'),
64 | to: config.dev.assetsSubDirectory,
65 | ignore: ['.*']
66 | }
67 | ])
68 | ]
69 | })
70 |
71 | module.exports = new Promise((resolve, reject) => {
72 | portfinder.basePort = process.env.PORT || config.dev.port
73 | portfinder.getPort((err, port) => {
74 | if (err) {
75 | reject(err)
76 | } else {
77 | // publish the new Port, necessary for e2e tests
78 | process.env.PORT = port
79 | // add port to devServer config
80 | devWebpackConfig.devServer.port = port
81 |
82 | // Add FriendlyErrorsPlugin
83 | devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
84 | compilationSuccessInfo: {
85 | messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
86 | },
87 | onErrors: config.dev.notifyOnErrors
88 | ? utils.createNotifierCallback()
89 | : undefined
90 | }))
91 |
92 | resolve(devWebpackConfig)
93 | }
94 | })
95 | })
96 |
--------------------------------------------------------------------------------
/workshop-1/projeto-1/build/webpack.prod.conf.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const path = require('path')
3 | const utils = require('./utils')
4 | const webpack = require('webpack')
5 | const config = require('../config')
6 | const merge = require('webpack-merge')
7 | const baseWebpackConfig = require('./webpack.base.conf')
8 | const CopyWebpackPlugin = require('copy-webpack-plugin')
9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
10 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
12 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
13 |
14 | const env = require('../config/prod.env')
15 |
16 | const webpackConfig = merge(baseWebpackConfig, {
17 | module: {
18 | rules: utils.styleLoaders({
19 | sourceMap: config.build.productionSourceMap,
20 | extract: true,
21 | usePostCSS: true
22 | })
23 | },
24 | devtool: config.build.productionSourceMap ? config.build.devtool : false,
25 | output: {
26 | path: config.build.assetsRoot,
27 | filename: utils.assetsPath('js/[name].[chunkhash].js'),
28 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
29 | },
30 | plugins: [
31 | // http://vuejs.github.io/vue-loader/en/workflow/production.html
32 | new webpack.DefinePlugin({
33 | 'process.env': env
34 | }),
35 | new UglifyJsPlugin({
36 | uglifyOptions: {
37 | compress: {
38 | warnings: false
39 | }
40 | },
41 | sourceMap: config.build.productionSourceMap,
42 | parallel: true
43 | }),
44 | // extract css into its own file
45 | new ExtractTextPlugin({
46 | filename: utils.assetsPath('css/[name].[contenthash].css'),
47 | // Setting the following option to `false` will not extract CSS from codesplit chunks.
48 | // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
49 | // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
50 | // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
51 | allChunks: true,
52 | }),
53 | // Compress extracted CSS. We are using this plugin so that possible
54 | // duplicated CSS from different components can be deduped.
55 | new OptimizeCSSPlugin({
56 | cssProcessorOptions: config.build.productionSourceMap
57 | ? { safe: true, map: { inline: false } }
58 | : { safe: true }
59 | }),
60 | // generate dist index.html with correct asset hash for caching.
61 | // you can customize output by editing /index.html
62 | // see https://github.com/ampedandwired/html-webpack-plugin
63 | new HtmlWebpackPlugin({
64 | filename: config.build.index,
65 | template: 'index.html',
66 | inject: true,
67 | minify: {
68 | removeComments: true,
69 | collapseWhitespace: true,
70 | removeAttributeQuotes: true
71 | // more options:
72 | // https://github.com/kangax/html-minifier#options-quick-reference
73 | },
74 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin
75 | chunksSortMode: 'dependency'
76 | }),
77 | // keep module.id stable when vendor modules does not change
78 | new webpack.HashedModuleIdsPlugin(),
79 | // enable scope hoisting
80 | new webpack.optimize.ModuleConcatenationPlugin(),
81 | // split vendor js into its own file
82 | new webpack.optimize.CommonsChunkPlugin({
83 | name: 'vendor',
84 | minChunks (module) {
85 | // any required modules inside node_modules are extracted to vendor
86 | return (
87 | module.resource &&
88 | /\.js$/.test(module.resource) &&
89 | module.resource.indexOf(
90 | path.join(__dirname, '../node_modules')
91 | ) === 0
92 | )
93 | }
94 | }),
95 | // extract webpack runtime and module manifest to its own file in order to
96 | // prevent vendor hash from being updated whenever app bundle is updated
97 | new webpack.optimize.CommonsChunkPlugin({
98 | name: 'manifest',
99 | minChunks: Infinity
100 | }),
101 | // This instance extracts shared chunks from code splitted chunks and bundles them
102 | // in a separate chunk, similar to the vendor chunk
103 | // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
104 | new webpack.optimize.CommonsChunkPlugin({
105 | name: 'app',
106 | async: 'vendor-async',
107 | children: true,
108 | minChunks: 3
109 | }),
110 |
111 | // copy custom static assets
112 | new CopyWebpackPlugin([
113 | {
114 | from: path.resolve(__dirname, '../static'),
115 | to: config.build.assetsSubDirectory,
116 | ignore: ['.*']
117 | }
118 | ])
119 | ]
120 | })
121 |
122 | if (config.build.productionGzip) {
123 | const CompressionWebpackPlugin = require('compression-webpack-plugin')
124 |
125 | webpackConfig.plugins.push(
126 | new CompressionWebpackPlugin({
127 | asset: '[path].gz[query]',
128 | algorithm: 'gzip',
129 | test: new RegExp(
130 | '\\.(' +
131 | config.build.productionGzipExtensions.join('|') +
132 | ')$'
133 | ),
134 | threshold: 10240,
135 | minRatio: 0.8
136 | })
137 | )
138 | }
139 |
140 | if (config.build.bundleAnalyzerReport) {
141 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
142 | webpackConfig.plugins.push(new BundleAnalyzerPlugin())
143 | }
144 |
145 | module.exports = webpackConfig
146 |
--------------------------------------------------------------------------------
/workshop-1/projeto-1/config/dev.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const merge = require('webpack-merge')
3 | const prodEnv = require('./prod.env')
4 |
5 | module.exports = merge(prodEnv, {
6 | NODE_ENV: '"development"'
7 | })
8 |
--------------------------------------------------------------------------------
/workshop-1/projeto-1/config/index.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | // Template version: 1.3.1
3 | // see http://vuejs-templates.github.io/webpack for documentation.
4 |
5 | const path = require('path')
6 |
7 | module.exports = {
8 | dev: {
9 |
10 | // Paths
11 | assetsSubDirectory: 'static',
12 | assetsPublicPath: '/',
13 | proxyTable: {},
14 |
15 | // Various Dev Server settings
16 | host: 'localhost', // can be overwritten by process.env.HOST
17 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
18 | autoOpenBrowser: false,
19 | errorOverlay: true,
20 | notifyOnErrors: true,
21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
22 |
23 | // Use Eslint Loader?
24 | // If true, your code will be linted during bundling and
25 | // linting errors and warnings will be shown in the console.
26 | useEslint: true,
27 | // If true, eslint errors and warnings will also be shown in the error overlay
28 | // in the browser.
29 | showEslintErrorsInOverlay: false,
30 |
31 | /**
32 | * Source Maps
33 | */
34 |
35 | // https://webpack.js.org/configuration/devtool/#development
36 | devtool: 'cheap-module-eval-source-map',
37 |
38 | // If you have problems debugging vue-files in devtools,
39 | // set this to false - it *may* help
40 | // https://vue-loader.vuejs.org/en/options.html#cachebusting
41 | cacheBusting: true,
42 |
43 | cssSourceMap: true
44 | },
45 |
46 | build: {
47 | // Template for index.html
48 | index: path.resolve(__dirname, '../dist/index.html'),
49 |
50 | // Paths
51 | assetsRoot: path.resolve(__dirname, '../dist'),
52 | assetsSubDirectory: 'static',
53 | assetsPublicPath: '/',
54 |
55 | /**
56 | * Source Maps
57 | */
58 |
59 | productionSourceMap: true,
60 | // https://webpack.js.org/configuration/devtool/#production
61 | devtool: '#source-map',
62 |
63 | // Gzip off by default as many popular static hosts such as
64 | // Surge or Netlify already gzip all static assets for you.
65 | // Before setting to `true`, make sure to:
66 | // npm install --save-dev compression-webpack-plugin
67 | productionGzip: false,
68 | productionGzipExtensions: ['js', 'css'],
69 |
70 | // Run the build command with an extra argument to
71 | // View the bundle analyzer report after build finishes:
72 | // `npm run build --report`
73 | // Set to `true` or `false` to always turn it on or off
74 | bundleAnalyzerReport: process.env.npm_config_report
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/workshop-1/projeto-1/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 | NODE_ENV: '"production"'
4 | }
5 |
--------------------------------------------------------------------------------
/workshop-1/projeto-1/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
24 |
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/workshop-1/projeto-1/src/main.js:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import Vue from 'vue';
3 | import App from './App';
4 |
5 | Vue.config.productionTip = false;
6 |
7 | /* eslint-disable no-new */
8 | new Vue({
9 | el: '#app',
10 | components: { App },
11 | template: '',
12 | });
13 |
--------------------------------------------------------------------------------
/workshop-1/projeto-1/static/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/glaucia86/vuejs-workshop/d5137629d31c9b1501edba305a82122c1a7cda4b/workshop-1/projeto-1/static/.gitkeep
--------------------------------------------------------------------------------
/workshop-1/workshop-1.md:
--------------------------------------------------------------------------------
1 | # Workshop 1: Calculadora em Vue.js
2 |
3 | [](https://postimg.cc/hXJgd9Hg)
4 |
5 | Nesse workshop, estaremos desenvolvendo uma Calculadora Simples em Vue.js, visando aprender conceitos básicos da biblioteca.
6 |
7 | Ao final do desenvolvimento da aplicação, estaremos hospedando a nossa aplicação usando o **[Azure App Service](https://azure.microsoft.com/?WT.mc_id=vuejsworkshop-github-gllemos)**.
8 |
9 | ## Agenda - Worshop 1
10 |
11 | | Parte | Tópico |
12 | |---|--- |
13 | | **[Tutorial 1](agenda/1-criando-o-projeto-no-vue-cli.md)** | Criando o Projeto no Vue-CLI |
14 | | **[Tutorial 2](agenda/2-alterando-as-configurações-do-projeto.md)** | Alterando as configurações do Projeto |
15 | | **[Tutorial 3](agenda/3-alterando-o-componente-no-projeto.md)** | Alterando o componente no Projeto |
16 | | **[Tutorial 4](agenda/4-incluindo-css-no-componente-calculadora-vue.md)** | Incluindo Css no Componente Calculadora.vue |
17 | | **[Tutorial 5](agenda/5-desenvolvendo-o-display.md)** | Desenvolvendo o 'Display' |
18 | | **[Tutorial 6](agenda/6-desenvolvendo-o-botão-c.md)** | Desenvolvendo o Botão 'C' |
19 | | **[Tutorial 7](agenda/7-desenvolvendo-o-botão-sinal.md)** | Desenvolvendo o Botão '+/-' |
20 | | **[Tutorial 8](agenda/8-desenvolvendo-o-botão-porcentagem.md)** | Desenvolvendo o Botão '%' |
21 | | **[Tutorial 9](agenda/9-desenvolvendo-a-junção-dos-números.md)** | Desenvolvendo a Junção dos Números |
22 | | **[Tutorial 10](agenda/10-desenvolvendo-o-botão-ponto.md)** | Desenvolvendo o Botão '.' (ponto) |
23 | | **[Tutorial 11](agenda/11-desenvolvedo-a-lógica-para-setar-os-números-no-display.md)** | Desenvolvedo a lógica para Setar os Números no Display |
24 | | **[Tutorial 12](agenda/12-desenvolvendo-o-botão-resultado.md)** | Desenvolvendo o Botão '=' (resultado) |
25 | | **[Tutorial 13](agenda/13-desenvolvendo-o-botão-dividir.md)** | Desenvolvendo o Botão '÷' (dividir) |
26 | | **[Tutorial 14](agenda/14-desenvolvendo-o-botão-multiplicar.md)** | Desenvolvendo o Botão 'x' (multiplicar) |
27 | | **[Tutorial 15](agenda/15-desenvolvendo-o-botão-diminuir.md)** | Desenvolvendo o Botão '-' (diminuir) |
28 | | **[Tutorial 16](agenda/16-desenvolvendo-o-botão-somar.md)** | Desenvolvendo o Botão '+' (somar) |
29 | | **[Tutorial 17](agenda/17-refatorando-o-projeto.md)** | Refatorando o projeto |
30 | | **[Tutorial 18](agenda/18-separando-os-arquivos-do-componente-calculadora-vue.md)** | Separando os arquivos do componente 'Calculadora.vue' |
31 | | **[Tutorial 19](agenda/19-realizando-a-separação-do-bloco-style.md)** | Realizando a separação do bloco style |
32 | | **[Tutorial 20](agenda/20-realizando-a-separação-do-bloco-script.md)** | Realizando a separação do bloco script |
33 | | **[Tutorial 21](agenda/21-finalização-do-desenvolvimento-do-arquivo-index-vue.md)** | Finalização do desenvolvimento do arquivo 'index.vue' |
34 | | **[Tutorial 22](agenda/22-o-que-é-azure-app-service.md)** | O que é Azure App Service? |
35 | | **[Tutorial 23](agenda/23-criando-uma-conta-no-azure.md)** | Criando uma conta no Azure |
36 | | **[Tutorial 24](agenda/24-hospedando-a-aplicação-no-azure-app-service.md)** | Hospedando a aplicação no Azure App Service |
37 |
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/workshop-2/agenda/1-criando-o-projeto-no-vue-cli.md:
--------------------------------------------------------------------------------
1 | ## Criando o projeto no Vue-Cli
2 |
3 | Antes de criarmos um projeto no Vue-CLI há necessidade de instalar o pacote globalmente, para isso digitem o comando abaixo no prompt de comando:
4 |
5 | ```
6 | > npm install --global vue-cli
7 | ```
8 |
9 | Depois de instalar todos os recursos acima e incluso o Vue-CLI, agora vamos criar o projeto do Todo-list. Digitem o comando abaixo:
10 |
11 | ```
12 | > vue init webpack todolist-app
13 | ```
14 |
15 | Após digitar o comando acima, aparecerá várias perguntas como você deseja configurar o seu projeto. Para isso, seguem conforme o gif abaixo:
16 |
17 | [](https://cdn-images-1.medium.com/max/1350/1*pVRvKav3CFRQSOBye5ixtQ.gif)
18 |
19 | Depois de fazer tudo isso, bastam seguir os comandos abaixo para executar a aplicação Vue.js:
20 |
21 | ```
22 | > cd todolist-app
23 | > npm run dev
24 | ```
25 |
26 | Vai pedir para abrir a página no **localhost:8080**. Se a imagem abaixo aparecer é porque você criou a aplicação com Vue-CLI com sucesso!
27 |
28 | 
29 |
30 | Agora vamos fazer pequenas alterações no projeto.
--------------------------------------------------------------------------------
/workshop-2/agenda/10-criando-propriedades-e-metodo-editar-ao-componente-todo-vue.md:
--------------------------------------------------------------------------------
1 | ## Criando Propriedade e Método 'Editar' ao Componente 'Todo.vue'
2 |
3 | Vamos agora criar uma propriedade que será responsável pela edição do nosso Todo-List!
4 |
5 | Para isso, retorne ao arquivo `Todo.vue` e vamos fazer algumas alterações no arquivo conforme o código abaixo dentro da tag ``:
6 |
7 | `arquivo: Todo.vue`
8 |
9 | ```javascript
10 |
11 |
12 |
13 |
14 |
15 | {{ todo.titulo }}
16 |
17 |
18 | {{ todo.projeto }}
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 | Concluído
46 |
47 |
48 | Pendente
49 |
50 |
51 |
52 | ```
53 | Notem que, dentro da tag `` criamos `divs` que serão responsáveis por mostrar a edição do nosso Todo-List. Outro ponto a ser observado é que, criamos dois métodos chamados: `abrirForm` e `fecharForm`. E ele não tá permitindo de executar corretamente a nossa aplicação.
54 |
55 | Vamos implementar esses métodos agora? Vamos implementar esses métodos na tag `
82 | ```
83 |
84 | Executem a aplicação e façam conforme o gif abaixo:
85 |
86 | [](https://gifyu.com/image/E83f)
87 |
88 | Notem que, no ato que você clica no botão do ícone 'editar' aparecerá um botão 'Fechar'.
89 |
90 | Lindo não é mesmo?!
91 |
92 | Vamos editar todos os itens do nosso Todo-List. Observem o gif abaixo:
93 |
94 | [](https://gifyu.com/image/E83o)
95 |
96 | Estamos quase lá! Vamos continuar!
--------------------------------------------------------------------------------
/workshop-2/agenda/11-desenvolvendo-o-botão-exclusão-ao-componente-todo.md:
--------------------------------------------------------------------------------
1 | ## Desenvolvendo o Botão Exclusão ao Componente 'Todo'
2 |
3 | Vamos agora criar o ícone do botão de exclusão do Todo-List. Para isso, abram o arquivo abaixo e façam a alteração no código:
4 |
5 | `arquivo: Todo.vue`
6 |
7 | ```javascript
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | ```
22 |
23 | Não coloquei todo o código da tag `` do arquivo `Todo.vue`. Bastam incluir o bloco do span e executar o código. Ao verificar a aplicação você já irá visualizar o ícone da lixeira, conforme a imagem abaixo:
24 |
25 | [](https://postimg.cc/67J1pFhm)
26 |
27 | Notem que, dentro da tag `span` temos a chamada de um método chamado `excluirTodo(todo)`. Vamos desenvolver agora a lógica da exclusão desse botão!
28 |
29 | Para isso, vamos até a tag `
62 | ```
63 |
64 | Observem que, desenvolvemos o método `excluirTodo(todo)` e a implementação chega a ser simples demais. Porém, notem que iremos dar um emit nesse evento, para que assim, possamos excluir o Todo-List. Esse `excluir-todo`, incluiremos no arquivo `TodoList.vue`. Vamos fazer isso agora!
65 |
66 | Para isso, abram o arquivo e inclua o código abaixo:
67 |
68 | `arquivo: TodoList.vue`
69 |
70 | ```javascript
71 |
90 | ```
91 |
92 | Ótimo! Fizemos um **[splice](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)**. Esse método no JavaScript, nos ajuda a alterar um determinado item de uma lista, onde podemos adicionar ou remover itens/elementos dessa lista!
93 |
94 | Agora, vamos implementar na `` esse evento!
95 |
96 | `arquivo: TodoList.vue`
97 |
98 | ```javascript
99 |
100 |
113 |
114 | ```
115 |
116 | Show! Agora executem a aplicação e vejam se está acontecendo a exclusão do TodoList, conforme o gif abaixo:
117 |
118 | [](https://gifyu.com/image/ERO7)
119 |
120 | Lindo, não é mesmo?! Agora vamos seguir com o nosso workshop e desenvolver o botão para adicionar um novo Todo-List!
--------------------------------------------------------------------------------
/workshop-2/agenda/12-desenvolvendo-o-botão-adição.md:
--------------------------------------------------------------------------------
1 | ## Desenvolvendo o Botão Adição ao Componente 'Todo'
2 |
3 | Bom, como todo bom Todo-List, sempre queremos incluir novas tarefas, não é mesmo?! Bom, nessa parte do workshop, vamos justamente desenvolver essa parte no projeto.
4 |
5 | Para deixar o nosso projeto mais organizado, vamos criar um novo Componente dentro `src -> components` chamado de `CreateTodo`.
6 |
7 | Depois que criarem esse novo componente, vamos implementar o código abaixo:
8 |
9 | `arquivo: CreateTodo.vue`
10 |
11 | ```javascript
12 |
13 |
14 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
75 |
76 | ```
77 |
78 | Bastante coisa não é mesmo? Mas, se vocês notarem, a lógica é muito parecida com o que já fizemos no componente `Todo.vue`. Bom, todas as vezes que criamos um novo componente, precisamos importar esse componente e para isso, vamos importar esse novo componente criado no arquivo `App.vue`
79 |
80 | `arquivo: App.vue`
81 |
82 | ```javascript
83 |
96 | ```
97 |
98 | E nesse mesmo arquivo, vamos criar um método para criar um novo Todo. Vamos implementar o código abaixo:
99 |
100 | `arquivo: App.vue (dentro da tag script)`
101 |
102 | ```javascript
103 | methods: {
104 | createTodo(novoTitulo) {
105 | this.todos.push({
106 | novoTitulo,
107 | concluido: false,
108 | });
109 | },
110 | },
111 | ```
112 |
113 | Agora, para que possamos de fato ver a funcionalidade na nossa aplicação, invocar esse metodo no arquivo `App.vue` dentro da tag: ``
114 |
115 | `arquivo: App.vue`
116 |
117 | ```javascript
118 |
119 |
120 |
121 |
122 |
123 |
124 | ```
125 |
126 | Executa agora a aplicação e veja se não vai aparecer um botão de + conforme o gif abaixo:
127 |
128 | [](https://postimg.cc/s1x4GScr)
129 |
130 | Falta agora só mais um método! Vamos nessa!
--------------------------------------------------------------------------------
/workshop-2/agenda/13-desenvolvendo-o-botão-pendente-concluído.md:
--------------------------------------------------------------------------------
1 | ## Desenvolvendo o Botão Pendente/Concluído
2 |
3 | Estamos quase chegando na reta final do desenvolvimento do nosso Todo-List. Só falta um pequeno detalhe... precisamos alterar uma determinada tarefa quando ela estiver concluída ou não. Vamos justamente desenvolver essa parte na aplicação.
4 |
5 | Para isso, abram o arquivo `Todo.vue` e vamos criar o método: `completeTodo`. Inclua o seguinte código:
6 |
7 | `arquivo: Todo.vue`
8 |
9 | ```javascript
10 |
69 | ```
70 |
71 | Agora, vamos invocar esse método na tag ``. Inclua o bloco abaixo:
72 |
73 | `arquivo: Todo.vue`
74 |
75 | ```javascript
76 |
77 |
78 |
79 |
80 |
{{ todo.titulo }}
81 |
{{ todo.textoProjeto }}
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
Concluído
115 |
Pendente
120 |
121 |
122 | ```
123 | Ao executar a aplicação veremos que status da tarefa alterará. Vejam abaixo:
124 |
125 | [](https://postimg.cc/N9Hj2Bdm)
126 |
127 | Agora fazer incluir alguns alertas a nossa aplicação!
--------------------------------------------------------------------------------
/workshop-2/agenda/14-inclusão-do-sweetalert-no-arquivo-app-vue.md:
--------------------------------------------------------------------------------
1 | ## Inclusão do SweetAlert no arquivo 'App.vue'
2 |
3 | Bom, nessa etapa do workshop eu chamo de realizar perfumaria na aplicação. Vamos incluir alguns eventos relacionados ao SweetAlert para deixar a nossa aplicação mais linda!
4 |
5 | Antes, vamos instalar o sweetAlert na nossa aplicação. Abram o prompt de comando e executem o seguinte comando:
6 |
7 | ```
8 | > npm i sweetalert
9 | ```
10 |
11 | Depois que instalar, notem que esse pacote aparecerá no arquivo `package.json`. Bom, agora abram o arquivo `App.vue` e inclua o seguinte bloco de código:
12 |
13 | `arquivo: App.vue`
14 |
15 | ```javascript
16 |
17 |
350 |
351 |
352 |
396 | ```
397 |
398 | E finalmente vamos alterar o arquivo `main.js`
399 |
400 | `arquivo: main.js`
401 |
402 | ```javascript
403 | // @ts-nocheck
404 | /**
405 | * Arquivo: main.js
406 | * Data: 15/07/2019
407 | * Descrição: arquivo responsável por lidar com toda a lógica de execução da app.
408 | * Author: Glaucia Lemos
409 | */
410 |
411 | import Vue from 'vue';
412 | import router from './middlewares/router';
413 | import App from './App';
414 |
415 | new Vue({
416 | router,
417 | el: '#app',
418 | components: { App },
419 | template: '',
420 | });
421 |
422 | ```
423 |
424 | Agora sim. Terminamos a nossa aplicação. Porém, queremos que ela esteja hospedada na nuvem! E é justamente sobre essa parte que trataremos na próxima parte!
--------------------------------------------------------------------------------
/workshop-2/agenda/17-o-que-é-azure-storage-account.md:
--------------------------------------------------------------------------------
1 | ## O que é Azure Storage Account?
2 |
3 | Diferente do workshop-1, dessa vez iremos hospedar a nossa aplicação no **[Azure Storage Account](https://docs.microsoft.com/pt-br/azure/storage/?WT.mc_id=vuejsworkshop-github-gllemos)**
4 |
5 | Mas, o que seria o Azure Storage Account?! É um serviço gerenciado pela Microsoft que fornece armazenamento na nuvem altamente disponível, seguro, durável, escalonável e redudante. Esse armazenamento inclui:
6 |
7 | * **Azure Blobs (objetos)**
8 | * **Azure Data Lake Storage Gen2**
9 | * **Azure Files**
10 | * **Azure Queues**
11 | * **Azure Tables**
12 |
13 | No nosso caso, como a nossa aplicação é uma aplicação estática, iremos hospedar num **[storage container](https://docs.microsoft.com/pt-br/azure/storage/blobs/storage-blob-static-website?WT.mc_id=vuejsworkshop-github-gllemos)**. Através dele, podemos fornecer o conteúdo estático: HTML, CSS e JavaScript - incluso arquivos de imagem.
14 |
15 | E para facilitar a hospedagem da nossa aplicação na nuvem, iremos usar:
16 |
17 | * **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=vuejsworkshop-github-gllemos)**
18 | * **[Extensão - Azure Storage](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestorage&WT.mc_id=vuejsworkshop-github-gllemos)**
19 | * **[Extensão - Azure Tools](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-node-azure-pack&WT.mc_id=vuejsworkshop-github-gllemos)**
20 |
21 | Essas duas extensões nos ajudarão a entrar no Portal Azure de uma maneira muito mais dinâmica e simples, sem precisar abrir o portal e fazer toda a hospedagem direto no Visual Studio Code!
22 |
23 | Vamos aprender agora?!
--------------------------------------------------------------------------------
/workshop-2/agenda/18-criando-uma-conta-no-azure.md:
--------------------------------------------------------------------------------
1 | ## Criando uma Conta no Azure
2 |
3 | Para realizar a implementação da nossa aplicação na nuvem, vamos precisar criar uma conta no Azure. Há dois tipos de contas:
4 |
5 | * **[Conta Azure](https://azure.microsoft.com/?WT.mc_id=vuejsworkshop-github-gllemos)**: que é a conta comum para quem não é estudante.
6 |
7 | * **[Azure for Students](https://azure.microsoft.com/free/students/?WT.mc_id=vuejsworkshop-github-gllemos)**: que é uma conta do Azure dedicada para Universitários e que permite usar o valor de USD 100,00 de maneira gratuita e sem necessidade em obter um cartão de crédito.
8 |
9 | Como o enfoque nessa parte do workshop é realizar a implementação da nossa aplicação na nuvem, há um curso inteiramente grátis que ensina como você pode criar uma conta no Azure de maneira simples e prático:
10 |
11 | * **[Criando uma conta do Azure](https://docs.microsoft.com/learn/modules/create-an-azure-account/?WT.mc_id=vuejsworkshop-github-gllemos)**
12 |
13 | Depois de realizar o curso, automaticamente você já criará uma conta no Azure. Ao terminar, podemos seguir com o nosso workshop!
--------------------------------------------------------------------------------
/workshop-2/agenda/19-criando-conta-do-azure-storage-no-vscode.md:
--------------------------------------------------------------------------------
1 | ## Hospedando a aplicação no Azure Storage Account no Visual Studio Code
2 |
3 | Agora que vocês já baixaram as extensões **Azure Tools** e **Azure Storage Account**, vamos hospedar a nossa aplicação na nuvem para que todas as pessoas possam visualizar o que desenvolvemos! Lembrando que você precisará de uma conta Azure para seguir nessa parte do workshop!
4 |
5 | 1. Abram o seu Visual Studio Code e abram o projeto. Faça o login na conta no Azure, assim como no gif abaixo:
6 |
7 | [](https://gifyu.com/image/E04p)
8 |
9 | 2. Abre o prompt de comando e execute o comando abaixo:
10 |
11 | ```bash
12 | > npm run build
13 | ```
14 |
15 | Depois de executar o comando acima, ele criará uma pasta `dist` no projeto. Ele será muito importante, pois justo os arquivos contidos nessa pasta é que enviaremos para o Azure Storage.
16 |
17 | 3. Agora vamos configurar uma conta no Azure Storage Accout e um Blob Contêiner. Para isso, clique na extensão do Azure Tools onde está o **Azure Storage** e depois clique com o botão direito na sua **subscription** e clique em **Create Storage Account**.
18 |
19 | [](https://gifyu.com/image/E04f)
20 |
21 | 4. Agora aparecerá uma caixa. Nessa caixa devemos criar um nome único para o nosso Storage Account. Depois pressionar o botão `Enter`.
22 |
23 | 5. Depois disso, devemos criar um novo `Resource Group`
24 |
25 | 6. E enfim, devemos escolher uma região onde ficará hospedado a nossa aplicação. O ideal é escolher uma região mais próxima no nosso país.
26 |
27 | Para entender melhor os passos 4-6, observem o gif abaixo:
28 |
29 | [](https://gifyu.com/image/E04e)
30 |
31 | 7. Ao realizar os passos acima, ele criará um Storage Account para nós. Agora, clique com o botão direito no Storage Account criado e depois clique em `Configure Static Website`.
32 |
33 | 8. Crie um documento: `index.html` e depois clique em `Enter`.
34 |
35 | 9. E novamente crie um documento chamado: `index.html` e depois clique em `Enter`.
36 |
37 | Vejam os passos: 7-9 no gif abaixo:
38 |
39 | [](https://gifyu.com/image/E06S)
40 |
41 | Ao finalizar os passos: 1 ao 9 estaremos pronto para enviar os arquivos da pasta `dist` e enfim colocar a nossa aplicação na nuvem! Vamos dar continuidade!
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/workshop-2/agenda/2-alterando-as-configurações-do-projeto.md:
--------------------------------------------------------------------------------
1 | ## Alterando as Configurações do Projeto
2 |
3 | Vou pedir para vocês abrirem o projeto no Visual Studio Code e logo em seguida abrir o arquivo **package.json**, pois precisaremos fazer uma pequena alteração nele (alterar a linha 8):
4 |
5 | ```json
6 | // package.json
7 |
8 | {
9 | "name": "todo-app-task",
10 | "version": "1.0.0",
11 | "description": "Todo-List em Vue.js",
12 | "author": "Glaucia Lemos",
13 | "private": true,
14 | "scripts": {
15 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --open --hot",
16 | "start": "npm run dev",
17 | "lint": "eslint --ext .js,.vue src",
18 | "build": "node build/build.js"
19 | },
20 | (...)
21 |
22 | ```
23 |
24 | Essa alteração na linha 8 nos permitirá quando formos executar o comando: **npm run dev**, de abrir o browser automaticamente! O que nos auxiliará bastante na hora de desenvolver.
25 |
26 | Vamos seguir adiante pois precisaremos alterar os componentes criados no Vue-CLI.
--------------------------------------------------------------------------------
/workshop-2/agenda/20-realizando-deploy-da-aplicação-no-azure-storage-account-no-vscode.md:
--------------------------------------------------------------------------------
1 | ## Realizando Deploy da aplicação no Azure Storage Account no Visual Studio Code
2 |
3 | Agora que já criamos um conta no Azure Storage usando o Visual Studio Code, o que nos falta agora é justamente realizar o deploy da nossa aplicação para o Azure Storage para que enfim a nossa aplicação fique disponível na nuvem. Vamos seguir com os passos abaixo:
4 |
5 | 1. Abre a aplicação no Visual Studio Code e clique com o botão direito na pasta `dist` e escolha a opção: `Deploy to Static Website`
6 |
7 | 2. Depois, escolha a `Subscription` e o `Azure Storage Account`, criando na agenda 19. Feito isso, podemos clicar na url e vai aparecer a nossa aplicação disponível na nuvem! Vejam os passos no gif abaixo:
8 |
9 | [](https://gifyu.com/image/E063)
10 |
11 | E vòilá! E está disponível a nossa aplicação na nuvem! Querem ver como está?! Bastam acessar o link ao lado: **[Link Aplicação Todo-List](https://glauciatodolist.z19.web.core.windows.net/)**
12 |
13 | Se você chegou até aqui, parabéns! Agora você está preparado para seguir em frente em começar o **workshop-3**
14 |
15 |
--------------------------------------------------------------------------------
/workshop-2/agenda/3-incluindo-semantic-ui-na-aplicação-vuejs.md:
--------------------------------------------------------------------------------
1 | ## Incluindo Semantic UI e SweetAlert na aplicação Vue.js
2 |
3 | Durante o desenvolvimento da nossa aplicação, estaremos usando 2 bibliotecas de interface para deixar a nossa aplicação mais linda e com um visual de um HTML mais amigável e dinâmica. São elas:
4 |
5 | * **[Semantic UI](https://semantic-ui.com/)**
6 | * **[SweetAlert](https://sweetalert.js.org/)**
7 |
8 | Para incluir ambas as bibliotecas no projeto bastam abrir no projeto o arquivo: `index.html` e incluam o seguinte bloco de código:
9 |
10 | ```html
11 |
12 |
13 |
14 |
15 |
16 | Todo List App Vue 2 - Glaucia Lemos
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 | ```
--------------------------------------------------------------------------------
/workshop-2/agenda/4-alterando-o-componente-no-projeto.md:
--------------------------------------------------------------------------------
1 | ## Alterando o componente no Projeto
2 |
3 | Agora vamos alterar a estrutura dos Componentes da aplicação. Para isso, vão até o projeto em: `src -> components`
4 |
5 | Chegando até ali, você encontrará o arquivo `HelloWorld.vue`. Altere o nome desse arquivo para: `TodoList.vue`.
6 |
7 | Ao realizar a alteração, já aparecerá uma erro e aplicação apresentará erro. Vamos acertar, no próximo passo!
--------------------------------------------------------------------------------
/workshop-2/agenda/5-alterando-as-configurações-no-arquivo-App-vue.md:
--------------------------------------------------------------------------------
1 | ## Alterando as configurações no arquivo 'App.vue'
2 |
3 | Vamos acertar o erro do passo anterior. Para isso, abram o arquivo `App.vue` e alteram para o seguinte código
4 |
5 | ```javascript
6 |
7 |
8 |
9 |
10 |
11 |
12 |
22 |
23 |
33 |
34 | ```
35 | Ao executar novamente a aplicação notará que ela estará executando sem nenhum erro.
36 |
37 | Show! Vamos agora começar a desenvolver o nosso primeiro componente!
--------------------------------------------------------------------------------
/workshop-2/agenda/6-desenvolvendo-o-nosso-primeiro-componente-todo-list-vue.md:
--------------------------------------------------------------------------------
1 | ## Desenvolvendo o nosso primeiro Componente 'TodoList.vue'
2 |
3 | Abram novamente o arquivo `TodoList.vue` e vamos começar a fazer algumas alterações significativas nele!
4 |
5 | Para isso, inclua o seguinte bloco de código abaixo:
6 |
7 | `arquivo: TodoList.vue`
8 |
9 | ```javascript
10 |
11 |
12 |
13 |
Todo List A
14 |
Todo List B
15 |
Todo List C
16 |
17 |
18 |
19 |
20 |
26 |
27 | ```
28 |
29 | Notem que, o Vue.js é formado por 3 estruturas:
30 |
31 | * **template:** onde se concentra toda a parte de HTML. É aqui que também incluiremos algumas diretivas do Vue.js.
32 |
33 | * **script:** onde está toda a lógica da nossa aplicação e onde desenvolveremos a parte do JavaScript.
34 |
35 | * **script:** onde está toda a parte do .css!
36 |
37 | Simples não é mesmo?! É por conta dessa estrutura simples que o Vue.js tem ganhado muitos adeptos ao framework/biblioteca!
38 |
39 | Vamos continuar com o desenvolvimento da nossa aplicação!
40 |
41 | Para visualizar a lista que criamos acima, bastam retornar ao arquivo `App.vue` e alterar alterar o código como abaixo:
42 |
43 | `arquivo: App.vue`
44 |
45 | ```javascript
46 |
47 |
48 |
49 |
50 |
51 |
52 |
62 |
63 | ```
64 |
65 | Ao incluirmos a tag: `` ajudará a renderizar o nosso componente: `TodoList`. Agora, ao executar a aplicação deverá aparecer a lista criada.
66 |
67 | [](https://postimg.cc/QHc511pv)
68 |
69 | Se estiver como a imagem acima, você está indo super bem. E assim, poderemos dar continuidade ao desenvolvimento da nossa aplicação.
70 |
71 | Vamos nessa!
--------------------------------------------------------------------------------
/workshop-2/agenda/7-criando-dados-para-o-componente-todo-list.md:
--------------------------------------------------------------------------------
1 | ## Criando Dados para o Componente: 'Todo-List'
2 |
3 | Agora, peço que vocês abram o arquivo `App.vue`. Pois ali, vamos precisar criar 3 dados ou propriedades para o nosso componente principal.
4 |
5 | Para isso, inclua o seguinte código abaixo, na tag `
48 | ```
49 |
50 | Observam que nós criamos 3 propriedades (datas):
51 |
52 | * **textoTitulo**: informação do título do nosso Todo-List.
53 | * **textoProjeto**: informação relacinada ao projeto do Todo-List
54 | * **foiCriado**: informação para identificar se aquela tarefa foi concluída ou não.
55 |
56 | Através desses 3 dados, nós iremos usar na tag `template`,a diretiva do Vue.js: `v-bind`.
57 |
58 | O `v-bind` nos ajudará a substituir os dados digitados pelo usuário em tempo real para a nossa tela. Pensando em realizar um `v-bind` futuro, vamos fazer uma alteração no arquivo: `TodoList.vue`
59 |
60 | `arquivo: TodoList.vue`
61 |
62 | ```javascript
63 |
64 |
65 |
66 |
Todo List A
67 |
Todo List B
68 |
Todo List C
69 |
70 |
71 |
72 |
73 |
81 |
82 | ```
83 |
84 | Ao executar o projeto, por enquanto não veremos nenhuma alteração. Pois ainda não atribuímos o `v-bind` em nosso Componente. Vamos fazer isso no próximo passo!
85 |
--------------------------------------------------------------------------------
/workshop-2/agenda/8-renderizando-os-dados-do-componente.md:
--------------------------------------------------------------------------------
1 | ## Renderizando os dados do Componente
2 |
3 | Agora que já realizamos algumas alterações nos arquivos: `App.vue` e `TodoList.vue` visando usar o `v-bind` para renderizar os nossos dados no Componente, vamos agora fazer algumas alterações significativas no arquivo `TodoList` dentro da tag: ``.
4 |
5 | Inclua o bloco de código, na tag `` conforme abaixo:
6 |
7 | `arquivo: TodoList.vue`
8 |
9 | ```javascript
10 |
11 |
40 |
41 |
42 |
50 |
51 | ```
52 |
53 | Ao executar o projeto vocês verão que a nossa aplicação está ganhando corpo. Se o seu projeto está como a imagem abaixo é porque você está indo bem! Lembrando que, caso tenha algum problema e não esteja conseguindo executar corretamente o seu projeto, não esqueça de abrir um **[ISSUE AQUI](https://github.com/glaucia86/vuejs-workshop/issues)** para que possamos te ajudar o quanto antes.
54 |
55 | [](https://postimg.cc/p55bWrfV)
56 |
57 | Beleza! Vamos dar continuidade!
--------------------------------------------------------------------------------
/workshop-2/agenda/9-criando-e-editando-o-componente-todo.md:
--------------------------------------------------------------------------------
1 | ## Criando e Editando o Componente 'Todo'
2 |
3 | Agora que temos a parte visual quase pronta, vamos organizar um pouco mais o nosso código. Para isso, vamos criar um novo componente dentro da pasta: `src -> components` o arquivo: `Todo.vue`.
4 |
5 | Nele iremos extrair um pouco do que temos já pronto no arquivo `TodoList.vue` e colocar nesse novo arquivo. Vamos fazer isso agora!
6 |
7 | `arquivo: Todo.vue`
8 |
9 | ```javascript
10 |
11 |
12 |
13 |
14 | {{ todo.titulo }}
15 |
16 |
17 | {{ todo.projeto }}
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | Concluído
27 |
28 |
29 | Pendente
30 |
31 |
32 |
33 |
34 |
42 | ```
43 |
44 | Bom, nesse momento se executar a aplicação, notará que aparecerá inúmeros erros, pois precisamos colocar o biding dos datos do nosso Componente lá no arquivo `TodoList.vue`.
45 |
46 | Vamos retornar ao arquivo `TodoList.vue`, para realizar algumas alterações significativas!
47 |
48 | `arquivo: TodoList.vue`
49 |
50 | ```javascript
51 |
52 |