|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/graphql-apollo-egitimi/
课程评论：没有评论
本课程“从零开始全方位的 GraphQL 和 Apollo（Sıfırdan Her Yönüyle GraphQL ve Apollo）”旨在帮助学习者全面掌握 GraphQL 和 Apollo。 课程内容涵盖： * **GraphQL 入门**：介绍 REST 和 GraphQL 的区别，以及为何选择 GraphQL。学习 GraphQL 的核心概念，如 Query、Mutation 和 Subscription。 * **GraphQL Schema Language**：学习使用 JavaScript 和 GraphQL 模式语言定义 Schema 和 Type，以便更好地理解各种模式定义。 * **真实项目结构**：强调项目开发的真实性，教授可持续的目录和文件结构，使学习者能够独立开发新项目。 * **技术栈**：后端使用 Node.JS、Express、GraphQL、Apollo Server 和 MongoDB；前端使用 React 和 Apollo Client。 * **Movie App 项目**：通过实际项目演示 GraphQL 基础，包括使用 Node.JS、Express、GraphQL、MongoDB、React 和 Apollo Client 进行开发。学习使用 JavaScript 构建 GraphQL schema、定义 type、Express 集成、Root Query、Resolver、ID、List、NonNull、Relations、Custom Type、Apollo Client、React Apollo Module、Refetch、Query、Mutation 和 GraphiQL。 * **Easysnap 项目**：深入学习 Apollo Server、Subscriptions、GraphQL Playground、Optimistic UI、JWT 身份验证和部署。 * **身份验证**：学习使用 JWT 进行 Token 身份验证，包括服务器端和客户端的处理。 * **实时 API 开发**：通过 Easysnap 项目学习如何实现类似 Twitter 的实时通知功能，重点讲解 Subscription。 * **Optimistic UI**：理解并应用 Optimistic UI 模式，提升用户体验，让用户在等待操作完成时仍可进行其他交互。 * **部署**：学习将 Node + GraphQL + Apollo 后端部署到 Heroku，以及将 React + Apollo 前端部署到 Surge.sh。
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 LanguageGraphQL 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 StructureProjeleri 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 StackProjelerimizi backend tarafını "Node.JS, Express, GraphQL, Apollo Server ve MongoDB" oluştururken frontend tarafını "React ve Apollo Client" oluşturuyor. Movie App ProjesiPratik 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 kurulumuGraphQL SchemaRoot QueryResolverGraphQLIDGraphQLListGraphQLNonNullRelationsCustom TypeApollo ClientReact Apollo ModuleRefetchQUERY, MUTATIONGraphiQLEasysnap ProjesiBu bölümde genel olarak aşağıdaki kavramlara hakim olacaksınız.Apollo ServerSubscriptionsGraphQL PlaygroundOptimistic UIAuthentication (JWT)DeployAuthenticationGraphQL 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ştirmekTwitter'ı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 UISanı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.DeployHazı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.
