Projeto Completo: XD, NodeJs, MongoDB, React Native e React

Vamos desenvolver passo à passo um projeto completo Full Stack com Adobe XD, NodeJs, MongoDB, ReactJs e Native

4.25 (791 reviews)
Udemy
platform
Português
language
Development Tools
category
Projeto Completo:  XD, NodeJs, MongoDB, React Native e React
2,855
students
18 hours
content
Jul 2020
last update
$19.99
regular price

What you will learn

Criação de Protótipos Web e Mobile com Adobe XD

Desenvolvimento Backend e API com NodeJS

Desenvolvimento Web com ReactJs

Desenvolvimento Mobile com React Native

Description

Eu acredito que a melhor maneira de aprender é fazendo. É com essa motivação que elaborei esse treinamento, sem enrolação e direto ao ponto. Borá criar passo à passo um projeto de tarefas completo com Backend desenvolvido em NodeJs armazenando tudo no MongoDB, ReactJs no frontend Web e React Native para o aplicativo Android & iOS.

Content

Introdução

Qual será o projeto que vamos desenvolver e o que vamos aprender com ele?

Por que Prototipar é essencial para o design de Apps e Site?

Prototipação de Interfaces com Spoiler da versão web e mobile do nosso projeto

Prototipação da versão Web

Criando a tela Home
Criando a tela de Tarefas
Criando a tela de integração com a versão Mobile por QrCode
Componentizando o projeto
Exportando os assets do projeto
Deixando o protótipo interativo
Conclusão do protótipo da versão Web

Prototipação da versão Mobile

Criando a tela Home
Criando a tela de Tarefas
Criando a tela de integração com da versão Mobile com a Web por QrCode
Criando a tela de Splash
Componentizando o projeto
Exportando os assets do projeto
Deixando o protótipo interativo
Conclusão do protótipo da versão Mobile

Desenvolvimento do Backend em NodeJs e MongoDB

Introdução ao NodeJs e ao MongoDB
Instalação das ferramentas e configuração do ambiente de desenvolvimento
Criando e configurando o projeto e aplicando a estrutura MVC
Conectando com o MongoDB e criação da Task Model
Cadastrando uma nova Tarefa
Middleware de Validação de Tarefa
Atualizando uma Tarefa
A questão da Sincronizando de data e hora da API com o MongoDB
Listando todas as tarefas
Configurando URL padrão no Insomnia
Exibindo uma tarefa específica
Removendo uma tarefa
Atualizando o status da tarefa
Exibindo as tarefas atrasadas
Filtro de tarefas do dia
Filtro de tarefas da semana
Filtro de tarefas do mês
Filtro de tarefas do ano
Exportando o teste das rotas no Insomnia
Finalização do Backend
REFACTOR: Ajuste nas Rotas GET do backend

Desenvolvimento do Frontend Web

Criando o projeto ReactJs e organizando a estrutura de pastas e arquivos
Criando o Header com Styled Components
Criando o Footer com Styled Components
Criando os Filtros de Tarefas
Criando os cartões de Tarefas
Aplicando uma fonte padrão utilizando o Google Fonts
Conectando o Frontend com o Backend e Listando as tarefas
Deixando os ícones das Tarefas Dinâmicos
Exibindo as tarefas atrasadas
Criando a tela de tarefas
Cadastrando uma tarefa
Desenvolvendo a navegação de tela
Carregando os dados de uma tarefa
Atualizando as informações da tarefa e redirecionando a página
Validando os campos obrigatórios
Refatorando a API para permitir atualizar o status de uma tarefa do passado
Removendo uma tarefa
Desenvolvendo a tela do QrCode
Ocultando o sino quando não tem notificações
Refatorando as Notificações no componente Header
Gerando o QrCode
Salvando informações no navegador do usuário
Ajustes finais e Finalizando o projeto Web

Desenvolvimento do Mobile

Introdução ao React Native com Expo
Instalação e configuração do ambiente React Native com Expo
Criação do projeto, tela home e estrutura de pastas e arquivos
Criação do componente Header de maneira dinâmica
Criação do componente Footer de maneira dinâmica
Criação dos Filtros
Criação do Componente Task Card e o Título da Home
Introdução ao Axios - Conectando o App com a API
Listando as tarefas cadastradas e formatando data e hora
Deixando os ícones do tipo de tarefa dinâmicos na listagem
Ativando os filtros da tela home
Listando as tarefas atrasadas
Criando a tela de tarefas
Personalizando os inputs de data e hora para Android e iOS
Definindo a navegação entre as telas
Cadastro de tarefa
Capturando o macaddress do celular e passando o id da terafa entre as telas
Carregando os dados de uma terafa
Atualizando os dados de uma tarefa
Remover uma tarefa
Leitura de QrCode e Sincronizacão do App com o projeto Web
Conclusão do App

Reviews

Ricardo
January 31, 2023
Se você não souber nada de JS, Node JS, MongoDB e etc, não compre este curso. Professor só vai codando e você fica boiando. O início é uma blz com o Adobe XD. Depois, cada um por si. Caso tenha algum problema nas instalações, se vire pq nas instalações dele, dá tudo certinho. Outro problema é que vc não terá nenhum suporte do professor.
Augusto
September 5, 2022
O instrutor precisa validar mais vezes com o aluno se os passos estão rodando na IDE e talvez explicar os por menores da logica de programação da linguagem. Do mais o passo a passo e a técnica são muito bem explicados
Anderson
August 19, 2022
Ótimo curso, o conteúdo é bem prático e a didática do professor é muito boa. Recomendo para quem tem noções básicas de programação.
Adriana
July 7, 2022
A partir da aula 76 não dá para acompanhar. A biblioteca DateTimePicker que 's utilizada para pegar data no mobile e cadastrar tarefas foi depreciada e notei que o professor não responde as perguntas (o curso foi gravado em 2020). Eu estava muito empolgada com o curso, mas faltou isso funcionar para ser um bom curso. Deixo a sugestão do Professor gravar aula com uma nova biblioteca/atualização e também ensinando como fazer o deploy nas lojas AppStore para a parte mobile.
Douglas
June 7, 2022
O curso em si é muito bom, muito bem explicado. O motivo de eu ter dado uma avaliação mediana é em relação ao suporte recebido, é muito ruim. Como as bibliotecas que foram utilizadas são de 2020, quem utiliza em 2022 naturalmente vai ter algumas incompatibilidades, e isso o que ocorre com alguns alunos, que fazem perguntas de alguns meses e não recebem nenhum amparo nas suas dificuldades. Se você já consegue se desenrolar no JS, então esse curso é para você.
Diego
April 13, 2022
O curso é muito bom, porém o instrutor deixou o curso de lado e não responde as perguntas dos alunos a mais de 1 ano. Por esse motivo estou dando 1 estrela.
Eduardo
February 6, 2022
Falta atualizar o curso, que com tão pouco tempo já tem várias partes desatualizadas. e que já não funcionam mais com as atualizações dos pacotes. Também faltou ensinar como gerar o APK
Fabricio
January 16, 2022
Tive um pouco de dificuldade em executar o conteudo apresentado, pois ele está desatualizado e eu não conheço muito sobre o assunto, mas isso forçou a buscar mais informações sobre o react e o expo.
Edevaldo
December 6, 2021
O Professor é muito bom aprendi muito, mas o curso tem muitas coisa obsoletas, o curso precisa de atualização urgente.
Joallisson
November 15, 2021
Só não dei 5 estrelas pois a qualidade de captura da tela está deixando um pouco a desejar, mas fora isso o curso está sendo excelente até agora
Elio
October 15, 2021
O seu curso é muito bom, pena ver que o professor esteve sempre ausente quando precisaram de ajuda. No meu caso consegui finalizar todo o projeto passando por algumas dificuldades, principalmente no DateTimePicker porque versão já não era utilizada e também no início que é necessário fazer um upgrade ao expo SDK para conseguir visualizar a transição de telas.
Romilson
June 17, 2021
Muito bom o curso e a forma que é passado o conteúdo facilita para pessoas que estão entrando no mundo do react agora como eu.
JOSE
June 17, 2021
O conteúdo é bom, mas o instrutor não responde as dúvidas e isso atrasa muito a conclusão. Baixei o projeto ao final, comparei os codigos e mesmo iguais não consigo editar as tarefas. Enfim, acredito que faltam alguns com pequenas correções e mais atenção aos alunos.
Marcelo
June 5, 2021
O conteúdo do curso é excelente e o aprendizado flui com o tempo. Só não é 5 estrelas porque o professor não responde NENHUMA questão. Se você for iniciante em programação, esse não é o curso pra você! Pois quando cruzar com erros cotidianos, vai ter que se virar no Google pra descobrir a solução. Dependendo da sua persistência, pode acabar desistindo por causa disso. Não é o meu caso, mas eu me solidarizo com quem está buscando um curso mais próximo do iniciante.
Rodrigo
April 21, 2021
O curso é realmente muito bom, vai direto ao assunto e o professor tem uma ótima didática. Mesmo sendo básico, vale ter alguma noção prévia para não ficar perdido nas informações.

Charts

Price

Projeto Completo:  XD, NodeJs, MongoDB, React Native e React - Price chart

Rating

Projeto Completo:  XD, NodeJs, MongoDB, React Native e React - Ratings chart

Enrollment distribution

Projeto Completo:  XD, NodeJs, MongoDB, React Native e React - Distribution chart
2873764
udemy ID
3/15/2020
course created date
4/9/2020
course indexed date
Bot
course submited by