Nhật ký làm Notas - Kỳ đầu

Vấn đề

Cũng tròn một tuần kể từ bài viết Làm ứng dụng ghi chú - Notas mà tôi đã bật mí với bạn đọc trước đó. Trong suốt thời gian vừa rồi, tôi gần như tập trung hoàn toàn vào công việc này. Cái nhìn ban đầu của Notas đã và đang dần lộ ra rõ nét như ban ngày và tôi nghĩ quá trình xây dựng Notas khá thú vị, vì thế càng hữu ích hơn nếu ghi lại nhật ký phát triển ứng dụng tiện ích đầu tay của mình.

Nhưng trước khi bắt đầu kể, xin có một vài lời muốn nói!

Chỉ sau một hai bài viết trên Facebook (trước đây tôi rất ít đăng bài lên Facebook, từ trang cá nhân cho đến hội nhóm) thì có vẻ như nhiều người khá mất kiên nhẫn trước những bài viết "dài". Gọi là nhiều chữ nhưng những bài viết ra chỉ có độ dài biến thiên trong khoảng 1000 chữ đến dưới 2000, mà theo như tôi thấy thì điều đó cũng... đâu có dài lắm. Thầm nghĩ có lẽ mọi người đang quen dần với xu hướng thông tin "nhanh" nên đối với một bài viết có nội dung dài, hẳn là rất choáng ngợp.

Tôi nghĩ rằng một bài viết thành công là bài viết thuyết phục được người đọc, không liên quan nhiều đến dài hay ngắn, miễn sao họ cảm thấy người viết đang trình bày vấn đề một cách nghiêm túc thì đã là thành công bước đầu. Mà bài viết dài, cốt là để dẫn dắt người đọc vào ngữ cảnh, để cho họ hiểu bối cảnh, để từ đó dễ thuyết phục hơn. Nhưng nói gì thì nói, nếu đã không đọc thì có bắt ép cũng không thể. Hy vọng bạn đọc hiểu những gì tôi đang nói, để từ đó có cái nhìn khách quan cho những gì mà tôi viết ra.

Quay lại vấn đề!

Tuần vừa rồi, tôi chủ yếu là nghiên cứu tất cả các trường hợp liên quan đến logic xử lý của một ứng dụng ghi chú. Khi bắt đầu nói "Tôi sẽ làm ứng dụng ghi chú", nghe có vẻ dễ dàng (kể cả tôi lúc đó cũng nghĩ là nó dễ) nhưng vấn đề chỉ phát sinh khi bạn thực sự bắt tay vào làm một cái gì đó.

Cách làm

Thường thì trước khi làm, ai cũng dành một khoảng thời gian để suy nghĩ xem mình cần làm gì, chuẩn bị những gì và nên làm như thế nào.

Khi làm Notas cũng vậy. Như ở bài viết trước, tôi xác định các bộ khung và thư viện (framework/library) để làm ứng dụng. Nhiều cái tên rất thân thuộc như Nuxt.js, Tailwind và thư viện DaisyUI. Đây là những công cụ mà tôi đã quen sử dụng, tận dụng được lợi thế đó để đẩy nhanh quá trình phát triển Notas.

Vì có dự tính Opensource, nên việc dành thời gian suy nghĩ cho cấu trúc cũng là một vấn đề. Thực ra một cấu trúc dù tốt đến đâu cũng không thể mang ra áp dụng cho tất cả các trường hợp được. Tôi đang nghĩ đến một kiến trúc phù hợp thì hợp lý hơn, nghĩa là nó rõ ràng, đọc hiểu nhanh chóng, từ đó đẩy nhanh quá trình đóng góp mã hoặc sửa chữa nếu có. Cấu trúc thư mục của Notas được chia ra theo vị trí của nhũng thành phần trong mảnh ghép tạo nên Notas.

Về kiến trúc, được chia thành 3 lớp (layer) chính đó là GUI, Logic và Adapter. Trong khi GUI là giao diện, Logic là một tầng xử lý dữ liệu lấy từ Adapter, và Adapter là nơi để lấy dữ liệu. Adapter là thành phần có thể triển khai lại theo cách mà bạn thích, chỉ cần đảm bảo đủ các hàm lấy dữ liệu là có thể cắm vào hoạt động như một cơ sở dữ liệu cho Notas.

Adapter đơn giản nhất tôi đang xây dựng là LocalStorage của trình duyệt. Chỉ cần trữ lưu dữ liệu và lấy ra trong bộ nhớ cục bộ này là đủ để thử nghiệm xem liệu Adapter có hoạt động được như mong muốn. Cho đến bây giờ thì tôi chưa gặp vấn đề gì với Adapter cả, có lẽ mọi thứ đang đi đúng hướng.

Trình soạn thảo có lẽ trái tim của Notas, như lời gợi ý từ một người bạn làm thế nào để dễ đa dạng trình soạn thảo, thì tôi đã thiết kế để tách riêng soạn thảo thành các thành phần (components) trong Vue. Nghĩa là bạn có thể dễ dàng thêm bất kỳ trình soạn thảo nào mà bạn thích, miễn là làm sao triển khai (implements) đầy đủ các phương thức cần có của một trình soạn thảo. Hai cái tên được tích hợp ban đầu là Tiptap và SimpleMDE, ngoài ra, còn rất nhiều cái tên khác nữa như là CKEditor và TinyMCE... cũng rất tiềm năng tích hợp.

Kết quả tuần đầu tiên

Về cơ bản, giao diện của Notas phiên bản Desktop đã được định hình. Gồm có 3 cột tương ứng danh sách thư mục, danh sách ghi chú và khung soạn thảo ghi chú. Giao diện chưa được chau chuốt cho lắm vì cốt là định hình được các nút tính năng, sau đó rất có thể cần lời khuyên của nhiều người hơn về UI/UX cho Notas.

Hiện tại tôi đang triển khai Adapter đơn giản nhất để lưu trữ dữ liệu là LocalStorage của trình duyệt. Dữ liệu được lưu dưới dạng JSON để dễ dàng xử lý. Đây cũng là một trong những Adapter mà sẽ xuất hiện trong Notas, ngoài ra bạn cũng có thể tự triển khai lại Adapter lưu trữ dữ liệu nơi mà bạn muốn. Sau đó, tôi sẽ viết thêm một vài Adapter dành cho SQLite và Turso để đồng bộ hóa ghi chú trực tuyến.

Notas đã có thể thêm/sửa/xóa thư mục, thêm/sửa/xóa ghi chú - là các tính năng cơ bản nhất của một ứng dụng ghi chú. Ngoài ra, một vài tính năng cũng hữu ích khác như là ghim/bỏ ghim ghi chú lên đầu mục, đặt/gỡ mật khẩu cho ghi chú và Thùng rác cũng đã hoạt động (với một vài lỗi - nhưng không đáng kể :D).

Khó khăn

Có khá nhiều khó khăn mà tôi đang phải đối mặt.

Đầu tiên là thời gian, một vấn đề mà không khóc không được. Mỗi buổi tối chỉ dành được một vài tiếng để tập trung vào Notas vì ban ngày là thời gian cho công việc chính. Nhưng ngoài viết mã ra, cũng có nhiều việc khác cần phải làm như nghiên cứu, phân tích tính năng, cũng như lên phương án xử lý cho các vấn đề đang nhìn ra trước mắt.

Một trong những vấn đề đang thấy đó là đặt mật khẩu cho ghi chú. Hmm... cứ cho người dùng cài đặt một mật khẩu rồi sau đó sử dụng để khóa/mở khóa chẳng phải rất dễ sao? Nhưng hãy nhớ ai cũng có thể đọc mã thì chẳng phải ai cũng sẽ biết cách xử lý mật khẩu như thế nào hay sao? Vì thế việc bẻ khóa mật khẩu ở máy khách há sẽ rất dễ dàng. Nhưng đừng lo, tôi đã nghĩ ra một giải pháp để tăng tính bảo mật cho phần này, chỉ là chưa có thời gian để kiểm chứng. Hy vọng sang tuần tôi sẽ có thời gian để thử nghiệm.

Cuối cùng là vấn đề đồng bộ. Một ứng dụng ghi chú có thể trở nên vô nghĩa nếu thiếu đi mất tính năng này. LocalStorage chỉ lưu trữ được cục bộ cho nên Adapter này chắc chắn không thể dùng để đồng bộ được. Thay vào đó, tôi sẽ tận dụng Turso để làm một cơ sở dữ liệu trực tuyến, cái khó ở đây là làm sao thiết lập được cấu hình kết nối đến Turso và làm thế nào để người dùng thiết lập cấu hình cho Adapter một cách dễ dàng nhất.

Tổng kết

Với tất cả những gì đã làm được, Notas đã có thể sử dụng được các thao tác cơ bản, bên cạnh đó là rất nhiều khó khăn mà đang nhìn thấy. Nhưng tôi không phải là một người nghiêm túc với việc đặt mục tiêu cho lắm, mà mang hơi hướng của một kẻ "cứ làm đi, rồi sẽ xong cả thôi"!