├── project-2 ├── weather-app-angular │ ├── src │ │ ├── assets │ │ │ ├── .gitkeep │ │ │ ├── 01d@2x.png │ │ │ ├── 01n@2x.png │ │ │ ├── 02d@2x.png │ │ │ ├── 02n@2x.png │ │ │ ├── 03d@2x.png │ │ │ ├── 03n@2x.png │ │ │ ├── 04d@2x.png │ │ │ ├── 04n@2x.png │ │ │ ├── 09d@2x.png │ │ │ ├── 09n@2x.png │ │ │ ├── 10d@2x.png │ │ │ ├── 10n@2x.png │ │ │ ├── 11d@2x.png │ │ │ ├── 11n@2x.png │ │ │ ├── 13d@2x.png │ │ │ ├── 13n@2x.png │ │ │ ├── 50d@2x.png │ │ │ └── 50n@2x.png │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── today │ │ │ │ ├── today.component.css │ │ │ │ ├── today.component.ts │ │ │ │ └── today.component.html │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── weather.service.ts │ │ │ └── app.component.spec.ts │ │ ├── styles.css │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ ├── test.ts │ │ └── polyfills.ts │ ├── e2e │ │ ├── tsconfig.json │ │ ├── src │ │ │ ├── app.po.ts │ │ │ └── app.e2e-spec.ts │ │ └── protractor.conf.js │ ├── tsconfig.app.json │ ├── .editorconfig │ ├── tsconfig.spec.json │ ├── browserslist │ ├── tsconfig.json │ ├── .gitignore │ ├── README.md │ ├── karma.conf.js │ ├── package.json │ ├── tslint.json │ └── angular.json └── README.md ├── project-1 ├── chat-app-vue │ ├── src │ │ ├── components │ │ │ ├── LoginForm │ │ │ │ ├── loginform.css │ │ │ │ ├── loginForm.js │ │ │ │ └── index.vue │ │ │ ├── RoomList │ │ │ │ ├── roomlist.css │ │ │ │ ├── index.vue │ │ │ │ └── roomList.js │ │ │ ├── UserList │ │ │ │ ├── userlist.css │ │ │ │ ├── index.vue │ │ │ │ └── userList.js │ │ │ ├── MessageForm │ │ │ │ ├── messageform.css │ │ │ │ ├── index.vue │ │ │ │ └── messageForm.js │ │ │ ├── ChatNavBar │ │ │ │ ├── chatnavbar.css │ │ │ │ ├── index.vue │ │ │ │ └── chatNavBar.js │ │ │ └── MessageList │ │ │ │ ├── messageList.js │ │ │ │ ├── messagelist.css │ │ │ │ └── index.vue │ │ ├── App.vue │ │ ├── router │ │ │ └── index.js │ │ ├── main.js │ │ ├── store │ │ │ ├── index.js │ │ │ ├── mutations.js │ │ │ └── actions.js │ │ ├── views │ │ │ ├── Login.vue │ │ │ └── ChatDashboard.vue │ │ ├── chatkit.js │ │ └── assets │ │ │ └── css │ │ │ └── loading-btn.css │ ├── .browserslistrc │ ├── babel.config.js │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── .editorconfig │ ├── .gitignore │ ├── README.md │ ├── .eslintrc.js │ └── package.json └── README.md └── README.md /project-2/weather-app-angular/src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/src/components/LoginForm/loginform.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/src/components/RoomList/roomlist.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/src/components/UserList/userlist.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/app/today/today.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/src/components/MessageForm/messageform.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/src/components/ChatNavBar/chatnavbar.css: -------------------------------------------------------------------------------- 1 | #chat-navbar { 2 | margin-bottom: 15px; 3 | } -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset', 4 | ], 5 | }; 6 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glaucia86/livecoding-frontend-projects/HEAD/project-1/chat-app-vue/public/favicon.ico -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glaucia86/livecoding-frontend-projects/HEAD/project-2/weather-app-angular/src/favicon.ico -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/assets/01d@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glaucia86/livecoding-frontend-projects/HEAD/project-2/weather-app-angular/src/assets/01d@2x.png -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/assets/01n@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glaucia86/livecoding-frontend-projects/HEAD/project-2/weather-app-angular/src/assets/01n@2x.png -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/assets/02d@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glaucia86/livecoding-frontend-projects/HEAD/project-2/weather-app-angular/src/assets/02d@2x.png -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/assets/02n@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glaucia86/livecoding-frontend-projects/HEAD/project-2/weather-app-angular/src/assets/02n@2x.png -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/assets/03d@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glaucia86/livecoding-frontend-projects/HEAD/project-2/weather-app-angular/src/assets/03d@2x.png -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/assets/03n@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glaucia86/livecoding-frontend-projects/HEAD/project-2/weather-app-angular/src/assets/03n@2x.png -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/assets/04d@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glaucia86/livecoding-frontend-projects/HEAD/project-2/weather-app-angular/src/assets/04d@2x.png -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/assets/04n@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glaucia86/livecoding-frontend-projects/HEAD/project-2/weather-app-angular/src/assets/04n@2x.png -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/assets/09d@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glaucia86/livecoding-frontend-projects/HEAD/project-2/weather-app-angular/src/assets/09d@2x.png -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/assets/09n@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glaucia86/livecoding-frontend-projects/HEAD/project-2/weather-app-angular/src/assets/09n@2x.png -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/assets/10d@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glaucia86/livecoding-frontend-projects/HEAD/project-2/weather-app-angular/src/assets/10d@2x.png -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/assets/10n@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glaucia86/livecoding-frontend-projects/HEAD/project-2/weather-app-angular/src/assets/10n@2x.png -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/assets/11d@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glaucia86/livecoding-frontend-projects/HEAD/project-2/weather-app-angular/src/assets/11d@2x.png -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/assets/11n@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glaucia86/livecoding-frontend-projects/HEAD/project-2/weather-app-angular/src/assets/11n@2x.png -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/assets/13d@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glaucia86/livecoding-frontend-projects/HEAD/project-2/weather-app-angular/src/assets/13d@2x.png -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/assets/13n@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glaucia86/livecoding-frontend-projects/HEAD/project-2/weather-app-angular/src/assets/13n@2x.png -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/assets/50d@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glaucia86/livecoding-frontend-projects/HEAD/project-2/weather-app-angular/src/assets/50d@2x.png -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/assets/50n@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glaucia86/livecoding-frontend-projects/HEAD/project-2/weather-app-angular/src/assets/50n@2x.png -------------------------------------------------------------------------------- /project-1/chat-app-vue/.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | end_of_line = lf 5 | trim_trailing_whitespace = true 6 | insert_final_newline = true 7 | max_line_length = 100 8 | -------------------------------------------------------------------------------- /project-2/weather-app-angular/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'weather-app-angular'; 10 | } 11 | -------------------------------------------------------------------------------- /project-2/weather-app-angular/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "include": [ 8 | "src/**/*.ts" 9 | ], 10 | "exclude": [ 11 | "src/test.ts", 12 | "src/**/*.spec.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /project-2/weather-app-angular/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /project-2/weather-app-angular/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText() { 9 | return element(by.css('app-root h1')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /project-2/weather-app-angular/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WeatherAppAngular 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/README.md: -------------------------------------------------------------------------------- 1 | # chat-app-vue 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | npm run lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/src/components/MessageList/messageList.js: -------------------------------------------------------------------------------- 1 | /** 2 | * File: src/components/MessageList/messageList.js 3 | * Date: 29/01/2020 4 | * Description: componente responsável pela lista de mensagens do Chat 5 | * Author: Glaucia Lemos 6 | */ 7 | 8 | import { mapState } from 'vuex'; 9 | 10 | export default { 11 | name: 'message-list', 12 | 13 | computed: { 14 | ...mapState([ 15 | 'messages', 16 | 'userTyping', 17 | ]), 18 | }, 19 | }; 20 | -------------------------------------------------------------------------------- /project-2/weather-app-angular/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /project-1/chat-app-vue/src/components/UserList/index.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 29 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/src/components/ChatNavBar/index.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/src/components/RoomList/index.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/src/components/UserList/userList.js: -------------------------------------------------------------------------------- 1 | /** 2 | * File: src/components/UserList/userList.js 3 | * Date: 29/01/2020 4 | * Description: componente responsável por listar os usuários ativos no Chat 5 | * Author: Glaucia Lemos 6 | */ 7 | 8 | import { mapState } from 'vuex'; 9 | 10 | export default { 11 | name: 'UserList', 12 | computed: { 13 | ...mapState([ 14 | 'users', 15 | 'loading', 16 | ]), 17 | }, 18 | 19 | methods: { 20 | statusColor(status) { 21 | return status === 'online' ? 'success' : 'warning'; 22 | }, 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { HttpClientModule } from '@angular/common/http'; 5 | import { AppComponent } from './app.component'; 6 | import { TodayComponent } from './today/today.component'; 7 | 8 | @NgModule({ 9 | declarations: [ 10 | AppComponent, 11 | TodayComponent 12 | ], 13 | imports: [ 14 | BrowserModule, 15 | HttpClientModule 16 | ], 17 | providers: [], 18 | bootstrap: [AppComponent] 19 | }) 20 | export class AppModule { } 21 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/src/components/MessageList/messagelist.css: -------------------------------------------------------------------------------- 1 | .message-list { 2 | margin-bottom: 15px; 3 | padding-right: 15px; 4 | } 5 | 6 | .message-group { 7 | height: 65vh !important; 8 | overflow-y: scroll; 9 | } 10 | 11 | .message { 12 | border: 1px solid lightblue; 13 | border-radius: 4px; 14 | padding: 10px; 15 | margin-bottom: 15px; 16 | } 17 | 18 | .message-title { 19 | font-size: 1rem; 20 | display: inline; 21 | } 22 | 23 | .message-text { 24 | color: gray; 25 | margin-bottom: 0; 26 | } 27 | 28 | .user-typing { 29 | height: 1rem; 30 | } 31 | -------------------------------------------------------------------------------- /project-2/weather-app-angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "emitDecoratorMetadata": true, 10 | "experimentalDecorators": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "importHelpers": true, 14 | "target": "es2015", 15 | "typeRoots": [ 16 | "node_modules/@types" 17 | ], 18 | "lib": [ 19 | "es2018", 20 | "dom" 21 | ] 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | extends: [ 7 | 'plugin:vue/essential', 8 | '@vue/airbnb', 9 | ], 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 13 | 'no-extraneous-dependencies': 'off', 14 | 'import/no-unresolved': 'off', 15 | 'no-unneeded-ternary': 'off', 16 | 'import/no-cycle': 'off', 17 | 'consistent-return': 'off' 18 | }, 19 | parserOptions: { 20 | parser: 'babel-eslint', 21 | }, 22 | }; 23 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/src/components/RoomList/roomList.js: -------------------------------------------------------------------------------- 1 | /** 2 | * File: src/components/RoomList/roomList.js 3 | * Date: 29/01/2020 4 | * Description: componente responsável por listar as salas/canais do Chat 5 | * Author: Glaucia Lemos 6 | */ 7 | 8 | import { mapState, mapActions } from 'vuex'; 9 | 10 | export default { 11 | name: 'RoomList', 12 | 13 | computed: { 14 | ...mapState([ 15 | 'activeRoom', 16 | 'rooms', 17 | ]), 18 | }, 19 | 20 | methods: { 21 | ...mapActions([ 22 | 'changeRoom', 23 | ]), 24 | onChange(room) { 25 | this.changeRoom(room.id); 26 | }, 27 | }, 28 | }; 29 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | chat-app-vue 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/src/router/index.js: -------------------------------------------------------------------------------- 1 | // @ts-nocheck 2 | /** 3 | * arquivo: src/router/index.js 4 | * Data: 02/01/2020 5 | * Descrição: 6 | * Author: Glaucia Lemos 7 | */ 8 | 9 | import Vue from 'vue'; 10 | import Router from 'vue-router'; 11 | import Login from '@/views/Login.vue'; 12 | import ChatDashboard from '@/views/ChatDashboard.vue'; 13 | 14 | Vue.use(Router); 15 | 16 | export default new Router({ 17 | mode: 'history', 18 | base: process.env.BASE_URL, 19 | routes: [ 20 | { 21 | path: '/', 22 | name: 'login', 23 | component: Login, 24 | }, 25 | { 26 | path: '/chat', 27 | name: 'chat', 28 | component: ChatDashboard, 29 | }, 30 | ], 31 | }); 32 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/src/main.js: -------------------------------------------------------------------------------- 1 | // @ts-nocheck 2 | import Vue from 'vue'; 3 | import BootstrapVue from 'bootstrap-vue'; 4 | import VueChatScroll from 'vue-chat-scroll'; 5 | import 'bootstrap'; 6 | 7 | import App from './App.vue'; 8 | import router from './router/index'; 9 | import store from './store/index'; 10 | 11 | import 'bootstrap/dist/css/bootstrap.css'; 12 | import 'bootstrap/dist/css/bootstrap.min.css'; 13 | import 'bootstrap-vue/dist/bootstrap-vue.css'; 14 | import './assets/css/loading.css'; 15 | import './assets/css/loading-btn.css'; 16 | 17 | Vue.config.productionTip = false; 18 | Vue.use(BootstrapVue); 19 | Vue.use(VueChatScroll); 20 | 21 | new Vue({ 22 | router, 23 | store, 24 | render: h => h(App), 25 | }).$mount('#app'); 26 | -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /project-2/weather-app-angular/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('Welcome to weather-app-angular!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /project-2/weather-app-angular/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events.json 15 | speed-measure-plugin.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.sass-cache 36 | /connect.lock 37 | /coverage 38 | /libpeerconnection.log 39 | npm-debug.log 40 | yarn-error.log 41 | testem.log 42 | /typings 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuex from 'vuex'; 3 | import VuexPersistence from 'vuex-persist'; 4 | 5 | import mutations from './mutations'; 6 | import actions from './actions'; 7 | 8 | Vue.use(Vuex); 9 | 10 | const debug = process.env.NODE_ENV !== 'production'; 11 | 12 | const vuexLocal = new VuexPersistence({ 13 | storage: window.localStorage, 14 | }); 15 | 16 | export default new Vuex.Store({ 17 | state: { 18 | loading: false, 19 | sending: false, 20 | error: null, 21 | user: [], 22 | reconnect: false, 23 | activeRoom: null, 24 | rooms: [], 25 | users: [], 26 | messages: [], 27 | userTyping: null, 28 | }, 29 | mutations, 30 | actions, 31 | getters: { 32 | // se 'state.error for null == false, se não retorna true' 33 | hasError: state => !!state.error, 34 | }, 35 | plugins: [vuexLocal.plugin], 36 | strict: debug, 37 | }); 38 | -------------------------------------------------------------------------------- /project-2/weather-app-angular/e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Protractor configuration file, see link for more information 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts 4 | 5 | const { SpecReporter } = require('jasmine-spec-reporter'); 6 | 7 | /** 8 | * @type { import("protractor").Config } 9 | */ 10 | exports.config = { 11 | allScriptsTimeout: 11000, 12 | specs: [ 13 | './src/**/*.e2e-spec.ts' 14 | ], 15 | capabilities: { 16 | 'browserName': 'chrome' 17 | }, 18 | directConnect: true, 19 | baseUrl: 'http://localhost:4200/', 20 | framework: 'jasmine', 21 | jasmineNodeOpts: { 22 | showColors: true, 23 | defaultTimeoutInterval: 30000, 24 | print: function() {} 25 | }, 26 | onPrepare() { 27 | require('ts-node').register({ 28 | project: require('path').join(__dirname, './tsconfig.json') 29 | }); 30 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 31 | } 32 | }; -------------------------------------------------------------------------------- /project-1/chat-app-vue/src/views/Login.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/src/components/MessageForm/index.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/src/components/MessageList/index.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/src/components/ChatNavBar/chatNavBar.js: -------------------------------------------------------------------------------- 1 | // @ts-nocheck 2 | /** 3 | * File: src/components/ChatNavBar/chatNavbar.js 4 | * Date: 29/01/2020 5 | * Description: componente responsável pela NavBar do Chat 6 | * Author: Glaucia Lemos 7 | */ 8 | 9 | import { mapState, mapActions, mapMutations } from 'vuex'; 10 | 11 | export default { 12 | name: 'ChatNavBar', 13 | 14 | computed: { 15 | ...mapState([ 16 | 'user', 17 | 'reconnect', 18 | ]), 19 | }, 20 | 21 | methods: { 22 | ...mapActions([ 23 | 'logout', 24 | 'login', 25 | ]), 26 | ...mapMutations([ 27 | 'setReconnect', 28 | ]), 29 | onLogout() { 30 | this.$router.push({ path: '/' }); 31 | this.logout(); 32 | }, 33 | unload() { 34 | if (this.user.username) { 35 | this.setReconnect(true); 36 | } 37 | }, 38 | }, 39 | 40 | mounted() { 41 | window.addEventListener('beforeunload', this.unload); 42 | if (this.reconnect) { 43 | this.login(this.user.username); 44 | } 45 | }, 46 | }; 47 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/src/components/MessageForm/messageForm.js: -------------------------------------------------------------------------------- 1 | // @ts-nocheck 2 | /** 3 | * File: src/components/MessageForm/messageForm.js 4 | * Date: 29/01/2020 5 | * Description: componente responsável pelo formulário de mensagens do Chat 6 | * Author: Glaucia Lemos 7 | */ 8 | 9 | import { mapActions, mapState, mapGetters } from 'vuex'; 10 | import { isTyping } from '../../chatkit'; 11 | 12 | export default { 13 | name: 'message-form', 14 | data() { 15 | return { 16 | message: '', 17 | }; 18 | }, 19 | 20 | computed: { 21 | ...mapState([ 22 | 'sending', 23 | 'error', 24 | 'user', 25 | 'activeRoom', 26 | ]), 27 | ...mapGetters([ 28 | 'hasError', 29 | ]), 30 | }, 31 | methods: { 32 | ...mapActions([ 33 | 'sendMessage', 34 | ]), 35 | async onSubmit() { 36 | const result = await this.sendMessage(this.message); 37 | if (result) { 38 | this.message = ''; 39 | } 40 | }, 41 | async isTyping() { 42 | await isTyping(this.activeRoom.id); 43 | }, 44 | }, 45 | }; 46 | -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/app/weather.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { HttpClient, HttpParams } from '@angular/common/http'; 3 | 4 | @Injectable({ 5 | providedIn: 'root' 6 | }) 7 | export class WeatherService { 8 | 9 | url = 'https://api.openweathermap.org/data/2.5/weather'; 10 | apiKey = '57e0b31962ae34800b8c4142095d57fa'; 11 | 12 | constructor(private http: HttpClient) { } 13 | 14 | // ==> Método para retornar os params de 'latitude' e 'longitude' da api: 15 | getWeatherDataByCoords(lat, lon) { 16 | const params = new HttpParams() 17 | 18 | .set('lat', lat) 19 | .set('lon', lon) 20 | .set('units', 'metric') 21 | .set('appid', this.apiKey); 22 | 23 | return this.http.get(this.url, { params }); 24 | } 25 | 26 | // ==> Método para retornar o nome da Cidade: 27 | getWeatherDataByCityName(city: string) { 28 | const params = new HttpParams() 29 | 30 | .set('q', city) 31 | .set('units', 'metrics') 32 | .set('appid', this.apiKey); 33 | 34 | return this.http.get(this.url, { params }); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/src/components/LoginForm/loginForm.js: -------------------------------------------------------------------------------- 1 | // @ts-nocheck 2 | /** 3 | * File: src/components/LoginForm/loginForm.js 4 | * Date: 29/01/2020 5 | * Description: componente responsável pelo Login do Chat 6 | * Author: Glaucia Lemos 7 | */ 8 | 9 | import { mapState, mapGetters, mapActions } from 'vuex'; 10 | 11 | export default { 12 | name: 'login-form', 13 | data() { 14 | return { 15 | userId: '', 16 | }; 17 | }, 18 | computed: { 19 | // Método responsável por validar o nome de usuário. 20 | isValid() { 21 | // Ex.: user: glaucia_lemos86 (userId => resultado) 22 | const resultado = this.userId.length < 3; 23 | return resultado ? resultado : this.loading; 24 | }, 25 | ...mapState([ 26 | 'loading', 27 | 'error', 28 | ]), 29 | ...mapGetters([ 30 | 'hasError', 31 | ]), 32 | }, 33 | 34 | methods: { 35 | ...mapActions([ 36 | 'login', 37 | ]), 38 | async onSubmit() { 39 | const result = await this.login(this.userId); 40 | if (result) { 41 | this.$router.push('chat'); 42 | } 43 | }, 44 | }, 45 | }; 46 | -------------------------------------------------------------------------------- /project-2/weather-app-angular/README.md: -------------------------------------------------------------------------------- 1 | # WeatherAppAngular 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.0.3. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). 28 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "chat-app-vue", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "@loadingio/loading.css": "^2.0.0", 12 | "@pusher/chatkit-client": "^1.13.3", 13 | "bootstrap": "^4.4.1", 14 | "bootstrap-vue": "^2.1.0", 15 | "core-js": "^3.4.4", 16 | "jquery": "^3.5.0", 17 | "moment": "^2.24.0", 18 | "popper.js": "^1.16.0", 19 | "vue": "^2.6.10", 20 | "vue-chat-scroll": "^1.3.6", 21 | "vue-router": "^3.1.3", 22 | "vuex": "^3.1.2", 23 | "vuex-persist": "^2.2.0" 24 | }, 25 | "devDependencies": { 26 | "@vue/cli-plugin-babel": "^4.1.0", 27 | "@vue/cli-plugin-eslint": "^4.1.0", 28 | "@vue/cli-plugin-router": "^4.1.0", 29 | "@vue/cli-plugin-vuex": "^4.1.0", 30 | "@vue/cli-service": "^4.1.0", 31 | "@vue/eslint-config-airbnb": "^4.0.0", 32 | "babel-eslint": "^10.0.3", 33 | "eslint": "^5.16.0", 34 | "eslint-plugin-vue": "^5.0.0", 35 | "vue-template-compiler": "^2.6.10" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | 4 | describe('AppComponent', () => { 5 | beforeEach(async(() => { 6 | TestBed.configureTestingModule({ 7 | declarations: [ 8 | AppComponent 9 | ], 10 | }).compileComponents(); 11 | })); 12 | 13 | it('should create the app', () => { 14 | const fixture = TestBed.createComponent(AppComponent); 15 | const app = fixture.debugElement.componentInstance; 16 | expect(app).toBeTruthy(); 17 | }); 18 | 19 | it(`should have as title 'weather-app-angular'`, () => { 20 | const fixture = TestBed.createComponent(AppComponent); 21 | const app = fixture.debugElement.componentInstance; 22 | expect(app.title).toEqual('weather-app-angular'); 23 | }); 24 | 25 | it('should render title in a h1 tag', () => { 26 | const fixture = TestBed.createComponent(AppComponent); 27 | fixture.detectChanges(); 28 | const compiled = fixture.debugElement.nativeElement; 29 | expect(compiled.querySelector('h1').textContent).toContain('Welcome to weather-app-angular!'); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/src/components/LoginForm/index.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /project-2/weather-app-angular/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, './coverage/weather-app-angular'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/app/today/today.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { WeatherService } from '../weather.service'; 3 | 4 | @Component({ 5 | selector: 'app-today', 6 | templateUrl: './today.component.html', 7 | styleUrls: ['./today.component.css'] 8 | }) 9 | export class TodayComponent implements OnInit { 10 | 11 | lat; 12 | lon; 13 | weather; 14 | 15 | constructor(private weatherService: WeatherService) { } 16 | 17 | ngOnInit() { 18 | this.getLocation(); 19 | } 20 | 21 | // ==> Método responsável por indicar a geolocalização pelo browser: 22 | getLocation() { 23 | if ('geolocation' in navigator) { 24 | navigator.geolocation.watchPosition((success) => { 25 | this.lat = success.coords.latitude; 26 | this.lon = success.coords.longitude; 27 | 28 | this.weatherService.getWeatherDataByCoords(this.lat, this.lon).subscribe(data => { 29 | this.weather = data; 30 | }); 31 | }); 32 | } 33 | } 34 | 35 | // ==> Método responsável por buscar Cidade pela api: 36 | getCity(city) { 37 | this.weatherService.getWeatherDataByCityName(city).subscribe((data) => { 38 | this.weather = data; 39 | }); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/src/store/mutations.js: -------------------------------------------------------------------------------- 1 | /** 2 | * arquivo: src/store/mutations.js 3 | * Data: 14/01/2020 4 | * Descrição 5 | * Author: Glaucia Lemos 6 | */ 7 | 8 | export default { 9 | setError(state, error) { 10 | state.error = error; 11 | }, 12 | 13 | setLoading(state, loading) { 14 | state.loading = loading; 15 | }, 16 | 17 | setUser(state, user) { 18 | state.user = user; 19 | }, 20 | 21 | setReconnect(state, reconnect) { 22 | state.reconnect = reconnect; 23 | }, 24 | 25 | setActiveRoom(state, roomId) { 26 | state.activeRoom = roomId; 27 | }, 28 | 29 | setRooms(state, rooms) { 30 | state.rooms = rooms; 31 | }, 32 | 33 | setUsers(state, users) { 34 | state.users = users; 35 | }, 36 | 37 | clearChatRoom(state) { 38 | state.users = []; 39 | state.messages = []; 40 | }, 41 | 42 | setMessages(state, messages) { 43 | state.messages = messages; 44 | }, 45 | 46 | addMessage(state, message) { 47 | state.messages.push(message); 48 | }, 49 | 50 | setSending(state, status) { 51 | state.sending = status; 52 | }, 53 | 54 | setUserTyping(state, userId) { 55 | state.userTyping = userId; 56 | }, 57 | 58 | reset(state) { 59 | state.error = null; 60 | state.users = []; 61 | state.messages = []; 62 | state.rooms = []; 63 | state.user = null; 64 | }, 65 | }; 66 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/src/views/ChatDashboard.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/app/today/today.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | 6 |
7 | 8 |
9 |
10 |
Previsão do tempo atualizado da sua Cidade...
11 |

Tempo em: {{ weather.name }} - {{ weather.sys.country }}

12 |
13 |
14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 |
Umidade{{ weather.main.humidity }}%
Pressão Atmosférica{{ weather.main.pressure }}hpa
Nascer do Sol{{ weather.sys.sunrise * 1000 | date: 'H:mm' }}
Pôr do Sol{{ weather.sys.sunset * 1000 | date: 'H:mm' }}
Coordenadas Geográficas{{ weather.coord.lat }}, {{ weather.coord.lon }}
40 |
41 |
42 | -------------------------------------------------------------------------------- /project-2/weather-app-angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "weather-app-angular", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "test": "ng test", 9 | "lint": "ng lint", 10 | "e2e": "ng e2e" 11 | }, 12 | "private": true, 13 | "dependencies": { 14 | "@angular/animations": "~8.0.1", 15 | "@angular/common": "~8.0.1", 16 | "@angular/compiler": "~8.0.1", 17 | "@angular/core": "~8.0.1", 18 | "@angular/forms": "~8.0.1", 19 | "@angular/platform-browser": "~8.0.1", 20 | "@angular/platform-browser-dynamic": "~8.0.1", 21 | "@angular/router": "~8.0.1", 22 | "bootstrap": "^4.4.1", 23 | "jquery": "^3.5.0", 24 | "popper.js": "^1.16.1", 25 | "rxjs": "~6.4.0", 26 | "tslib": "^1.9.0", 27 | "zone.js": "~0.9.1" 28 | }, 29 | "devDependencies": { 30 | "@angular-devkit/build-angular": "~0.800.0", 31 | "@angular/cli": "~8.0.3", 32 | "@angular/compiler-cli": "~8.0.1", 33 | "@angular/language-service": "~8.0.1", 34 | "@types/node": "~8.9.4", 35 | "@types/jasmine": "~3.3.8", 36 | "@types/jasminewd2": "~2.0.3", 37 | "codelyzer": "^5.0.0", 38 | "jasmine-core": "~3.4.0", 39 | "jasmine-spec-reporter": "~4.2.1", 40 | "karma": "~4.1.0", 41 | "karma-chrome-launcher": "~2.2.0", 42 | "karma-coverage-istanbul-reporter": "~2.0.1", 43 | "karma-jasmine": "~2.0.1", 44 | "karma-jasmine-html-reporter": "^1.4.0", 45 | "protractor": "~5.4.0", 46 | "ts-node": "~7.0.0", 47 | "tslint": "~5.15.0", 48 | "typescript": "~3.4.3" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /project-2/weather-app-angular/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tslint:recommended", 3 | "rules": { 4 | "array-type": false, 5 | "arrow-parens": false, 6 | "deprecation": { 7 | "severity": "warn" 8 | }, 9 | "component-class-suffix": true, 10 | "contextual-lifecycle": true, 11 | "directive-class-suffix": true, 12 | "directive-selector": [ 13 | true, 14 | "attribute", 15 | "app", 16 | "camelCase" 17 | ], 18 | "component-selector": [ 19 | true, 20 | "element", 21 | "app", 22 | "kebab-case" 23 | ], 24 | "import-blacklist": [ 25 | true, 26 | "rxjs/Rx" 27 | ], 28 | "interface-name": false, 29 | "max-classes-per-file": false, 30 | "max-line-length": [ 31 | true, 32 | 140 33 | ], 34 | "member-access": false, 35 | "member-ordering": [ 36 | true, 37 | { 38 | "order": [ 39 | "static-field", 40 | "instance-field", 41 | "static-method", 42 | "instance-method" 43 | ] 44 | } 45 | ], 46 | "no-consecutive-blank-lines": false, 47 | "no-console": [ 48 | true, 49 | "debug", 50 | "info", 51 | "time", 52 | "timeEnd", 53 | "trace" 54 | ], 55 | "no-empty": false, 56 | "no-inferrable-types": [ 57 | true, 58 | "ignore-params" 59 | ], 60 | "no-non-null-assertion": true, 61 | "no-redundant-jsdoc": true, 62 | "no-switch-case-fall-through": true, 63 | "no-use-before-declare": true, 64 | "no-var-requires": false, 65 | "object-literal-key-quotes": [ 66 | true, 67 | "as-needed" 68 | ], 69 | "object-literal-sort-keys": false, 70 | "ordered-imports": false, 71 | "quotemark": [ 72 | true, 73 | "single" 74 | ], 75 | "trailing-comma": false, 76 | "no-conflicting-lifecycle": true, 77 | "no-host-metadata-property": true, 78 | "no-input-rename": true, 79 | "no-inputs-metadata-property": true, 80 | "no-output-native": true, 81 | "no-output-on-prefix": true, 82 | "no-output-rename": true, 83 | "no-outputs-metadata-property": true, 84 | "template-banana-in-box": true, 85 | "template-no-negated-async": true, 86 | "use-lifecycle-interface": true, 87 | "use-pipe-transform-interface": true 88 | }, 89 | "rulesDirectory": [ 90 | "codelyzer" 91 | ] 92 | } -------------------------------------------------------------------------------- /project-1/chat-app-vue/src/store/actions.js: -------------------------------------------------------------------------------- 1 | // @ts-nocheck 2 | /** 3 | * arquivo: src/store/actions.js 4 | * Data: 14/01/2020 5 | * Descrição: s 6 | * Author: Glaucia Lemos 7 | */ 8 | 9 | import chatkit from '../chatkit'; 10 | 11 | // Função responsável por disparar mensagens de erro na aplicação: 12 | function handleError(commit, error) { 13 | const message = error.message || error.info.error_description; 14 | commit('setError', message); 15 | } 16 | 17 | export default { 18 | // Função responsável por efetuar o login no chat 19 | async login({ commit, state }, userId) { 20 | try { 21 | commit('setError', ''); 22 | commit('setLoading', true); 23 | 24 | // Conexão do usário ao serviço do chatKit 25 | const currentUser = await chatkit.connectUser(userId); 26 | 27 | commit('setUser', { 28 | username: currentUser.id, 29 | name: currentUser.name, 30 | }); 31 | commit('setReconnect', false); 32 | 33 | const rooms = currentUser.rooms.map(room => ({ 34 | id: room.id, 35 | name: room.name, 36 | })); 37 | commit('setRooms', rooms); 38 | 39 | const activeRoom = state.activeRoom || rooms[0]; 40 | commit('setActiveRoom', { 41 | id: activeRoom.id, 42 | name: activeRoom.name, 43 | }); 44 | 45 | await chatkit.subscribeToRoom(activeRoom.id); 46 | 47 | return true; 48 | } catch (error) { 49 | handleError(commit, error); 50 | } finally { 51 | commit('setLoading', false); 52 | } 53 | }, 54 | 55 | // Função responsável por lidar com a ação da alteração de salas no chat 56 | async changeRoom({ commit }, roomId) { 57 | try { 58 | const { id, name } = await chatkit.subscribeToRoom(roomId); 59 | commit('setActiveRoom', { id, name }); 60 | } catch (error) { 61 | handleError(commit, error); 62 | } 63 | }, 64 | 65 | // 66 | async sendMessage({ commit }, message) { 67 | try { 68 | commit('setError', ''); 69 | commit('setSending', true); 70 | const messageId = await chatkit.sendMessage(message); 71 | return messageId; 72 | } catch (error) { 73 | handleError(commit, error); 74 | } finally { 75 | commit('setSending', false); 76 | } 77 | }, 78 | 79 | async logout({ commit }) { 80 | commit('reset'); 81 | chatkit.disconnectUser(); 82 | window.localStorage.clear(); 83 | }, 84 | }; 85 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/src/chatkit.js: -------------------------------------------------------------------------------- 1 | /** 2 | * arquivo: chatkit.js 3 | * Data: 14/01/2020 4 | * Descrição: arquivo responsável por tratar a lógica da autenticação entre a aplicação e o ChatKit 5 | * Author: Glaucia Lemos 6 | */ 7 | 8 | import { ChatManager, TokenProvider } from '@pusher/chatkit-client'; 9 | 10 | import moment from 'moment'; 11 | import store from './store/index'; 12 | 13 | const INSTANCE_LOCATOR = process.env.VUE_APP_INSTANCE_LOCATOR; 14 | const TOKEN_URL = process.env.VUE_APP_TOKEN_URL; 15 | const MESSAGE_LIMIT = Number(process.env.VUE_APP_MESSAGE_LIMIT) || 10; 16 | 17 | let currentUser = null; 18 | let activeRoom = null; 19 | 20 | function setMembers() { 21 | const members = activeRoom.users.map(user => ({ 22 | username: user.id, 23 | name: user.name, 24 | presence: user.presence.state, 25 | })); 26 | store.commit('setUsers', members); 27 | } 28 | 29 | async function subscribeToRoom(roomId) { 30 | store.commit('clearChatRoom'); 31 | activeRoom = await currentUser.subscribeToRoom({ 32 | roomId, 33 | messageList: MESSAGE_LIMIT, 34 | hooks: { 35 | onMessage: (message) => { 36 | store.commit('addMessage', { 37 | name: message.sender.name, 38 | username: message.senderId, 39 | text: message.text, 40 | date: moment(message.createAt).format('h:mm:ss a D-MM-YYYY'), 41 | }); 42 | }, 43 | 44 | onPresenceChanged: () => { 45 | setMembers(); 46 | }, 47 | 48 | onUserStartedTyping: (user) => { 49 | store.commit('setUserTyping', user.id); 50 | }, 51 | 52 | onUserStoppedTyping: () => { 53 | store.commit('setUserTyping', null); 54 | }, 55 | }, 56 | }); 57 | 58 | setMembers(); 59 | 60 | return activeRoom; 61 | } 62 | 63 | async function connectUser(userId) { 64 | const chatManager = new ChatManager({ 65 | instanceLocator: INSTANCE_LOCATOR, 66 | tokenProvider: new TokenProvider({ url: TOKEN_URL }), 67 | userId, 68 | }); 69 | 70 | currentUser = await chatManager.connect(); 71 | return currentUser; 72 | } 73 | 74 | async function sendMessage(text) { 75 | const messageId = await currentUser.sendMessage({ 76 | text, 77 | roomId: activeRoom.id, 78 | }); 79 | 80 | return messageId; 81 | } 82 | 83 | export function isTyping(roomId) { 84 | currentUser.isTypingIn({ roomId }); 85 | } 86 | 87 | function disconnectUser() { 88 | currentUser.disconnect(); 89 | } 90 | 91 | export default { 92 | connectUser, 93 | subscribeToRoom, 94 | sendMessage, 95 | disconnectUser, 96 | }; 97 | -------------------------------------------------------------------------------- /project-2/weather-app-angular/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 22 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 23 | 24 | /** 25 | * Web Animations `@angular/platform-browser/animations` 26 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 27 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 28 | */ 29 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 30 | 31 | /** 32 | * By default, zone.js will patch all possible macroTask and DomEvents 33 | * user can disable parts of macroTask/DomEvents patch by setting following flags 34 | * because those flags need to be set before `zone.js` being loaded, and webpack 35 | * will put import in the top of bundle, so user need to create a separate file 36 | * in this directory (for example: zone-flags.ts), and put the following flags 37 | * into that file, and then add the following code before importing zone.js. 38 | * import './zone-flags.ts'; 39 | * 40 | * The flags allowed in zone-flags.ts are listed here. 41 | * 42 | * The following flags will work for all browsers. 43 | * 44 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 45 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 46 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 47 | * 48 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 49 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 50 | * 51 | * (window as any).__Zone_enable_cross_context_check = true; 52 | * 53 | */ 54 | 55 | /*************************************************************************************************** 56 | * Zone JS is required by default for Angular itself. 57 | */ 58 | import 'zone.js/dist/zone'; // Included with Angular CLI. 59 | 60 | 61 | /*************************************************************************************************** 62 | * APPLICATION IMPORTS 63 | */ 64 | -------------------------------------------------------------------------------- /project-2/README.md: -------------------------------------------------------------------------------- 1 | # Projeto 2 - Weather App com Angular 2 | 3 | Projeto baseado no artigo **[AQUI](https://www.digitalocean.com/community/tutorials/how-to-build-a-weather-app-with-angular-bootstrap-and-the-apixu-api)** 4 | 5 | ## Recursos Utilizados 6 | 7 | * **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=aprendendofrontend-github-gllemos)** 8 | * **[Node.Js](https://nodejs.org/en/)** 9 | * **[Angular CLI](https://cli.angular.io/)** 10 | * **[Azure Storage Account](https://docs.microsoft.com/pt-br/azure/storage/common/storage-account-overview?WT.mc_id=aprendendofrontend-github-gllemos)** 11 | 12 | ## Executar Localmente o Projeto 🔥 13 | 14 | Caso você deseja executar o projeto na sua máquina local, basta seguir os passos abaixo: 15 | 16 | ## Começando... 🌀 17 | 18 | Para começar, você deve simplesmente clonar o repositório do projeto na sua máquina e instalar as dependências. 19 | 20 | ## Instalando as Dependências (via Windows): ❗️ 21 | 22 | Abre o cmd (caso esteja utilizando o Windows) e digite a path do seu projeto 23 | 24 | ``` 25 | cd "C:\Users\NomeDoComputador\Documents\..." 26 | ``` 27 | 28 | Depois, quando estiver na pasta do projeto, basta digitar no cmd a seguinte instrução: **(dentro do calculadora-app)** 29 | 30 | ``` 31 | npm install 32 | ``` 33 | 34 | Ao digitar a instrução acima, automaticamente ele irá baixar todas as dependências listadas e definidas no arquivo package.json: 35 | 36 | * `node_modules` - que contêm os packages do npm que precisará para o projeto. 37 | 38 | ## Executando a Aplicação Localmente 💨 39 | 40 | Bom, agora na mesma tela do cmd, basta iniciar o server para o projeto ser executado localmente. 41 | 42 | ``` 43 | > ng serve --o 44 | ``` 45 | 46 | ## Vídeos da Série 📺 47 | 48 | Caso desejam acompanhar o desenvolvimento desse projeto, segue abaixo a lista de vídeos já disponíveis: 49 | 50 | - **[Projeto 2: Weather App - Parte 1](https://youtu.be/dVidU2JUwfI)** 51 | - **[Projeto 2: Weather App - Parte 2](https://youtu.be/9sWKK5M877w)** 52 | - **[Projeto 2: Weather App - Parte 3]()** 53 | 54 | ## Links & Recursos Importantes 55 | 56 | Durante a live menciono recursos e links de estudos para adquirir mais conhecimento em determinado assunto. Com isso, estou listando abaixo, todos os links mencionados 57 | 58 | - ✅ **[Crie sua primeira aplicação Angular no Visual Studio](https://code.visualstudio.com/docs/nodejs/angular-tutorial?WT.mc_id=aprendendofrontend-github-gllemos)** 59 | - ✅ **[Angular no Visual Studio Code](https://code.visualstudio.com/docs/nodejs/angular-tutorial?WT.mc_id=aprendendofrontend-github-gllemos)** 60 | - ✅ **[Azure para desenvolvedores de JavaScript e Node.js](https://docs.microsoft.com/javascript/azure/?view=azure-node-latest&WT.mc_id=aprendendofrontend-github-gllemos)** 61 | - ✅ **[Criando um aplicativo Angular com a API do Azure Cosmos DB para MongoDB](https://docs.microsoft.com/azure/cosmos-db/tutorial-develop-mongodb-nodejs?WT.mc_id=aprendendofrontend-github-gllemos)** 62 | 63 | ## Tenho Dúvidas... O que fazer? 🚩 64 | 65 | 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/livecoding-frontend-projects/issues)**. Assim que possível, estarei respondendo as todas as dúvidas que tiverem! 66 | -------------------------------------------------------------------------------- /project-1/chat-app-vue/src/assets/css/loading-btn.css: -------------------------------------------------------------------------------- 1 | .ld-ext-right, 2 | .ld-ext-left, 3 | .ld-ext-bottom, 4 | .ld-ext-top, 5 | .ld-over, 6 | .ld-over-inverse, 7 | .ld-over-full, 8 | .ld-over-full-inverse { 9 | position: relative; 10 | -webkit-transition: all 0.3s; 11 | transition: all 0.3s; 12 | transition-timing-function: ease-in; 13 | overflow: hidden; 14 | } 15 | .ld-ext-right > .ld, 16 | .ld-ext-left > .ld, 17 | .ld-ext-bottom > .ld, 18 | .ld-ext-top > .ld, 19 | .ld-over > .ld, 20 | .ld-over-inverse > .ld, 21 | .ld-over-full > .ld, 22 | .ld-over-full-inverse > .ld { 23 | position: absolute; 24 | top: 50%; 25 | left: 50%; 26 | margin: -0.5em; 27 | opacity: 0; 28 | z-index: -100; 29 | -webkit-transition: all 0.3s; 30 | transition: all 0.3s; 31 | transition-timing-function: ease-in; 32 | } 33 | .ld-ext-right.running > .ld, 34 | .ld-ext-left.running > .ld, 35 | .ld-ext-bottom.running > .ld, 36 | .ld-ext-top.running > .ld, 37 | .ld-over.running > .ld, 38 | .ld-over-inverse.running > .ld, 39 | .ld-over-full.running > .ld, 40 | .ld-over-full-inverse.running > .ld { 41 | opacity: 1; 42 | z-index: auto; 43 | } 44 | .ld-ext-right.running { 45 | padding-right: 2.5em !important; 46 | } 47 | .ld-ext-right > .ld { 48 | top: 50%; 49 | left: auto; 50 | right: 1em; 51 | } 52 | .ld-ext-left.running { 53 | padding-left: 2.5em !important; 54 | } 55 | .ld-ext-left > .ld { 56 | top: 50%; 57 | right: auto; 58 | left: 1em; 59 | } 60 | .ld-ext-bottom.running { 61 | padding-bottom: 2.5em !important; 62 | } 63 | .ld-ext-bottom > .ld { 64 | top: auto; 65 | left: 50%; 66 | bottom: 1em; 67 | } 68 | .ld-ext-top.running { 69 | padding-top: 2.5em !important; 70 | } 71 | .ld-ext-top > .ld { 72 | bottom: auto; 73 | left: 50%; 74 | top: 1em; 75 | } 76 | .ld-over, 77 | .ld-over-inverse, 78 | .ld-over-full, 79 | .ld-over-full-inverse { 80 | overflow: hidden; 81 | } 82 | .ld-over.running > .ld, 83 | .ld-over-inverse.running > .ld, 84 | .ld-over-full.running > .ld, 85 | .ld-over-full-inverse.running > .ld { 86 | z-index: 99999; 87 | } 88 | .ld-over:before, 89 | .ld-over-inverse:before, 90 | .ld-over-full:before, 91 | .ld-over-full-inverse:before { 92 | content: " "; 93 | display: block; 94 | opacity: 0; 95 | position: absolute; 96 | z-index: -1; 97 | top: 0; 98 | left: 0; 99 | width: 100%; 100 | height: 100%; 101 | -webkit-transition: all 0.3s; 102 | transition: all 0.3s; 103 | transition-timing-function: ease-in; 104 | background: rgba(240,240,240,0.8); 105 | } 106 | .ld-over-full > .ld, 107 | .ld-over-full-inverse > .ld { 108 | position: fixed; 109 | } 110 | .ld-over-full > .ld { 111 | color: rgba(0,0,0,0.8); 112 | } 113 | .ld-over-full:before, 114 | .ld-over-full-inverse:before { 115 | z-index: -1; 116 | position: fixed; 117 | background: rgba(255,255,255,0.8); 118 | } 119 | .ld-over.running > .ld, 120 | .ld-over-inverse.running > .ld, 121 | .ld-over-full.running > .ld, 122 | .ld-over-full-inverse.running > .ld { 123 | z-index: 999999; 124 | } 125 | .ld-over.running:before, 126 | .ld-over-inverse.running:before, 127 | .ld-over-full.running:before, 128 | .ld-over-full-inverse.running:before { 129 | opacity: 1; 130 | z-index: 999998; 131 | display: block; 132 | } 133 | .ld-over-inverse > .ld { 134 | color: rgba(255,255,255,0.8); 135 | } 136 | .ld-over-inverse:before { 137 | background: rgba(0,0,0,0.6); 138 | } 139 | .ld-over-full-inverse > .ld { 140 | color: rgba(255,255,255,0.8); 141 | } 142 | .ld-over-full-inverse:before { 143 | background: rgba(0,0,0,0.6); 144 | } 145 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Live Coding - Aprendendo Front-End com 9 Projetos 2 | 3 | [![Evento-Twitch-Glaucia-Lemos-1.jpg](https://i.postimg.cc/cJrnCRqR/Evento-Twitch-Glaucia-Lemos-1.jpg)](https://postimg.cc/Y4B9ymC0) 4 | 5 | Repositório com 9 projetos Front-End para aprender diferentes bibliotecas e frameworks. 6 | 7 | ## Objetivo Principal 🎯 8 | 9 | O desenvolvedor **[Simon Holdorf](https://twitter.com/simonholdorf)**, escreveu um post no site dev.to sobre: **[9 Projetos que você pode fazer para se tornar um Front-End Master em 2020](https://dev.to/simonholdorf/9-projects-you-can-do-to-become-a-frontend-master-in-2020-n2h?signin=true)**, que seguindo os projetos citados nesse artigo que podemos nos tornar melhores desenvolvedores Front-End durante o ano de 2020. 10 | 11 | Como o meu expertise principal não é Front-End, mas sim Back-End, decidi então usar os tutoriais desse artigo para fazer live coding e consequentemente aprender um pouco mais sobre diferentes bibliotecas e frameworks (Front-End) do mercado. E também entrar no desafio do #100daysofcode (100 dias de código) 12 | 13 | p.s.: **[Para saber mais informações sobre #100daysofcode - AQUI](https://www.100daysofcode.com/)** 14 | 15 | Esses projetos desenvolvidos são para fins de estudo pessoal e discussão durante o live coding no **[Twitch](https://www.twitch.tv/glaucia_lemos86)** e no **[Youtube](https://www.youtube.com/user/l32759)** 16 | 17 | ## Recursos Utilizados 🚀 18 | 19 | - **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=javascript-0000-gllemos)** 20 | - **[Node.js](https://nodejs.org/en/)** 21 | 22 | ## Projetos Desenvolvidos 💻 23 | 24 | | Projeto | Descrição | Link do Projeto | Tecnologias | Link dos Vídeos 25 | |---|---|---|---|---| 26 | | **[Projeto 1 - Desenvolvendo uma Aplicação Chat em Tempo Real com Vue](project-1/README.md)** | Desenvolvimento de uma aplicação Vue com Pusher e Deploy da Aplicação no Azure | **[chat-app-vue](project-1/README.md)** | `vue, pusher, azure blob storage, loading.io, node.js` | **[Playlist - Vídeos 01-09](https://www.youtube.com/playlist?list=PLb2HQ45KP0Wsjhon8AQt9Kfzx_GK26y-n)** | 27 | | **[Projeto 2 - Previsão do Tempo com Angular](project-2/README.md)** | TBD | TBD | TBD | TBD | 28 | | TBD-03 | TBD | TBD | TBD | TBD | 29 | | TBD-04 | TBD | TBD | TBD | TBD | 30 | | TBD-05 | TBD | TBD | TBD | TBD | 31 | | TBD-06 | TBD | TBD | TBD | TBD | 32 | | TBD-07 | TBD | TBD | TBD | TBD | 33 | | TBD-08 | TBD | TBD | TBD | TBD | 34 | | TBD-09 | TBD | TBD | TBD | TBD | 35 | 36 | ## Links & Recursos Adicionais 📒 37 | 38 | - ✅ **[Tutorial - Vs Code com Angular](https://code.visualstudio.com/docs/nodejs/angular-tutorial?WT.mc_id=javascript-0000-gllemos)** 39 | - ✅ **[Tutorial - Vs Code com Vue](https://code.visualstudio.com/docs/nodejs/vuejs-tutorial?WT.mc_id=javascript-0000-gllemos)** 40 | - ✅ **[Tutorial - Vs Code com React](https://code.visualstudio.com/docs/nodejs/reactjs-tutorial?WT.mc_id=javascript-0000-gllemos)** 41 | - ✅ **[Hospede & Faça Deploy de Site Estático no Azure](https://docs.microsoft.com/azure/javascript/tutorial-vscode-static-website-node-01?WT.mc_id=javascript-0000-gllemos)** 42 | - ✅ **[Free Trial Azure](https://azure.microsoft.com/free/?WT.mc_id=javascript-0000-gllemos)** 43 | - ✅ **[Azure for Students](https://azure.microsoft.com/free/students/?WT.mc_id=javascript-0000-gllemos)** 44 | 45 | ## Tenho Dúvidas... O que Faço?! ❓ 46 | 47 | 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/livecoding-frontend-projects/issues)**. Assim que possível, estarei respondendo as todas as dúvidas que tiverem! 48 | 49 | **(documentação em desenvolvimento)** 50 | 51 | 52 | -------------------------------------------------------------------------------- /project-2/weather-app-angular/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "weather-app-angular": { 7 | "projectType": "application", 8 | "schematics": {}, 9 | "root": "", 10 | "sourceRoot": "src", 11 | "prefix": "app", 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:browser", 15 | "options": { 16 | "outputPath": "dist/weather-app-angular", 17 | "index": "src/index.html", 18 | "main": "src/main.ts", 19 | "polyfills": "src/polyfills.ts", 20 | "tsConfig": "tsconfig.app.json", 21 | "aot": false, 22 | "assets": [ 23 | "src/favicon.ico", 24 | "src/assets" 25 | ], 26 | "styles": [ 27 | "node_modules/bootstrap/dist/css/bootstrap.css", 28 | "src/styles.css" 29 | ], 30 | "scripts": [ 31 | "node_modules/jquery/dist/jquery.slim.js", 32 | "node_modules/popper.js/dist/umd/popper.js", 33 | "node_modules/bootstrap/dist/js/bootstrap.js" 34 | ] 35 | }, 36 | "configurations": { 37 | "production": { 38 | "fileReplacements": [ 39 | { 40 | "replace": "src/environments/environment.ts", 41 | "with": "src/environments/environment.prod.ts" 42 | } 43 | ], 44 | "optimization": true, 45 | "outputHashing": "all", 46 | "sourceMap": false, 47 | "extractCss": true, 48 | "namedChunks": false, 49 | "aot": true, 50 | "extractLicenses": true, 51 | "vendorChunk": false, 52 | "buildOptimizer": true, 53 | "budgets": [ 54 | { 55 | "type": "initial", 56 | "maximumWarning": "2mb", 57 | "maximumError": "5mb" 58 | } 59 | ] 60 | } 61 | } 62 | }, 63 | "serve": { 64 | "builder": "@angular-devkit/build-angular:dev-server", 65 | "options": { 66 | "browserTarget": "weather-app-angular:build" 67 | }, 68 | "configurations": { 69 | "production": { 70 | "browserTarget": "weather-app-angular:build:production" 71 | } 72 | } 73 | }, 74 | "extract-i18n": { 75 | "builder": "@angular-devkit/build-angular:extract-i18n", 76 | "options": { 77 | "browserTarget": "weather-app-angular:build" 78 | } 79 | }, 80 | "test": { 81 | "builder": "@angular-devkit/build-angular:karma", 82 | "options": { 83 | "main": "src/test.ts", 84 | "polyfills": "src/polyfills.ts", 85 | "tsConfig": "tsconfig.spec.json", 86 | "karmaConfig": "karma.conf.js", 87 | "assets": [ 88 | "src/favicon.ico", 89 | "src/assets" 90 | ], 91 | "styles": [ 92 | "src/styles.css" 93 | ], 94 | "scripts": [] 95 | } 96 | }, 97 | "lint": { 98 | "builder": "@angular-devkit/build-angular:tslint", 99 | "options": { 100 | "tsConfig": [ 101 | "tsconfig.app.json", 102 | "tsconfig.spec.json", 103 | "e2e/tsconfig.json" 104 | ], 105 | "exclude": [ 106 | "**/node_modules/**" 107 | ] 108 | } 109 | }, 110 | "e2e": { 111 | "builder": "@angular-devkit/build-angular:protractor", 112 | "options": { 113 | "protractorConfig": "e2e/protractor.conf.js", 114 | "devServerTarget": "weather-app-angular:serve" 115 | }, 116 | "configurations": { 117 | "production": { 118 | "devServerTarget": "weather-app-angular:serve:production" 119 | } 120 | } 121 | } 122 | } 123 | }}, 124 | "defaultProject": "weather-app-angular" 125 | } 126 | -------------------------------------------------------------------------------- /project-1/README.md: -------------------------------------------------------------------------------- 1 | # Projeto 1 - Desenvolvendo uma Aplicação Chat em Tempo Real com Vue 2 | 3 | Projeto baseado no artigo **[SitePoint](https://aka.ms/AA6x920)** 4 | 5 | [![chatApp-1.gif](https://s5.gifyu.com/images/chatApp-1.gif)](https://gifyu.com/image/7jFd) 6 | 7 | ## Recursos Utilizados 8 | 9 | * **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=aprendendofrontend-github-gllemos)** 10 | * **[Node.Js](https://nodejs.org/en/)** 11 | * **[Vue](https://vuejs.org/)** 12 | * **[Loading.io](https://loading.io/button/)** 13 | * **[Vue CLI](https://cli.vuejs.org/)** 14 | * **Extensões Vue.js Usadas no Projeto** 15 | - **[Vue 2 Snippets:](https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets&WT.mc_id=aprendendofrontend-github-gllemos)** 16 | - **[Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur&WT.mc_id=aprendendofrontend-github-gllemos)** 17 | - **[Vue](https://marketplace.visualstudio.com/items?itemName=liuji-jim.vue&WT.mc_id=aprendendofrontend-github-gllemos)** 18 | - **[Vue VSCode Snippets](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets&WT.mc_id=aprendendofrontend-github-gllemos)** 19 | 20 | ## Executar Localmente o Projeto 🔥 21 | 22 | Caso você deseja executar o projeto na sua máquina local, basta seguir os passos abaixo: 23 | 24 | ## Começando... 🌀 25 | 26 | Para começar, você deve simplesmente clonar o repositório do projeto na sua máquina e instalar as dependências. 27 | 28 | ## Instalando as Dependências (via Windows): ❗️ 29 | 30 | Abre o cmd (caso esteja utilizando o Windows) e digite a path do seu projeto 31 | 32 | ``` 33 | cd "C:\Users\NomeDoComputador\Documents\..." 34 | ``` 35 | 36 | Depois, quando estiver na pasta do projeto, basta digitar no cmd a seguinte instrução: **(dentro do calculadora-app)** 37 | 38 | ``` 39 | npm install 40 | ``` 41 | 42 | Ao digitar a instrução acima, automaticamente ele irá baixar todas as dependências listadas e definidas no arquivo package.json: 43 | 44 | * `node_modules` - que contêm os packages do npm que precisará para o projeto. 45 | 46 | ## Executando a Aplicação 💨 47 | 48 | Bom, agora na mesma tela do cmd, basta iniciar o server para o projeto ser executado localmente. 49 | 50 | ``` 51 | > npm run serve 52 | ``` 53 | 54 | ## Vídeos da Série 📺 55 | 56 | Caso desejam acompanhar o desenvolvimento desse projeto, segue abaixo a lista de vídeos já disponíveis: 57 | 58 | - **[Projeto 1: Chat App - Parte 1](https://youtu.be/N4VxZ6RsIR8)** 59 | - **[Projeto 1: Chat App - Parte 2](https://youtu.be/CsGb4PfzC0c)** 60 | - **[Projeto 1: Chat App - Parte 2.1](https://youtu.be/QC8hHdZOZuQ)** 61 | - **[Projeto 1: Chat App - Parte 3](https://youtu.be/e-3RXI3SrNc)** 62 | - **[Projeto 1: Chat App - Parte 4](https://youtu.be/UvDWvLysJ7w)** 63 | - **[Projeto 1: Chat App - Parte 5.1 *problemas no áudio](https://youtu.be/dvFcTZNhLQw)** 64 | - **[Projeto 1: Chat App - Parte 5.2](https://youtu.be/JYgp01Z35GU)** 65 | - **[Projeto 1: Chat App - Parte 6.1](https://youtu.be/eRygTPjD1OE)** 66 | - **[Projeto 1: Chat App - Parte 6.2](https://youtu.be/XgaWfcPxoVE)** 67 | - **[Projeto 1: Chat App - Parte 7](https://youtu.be/RZpq46Y7kh4)** 68 | - **[Projeto 1: Chat App - Parte 8](https://youtu.be/J_wZhWaEOaM)** 69 | - **[Projeto 1: Chat App - Parte 8.1](https://youtu.be/IZ1KYSVfCiY)** 70 | 71 | ## Links & Recursos Importantes 72 | 73 | Durante a live menciono recursos e links de estudos para adquirir mais conhecimento em determinado assunto. Com isso, estou listando abaixo, todos os links mencionados 74 | 75 | - ✅ **[Criando Projeto no Vue-Cli](https://cli.vuejs.org/guide/creating-a-project.html#using-the-gui)** 76 | - ✅ **[Crie sua primeira aplicação Vue.js no Visual Studio](https://docs.microsoft.com/visualstudio/javascript/quickstart-vuejs-with-nodejs?view=vs-2019&WT.mc_id=aprendendofrontend-github-gllemos)** 77 | - ✅ **[Vue.js no Visual Studio Code](https://code.visualstudio.com/docs/nodejs/vuejs-tutorial?WT.mc_id=aprendendofrontend-github-gllemos)** 78 | - ✅ **[Azure para desenvolvedores de JavaScript e Node.js](https://docs.microsoft.com/javascript/azure/?view=azure-node-latest&WT.mc_id=aprendendofrontend-github-gllemos)** 79 | 80 | ## Tenho Dúvidas... O que fazer? 🚩 81 | 82 | 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/livecoding-frontend-projects/issues)**. Assim que possível, estarei respondendo as todas as dúvidas que tiverem! 83 | 84 | **(documentação em desenvolvimento)** 85 | --------------------------------------------------------------------------------