├── 02.MEAN ├── jobs │ ├── api │ │ ├── .gitignore │ │ ├── i18n │ │ │ ├── en.json │ │ │ └── pt.json │ │ ├── data │ │ │ └── empresas-sao-carlos.xlsx │ │ ├── bin │ │ │ └── www.js │ │ ├── models │ │ │ ├── job-model.js │ │ │ ├── user-model.js │ │ │ └── company-model.js │ │ ├── env.js │ │ ├── init-database.js │ │ ├── routes │ │ │ ├── company-route.js │ │ │ └── user-route.js │ │ ├── package.json │ │ ├── middlewares │ │ │ ├── i18n-middleware.js │ │ │ └── basic-auth-middleware.js │ │ ├── db.js │ │ ├── app.js │ │ └── controllers │ │ │ ├── user-controller.js │ │ │ └── company-controller.js │ └── web │ │ ├── .gitignore │ │ ├── src │ │ ├── js │ │ │ ├── config-app.js │ │ │ ├── login-app.js │ │ │ ├── app.js │ │ │ ├── config │ │ │ │ ├── http-config.js │ │ │ │ ├── api-config.js │ │ │ │ ├── icon-config.js │ │ │ │ ├── message-config.js │ │ │ │ └── route-config.js │ │ │ ├── controllers │ │ │ │ ├── login-controller.js │ │ │ │ ├── message-controller.js │ │ │ │ ├── user-list-controller.js │ │ │ │ ├── menu-controller.js │ │ │ │ └── user-controller.js │ │ │ ├── interceptors │ │ │ │ └── basic-auth-interceptor.js │ │ │ └── services │ │ │ │ ├── message-service.js │ │ │ │ ├── user-service.js │ │ │ │ └── login-service.js │ │ ├── img │ │ │ └── icons │ │ │ │ ├── ic_menu.svg │ │ │ │ └── ic_people.svg │ │ ├── views │ │ │ ├── users.html │ │ │ └── user.html │ │ ├── login.html │ │ └── index.html │ │ ├── server.js │ │ ├── package.json │ │ └── gulpfile.js ├── aula-04 │ ├── feature-vs-scale.png │ └── README.md ├── aula-03 │ └── README.md ├── aula-06 │ └── README.md ├── aula-08 │ └── README.md ├── aula-07 │ └── README.md ├── aula-01 │ └── README.md ├── README.md ├── aula-05 │ └── README.md └── aula-02 │ └── README.md ├── 03.React+Flux ├── README.md ├── examples │ └── sancajobs │ │ ├── src │ │ ├── index.css │ │ ├── index.js │ │ ├── App.test.js │ │ ├── App.css │ │ ├── JobList.js │ │ ├── JobItem.js │ │ ├── SearchBar.js │ │ ├── App.js │ │ └── logo.svg │ │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ │ ├── .gitignore │ │ ├── package.json │ │ └── README.md ├── react │ ├── sanca-jobs-mockup.png │ ├── GET-STARTED.md │ └── README.md └── flux │ └── README.md ├── 01.JavaScript ├── aula-04 │ ├── exemplo-01 │ │ ├── app2.js │ │ ├── app1.js │ │ └── index.html │ ├── exercicio-01 │ │ ├── pessoa-model.js │ │ ├── pessoa-controller.js │ │ └── index.html │ ├── exemplo-02.js │ ├── exemplo-03.js │ └── README.md ├── aula-05 │ ├── exemplo-03.js │ ├── exercicio-03.js │ ├── exemplo-04.js │ ├── exemplo-05.js │ ├── exercicio-04 │ │ ├── app.js │ │ ├── index.html │ │ └── nosso-jquery.js │ ├── exemplo-01.js │ ├── exemplo-02.js │ ├── README.md │ ├── exercicio-01.js │ └── exercicio-02.js ├── aula-02 │ ├── exemplo-04-funcao.js │ ├── exemplo-03-object.js │ ├── exemplo-01-boolean.js │ ├── exemplo-02-object.js │ ├── exemplo-05-object.js │ ├── exemplo-06-object-funcao.js │ ├── exercicio-03.js │ ├── exercicio-02.js │ ├── exercicio-01.js │ └── README.md ├── aula-03 │ ├── exemplo-03.js │ ├── exemplo-01.js │ ├── exemplo-04.js │ ├── exericio-03.js │ ├── exemplo-02.js │ ├── exericio-05.js │ ├── exericio-01.js │ ├── exericio-02.js │ ├── exericio-04.js │ └── README.md ├── README.md └── aula-01 │ └── README.md ├── 06.TDD └── README.md ├── 05.Ionic1 └── README.md ├── 04.EmberJS └── README.md ├── LICENSE.md └── README.md /02.MEAN/jobs/api/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /02.MEAN/jobs/web/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | -------------------------------------------------------------------------------- /02.MEAN/jobs/api/i18n/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "forbidden": "User required!" 3 | } 4 | -------------------------------------------------------------------------------- /02.MEAN/jobs/api/i18n/pt.json: -------------------------------------------------------------------------------- 1 | { 2 | "forbidden": "Usuário obrigatório!" 3 | } 4 | -------------------------------------------------------------------------------- /03.React+Flux/README.md: -------------------------------------------------------------------------------- 1 | #React+Flux 2 | 3 | 1. [React](./react) 4 | 2. [Flux](./flux) 5 | 6 | -------------------------------------------------------------------------------- /01.JavaScript/aula-04/exemplo-01/app2.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | function sendMessage() { 4 | console.log('Vai Goku!!'); 5 | } 6 | -------------------------------------------------------------------------------- /03.React+Flux/examples/sancajobs/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /06.TDD/README.md: -------------------------------------------------------------------------------- 1 | Módulo Testes Funcionais para JavaScript, Angular e NodeJs (William Bruno) 2 | Pré-Requisitos: wait.... 3 | -------------------------------------------------------------------------------- /02.MEAN/aula-04/feature-vs-scale.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opensanca/trilha-javascript/HEAD/02.MEAN/aula-04/feature-vs-scale.png -------------------------------------------------------------------------------- /03.React+Flux/react/sanca-jobs-mockup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opensanca/trilha-javascript/HEAD/03.React+Flux/react/sanca-jobs-mockup.png -------------------------------------------------------------------------------- /02.MEAN/jobs/web/src/js/config-app.js: -------------------------------------------------------------------------------- 1 | (function(angular) { 2 | 'use strict'; 3 | 4 | angular.module('config', []); 5 | 6 | })(window.angular); 7 | -------------------------------------------------------------------------------- /02.MEAN/jobs/api/data/empresas-sao-carlos.xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opensanca/trilha-javascript/HEAD/02.MEAN/jobs/api/data/empresas-sao-carlos.xlsx -------------------------------------------------------------------------------- /03.React+Flux/examples/sancajobs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opensanca/trilha-javascript/HEAD/03.React+Flux/examples/sancajobs/public/favicon.ico -------------------------------------------------------------------------------- /02.MEAN/jobs/web/src/js/login-app.js: -------------------------------------------------------------------------------- 1 | (function(angular) { 2 | 'use strict'; 3 | 4 | angular.module('login', ['config', 'ngCookies']); 5 | 6 | })(window.angular); 7 | -------------------------------------------------------------------------------- /02.MEAN/jobs/web/src/js/app.js: -------------------------------------------------------------------------------- 1 | (function (angular) { 2 | 'use strict' 3 | 4 | angular.module('jobs', ['ngMaterial', 'ngRoute', 'ngCookies', 'config']) 5 | })(window.angular) 6 | -------------------------------------------------------------------------------- /01.JavaScript/aula-05/exemplo-03.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | let pessoa = { 4 | sexo: 'Masculino' 5 | }; 6 | 7 | let renan = Object.create(pessoa); 8 | 9 | console.log(renan.sexo); 10 | -------------------------------------------------------------------------------- /01.JavaScript/aula-02/exemplo-04-funcao.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | function getNome() { 4 | return 'renan'; 5 | } 6 | 7 | let minhaFuncao = getNome; 8 | 9 | console.log(minhaFuncao()); 10 | -------------------------------------------------------------------------------- /02.MEAN/jobs/web/src/img/icons/ic_menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /01.JavaScript/aula-04/exercicio-01/pessoa-model.js: -------------------------------------------------------------------------------- 1 | var Person = (function Pessoa() { 2 | 'use strict'; 3 | 4 | function Person(name) { 5 | this.name = name; 6 | } 7 | 8 | return Person; 9 | })(); 10 | -------------------------------------------------------------------------------- /02.MEAN/jobs/api/bin/www.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const app = require('../app') 4 | const env = require('../env'); 5 | 6 | app.listen(env.server.port, () => { 7 | console.log(`listen on port ${env.server.port}`); 8 | }); 9 | -------------------------------------------------------------------------------- /01.JavaScript/aula-02/exemplo-03-object.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | let pessoa = { 4 | nome: 'Renan', 5 | sobrenome: 'Johannsen de Paula', 6 | idade: 24 7 | }; 8 | 9 | for(let prop in pessoa) { 10 | console.log(prop, ':', pessoa[prop]); 11 | } 12 | -------------------------------------------------------------------------------- /03.React+Flux/examples/sancajobs/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | import './index.css'; 5 | 6 | ReactDOM.render( 7 | , 8 | document.getElementById('root') 9 | ); 10 | -------------------------------------------------------------------------------- /01.JavaScript/aula-03/exemplo-03.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | function Pessoa(nome) { 4 | this.nome = nome; 5 | } 6 | 7 | var renan = new Pessoa('renan'); 8 | console.log(renan); 9 | 10 | var jose = {}; 11 | Pessoa.call(jose, 'jose'); 12 | console.log(jose); 13 | -------------------------------------------------------------------------------- /01.JavaScript/aula-02/exemplo-01-boolean.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | console.log(!!false); 4 | console.log(!!0); 5 | console.log(!!''); 6 | console.log(!!""); 7 | console.log(!!NaN); 8 | console.log(!!null); 9 | console.log(!!undefined); 10 | console.log(!!'false'); 11 | -------------------------------------------------------------------------------- /01.JavaScript/aula-04/exemplo-02.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | function Pessoa(nome) { 4 | this.nome = nome; 5 | this.valueOf = function() { 6 | return this.nome; 7 | } 8 | } 9 | 10 | var result = new Pessoa('Renan') == 'Renan'; 11 | 12 | console.log(result); 13 | -------------------------------------------------------------------------------- /01.JavaScript/aula-05/exercicio-03.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // Altere o protótipo de Number para adicionar potencia 4 | // e raiz quadrada; 5 | 6 | Number.prototype.sqrt = function() { 7 | return Math.sqrt(this); 8 | } 9 | 10 | console.log(new Number(144.0).sqrt()); 11 | -------------------------------------------------------------------------------- /03.React+Flux/examples/sancajobs/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /01.JavaScript/aula-05/exemplo-04.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | ''.__proto__.quebrarCSV = function() { 4 | return this.split(','); 5 | } 6 | 7 | var propriedades = 'nome,idade,sexo,cpf'; 8 | 9 | console.log(propriedades.quebrarCSV()); 10 | console.log('123,456'.quebrarCSV()); 11 | -------------------------------------------------------------------------------- /01.JavaScript/aula-02/exemplo-02-object.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | let pessoa1 = { 4 | 'nome': 'Renan' 5 | }; 6 | 7 | let pessoa2 = { 8 | nome: 'Renan' 9 | }; 10 | 11 | let pessoa3 = {}; 12 | pessoa3.nome = 'Renan'; 13 | 14 | let pessoa4 = {}; 15 | pessoa4['nome'] = 'Renan'; 16 | -------------------------------------------------------------------------------- /01.JavaScript/aula-02/exemplo-05-object.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | let pessoa = { 4 | nome: 'Renan', 5 | getNome: function() { 6 | return this.nome 7 | } 8 | }; 9 | 10 | pessoa.getNome = function() { 11 | return this.nome; 12 | }; 13 | 14 | console.log(pessoa.getNome()); 15 | -------------------------------------------------------------------------------- /01.JavaScript/aula-02/exemplo-06-object-funcao.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | let pessoa = { 4 | nome: 'Renan' 5 | }; 6 | 7 | pessoa.getNome = getNome; 8 | 9 | function getNome() { 10 | return this.nome; 11 | } 12 | 13 | console.log(pessoa.getNome()); 14 | console.log(getNome()); 15 | -------------------------------------------------------------------------------- /03.React+Flux/examples/sancajobs/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | 6 | # testing 7 | coverage 8 | 9 | # production 10 | build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log 16 | -------------------------------------------------------------------------------- /01.JavaScript/aula-04/exemplo-03.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | function funcao1() { 4 | console.log('funcao1'); 5 | return true; 6 | } 7 | 8 | function funcao2() { 9 | console.log('funcao2'); 10 | return true; 11 | } 12 | 13 | var result = funcao1() | funcao2(); 14 | 15 | console.log(result); 16 | -------------------------------------------------------------------------------- /02.MEAN/aula-03/README.md: -------------------------------------------------------------------------------- 1 | # Express e Organização do Projeto 2 | 3 | Nesta aula o Express junto de seu mecanismo para roteamento. 4 | Abaixo, segue alguns links e material para apoio. 5 | 6 | ## Video Aulas 7 | 8 | - [Be MEAN: Express.JS](https://www.youtube.com/playlist?list=PL77JVjKTJT2i49XXCe4AKkNMeME1G47yJ); 9 | -------------------------------------------------------------------------------- /02.MEAN/aula-06/README.md: -------------------------------------------------------------------------------- 1 | # Middlewares e Segurança; 2 | 3 | Nesta os conceitos que acercam os middlewares e o Basic authentication. 4 | 5 | Abaixo, segue alguns links para apoio. 6 | 7 | ## Video Aulas 8 | 9 | - [Be MEAN: Node.JS+Express.JS](https://youtu.be/ZRUuBfoYlxs?list=PL77JVjKTJT2i49XXCe4AKkNMeME1G47yJ); 10 | -------------------------------------------------------------------------------- /02.MEAN/jobs/api/models/job-model.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const jobs = []; 4 | 5 | function Job(title, company, contact) { 6 | this.title = title; 7 | this.company = company; 8 | this.contact = contact; 9 | } 10 | 11 | Job.prototype.save = function() { 12 | jobs.push(this); 13 | }; 14 | 15 | module.exports = Job; 16 | -------------------------------------------------------------------------------- /02.MEAN/jobs/web/src/js/config/http-config.js: -------------------------------------------------------------------------------- 1 | (function(angular) { 2 | 'use strict'; 3 | 4 | angular.module('jobs').config(config); 5 | 6 | config.$inject = ['$httpProvider']; 7 | 8 | function config($httpProvider) { 9 | $httpProvider.interceptors.push('BasicAuthInterceptor'); 10 | } 11 | 12 | })(window.angular); 13 | -------------------------------------------------------------------------------- /01.JavaScript/aula-05/exemplo-05.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | function Pessoa(nome, idade) { 4 | this.nome = nome; 5 | this.idade = idade; 6 | } 7 | 8 | Pessoa.prototype.falar = function() { 9 | console.log(`Eu sou ${this.nome} e tenho ${this.idade} anos!`); 10 | } 11 | 12 | var renan = new Pessoa('renan', 24); 13 | renan.falar(); 14 | -------------------------------------------------------------------------------- /01.JavaScript/aula-02/exercicio-03.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | // Crie uma função que adicione propriedades dinamicamente em um objeto. 3 | 4 | const obj = {} 5 | 6 | add(obj, 'nome', 'Renan JP'); 7 | add(obj, 'nome composto', 'teste'); 8 | 9 | function add(obj, nomeProp, valorProp) { 10 | obj[nomeProp] = valorProp; 11 | } 12 | 13 | console.log(obj); 14 | -------------------------------------------------------------------------------- /01.JavaScript/aula-05/exercicio-04/app.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | (function($) { 3 | 4 | var inputNome = $('#nome'); 5 | var buttonAdicionar = $('#adicionar'); 6 | var listaTarefas = $('.tarefas'); 7 | 8 | buttonAdicionar.click(function() { 9 | var nome = inputNome.value(); 10 | listaTarefas.append(`
  • ${nome}
    • `); 11 | }); 12 | 13 | })($); 14 | -------------------------------------------------------------------------------- /01.JavaScript/aula-03/exemplo-01.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | function criterio(x, y) { 4 | return x.nome >= y.nome; 5 | } 6 | 7 | function comparacao(obj1, obj2, criterio) { 8 | return criterio(obj1, obj2); 9 | } 10 | 11 | var renan = {nome: 'renan'}; 12 | var jose = {nome: 'jose'}; 13 | 14 | var r = comparacao(renan, jose, criterio); 15 | 16 | console.log(r); 17 | -------------------------------------------------------------------------------- /01.JavaScript/aula-03/exemplo-04.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | function hipotenusa(cataAdj) { 4 | return function(catOps) { 5 | return Math.sqrt(Math.pow(cataAdj, 2) + Math.pow(catOps, 2)); 6 | } 7 | } 8 | 9 | var baseDoCalcHipo = hipotenusa(3); 10 | 11 | console.log(baseDoCalcHipo(4)); 12 | console.log(baseDoCalcHipo(5)); 13 | console.log(baseDoCalcHipo(7)); 14 | -------------------------------------------------------------------------------- /01.JavaScript/aula-03/exericio-03.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // Crie uma função de soma que seja invocada da 4 | // seguinte maneira: soma(5)(10); 5 | 6 | function soma(x) { 7 | return function(y) { 8 | return x + y; 9 | } 10 | } 11 | 12 | const somaBase = soma(5); 13 | 14 | console.log(somaBase(10)); 15 | console.log(somaBase(20)); 16 | console.log(somaBase(30)); 17 | -------------------------------------------------------------------------------- /01.JavaScript/aula-05/exemplo-01.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | let pessoa = { 4 | sexo: 'Masculino' 5 | }; 6 | 7 | let renan = { 8 | nome: 'Renan', 9 | __proto__: pessoa 10 | }; 11 | 12 | console.log(renan); 13 | console.log(renan.sexo); 14 | 15 | console.log(renan.__proto__); 16 | console.log(renan.__proto__.__proto__); 17 | console.log(renan.__proto__.__proto__.__proto__); 18 | -------------------------------------------------------------------------------- /02.MEAN/jobs/web/src/js/config/api-config.js: -------------------------------------------------------------------------------- 1 | (function(angular) { 2 | 'use strict'; 3 | 4 | const _baseApiPath = 'http://localhost:3000/' 5 | const _api = { 6 | users: _baseApiPath + 'users', 7 | user: _baseApiPath + 'user', 8 | profile: _baseApiPath + 'user/profile' 9 | }; 10 | 11 | angular.module('config').constant('api', _api); 12 | 13 | })(window.angular); 14 | -------------------------------------------------------------------------------- /01.JavaScript/aula-05/exemplo-02.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | let pessoa = { 4 | sexo: 'Masculino' 5 | }; 6 | 7 | let renan = { 8 | nome: 'Renan' 9 | }; 10 | 11 | Object.setPrototypeOf(renan, pessoa); 12 | 13 | let jose = { 14 | nome: 'Jose' 15 | } 16 | 17 | Object.setPrototypeOf(jose, pessoa); 18 | 19 | renan.sexo = 'Feminino'; 20 | 21 | console.log(renan); 22 | console.log(jose); 23 | -------------------------------------------------------------------------------- /02.MEAN/jobs/api/env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const env = {} 4 | 5 | env.server = { 6 | port: process.env.SERVER_PORT || 3000 7 | } 8 | 9 | env.database = { 10 | uri: process.env.DATABASE_URI || 'mongodb://ds139817.mlab.com:39817/opensanca-jobs', 11 | options: { 12 | user: process.env.DATABASE_USER || 'dev', 13 | pass: process.env.DATABASE_PASS || 'dev' 14 | } 15 | } 16 | 17 | module.exports = env 18 | -------------------------------------------------------------------------------- /02.MEAN/jobs/api/init-database.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const fs = require('fs'); 4 | const xlsx = require('node-xlsx'); 5 | const Company = require('./models/company-model'); 6 | 7 | const dataXls = xlsx.parse(fs.readFileSync(`${__dirname}/data/empresas-sao-carlos.xlsx`)); 8 | 9 | const companies = dataXls[0].data.slice(1); 10 | 11 | companies.forEach((company) => { 12 | new Company(...company).save(); 13 | }); 14 | -------------------------------------------------------------------------------- /02.MEAN/jobs/web/src/js/config/icon-config.js: -------------------------------------------------------------------------------- 1 | (function(angular) { 2 | 'use strict'; 3 | 4 | angular.module('jobs').config(config); 5 | 6 | config.$inject = ['$mdIconProvider']; 7 | 8 | function config($mdIconProvider) { 9 | $mdIconProvider 10 | .icon('navigation:menu', '/img/icons/ic_menu.svg') 11 | .icon('social:people', '/img/icons/ic_people.svg'); 12 | } 13 | 14 | })(window.angular); 15 | -------------------------------------------------------------------------------- /01.JavaScript/aula-03/exemplo-02.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | function soma(x, y) { 4 | let contexto = this; 5 | console.log('Contexto: ', contexto); 6 | 7 | return x + y; 8 | } 9 | 10 | const resultDireta = soma(10, 20); 11 | const resultCall = soma.call(null, 10, 20); 12 | const resultApply = soma.apply(null, [10, 20]); 13 | 14 | console.log(resultDireta); 15 | console.log(resultCall); 16 | console.log(resultApply); 17 | -------------------------------------------------------------------------------- /01.JavaScript/aula-04/exemplo-01/app1.js: -------------------------------------------------------------------------------- 1 | (function(document, console) { 2 | 'use strict'; 3 | 4 | var inputNome = document.getElementById('nome'); 5 | var sendButton = document.getElementById('send'); 6 | 7 | sendButton.addEventListener('click', function eventClick() { 8 | sendMessage(inputNome.value); 9 | }); 10 | 11 | function sendMessage(message) { 12 | console.log(message); 13 | } 14 | })(document, console); 15 | -------------------------------------------------------------------------------- /01.JavaScript/aula-04/exercicio-01/pessoa-controller.js: -------------------------------------------------------------------------------- 1 | (function PessoaController(document, console, Person) { 2 | 'use strict'; 3 | 4 | var inputName = document.getElementById('name'); 5 | var buttonSave = document.getElementById('save'); 6 | 7 | buttonSave.addEventListener('click', function() { 8 | var person = new Person(inputName.value); 9 | console.log(person); 10 | }); 11 | 12 | })(document, console, Person); 13 | -------------------------------------------------------------------------------- /02.MEAN/jobs/web/src/img/icons/ic_people.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /01.JavaScript/aula-03/exericio-05.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // Crie um debugger configurável 4 | 5 | function configuraDebug(label) { 6 | return function sendMessage(msg) { 7 | console.log(label, msg); 8 | } 9 | } 10 | 11 | const debugDoArquivo = configuraDebug('Arquivo'); 12 | const debugDaFuncao = configuraDebug('Funcao'); 13 | 14 | debugDoArquivo('teste'); 15 | debugDoArquivo('teste2'); 16 | 17 | debugDaFuncao('teste'); 18 | debugDaFuncao('teste2'); 19 | -------------------------------------------------------------------------------- /01.JavaScript/aula-04/exemplo-01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Aula 04 6 | 7 | 8 |

    Olá aula 04

    9 | 10 |
    11 | 12 | 13 |
    14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /02.MEAN/aula-08/README.md: -------------------------------------------------------------------------------- 1 | # Services, Constant e $http; 2 | 3 | Abaixo, segue alguns links para apoio. 4 | 5 | ## Video Aulas 6 | 7 | - [Tudo sobre AngularJS - Rodrigo Branas](https://www.youtube.com/playlist?list=PLQCmSnNFVYnTD5p2fR4EXmtlR6jQJMbPb); 8 | - [Be MEAN: AngularJS](https://www.youtube.com/playlist?list=PL77JVjKTJT2hfviaP9JV_ZyJWSD4je7Df); 9 | 10 | ## Artigos de Apoio 11 | 12 | - [John Papa Patterns Styleguide](https://github.com/johnpapa/angular-styleguide); 13 | -------------------------------------------------------------------------------- /02.MEAN/jobs/web/src/js/config/message-config.js: -------------------------------------------------------------------------------- 1 | (function(angular) { 2 | 'use strict'; 3 | 4 | angular.module('jobs').config(config); 5 | 6 | config.$inject = ['MessageServiceProvider']; 7 | 8 | function config(messageServiceProvider) { 9 | messageServiceProvider.addMessage('succesInserted', 'Registro inserido com sucesso!'); 10 | messageServiceProvider.addMessage('succesUpdated', 'Registro atualizado com sucesso!'); 11 | } 12 | 13 | })(window.angular); 14 | -------------------------------------------------------------------------------- /03.React+Flux/examples/sancajobs/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /03.React+Flux/examples/sancajobs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sancajobs", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "0.8.1" 7 | }, 8 | "dependencies": { 9 | "react": "^15.4.1", 10 | "react-dom": "^15.4.1" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test --env=jsdom", 16 | "eject": "react-scripts eject" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /01.JavaScript/aula-04/exercicio-01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Exercício 01 6 | 7 | 8 | 9 |

    Inclusão de Pessoas:

    10 | 11 |
    12 | 13 | 14 |
    15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /03.React+Flux/react/GET-STARTED.md: -------------------------------------------------------------------------------- 1 | #Getting Started 2 | 3 | ###Instalação 4 | 5 | Você vai precisar de Node >= 4. Lembre-se de dar permissão ao instalar (`sudo`). 6 | 7 | npm install -g create-react-app 8 | 9 | ###Criando um App 10 | Para criar um novo app, rode: 11 | 12 | create-react-app sancajobs 13 | 14 | ###Referência 15 | 16 | - [React Installation Guide](https://facebook.github.io/react/docs/installation.html) 17 | - [Create React App GitHub page](https://github.com/facebookincubator/create-react-app) 18 | -------------------------------------------------------------------------------- /01.JavaScript/aula-05/exercicio-04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
    10 | 11 | 12 |
    13 | 14 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /02.MEAN/jobs/web/server.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const express = require('express') 4 | const compression = require('compression') 5 | const app = express() 6 | const isProduction = process.env.NODE_ENV === 'production' 7 | const cacheOption = isProduction ? { maxAge: '1d' } : {} 8 | const port = process.env.PORT || 4000 9 | 10 | app.disable('x-powered-by') 11 | 12 | app.use(compression()) 13 | 14 | app.use('/', express.static(isProduction ? 'dist' : 'src', cacheOption)) 15 | 16 | app.listen(port, () => console.log(`Listen on ${port}`)) 17 | -------------------------------------------------------------------------------- /02.MEAN/jobs/api/routes/company-route.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const express = require('express'); 4 | const router = express.Router(); 5 | const ctrl = require('../controllers/company-controller') 6 | 7 | // Retrive 8 | router.get('/companies', ctrl.getCompanies); 9 | // Retrive 10 | router.get('/company/:id', ctrl.getCompany); 11 | // Create 12 | router.post('/company', ctrl.saveCompany); 13 | // Update 14 | router.put('/company/:id', ctrl.updateCompany); 15 | // Delete 16 | router.delete('/company/:id', ctrl.removeCompany); 17 | 18 | module.exports = router; 19 | -------------------------------------------------------------------------------- /02.MEAN/jobs/api/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "importa-dados", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "app.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "prestart": "npm install", 9 | "start": "nodemon ./bin/www" 10 | }, 11 | "author": "Opensanca", 12 | "license": "ISC", 13 | "dependencies": { 14 | "body-parser": "^1.15.2", 15 | "cors": "^2.8.1", 16 | "express": "^4.14.0", 17 | "mongoose": "^4.6.2", 18 | "node-xlsx": "^0.7.2", 19 | "nodemon": "^1.11.0" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /02.MEAN/jobs/api/routes/user-route.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const express = require('express'); 4 | const router = express.Router(); 5 | const ctrl = require('../controllers/user-controller') 6 | const authMiddleware = require('../middlewares/basic-auth-middleware') 7 | 8 | router.get('/users', ctrl.getUsers); 9 | router.get('/user/profile', ctrl.getProfile); 10 | router.get('/user/:id', ctrl.getUser); 11 | router.post('/user', ctrl.saveUser); 12 | router.put('/user/:id', ctrl.updateUser); 13 | router.delete('/user/:id', ctrl.removeUser); 14 | 15 | module.exports = router; 16 | -------------------------------------------------------------------------------- /02.MEAN/aula-07/README.md: -------------------------------------------------------------------------------- 1 | # Introdução, Two Way Databind, Visão declarativa, Utilização de diretivas, Controllers, Organização de aplicações, módulos e John Papa Patterns; 2 | 3 | Abaixo, segue alguns links para apoio. 4 | 5 | ## Video Aulas 6 | 7 | - [Tudo sobre AngularJS - Rodrigo Branas](https://www.youtube.com/playlist?list=PLQCmSnNFVYnTD5p2fR4EXmtlR6jQJMbPb); 8 | - [Be MEAN: AngularJS](https://www.youtube.com/playlist?list=PL77JVjKTJT2hfviaP9JV_ZyJWSD4je7Df); 9 | 10 | ## Artigos de Apoio 11 | 12 | - [John Papa Patterns Styleguide](https://github.com/johnpapa/angular-styleguide); 13 | -------------------------------------------------------------------------------- /05.Ionic1/README.md: -------------------------------------------------------------------------------- 1 | Módulo Ionic 1 (Fabian Cabau) 2 | Pré-Requisitos: NPM, Node e Angular 3 | 4 | 5 | O que é Ionic? 6 | Vantagens e Desvantagens 7 | Instalação e Hello World 8 | Patterns 9 | Usando ngCordova para acessar funções nativas do celular. 10 | Câmera 11 | Leitor QR Code 12 | TouchID 13 | Notificações Locais 14 | 15 | Enviando Push Notifications usando OneSignal (Setup e Envio) 16 | Gulpfile para desenvolvimento rápido 17 | CSS utilizando SCSS 18 | Testando o app usando Ionic View 19 | Testando o app nativo 20 | Gerando builds para iOS e Android 21 | Deploy nas Stores 22 | 23 | -------------------------------------------------------------------------------- /02.MEAN/aula-01/README.md: -------------------------------------------------------------------------------- 1 | # Introdução, NPM e Modularização; 2 | 3 | Nesta aula abordamos os conceitos iniciais da plataforma. 4 | Abaixo, segue alguns links e material para apoio. 5 | 6 | ## Video Aulas 7 | 8 | Rodrigo Branas: 9 | - [Node.js - #1 - Introdução - Rodrigo Branas](https://youtu.be/KtDwdoxQL4A?list=PLQCmSnNFVYnTFo60Bt972f8HA4Td7WKwq) 10 | - [Node.js - #2 - Sistema de Módulos - Rodrigo Branas](https://youtu.be/SrVDq1824E4?list=PLQCmSnNFVYnTFo60Bt972f8HA4Td7WKwq) 11 | - [Node.js - #3 - Global Objects - Rodrigo Branas](https://youtu.be/8bVOHkNNpCw?list=PLQCmSnNFVYnTFo60Bt972f8HA4Td7WKwq) 12 | -------------------------------------------------------------------------------- /03.React+Flux/flux/README.md: -------------------------------------------------------------------------------- 1 | # Flux 2 | 3 | ## Fundamentos 4 | 5 | 1. A onde o MVC falhou 6 | 2. O que o Flux propõe 7 | 3. Por que usar Flux com React? 8 | 4. Actions 9 | 5. Dispatcher 10 | 6. Store 11 | 7. Container-View 12 | 8. Conclusão 13 | 14 | ## Mãos à obra 15 | Vamos dar um gás no appzin que o Lemes começou! 16 | 17 | 1. Entendendo Modularização 18 | 2. Criando Action/Dispatcher/Store 19 | 3. Bind Flux -> React 20 | 21 | ## O que não veremos? 22 | 23 | 1. Redux, Alt ou qualquer abstração do flux 24 | 2. Webpack 25 | 26 | ## Speaker 27 | 28 | Guilherme Diego ([Github](http://github.com/guidiego)) 29 | -------------------------------------------------------------------------------- /01.JavaScript/aula-02/exercicio-02.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | // Crie um objeto de operações contendo um número de operandos dinâmico. 3 | // Em seus métodos adicione as operações matemáticas básicas 4 | // com base em seus atributos. 5 | 6 | const operacoes = { 7 | x: 10, 8 | y: 20, 9 | a: 20, 10 | idade: 40, 11 | nome: 30 12 | } 13 | 14 | operacoes.soma = function() { 15 | let result = 0; 16 | 17 | for(let prop in this) { 18 | let valor = this[prop]; 19 | if(typeof valor == 'number') { 20 | result += valor; 21 | } 22 | } 23 | 24 | return result; 25 | }; 26 | 27 | console.log(operacoes.soma()); 28 | -------------------------------------------------------------------------------- /02.MEAN/jobs/api/middlewares/i18n-middleware.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | const HEADER_PROPERT = 'accept-language'; 3 | const messages = { 4 | en: require('../i18n/en.json'), 5 | pt: require('../i18n/pt.json') 6 | } 7 | 8 | module.exports = (req, res, next) => { 9 | console.log(req.headers[HEADER_PROPERT]); 10 | 11 | // Locales separados por ',' e propriedades do locale separados por ';' 12 | // pt-BR,pt;q=0.8,en-US;q=0.6,en;q=0.4 13 | 14 | // req.messages = localeSelecionado; 15 | 16 | req.messages = messages.pt; 17 | 18 | // pt-BR, 19 | // pt;q=0.8, 20 | // en-US;q=0.6, 21 | // en;q=0.4 22 | next(); 23 | }; 24 | -------------------------------------------------------------------------------- /02.MEAN/jobs/web/src/js/controllers/login-controller.js: -------------------------------------------------------------------------------- 1 | (function(angular) { 2 | 'use strict'; 3 | 4 | angular.module('login').controller('LoginController', controller); 5 | 6 | controller.$inject = ['$window', 'LoginService']; 7 | 8 | function controller($window, loginService) { 9 | const vm = this; 10 | 11 | vm.authenticate = (user) => { 12 | loginService.authenticate(user) 13 | .then((resp) => { 14 | $window.location.href = 'index'; 15 | }) 16 | .catch(() => { 17 | vm.invalidUser = true; 18 | }); 19 | }; 20 | 21 | } 22 | 23 | })(window.angular); 24 | -------------------------------------------------------------------------------- /02.MEAN/jobs/api/db.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const mongoose = require('mongoose'); 4 | const env = require('./env') 5 | 6 | mongoose.Promise = global.Promise; 7 | mongoose.connect(env.database.uri, env.database.options); 8 | 9 | const db = mongoose.connection; 10 | 11 | db.on('open', () => { 12 | console.log(`Connected with: ${env.database.uri}`); 13 | }); 14 | 15 | db.on('error', (err) => { 16 | console.log(`MongoDB error: ${err}`); 17 | }); 18 | 19 | process.on('SIGINT', () => { 20 | db.close(() => { 21 | console.log('MongoDB disconnected through app termination'); 22 | process.exit(0); 23 | }); 24 | }); 25 | 26 | module.exports = db; 27 | -------------------------------------------------------------------------------- /01.JavaScript/aula-03/exericio-01.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // Crie uma função construtora de carros 4 | // Adicione os atributos de nome, cor e ano de lançamento 5 | // Crie um método de comparação de carros com 6 | // condicional dinâmica 7 | 8 | function Carro(nome, cor, ano) { 9 | this.nome = nome; 10 | this.cor = cor; 11 | this.ano = ano; 12 | 13 | this.comparar = function(obj, criterio) { 14 | return criterio(this, obj) 15 | } 16 | } 17 | 18 | const car1 = new Carro('Palio', 'vermelha', 2015); 19 | const car2 = new Carro('Camaro', 'amarelo', 2014); 20 | 21 | const result = car1.comparar(car2, function(x, y) { 22 | return x.ano >= y.ano; 23 | }); 24 | 25 | console.log(result); 26 | -------------------------------------------------------------------------------- /02.MEAN/jobs/web/src/js/controllers/message-controller.js: -------------------------------------------------------------------------------- 1 | (function(angular) { 2 | 'use strict'; 3 | 4 | angular.module('jobs').controller('MessageController', controller); 5 | 6 | controller.$inject = ['$rootScope', '$mdToast']; 7 | 8 | function controller($rootScope, $mdToast) { 9 | const vm = this; 10 | 11 | vm.init = () => { 12 | vm.errors = []; 13 | 14 | $rootScope.$on('success-message', (event, message) => { 15 | $mdToast.show($mdToast.simple().textContent(message)) 16 | }); 17 | 18 | $rootScope.$on('error-message', (event, message) => { 19 | vm.errors.push(message); 20 | }); 21 | }; 22 | 23 | } 24 | 25 | })(window.angular); 26 | -------------------------------------------------------------------------------- /02.MEAN/jobs/api/app.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const db = require('./db'); 4 | const express = require('express'); 5 | const bodyParser = require('body-parser'); 6 | const authMiddleware = require('./middlewares/basic-auth-middleware'); 7 | const i18nMiddleware = require('./middlewares/i18n-middleware'); 8 | const cors = require('cors'); 9 | const app = express(); 10 | 11 | // Config Middlewares 12 | app.use(bodyParser.urlencoded({ extended: true })); 13 | app.use(bodyParser.json()); 14 | app.use(cors()); 15 | 16 | app.use(i18nMiddleware); 17 | app.use(authMiddleware); 18 | 19 | // Config Routes 20 | app.use(require('./routes/user-route')); 21 | app.use(require('./routes/company-route')); 22 | 23 | module.exports = app; 24 | -------------------------------------------------------------------------------- /02.MEAN/jobs/web/src/js/controllers/user-list-controller.js: -------------------------------------------------------------------------------- 1 | (function(angular) { 2 | 'use strict'; 3 | 4 | angular.module('jobs').controller('UserListController', controller); 5 | 6 | controller.$inject = ['UserService', '$location']; 7 | 8 | function controller(UserService, $location) { 9 | const vm = this; 10 | 11 | vm.initList = () => { 12 | UserService 13 | .getUsers() 14 | .then((resp) => { 15 | vm.users = resp.data; 16 | }); 17 | }; 18 | 19 | vm.new = () => { 20 | $location.path('/user/new'); 21 | }; 22 | 23 | vm.edit = (user) => { 24 | $location.path(`/user/${user._id}/edit`); 25 | }; 26 | 27 | } 28 | 29 | })(window.angular); 30 | -------------------------------------------------------------------------------- /03.React+Flux/examples/sancajobs/src/JobList.js: -------------------------------------------------------------------------------- 1 | //src/JobList.js 2 | import React, { Component, PropTypes } from 'react'; 3 | 4 | import JobItem from './JobItem'; 5 | 6 | class JobList extends Component { 7 | 8 | static propTypes = { 9 | jobs: PropTypes.array, 10 | }; 11 | 12 | render() { 13 | const itens = this.props.jobs.map(job => 14 | 23 | ); 24 | return ( 25 |
    26 | {itens} 27 |
    28 | ); 29 | } 30 | } 31 | 32 | export default JobList; 33 | -------------------------------------------------------------------------------- /02.MEAN/jobs/web/src/js/config/route-config.js: -------------------------------------------------------------------------------- 1 | (function(angular) { 2 | 'use strict'; 3 | 4 | angular.module('jobs').config(config); 5 | 6 | config.$inject = ['$routeProvider']; 7 | 8 | function config($routeProvider) { 9 | $routeProvider.when('/user/new', { 10 | templateUrl: 'views/user.html', 11 | controller: 'UserController', 12 | controllerAs: 'vm' 13 | }) 14 | .when('/user/:id/edit', { 15 | templateUrl: 'views/user.html', 16 | controller: 'UserController', 17 | controllerAs: 'vm' 18 | }) 19 | .when('/users', { 20 | templateUrl: 'views/users.html', 21 | controller: 'UserListController', 22 | controllerAs: 'vm' 23 | }) 24 | } 25 | })(window.angular); 26 | -------------------------------------------------------------------------------- /01.JavaScript/aula-05/README.md: -------------------------------------------------------------------------------- 1 | # Prototype; 2 | 3 | Nesta aula abordamos as formas de manipulação de protótipo junto de suas principais características. 4 | 5 | Abaixo segue alguns links e material de apoio: 6 | 7 | ## Artigos 8 | 9 | We Love Dev: 10 | - [Zero to Hero JavaScript - Funções](http://www.welovedev.com.br/post/zero-to-hero-javascript-prototype) 11 | 12 | ## Video Aulas 13 | 14 | Rodrigo Branas: 15 | - [Desvendando a linguagem JavaScript - #14 - Herança - Parte 1](https://youtu.be/1Y0nSEMvTt0?list=PLQCmSnNFVYnT1-oeDOSBnt164802rkegc) 16 | - [Desvendando a linguagem JavaScript - #15 - Herança - Parte 2](https://youtu.be/hDhoO86cfh8?list=PLQCmSnNFVYnT1-oeDOSBnt164802rkegc) 17 | 18 | ## Exemplos dados na aula: 19 | 20 | ## Exercícios de fixação: 21 | -------------------------------------------------------------------------------- /01.JavaScript/aula-05/exercicio-04/nosso-jquery.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | (function(window, document) { 3 | 4 | function Elemento(elemento) { 5 | this.elemento = elemento; 6 | } 7 | 8 | Elemento.prototype.click = function(callback) { 9 | this.elemento.addEventListener('click', callback); 10 | return this; 11 | }; 12 | 13 | Elemento.prototype.value = function() { 14 | return this.elemento.value; 15 | }; 16 | 17 | Elemento.prototype.append = function(htmlValue) { 18 | this.elemento.innerHTML += htmlValue; 19 | return this; 20 | }; 21 | 22 | function init(seletor) { 23 | var elemento = document.querySelector(seletor); 24 | return new Elemento(elemento); 25 | } 26 | 27 | window.$ = init; 28 | })(window, document); 29 | -------------------------------------------------------------------------------- /02.MEAN/jobs/web/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "web", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "server.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "gulp js" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "babel-preset-es2015": "^6.18.0", 15 | "gulp": "^3.9.1", 16 | "gulp-babel": "^6.1.2", 17 | "gulp-clean": "^0.3.2", 18 | "gulp-concat": "^2.6.1", 19 | "gulp-htmlmin": "^3.0.0", 20 | "gulp-if": "^2.0.2", 21 | "gulp-uglify": "^2.0.0", 22 | "gulp-useref": "^3.1.2", 23 | "run-sequence": "^1.2.2" 24 | }, 25 | "dependencies": { 26 | "compression": "^1.6.2", 27 | "express": "^4.14.0" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /01.JavaScript/aula-02/exercicio-01.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | // Crie um objeto de operações contendo dois operandos. 3 | // Em seus métodos adicione as operações matemáticas básicas 4 | // com base em seus atributos. 5 | 6 | const operacoes = { 7 | x: 10, 8 | y: 20, 9 | soma: function() { 10 | return this.x + this.y; 11 | }, 12 | subtracao: subtracao 13 | } 14 | 15 | function subtracao() { 16 | return this.x - this.y; 17 | } 18 | 19 | operacoes.divisao = function() { 20 | return this.x / this.y; 21 | } 22 | 23 | var multiplicacao = function() { 24 | return this.x * this.y; 25 | } 26 | 27 | operacoes.multiplicacao = multiplicacao; 28 | 29 | console.log(operacoes.soma()); 30 | console.log(operacoes.subtracao()); 31 | console.log(operacoes.divisao()); 32 | console.log(operacoes.multiplicacao()); 33 | -------------------------------------------------------------------------------- /02.MEAN/jobs/web/src/views/users.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 |
    4 |
    5 | 6 | 7 | 8 | 9 |
    10 |
    11 | 12 | 13 | 14 |

    {{user.name}}

    15 |     16 |     17 | 18 |
    19 | 20 | 21 | 22 |
    23 |
    24 | -------------------------------------------------------------------------------- /01.JavaScript/aula-05/exercicio-01.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // Construa uma definição de conta que possuia 4 | // uma taxa default de 0.10. 5 | // Toda conta terá um método para calculo do imposto. 6 | // Este método realizará a multiplicação do 7 | // valor pela taxa; 8 | 9 | // Construa uma conta de agua com o valor de 150.00; 10 | // Construa uma conta de luz com valor de 100.00 e 11 | // taxa de 0.05; 12 | 13 | var conta = { 14 | taxa: 0.10, 15 | calculaImposto: function() { 16 | return this.valor * this.taxa; 17 | } 18 | } 19 | 20 | var contaDeAgua = { 21 | valor: 150.00, 22 | __proto__: conta 23 | } 24 | 25 | console.log(contaDeAgua.calculaImposto()); 26 | 27 | var contaDeLux = Object.create(conta); 28 | contaDeLux.valor = 100.00; 29 | contaDeLux.taxa = 0.05; 30 | 31 | console.log(contaDeLux.calculaImposto()); 32 | -------------------------------------------------------------------------------- /01.JavaScript/aula-03/exericio-02.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // Crie uma função construtora de Pessoas 4 | // Adicione os atributos de nome, idade e email 5 | // Crie um método de comparação de Pessoas com uma 6 | // condicional dinâmica que receba o nome da 7 | // propriedade a ser comparada dos objetos 8 | 9 | function Pessoa(nome, idade, email) { 10 | this.nome = nome; 11 | this.idade = idade; 12 | this.email = email; 13 | 14 | this.comparar = function(obj, criterio, prop) { 15 | return criterio(this, obj, prop); 16 | }; 17 | } 18 | 19 | function comparaProp(obj1, obj2, prop) { 20 | return obj1[prop] >= obj2[prop]; 21 | } 22 | 23 | const renan = new Pessoa('Renan', 24, 'renan@a.com'); 24 | const jose = new Pessoa('Jose', 30, 'jose@a.com'); 25 | 26 | const r = renan.comparar(jose, comparaProp, 'nome'); 27 | console.log(r); 28 | -------------------------------------------------------------------------------- /01.JavaScript/aula-05/exercicio-02.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // Construa uma definição de Animal com o método de 4 | // andar. Este método mostra com quantas pernas 5 | // o animal está andando; 6 | 7 | // Instancie três animais com quantidade de pernas 8 | // diferentes e utilizando as 3 formas manipulação 9 | // de protótipos aprendidas; 10 | 11 | var animal = { 12 | andar: function functionName() { 13 | console.log(`Andando com ${this.pernas} pernas!`); 14 | } 15 | } 16 | /* __PROTO__ */ 17 | var cavalo = { 18 | pernas: 4, 19 | __proto__: animal 20 | }; 21 | cavalo.andar(); 22 | 23 | /* PROTOTYPE_OF */ 24 | var peixe = { 25 | pernas: 0, 26 | andar: function() { 27 | console.log('Peixe não anda!'); 28 | } 29 | }; 30 | Object.setPrototypeOf(peixe, animal); 31 | peixe.andar(); 32 | 33 | /* CREATE */ 34 | var kiko = Object.create(animal); 35 | kiko.pernas = 2; 36 | kiko.andar(); 37 | -------------------------------------------------------------------------------- /02.MEAN/jobs/web/src/views/user.html: -------------------------------------------------------------------------------- 1 |

    {{ vm.user._id ? 'Edit' : 'New' }} User

    2 | 3 |
    4 |
    5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
    15 | 16 |
    17 | Delete 18 | Save 19 |
    20 |
    21 | -------------------------------------------------------------------------------- /02.MEAN/jobs/web/src/js/interceptors/basic-auth-interceptor.js: -------------------------------------------------------------------------------- 1 | (function(angular) { 2 | 'use strict'; 3 | 4 | angular.module('jobs').factory('BasicAuthInterceptor', interceptor) 5 | 6 | interceptor.$inject = ['$q', '$window', '$cookies']; 7 | 8 | function interceptor($q, $window, $cookies) { 9 | const itc = {}; 10 | const CREDENTIAL = 'credential'; 11 | 12 | itc.request = (config) => { 13 | const credential = $cookies.get(CREDENTIAL); 14 | if(!credential) { 15 | $window.location.href = '/login.html'; 16 | } 17 | config.headers.Authorization = credential; 18 | return config; 19 | }; 20 | 21 | itc.responseError = (rejection) => { 22 | if(rejection.status === 401 || rejection.status === 403) { 23 | $window.location.href = '/login.html'; 24 | }; 25 | return $q.reject(rejection); 26 | }; 27 | 28 | return itc; 29 | } 30 | 31 | })(window.angular); 32 | -------------------------------------------------------------------------------- /03.React+Flux/examples/sancajobs/src/JobItem.js: -------------------------------------------------------------------------------- 1 | //src/JobItem.js 2 | import React, { Component, PropTypes } from 'react'; 3 | 4 | class JobItem extends Component { 5 | 6 | static propTypes = { 7 | title: PropTypes.string.isRequired, 8 | contract: PropTypes.oneOf(['CLT', 'PJ']), 9 | type: PropTypes.string, 10 | company: PropTypes.string, 11 | city: PropTypes.string, 12 | state: PropTypes.string, 13 | }; 14 | 15 | render() { 16 | const { 17 | title, 18 | contract, 19 | type, 20 | company, 21 | city, 22 | state, 23 | } = this.props; 24 | 25 | return ( 26 |
    31 |
    {title}
    32 |
    33 | {contract}, {type} @ {company} - {city}/{state} 34 |
    35 |
    36 | ); 37 | } 38 | }; 39 | 40 | export default JobItem; 41 | -------------------------------------------------------------------------------- /02.MEAN/jobs/web/src/js/services/message-service.js: -------------------------------------------------------------------------------- 1 | (function(angular) { 2 | 'use strict'; 3 | 4 | angular.module('jobs').provider('MessageService', provider) 5 | 6 | function Service(messages, $rootScope) { 7 | const svc = this; 8 | svc.messages = messages; 9 | 10 | svc.success = (message) => { 11 | $rootScope.$broadcast('success-message', message); 12 | }; 13 | 14 | svc.error = (message) => { 15 | $rootScope.$broadcast('error-message', message); 16 | }; 17 | } 18 | 19 | function provider() { 20 | const _provider = {}; 21 | const _messages = {}; 22 | 23 | _provider.addMessage = (key, valor) => { 24 | _messages[key] = valor; 25 | }; 26 | 27 | _provider.$get = ['$rootScope', ($rootScope) => { 28 | return new Service(_messages, $rootScope); 29 | }]; 30 | 31 | return _provider; 32 | } 33 | 34 | })(window.angular); 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | // let messages = {}; 44 | // 45 | -------------------------------------------------------------------------------- /04.EmberJS/README.md: -------------------------------------------------------------------------------- 1 | Pré-Requisitos: ES6 e NodeJs 2 | - Introdução 3 | História 4 | Convenção sobre configuração 5 | Quando usar 6 | Quem utiliza 7 | - Ember-cli 8 | Introdução 9 | Instalação 10 | Estrutura 11 | Generators 12 | Gestão de dependencias 13 | - Ember-data 14 | Introdução 15 | Comunicação 16 | Conhecendo os Adapters 17 | - Componentes 18 | Criação 19 | Extenção 20 | Composição 21 | Testes 22 | - Helpers 23 | Criação 24 | Testes 25 | - Propriedades computadas, quando utilizar 26 | - Testes usando Qunit 27 | Unitários 28 | Aceitacão 29 | Integração 30 | Escrevendo testes melhores 31 | 32 | - Addons 33 | Estrutura 34 | Criação 35 | Instalação e Utilização 36 | - Conhecendo o addon Mirage 37 | Introdução 38 | Configuração 39 | Definindo rotas 40 | Populando sua base de dados 41 | Usando Factories e Fixtures 42 | - Conhecendo o addon Simple-auth 43 | Introdução 44 | Autenticação 45 | Enviando token na requisição 46 | - Melhorando a escrita com ember-cli-shims 47 | - Deploy 48 | -------------------------------------------------------------------------------- /02.MEAN/jobs/web/src/js/services/user-service.js: -------------------------------------------------------------------------------- 1 | (function(angular) { 2 | 'use strict'; 3 | 4 | angular.module('jobs').service('UserService', service) 5 | 6 | service.$inject = ['$http', 'api', '$q']; 7 | 8 | function service($http, api, $q) { 9 | const svc = this; 10 | 11 | svc.getUser = (_id) => { 12 | return $http.get(api.user + '/' + _id); 13 | }; 14 | 15 | svc.getUsers = () => { 16 | return $http.get(api.users); 17 | }; 18 | 19 | svc.saveUser = (user) => { 20 | if(user._id) { 21 | return $http.put(api.user + '/' + user._id, user); 22 | } else { 23 | return $http.post(api.user, user); 24 | } 25 | }; 26 | 27 | svc.remove = (id) => { 28 | return $http.delete(`${api.user}/${id}`) 29 | } 30 | 31 | svc.removeAll = (users) => { 32 | let promises = users.map((user) => { 33 | return svc.remove(user._id); 34 | }); 35 | 36 | return $q.all(promises); 37 | }; 38 | } 39 | 40 | })(window.angular); 41 | -------------------------------------------------------------------------------- /02.MEAN/jobs/web/src/js/services/login-service.js: -------------------------------------------------------------------------------- 1 | (function(angular, btoa) { 2 | 'use strict'; 3 | 4 | angular.module('login').factory('LoginService', service) 5 | 6 | service.$inject = ['$http', 'api', '$cookies', '$q']; 7 | 8 | function service($http, api, $cookies, $q) { 9 | const svc = {}; 10 | const CREDENTIAL = 'credential'; 11 | 12 | svc.authenticate = (user) => { 13 | const _base64 = btoa(`${user.name}:${user.password}`); 14 | const _config = { 15 | headers: { 16 | authorization: `Basic ${_base64}` 17 | } 18 | }; 19 | 20 | return $q((resolve, reject) => { 21 | $http.get(api.profile, _config) 22 | .then((resp) => { 23 | $cookies.put(CREDENTIAL, _config.headers.authorization) 24 | return resolve(resp); 25 | }) 26 | .catch((err) => { 27 | return reject(err); 28 | }) 29 | }); 30 | }; 31 | 32 | return svc; 33 | } 34 | 35 | })(window.angular, window.btoa); 36 | -------------------------------------------------------------------------------- /02.MEAN/jobs/api/middlewares/basic-auth-middleware.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const AUTHORIZATION_METHOD = 'Basic'; 4 | const User = require('../models/user-model'); 5 | 6 | module.exports = (req, res, next) => { 7 | let _basicHeader = req.headers.authorization || ''; 8 | let _basicHeaderData = _basicHeader.split(' '); 9 | 10 | if(_basicHeaderData && _basicHeaderData[0] !== AUTHORIZATION_METHOD) { 11 | return res.status(403).send(req.messages.forbidden); 12 | } 13 | 14 | let _basicAuthCredentialData = (new Buffer(_basicHeaderData[1], 'base64')) 15 | .toString('utf8') 16 | .split(':'); 17 | 18 | let _credentials = { 19 | name: _basicAuthCredentialData[0], 20 | password: _basicAuthCredentialData[1] 21 | } 22 | 23 | User.authorization(_credentials) 24 | .then((data) => { 25 | if(data && data != null) { 26 | req.user = data; 27 | return next(); 28 | } 29 | return res.status(401).send(); 30 | }) 31 | .catch((err) => { 32 | return res.status(401).send(); 33 | }); 34 | }; 35 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | ## Copyright (c) 2016 Opensanca, [opensanca.com](http://www.opensanca.com) 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | 9 | -------------------------------------------------------------------------------- /01.JavaScript/aula-03/exericio-04.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // Crie uma função construtora de Pessoas 4 | // Adicione os atributos de nome, idade e email 5 | // Crie um método de comparação de Pessoas com uma 6 | // condicional dinâmica que receba o nome da 7 | // propriedade a ser comparada dos objetos 8 | 9 | function Pessoa(nome, idade, email) { 10 | this.nome = nome; 11 | this.idade = idade; 12 | this.email = email; 13 | 14 | this.comparar = function(obj, criterio) { 15 | return criterio(this, obj); 16 | }; 17 | } 18 | 19 | function preparaCriterio(prop) { 20 | return function(obj1, obj2) { 21 | return obj1[prop] >= obj2[prop]; 22 | } 23 | } 24 | 25 | const comparacaoNome = preparaCriterio('nome'); 26 | const comparacaoIdade = preparaCriterio('idade'); 27 | const comparacaoEmail = preparaCriterio('email'); 28 | 29 | const renan = new Pessoa('Renan', 24, 'renan@a.com'); 30 | const jose = new Pessoa('Jose', 30, 'jose@a.com'); 31 | 32 | console.log(renan.comparar(jose, comparacaoNome)); 33 | console.log(renan.comparar(jose, comparacaoIdade)); 34 | console.log(renan.comparar(jose, comparacaoEmail)); 35 | -------------------------------------------------------------------------------- /02.MEAN/jobs/web/gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const gulp = require('gulp') 4 | const clean = require('gulp-clean') 5 | const uglify = require('gulp-uglify') 6 | const babel = require('gulp-babel') 7 | const useref = require('gulp-useref') 8 | const gulpif = require('gulp-if') 9 | const htmlmin = require('gulp-htmlmin') 10 | const runSequence = require('run-sequence') 11 | 12 | gulp.task('clean', () => { 13 | return gulp.src('./dist') 14 | .pipe(clean()) 15 | }) 16 | 17 | gulp.task('html', () => { 18 | return gulp.src('./src/**/*.html') 19 | .pipe(useref()) 20 | .pipe(gulpif('*.html', htmlmin({collapseWhitespace: true}))) 21 | .pipe(gulpif('*.js', babel({ presets: ['es2015'] }))) 22 | .pipe(gulpif('*.js', uglify())) 23 | .pipe(gulp.dest('./dist')) 24 | }) 25 | 26 | gulp.task('img', () => { 27 | return gulp.src('./src/img/**/*') 28 | .pipe(gulp.dest('./dist/img')) 29 | }) 30 | 31 | gulp.task('default', () => { 32 | return runSequence('clean', ['html', 'img']) 33 | }) 34 | 35 | gulp.task('watch', () => { 36 | return gulp.watch('./src/**/*', ['default']) 37 | }) 38 | -------------------------------------------------------------------------------- /02.MEAN/jobs/web/src/js/controllers/menu-controller.js: -------------------------------------------------------------------------------- 1 | (function(angular) { 2 | 'use strict'; 3 | 4 | angular.module('jobs').controller('MenuController', controller); 5 | 6 | controller.$inject = ['$mdSidenav', '$location']; 7 | 8 | function controller($mdSidenav, $location) { 9 | const vm = this; 10 | const MENU_ID = 'left'; 11 | vm.sections = []; 12 | 13 | vm.sections.push({ 14 | title: 'Admnistration', 15 | itens: [ 16 | { icon: 'social:people', title: 'Users', path: '/users' }, 17 | { icon: 'companies', title: 'Companies', path: '/companies' }, 18 | { icon: 'jobs', title: 'Jobs', path: '/jobs' } 19 | ] 20 | }); 21 | 22 | vm.sections.push({ 23 | title: 'Personal', 24 | itens: [ 25 | { icon: 'profile', title: 'My Profile', path: '/profile' }, 26 | { icon: 'logout', title: 'Logout', path: '/login' } 27 | ] 28 | }); 29 | 30 | vm.toggleMenu = () => { 31 | return $mdSidenav(MENU_ID).toggle(); 32 | }; 33 | 34 | vm.goTo = (iten) => { 35 | $location.path(iten.path); 36 | vm.toggleMenu(); 37 | }; 38 | } 39 | 40 | })(window.angular); 41 | -------------------------------------------------------------------------------- /03.React+Flux/examples/sancajobs/src/SearchBar.js: -------------------------------------------------------------------------------- 1 | //src/SearchBar.js 2 | 3 | import React, { Component } from 'react'; 4 | 5 | class SearchBar extends Component { 6 | 7 | handleChange = event => { 8 | this.props.onChange({ 9 | ...this.props.search, 10 | text: event.target.value, 11 | }); 12 | }; 13 | 14 | handleFullTimeChange = () => { 15 | this.props.onChange({ 16 | ...this.props.search, 17 | isFullTime: !this.props.search.isFullTime, 18 | }); 19 | }; 20 | 21 | render() { 22 | return ( 23 |
    24 |
    25 | 31 |
    32 |
    33 | 41 |
    42 |
    43 | ); 44 | } 45 | } 46 | 47 | export default SearchBar; 48 | -------------------------------------------------------------------------------- /02.MEAN/jobs/web/src/js/controllers/user-controller.js: -------------------------------------------------------------------------------- 1 | (function(angular) { 2 | 'use strict'; 3 | 4 | angular.module('jobs').controller('UserController', controller); 5 | 6 | controller.$inject = ['UserService', '$routeParams', 'MessageService']; 7 | 8 | function controller(UserService, $routeParams, messageService) { 9 | const vm = this; 10 | 11 | vm.initForm = () => { 12 | let _id = $routeParams.id; 13 | 14 | if(_id) { 15 | UserService 16 | .getUser(_id) 17 | .then((res) => { 18 | vm.user = res.data; 19 | }) 20 | } 21 | }; 22 | 23 | vm.save = (user) => { 24 | UserService 25 | .saveUser(user) 26 | .then((res) => { 27 | if(!user._id) { 28 | user._id = res.data._id; 29 | } 30 | 31 | messageService.success(messageService.messages.succesInserted); 32 | }) 33 | .catch((err) => { 34 | messageService.error('Erro inesperado'); 35 | }) 36 | }; 37 | 38 | vm.remove = (user) => { 39 | UserService 40 | .remove(user._id) 41 | .then((res) => { 42 | vm.user = {}; 43 | }) 44 | }; 45 | } 46 | 47 | })(window.angular); 48 | -------------------------------------------------------------------------------- /02.MEAN/README.md: -------------------------------------------------------------------------------- 1 | ![](https://meanstacktips.files.wordpress.com/2015/09/cropped-mean-stack-logo1.jpg) 2 | 3 | ### Ementa | Nodejs e MongoDB 4 | 5 | > Monitor: [Renan Johannsen de Paula](http://www.welovedev.com.br/author/renanjpaula) | 6 | > Carga Horária: 30h 7 | 8 | - [X] [Introdução, NPM e Modularização](./aula-01); 9 | - [X] [Protocolo HTTP e Serviços Rest](./aula-02); 10 | - [X] [Express, Rotas e Organização do projeto](./aula-03); 11 | - [X] [Mongoose, Schemas](./aula-04); 12 | - [X] [CRUD e Autenticação](./aula-05); 13 | - [X] [Middlewares, Segurança](./aula-06); 14 | 15 | ### Ementa | AngularJS 1.x 16 | > Monitor: [Renan Johannsen de Paula](http://www.welovedev.com.br/author/renanjpaula) | 17 | > Carga Horária: 15h 18 | 19 | - [X] [Introdução, Two Way Databind, Visão declarativa, Utilização de diretivas, Controllers, Organização de aplicações, módulos e John Papa Patterns](./aula-07); 20 | - [X] [Services, Constant e $http](./aula-08); 21 | - [ ] Single page applications; 22 | - [ ] Factory; 23 | - [ ] Interceptors; 24 | - [ ] Broadcast; 25 | - [ ] Criação de diretivas; 26 | - [ ] Filters; 27 | - [ ] Material Design; 28 | - [ ] Angular Material; 29 | - [ ] Gestão de dependências com Bower; 30 | - [ ] Automatização de tarefas e geração de build via Gulp; 31 | -------------------------------------------------------------------------------- /03.React+Flux/examples/sancajobs/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
    20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /02.MEAN/jobs/api/models/user-model.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const mongoose = require('mongoose'); 4 | const schema = new mongoose.Schema({ 5 | name: { 6 | type: String, 7 | required: true 8 | }, 9 | password: { 10 | type: String, 11 | required: true 12 | }, 13 | active: { 14 | type: Boolean, 15 | default: true 16 | } 17 | }); 18 | const User = mongoose.model('User', schema); 19 | 20 | module.exports.authorization = (credentials) => { 21 | let _fields = { password: false }; 22 | return User.findOne(credentials, _fields); 23 | } 24 | 25 | module.exports.get = (query) => { 26 | return User.find(query); 27 | }; 28 | 29 | module.exports.getById = (_id) => { 30 | let _query = { _id }; 31 | let _fields = { password: false }; 32 | return User.findOne(_query, _fields); 33 | }; 34 | 35 | module.exports.save = (user) => { 36 | return new Promise((resolve, reject) => { 37 | new User(user).save((err, data) => { 38 | if(err) { 39 | return reject(err); 40 | } 41 | 42 | return resolve({ _id: data._id }); 43 | }); 44 | }); 45 | }; 46 | 47 | module.exports.update = (_id, user) => { 48 | let _query = { _id }; 49 | return User.update(_query, user); 50 | }; 51 | 52 | module.exports.remove = (_id) => { 53 | let _query = { _id }; 54 | return User.remove(_query); 55 | }; 56 | -------------------------------------------------------------------------------- /01.JavaScript/aula-04/README.md: -------------------------------------------------------------------------------- 1 | # Callback, LIFE, Estruturas de Controle e Operadores; 2 | 3 | Nesta aula vimos a continuação das principais características de Funções, Operadores e Estruturas de Controle da linguagem. 4 | 5 | Abaixo segue alguns links e material de apoio: 6 | 7 | ## Artigos 8 | 9 | We Love Dev: 10 | - [Zero to Hero JavaScript - Funções](http://www.welovedev.com.br/post/zero-to-hero-javascript-funcoes); 11 | 12 | Formação MEAN Stack: 13 | - [Estruturas de Cotrole](https://github.com/RenanJPaula/formacao-mean-stack/blob/master/material/javascript-estruturas-de-controle.md); 14 | - [Operadores](https://github.com/RenanJPaula/formacao-mean-stack/blob/master/material/javascript-operadores.md); 15 | 16 | ## Video Aulas 17 | 18 | Rodrigo Branas: 19 | - [Desvendando a linguagem JavaScript - #12 - Operadores](https://www.youtube.com/watch?v=lqTjJGQCq_4&index=12&list=PLQCmSnNFVYnT1-oeDOSBnt164802rkegc); 20 | - [Desvendando a linguagem JavaScript - #13 - Statements](https://www.youtube.com/watch?v=V8vBGk_1GUY&index=13&list=PLQCmSnNFVYnT1-oeDOSBnt164802rkegc); 21 | 22 | ## Exemplos dados na aula: 23 | - [Exemplo 01 - Callback](./exemplo-01); 24 | - [Exemplo 02 - Comparação e Evaluação](./exemplo-02.js); 25 | - [Exemplo 03 - Expressões Booleanas](./exemplo-03.js); 26 | 27 | ## Exercícios de fixação: 28 | - [Exercício 01](./exercicio-01/); 29 | -------------------------------------------------------------------------------- /03.React+Flux/react/README.md: -------------------------------------------------------------------------------- 1 | #React 2 | 3 | ##Apresentação 4 | 5 | Rápida introdução aos fundamentos do React ([link](https://docs.google.com/presentation/d/1LIq_z2OTSzRI5oI1Gr3-lSw9j0PmFeDQWlZ_bGYtXAE/edit?usp=sharing)). 6 | 7 | ####Fundamentos 8 | 9 | 1. Componentes 10 | 2. Single Source of Truth 11 | 3. One way data flow 12 | 4. Prop & State 13 | 5. Pensando em React 14 | 6. Virtual DOM 15 | 7. Vantagens 16 | 17 | ##Mãos à obra 18 | 19 | ![sanca-jobs-mockup](./sanca-jobs-mockup.png) 20 | 21 | Vamos construir um app simples para listar vagas de emprego. Durante o exercício abordaremos: 22 | 23 | [Getting started](./GET-STARTED.md) 24 | 25 | 1. Prop validations 26 | 2. DOM Refs 27 | 3. Handling Events 28 | 4. Component Lifecycle 29 | 5. Higher Order Component 30 | 6. React DevTool 31 | 32 | ##O que não veremos? 33 | 34 | 1. Unit test 35 | 2. Webpack 36 | 3. Server rendering 37 | 4. Router 38 | 5. React Native 39 | 40 | ##Speaker 41 | 42 | Vinícius Lemes ([Github](http://github.com/lemes)) 43 | 44 | ##Referências 45 | 46 | 1. [Facebook React](https://facebook.github.io/react/) 47 | 2. [ReactJS and why it's awesome](http://www.slideshare.net/AndrewHull/react-js-and-why-its-awesome) 48 | 2. [ReactJS: Keep Simple. Everything can be a component](https://speakerdeck.com/pedronauck/reactjs-keep-simple-everything-can-be-a-component) 49 | -------------------------------------------------------------------------------- /02.MEAN/jobs/api/controllers/user-controller.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const User = require('../models/user-model'); 4 | const ctrl = {}; 5 | 6 | ctrl.getUsers = (req, res) => { 7 | User.get(req.query) 8 | .then((data) => { 9 | res.send(data); 10 | }) 11 | .catch((err) => { 12 | res.status(500).send(err); 13 | }); 14 | }; 15 | 16 | ctrl.getUser = (req, res) => { 17 | User.getById(req.params.id) 18 | .then((data) => { 19 | res.send(data); 20 | }) 21 | .catch((err) => { 22 | res.status(500).send(err); 23 | }); 24 | }; 25 | 26 | ctrl.getProfile = (req, res) => { 27 | res.status(200).send(req.user); 28 | }; 29 | 30 | ctrl.saveUser = (req, res) => { 31 | User.save(req.body) 32 | .then((data) => { 33 | res.status(201).send(data); 34 | }) 35 | .catch((err) => { 36 | res.status(500).send(err); 37 | }); 38 | }; 39 | 40 | ctrl.updateUser = (req, res) => { 41 | User.update(req.params.id, req.body) 42 | .then(() => { 43 | res.status(200).send(); 44 | }) 45 | .catch((err) => { 46 | res.status(500).send(err); 47 | }); 48 | }; 49 | 50 | ctrl.removeUser = (req, res) => { 51 | User.remove(req.params.id) 52 | .then(() => { 53 | res.status(200).send(); 54 | }) 55 | .catch((err) => { 56 | res.status(500).send(err); 57 | }); 58 | } 59 | 60 | module.exports = ctrl; 61 | -------------------------------------------------------------------------------- /01.JavaScript/aula-03/README.md: -------------------------------------------------------------------------------- 1 | # Estruturas de controle, Funções e Closure; 2 | 3 | Nesta aula abordamos as principais características de funções. 4 | 5 | Abaixo segue alguns links e material de apoio: 6 | 7 | ## Artigos 8 | 9 | We Love Dev: 10 | - [Zero to Hero JavaScript - Funções](http://www.welovedev.com.br/post/zero-to-hero-javascript-funcoes) 11 | 12 | ## Video Aulas 13 | 14 | Rodrigo Branas: 15 | - [Desvendando a linguagem JavaScript - #12 - Operadores](https://www.youtube.com/watch?v=lqTjJGQCq_4&index=12&list=PLQCmSnNFVYnT1-oeDOSBnt164802rkegc) 16 | - [Desvendando a linguagem JavaScript - #7 - Function - Parte 1](https://www.youtube.com/watch?v=OqR0hE-DQn4&index=7&list=PLQCmSnNFVYnT1-oeDOSBnt164802rkegc) 17 | - [Desvendando a linguagem JavaScript - #8 - Function - Parte 2](https://www.youtube.com/watch?v=m9uPpURTI0c&index=8&list=PLQCmSnNFVYnT1-oeDOSBnt164802rkegc) 18 | 19 | Aulas de Programação: 20 | - [ECMAScript 2015 (ES6) - Aula 08: Parâmetro Padrão](https://www.youtube.com/watch?v=l7HcsrVcNe4) 21 | - [ECMAScript 2015 (ES6) - Aula 09: Operador Spread/Rest](https://www.youtube.com/watch?v=8mTJPEcF3bw) 22 | - [ECMAScript 2015 (ES6) - Aula 10: Arrow Function (Parte 1)](https://www.youtube.com/watch?v=KrB6wFuK6Qg) 23 | - [ECMAScript 2015 (ES6) - Aula 11: Arrow Function (Parte 2)](https://www.youtube.com/watch?v=bJT1wz-72BU) 24 | 25 | ## Exemplos dados na aula: 26 | 27 | ## Exercícios de fixação: 28 | -------------------------------------------------------------------------------- /02.MEAN/jobs/web/src/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
    9 | 10 | 11 | 12 |

    13 | 14 | 15 | 16 | 17 |
    18 |

    Usuário ou senha inváldos!

    19 |
    20 | 21 | 22 |
    23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /01.JavaScript/README.md: -------------------------------------------------------------------------------- 1 | ![](http://www.e-learningcenter.com/_ctrl/wp-content/uploads/JavaScript-Fundamentals.png) 2 | 3 | ### Ementa | Fundamentos JavaScript (Básico & Intermediário) 4 | > Monitor: [Renan Johannsen de Paula](http://www.welovedev.com.br/author/renanjpaula) | 5 | > Carga Horária: 20h 6 | 7 | ### Objetivo: 8 | Apresentar a linguagem JavaScript e suas ferramentas em oito cursos que ensinam desde a sintaxe básica da linguagem até orientação a objetos na prática. 9 | 10 | ### Público-alvo: 11 | Programadores iniciantes de JavaScript que saibam programar (lógica de programação). 12 | 13 | 14 | - Introdução; 15 | - Strict Mode; 16 | - Variáveis; 17 | - Tipos de dados; 18 | - Operadores; 19 | - Estruturas de controle; 20 | - Funções; 21 | - Prototype; 22 | - Shadowing; 23 | - Closure; 24 | - Hoisting; 25 | - Namespace; 26 | - Race Condition; 27 | - Promises; 28 | 29 | 30 | ##### Módulo JavaScript Básico e Intermediário 31 | 32 | - [X] [Aula 1 - Introdução, Strict Mode, Variáveis, Hoisting e Tipos de dados](./aula-01/README.md); 33 | - [x] [Aula 2 - Tipos de dados e Objetos](./aula-02/README.md); 34 | - [x] [Aula 3 - Funções (First Class, Higher Order, Function Declaration, Function Expression, Call, Apply, Função Construtora e Closure)](./aula-03/README.md); 35 | - [x] [Aula 4 - Callback, LIFE, Estruturas de Controle e Operadores](./aula-04/README.md); 36 | - [x] [Aula 5 - Prototype e Shadowing](./aula-05/README.md); 37 | -------------------------------------------------------------------------------- /02.MEAN/jobs/api/controllers/company-controller.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const Company = require('../models/company-model'); 4 | const ctrl = {}; 5 | 6 | ctrl.getCompanies = (req, res) => { 7 | Company.get(req.query) 8 | .then((data) => { 9 | res.send(data); 10 | }) 11 | .catch((err) => { 12 | res.status(500).send(err); 13 | }); 14 | }; 15 | 16 | ctrl.getCompany = (req, res) => { 17 | Company.getById(req.params.id) 18 | .then((data) => { 19 | res.send(data); 20 | }) 21 | .catch((err) => { 22 | res.status(500).send(err); 23 | }); 24 | } 25 | 26 | ctrl.saveCompany = (req, res) => { 27 | Company.save(req.body) 28 | .then((data) => { 29 | res.status(201).send(data); 30 | }) 31 | .catch((err) => { 32 | res.status(500).send(err); 33 | }); 34 | }; 35 | 36 | ctrl.updateCompany = (req, res) => { 37 | Company.update(req.params.id, req.body) 38 | .then((data) => { 39 | res.status(200).send(); 40 | }) 41 | .catch((err) => { 42 | res.staus(500).send(err); 43 | }); 44 | } 45 | 46 | ctrl.removeCompany = (req, res) => { 47 | Company.remove(req.params.id) 48 | .then((data) => { 49 | res.status(200).send(data); 50 | }) 51 | .catch((err) => { 52 | res.staus(500).send(err); 53 | }); 54 | } 55 | 56 | module.exports = ctrl; 57 | -------------------------------------------------------------------------------- /02.MEAN/jobs/api/models/company-model.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const mongoose = require('mongoose'); 4 | const schema = new mongoose.Schema({ 5 | name: { 6 | type: String, 7 | required: true 8 | }, 9 | segment: { 10 | type: String, 11 | default: null 12 | }, 13 | email: { 14 | type: String, 15 | required: true 16 | }, 17 | site: { 18 | type: String, 19 | default: null 20 | }, 21 | city: { 22 | type: String, 23 | default: null 24 | }, 25 | tecnologies: { 26 | type: String, 27 | default: null 28 | }, 29 | active: { 30 | type: Boolean, 31 | default: true 32 | } 33 | }); 34 | 35 | const Company = mongoose.model('Company', schema); 36 | 37 | module.exports.get = (query) => { 38 | query.active = true; 39 | return Company.find(query); 40 | } 41 | 42 | module.exports.getById = (_id) => { 43 | let _query = { _id, active: true }; 44 | let _fields = { email: false}; 45 | return Company.findOne(_query, _fields); 46 | }; 47 | 48 | module.exports.save = (company) => { 49 | return new Promise((resolve, reject) => { 50 | new Company(company).save((err, data) => { 51 | if (err) { // the function will execute when it contains error 52 | return reject(err); 53 | } 54 | 55 | resolve({ // the funciton was execute successfully 56 | _id: data._id 57 | }); 58 | }); 59 | }); 60 | } 61 | 62 | module.exports.update = (_id, company) => { 63 | let _query = { _id }; // same as let _query = { _id: _id }; 64 | 65 | return Company.update(_query, company); 66 | }; 67 | 68 | module.exports.remove = (_id) => { 69 | let _query = { _id }; 70 | let _fields = { active: false }; 71 | return Company.update(_query, _fields); 72 | }; 73 | -------------------------------------------------------------------------------- /03.React+Flux/examples/sancajobs/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import logo from './logo.svg'; 3 | import './App.css'; 4 | 5 | import JobList from './JobList'; 6 | import SearchBar from './SearchBar'; 7 | 8 | const jobs = [ 9 | { 10 | "id":1, 11 | "title":"Programador PL Java", 12 | "contract":"CLT", 13 | "type":"Full Time", 14 | "company":"Monitora", 15 | "city":"Sao Carlos", 16 | "state":"SP" 17 | }, 18 | { 19 | "id":2, 20 | "title":"Gerente de Projeto", 21 | "contract":"CLT", 22 | "type":"Full Time", 23 | "company":"Siena Ideia", 24 | "city":"Sao Carlos", 25 | "state":"SP" 26 | }, 27 | { 28 | "id":3, 29 | "title":"Programador Delphi", 30 | "contract":"CLT", 31 | "type":"Part Time", 32 | "company":"Guarani Sistemas", 33 | "city":"Sao Carlos", 34 | "state":"SP" 35 | }, 36 | { 37 | "id":4, 38 | "title":"Programador Mobile iOS", 39 | "contract":"PJ", 40 | "type":"Full Time", 41 | "company":"Minha Vida", 42 | "city":"Sao Carlos", 43 | "state":"SP" 44 | } 45 | ]; 46 | 47 | const jobToString = job => 48 | `${job.title} ${job.company} ${job.city} ${job.state}`.toLowerCase(); 49 | 50 | class App extends Component { 51 | 52 | state = { 53 | search: { 54 | text: '', 55 | isFullTime: false, 56 | }, 57 | }; 58 | 59 | handleChange = search => { 60 | this.setState({ search }); 61 | } 62 | 63 | render() { 64 | const text = this.state.search.text; 65 | console.log(this.state.search.isFullTime); 66 | return ( 67 |
    68 | 72 | 74 | jobToString(job) 75 | .includes(text.toLowerCase()))} 76 | /> 77 |
    78 | ); 79 | } 80 | } 81 | 82 | export default App; 83 | -------------------------------------------------------------------------------- /03.React+Flux/examples/sancajobs/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /02.MEAN/jobs/web/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Jobs 7 | 8 | 9 | 10 | 11 | 12 |
    13 | 37 |
    38 | 39 |
    40 |
    41 | {{error}} 42 |
    43 |
    44 | 45 |
    46 | 47 |
    48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![eflyer](https://d21ii91i3y6o6h.cloudfront.net/gallery_images/from_proof/2236/medium/1413860642/javascript.png) 2 | 3 | 4 | # Trilha JavaScript | Opensanca Developer 5 | 6 | Essa trilha visa oferecer ao participante conhecimentos que irão do básico ao avançado para se tornar um Full-Stack JavaScript Developer. Para tanto, serão abordados desde os fundamentos da linguagem até a imersão nos frameworks mais atuais do mercado, caso não esteja participando da trilha, sinta-se livre para seguir esse material e consolidar vossos estudos para essa linguagem fantástica. 7 | 8 | 9 | ### Objetivo: 10 | Apresentar a linguagem JavaScript e suas ferramentas em oito cursos que ensinam desde a sintaxe básica da linguagem até orientação a objetos na prática com frameworks mais atuais do mercado como React, Angular, Node e Ionic, voltado tanto para Web quanto Mobile. 11 | 12 | ### Público-alvo: 13 | Programadores iniciantes de JavaScript que saibam programar (lógica de programação). 14 | 15 | 16 | ### Pré-requisitos 17 | Para aproveitar todo o potencial deste curso é preciso saber programar em qualquer linguagem como C, Java, PHP e etc, no minimo saber ter lógica de programação, caso não esteja muito familiarizado com lógica poderá pegar no nosso guia de Referencias Bibliográficas material que lhe auxilie nesse processo, durante a trilha estaremos dissecando a linguagem assim como seus frameworks. 18 | 19 | ### Grade: 20 | - JavaScript Básico ECMA 6 - DOM, BOM e Eventos | (Renan Johannsen) - 8h 21 | - JavaScript - Orientação á Objetos | (Renan Johannsen) - 12h 22 | - Node + Express | (Renan Johannsen) - 9h 23 | - MongoDB | (Renan Johannsen) - 4h 24 | - Angular > v1.5 | (Renan Johannsen) -16h 25 | - Ember | (Alex Ferreira) - 8h 26 | - React + Flux | (Guilherme Diego & Vinicius Lemes) - 8h 27 | - Ionic | (Fabian Cabau) - 8h 28 | - Testes Unitários | (William Bruno) - 8h 29 | 30 | ### Carga horária total: 31 | Aproximadamente 80hrs (26 aulas de 2 horas e 40 minutos) 32 | 33 | 34 | ### Como tirar dúvidas? 35 | * Acesse a página/aba com menção á [issues](https://github.com/opensanca/trilha-javascript/issues); 36 | * Pesquise nas issues abertas e fechadas, se a mesma dúvida já foi postada; 37 | * Se não foi, [crie uma nova issue](https://github.com/opensanca/trilha-javascript/issues/new), coloque um título que tenha a ver com a sua dúvida, e descreva-a com o maior nível de detalhes possíveis, para que possamos te ajudar :) 38 | 39 | ### Ide, Editores de texto e afins: 40 | Recomendamos que adote um editor de texto,para facilitar a escrita de seu código livre para usar qualquer editor de texto de sua preferência existem vários no mercado como: 41 | - [Atom](https://atom.io/) 42 | - [Sublime TXT](https://www.sublimetext.com/3) 43 | - [NotePad ++](https://notepad-plus-plus.org/) 44 | - [Brackets](http://brackets.io/) 45 | - [WebStorm](https://www.jetbrains.com/webstorm/) 46 | - [VIM](http://www.vim.org/) 47 | 48 | 49 | 50 | ### Agenda: 51 | ![agenda](http://photos2.meetupstatic.com/photos/event/4/1/c/6/600_453616838.jpeg) 52 | 53 | 54 | 55 | ### Referencia bibliográfica/video-aula: 56 | - [Exploring ES6 - Upgrade to the next version of JavaScript - ebook](http://exploringjs.com/es6/) 57 | - [JavaScript Furtivo - Eric Douglas | ebook](https://leanpub.com/javascriptfurtivo) 58 | - [Eloquent JavaScript - Marijin Haverbeke | ebook](http://braziljs.github.io/eloquente-javascript/) 59 | - [Learning JavaScript Design Patterns - Addy Osmani |ebook](https://addyosmani.com/resources/essentialjsdesignpatterns/book/) 60 | - [Série You Don't Know JavaScript - Kyle Simpson | ebook](https://github.com/getify/You-Dont-Know-JS) 61 | - [Programming JavaScript Applications - Eric Elliot | ebook](http://chimera.labs.oreilly.com/books/1234000000262/index.html) 62 | - [Aprendendo JavaScript - Rodrigo Branas | videoaula](https://www.youtube.com/playlist?list=PLQCmSnNFVYnT1-oeDOSBnt164802rkegc) 63 | - [ECMAScript 2015 - videoaula](https://www.youtube.com/watch?v=vcoMWWVZS7c&list=PLDm7BSK-M5Yk30T65F5yeuCcStOQBPKq2) 64 | - [Aprender Git/Github](https://github.com/opensanca/hello-git) 65 | 66 | 67 | 68 | ### License: 69 | 70 | [MIT | Creative Commons Attribution-NonCommercial-ShareAlike 4.0](https://github.com/opensanca/trilha-javascript/blob/master/LICENSE.md) [Opensanca 2016 71 | -------------------------------------------------------------------------------- /02.MEAN/aula-05/README.md: -------------------------------------------------------------------------------- 1 | # MongoDB 2 | 3 | Nesta aula abordamos as principais características do MongoDB. 4 | Abaixo, segue alguns links e material para apoio. 5 | 6 | ## Video Aulas 7 | 8 | - [Introdução ao MongoDb em vídeo aulas](https://www.portalgsti.com.br/2016/09/introducao-ao-mongodb-em-video-aulas.html); 9 | - [Mongo University](https://university.mongodb.com/); 10 | - [Be MEAN: MongoDB](https://www.youtube.com/playlist?list=PL77JVjKTJT2gXHb9FEokJsPEcoOmyF1pY); 11 | 12 | ## Artigos de Apoio 13 | 14 | Primeiramente vamos entender o são banco de dados não relacionais (famosos NoSql). Basicamente surgiram com o intuito de resolver problemas específicos que os bancos relacionais não conseguem resolver eficientemente devido a estratégia de orquestração dos dados. 15 | 16 | Os bancos de dados não relacionais tem por objetivo: 17 | 18 | - Escalabilidade; 19 | - Adaptabilidade dos dados; 20 | - Facilidade de operação; 21 | 22 | Existem diversos tipos de bancos de dados não relacionais e dentre eles temos: 23 | 24 | - Chave/Valor; 25 | - Documento; 26 | - Grafo; 27 | - Coluna; 28 | - Híbridos; 29 | 30 | MongoDB é um banco de dados schemaless orientado a arquivos projetado para facilitar o desenvolvimento e escalar com eficiência. Basicamente ele concilia a distribuição entre funcionalidades e escalabilidade para maximizar o desempenho e fornecer uma interface de operação fácil e intuitiva. 31 | 32 | A ilustração abaixo mostra a distribuição do mongo dentre os demais banco de dados. 33 | 34 | ![Features vs Scale](./feature-vs-scale.png) 35 | 36 | ## Documentos 37 | 38 | O MongoDB utiliza o formato BSON para armazenamento dos documentos. Na pratica é uma forma de JSON binarizado com a adição de referencias de tipos. Veja mais sobre documentos [aqui](https://docs.mongodb.org/manual/core/document/). 39 | 40 | Os documentos são agrupados por coleções. Fazendo uma analogia aos banco de dados relacionais os documentos seriam as tuplas e as coleções seriam as tabelas. 41 | 42 | ## Schemaless (livre de esquema) 43 | 44 | Os dados no mongo são livres de schema, ou seja, não seguem uma definição prévia como as tabelas dos banco de dados sql. Na pratica em uma coleção de documentos podem haver documentos completamente distintos facilitando a adaptação do banco de dados a mudanças. 45 | 46 | ## Instalação 47 | 48 | Para a realização da instalação clique [aqui](https://docs.mongodb.org/manual/installation/); 49 | 50 | ## Utilização 51 | 52 | Para conseguirmos utilizar o MongoDB primeiramente precisamos iniciar o serviço em background e posteriormente conectar através da interface disponibilizada via shell. 53 | 54 | ```mongodb 55 | sudo service mongod start 56 | ``` 57 | 58 | ```mongodb 59 | mongo 60 | 61 | > MongoDB shell version: 3.2.1 62 | > connecting to: test 63 | > Mongo-Hacker 0.0.9 64 | > Server has startup warnings: 65 | > 2016-01-29T20:06:49.198-0200 I CONTROL [initandlisten] 66 | > 2016-01-29T20:06:49.198-0200 I CONTROL [initandlisten] ** WARNING: /sys/kernel/mm/transparent_hugepage/enabled is 'always'. 67 | > 2016-01-29T20:06:49.198-0200 I CONTROL [initandlisten] ** We suggest setting it to 'never' 68 | > 2016-01-29T20:06:49.198-0200 I CONTROL [initandlisten] ** WARNING: /sys/kernel/mm/transparent_hugepage/defrag is 'always'. 69 | > 2016-01-29T20:06:49.198-0200 I CONTROL [initandlisten] ** We suggest setting it to 'never' 70 | > 2016-01-29T20:06:49.198-0200 I CONTROL [initandlisten] 71 | > Inspiron-5548(mongod-3.2.1) test> 72 | ``` 73 | 74 | Para facilitar a utilização do mongo pelo show podemos adicionao o [mongo-hacker](https://github.com/TylerBrock/mongo-hacker). 75 | 76 | ## Operações 77 | 78 | As operações são realizadas sobre os arquivos das coleções de um determinado banco de dados. Para a seleção de um banco de dados utilizamos a palavra reservada **use**. Um banco de dados ou uma coleção são criados a partir da primeira operação sobre os mesmos. 79 | 80 | Ao referenciarmos um banco de dados através do comando **use** o mesmo é atribuido a variável **db**. 81 | 82 | Exemplo: 83 | 84 | ```mongodb 85 | use escola 86 | db 87 | > escola 88 | ``` 89 | 90 | Para exibir os bancos de dados e as coleções existentes utilizamos o comando **show**. 91 | 92 | Exemplo: 93 | 94 | ```mongodb 95 | show dbs 96 | ``` 97 | 98 | ```mongodb 99 | use escola 100 | show collections 101 | ``` 102 | 103 | ### Materual 104 | 105 | Para fins didáticos utilizaremos como material do curso o próprio [manual do mongo](https://docs.mongodb.org/manual/) uma vez que o mesmo é bem completo e didático. 106 | 107 | ## Saiba mais 108 | 109 | A seguir encontra-se uma lista de materiais relacionados e indicados para o estudo: 110 | 111 | - [Manual](https://docs.mongodb.org/manual/); 112 | -------------------------------------------------------------------------------- /02.MEAN/aula-04/README.md: -------------------------------------------------------------------------------- 1 | # MongoDB e Mongoose 2 | 3 | Nesta aula abordamos as principais características do MongoDB. 4 | 5 | Abaixo, segue alguns links e material para apoio. 6 | 7 | ## Video Aulas 8 | 9 | - [Introdução ao MongoDb em vídeo aulas](https://www.portalgsti.com.br/2016/09/introducao-ao-mongodb-em-video-aulas.html); 10 | - [Mongo University](https://university.mongodb.com/); 11 | - [Be MEAN: MongoDB](https://www.youtube.com/playlist?list=PL77JVjKTJT2gXHb9FEokJsPEcoOmyF1pY); 12 | 13 | ## Artigos de Apoio 14 | 15 | Primeiramente vamos entender o são banco de dados não relacionais (famosos NoSql). Basicamente surgiram com o intuito de resolver problemas específicos que os bancos relacionais não conseguem resolver eficientemente devido a estratégia de orquestração dos dados. 16 | 17 | Os bancos de dados não relacionais tem por objetivo: 18 | 19 | - Escalabilidade; 20 | - Adaptabilidade dos dados; 21 | - Facilidade de operação; 22 | 23 | Existem diversos tipos de bancos de dados não relacionais e dentre eles temos: 24 | 25 | - Chave/Valor; 26 | - Documento; 27 | - Grafo; 28 | - Coluna; 29 | - Híbridos; 30 | 31 | MongoDB é um banco de dados schemaless orientado a arquivos projetado para facilitar o desenvolvimento e escalar com eficiência. Basicamente ele concilia a distribuição entre funcionalidades e escalabilidade para maximizar o desempenho e fornecer uma interface de operação fácil e intuitiva. 32 | 33 | A ilustração abaixo mostra a distribuição do mongo dentre os demais banco de dados. 34 | 35 | ![Features vs Scale](./feature-vs-scale.png) 36 | 37 | ## Documentos 38 | 39 | O MongoDB utiliza o formato BSON para armazenamento dos documentos. Na pratica é uma forma de JSON binarizado com a adição de referencias de tipos. Veja mais sobre documentos [aqui](https://docs.mongodb.org/manual/core/document/). 40 | 41 | Os documentos são agrupados por coleções. Fazendo uma analogia aos banco de dados relacionais os documentos seriam as tuplas e as coleções seriam as tabelas. 42 | 43 | ## Schemaless (livre de esquema) 44 | 45 | Os dados no mongo são livres de schema, ou seja, não seguem uma definição prévia como as tabelas dos banco de dados sql. Na pratica em uma coleção de documentos podem haver documentos completamente distintos facilitando a adaptação do banco de dados a mudanças. 46 | 47 | ## Instalação 48 | 49 | Para a realização da instalação clique [aqui](https://docs.mongodb.org/manual/installation/); 50 | 51 | ## Utilização 52 | 53 | Para conseguirmos utilizar o MongoDB primeiramente precisamos iniciar o serviço em background e posteriormente conectar através da interface disponibilizada via shell. 54 | 55 | ```mongodb 56 | sudo service mongod start 57 | ``` 58 | 59 | ```mongodb 60 | mongo 61 | 62 | > MongoDB shell version: 3.2.1 63 | > connecting to: test 64 | > Mongo-Hacker 0.0.9 65 | > Server has startup warnings: 66 | > 2016-01-29T20:06:49.198-0200 I CONTROL [initandlisten] 67 | > 2016-01-29T20:06:49.198-0200 I CONTROL [initandlisten] ** WARNING: /sys/kernel/mm/transparent_hugepage/enabled is 'always'. 68 | > 2016-01-29T20:06:49.198-0200 I CONTROL [initandlisten] ** We suggest setting it to 'never' 69 | > 2016-01-29T20:06:49.198-0200 I CONTROL [initandlisten] ** WARNING: /sys/kernel/mm/transparent_hugepage/defrag is 'always'. 70 | > 2016-01-29T20:06:49.198-0200 I CONTROL [initandlisten] ** We suggest setting it to 'never' 71 | > 2016-01-29T20:06:49.198-0200 I CONTROL [initandlisten] 72 | > Inspiron-5548(mongod-3.2.1) test> 73 | ``` 74 | 75 | Para facilitar a utilização do mongo pelo show podemos adicionao o [mongo-hacker](https://github.com/TylerBrock/mongo-hacker). 76 | 77 | ## Operações 78 | 79 | As operações são realizadas sobre os arquivos das coleções de um determinado banco de dados. Para a seleção de um banco de dados utilizamos a palavra reservada **use**. Um banco de dados ou uma coleção são criados a partir da primeira operação sobre os mesmos. 80 | 81 | Ao referenciarmos um banco de dados através do comando **use** o mesmo é atribuido a variável **db**. 82 | 83 | Exemplo: 84 | 85 | ```mongodb 86 | use escola 87 | db 88 | > escola 89 | ``` 90 | 91 | Para exibir os bancos de dados e as coleções existentes utilizamos o comando **show**. 92 | 93 | Exemplo: 94 | 95 | ```mongodb 96 | show dbs 97 | ``` 98 | 99 | ```mongodb 100 | use escola 101 | show collections 102 | ``` 103 | 104 | ### Materual 105 | 106 | Para fins didáticos utilizaremos como material do curso o próprio [manual do mongo](https://docs.mongodb.org/manual/) uma vez que o mesmo é bem completo e didático. 107 | 108 | ## Saiba mais 109 | 110 | A seguir encontra-se uma lista de materiais relacionados e indicados para o estudo: 111 | 112 | - [Manual](https://docs.mongodb.org/manual/); 113 | -------------------------------------------------------------------------------- /01.JavaScript/aula-01/README.md: -------------------------------------------------------------------------------- 1 | # Strict Mode, Variáveis e Hoisting 2 | 3 | Nesta aula abordamos os conceitos iniciais da linguagem junto de características de extrema importância. 4 | Abaixo, segue alguns links e material para apoio. 5 | 6 | ## Artigos 7 | 8 | We Love Dev: 9 | - [Zero to Hero JavaScript - Variáveis](http://www.welovedev.com.br/post/zero-to-hero-javascript-variaveis) 10 | - [Zero to Hero JavaScript - Hoisting](http://www.welovedev.com.br/post/zero-to-hero-javascript-hoisting) 11 | - [Zero to Hero JavaScript - Strict mode](http://www.welovedev.com.br/post/zero-to-hero-javascript-strict-mode) 12 | 13 | Cristofer Sousa: 14 | - [Hello JavaScript aka ES6!](http://cristofersousa.github.io/javascript,/node/hello-javascript) 15 | 16 | ## Video Aulas 17 | 18 | Rodrigo Branas: 19 | - [Desvendando a linguagem JavaScript - #1 - Introdução](https://www.youtube.com/watch?v=093dIOCNeIc&index=1&list=PLQCmSnNFVYnT1-oeDOSBnt164802rkegc) 20 | - [Desvendando a linguagem JavaScript - #2 - Number](https://www.youtube.com/watch?v=-4Er-sZoxHM&index=2&list=PLQCmSnNFVYnT1-oeDOSBnt164802rkegc) 21 | - [Desvendando a linguagem JavaScript - #3 - String](https://www.youtube.com/watch?v=c3vaqf9x1PQ&index=3&list=PLQCmSnNFVYnT1-oeDOSBnt164802rkegc) 22 | - [Desvendando a linguagem JavaScript - #4 - Boolean](https://www.youtube.com/watch?v=oP2ProYre4k&index=4&list=PLQCmSnNFVYnT1-oeDOSBnt164802rkegc) 23 | - [Desvendando a linguagem JavaScript - #5 - undefined e null](https://www.youtube.com/watch?v=dhaLnhvOyFc&index=5&list=PLQCmSnNFVYnT1-oeDOSBnt164802rkegc) 24 | 25 | Aulas de Programação: 26 | - [Dicas Javascript - Ep01: Hoisting](https://www.youtube.com/watch?v=JGpekHQ_9kY) 27 | - [ECMAScript 2015 (ES6) - Aula 03: Let e Const](https://www.youtube.com/watch?v=noJ2G56b7rs) 28 | - [ECMAScript 2015 (ES6) - Aula 04: Let e Const (Parte 2)](https://www.youtube.com/watch?v=ewbkvH3cGaw) 29 | 30 | # Artigo de apoio: 31 | 32 | ### Introdução 33 | 34 | JavaScript é uma linguagem case sensitive e fracamente tipada, ou seja, não é necessário especificar explicitamente o tipo de uma variável em sua declaração. Entretanto, um ponto importante que deve ser frisado é que JavaScript possue tipos que são definidos e convertidos durante da execução dos scripts. 35 | 36 | ### Declaração de variáveis 37 | Para a declaração de variáveis é necessário utilizar as palavras chaves var, let ou const onde as mesmas delimitarão o escopo (que entenderemos adiante) e o comportamento da variável. 38 | 39 | Exemplo: 40 | 41 | > var organizacao = 'Opensanca'; 42 | 43 | > console.log(organizacao); 44 | 45 | > /* Saída no terminal será: */ 46 | 47 | > $ Opensanca 48 | 49 | Se uma variável for declarada fora do modo estrito da linguagem sem a utilização de ***var, let ou const*** a mesma será disponibilizada no escopo global. Este é um comportamento que muitas vezes não é desejado, portanto é de suma importância conhecer e utilizar o modo estrito da linguagem. Para saber mais sobre recomendo a leitura do artigo Strict Mode disponível aqui no blog. 50 | 51 | Vale ressaltar que let e const são funcionalidades adicionadas na ECMAScript 2015 (ES6) portanto é preciso ficar atento com a compatibilidade dos navegadores ou da versão do Nodejs utilizada em seu projeto. 52 | 53 | Variáveis declaradas com const, como o próprio nome diz, possuem comportamento de constantes e devem ser inicializadas em sua declaração, pois, em casos de modo restrito, a exceção SyntaxError será lançada. Não confundam constantes com objetos imutáveis. Em artigos futuros abordaremos melhor a diferença entre ambos. 54 | 55 | ### Hoisting 56 | 57 | Antes de entendermos os escopos e como as variáveis se comportam perante o seu contexto, é imprescindível a compreensão do comportamento de Hoisting. 58 | 59 | Em resumo, todas as declarações, seja de variáveis ou funções, são processadas e elevadas para o topo do arquivo ou da função antes que qualquer código seja executado. 60 | 61 | Observe os códigos abaixo. 62 | 63 | Código "original" onde uma variável foi declarada e atribuído um valor qualquer a mesma dentro de um bloco: 64 | 65 | ``` 66 | { 67 | var organizacao = 'Opensanca | JavaScript Full Stack'; 68 | } 69 | 70 | console.log(name); 71 | 72 | // $ Opensanca | JavaScript Full Stack 73 | 74 | ``` 75 | 76 | Devido ao comportamento de Hoisting a declaração é elevada ao topo do arquivo e a atribuição do valor é mantida dentro do bloco resultando em: 77 | 78 | > var name; 79 | 80 | ``` 81 | { 82 | name = 'Trilha Opensanca Developer | Full Stack JavaScript'; 83 | } 84 | ``` 85 | 86 | > console.log(name); 87 | 88 | > // $ Trilha Opensanca Developer | Full Stack JavaScript 89 | 90 | Vale salientar que variáveis definidas com let ou const ***"não sofrem hoisting"***. 91 | 92 | Caso possua dúvidas sobre este comportamento, fica aqui uma sugestão do artigo sobre Hoisting postado no blog ou este vídeo do canal Aulas de Programação. 93 | 94 | *** Escopos: *** 95 | Existem 3 escopos em que as variáveis podem ser disponibilizadas: 96 | 97 | *** Global: *** 98 | Variáveis declaradas com var fora de funções compõe o escopo global e podem ser acessadas livremente. Exemplo: 99 | 100 | ``` 101 | { 102 | // Como não há função, a declaração dentro do bloco sofre 103 | // hoisting e a variável definida com var assume o escopo global 104 | var name = 'Trilha Opensanca Developer | Full Stack JavaScript'; 105 | } 106 | ``` 107 | > console.log(name); 108 | 109 | > // $ Trilha Opensanca Developer | Full Stack JavaScript 110 | 111 | ### Local (Função) 112 | Variáveis declaradas com var dentro de funções ficam disponíveis localmente dentro do escopo da função. Exemplo: 113 | 114 | ``` 115 | function scope() { 116 | var name = 'Trilha Opensanca Developer | Full Stack JavaScript'; 117 | console.log(name); 118 | // $ Trilha Opensanca Developer | Full Stack JavaScript 119 | } 120 | 121 | scope(); 122 | 123 | console.log(name); 124 | // $ ReferenceError: name is not defined 125 | 126 | ``` 127 | ### Bloco 128 | Variáveis declaradas com let e const possuem escopo de bloco, ou seja, são vigentes a partir do bloco em que foram declaradas. Exemplo: 129 | ``` 130 | { 131 | let name = 'Trilha Opensanca Developer | Full Stack JavaScript'; 132 | console.log(name); 133 | // $ Trilha Opensanca Developer | Full Stack JavaScript 134 | } 135 | 136 | console.log(name); 137 | // $ ReferenceError: name is not defined 138 | 139 | ``` 140 | A compreensão plena dos escopos é extremamente importante para evitar comportamentos inesperados e manter nosso código consistente. 141 | 142 | ### Convenções 143 | Para a nomeação de variáveis existem algumas regras que devemos seguir. Há também algumas convenções que podemos adotar para compreendermos certos aspectos do nosso código só de olhar para o nome das variáveis. Dentre elas estão: 144 | 145 | Variáveis devem começar com ***letra, _ ou $***. 146 | 147 | - Utilização do padrão CamelCase. UpperCamelCase para funções construtoras. 148 | - Utiliação do padrão lowerCamelCase para variáveis convencionais. 149 | - Constantes declaradas com CAPITAL_CASING. 150 | - Variáveis locais iniciadas com _. 151 | - Variáveis iniciadas com $ reservadas a frameworks, como o AngularJS e jQuery. 152 | 153 | É claro que dependendo do contexto e da equipe, podem ser adotadas novas convenções ou padrões, o importante é manter a uniformidade do projeto. 154 | 155 | ###### [Material adaptado Zero to Hero JavaScript by Renan Johannsen](http://www.welovedev.com.br/post/zero-to-hero-javascript-variaveis) 156 | -------------------------------------------------------------------------------- /01.JavaScript/aula-02/README.md: -------------------------------------------------------------------------------- 1 | # Tipos de dados e Objetos 2 | 3 | Nesta aula abordamos os tipos primitivos de dados e algumas características dos objetos em JavaScript. 4 | 5 | Segue alguns links e material para apoio: 6 | 7 | ## Artigos 8 | 9 | We Love Dev: 10 | - [Zero to Hero JavaScript - Tipos de Dados](http://www.welovedev.com.br/post/zero-to-hero-javascript-tipos-de-dados) 11 | 12 | ## Video Aulas 13 | 14 | Rodrigo Branas: 15 | 16 | - [Desvendando a linguagem JavaScript - #2 - Number](https://www.youtube.com/watch?v=-4Er-sZoxHM&index=2&list=PLQCmSnNFVYnT1-oeDOSBnt164802rkegc) 17 | - [Desvendando a linguagem JavaScript - #3 - String](https://www.youtube.com/watch?v=c3vaqf9x1PQ&index=3&list=PLQCmSnNFVYnT1-oeDOSBnt164802rkegc) 18 | - [Desvendando a linguagem JavaScript - #4 - Boolean](https://www.youtube.com/watch?v=oP2ProYre4k&index=4&list=PLQCmSnNFVYnT1-oeDOSBnt164802rkegc) 19 | - [Desvendando a linguagem JavaScript - #5 - undefined e null](https://www.youtube.com/watch?v=dhaLnhvOyFc&index=5&list=PLQCmSnNFVYnT1-oeDOSBnt164802rkegc) 20 | - [Desvendando a linguagem JavaScript - #6 - Object](https://www.youtube.com/watch?v=A_E-K69j93Q&index=6&list=PLQCmSnNFVYnT1-oeDOSBnt164802rkegc) 21 | 22 | Aulas de Programação: 23 | - [Dicas Javascript - Ep03: Objetos e JSON](https://www.youtube.com/watch?v=Bndsk0N_LAk) 24 | 25 | ## Exemplos dados na aula: 26 | - [Exemplo 01 - Boolean](https://github.com/opensanca/trilha-javascript/blob/master/01.JavaScript/aula-02/exemplo-01-boolean.js) 27 | - [Exemplo 02 - Object](https://github.com/opensanca/trilha-javascript/blob/master/01.JavaScript/aula-02/exemplo-02-object.js) 28 | - [Exemplo 03 - Object](https://github.com/opensanca/trilha-javascript/blob/master/01.JavaScript/aula-02/exemplo-03-object.js) 29 | - [Exemplo 04 - Função](https://github.com/opensanca/trilha-javascript/blob/master/01.JavaScript/aula-02/exemplo-04-funcao.js) 30 | - [Exemplo 05 - Object](https://github.com/opensanca/trilha-javascript/blob/master/01.JavaScript/aula-02/exemplo-05-object.js) 31 | - [Exemplo 06 - Funções com Object](https://github.com/opensanca/trilha-javascript/blob/master/01.JavaScript/aula-02/exemplo-06-object-funcao.js) 32 | 33 | ## Exercícios de fixação: 34 | - [Exercício 01](https://github.com/opensanca/trilha-javascript/blob/master/01.JavaScript/aula-02/exercicio-01.js) 35 | - [Exercício 02](https://github.com/opensanca/trilha-javascript/blob/master/01.JavaScript/aula-02/exercicio-02.js) 36 | - [Exercício 03](https://github.com/opensanca/trilha-javascript/blob/master/01.JavaScript/aula-02/exercicio-03.js) 37 | 38 | # Artigo de apoio: 39 | 40 | ## Tipos de dados em JavaScript 41 | 42 | O padrão ECMAScript atual define 7 tipos de dados, sendo 6 primitivos e Object. 43 | 44 | Lista dos tipos primitivos: 45 | - Boolean 46 | - null 47 | - undefined 48 | - Number 49 | - String 50 | - Synbol 51 | 52 | Como o JavaScript é uma linguagem dinamicamente tipada os tipos de dados são convertidos automaticamente durante a execução do script. Isso permite a utilização de uma mesma variável para a atribuição de dois tipos distintos de dados. 53 | 54 | Exemplo: 55 | 56 | ```js 57 | let value = 'Eu sou um texto'; 58 | value = 10; 59 | ``` 60 | 61 | Outro ponto interessante relacionado a conversão automática é que quanto empregamos o operador de soma em expressões que envolvam valores String e Number o Number é convertido para String, já para os demais operadores como subtração, multiplicação ou divisão a String é convertida para Number. 62 | 63 | Exemplo: 64 | 65 | ```js 66 | '22' + 2; 67 | > '222' 68 | 69 | '22' - 2; 70 | > 20 71 | ``` 72 | 73 | Para cenários em que precisamos converter uma String para Number podemos utilizar dois métodos **parseInt(String, base)** onde o parâmetro base é opicional e indica o sistema numérico a ser utilizado e **parseFloat(String)**. 74 | 75 | A seguir encontra-se um pouco mais sobre os tipos de dados. 76 | 77 | ### Boolean 78 | 79 | O tipo boolean é o tipo mais simples de dados e o mesmo possui dois valores literais (true/false) além do wrapper [Boolean](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Boolean). 80 | 81 | Um ponto importante sobre o JavaScript é que as seguintes expressões são evaluadas como false: 82 | 83 | - false 84 | - 0 85 | - '' 86 | - "" 87 | - NaN 88 | - null 89 | - undefined 90 | - 'false' 91 | - "false" 92 | 93 | Exemplo: 94 | 95 | ```js 96 | if(!("Não é um número" - 22)) { // equivalente a !NaN 97 | console.log('entrou!'); 98 | } 99 | 100 | > 'entrou!' 101 | ``` 102 | 103 | ## null 104 | 105 | Em JavaScript **null** é o tipo primitivo que indica a ausencia de valor. 106 | 107 | ## undefined 108 | 109 | Em JavaScript **undefined** representa a inexistência de uma determinada propriedade. 110 | 111 | ## Number 112 | 113 | Em JavaScript todos os números são agrupados pelo tipo Number. Além de representar os números o mesmo possui três valores simbólicos, **+Infinity**, **-Infinity** e **NaN**. Isso mesmo, por mais incrível que pareça, typeof NaN é Number! 114 | 115 | Um ponto de atenção é que o JavaScript bem como outras linguagens utilizam o padrão [Double Precision 64-bit binary format IEEE 754](https://en.wikipedia.org/wiki/Double-precision_floating-point_format) para representação dos números e devemos tomar alguns cuidados. 116 | 117 | Exemplo: 118 | 119 | ```js 120 | 0.1 + 0.2; 121 | > 0.30000000000000004 122 | ``` 123 | 124 | O "00000000000000004" é um residuo decorrente da operação binária. Veja mais [aqui](http://0.30000000000000004.com/). 125 | 126 | Para compreender e utilizar as principais funções de manipulação de números em JavaScript veja [aqui](http://www.w3schools.com/js/js_number_methods.asp) e para compreender a Math Api veja [aqui](http://www.w3schools.com/jsref/jsref_obj_math.asp). 127 | 128 | ## Synbol 129 | 130 | Definido na ECMAScript 6, representa um tipo de dado cuja as instancias são imutáveis e únicas. Para mais informações veja [aqui](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Symbol). 131 | 132 | ## String 133 | 134 | Strings são compostas por um conjunto de caracteres e representam um texto, são objetos imutaveis e sua declaração se dá a partir de aspas duplas ou aspas simples. 135 | 136 | Para saber mais sobre os métodos que o Wrapper fornece veja [aqui](http://www.w3schools.com/jsref/jsref_obj_string.asp). 137 | 138 | ## Object 139 | 140 | Em JavaScript não temos classes, construtor ou métodos. Objetos são estruturas de dados dinâmicas de chave valor que comportam qualquer tipo de dados. 141 | 142 | Construção literal de um objeto: 143 | 144 | ```js 145 | 146 | var pessoa = {}; 147 | 148 | ``` 149 | 150 | A qualquer momento podemos adicionar e remover propriedades de um determinado Objeto. 151 | 152 | Exemplo: 153 | 154 | ```js 155 | 156 | var pessoa = { 157 | nome: 'Renan' 158 | }; 159 | 160 | pessoa.idade = 24; 161 | 162 | delete pessoa.nome 163 | 164 | ``` 165 | 166 | Propriedades de um determinado objeto podem ser outros objetos bem como funções. 167 | 168 | Exemplo: 169 | 170 | ```js 171 | 172 | var pessoa = { 173 | nome: 'Renan', 174 | endereco: { 175 | logradouro: 'José Inocencio de Camargo Lima Filho', 176 | numero: '223' 177 | }, 178 | falar: function() { 179 | console.log('Falar o que?'); 180 | } 181 | }; 182 | 183 | pessoa.falar(); 184 | 185 | > Falar o que? 186 | 187 | ``` 188 | 189 | Pelo fato dos objetos em JavaScript serem uma coleção de dados, podemos acessar seus valores através da notação de array. 190 | 191 | Este tipo de notação se mostra muito útil quando precisamos acessar dinâmicamente as propriedades dos objetos. 192 | 193 | Exemplo: 194 | 195 | ```js 196 | 197 | var pessoa = { 198 | nome: 'Renan', 199 | } 200 | 201 | pessoa['idade'] = 24; 202 | 203 | for (var prop in pessoa) { 204 | console.log( pessoa[prop] ); 205 | } 206 | 207 | > Renan 208 | > 24 209 | 210 | ``` 211 | -------------------------------------------------------------------------------- /02.MEAN/aula-02/README.md: -------------------------------------------------------------------------------- 1 | # HTTP e Rest; 2 | 3 | Nesta aula abordamos HTTP e REST. 4 | 5 | Abaixo, segue alguns links e material para apoio. 6 | 7 | ## Video Aulas 8 | 9 | Rodrigo Branas: 10 | - [Node.js - #6 - Core Modules - net](https://youtu.be/sx36tuCzUOE?list=PLQCmSnNFVYnTFo60Bt972f8HA4Td7WKwq) 11 | - [Node.js - #7 - Core Modules - http - Parte 1](https://youtu.be/Pp3OCaOCeWk?list=PLQCmSnNFVYnTFo60Bt972f8HA4Td7WKwq) 12 | - [Node.js - #8 - Core Modules - http - Parte 2](https://youtu.be/-TVny5Dxw-I?list=PLQCmSnNFVYnTFo60Bt972f8HA4Td7WKwq) 13 | 14 | # Artigo de apoio 15 | 16 | ## HTTP 17 | 18 | O protocolo HTTP (Hypertext Transfer Protocol) é um protocolo de comunicação entre cliente e servidor. 19 | 20 | Basicamente ele funciona através de Requisições (Request) por parte dos clientes e Respostas (Response) por parte do servidor. 21 | 22 | As requisições e suas respectivas respostas seguem os padrões definidos na [RFC2616](https://tools.ietf.org/html/rfc2616). 23 | 24 | Mais especificamente as requisições possuem o seguinte padrão: 25 | 26 | ### Linha inicial (request line) 27 | 28 | A linha inicial é composta de três partes, separadas por espaço, que especificam o método a ser executado, a identificação do recurso (URI) e a versão do protocolo utilizada. 29 | 30 | Exemplo: 31 | 32 | ```http 33 | POST http://www.minhaapi.com.br/v1/cliente HTTP/1.1 34 | ``` 35 | 36 | Basicamente o método detalha o processamento que será efetuado sobre um determinado recurso, a URI identifica o recurso alvo deste processamento e a versão do protocolo especifica a forma de computação da requisição. 37 | 38 | ### Cabeçalho (request header); 39 | 40 | É responsável por transferir informações adicionais entre o cliente e o servidor. Uma estrutura chave-valor, opcional, especificada logo após a request line. 41 | 42 | Exemplo: 43 | 44 | ```http 45 | POST http://www.minhaapi.com.br/v1/cliente HTTP/1.1 46 | Accept: application/json; charset=utf-8 47 | Accept-Language: pt 48 | Content-Type: application/json; charset=utf-8 49 | ``` 50 | 51 | O header basicamente detalha os metadados da requisição. 52 | 53 | ### Corpo da requisição (request body) 54 | 55 | Alguns métodos do protocolo HTTP permitem o envio de dados para o servidor através do body da requisição. 56 | 57 | É obrigatório a inserção de uma linha em branco entre o header e o body. 58 | 59 | Exemplo: 60 | 61 | ```http 62 | POST http://www.minhaapi.com.br/v1/cliente HTTP/1.1 63 | Accept: application/json; charset=utf-8 64 | Accept-Language: pt 65 | Content-Type: application/json; charset=utf-8 66 | Content-Length: 39 67 | 68 | { "nome" : "Renan Johannsen de Paula" } 69 | ``` 70 | 71 | ### Métodos (request methods) 72 | 73 | Os métodos de uma requisição indicam a ação a ser realizada sobre um determinado recurso. 74 | 75 | Abaixo estão listados os oito métodos suportados pelo protocolo, bem como o seus respectivos objetivos: 76 | 77 | #### OPTIONS 78 | 79 | O método **OPTIONS** consulta os métodos suportados para um determinado recurso do servidor, ou seja, retorna a lista de operações aceitas sobre um determinado recurso. 80 | 81 | Este método é muito útil pois pode ser utilizado e explorado pelos desenvolvedores na construção de robos e na documentação de APIs. 82 | 83 | #### GET 84 | 85 | O método **GET**, como o nome já diz, tem por objetivo a obtenção de um determinado recurso. Por exemplo, se realizarmos um GET sobre a URI **http://www.minhaapi.com.br/v1/clientes** espera-se que o servidor retorne a lista de clientes. 86 | 87 | O método GET é considerado um método **"seguro"**, pois semanticamente esta operação serve apenas para consultas, ou seja, o recurso consultado não sofre alteração. Dado a esta característica o método GET não permite o envio de um body na requisição, pois nenhum dado será inserido ou alterado. 88 | 89 | Sempre que entramos em um website pelo nosso navegador o mesmo efetua uma operação de GET para a obtenção do HTML a ser exibido. 90 | 91 | #### HEAD 92 | 93 | O método **HEAD** é uma variação do método GET onde o body da resposta não é retornada, ou seja, serve para a verificação dos cabeçalhos e do status code retornado pelo servidor. Pode ser utilizado para a validação de um determinado recurso, por exemplo, se um determinado cliente existe. 94 | 95 | #### POST 96 | 97 | O método **POST** serve para o processamento de uma determinada ação e dentre bem como a inclusão de novos registros. 98 | 99 | Por exemplo, ao efetuarmos um POST sobre a URI **http://www.minhaapi.com.br/v1/cliente** um novo cliente será *"inserido"* na base de dados. 100 | 101 | Este método não é considerado **"Seguro"** uma vez que o mesmo cria ou computa ações sobre recursos do servidor. 102 | 103 | #### PUT 104 | 105 | O método **PUT** tem por objetivo alterar um determinado recurso do servidor. Por exemplo, ao efetuar um PUT sobre a URI **http://www.minhaapi.com.br/v1/cliente/10** o cliente cujo ID 10, especificado na URL, será alterado mediante as informações passadas no body. 106 | 107 | #### DELETE 108 | 109 | O método **DELETE** tem por objetivo excluir um determinado recurso do servidor. Por exemplo, ao efetuar um DELETE sobre a URI **http://www.minhaapi.com.br/v1/cliente/10** o cliente cujo ID 10, especificado na URL, será excluído. 110 | 111 | 112 | #### TRACE 113 | 114 | Ecoa o pedido, de maneira que o cliente possa saber o que os servidores intermediários estão mudando em sua requisição. 115 | 116 | #### CONNECT 117 | 118 | Serve para uso com um proxy que possa se tornar um túnel SSL (um túnel pode ser usado, por exemplo, para criar uma conexão segura). 119 | 120 | ### Envio de parâmetros e informações 121 | 122 | Existem diversas formas de enviarmos parâmetros e informações para o servidor. Abaixo entenderemos cada uma delas e sua utilização adequada. 123 | 124 | #### URI 125 | 126 | Podemos enviar parâmetros para o servidor na composição das URIs. 127 | 128 | Por exemplo, identificar de um determinado recurso: **http://www.minhaapi.com.br/v1/cliente/10**. 129 | 130 | #### Query String 131 | 132 | Ao compormos nossa URL podemos passar parâmetros através de uma Query String. Por exemplo, podemos solicitar através de um GET todos os clientes cujo nome é "Renan" e idade de "24" anos: **http://www.minhaapi.com.br/v1/clientes?nome=Renan&idade=24**. 133 | 134 | Reparem que a query começa a partir do **"?"** e que os parâmetros são especificados através de chave valor e separados por **"&"**. 135 | 136 | Obs: O conceito fundamental em utilizar a URI e URL para passarmos parâmetros é a ideia de que, ao copiarmos a URL em outro navegador, ou enviarmos para um amigo, o mesmo recurso será recuperado. 137 | 138 | #### Header 139 | 140 | A ideia de se utilizar o header para passagem de parâmetros, é a de enviar metadados sobre a nossa requisição, bem como informações únicas como o token de autenticação. 141 | 142 | Por exemplo, enviar o tipo de dado que aceito como resposta. 143 | 144 | #### Body 145 | 146 | Em alguns métodos o body não está disponível, entretanto o objetivo dele é enviar os dados a serem computados durante a requisição. 147 | 148 | Por exemplo, ao realizarmos um PUT na URI **"http://www.minhaapi.com.br/v1/cliente/10"** o body deve conter as informações a serem alteradas no recurso. 149 | 150 | 151 | ### Response 152 | 153 | Para cada requisição há uma resposta por parte do host (servidor). As respostas são parecidas com as requisições e possuem uma linha inicial (status-line), cabeçalho (response header) e um possível body. 154 | 155 | A status line é composta pela versão do protocolo HTTP, um código de status (status-code) da resposta, e uma descrição do código do status (reason-phrase). 156 | 157 | O **Status-Code** indica qual o resultado obtido após a computação da requisição. Os status são divididos em famílias e cada família possui uma semântica própria. 158 | 159 | Dentre as famílias estão: 160 | 161 | | Família | Resultado | 162 | | ---------- | ------------- | 163 | | 1xx | Informativo | 164 | | 2xx | Sucesso | 165 | | 3xx | Redirecionamento | 166 | | 4xx | Erro de cliente | 167 | | 5xx | Outros erros | 168 | 169 | Exemplos: 170 | - Se uma requisição retornar **200** como status code significa que tudo foi computado devidamente. 171 | - Se uma requisição retornar **404** quer dizer que o recurso especificado pelo cliente não foi encontrado. 172 | - Se uma requisição retornar **500** quer dizer que um erro inesperado aconteceu no servidor. 173 | 174 | ## REST 175 | 176 | O REST (Transferência de Estado Representacional) é um conjunto de princípios arquiteturais que tem por objetivo a criação de APIs semânticas e padronizadas, aproveitando as funcionalidades disponíveis no protocolo HTTP. 177 | 178 | Parece meio óbvio utilizar as funcionalidades disponíveis no protocolo entretanto a grande parte dos desenvolvedores não conhecem bem o suficiente o protocolo e acabam utilizando o mesmo de forma inadequada. 179 | 180 | Exemplos clássicos do mau uso do protocolo: 181 | - Métodos get que alteram o estado do servidor; 182 | - Despadronização do aceso aos recursos; 183 | - Utilização do POST para a execução de todos os tipos de operações; 184 | - Utilização incorreta dos códigos de status; 185 | 186 | O REST vem frisar os recursos disponíveis no protocolo HTTP e nos auxiliar com a especificação de um conjunto de princípios, listados abaixo, para a criação APIs padronizadas e semânticas. 187 | 188 | ### Princípios 189 | 190 | - Manter a comunicação cliente-servidor livre de estado, ou seja, as requisições HTTP devem conter todos os insumos necessários para o processamento da mesma. Em outras palavras evite ao máximo a utilização de sessão. 191 | - Utilização adequada dos métodos suportados pelo protocolo HTTP. Exemplo: dado um determinado recurso, como **http://www.minhaapi.com.br/v1/cliente/** implicitamente sabemos que se fizermos um post sobre ele, estaríamos realizando a inserção de um novo cliente passado no body; Se executarmos um GET em **http://www.minhaapi.com.br/v1/cliente/10** o resultado esperado é a obtenção do cliente cujo id é 10 e assim por diante. 192 | - Padronização da identificação dos recursos, como **"/cliente"**, **"/usuário"** etc. 193 | - Utilização de hipermídia para interligar as operações. Exemplo, ao inserirmos um cliente, retornar no corpo da mensagem um link para a consulta do cliente inserido, como por exemplo **http://www.minhaapi.com.br/v1/cliente/11** onde o id 11 foi gerado pela inserção do recurso. 194 | 195 | ## Conclusão 196 | 197 | Existem diversas características sobre o protocolo HTTP e sobre o REST propriamente dito que não foram abordados neste artigo, entretanto com os conceitos abordados não temos mais desculpas para negligenciarmos nossas aplicações. 198 | 199 | A seguir encontra-se uma lista de materiais relacionados e indicados para o estudo: 200 | 201 | - [Especificação HTTP - RFC2616](https://tools.ietf.org/html/rfc2616); 202 | - [Como eu expliquei REST para a minha mulher](https://distopico.wordpress.com/traducao-de-how-i-explained-rest-to-my-wife/); 203 | -------------------------------------------------------------------------------- /03.React+Flux/examples/sancajobs/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app). 2 | 3 | Below you will find some information on how to perform common tasks.
    4 | You can find the most recent version of this guide [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md). 5 | 6 | ## Table of Contents 7 | 8 | - [Updating to New Releases](#updating-to-new-releases) 9 | - [Sending Feedback](#sending-feedback) 10 | - [Folder Structure](#folder-structure) 11 | - [Available Scripts](#available-scripts) 12 | - [npm start](#npm-start) 13 | - [npm test](#npm-test) 14 | - [npm run build](#npm-run-build) 15 | - [npm run eject](#npm-run-eject) 16 | - [Displaying Lint Output in the Editor](#displaying-lint-output-in-the-editor) 17 | - [Installing a Dependency](#installing-a-dependency) 18 | - [Importing a Component](#importing-a-component) 19 | - [Adding a Stylesheet](#adding-a-stylesheet) 20 | - [Post-Processing CSS](#post-processing-css) 21 | - [Adding Images and Fonts](#adding-images-and-fonts) 22 | - [Using the `public` Folder](#using-the-public-folder) 23 | - [Using Global Variables](#using-global-variables) 24 | - [Adding Bootstrap](#adding-bootstrap) 25 | - [Adding Flow](#adding-flow) 26 | - [Adding Custom Environment Variables](#adding-custom-environment-variables) 27 | - [Can I Use Decorators?](#can-i-use-decorators) 28 | - [Integrating with a Node Backend](#integrating-with-a-node-backend) 29 | - [Proxying API Requests in Development](#proxying-api-requests-in-development) 30 | - [Using HTTPS in Development](#using-https-in-development) 31 | - [Generating Dynamic `` Tags on the Server](#generating-dynamic-meta-tags-on-the-server) 32 | - [Running Tests](#running-tests) 33 | - [Filename Conventions](#filename-conventions) 34 | - [Command Line Interface](#command-line-interface) 35 | - [Version Control Integration](#version-control-integration) 36 | - [Writing Tests](#writing-tests) 37 | - [Testing Components](#testing-components) 38 | - [Using Third Party Assertion Libraries](#using-third-party-assertion-libraries) 39 | - [Initializing Test Environment](#initializing-test-environment) 40 | - [Focusing and Excluding Tests](#focusing-and-excluding-tests) 41 | - [Coverage Reporting](#coverage-reporting) 42 | - [Continuous Integration](#continuous-integration) 43 | - [Disabling jsdom](#disabling-jsdom) 44 | - [Experimental Snapshot Testing](#experimental-snapshot-testing) 45 | - [Editor Integration](#editor-integration) 46 | - [Developing Components in Isolation](#developing-components-in-isolation) 47 | - [Making a Progressive Web App](#making-a-progressive-web-app) 48 | - [Deployment](#deployment) 49 | - [Building for Relative Paths](#building-for-relative-paths) 50 | - [GitHub Pages](#github-pages) 51 | - [Heroku](#heroku) 52 | - [Modulus](#modulus) 53 | - [Netlify](#netlify) 54 | - [Now](#now) 55 | - [S3 and CloudFront](#s3-and-cloudfront) 56 | - [Surge](#surge) 57 | - [Troubleshooting](#troubleshooting) 58 | - [Something Missing?](#something-missing) 59 | 60 | ## Updating to New Releases 61 | 62 | Create React App is divided into two packages: 63 | 64 | * `create-react-app` is a global command-line utility that you use to create new projects. 65 | * `react-scripts` is a development dependency in the generated projects (including this one). 66 | 67 | You almost never need to update `create-react-app` itself: it delegates all the setup to `react-scripts`. 68 | 69 | When you run `create-react-app`, it always creates the project with the latest version of `react-scripts` so you’ll get all the new features and improvements in newly created apps automatically. 70 | 71 | To update an existing project to a new version of `react-scripts`, [open the changelog](https://github.com/facebookincubator/create-react-app/blob/master/CHANGELOG.md), find the version you’re currently on (check `package.json` in this folder if you’re not sure), and apply the migration instructions for the newer versions. 72 | 73 | In most cases bumping the `react-scripts` version in `package.json` and running `npm install` in this folder should be enough, but it’s good to consult the [changelog](https://github.com/facebookincubator/create-react-app/blob/master/CHANGELOG.md) for potential breaking changes. 74 | 75 | We commit to keeping the breaking changes minimal so you can upgrade `react-scripts` painlessly. 76 | 77 | ## Sending Feedback 78 | 79 | We are always open to [your feedback](https://github.com/facebookincubator/create-react-app/issues). 80 | 81 | ## Folder Structure 82 | 83 | After creation, your project should look like this: 84 | 85 | ``` 86 | my-app/ 87 | README.md 88 | node_modules/ 89 | package.json 90 | public/ 91 | index.html 92 | favicon.ico 93 | src/ 94 | App.css 95 | App.js 96 | App.test.js 97 | index.css 98 | index.js 99 | logo.svg 100 | ``` 101 | 102 | For the project to build, **these files must exist with exact filenames**: 103 | 104 | * `public/index.html` is the page template; 105 | * `src/index.js` is the JavaScript entry point. 106 | 107 | You can delete or rename the other files. 108 | 109 | You may create subdirectories inside `src`. For faster rebuilds, only files inside `src` are processed by Webpack.
    110 | You need to **put any JS and CSS files inside `src`**, or Webpack won’t see them. 111 | 112 | Only files inside `public` can be used from `public/index.html`.
    113 | Read instructions below for using assets from JavaScript and HTML. 114 | 115 | You can, however, create more top-level directories.
    116 | They will not be included in the production build so you can use them for things like documentation. 117 | 118 | ## Available Scripts 119 | 120 | In the project directory, you can run: 121 | 122 | ### `npm start` 123 | 124 | Runs the app in the development mode.
    125 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 126 | 127 | The page will reload if you make edits.
    128 | You will also see any lint errors in the console. 129 | 130 | ### `npm test` 131 | 132 | Launches the test runner in the interactive watch mode.
    133 | See the section about [running tests](#running-tests) for more information. 134 | 135 | ### `npm run build` 136 | 137 | Builds the app for production to the `build` folder.
    138 | It correctly bundles React in production mode and optimizes the build for the best performance. 139 | 140 | The build is minified and the filenames include the hashes.
    141 | Your app is ready to be deployed! 142 | 143 | ### `npm run eject` 144 | 145 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 146 | 147 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 148 | 149 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 150 | 151 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 152 | 153 | ## Displaying Lint Output in the Editor 154 | 155 | >Note: this feature is available with `react-scripts@0.2.0` and higher. 156 | 157 | Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint. 158 | 159 | They are not required for linting. You should see the linter output right in your terminal as well as the browser console. However, if you prefer the lint results to appear right in your editor, there are some extra steps you can do. 160 | 161 | You would need to install an ESLint plugin for your editor first. 162 | 163 | >**A note for Atom `linter-eslint` users** 164 | 165 | >If you are using the Atom `linter-eslint` plugin, make sure that **Use global ESLint installation** option is checked: 166 | 167 | > 168 | 169 | Then add this block to the `package.json` file of your project: 170 | 171 | ```js 172 | { 173 | // ... 174 | "eslintConfig": { 175 | "extends": "react-app" 176 | } 177 | } 178 | ``` 179 | 180 | Finally, you will need to install some packages *globally*: 181 | 182 | ```sh 183 | npm install -g eslint-config-react-app@0.3.0 eslint@3.8.1 babel-eslint@7.0.0 eslint-plugin-react@6.4.1 eslint-plugin-import@2.0.1 eslint-plugin-jsx-a11y@2.2.3 eslint-plugin-flowtype@2.21.0 184 | ``` 185 | 186 | We recognize that this is suboptimal, but it is currently required due to the way we hide the ESLint dependency. The ESLint team is already [working on a solution to this](https://github.com/eslint/eslint/issues/3458) so this may become unnecessary in a couple of months. 187 | 188 | ## Installing a Dependency 189 | 190 | The generated project includes React and ReactDOM as dependencies. It also includes a set of scripts used by Create React App as a development dependency. You may install other dependencies (for example, React Router) with `npm`: 191 | 192 | ``` 193 | npm install --save 194 | ``` 195 | 196 | ## Importing a Component 197 | 198 | This project setup supports ES6 modules thanks to Babel.
    199 | While you can still use `require()` and `module.exports`, we encourage you to use [`import` and `export`](http://exploringjs.com/es6/ch_modules.html) instead. 200 | 201 | For example: 202 | 203 | ### `Button.js` 204 | 205 | ```js 206 | import React, { Component } from 'react'; 207 | 208 | class Button extends Component { 209 | render() { 210 | // ... 211 | } 212 | } 213 | 214 | export default Button; // Don’t forget to use export default! 215 | ``` 216 | 217 | ### `DangerButton.js` 218 | 219 | 220 | ```js 221 | import React, { Component } from 'react'; 222 | import Button from './Button'; // Import a component from another file 223 | 224 | class DangerButton extends Component { 225 | render() { 226 | return