Hướng dẫn phát triển ứng dụng web Full Stack với AWS Amplify và ReactJS

Giới thiệu

Chào các bạn, hôm nay mình sẽ chia sẻ một hướng dẫn chi tiết về cách xây dựng một ứng dụng web fullstack bằng AWS Amplify kết hợp với ReactJS. Chúng ta sẽ tạo ra một trình phát nhạc đơn giản, nơi người dùng có thể phát nhạc và tương tác với các bài hát.

Tech stack

• AWS Amplify: Nền tảng giúp phát triển và triển khai ứng dụng web.
• AWS AppSync: Dịch vụ giúp xây dựng API GraphQL.
• AWS S3: Lưu trữ nội dung tĩnh như âm thanh.
• AWS DynamoDB: Cơ sở dữ liệu NoSQL để lưu trữ thông tin bài hát.
• AWS Cognito: Quản lý xác thực người dùng.
• ReactJS: Thư viện JavaScript để xây dựng giao diện.
• GraphQL: Ngôn ngữ truy vấn API cho các ứng dụng.
• Material UI: Thư viện giao diện người dùng.

Về AWS Amplify

AWS Amplify là một công cụ mạnh mẽ giúp các nhà phát triển frontend xây dựng và triển khai ứng dụng web và di động trong thời gian ngắn mà không cần nhiều kiến thức về điện toán đám mây. Dưới đây là một số tính năng nổi bật của AWS Amplify:

Biến ý tưởng thành ứng dụng chỉ trong vài giờ

Phát triển giao diện người dùng, thêm xác thực, lưu trữ, và kết nối với dữ liệu thời gian thực mà không yêu cầu chuyên môn sâu về điện toán đám mây.

Triển khai các khung web trên toàn cầu

Triển khai ứng dụng dễ dàng với quy trình làm việc dựa trên Git, tích hợp CI/CD giúp mang lại trải nghiệm mượt mà cho người dùng.

Từ frontend sang full-stack nhanh chóng

Amplify cho phép bạn nhanh chóng chuyển từ phát triển frontend sang full-stack bằng các tính năng TypeScript.

Cam kết và cộng tác tự tin

Quy trình CI/CD được quản lý giúp các nhà phát triển dễ dàng hợp nhất và triển khai các thay đổi mà không lo các vấn đề phát sinh.

Tính năng nổi bật của Amplify

• Data: Tạo API an toàn và theo thời gian thực.
• Auth: Quản lý xác thực và kiểm soát truy cập.
• Storage: Lưu trữ nội dung và dữ liệu.
• Functions: Thêm hàm tùy chỉnh và biến môi trường.
• Extensibility: Mở rộng và tùy chỉnh các dịch vụ AWS.
• Mobile: Xây dựng backend cho ứng dụng di động và web.

Hãy cùng bắt đầu với việc lập trình nào!

Khởi tạo dự án

Create React App

Chúng ta sẽ bắt đầu bằng việc tạo một ứng dụng React mới:

npx create-react-app musicplayer
cd musicplayer
npm start

Cấu hình Amplify CLI

Tiếp theo, chúng ta cần cài đặt và cấu hình AWS Amplify CLI:

npm install -g @aws-amplify/cli

Sau đó, bạn chạy lệnh sau để cấu hình Amplify CLI:

amplify configure

Thực hiện theo hướng dẫn để kết nối với tài khoản AWS và thiết lập người dùng IAM.

Khởi tạo Amplify

Chạy lệnh sau để khởi tạo Amplify cho dự án:

amplify init

Giờ đây, bạn đã sẵn sàng để sử dụng dịch vụ AWS Amplify cho ứng dụng của mình.

Thêm Đăng ký, Đăng nhập và Đăng xuất

Để thêm chức năng xác thực, chạy lệnh sau:

amplify add auth

Chọn phương thức đăng ký bằng email, sau mỗi thay đổi, hãy nhớ chạy lệnh amplify push để cập nhật.

Cài đặt các package cần thiết:

npm i aws-amplify @aws-amplify/ui-react

Cập nhật file App.js để cấu hình xác thực:

import { Amplify, API, graphqlOperation, Storage } from 'aws-amplify';
import { withAuthenticator } from '@aws-amplify/ui-react';
import configure from "./aws-exports";
Amplify.configure(configure);
function App({ signOut, user }) {
//...return (...)
}
export default withAuthenticator(App);

Tạo API bằng DynamoDB và GraphQL

Chúng ta sẽ sử dụng GraphQL API để quản lý các bài hát:

amplify add api

Chọn API GraphQL và định nghĩa mô hình dữ liệu như dưới đây:

type Song @model {
  id: ID!
  name: String!
  description: String!
  filePath: String!
  heart: Int!
  author: String!
}

Sau khi đẩy các thay đổi lên AWS, bạn sẽ tìm thấy các API trong thư mục graphql.

Chức năng Lấy Danh sách Bài hát

Sử dụng API GraphQL để lấy danh sách bài hát:

import { API, graphqlOperation } from 'aws-amplify';
import { listSongs } from "./graphql/queries";
const getSongs = async () => {
    try {
      const songData = await API.graphql(graphqlOperation(listSongs));
      setSongs(songData.data.listSongs.items);
    } catch (error) {
      console.error('error on get songs: ', error);
    }
}

Chức năng Tăng Lượt Thích

Thêm chức năng tăng lượt thích cho bài hát:

import { updateSong } from "./graphql/mutations";
const increaseHeart = async index => {
    try {
      const song = songs[index];
      song.heart += 1;
      delete song.createdAt;
      delete song.updatedAt;
      const songData = await API.graphql(graphqlOperation(updateSong, { input: song }));
      const songList = [...songs];
      songList[index] = songData.data.updateSong;
      setSongs([...songs]);
    } catch (error) {
      console.error('error on increase heart: ', error);
    }
}

Lưu trữ File Âm thanh trên S3

Chúng ta sẽ sử dụng AWS S3 để lưu trữ các file âm thanh:

amplify add storage

Chọn loại nội dung và quyền truy cập trước khi hoàn thành với amplify push.

Triển khai chức năng phát/tạm dừng nhạc bằng cách truy cập URL file âm thanh:

import { Storage } from 'aws-amplify';
const toggleSong = async index => {
    //...logic để phát nhạc
}

Triển khai và Lưu trữ Ứng dụng

Cuối cùng, bạn có thể triển khai ứng dụng của mình với hướng dẫn chi tiết từ AWS: Triển khai ứng dụng web với AWS Amplify

Tài nguyên

• AWS Amplify
• Hướng dẫn Hoàn chỉnh từ Sam Williams
• Material UI
• Tài liệu Amplify

Cảm ơn bạn đã theo dõi bài viết này! Nếu có bất kỳ câu hỏi nào, hãy để lại bình luận và nhớ nhấn nút upvote nhé. Hẹn gặp lại trong các bài viết sau.
source: viblo