Lập trình tốc độ: Xây Dựng Ứng Dụng Đầu Tiên Với Wasp

Trong bài viết này, chúng ta sẽ cùng nhau xây dựng ứng dụng web đầu tiên với Wasp. Bài viết sẽ hướng dẫn bạn từ bước khởi tạo dự án mới, cấu trúc thư mục và file, tạo các trang cơ bản, kết nối cơ sở dữ liệu đến việc chạy và kiểm tra ứng dụng.

Khởi Tạo Dự Án Mới Với Wasp

Cài Đặt Wasp

Trước khi bắt đầu, hãy đảm bảo rằng bạn đã cài đặt công cụ dòng lệnh của Wasp. Nếu chưa, bạn có thể cài đặt nó thông qua npm:

npm install -g @wasp/cli

Khởi Tạo Dự Án

Sau khi đã cài đặt Wasp CLI, bạn có thể tạo dự án mới bằng lệnh sau:

wasp new my-first-wasp-app
cd my-first-wasp-app

Lệnh này sẽ tạo ra một thư mục dự án mới với tên my-first-wasp-app và chuyển bạn vào thư mục đó.

Cấu Trúc Thư Mục Và File Trong Dự Án Wasp

Khi bạn khởi tạo dự án Wasp, bạn sẽ thấy một số thư mục và file quan trọng sau:

main.wasp: Đây là file chính nơi bạn định nghĩa cấu trúc và logic của ứng dụng.
src/: Thư mục chứa mã nguồn React và server.
ext/: Thư mục chứa các file mở rộng và cấu hình tùy chỉnh.

Dưới đây là cấu trúc cơ bản của dự án:

my-first-wasp-app/
├── ext/
├── src/
│   ├── client/
│   │   ├── MainPage.js
│   │   └── ...
│   ├── server/
│   │   └── ...
├── main.wasp
└── package.json

Tạo Các Trang (Pages) Cơ Bản

Định Nghĩa Trang Chính

Trong Wasp, các trang được định nghĩa trong file main.wasp. Để tạo trang chính (MainPage), bạn cần thêm đoạn mã sau vào main.wasp:

page Main {
  route: "/"
  component: MainPage
}

Tạo Thành Phần React Cho Trang Chính

Tiếp theo, bạn cần tạo thành phần React tương ứng trong thư mục src/client/. Tạo file MainPage.js với nội dung sau:

import React from 'react';

const MainPage = () => {
  return (
    <div>
      <h1>Welcome to My First Wasp App!</h1>
      <p>This is the main page of your application.</p>
    </div>
  );
};

export default MainPage;

Cập Nhật Định Nghĩa Trang Chính

Đảm bảo rằng main.wasp đã được cập nhật đầy đủ:

page Main {
  route: "/"
  component: MainPage
}

Kết Nối Cơ Sở Dữ Liệu

Wasp hỗ trợ kết nối cơ sở dữ liệu một cách dễ dàng. Trong ví dụ này, chúng ta sẽ tạo một thực thể (entity) Task để quản lý các công việc.

Định Nghĩa Thực Thể

Thêm đoạn mã sau vào main.wasp để định nghĩa thực thể Task:

entity Task {
  description: string
  isDone: boolean
}

Tạo API Để Quản Lý Thực Thể

Tiếp theo, bạn cần tạo các API để quản lý thực thể Task. Thêm đoạn mã sau vào main.wasp:

route Tasks {
  method: GET
  handler: tasksHandler
}

route CreateTask {
  method: POST
  handler: createTaskHandler
}

Tạo Thành Phần React Để Hiển Thị Và Thêm Task

Cập nhật MainPage.js để hiển thị danh sách Task và thêm Task mới:

import React, { useState, useEffect } from 'react';

const MainPage = () => {
  const [tasks, setTasks] = useState([]);
  const [newTaskDescription, setNewTaskDescription] = useState('');

  useEffect(() => {
    fetch('/tasks')
      .then(response => response.json())
      .then(data => setTasks(data));
  }, []);

  const handleAddTask = () => {
    fetch('/createTask', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ description: newTaskDescription, isDone: false }),
    })
      .then(response => response.json())
      .then(task => setTasks([...tasks, task]));
  };

  return (
    <div>
      <h1>Welcome to My First Wasp App!</h1>
      <p>This is the main page of your application.</p>
      <input
        type="text"
        value={newTaskDescription}
        onChange={(e) => setNewTaskDescription(e.target.value)}
      />
      <button onClick={handleAddTask}>Add Task</button>
      <ul>
        {tasks.map(task => (
          <li key={task.id}>
            {task.description} - {task.isDone ? 'Done' : 'Not Done'}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default MainPage;

Chạy Và Kiểm Tra Ứng Dụng

Sau khi đã hoàn tất các bước trên, bạn có thể chạy ứng dụng bằng lệnh:

wasp start

Ứng dụng sẽ được khởi động và bạn có thể truy cập nó thông qua trình duyệt web tại địa chỉ http://localhost:3000.

Kiểm Tra Ứng Dụng

Mở trình duyệt và truy cập http://localhost:3000. Bạn sẽ thấy trang chính của ứng dụng với khả năng hiển thị danh sách Task và thêm Task mới. Hãy thử thêm một vài Task để kiểm tra chức năng của ứng dụng.

Kết Luận

Qua bài viết này, bạn đã học cách xây dựng ứng dụng web đầu tiên với Wasp từ việc khởi tạo dự án, cấu trúc thư mục và file, tạo các trang cơ bản, kết nối cơ sở dữ liệu đến việc chạy và kiểm tra ứng dụng. Wasp thực sự là một công cụ mạnh mẽ và hữu ích giúp đơn giản hóa quy trình phát triển ứng dụng web, tiết kiệm thời gian và giảm thiểu lỗi. Hy vọng rằng qua bài viết này, bạn sẽ cảm thấy tự tin hơn khi sử dụng Wasp trong các dự án của mình.