Hackathon với Firebase

Mình có nhận một task hỗ trợ các thí sinh tham dự hackathon, giải quyết vấn đề có nhiều bạn đã đăng ký tham gia nhưng chưa có nhóm, vì vậy cần xây dựng công cụ giúp các bạn giới thiệu về bản thân mình cũng như tìm được đồng đội phù hợp và xin lập nhóm.

Chỉ cách ngày thi khoảng gần 2 tuần, thời gian mình có được là 2 buổi tối vì ban ngày mình bận việc khác, gần bằng thời gian các bạn thi Hackathon luôn, tuy nhiên mình phải “thi" solo và output cuối cùng là sản phẩm dùng được thực sự chứ không thể là prototype.

Vì nhiều lý do, từ việc thời gian rất gấp, UI/UX của app chưa được thiết kế kỹ, cho đến việc truyền thông và vận hành nên hiệu quả mang lại chưa cao. Nếu có thể tốt hơn cho lần sau thì ngay khi thí sinh apply sẽ chuyển trực tiếp đến trang hướng dẫn và trang ghép team, kèm theo hệ thống thông báo qua email thường xuyên thì sẽ hữu ích hơn cho các bạn rất nhiều, tuy nhiên ở bài này mình sẽ chủ yếu nói về mặt kỹ thuật.

Tìm giải pháp:

Mình làm fullstack, cần một database để lưu danh sách thí sinh, team và các request, cùng một vài API để đăng nhập, tương tác qua lại, và giao diện để hiển thị thông tin. Vấn đề là không có kinh phí cũng như không có server sẵn, nên mình chọn các giải pháp free cho đúng tinh thần. Có định thử một số service như Heroku, now.sh, tuy nhiên tốc độ quá chậm nên phải bỏ. Thậm chí mình còn định thử Google Sheets làm database và Google Script xử lý logic, rồi cũng tỉnh táo nghĩ lại thấy cái script có vẻ nản nản nên thôi, hú hồn.

Chợt nhớ lại cách đây 1 năm mình có gặp 1 bạn trong team phát triển Google Firebase, bạn có giới thiệu về Firebase Cloud Functions, mình đã rất thích thú vì nghĩ đến một ngày chẳng còn phải lo các công việc chán ngán như setup server, maintain system, pen test nữa, àh mà quên Firebase thì sinh ra để hỗ trợ mobile app, không biết có làm webapp được không, để xem có gì nào:

Cloud:

• Firebase Authentication: Xác thực tài khoản và tạo profile cho thí sinh
• Firebase Cloud Functions: Endpoint validate và xử lý logic
• Firebase Cloud Firestore: Cơ sở dữ liệu lưu thông tin các team và các request
• Firebase Realtime Database: Lưu log chat
• Firebase Hosting: Chạy webapp

Client:

• create-react-app: Tạo nhanh template react app
• react-recontext: Quản lý state của app
• material-ui: UI framework phổ biến nhất cho react

Ok đầy đủ rồi đấy, stack có vẻ hợp lý, mình có thể xây dựng một webapp hoàn toàn bằng Firebase nhỉ. Trong list trên thì có duy nhất là react-recontext do mình đẻ ra thì còn lại đều là lần đầu tiên dùng đến, Firebase trước đó chỉ dùng Analytics, Crashlytics, FCM là cùng, react cũng toàn làm app chứ có làm web bao giờ, cơ mà xét thấy project cũng nhỏ nên ngại gì không thử cái mới. Và cuối cùng là không quên kiểm tra limitation của gói Firebase Free (Spark) với số lượng thí sinh ~300 thì không cách nào xài hết được, mình quyết định bắt tay vào chiến đấu.

Và sản phẩm cuối cùng ở đây: https://junctionxhanoi.web.app/

Trải nghiệm và Bài học

Và đây là tổng hợp một số kinh nghiệm mình rút ra được:

Cons:

• Chủ quan là rất tai hại, dính nhiều lần vẫn chưa chừa, lúc đầu mình nghĩ scope project quá đơn giản nên không lường trước các vấn đề phát sinh, thời gian mình tốn nhiều nhất là define team up rules and predict test case.
• Cũng vì chủ quan nên mình tiết kiệm thời gian không sử dụng typescript cũng không setup babel compiler khi viết Cloud Functions, không async await là một điều cực kỳ tệ hại, mình phải lồng đến 5 nested promise functions. Thật kinh khủng.
• Firebase chưa hỗ trợ sandbox nên bạn sẽ phải debug trực tiếp trên production (nightmare), trải nghiệm debug là khá tệ
• Mình dùng gói free nên Cloud Functions không cho connect outbound, đồng nghĩa không gửi email custom được. Tuy nhiên Firebase cho phép gửi 3 email theo template về việc xác thực tài khoản (đăng nhập, xác nhận email, quên mật khẩu). Mình nghĩ có thể lách bằng cách đổi nội dung các email có sẵn này để gửi cho user, tuy nhiên chưa có thời gian để thực hiện.
• Hiện tại Firebase chỉ có support datacenter ở US và EU, chưa có ở Asia, cũng chưa rõ là bao giờ sẽ có nên tốc độ kết nối khá chậm, mình cũng gặp phải 1 vài lần event listener bị delay, tuy nhiên vẫn thấy nhanh hơn heroku nhé.

Pros:

• Thật tuyệt là mọi thứ đều miễn phí.
• Bạn thậm chí còn có thể không dùng đến Cloud Functions mà connect trực tiếp từ client đến database, security rule rất linh động nên hoàn toàn có thể yên tâm mà tuỳ biến và đẩy một phần logic đơn giản của mình về cho client, tiết kiệm resource của server khá nhiều
• Tính năng realtime cực bá đạo, 99% các thay đổi trên app đều là realtime, thậm chí lúc đầu mình không hề có ý định làm cái roomchat nhưng vì nó quá quá đơn giản, chỉ cần 1 styled component, 1 line to connect component state and database, done!
• Mình có join Firebase Alpha Announce và được biết team đang thử nghiệm firebase emulator (early access) dù mình chưa có thời gian “trên tay" nhưng thấy có nhiều phản hồi rất tốt, nên vấn đề trải nghiệm debug chắc sẽ sớm được cải thiện.
• All-in-one, một điều mình hướng tới là giữ cho project được lean, nên khi sử dụng mọi thứ chung một chỗ mình sẽ đỡ rất nhiều thời gian maintain, cài cắm, config các kiểu.

…Còn nhiều thứ lắm mà lúc làm quên không note giờ không nhớ nổi mà chia sẻ với các bạn mới buồn chứ….

Kết luận

Việc sử dụng Firebase và Cloud Functions thực sự không quá ngọt ngào như hình dung, tuy nhiên về tổng quan thì vẫn là một công cụ để hỗ trợ phát triển sản phẩm tốt và đầy hứa hẹn, đặc biệt là khi Google vẫn đang đầu tư rất lớn và team đang đặt nhiều nỗ lực để nâng cấp Firebase, mang tới cho tất cả mọi người cơ hội ứng dụng một phần sức mạnh của gã khổng lồ Google Cloud. Firebase thực sự là một môi trường rộng lớn và còn quá nhiều thứ mình chưa có cơ hội để sử dụng đến, như là Performance, Test Lab, ML Kit, Funels, Predictions…. rất nhiều và rất nhiều, mình tin ai đó chỉ cần làm chủ được 80% Firebase sẽ có được một sản phẩm rất tốt.