Nhật ký làm Notas - Kỳ III

Vấn đề

Một tuần nữa lại trôi qua, đối với một người đang chú tâm vào làm một điều gì đó thì cảm giác thời gian trôi qua nhanh như cái chớp mắt. Việc thì vẫn còn đó nhưng quay đi ngoảnh lại đã là cuối ngày, tôi lại ngồi đây và loay hoay kể lại cho bạn đọc nghe về những gì đã làm được trong tuần vừa rồi.

Có thể nói tuần này nhìn chung nhẹ nhàng hơn so với các tuần trước vì tôi đã xử lý xong vấn đề đồng bộ của Adapter. Cũng như việc đồng nhất dữ liệu từ Adapter xuống LocalStorage. Có vẻ nó đã hoạt động tương đối ổn định, tôi không còn bị mất dữ liệu trong khi gõ nữa, và để biết điều đó có đúng hay không thì chỉ còn cách ngồi thực hành ngay trên Notas mỗi ngày. Chắc chắn rồi, từ giờ cho đến lúc kết thúc, tôi sẽ trong vai "chuột bạch" cho đến khi Notas chính thức được giới thiệu đến tất cả mọi người.

Vấn đề với Turso

Như đã bật mí, Adapter đầu tiên để đồng bộ dữ liệu trực tuyến có tên là Turso theo tên của một dịch vụ cung cấp máy chủ SQLite. Turso cho chúng ta tạo ra các máy chủ SQLite để lưu trữ dữ liệu với hạn mức cực kỳ ấn tượng. Ví dụ với tài khoản miễn phí, bạn có 9GB lưu trữ, 1 tỉ lần truy vấn đọc (read query) và 25 triệu truy vấn ghi (write query). Và bạn biết gì không, kể từ khi bắt đầu tích hợp Turso vào Notas, tôi mới chỉ đạt đến con số 3 triệu lượt đọc và 3 nghìn lượt ghi vào cơ sở dữ liệu. Thiết nghĩ nếu một mình dùng thì không biết bao giờ mới đạt đến hạn mức đã cho!

Để kết nối với Turso, cần phải sử dụng đến thư viện drizzle. Đây là một ORM khá mới nhưng đang tỏ ra có rất nhiều ưu việt. drizzle hỗ trợ nhiều driver kết nối đến các cơ sở dữ liệu SQL khác nhau như MySQL, Postgres, SQLite... cho đến cả cơ sở dữ liệu dựa trên Serverless như Cloudflare D1, Supabase, Turso...

drizzle cũng cần khai báo các schema để ánh xạ dữ liệu. Ban đầu, do chưa đọc hết tài liệu nên chưa biết cách để tối ưu các schema. Sau đó, tôi nhận ra drizzle còn hỗ trợ ánh xạ kiểu của dữ liệu được lưu trong SQLite về JavaScript.

Ví dụ dưới đây là một khai báo cho bảng folders:

import { sql } from "drizzle-orm";
import { text, integer, sqliteTable } from "drizzle-orm/sqlite-core";

const users = sqliteTable('folders', {
  id: text('id'),  
  isDelete: integer('isDelete'),  
});

isDelete thông thường sẽ nhận kiểu boolean trong MySQL hoặc PostgreSQL. Tuy nhiên trong SQLite không có kiểu dữ liệu boolean cho nên sử dụng kiểu integer với giá trị ngầm định 0 là false, 1 là true là một cách. Làm như thế, mỗi khi truy vấn dữ liệu cần phải qua một bước chuyển integer thành boolean để chuyển qua lại kiểu dữ liệu cần sử dụng trong mã.

drizzle hỗ trợ ép kiểu nếu ta khai báo đúng cách. Ví dụ trên có thể đơn giản hơn khi chỉ cần thêm một khai báo mode.

import { sql } from "drizzle-orm";
import { text, integer, sqliteTable } from "drizzle-orm/sqlite-core";

const users = sqliteTable('folders', {
  id: text('id'),  
  isDelete: integer('isDelete', { mode: 'boolean' }),  
});

Ngay lập tức drizzle hiểu isDelete mong muốn nhận giá trị boolean và nó sẽ tự động chuyển đổi dữ liệu một cách tự động trong các truy vấn.

Vấn đề với DaisyUI

Bên cạnh đó tôi cũng vừa mới cập nhật thêm giao diện tối (dark mode) cho ứng dụng, nhưng gặp một chút khó khăn.

Như bạn đã biết, DaisyUI là thư viện UI dựa trên Tailwind. Trong Tailwind, muốn tùy chọn giao diện theo chế độ dark/light mode, chúng ta có thể khai báo thêm prefix trước mỗi class. Ví dụ dưới đây khai báo mã màu nền gray-50 cho light mode, gray-900 cho dark mode.

<div class="bg-gray-50 dark:bg-gray-900">

</div>

Nhưng triết lý trong thiết kế của DaisyUI lại không làm như thế. Theo họ việc khai báo class với các tiền tố dark/light sẽ làm mã trở nên rối rắm và khuyến nghị sử dụng các mã màu chung. Các màu này được thay đổi dựa trên giao diện bạn chọn. Đây là danh sách các màu được khuyên dùng: List of all daisyUI color names | Colors.

Bạn đọc tham khảo thêm cuộc thảo luận về vấn đề này của DaisyUI tại darkMode: 'class' doesn't appear to be honored by daisyUI | Github Discussions.

Ngoài ra tôi cũng dành thời gian để xem cách cấu hình một ứng dụng PWA, vì chưa có kinh nghiệm với PWA cho nên mọi thứ còn đang rất mới mẻ. Hóa ra cấu hình cho PWA còn phức tạp hơn bao giờ hết vì nó phụ thuộc rất nhiều vào trình duyệt và cả hệ điều hành. Lấy ví dụ như Android và iOS có các cấu hình rất khác nhau. Cùng một tính năng nhưng iOS luôn đòi hỏi phức tạp và tỉ mỉ hơn Android rất nhiều lần.

Đây là nguồn giúp tôi tìm hiểu về PWA:

• Progressive web apps | MDN
• Progressive Web Apps | web.dev

Tôi đã sửa rất nhiều lỗi cũng như tối ưu hóa giao diện để Notas hoạt động mượt mà hơn. Logo cũng đã được hoàn thiện và sẽ công bố trong thời gian sắp tới.

Dự định tuần tới

Sang tuần, dự định của tôi là tối ưu hóa giao diện cho thiết bị di động, đồng thời tối ưu hóa cả cấu hình cho một ứng dụng PWA, từ lúc cài đặt cho đến khi sử dụng sao cho diễn ra một cách thuận lợi nhất có thể.

Cuối cùng còn một vấn đề nữa là mã hóa ghi chú. Tôi đã nghiên cứu cách mã hóa hai chiều cho Notas, về thuật toán và cả cách để mã hóa. Nhưng trước hết, hãy làm cho Notas hoạt động một cách ổn định đã vì mã hóa sẽ là một lớp nằm ở hai đầu dữ liệu vào/ra.