├── 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 | [![Tutorial-Todo-List-com-Vuejs-1.png](https://i.postimg.cc/Mp1srBWL/Tutorial-Todo-List-com-Vuejs-1.png)](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 | [![vue.gif](https://cdn-images-1.medium.com/max/1350/1*pVRvKav3CFRQSOBye5ixtQ.gif)](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 | ![Image-1](https://cdn-images-1.medium.com/max/1575/1*e8jDWFMAozMjm5XAB6ga3g.png) 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 | 12 | ``` 13 | 14 | ```vue 15 | 22 | ``` 23 | 24 | Executem a aplicação, clique no botão 'ponto' e vejam o resultado: 25 | 26 | [![Screen-Shot-06-19-19-at-02-54-PM.png](https://i.postimg.cc/SRJrVW23/Screen-Shot-06-19-19-at-02-54-PM.png)](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 | 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 | 11 | ``` 12 | 13 | ```vue 14 | 20 | ``` 21 | 22 | Vejam o resultado no gif abaixo: 23 | 24 | [![vuejs-2.gif](https://s3.gifyu.com/images/vuejs-2.gif)](https://gifyu.com/image/ExVB) -------------------------------------------------------------------------------- /workshop-1/agenda/14-desenvolvendo-o-botão-multiplicar.md: -------------------------------------------------------------------------------- 1 | ## Desenvolvendo o Botão 'x' (multiplicar) 2 | 3 | Inclua os seguintes códigos abaixo: 4 | 5 | ```vue 6 | 11 | ``` 12 | 13 | ```vue 14 | 20 | ``` 21 | 22 | Resultado... 23 | 24 | [![vuejs-3.gif](https://s3.gifyu.com/images/vuejs-3.gif)](https://gifyu.com/image/ExVX) -------------------------------------------------------------------------------- /workshop-1/agenda/15-desenvolvendo-o-botão-diminuir.md: -------------------------------------------------------------------------------- 1 | ## Desenvolvendo o Botão '-' (diminuir) 2 | 3 | Inclua os códigos abaixo: 4 | 5 | ```vue 6 | 11 | ``` 12 | 13 | ```vue 14 | 20 | ``` 21 | 22 | Vamos testar... 23 | 24 | [![vuejs-4.gif](https://s3.gifyu.com/images/vuejs-4.gif)](https://gifyu.com/image/ExZz) 25 | 26 | E estamos quase terminando...Vamos agora desenvolver o nosso último botão da Calculadora! 27 | -------------------------------------------------------------------------------- /workshop-1/agenda/16-desenvolvendo-o-botão-somar.md: -------------------------------------------------------------------------------- 1 | ## Desenvolvendo o Botão '+' (somar) 2 | 3 | Inclua os códigos abaixo: 4 | 5 | ```vue 6 | 11 | ``` 12 | 13 | ```vue 14 | 20 | ``` 21 | E agora, vamos testar todos os botões da nossa Calculadora! 22 | 23 | [![devto-gif-7.gif](https://s3.gifyu.com/images/devto-gif-7.gif)](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 | [![Screen-Shot-06-20-19-at-07-24-PM.png](https://i.postimg.cc/hPfSF4Nn/Screen-Shot-06-20-19-at-07-24-PM.png)](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 | 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 | 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 | [![vue-js](https://thepracticaldev.s3.amazonaws.com/i/pgr4e0iy8wsmrw070uho.PNG)](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 | 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 | ![Image-3](https://cdn-images-1.medium.com/max/2025/1*Wp6TCcBUuMNs-Ejr0CXKIQ.png) 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 | 97 | 98 | 102 | 103 | 104 | 116 | ``` 117 | 118 | E vejam o resultado abaixo: 119 | 120 | ![Image-4](https://cdn-images-1.medium.com/max/2025/1*o1vwCreiJyFdOHoo7PovGg.png) 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 | ![Image-5](https://cdn-images-1.medium.com/max/2025/1*vHX9uCECHnfYda-88J_0wA.png) 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 | 161 | 162 | 166 | 167 | 168 | 184 | ``` 185 | 186 | E olhem o resultado: 187 | 188 | ![Image-5](https://cdn-images-1.medium.com/max/2025/1*Z742qyGcOzTZmXCGZHsCcw.png) 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 | 217 | 218 | 222 | 223 | 224 | 244 | ``` 245 | 246 | E o resultado: 247 | 248 | ![Image-6](https://cdn-images-1.medium.com/max/2025/1*9laMqGm-9TkAetNwPVs4OQ.png) 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 | 277 | 278 | 282 | 283 | 284 | 310 | ``` 311 | 312 | E vejam o resultado final da nossa Calculadora! 313 | 314 | ![Image-8](https://cdn-images-1.medium.com/max/2025/1*cAWgoPhl_LVJpIPbwcp32Q.png) 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 | 54 | ``` 55 | Após isso, execute a aplicação e deverá aparecer da seguinte forma como a imagem abaixo: 56 | 57 | [![Screen-Shot-06-19-19-at-02-27-PM.png](https://i.postimg.cc/W4r9r6L4/Screen-Shot-06-19-19-at-02-27-PM.png)](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 | 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 | 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 | 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 | [![Screen-Shot-06-19-19-at-03-06-PM.png](https://i.postimg.cc/tJQwQ200/Screen-Shot-06-19-19-at-03-06-PM.png)](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 | 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 | 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 | [![bit-azure.png](https://i.postimg.cc/ZKwS8SHj/bit-azure.png)](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 | 4 | 5 | 6 | projeto-1 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /workshop-1/projeto-1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "projeto-1", 3 | "version": "1.0.0", 4 | "description": "Desenvolvimento de uma Calculadora simples visando ensinar os conceitos básicos de Vue.js", 5 | "author": "Glaucia Lemos", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --open --hot", 9 | "start": "npm run dev", 10 | "lint": "eslint --ext .js,.vue src", 11 | "build": "node build/build.js" 12 | }, 13 | "dependencies": { 14 | "vue": "^2.5.2" 15 | }, 16 | "devDependencies": { 17 | "autoprefixer": "^7.1.2", 18 | "babel-core": "^6.22.1", 19 | "babel-eslint": "^8.2.1", 20 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 21 | "babel-loader": "^7.1.1", 22 | "babel-plugin-syntax-jsx": "^6.18.0", 23 | "babel-plugin-transform-runtime": "^6.22.0", 24 | "babel-plugin-transform-vue-jsx": "^3.5.0", 25 | "babel-preset-env": "^1.3.2", 26 | "babel-preset-stage-2": "^6.22.0", 27 | "chalk": "^2.0.1", 28 | "copy-webpack-plugin": "^5.1.1", 29 | "css-loader": "^3.0.0", 30 | "eslint": "^4.15.0", 31 | "eslint-config-airbnb-base": "^11.3.0", 32 | "eslint-friendly-formatter": "^3.0.0", 33 | "eslint-import-resolver-webpack": "^0.8.3", 34 | "eslint-loader": "^1.7.1", 35 | "eslint-plugin-import": "^2.7.0", 36 | "eslint-plugin-vue": "^4.0.0", 37 | "extract-text-webpack-plugin": "^3.0.0", 38 | "file-loader": "^1.1.4", 39 | "friendly-errors-webpack-plugin": "^1.6.1", 40 | "html-webpack-plugin": "^5.5.0", 41 | "node-notifier": "^8.0.1", 42 | "optimize-css-assets-webpack-plugin": "^5.0.3", 43 | "ora": "^1.2.0", 44 | "portfinder": "^1.0.13", 45 | "postcss-import": "^11.0.0", 46 | "postcss-loader": "^2.0.8", 47 | "postcss-url": "^7.2.1", 48 | "rimraf": "^2.6.0", 49 | "semver": "^5.3.0", 50 | "shelljs": "^0.8.5", 51 | "uglifyjs-webpack-plugin": "^1.1.1", 52 | "url-loader": "^2.0.0", 53 | "vue-loader": "^13.3.0", 54 | "vue-style-loader": "^3.0.1", 55 | "vue-template-compiler": "^2.5.2", 56 | "webpack": "^4.41.5", 57 | "webpack-bundle-analyzer": "^3.3.2", 58 | "webpack-dev-server": "^2.9.1", 59 | "webpack-merge": "^4.1.0" 60 | }, 61 | "engines": { 62 | "node": ">= 6.0.0", 63 | "npm": ">= 3.0.0" 64 | }, 65 | "browserslist": [ 66 | "> 1%", 67 | "last 2 versions", 68 | "not ie <= 8" 69 | ] 70 | } 71 | -------------------------------------------------------------------------------- /workshop-1/projeto-1/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /workshop-1/projeto-1/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glaucia86/vuejs-workshop/d5137629d31c9b1501edba305a82122c1a7cda4b/workshop-1/projeto-1/src/assets/logo.png -------------------------------------------------------------------------------- /workshop-1/projeto-1/src/components/Calculadora/calculadora.css: -------------------------------------------------------------------------------- 1 | .calculadora { 2 | margin: 0 auto; 3 | width: 350px; 4 | font-size: 40px; 5 | display: grid; 6 | grid-template-columns: repeat(4, 1fr); 7 | grid-auto-rows: minmax(50px, auto); 8 | } 9 | 10 | .display { 11 | grid-column: 1 / 5; 12 | background-color: #333; 13 | color: white; 14 | } 15 | 16 | .zero { 17 | grid-column: 1 / 3; 18 | } 19 | 20 | .botao { 21 | background-color: #f2f2f2; 22 | border: 1px solid #999; 23 | } 24 | 25 | .operadores { 26 | background-color: orange; 27 | color: white; 28 | } 29 | -------------------------------------------------------------------------------- /workshop-1/projeto-1/src/components/Calculadora/calculadora.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Arquivo: src/components/Calculadura.js 3 | * Data: 19/06/2019 4 | * Author: Glaucia Lemos 5 | * Descrição: arquivo responsável por tratar toda a lógica da Calculadora. 6 | */ 7 | 8 | export default { 9 | name: 'Calculadora', 10 | data() { 11 | return { 12 | numeroAnterior: null, 13 | valorCorrente: '', 14 | operador: null, 15 | operadorClicado: false, 16 | }; 17 | }, 18 | 19 | methods: { 20 | // Método responsável por limpar o display da 'Calculadora' 21 | limpar() { 22 | this.valorCorrente = ''; 23 | }, 24 | 25 | /* 26 | * Método responsável por colocar o sinal '-' ou '+' para realização de operações 27 | * matemáticas especiais. 28 | */ 29 | sinal() { 30 | this.valorCorrente = this.valorCorrente.charAt(0) === '-' 31 | ? this.valorCorrente.slice(1) 32 | : `-${this.valorCorrente}`; 33 | }, 34 | 35 | // Método responsável por realizar operações com 'porcentagem': 36 | porcentagem() { 37 | this.valorCorrente = `${parseFloat(this.valorCorrente) / 100}`; 38 | }, 39 | 40 | // Método responsável por juntar os números no display da Calculadora: 41 | juntarNumeros(numero) { 42 | if (this.operadorClicado) { 43 | this.valorCorrente = ''; 44 | this.operadorClicado = false; 45 | } 46 | this.valorCorrente = `${this.valorCorrente}${numero}`; 47 | }, 48 | 49 | // Método responsável por adicionar 'ponto' no display da Calculadora: 50 | ponto() { 51 | if (this.valorCorrente.indexOf('.') === -1) { 52 | this.juntarNumeros('.'); 53 | } 54 | }, 55 | 56 | // Método responsável por 'resetar' o valor na Calculadora: 57 | setarValor() { 58 | this.numeroAnterior = this.valorCorrente; 59 | this.operadorClicado = true; 60 | }, 61 | 62 | // Método responsável por realizar a operação da 'divisão' da Calculadora 63 | dividir() { 64 | this.operador = (a, b) => a / b; 65 | this.setarValor(); 66 | }, 67 | 68 | // Método responsável por realizar a operação da 'multiplicação' da Calculadora 69 | multiplicar() { 70 | this.operador = (a, b) => a * b; 71 | this.setarValor(); 72 | }, 73 | 74 | // Método responsável por realizar a operação da 'diminuir' da Calculadora 75 | diminuir() { 76 | this.operador = (a, b) => a - b; 77 | this.setarValor(); 78 | }, 79 | 80 | // Método responsável por realizar a operação da 'adição' da Calculadora 81 | somar() { 82 | this.operador = (a, b) => a + b; 83 | this.setarValor(); 84 | }, 85 | 86 | // Método responsável por apresentar o resultado das operações na Calculadora 87 | resultado() { 88 | this.valorCorrente = `${this.operador( 89 | parseFloat(this.numeroAnterior), 90 | parseFloat(this.valorCorrente), 91 | )}`; 92 | this.numeroAnterior = null; 93 | }, 94 | }, 95 | }; 96 | -------------------------------------------------------------------------------- /workshop-1/projeto-1/src/components/Calculadora/index.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 27 | 28 | 71 | 72 | ``` 73 | 74 | Muitas alterações não é mesmo?! Mas, necessárias para deixar o UI da nossa aplicação mais linda! Vejam agora como está! 75 | 76 | [![gif-12.gif](https://s3.gifyu.com/images/gif-12.gif)](https://gifyu.com/image/ERPY) 77 | 78 | Agora que toda a nossa aplicação está funcionando e está completa, vamos alterar a estrutura do projeto. -------------------------------------------------------------------------------- /workshop-2/agenda/16-alterando-a-estrutura-do-projeto-e-router.md: -------------------------------------------------------------------------------- 1 | ## Alterando a estrutura do projeto & router 2 | 3 | Notem que, para realizar a manuntenção do projeto está muito complexo e com muitas linhas de código. Para isso, vamos alterar a estrutura do projeto. Para isso, façam o seguinte: 4 | 5 | 1 - Criam uma pasta chamada: `components -> pages -> CreateTodo` e dentro dessa pasta crie os arquivos: `index.vue` e `CreateTodo.js`. 6 | 7 | 2 - Criam uma pasta chamada: `components -> pages -> Todo` e dentro dessa pasta crie os arquivos: `index.vue` e `Todo.js`. 8 | 9 | 3 - Criam uma pasta chamada: `components -> pages -> TodoList` e dentro dessa pasta crie os arquivos: `index.vue` e `TodoList.js`. 10 | 11 | 4 - Criam uma pasta chamada: `src -> middlewares` e dentro dessa pasta crie o arquivo: `router.js`. 12 | 13 | 5 - Vamos baixar o pacote: `vue-router`. Para isso, executem o seguinte comando abaixo: 14 | 15 | ``` 16 | > npm i vue-router 17 | ``` 18 | 19 | Ótimo! Agora vamos desenvolver o arquivo `router.js`. Inclua o seguinte bloco de código abaixo: 20 | 21 | `arquivo: router.js` 22 | 23 | ```javascript 24 | 25 | /** 26 | * 27 | * Arquivo: src/middlewares/router.js 28 | * Data: 15/07/2019 29 | * Descrição: arquivo responsável por lidar com todas as rotas da aplicação. 30 | * Autora: Glaucia Lemos 31 | * 32 | */ 33 | 34 | import Vue from 'vue'; 35 | import Router from 'vue-router'; 36 | import TodoList from '../components/pages/TodoList/TodoList'; 37 | 38 | Vue.use(Router); 39 | 40 | const router = new Router({ 41 | mode: 'history', 42 | routes: [ 43 | { path: '/todo-list', name: 'todo-list', component: TodoList }, 44 | ], 45 | }); 46 | 47 | export default router; 48 | 49 | ``` 50 | 51 | Vamos agora extrair os arquivos, assim como no workshop-1. Vamos começar pelo arquivo: `TodoList.vue` 52 | 53 | `arquivo: TodoList.js` 54 | 55 | ```javascript 56 | // @ts-nocheck 57 | 58 | /** 59 | * Arquivo: src/components/pages/TodoList/TodoList.js 60 | * Data: 15/07/2019 61 | * Descrição: arquivo responsável por lidar com a lógica inerente ao componente 'TodoList' 62 | * Autora: Glaucia Lemos 63 | */ 64 | 65 | import sweetAlert from 'sweetalert'; 66 | import Todo from '../Todo/index'; 67 | 68 | export default { 69 | name: 'TodoList', 70 | props: ['todos'], 71 | components: { 72 | Todo, 73 | }, 74 | methods: { 75 | excluirTodo(todo) { 76 | sweetAlert({ 77 | title: 'Você tem certeza que deseja excluir a Tarefa?', 78 | text: 'Atenção! Esta Tarefa será Excluída!', 79 | icon: 'warning', 80 | buttons: true, 81 | dangerMode: true, 82 | }).then((removerTodo) => { 83 | if (removerTodo) { 84 | const todoIndex = this.todos.indexOf(todo); 85 | this.todos.splice(todoIndex, 1); 86 | sweetAlert('Excluído!', 'Sua Tarefa foi Excluída com Sucesso!', { 87 | icon: 'success', 88 | }); 89 | } else { 90 | sweetAlert('Cancelado', 'Retornar para a Lista de Tarefas', 'error'); 91 | } 92 | return false; 93 | }); 94 | }, 95 | completeTodo(todo) { 96 | const todoIndex = this.todos.indexOf(todo); 97 | this.todos[todoIndex].concluido = true; 98 | sweetAlert('Sucesso!', 'Parabéns! A sua Tarefa está Completa!', 'success'); 99 | }, 100 | }, 101 | }; 102 | 103 | ``` 104 | 105 | Agora alterem o arquivo `index.vue` do componente: `TodoList` 106 | 107 | `arquivo: TodoList -> index.vue` 108 | 109 | ```javascript 110 | 125 | 126 | 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 | [![gif-13d30f8caed4232383.gif](https://s3.gifyu.com/images/gif-13d30f8caed4232383.gif)](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 | [![gif-14.gif](https://s3.gifyu.com/images/gif-14.gif)](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 | [![gif-15.gif](https://s3.gifyu.com/images/gif-15.gif)](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 | [![gif-16.gif](https://s3.gifyu.com/images/gif-16.gif)](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 | [![gif-17.gif](https://s3.gifyu.com/images/gif-17.gif)](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 | 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 | 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 | 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 | [![Screen-Shot-07-11-19-at-08-50-PM.png](https://i.postimg.cc/KvHNX54c/Screen-Shot-07-11-19-at-08-50-PM.png)](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 | 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: `