Apresentação
  • Apresentação do Projeto e tecnologias: Webpack, Node, Express, Mysql e outras
Overview da aplicação e estrutura do projeto
  • Overview da aplicação Web e API RESTFul Node + Express
  • Estrutura do projeto Web e API RESTFul
Instalando ferramentas Node, NPM, VS Code e XAMP
  • Download e instalação Node e NPM
  • Download e instalação Visual Studio Code
  • Download e instalação XAMP
Babel Compiler JavaScript ES6 e ESNext
  • Babel - Introdução
  • Babel - Instalação
  • Babel - configuração e execução
Webpack - Empacotador JavaScript, CSS e Resources
  • Webpack - Introdução
  • Webpack - instalação e configuração
  • Webpack Módulos - Entendendo como o Webpack cria um bundle de módulos JavaScript
  • Webpack Loaders - Integrando Webpack e Babel para funcionar com o babel-loader
  • Webpack - Instalando e configurando babel-polyfill e exemplo de Promise
  • Webpack - Instalando e configurando o servidor webpack-dev-server com liveserver
  • Webpack - Empacotando seus arquivos CSS
  • Processando e empacotando seus arquivos SASS com Webpack
  • Integrando Bootstrap ao Webpack
  • Webpack - Extraindo e empacotando arquivos css e sass em um bundle
  • Webpack - Compactando arquivos JS, CSS e SASS com UglifyJs e Optimize CSS
  • Webpack - Code Splitting, dividindo o código se sua aplicação em vários bundles
API RESTFul - NodeJS + Express + MySQL
  • Instalação MySQL e gerenciador via XAMPP
  • Preparando projeto API com instalação do Express e configuração servidor Node
  • Criando Banco de Dados MySQL para API via PHP Admin e DBDesigner Fork
  • Instalação NPM MySQL, conexão banco de dados e criação class model portfólio
  • Criando resposta padrão API e router portfólio para obter todos os portfólios
  • Implementado método get para recuperando portfólio por id
  • Instalando o Nodemon para observar mudanças nos arquivos e reiniciar o servidor
  • Instalação Postman extensão do Chrome para realizar requisições HTTP com verbos
  • Implementado método adicionar para inserir registros no banco MySQL via API Node
  • Implementado método excluir para delatar registros no banco MySQL via API Node
  • Implementado método editar para realizar um update no registro do banco via API
Aplicação Client Web App estilo SPA - Single Page Application
  • Preparando e configurando projeto Client Web App com Webpack
  • Preparando página principal index para exibir os portfólios
  • Preparando página cadastro de portfólio com Bootstrap para operações de CRUD
  • Criando classe de configuração da Web App
  • Criando as classes da camada model do MVC para manutenção dos portfólios
  • Criando o Controller para a página index
  • Implementando listagem de portfólios na página index com Cards do Bootstrap
  • Criando Controller para CRUD de portfólio
  • Criando métodos auxiliares para a classe portfólio controller
  • Criando métodos para exibir Alerts do Bootstrap via portfólio controller
  • Implementando listagem de portfólio no CRUD
  • Registrando eventos click dos botões editar e excluir da listagem
  • Resgistrando eventos dos botões cadastrar porfólio, editar e cancelar
  • Implementando operação cadastrar portfólio do CRUD
  • Implementando operação editar portfólio do CRUD
  • Implementando operação deletar portfólio do CRUD