Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA CompTIA Security+ Amazon AWS Microsoft AZ-900
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Personal Transformation Mindfulness Life Purpose Meditation CBT Emotional Intelligence
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Vue JS
Google Flutter Android Development iOS Development React Native Swift Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
Microsoft Power BI SQL Tableau Business Analysis Data Modeling Business Intelligence MySQL Data Analysis Blockchain
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Business Plan Startup Freelancing Online Business Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
2021-04-02 17:01:44
30-Day Money-Back Guarantee
Development Web Development GraphQL

Sıfırdan Her Yönüyle GraphQL ve Apollo

GraphQL ve Apollo ile Node.JS, Express ve MongoDB Üzerinde Real-Time API Geliştirin -> İNDİRİM KODU: PROMO54
Rating: 4.8 out of 54.8 (194 ratings)
1,002 students
Created by Mehmet Seven
Last updated 2/2019
Turkish
30-Day Money-Back Guarantee

What you'll learn

  • Modern web uygulamalarını tek başınıza geliştirebileceksiniz.
  • GraphQL ve Apollo ile Real-Time çalışan API geliştirebileceksiniz.
  • Node JS ve React ile yetkilendirme işlemlerini yapabileceksiniz.
  • Optimistic UI ile gelişmiş kullanıcı deneyimleri yaratabileceksiniz.
  • Scalable dosya ve dizin yapısı kurgulayabileceksiniz.
  • Node JS, GraphQL, Apollo, MongoDB ve React'ı aynı proje üzerinde kullanabileceksiniz.

Course content

16 sections • 146 lectures • 9h 41m total length

  • Preview01:41
  • Node.JS ve React
    00:43
  • Preview13:50
  • Hatırlatma
    00:34

  • Proje Tanıtımı
    02:42
  • Preview01:41
  • Express Kurulumu
    02:41
  • GraphQL Kurulumu
    02:56
  • GraphQL Schema
    04:17
  • Root Query Nedir Nasıl Tanımlanır
    05:51
  • Resolve Fonksiyonu
    03:41
  • GraphiQL Üzerinde Sorguları Çalıştırmak
    04:07
  • GraphQLID Veri Tipi
    01:24
  • Director Type
    02:50
  • İlişkiler (Resolve fonksiyonu parent parametresi)
    05:02
  • Preview04:56
  • GraphQLList-2
    03:11
  • Bilgilendirme (mLab)
    00:13
  • mLab MongoDB Bağlantısının Sağlanması
    07:12
  • mLab Düzeltme
    02:43
  • Ortam Değişkenlerinin Hazırlanması (dotenv)
    02:46
  • MongoDB Şemalarının Oluşturulması
    04:25
  • İlk Mutation (addMovie)
    09:31
  • addDirector Action'ı nın Yazılması
    06:40
  • Resolve Fonksiyonlarını MongoDB'ye Geçirmek
    06:12
  • GraphQLNonNull ile Zorunlu Alanlar Belirlemek
    03:19

  • React Projesinin Oluşturulması
    04:30
  • Preview02:29
  • MovieList Component'inin Hazırlanması
    01:24
  • React'de GraphQL Sorguları Yazmak ve Çalıştırmak
    05:40
  • Filmlerin Listelenmesi ve Loading Indicator Gösterilmesi
    04:40
  • Query Bileşeni ile Sorgu Çalıştırmak
    04:00
  • NewMovieForm Bileşeninin Hazırlanması
    06:22
  • Query Dosyasının Oluşturulması
    03:17
  • NewMovieForm State'i nin Hazırlanması
    03:43
  • Mutation Kullanımı (addMovieMutation)
    11:18
  • Refetch Mekanizması
    02:28
  • UI Entegresi
    06:44
  • Form için Stil Tanımlaması
    01:04
  • Antd UI Kit Kurulumu ve Modal Kullanımı
    05:39
  • getMovieQuery Sorgusunun Yazılması
    06:20
  • Film Detaylarının Modal İçerisinde Gösterilmesi
    03:27
  • Yönetmen Filmleri Animasyon İşlemleri
    03:33
  • Form Reset İşlemi
    02:36

  • Neden GraphQL Schema Dili ?
    05:39
  • Apollo Server Express Kurulumu
    04:38
  • typeDefs ve Resolvers Nedir?
    05:33
  • Non-Nullable Field Belirtmek
    01:29
  • Veri Tipleri
    02:00
  • Custom Tip Tanımları Yapmak
    05:50
  • Argümanlar ile Çalışmak
    09:36
  • Listeler ile Çalışmak
    04:07
  • İlişkisel Veriler ile Çalışmak
    05:08
  • İlişkisel Veriler ile Çalışmak - 2
    05:47

  • Mutations - 1 (createDirector)
    07:05
  • Mutations - 2 (createMovie)
    05:35
  • Spread Operator
    01:14
  • Input Type
    03:54

  • Real World Project Structure - 1
    05:45
  • Real World Project Structure - 2 (Context)
    04:26
  • Real World Project Structure - 3 (Resolvers)
    05:47
  • Real World Project Structure - 4 (Types)
    04:41
  • Real World Project Structure - 5 (Mutation Resolvers)
    04:31
  • Real World Project Structure - 6 (Query Resolvers)
    00:49
  • Real World Project Structure - 7 (Schema)
    00:46

  • Proje Tanıtımı
    06:10
  • Server'ın Ayağa Kaldırılması
    09:30
  • Dotenv Kurulumu
    01:10
  • MongoDB Bağlantısı
    03:05
  • MongoDB User Model
    02:38
  • createUser Mutation - 1
    03:28
  • createUser Mutation - 2
    04:34
  • createUser Mutation - 3
    05:49
  • createUser Mutation - 4 (bcrypt parola şifreleme işlemi)
    07:52
  • User Query
    01:42
  • Users Query
    02:50
  • Snap Modelinin Oluşturulması
    01:23
  • createSnap Mutation
    07:23
  • Snap Query
    01:47
  • Snaps Query
    01:21
  • Snap User Query
    04:43
  • User Snaps Query
    02:15

  • signIn Mutation
    07:19
  • Jsonwebtoken ile Token Oluşturmak
    05:12
  • createUser Token
    01:03

  • Create React App
    03:28
  • Create React App - 2
    01:18
  • Apollo Client Kurulumu
    02:06
  • UI Entegresi
    01:27
  • UI Entegresi - 2
    02:26
  • UI Entegresi - 3
    01:07
  • Routing Yapısının Oluşturulması
    04:04
  • Header NavLink
    03:00
  • Form State Yönetimi - Signup 1
    02:56
  • Queries Dosyasının Oluşturulması
    02:45
  • Mutation'ın Çalıştırılması - Signup 2
    06:12
  • Loading ve Hata Gösterimi - Signup 3
    03:07
  • Form Validasyonu - Signup 4
    02:46
  • Form Rest İşlemi - Signup 5
    02:25
  • Form State Yönetimi - Login 1
    02:15
  • Mutation'ın Çalıştırılması - Login 2
    04:22
  • Loading ve Hata Gösterimi - Login 3
    00:26
  • Form Validasyonu - Login 4
    01:09
  • Form Reset İşlemi - Login 5
    01:04

  • Token'ı Local Storage'a Kaydetmek
    03:40
  • Authorization Header
    03:51
  • Token Verify (JWT)
    01:42
  • Active User Context Ataması
    01:03
  • Active User Resolver
    01:43
  • Session Wrapper'ın Yazılması
    06:44
  • Yönlendirme İşlemleri
    02:37
  • Refetch Yapısının Kurulması
    03:08
  • Active User Header ve Profile Sayfası
    05:33
  • Logout
    05:50
  • Profil Sayfası
    04:21
  • Auth Component
    07:08

Requirements

  • Temel seviye JavaScript ve React bilgisi.

Description


Giriş

Bu bölümde REST ve GraphQL'in ne olduğunu, farklarını ve neden GraphQL'e geçmeniz gerektiğini öğreneceksiniz. 

Query, Mutation, Subscription gibi GraphQL'in temel yapı taşlarını bu bölümde teorik olarak öğreneceksiniz.


GraphQL Schema Language

GraphQL ile ilgili karşınıza çıkabilecek her türlü yazım şeklinden ve metodolojiden bahsetmeye çalışıyorum. Şema ve tip tanımlarımızı öncelikle JavaScript ile nasıl yapabileceğimizi öğreneceğiz. Sonra da aynı işlemi daha basit ve anlaşılır şekilde yapmamızı sağlayan GraphQL şema dilini öğreneceğiz. Böylelikle karşınıza çıkabilecek her türlü şema tanım şeklini kullanan kodları okuduğunuzda rahatlıkla anlamlandırabileceksiniz.


Real World Project Structure

Projeleri sırf örnek olsun diye geliştirmiyoruz. Gerçek dünyada yapılan projelere nasıl başlanıp, nasıl ilerleniyorsa aynısını kurs üzerinde uyguluyoruz. Böylelikle kursu bitiren biri rahatlıkla yeni projeler geliştirebilir kıvama geliyor.

GraphQL ile geliştirilen projelerde, sürdürülebilir dizin ve dosya yapısının nasıl olması gerektiğini detaylı olarak anlatıyorum. Kurs içerisinde, bu başlık için başlı başına bir bölüm bulunuyor.


Tech Stack

Projelerimizi backend tarafını "Node.JS, Express, GraphQL, Apollo Server ve MongoDB" oluştururken frontend tarafını "React ve Apollo Client" oluşturuyor.


Movie App Projesi

Pratik anlamda GraphQL'in temellerini öğrenmeye ve ilk adımlarımızı atmaya bu projede başlıyoruz.

Backend'de Node.JS, Express ve GraphQL kullandığımız bu projenin veritabanını MongoDB ve front-end tarafını da React ve Apollo ile geliştirdik.

Bu bölümde salt JavaScript ile GraphQL şemaları inşa etmeyi ve tip tanımlarını yapmayı öğreneceksiniz.

Bu bölümde genel olarak aşağıdaki kavramlara hakim olacaksınız.

  • Express ile GraphQL kurulumu

  • GraphQL Schema

  • Root Query

  • Resolver

  • GraphQLID

  • GraphQLList

  • GraphQLNonNull

  • Relations

  • Custom Type

  • Apollo Client

  • React Apollo Module

  • Refetch

  • QUERY, MUTATION

  • GraphiQL


Easysnap Projesi

Bu bölümde genel olarak aşağıdaki kavramlara hakim olacaksınız.

  • Apollo Server

  • Subscriptions

  • GraphQL Playground

  • Optimistic UI

  • Authentication (JWT)

  • Deploy


Authentication

GraphQL ile Token (JWT) tabanlı kimlik doğrulama işlemlerinin nasıl yapılacağını öğreneceksiniz. Gerek server, gerek client tarafında yapılması gereken işlemlere hakim olacaksınız.


Real-time API Geliştirmek

Twitter'ın hazırladığı API'yi görmüşsünüzdür. Birisi tweet attığı anda bu tweet'i gerçek zamanlı olarak yakalayabilirsiniz. Biz de hazırladığımız easysnap projesinde benzer bir yapı geliştiriyoruz. Bir kullanıcı snap attığı anda bundan haberdar oluyor ve tüm kullanıcılara gerçek zamanlı olarak gösterebiliyoruz.

Real-time API geliştirme konusunu Subscriptions bölümünde detaylı olarak öğreneceksiniz. Hem sunucu tarafında hem de client tarafında yapmanız gereken işlemleri öğrenmiş olacaksınız.


Optimistic UI

Sanırım Optimistic UI'ın ne olduğunu aşağıdaki gif açık bir şekilde ortaya koyuyor.

Aynı iş farklı iki yöntem. Solda bütün UI loading state ile yönetiliyor. Mesaj yazılıp "send" butonuna basıldığı anda UI üzerinde "loading" ifadesi gösteriliyor ve "loading" işlemi tamamlanana kadar herhangi bir işlem yapamıyoruz.

Ancak sağda Optimistic UI kullanılıyor. Tıpkı Facebook'un yaptığı gibi. Mesaj gönderildiği anda sadece o mesaj ile alakalı "loading" ifadesi gösteriliyor. Ve kullanıcı yeni bir işlem yapmak için beklemek zorunda kalmıyor.

Biz de kursta "easysnap" projesinde snap atarken benzer yapıyı kullanacağız. 
Apollo Client bize bu imkanı sağlıyor. Bu süreçleri yönetmeyi hiç olmadığı kadar kolaylaştırıyor.


Deploy

Hazırladığımız projenin deploy süreçlerinin nasıl yönetileceğini bu bölümde konuşuyoruz.

Projenin Node + GraphQL + Apollo backend'ini Heroku üzerine deploy ediyoruz.

React + Apollo frontend'ini de Surge sh üzerinde deploy ediyoruz.

Who this course is for:

  • Fullstack web uygulamaları geliştirmek isteyen,
  • GraphQL ve Apollo ile Real API geliştirmek isteyen,
  • React ve Apollo Client ile etkileşimli modern arayüzler geliştirmek isteyen,
  • Gerçek dünya projelerinin nasıl geliştirildiğini öğrenmek isteyen herkes.

Instructor

Mehmet Seven
Bilişim Sistemleri Mühendisi
Mehmet Seven
  • 4.2 Instructor Rating
  • 3,558 Reviews
  • 9,489 Students
  • 5 Courses

Sakarya Üniversitesi Bilişim Sistemleri Mühendisliği bölümünden mezun oldum. Üç yıl süreyle Koç Holding'de Yazılım Geliştirme Mühendisi olarak görev yaptım. Sakarya Üniversitesinde bir yıl süreyle Yazılım Eğitmeni olarak görev yaptım.  

JavaScript ve sağlamış olduğu teknolojiler ile ilgileniyorum. Üniversitelerde düzenlenen teknoloji konulu konferanslara katılarak bilgi ve tecrübelerimi aktarmaya çalışıyorum. Kariyerime yeni fikirler üretmeye çalışan şirketimizde devam ediyorum. 

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.