|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/nextjs-ve-apollo-ile-proje-gelistiriyoruz/
课程评论:没有评论
## Next.js 和 Apollo GraphQL 项目开发课程总结 本课程将使用 React.js 和 Next.js 构建一个旅游目的地列表应用。该应用将展示中国所有 81 个城市的旅游景点,允许用户对景点进行评论,并计算评论的平均评分和各评分等级的百分比。此外,课程还将包括一个用于添加新景点的页面,以及一个用于评论的验证类,方便在其他地方复用。 **项目流程:** 1. **界面构建:** 首先创建应用的用户界面。 2. **Apollo 连接:** 使用 Apollo GraphQL 连接到后端服务。 3. **后端准备:** 提供预设的 Nest.js 后端项目,用户只需完成 MongoDB 数据库的设置(建议使用 MongoDB Atlas)。 4. **查询与变更:** 提供 GraphQL 查询和变更操作的代码,方便用户直接使用。 5. **Nest.js 安装:** 指导用户安装 Nest.js(虽然后端逻辑在此课程中不涉及)。 **核心技术栈:** * React.js * Next.js * Apollo GraphQL * Timeago.js * Chakra UI **课程重点:** 本系列课程专注于前端开发,包括: * 环境搭建 * 用户界面开发 * 验证类实现 * 与后端(Apollo GraphQL)的连接
Merhaba, React.js ve Next.js kullanarak geliştireceğimiz projemize hoş geldiniz. Bu projemizde Graphql kullanarak bir tatil yerlerini listelediğimiz uygulama geliştireceğiz. Uygulamamızın akışı şu şekilde olacak. İlk önce 81 tane ili listeleyeceğiz ve seçilen ile eklenen tatil yerleri, gezilecek yerler vs. görüntülenebilecek. Daha görüntülenen yerlere yorum yapma özelliğini ekleyeceğiz. Yapılan yorumların ortalaması verilen her yıldızın yüzdesini de ayrı bir şekilde göstereceğiz. Ayrıca mekan ekleme sayfasını da oluşturacağız bu sayfamız için ve yorum ekleme modalımız için kullanabileceğimiz bir validation sınıfı oluşturacağız. Bu oluşturacağımız validation sınıfını daha sonra kullanacağımız yerlere de hızlıca entegre edebiliriz. İlk önce ara yüzü oluşturduktan sonra Apollo ile bağlantımızı kuracağız. Projemizde kullanacağımız backend projesine hazır olarak erişebilirsiniz. Github repository linkini ekleyeceğim. Backend için sadece veritabanı kurulumu yapmak yeterli olacak. Backend uygulaması mongodb kullanıyor o yüzden mongodb atlas üzerinden veritabanı oluşturabiliriz. Kullanacağımız teknolojiler ise şu şekilde olacak:React.jsNext.jsApollo GraphqlTimeago.jsChakra UIAyrıca graphql query ve mutationlarımızı hazır olarak Github'a ekleyeceğim oradan kopyalayıp uygulamamız içerisinde kullanabilirsiniz. Backend uygulamamız nest.js kullanarak çalışıyor o yüzden ilk önce bilgisayarınıza nest.js'i yükleyin. Fakat backend tarafında her hangi bir şekilde işlem yapmayacağız sadece projemizi ayağa kaldıracağız. Bu serimiz tamamen frontend development üzerine olacak. Kursun genel akışı ise şu şekilde:Gerekli kurulumların yapılması.Ara yüzValidation SınıfıBackend ile bağlantı