
Seja Bem Vindo a uma das melhores produções da Hcode, com o passar dos cursos estamos aprendendo e melhorando os recursos, didática e exemplos que usamos para ensinar Tecnologia de ponta. Neste curso oferecemos a você 6 projetos reais sendo desenvolvidos junto com o aluno, você receberá o HTML e CSS do projeto e juntos criaremos o JavaScript de cada um deles.
O Curso é dividido em sessões, assim se você quiser ter uma base do básico de JavaScript as aulas 04 e 05 chamadas de I01 e I02 irão ajudá-lo. Também utilize os exercícios para praticar o que está aprendendo.
Bom Curso!
Nesta aula aprenderemos sobre a plataforma da Udemy, os recursos para marcar informações na aula, perguntas e respostas, os anúncios educacionais e como receber o seu certificado da Udemy.
Também explicamos sobre as avaliações e como ela nos ajudam a criar conteúdo de qualidade para os alunos.
Aprenda como configurar um ambiente para Programar em JavaScript, verificar a versão do seu navegador web, instalar um editor de texto de qualidade além da diferença entre o Git e o GitHub.
Git é um sistema de controle de versão, já GitHub é um site que permite o compartilhamento de projetos que utilizam o Git como base.
Como parte introdutória do curso aprenda os comandos básicos do JavaScript, o que é case Sensitive, variáveis, constantes, comandos para controle de fluxo.
Nesta aula você aprenderá comandos básicos que serão utilizados na prática nas próximas aulas, assim, um mesmo comando pode ser explicado utilizando exemplos e situações diferentes.
Em continuidade das aulas introdutórias aprenderemos sobre Funções, Arrays e Objetos, muitos destes recursos são uma novidade para programadores JavaScript que precisam se atualizar, veja o que é Arrow Function, as classes, objetos, métodos, encapsulamento.
Esses comandos serão também explicados novamente em outro contexto para que sua importância fique bem clara para o desenvolvedor.
Neste projeto vamos criar uma calculadora com as operações básicas de soma, subtração, divisão, multiplicação e porcentagem. Você aprenderá os desafios lógicos da Calculadora, como trabalhar com eventos de mouse, de teclado, são 22 aulas sobre a calculadora.
Nesta aula vamos clonar o projeto direto do GitHub e vamos explicar o HTML da Calculadora que irá utilizar SVG.
Nesta aula aprenderemos por que Orientação a Objetos é tão importante e como fazê-lo em JavaScript, também teremos o início em MVC explicando sua estrutura e criando os primeiros arquivos.
Um método construtor é fundamental quando trabalhamos com Programação Orientada a Objetos e queremos que uma rotina seja executada automaticamente quando a Classe for representada ou instanciada por um objeto, nesta aula aprenda o que significa tudo isso, como fazer além de entender o que é encapsulamento e os tipos de encapsulamento no JavaScript como public, protected e private.
Nessa aula iremos aprender o que é o DOM, o que ele representa e como podemos manipulá-lo com o JavaScript
Nessa aula iremos aprender um dos recursos mais interessante do JavaScript: as opções para trabalhar com data e hora. Iremos ver a classe que o JavaScript nos oferece para isso e alguns métodos para formatação de data, junto com as novidades das últimas versões do EcmaScript para esse contexto.
Um dos novos recursos mais interessantes do EcmaScript é o método querySelector(). Nesta aula iremos aprender o que é esse método e como utilizá-lo em nossa calculadora.
Nesta aula iremos aprender por meio de alguns exemplos e comparações o que é um evento no JavaScript, os tipos de evento que existem e como adicionar um ouvinte de evento em nossa aplicação.
Nessa aula iremos aprender a adicionar vários eventos ao mesmo elemento. Além disso, iremos ter uma introdução a um dos métodos mais usados no JavaScript, o método split(). Vamos aprender o que ele é e qual é sua função.
Nessa aula iremos aprender o que é o switch(), uma estrutura para controle de fluxo. Iremos aprender qual é seu objetivo, como ele funciona e como podemos aplicá-lo à nossa calculadora.
Nessa aula iremos adicionar operações à nossa calculadora. Para isso, iremos aprender dois recursos bem interessantes: 1) a função isNaN e 2) a propriedade .length que existe em arrays.
Nessa aula iremos resolver o desafio proposto na aula anterior e iremos conhecer uma das funções mais sensacionais do JavaScript: a função eval().
Nessa aula iremos falar sobre laços de repetição. Vamos aprender sobre o que é o for(), qual seu objetivo e como implementá-lo em nosso projeto.
Você gosta de porcentagem? Talvez esse não tenha sido o seu conteúdo de matemática favorito, mas é uma operação necessária em uma calculadora. Como implementar essa função em nosso projeto? É o que iremos aprender nessa aula.
Em muitas calculadoras, quando clicamos no botão igual mais de uma vez, ele realiza a operação sem problemas. Em nosso projeto, atualmente esse processo está gerando um erro. Como podemos resolvê-lo? É o que iremos aprender nessa aula.
Nossa calculadora está ficando cada vez mais completa. Nessa aula iremos adicionar uma nova funcionalidade: a opção de apertar o botão . (ponto) e assim trabalhar com números decimais.
Na última aula criamos a lógica do botão . (ponto). Contudo, alguns bugs estão sendo retornados. Nós iremos solucioná-los nessa aula.
Nessa aula iremos falar novamente sobre eventos, mas agora vamos aprender sobre os eventos de teclado. Além disso, iremos implementar a novidade de o usuário poder adicionar operações à calculadora tanto clicando nela como por meio de seu teclado.
Nessa aula iremos falar sobre os tão usados Ctrl + c e Ctrl + v, para que possamos tanto copiar valores de nossa calculadora como também adicionar valores a ela colando algum número.
Nessa aula iremos aprender a trabalhar com a API de áudio e JavaScript. Também iremos adicionar efeitos sonoros à nossa calculadora.
Nessa aula iremos resolver um pequeno bug que está sendo gerado no layout de nossa calculadora quando nossa operação gera um número muito grande. Iremos assim definir um limite para os números exibidos no display.
Já ouviu falar de try/catch? Nessa aula iremos aprender o que são essas declarações, como são usadas e como podem nos ajudar a tratar erros ou exceções em nossos projetos.
Chegamos ao fim de nosso projeto!
Nessa aula bônus iremos falar de um pequeno desafio que você pode desenvolver para praticar ainda mais os conceitos aprendidos nessa seção. Temos certeza de que vocês irão gostar :)
Acessando o link dessa aula, você terá acesso ao repositório do GitHub da Hcode, acesse agora mesmo e confira o código final do projeto.
Nessa seção estamos iniciando um novo projeto, um Gerenciamento de Usuários. Já nessa aula iremos aprender o que é um script incorporado e dar os primeiros passos nesse projeto.
Nessa aula iremos revisitar o conceito do que é o DOM e manipulá-lo usando o JavaScript.
Uma das primeiras coisas que usamos quando estamos aprendendo uma linguagem de programação é as variáveis. Mas, o que é uma variável? E como elas podem ser usadas em nosso projeto? É o que iremos aprender nessa aula.
Nessa aula iremos resolver o desafio proposto na aula anterior e aprender como casar o conceito de variáveis com o conceito de seletores do JavaScript.
Nessa aula iremos revisitar o conceito de laços de repetição e aprenderemos como usar o forEach() para deixar nosso código mais abstrato.
Nessa aula iremos falar novamente sobre controle de fluxo e entender como o if() e else podem nos ajudar a evitar algumas possíveis exceções em nosso projeto.
Nessa aula iremos elevar nosso projeto a um outro nível, pois começaremos a trabalhar com JSON. Mas, o que é JSON? Como usá-lo no código? Responderemos essas perguntas nesta aula.
Nessa aula iremos falar sobre eventos e entender como eles podem ser implementados na nossa aplicação.
Um dos assuntos mais conhecidos e mais importantes em qualquer linguagem de programação é o conceito de funções. Nessa aula iremos aprender o que é uma função e criar funções para o nosso projeto.
Continuando nosso desenvolvimento do projeto de Gerenciamento de Usuários, iremos agora elevar ainda mais o nível da nossa aplicação. Iremos falar agora sobre a Orientação a Objetos, um dos conceitos que os desenvolvedores mais anseiam dominar. Além disso, você provavelmente já ouviu falar da arquitetura MVC. Vamos aprender o que é essa arquitetura também nessa aula.
Após ter uma introdução à Orientação a Objetos, nessa aula iremos aplicar o conceito de um Controller à nossa aplicação.
Nessa aula iremos resolver o erro que foi retornado na aula anterior e também aprender um operador que foi introduzido nas últimas versões do EcmaScript, o operador spread.
Nessa aula iremos conhecer a classe File Reader e aprender como ela pode ser introduzida em nosso projeto para realizarmos o upload de arquivos.
Um recurso introduzido na versão do EcmaScript2015, ou ES6 foi o conceito de promises, que logo de início foram um sucesso, você provavelmente já ouviu falar sobre elas. Mas, afinal de contas, o que é uma promise? Como adicionar promises ao nosso projeto? Essas perguntas serão respondidas nessa aula.
Nessa aula iremos trabalhar com a camada View de nossa aplicação, além de usar o operador ternário para realizar verificações.
Nessa aula iremos revisitar o conceito de datas no JavaScript e iremos aprender o que é um método getter e um método setter em uma classe.
Nessa aula iremos aprender o que é um método estático. Além disso, aprenderemos como esse conceito pode nos ajudar a criar um arquivo de funções úteis para o projeto.
Validação é uma das coisas mais necessárias em uma aplicação Web. Nessa aula, iremos usar os conceitos que já aprendemos ao longo dessa seção para realizar a validação do formulário do nosso projeto.
Nessa aula aprenderemos um novo conceito que é usado no JavaScript: dataset. Aprenderemos o que é dataset e como utilizar esse recurso para atualizar as estatísticas exibidas em nossa aplicação.
Nessa aula iremos trabalhar novamente na camada View da aplicação e implementar a edição de dados em nosso projeto.
Nessa aula iremos usar o conhecimento já adquirido sobre eventos para definir um ouvinte do evento de clique no botão de editar um usuário.
Nessa aula iremos utilizar um outro laço de repetição, o for in, para continuar a programar da edição de dados.
Continuando a edição de dados, nessa aula iremos realizar a edição de campos um pouco mais complexos do nosso formulário, que são os campos de radio button e checkbox.
Nessa aula iremos realizar a edição de fato de nossos dados, substituindo as informações antigas em nossa tabela pelos novos valores informados.
Após termos implementado a edição das informações do usuário, nessa aula iremos realizar a edição da imagem dele, usando novamente a classe File Reader.
Agora que concluímos a edição de dados, nessa aula iremos aprender a excluir as informações de um usuário.
Trabalhar com sessões é muito importante nas aplicações Web modernas. Nessa aula iremos aprender como defini-las usando o JavaScript, por meio do conceito de sessionStorage.
Na última aula aprendemos sobre sessionStorage. Mas, e o localStorage? O que ele é, e como funciona? Qual é a diferença entre sessionStorage e localStorage? Iremos responder essas perguntas nessa aula.
Nessa aula iremos tirar alguns minutos para realizar um processo que é muito importante em nosso fluxo de desenvolvimento: a refatoração. O que podemos otimizar em nosso projeto? Vamos descobrir nessa aula.
Nessa aula iremos aprender a editar os dados de nosso usuário e já salvar as novas informações no localStorage.
Nessa aula iremos resolver o desafio proposto na aula anterior e entender como o método Object.assign() pode nos ajudar.
Nessa aula estamos finalizando o nosso projeto e iremos aprender como excluir dados do localStorage, implementando assim um CRUD completo em nosso Gerenciamento de Usuários.
Nessa aula você poderá acessar o código final da seção.
Estamos iniciando uma nova seção! Nessa seção iremos falar muito sobre Node.js e desenvolver um novo projeto com ele: criar um servidor usando JavaScript no Back-End. Já nessa aula iremos aprender: afinal de contas, o que é o Node?
Depois de termos uma introdução ao Node.js, iremos nessa aula realizar o seu download e instalá-lo em nossos computadores.
Nessa aula iremos aprender a criar e inicializar um servidor de fato usando o Node.
Nessa aula teremos uma introdução às rotas no Node.js. Como podemos detectar e tratar um caminho diferente informado em nossa aplicação por meio da URL? Iremos aprender isso nessa aula.
Um dos fundamentos em uma aplicação em Node é o arquivo package.json. O que é esse arquivo e qual é a sua importância? Iremos falar sobre isso nessa aula. Além disso, teremos uma introdução a um dos módulos mais usados no Node: o Express
Agora que o Express já está instalado, iremos criar um servidor usando esse módulo. Além disso, conheceremos uma ferramenta que pode nos ajudar muito no desenvolvimento: o Nodemon.
Nosso arquivo de rotas está ficando cada vez maior. Nessa aula, iremos aprender como separar essas rotas em outros arquivos, visando a manutenção e legibilidade de nosso código.
Nessa aula iremos falar sobre o Consign e aprender como esse módulo pode nos ajudar a organizar ainda mais o nosso projeto e as nossas rotas.
Até o momento criamos algumas rotas em nossa aplicação, mas sempre usando o método GET. Nessa aula, iremos aprender a criar uma rota usando o método POST, também muito importante. Além disso, já ouviu falar do Postman? Iremos aprender como essa ferramenta pode nos ajudar em nossos testes durante o desenvolvimento.
Nessa aula iremos implementar um Banco de Dados à nossa aplicação. Iremos conhecer o neDB e adicioná-lo ao nosso projeto.
Após implementar o neDB em nosso projeto, iremos aprender nessa aula como listar ou exibir as informações deste Banco em nosso navegador.
Nessa aula iremos relembrar a importância de refatorar o nosso código e entender como podemos deixá-lo ainda mais abstrato.
Nas últimas aulas aprendemos a exibir as informações de todos os usuários cadastrados. Contudo, como podemos ter acesso às informações de um usuário específico? Iremos aprender isso nessa aula.
Após trabalhar um pouco com a listagem de dados, iremos aprender nessa aula como podemos editar as informações de um usuário.
Nessa aula iremos aprender o método que geralmente é o mais simples de executar. Iremos aprender a excluir os dados de um usuário.
Já aprendemos a implementar todas as operações de um CRUD em nosso projeto. Nessa aula iremos aprender a realizar a validação, ou verificação, dos dados informados para o cadastro de um usuário.
Nessa aula você poderá acessar o código final da seção.
Nessa seção iremos criar um novo projeto! O melhor é que iremos unir dois projetos que já criamos para desenvolver outro, realmente casando vários conceitos já aprendidos. Nessa aula, iremos dar o pontaté inicial e criar o projeto usando o Express.
Nessa aula iremos conhecer o framework Restify e aprender como podemos usá-lo para acessar ou consumir uma Api em REST.
Nessa aula iremos elevar nosso conhecimento para um outro nível, pois iremos aprender sobre AJAX. Mas o que é AJAX e como utilizá-lo? Essas perguntas serão respondidas nessa aula.
Nessa aula iremos realizar uma pequena refatoração em nosso projeto, para adequar a estrutura dos dados recebidos em nossa REST Api.
Nessa aula iremos realizar uma outra refatoração e adaptar as requisições da classe XMLHttpRequest em uma classe personalizada.
Nessa aula iremos realizar a chamada das rotas em nosso projeto usando outros métodos de requisição.
Nessa aula iremos continuar realizando as requisições para nosso servidor, principalmente para a criação e edição dos dados.
Após criar e testar vários métodos de requisição em nosso projeto, iremos nessa aula criar o método DELETE, para exclusão dos dados.
Nessa aula iremos falar novamente sobre a imagem do usuário e entender porquê é necessário definir um limite de bytes para uma requisição POST.
Nessa aula iremos conhecer a Api Fetch, conhecida como "novo AJAX". Iremos aprender como ela funciona, quais são suas vantagens e adicioná-la ao nosso projeto.
Estamos iniciando mais um projeto simplesmente sensacional: um DropBox Clone! Nessa aula iremos explicar como será a estrutura desse projeto e iniciar o HTML e CSS dele.
Nessa aula iremos iniciar o nosso projeto do DropBox Clone usando o Express.
Nessa aula iremos começar a desenvolver nosso código de fato. A primeira coisa que iremos fazer é adicionar um evento de clique para o botão que envia os arquivos para upload.
Nessa aula iremos realizar o upload de múltiplos arquivos para o nosso DropBox e usar o recurso do Promise.all() para isso.
Depois de iniciar a configuração do envio de arquivos, nessa aula iremos aprender a receber as informações e arquivos que forem enviados pelo usuário.
Nessa aula iremos implementar um recurso muito interessante: como atualizar o status de progresso do upload de um arquivo de maneira dinâmica. Além disso, iremos adicionar essa informação em uma barra de progresso.
Nessa aula iremos adicionar a cada arquivo um ícone que identificará seu tipo, baseando-nos na extensão desse arquivo.
Nessa aula iremos conhecer o poderoso Banco de Dados Firebase, um excelente projeto do Google para aplicações Web. Iremos entender como ele funciona e adicioná-lo ao nosso projeto.
Nessa aula iremos aprender a inserir informações no Firebase e como podemos deixar isso dinâmico em nosso código.
Após inserir os dados no Firebase, nessa aula iremos aprender a listar as informações contidas nesse Banco em nosso DropBox
Nessa aula iremos aprender a selecionar elementos, ou seja, iremos implementar a lógica de clicar em um item do DropBox e ele ficará com o estilo CSS de selecionado.
Nessa aula incrível iremos aprender a selecionar os elementos usando algumas teclas do Sistema Operacional, algo muito comum em vários sites e sistemas.
Nessa aula iremos trabalhar novamente com eventos e implementar mais alguns ouvintes de clique aos botões do nosso DropBox.
Após criar os eventos de outros botões do nosso DropBox, nessa aula iremos definir quais botões irão aparecer de acordo com os itens selecionados.
Nessa aula iremos aprender a renomear um arquivo. Iremos entender a lógica necessária para isso e como implementá-la em nosso projeto.
Nessa aula iremos aprender a excluir arquivos. Geralmente dizemos que esse é o passo mais fácil, mas vamos descobrir porquê com o nosso DropBox talvez não seja tão simples assim.
Nessa aula iremos aprender a lógica necessária para criar uma nova pasta em nosso DropBox.
Após criar uma nova pasta, nessa aula iremos aprender como navegar entre as pastas e atualizar os arquivos exibidos dependendo do diretório atual.
Nessa aula iremos iniciar a criação da estrutura necessária para abrir um arquivo. Começaremos criando uma rota para esse fim.
Nessa aula iremos adaptar nosso projeto para o Firebase Storage. Talvez nos perguntemos: "Mas já estamos usando o Firebase. O que é o Firebase Storage e qual é a diferença dele para o Firebase Database?" Iremos responder essa pergunta nessa aula, além de entender a nova estrutura do projeto.
Continuando a nossa refatoração, nessa aula iremos excluir um arquivo do Firebase Storage, aproveitando a estrutura que já desenvolvemos em aulas anteriores.
Após aprender a excluir um arquivo, nessa aula iremos implementar a lógica de exclusão de um diretório inteiro no DropBox, junto com algumas verificações necessárias para esse processo.
Chegamos ao fim do nosso projeto, excelente! Nessa aula iremos aprender a abrir arquivos no DropBox e finalizaremos a seção.
Bem-vindos a mais um projeto! Nessa seção iremos desenvolver nada mais nada menos do que um WhatsApp Clone, um projeto completo desse aplicativo incrível, temos certeza de que vocês irão gostar. Nessa aula iremos conhecer a estrutura da aplicação.
Nessa aula iremos começar a desenvolver o código de nosso WhatsApp. Vamos começar criando o arquivo principal do projeto.
Durante nosso projeto, precisaremos selecionar vários elementos de nossa página para que possamos manipulá-los. Um recurso que pode nos ajudar nessa questão é o prototype. Iremos aprender o que é esse conceito nessa aula.
Nessa aula iremos trabalhar com os eventos do painel do lado esquerdo de nosso WhatsApp. Usando JavaScript e o conceito que aprendemos de prototype, iremos definir o evento de clique desses elementos.
Nessa aula iremos relembrar o conceito de FormData e usá-lo para conseguir recuperar alguns dados que serão informados pelo usuário através de um campo de formulário no painel esquerdo.
Continuando na implementação de eventos em nosso WhatsApp, nessa aula iremos criar o evento de clique no menu "Anexar". Além disso, iremos conhecer dois novos métodos: 1) bind() e 2) removeEventListener(). Vamos entender como eles podem nos ajudar a resolver alguns possíveis problemas que possam surgir.
Nessa aula iremos continuar a implementação dos eventos do menu "Anexar".
Nessa aula iremos começar a programar o microfone de nosso WhatsApp. Vamos aprender a manipular os eventos de gravação e como informar o tempo de nossos áudios.
Nessa aula iremos continuar a programar nosso microfone, resolvendo a questão que apareceu na aula anterior. Iremos formatar os milisegundos do áudio em minutos e segundos usando o JavaScript.
Nessa aula iremos programar o campo de digitar a mensagem no WhatsApp. Vamos conhecer alguns eventos de teclado e usá-los para adicionar ainda mais recursos ao nosso projeto.
Um dos melhores recursos do WhatsApp são os emojis. Como podemos programar sua inserção usando JavaScript? Iremos descobrir nessa aula que será incrível.
Na última aula aprendemos a inserir emojis em nossas mensagens. Contudo, como podemos inserir um emoji não apenas no final da mensagem, mas também entre os caracteres dela? Vamos aprender nessa aula.
Nessa aula iremos aprender a manipular a câmera de nosso computador usando JavaScript.
Nessa aula iremos conhecer o conceito de Webpack e entender por quê ele é muito importante para as aplicações Web. Além disso, entenderemos como a estrutura de nosso projeto irá mudar com a inserção do Webpack nele.
Na última aula aprendemos a adicionar o Webpack em nossa aplicação, mas precisamos configurá-lo agora, é o que faremos nessa aula. Iremos conhecer o arquivo webpack.config.js e adicionar as configurações nele.
Um dos fundamentos do Webpack é o conceito de módulos. Nessa aula iremos aprender a importar e exportar módulos para resolver o problema que surgiu na aula passada.
Nessa aula iremos continuar a trabalhar com a câmera. Iremos aprender a parar a captura dela usando o método getTracks().
Já pensou em poder tirar uma foto usando JavaScript? Iremos fazer isso nessa aula. Vamos aprender a manipular o elemento canvas para conseguir tirar essa fotografia em nosso WhatsApp.
Nessa aula iremos continuar implementando os recursos do WhatsApp em nossa aplicação e iremos agora aprender a enviar documentos como anexos.
Na última aula iniciamos a programação do envio de documentos. Nessa aula iremos aprender a fazer a leitura das capas dos documentos para exibir sua primeira página no navegador.
Nessa aula vamos voltar a trabalhar com o áudio. Iremos aprender a ativar o microfone de nosso computador para poder enviar áudios no WhatsApp.
Já trabalhamos com vários eventos neste projeto. Nessa aula iremos criar uma classe que nos ajudará ainda mais na manipulação desses eventos.
Após conseguir capturar o áudio do microfone, nessa aula iremos aprender a gravá-lo de fato, usando a ajuda do MediaRecorder.
A gravação de nosso áudio está funcionando. Contudo, precisamos configurar a questão de poder ver o tempo que a gravação possui. Iremos programar isso nessa aula.
O Firebase já nos ajudou bastante no projeto do Dropbox. Iremos usá-lo novamente nesse projeto. Nessa aula iremos adicioná-lo à nossa aplicação e entender como isso mudará a estrutura do nosso projeto.
Agora que o Firebase foi adicionado à nossa aplicação, precisamos configurar a nossa autenticação nesse Banco de Dados. Faremos isso nessa aula.
Nessa aula iremos salvar os dados do usuário no Firebase. Isso nos ajudará a conhecer um pouco melhor as funções do Firebase Cloud Firestore.
Nessa aula iremos aplicar o padrão DAO ao nosso projeto. Mas, o que significa essa sigla? E como esse padrão pode nos ajudar? Iremos responder essas perguntas neste vídeo.
Na última aula aprendemos sobre o padrão DAO e vimos como consultar informações do Firebase. Nessa aula iremos aprender a atualizar as informações do usuário autenticado em seu perfil.
Nessa aula iremos adicionar mais recursos ao nosso WhatsApp, programando o cadastro de um contato em nosso perfil.
Na última aula aprendemos a adicionar um contato ao nosso perfil. Mas, como podemos listar os contatos cadastrados? Iremos aprender isso nessa aula.
Continuando a falar sobre contatos, nessa aula iremos programar um evento de clique em cada contato, para que as informações de nossa conversa com ele sejam exibidas no painel à direita.
Nessa aula iremos começar a desenvolver a estrutura necessária para o envio de mensagens. Vamos começar criando uma classe que irá conter a lógica desse recurso.
Após criar a classe para as mensagens, iremos criar nessa aula uma outra classe, que será responsável pelos chats ou conversas que teremos em nosso WhatsApp.
Nessa aula iremos começar a programar o envio de mensagens. Vamos começar enviando uma mensagem de texto neste vídeo.
Nessa aula iremos ver um dos conceitos mais incríveis da Web Moderna. Iremos aprender a ler as mensagens de nosso WhatsApp em tempo real.
Nessa aula iremos programar a barra de rolagem de nosso WhatsApp. Vamos aprender como descer esse scroll automaticamente quando muitas mensagens forem enviadas.
Nessa aula iremos programar o filtro da lista de contatos usando o Firebase.
Nessa aula muito interessante iremos aprender a atualizar o status das mensagens enviadas, como já existe no WhatsApp. Iremos trocar os ícones conforme uma mensagem for enviada, entregue ou lida por outro contato.
Nessa aula vamos falar sobre o envio de imagens. Como podemos fazer esse envio nos baseando no Firebase? Iremos descobrir nesse vídeo.
Após enviar uma imagem da galeria na aula anterior, vamos aprender nessa aula a enviar uma foto como anexo, nos baseando em nossa câmera.
Continuando nossa série de vídeos sobre o envio de informações nas conversas, nessa aula iremos aprender a enviar um documento como anexo.
Nessa aula iremos aprender a compartilhar um contato em uma conversa no WhatsApp.
Na aula passada aprendemos a compartilhar um contato com outra pessoa. Nessa aula vamos aprender a enviar uma mensagem para esse contato anexado.
Nessa aula iremos aprender a gravar um áudio e enviá-lo como anexo em nossas conversas no WhatsApp.
Nessa aula vamos aprender a atualizar os dados do usuário autenticado salvando as novas informações no Firebase.
Nessa aula vamos aprender a atualizar a última mensagem enviada de maneira manual, alterando essa informação diretamente no Firebase Firestore.
Nessa aula iremos aprender a usar as funções do Firebase Cloud Functions em nosso WhatsApp.
Nas últimas aulas aprendemos a atualizar a última mensagem enviada manualmente. Mas, como poderíamos fazer isso de maneira automática? Iremos responder essa pergunta nessa aula.
Nessa aula bem interessante iremos aprender a enviar notificações de novas mensagens para nosso usuário, mesmo que ele não esteja no navegador. Vamos usar a API de notificações para isso.
Neste projeto iremos criar um site utilizando JavaScript e Templates Embedded Javascript, além de criar uma área administrativa e conectando o Node.JS com MySQL.
Nesta aula vamos estruturar o projeto, baixar os códigos básicos do projeto para a parte de layout, e configurar o ambiente para rodar o nosso template com Ebedded JavaScript.
O MySQL é atualmente um dos mais poderosos Banco de Dados para aplicações web, nesta aula vamos realizar a instalação e configuração ideal para utilizar o MySQL com NodeJS.
Uma vez que o Banco de Dados está instalado, chegou a hora de conectar o MySQL com o NodeJS, instalando o conector do Node e o módulo mysql para conexão de nosso ambiente com o MySQL.
Nesta aula iremos executar uma consulta no Banco de Dados MySQL e exibir os dados utilizando Node e JavaScript em nosso template EJS.
Uma maneira de organizar os arquivos de projetos que são reutilizáveis na parte de layout e utilizando o Template EJS são os includes, veja nesta aula como utilizar os includes em seu projeto e tornar o seu código mais inteligente e portável.
O Conteúdo do header é compartilhado por boa parte da aplicação, nesta aula vamos torná-lo um arquivo include em nosso template EJS.
O conteúdo do rodapé é compartilhado com outras páginas da aplicação, nesta aula vamos tornar o arquivo de rodapé em includes para otimizar o desenvolvimento dos templates EJS.
Nesta aula iremos organizar o conteúdo em includes para facilitar a reutilização dos códigos do Template EJS.
Nesta aula vamos refatorar os arquivos tornando os includes ainda mais úteis, melhorando o uso dos arquivos de includes.
Nesta aula vamos começar a programar a reserva de mesas no Restaurante, utilizando o envio para a rota POST, tratando os dados recebidos e enviando para o Banco de Dados MySQL.
Nesta aula vamos começar a programar o Contato recebido dos usuários, utilizando o envio para a rota POST, enviando para o Banco de Dados MySQL.
Nesta aula vamos começar a criar a área administrativa do site começando com as rotas da administração.
Trabalhar com Session para manter o estado da aplicação para cada usuário é um desafio, nesta aula vamos utilizar o Redis para armazenar dados da sessão do usuário.
Nesta aula será criado a tela de autenticação da administração do site, validando as credenciais de login e senha no Banco de Dados MySQL.
Nesta aula criaremos um Middleware para tratar informações do usuários trocados na sessão.
Assim como na parte visual do site, os includes facilitam a produtividade e manutenção do código, nesta aula vamos organizar os arquivos em Includes.
Nesta aula vamos otimizar o layout do Menu e transformar os links estáticos em links reais com as rotas apropriadas.
Formatando o menu da administração para aparecer em destaque quando o link do menu estiver ativo.
Nesta aula exibiremos os dados do usuário, na área restrita da administração, após a autenticação do usuário, os dados são carregados do banco de dados para a tela.
Nesta aula aprenderemos a consultar o consolidado dos dados do site, desde números de reservas, contatos, emails e usuários cadastrados.
Os links da administração do menu também se tornam dinâmicos, vindo do Banco de Dados, nesta aula aprenderemos como consultar os dados e montar o menu dinamicamente.
Nesta aula vamos criar o cadastro de um novo prato no Menu de opções do restaurante, vamos trabalhar com formulários.
Aprenderemos a recuperar dados do Prato do Menu via ajax os dados do formulário, utilizando Formidable e Express para enviar para o Banco de Dados.
Após criar as informações de um cardápio, nessa aula iremos aprender a editar os dados do menu.
Nesta aula vamos alterar dados dos Pratos do Menu, utilizando a Administração, listamos os dados e carregamos as opções para serem alteradas.
Prototype é um dos recursos mais incríveis do JavaScript, vamos utilizar o Prototype para otimizar a realização de requisições assíncronas do JavaScript.
Agora que os dados estão carregados, vamos realizar a alteração dos dados dos Pratos do Menu no Banco de Dados.
Vamos aprender a excluir os dados da Administração do Menu de opções, validando os dados e excluindo no Banco de dados.
Os usuários podem realizar reservas de mesas pelo site, nesta aula vamos trabalhar na criação das reservas pela Administração.
Nesta aula vamos trabalhar na consulta dos dados da Reserva vindos do Banco de Dados.
Para exibir os dados bem formatados das datas na tela, iremos utilizar a biblioteca Moment.JS para formatar data e hora da reserva.
Nesta aula vamos trabalhar nas alterações da reserva na parte Administrativa do site.
Nesta aula vamos trabalhar na construção da parte de exclusão da Reserva efetuada pelo usuário.
Nessa aula iremos elevar o nosso projeto a um outro nível. Vamos aprender a criar um componente para o Grid. Isso nos permitirá deixar nosso código ainda mais abstrato e profissional.
Nessa aula iremos aprender a definir eventos dentro de nosso componente.
Nessa aula iremos refatorar um pouco o nosso componente de Grid e já adicionar um método responsável pela exclusão de um registro.
Nessa aula iremos colocar nosso componente em prática na tela de menus.
Nessa aula iremos iniciar a criação da estrutura da administração de usuários. Vamos começar criando as rotas relacionadas com essa parte de nosso projeto.
Após criar as rotas de nossa aplicação para o gerenciamento dos usuários, nessa aula iremos criar as interfaces gráficas onde as rotas serão implementadas.
Nessa aula iremos aprender a realizar a alteração da senha dos usuários cadastrados em nosso sistema.
Nessa aula iremos aprender a realizar a administração dos contatos.
Nessa aula iremos aprender a realizar a administração dos emails que recebermos em nosso site.
Nessa aula iremos aprender um recurso muito interessante que é necessário quando trabalhamos em sistemas Web, que é a paginação. Como podemos implementá-la usando o Express? Vamos aprender nesse vídeo.
Nessa aula vamos continuar a implementação da paginação em nosso sistema, resolvendo algumas questões que surgiram na aula anterior.
Continuando a falar sobre a paginação de dados, nessa aula iremos implementar os botões de Anterior e Próximo.
Nessa aula iremos aprender uma das habilidades mais requisitadas e desejadas para quem trabalha com Sistemas Web: trabalhar com gráficos. Vamos aprender a instalar a biblioteca Chart.js para isso.
Após instalar o Chart.js, nessa aula iremos deixá-lo dinâmico, informando os dados do Banco para essa biblioteca.
Nesta aula vamos aprender como configurar o Socket.io para criação de aplicações em tempo real.
Na última aula de nosso incrível projeto do Restaurante Saboroso, iremos colocar o Socket.io em prática em nosso projeto usando os método emit() e on().
Chegamos ao fim de nosso curso. Parabéns por ter concluído este treinamento. O que você poderá fazer agora? Quais são os próximos passos? Vamos falar sobre isso nessa aula final.
Além disso, vamos aprender como solicitar o Certificado Digital da Hcode Treinamentos em nosso site oficial.
JavaScript a Linguagem Top 1 em 2023. Você está pronto para aprender a fundo a Linguagem de Programação mais importante para o ambiente Web hoje em dia? Que tal aprender a criar projetos profissionais como o WhatsApp Clone, enviando mensagens em tempo real, ativando a câmera, tirando foto, acessando o microfone, gravando áudio e lendo arquivos PDF, tudo isso usando JavaScript? Ou será que chegou a hora de elevar o seu conhecimento em JavaScript para além de alert, console, Ajax e simples validações?
Qualquer que seja a sua motivação você está no lugar certo.
Este é o Curso Completo de JavaScript com 6 projetos reais!
Primeiro você aprenderá sobre a linguagem JavaScript desde o básico da estrutura, orientação a objetos e recursos avançados, depois como utilizá-la na prática construindo projetos reais passo a passo com dois especialistas em JavaScript que possuem mais de 10 anos de desenvolvimento Web e JavaScript.
Neste curso cobriremos mais de 38 horas de conteúdo em vídeo dos seguintes tópicos:
1) Estrutura da Linguagem JavaScript e como funciona os interpretadores JavaScript.
2) Objetos literais, arrays, Orientação a Objetos no JavaScript, JSON.
3) Trabalhe com códigos simples, e avançados, e o que existe de mais moderno no JavaScript como Firebase, aplicações em tempo real usando Socket e descobrindo boas práticas.
4) São 6 projetos que aplicarão o JavaScript na prática.
5) Um site completo com formulários e administração com autenticação e gráficos.
Ao final deste curso você estará apto a criar aplicações profissionais em JavaScript, levando suas aplicações web, sejam sites ou web apps a um nível profissional. Entenderá e se tornará um especialista Fullstack em JavaScript assim como o mercado tem procurado hoje em dia.
O acesso ao curso é vitalício e no final você ainda recebe o Certificado Digital de Conclusão com a Carga Horária do curso!
Te aguardo no curso!