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.
