Criando uma aplicação do zero com Angular 4 e GraphQL
4.4 (8 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
30 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Criando uma aplicação do zero com Angular 4 e GraphQL to your Wishlist.

Add to Wishlist

Criando uma aplicação do zero com Angular 4 e GraphQL

Aprenda passo a passo a criar sua aplicação Full Stack com tecnologia em alta no mercado
4.4 (8 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
30 students enrolled
Last updated 8/2017
Portuguese
Curiosity Sale
Current price: $10 Original price: $40 Discount: 75% off
30-Day Money-Back Guarantee
Includes:
  • 3 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Criar projetos web com novas tecnologias como Angular CLI
  • (em breve!) Aumentar a qualidade do código com lint e testes
  • Aprimorar seu conhecimento em HTML, JS e CSS
  • Aprender a versão mais recente do Bootstrap e suas funções
View Curriculum
Requirements
  • Computador com acesso à Internet
  • Conhecimento básico de Javascript, HTML e CSS é ideal
  • Não é obrigatório saber Angular 1 ou 2!
Description

Este curso capacita o aluno a criar uma aplicação Full Stack (Frontend e Backend) utilizando Angular 4 como framework e GraphQL como motor do Backend. São abordados vários conceitos do GraphQL e também sobre ferramentas para auxiliar o desenvolvimento Frontend moderno, como Angular CLI, Material UI e Bootstrap 4. Ao final do curso, o aluno será capaz de criar um sistema web comunicando com um banco de dados SQLite utilizando GraphQL como camada de serviço.

Who is the target audience?
  • Iniciantes em Desenvolvimento Web
  • Pessoas com conhecimento básico de desenvolvimento web
  • Interessados em aprender Angular 4 na prática
Students Who Viewed This Course Also Viewed
Curriculum For This Course
23 Lectures
03:04:41
+
Introdução
3 Lectures 12:34

Na aula introdutória, vamos a uma apresentação do curso e falar sobre o que vai ser tratado.

  • Explicação dos objetivos do curso, bem como púbico alvo
  • Visualização da estrutura do curso
  • Alguns links úteis 
Preview 05:24

Vamos passo a passo instalar a versão full do Cmder (ferramenta de linha de comando otimizada) para Windows.

Instalar Cmder
03:32

Vamos instalar o Node juntamente com NPM no Windows.

  • Node é um Ambiente de desenvolvimento JavaScript para modularizar projetos web
  • NPM é o gerenciador de pacotes do Node, para instalar dependências no projeto
Instalar Node & npm
03:38
+
Setup
7 Lectures 58:23

Uma aula introdutória com teoria sobre GraphQL. Vamos revisar o que são tipos Query e seus campos, além de mutações e interfaces.

GraphQL: Linguagem de Consulta
09:01

Nessa aula vamos instalar algumas bibliotecas do Apollo e iniciar um graphiql server.

Configurando GraphQL server Apollo
05:02

Vamos criar connectors que vão inicializar o SQLite.

Atenção: No arquivo connectors.js Há um erro de sintaxe. Favor corrigir adicionando as vírgulas necessárias.

...
const db = new Sequelize('compra_materiais', null, null, {
...

Criando um banco de dados SQLite
05:08

Vamos atualizar os connectors criando Modelos de dados Cliente, Compras, Materiais e User. Vamos criar dados teste com a biblioteca  casual.

Modelo de dados - Cliente, Material e Compra
09:21

Vamos criar um arquivo resolvers que será responsável por traduzir requests GraphQL em operações do BD.


Atenção: Atente a uma vírgula na primeira linha do arquivo resolvers.js:

import { Cliente, Material, Compra, User } from './connectors';

Resolvers: Conectando GraphQL com Sequelise
11:00

Vamos definir o schema, que é a declaração das Queries e Mutações disponíveis á aplicação.

Definição de Schema
10:01

Na última parte desse capítulo vamos testar nosso trabalho realizando alguns requests através do GraphiQL.

UPDATE:

Pessoal, graças ao feedback de um dos alunos, identifiquei um problema na Query "addCompra". Por favor utilize o comando abaixo ao invés do descrito no vídeo:


mutation($data: String, $clienteId: String, $materialId: String) {
    addCompra(data: $data, clienteId: $clienteId, materialId: $materialId) {
    }
}

Assim que possível atualizarei a aula.



Testando as Querys com o Graphiql (leia descrição)
08:50
+
Frontend - Introducão
13 Lectures 01:53:44

Nessa aula introdutória ao Frontend vamos rever o que será necessário para nossa aplicação web funcionar.

  • Vamos rever os objetivos do problema
  • Vamos às ferramentas a serem usadas
Preview 05:59

Essa aula serve como introdução a HTML, CSS e JS, bem como motivação a estudo aprofundado.

Não há conceitos detalhados das três linguagens, pois cobrir o conteúdo em um vídeo seria impossível!

Verifique os links de recurso adicional para aprender mais!

Resumo de HTML, CSS, JS
04:50

Vamos criar um novo projeto Angular 4 com ajuda do CLI.

Criando um projeto ccom Angular CLI
06:08

Nessa aula vamos explorar o projeto CLI mais a fundo e verificar o NgModule.

Explorando o NgModule
08:07

Vamos aprender a configurar o projeto para atender várias URLs diferentes com o routing.module do Angular.

Configurando Router
07:16

Vamos começar a página de login adicionando um template HTML e estilizando com Material e Bootstrap.

Login Page
16:36

Na segunda parte do Login, vamos configurar o Apollo Client para obter uma conexão com o nosso server.

Login: parte 2
08:42

Vamos finalizar e testar o Login.

Login: Parte 3
09:15

Nessa aula vamos criar um componente Home, e adicionar template e Menu.

Home Page
07:19

Nessa aula, vamos a mais um componente do site: A página de Compras. Vamos criar o template e estilizar.

Página de Compras
09:35

Nessa aula vamos criar um componente para adicionar Compras, e criar a lógica JavaScript para enviar a Mutation para uma nova compra.

Nova Compra
09:43

Nova Compra: Parte 2
09:45

Nova Compra: Parte 3
10:29
About the Instructor
Arthur dos Santos Dias
4.5 Average rating
46 Reviews
311 Students
3 Courses
Web Developer

Sou formado em Engenharia da Informação pela Universidade de Ciências aplicadas em Hamburgo, Alemanha.

Atuo profissionalmente como Desenvolvedor Web especializado em Front End em uma empresa de consultoria renomada na Alemanha e no exterior. Trabalhei em diversos projetos com foco em digitalizar empresas tradicionais e aprimorar seus resultados. 

Iniciei minha carreira como estagiário em Java ainda no Brasil, e após ser selecionado para um intercâmbio na Alemanha, tive minha primeira experiência com Desenvolvimento web. Iniciei com PHP mas logo me apaixonei por javaScript. Há 5 anos trabalho com o framework Angular e constantemente me desafio a experimentar novas tecnologias.

Algumas das razões porque eu amo o que faço:

- O que mais me motiva a seguir esse caminho é a velocidade em que o cenário muda. Todos os dias pessoas trabalham e melhoram soluções para programar websites e aplicativos. Muito raramente você vai encontrar um problema sem solução, pois a comunidade cresce a cada dia mais.

- JavaScript é uma linguagem extremamente flexível. Antigamente era usado apenas para scripts no cliente. Hoje em dia é muito mais do que isso. JavaScript se tornou uma ótima solução para programar servidores, com frameworks como Node. Com JavaScript é possível criar aplicativos híbridos,  que rodam em dispositivos Android e iOS com o mesmo código. Isto não é possível de se alcançar quando se programa nativo para essas plataformas.

- Desenvolvimento Front End é fácil de começar a aprender! Com poucas horas uma pessoa sem conhecimento algum de programação consegue criar um simples formulário ou um site pessoal de imagens por exemplo. 

- Ao mesmo tempo que flexível, JavaScript é completo e consegue resolver  problemas complexos de sua aplicação. Há muito o que se aprender com a linguagem, e com experiência você aprende a usar boas práticas e direcionar seu código de forma optimal.


Esses são apenas alguns dos motivos pelos quais eu ❤︎ WebDev.



Massao Marcelo Massao
4.4 Average rating
8 Reviews
30 Students
1 Course
Programador Web/Mobile

Graduado em Ciência da Computação pela Universidade Federal de São Paulo, trabalho com desenvolvimento web desde 2012.

Entusiasta em desenvolvimento de aplicações híbridas para celular utilizando Ionic e React. Também conheço PHP, AngularJS, Sql, Less, Sass, Typescript e por aí vai.

Comecei com um canal no Youtube (Codeam) como hobby e recebi bons comentários que me fizeram levar esse hobby um pouco mais a sério.