Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. GraphQL
Code

Viết một Ứng dụng với GraphQL, React Native, and AWS AppSync: Phần Back-End

by
Difficulty:IntermediateLength:MediumLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Final product image
What You'll Be Creating

Trong các bài hướng dẫn này, tôi sẽ hướng dẫn cho bạn cách tạo và tương tác với cơ sở dữ liệu GraphQL bằng AWS AppSync và React Native. Ứng dụng này sẽ có tính năng thời gian thực và offline, một thứ sẵn có với AppSync. Trong bài viết này, chúng ta sẽ bắt đầu bằng cách thiết lập back-end với AppSync.

Một điều tuyệt vời về AppSync là nó sử dụng GraphQL - một tiêu chuẩn nguồn mở và một mô hình mới mạnh mẽ cho web và mobile back-end. Nếu bạn muốn tìm hiểu thêm về GraphQL, nó khác với REST API như thế nào và cách nó có thể làm cho công việc của bạn trở nên dễ dàng hơn, hãy kiểm tra một số nội dung về GraphQL của chúng tôi ở đây trên Envato Tuts+.

  • GraphQL là gì?

Trong các bài viết này, chúng ta sẽ xây dựng một ứng dụng du lịch được gọi là Cities. Bạn đã bao giờ xem một chương trình trên kênh thực phẩm ưa thích của mình và thấy một chiếc xe tải chở thực phẩm tuyệt vời hoặc nói chuyện với một người bạn vừa trở về từ chuyến đi du lịch và đã thực sự hứng thú với quán bar Owl Bar đã ghé thăm hay chưa? Vâng, tôi sẽ không dài dòng nữa, chúng ta sẽ xây dựng một ứng dụng để bạn theo dõi tất cả những nơi thú vị mà bạn muốn ghé thăm, cũng như các thành phố nơi họ ở.

Ứng dụng này sẽ minh hoạ và cài đặt tất cả các tính năng mà bạn sẽ cần để xây dựng một ứng dụng React Native và GraphQL thực tế, đầy đủ.

Hãy kiểm tra repo GitHub của dự án để xem ứng dụng đã hoàn thành và làm theo.

Đôi chút về Công nghệ

AppSync cung cấp một cách dễ dàng để chạy với với một máy chủ GraphQL thời gian thực có thể mở rộng mà không cần phải tự tạo và duy trì nó.

Trong console của AppSync, chúng ta sẽ làm tất cả mọi thứ từ việc tạo ra lược đồ GraphQL để cung cấp cơ sở dữ liệu và resolver. Console cũng thiết lập Graphiql để chúng ta có thể kiểm tra và truy vấn cơ sở dữ liệu mà không cần bất kỳ thiết lập phụ nào.

Chúng ta sẽ cài đặt cấu hình này trên máy client của chúng ta, sẽ cho chúng ta một cách liền mạch hơn để tương tác với endpoint GraphQL của chúng ta!

AppSync sẽ cho phép bạn sử dụng một trong ba kiểu resolver: DynamoDB, Elasticsearch hoặc AWS Lambda. Chúng ta sẽ sử dụng DynamoDB trong hướng dẫn này.

AWS AppSync workflow source Amazon

Bắt đầu

Điều đầu tiên chúng ta cần làm là tạo một ứng dụng AppSync mới và thêm lược đồ cơ bản của chúng ta.

Ứng dụng của chúng ta sẽ cần lưu trữ hai bộ dữ liệu - một danh sách các thành phố và một danh sách các địa điểm mà chúng ta sẽ liên kết với từng thành phố trong danh sách - vì vậy giản đồ của chúng ta sẽ có hai loại dữ liệu chính (City & Location).

Để bắt đầu sử dụng AppSync, truy cập vào console của AWS và chọn AWS AppSync trong menu Services.

Choosing AWS AppSync in the AWS Console

Một khi chúng ta đã ở trong console của AppSync, chúng ta cần phải nhấp vào nút Create API:

AppSync dashboard

Bây giờ, chúng ta sẽ có tùy chọn đặt tên ứng dụng (tôi gọi là TravelApp), và chọn kiểu giản đồ (custom hoặc sample). Chúng ta sẽ chọn tuỳ chọn giản đồ custom, sau đó nhấp vào Create.

Màn hình kế tiếp sẽ là dashboard cho ứng dụng mới. Chúng ta sẽ thấy ngay một số thông tin hữu ích, bao gồm URL cho ứng dụng của chúng ta cũng như chế độ xác thực. Ở phía bên trái, bạn sẽ thấy một vài liên kết: Schema, Queries, DataSourcesSettings.

AppSync app dashboard

Hãy nhìn kỹ các tuỳ chọn ở đây trước khi bạn chuyển sang bước tiếp theo.

Tạo một Schema và cung cấp một Data Source

Điều tiếp theo chúng ta sẽ làm là tạo ra lược đồ mà chúng ta muốn sử dụng cho ứng dụng của chúng ta. Một lần nữa, lược đồ sẽ có một CityLocation.

Từ editor, nhấp vào tab Schema và tạo giản đồ cơ bản sau đây với hai loại và một truy vấn và nhấp vào Save:

The AppSync schema editor

Gắn Schema vào một Cơ sở dữ liệu

Bây giờ thì chúng ta đã tạo ra một giản đồ cơ bản, chúng ta cần gắn lược đồ này vào một cơ sở dữ liệu!

AppSync giúp làm điều này một cách rất dễ dàng. Nhấp vào nút Create Resources ở bên phải của màn hình. Chúng ta cần hai bảng cơ sở dữ liệu: một để lưu giữ các thành phố của chúng ta, và một để giữ các vị trí.

Chọn City, chấp nhận tất cả các giá trị mặc định và nhấp vào Create. Bạn sẽ nhận thấy rằng điều này sẽ tự động thêm một số truy vấn hữu ích, mutation và đăng ký vào giản đồ của chúng ta!

Tiếp tục và làm tương tự cho Location. Bây giờ chúng ta đã tạo thành công hai bảng cơ sở dữ liệu đi cùng với lược đồ của chúng ta, và cũng như một số truy vấn cơ bản, mutation, subscription và resolver sẽ ánh xạ sơ đồ vào các bảng đó (chúng ta sẽ khám phá resolver trong phần kế tiếp).

Bây giờ hãy nhìn vào những gì đã được tạo ra. Trong menu phía bên trái, nhấp vào Data Sources.

Bây giờ bạn sẽ thấy hai data source mà chúng ta vừa tạo ra!

AppSync data sources panel

Chạy một số truy vấn kiểm tra

Bây giờ chúng ta có Mutation và Subscription mới được tạo ra trong Schema của chúng ta, hãy thêm chúng vào định nghĩa Schema.

Để làm điều đó, cuộn xuống dưới cùng của Schema và cập nhật định nghĩa giản đồ như sau:

Tiếp theo, chúng ta có thể kiểm tra tất cả mọi thứ bằng cách tạo một mutation và sau đó là một truy vấn. Trong tab Queries, tạo ra mutation sau:

Việc này sẽ thêm một record Seattle vào bảng thành phố, với một id 00001.

Sau đó, tạo một truy vấn để lấy dữ liệu đó:

The AppSync Queries tab

Khi bạn nhấp vào nút play màu cam, bạn có thể chọn thực thi tion createCity hoặc truy vấn getCity. Chạy cả hai và bạn sẽ thấy dữ liệu thành phố Seattle đã được truy vấn và xuất ra ở phía bên phải của màn hình.

Nếu bạn muốn xem dữ liệu này được trình bày như thế nào trong cơ sở dữ liệu, bạn có thể khám phá bảng thành phố DynamoDB được liên kết từ tab Data Sources.

Resolver Ánh xạ Template

Bạn có thể tự hỏi làm sao mà truy vấn ánh xạ với cơ sở dữ liệu liền mạch đến thế. Câu trả lời là resolver!

Nếu bạn nhìn vào phía bên phải tab Schema của bảng điều khiển AppSync, bạn sẽ thấy một phần có tiêu đề Data Types. Phần này liệt kê tất cả các loại dữ liệu trong Schema của chúng ta. Ở bên phải mỗi trường, chúng ta thấy một heading có nhãn Resolver.

Resolver cơ bản là giao diện giữa lược đồ và cơ sở dữ liệu mà chúng ta đang sử dụng. Chúng ta có thể sử dụng resolver cho mọi thứ từ việc truy xuất cơ bản các phần tử đến các hành động phức tạp như kiểm soát truy cập.

Resolver được viết bằng một DSL được gọi là Velocity Templating Language (VTL). AppSync sẽ tự động cung cấp các resolver cơ bản khi tạo data source, nhưng chúng có khả năng thiết lập cấu hình cao. Tại thời điểm này, chúng ta không thực sự cần phải thay đổi nhiều trong resolver của chúng ta, nhưng hãy cùng tìm hiểu ba trong số các loại resolver chính mà bạn có thể cần phải làm việc trong thực tế. Chúng được kết nối với các hoạt động cơ bản sau đây:

  1. Lấy ra một phần tử bằng id của nó
  2. Lấy một danh sách các phần tử
  3. Đưa một phần tử vào cơ sở dữ liệu

Lấy về một phần tử theo ID

Trong tab Data Types, bên cạnh định nghĩa lược đồ, tìm getCity dưới mục Query và nhấp vào CityTable.

Data types

Việc này sẽ đưa bạn đến màn hình cấu hình resolver. Từ màn hình này, bạn sẽ thấy rằng có ba phần chính đối với một resolver:

  1. Tên Data Source
  2. Yêu cầu ánh xạ template
  3. Phần hồi ánh xạ template

Data source là bảng mà bạn muốn tương tác với nó.

Resolver for QuerygetCity

request mapping template mô tả cách cơ sở dữ liệu sẽ xử lý yêu cầu.

Ở đây, bạn có thể viết mapping template của riêng mình hoặc chọn từ các template đã được tạo trước cho các hành động cơ bản như lấy hoặc đặt một phần tử, cùng với những thứ khác.

Ở đây, bạn thấy template cho việc lấy về một phần tử.

Configure the request mapping template

response mapping template mô tả cách xử lý các phản hồi từ cơ sở dữ liệu.

Trong response template, chúng ta về cơ bản chỉ trả về context.result và gói nó trong hàm tiện ích $utils.toJson. Đây chỉ là một trong rất nhiều helper mà sẽ trừu tượng hoá một số boilerplate VTL. Hãy xem danh sách đầy đủ các phương thức tiện ích trong tài liệu chính thức.

Configure the response mapping template

Khi ứng dụng của bạn trở nên phức tạp hơn, chìa khóa để trở nên thành thạo AppSync là rành về làm việc với các mapping template này. Tôi mất vài giờ để hiểu cách nó làm việc, nhưng sau khi thử nghiệm nó trong một thời gian ngắn tôi có thể thấy nó mạnh mẽ như thế nào.

Chúng ta không có nhiều thời gian để xem xét tất cả các chi tiết của resolver mapping template, nhưng bạn có thể đọc Tài liệu tham khảo Resolver Mapping TemplateMapping Template Context để tìm hiểu thêm về chúng.

Bây giờ, chúng ta sẽ tiếp tục và hoàn thành lược đồ của chúng tôi.

Hoàn tất cấu hình AppSync

Chúng ta đã hoàn thành lược đồ, nhưng chúng ta còn một bước cuối cùng trước khi có thể bắt đầu tương tác với endpoint GraphQL mới của chúng ta từ ứng dụng React Native!

Bởi vì chúng ta sẽ lưu trữ tất cả các vị trí của chúng ta trong một bảng nhưng việc truy vấn chúng dựa trên thành phố mà chúng ta hiện đang xem, chúng ta sẽ cần phải tạo một index phụ để cho phép chúng ta truy vấn một cách hiệu quả các vị trí với một cityId cụ thể.

Để tạo một index thứ cấp, hãy chuyển đến Data Sources và nhấp vào liên kết Location Table.

Việc này sẽ dẫn bạn đến table view DynamoDB cho Bảng Vị trí. Ở đây, nhấp vào tab Indexes và tạo một index mới với một khóa cityId.

Create a secondary index in DynamoDB

Bạn có thể hạ thấp các đơn vị khả năng đọc và ghi thành 1 cho mục đích của bài hướng dẫn này.

Tiếp theo, chúng ta cần phải cập nhật truy vấn listLocations để chấp nhận cityId này như là một đối số, vì thế hãy cập nhật truy vấn cho listLocations như sau:

Bây giờ, chúng ta cần cập nhật listLocations của chúng ta để sử dụng index cityId mới này! Hãy nhớ rằng, chúng ta thật sự chỉ muốn các listLocations trả về một mảng các vị trí cho thành phố mà chúng ta đang tìm kiếm, vì vậy resolver listLocations sẽ lấy cityId làm tham số và chỉ trả về vị trí cho thành phố đó.

Để cho điều này hoạt động, hãy cập nhật request mapping template cho listLocations như sau:

Tóm tắt

Trong bài hướng dẫn này, chúng ta đã tạo ra back-end cho một ứng dụng React Native với endpoint GraphQL của chính nó. Chúng ta cũng đã tìm hiểu cách tạo và cập nhật các resolver và làm việc với lược đồ AppSync.

Bây giờ chúng ta đã hoàn tất cấu hình mọi thứ trong console, chúng ta có thể tiếp tục và tạo ra ứng dụng React Native của chúng ta! Hãy theo dõi bài viết tiếp theo, nơi tôi đi sâu vào ứng dụng React Native và cho hướng dẫn bạn cách liên kết React Native với AppSync.

Trong lúc chờ đợi, hãy tìm hiểu một số bài viết khác của chúng tôi về Phát triển ứng dụng React Native!

Một số hình ảnh được sử dụng là từ Amazon Web Services, Inc.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.