Mở cửa ra thế giới

Chương 2: Một nút mở cửa

Tú: Câu hỏi nhanh: buổi tổng duyệt trước khi mở quán là môi trường nào?

Chị Lan: Staging! Còn bàn khách thật là production.

Chị Lan: Hồi tập một, ngày khai trương, em làm giúp chị phần đưa trang lên mạng. Lần này chị muốn tự làm.

Tú: Được. Việc đưa món từ bếp ra bàn khách gọi là deploy, chị học rồi. Còn nơi đặt quán trên mạng gọi là hosting. Hosting giống thuê mặt bằng. Chị không cần xây nhà, chỉ cần thuê một chỗ đẹp, có điện nước sẵn, rồi dọn món vào.

Tú: Mỗi lần deploy có ba bước. Một: build, gói món lại cho gọn, như đóng hộp trước khi giao. Hai: chở hộp tới chỗ hosting. Ba: dọn lên bàn, và trang của chị có một địa chỉ để khách vào.

Chị Lan: Như chiếc xe máy giao hàng của quán! Đóng hộp, chở đi, giao tới tay.

Tú: Thêm một từ hay gặp: preview. Đó là bản xem trước, có địa chỉ riêng, gửi cho người nhà xem trước khi lên bản thật. Preview chính là buổi tổng duyệt của chương trước, chỉ khác là nó nằm trên mạng, ai có đường link cũng xem được.

Tú: Trong 1DevTool có bảng Deploy. Nó tự đọc dự án và đoán món của chị là loại gì, cần lệnh build nào, hộp nằm ở thư mục nào. Chị chọn nhà hosting, Vercel hoặc Cloudflare Pages. Dán mã truy cập một lần, mã được giữ trên máy chị.

Tú: Rồi chọn Target. Preview là bản tổng duyệt, Production là bản thật. Bấm Deploy, và xem nhật ký chạy ngay trong bảng.

Chị Lan: Không cần mở thêm trang nào. Chị thích.

Chị Lan: Bếp trưởng ơi, deploy bản preview của trang thanh toán cho chị nha.

Bếp trưởng AI: Dạ. Build xong, gửi xong. Đây là đường link bản preview. Chị và Bin mở trên điện thoại nếm thử trước nha.

Chị Lan: Người nhà nếm trước, khách nếm sau. Đúng bài rồi.

Tú: Nói thật vài điều nha chị. Một: nút Deploy trong 1DevTool nằm ở bản Pro. Bản miễn phí vẫn deploy được, chỉ là chị nhờ đầu bếp gõ lệnh giúp trong terminal. Hai: các nhà hosting thường có gói miễn phí, quán nhỏ là đủ.

Tú: Khách đông lên thì mới phải trả thêm. Ba: hosting giữ lại các bản cũ. Bản mới có lỗi thì quay về bản trước, giống nút lưu game của mình.

Tú: Từ mới: hosting, build, và preview.

Tú: Thử ngay: deploy một bản preview, mở đường link trên điện thoại, và nhờ một người nhà nếm thử trước.

Chương 3: Địa chỉ riêng

Tú: Ôn bài nhé: preview là gì?

Chị Lan: Bản xem trước để người nhà nếm, trước khi lên bản thật.

Chị Lan: Trang thật lên rồi, nhưng địa chỉ dài quá, toàn chữ với số lộn xộn, đuôi lại là tên của nhà hosting. Ai mà nhớ nổi?

Tú: Vì chị đang ở nhờ mặt bằng của nhà hosting, nên mang địa chỉ của họ. Chị cần một biển hiệu tên riêng: cà phê mây chấm vê en.

Chị Lan: Biển hiệu tên riêng thì phải mua ở đâu?

Tú: Ở các nhà cung cấp tên miền. Mỗi năm vài trăm nghìn đồng. Tên đó gọi là domain.

Tú: Nhưng máy tính không đi tìm theo tên, nó đi theo số nhà. Mỗi máy chủ có một dãy số, gọi là địa chỉ IP. DNS là cuốn danh bạ khổng lồ của internet. Khách gõ tên quán, danh bạ tra ra số nhà, trình duyệt chạy tới đúng nhà.

Chị Lan: Vậy khi mua tên miền, chị phải ghi tên quán vào danh bạ, kèm số nhà của nhà hosting.

Tú: Chính xác. Trang của nhà hosting sẽ chỉ cho chị cần ghi dòng nào. Ghi xong thì chờ vài phút, có khi vài giờ.

Tú: Còn một thứ nữa: HTTPS. Đó là ổ khóa nhỏ trên thanh địa chỉ. Không có ổ khóa, thông tin gửi đi như tấm bưu thiếp, ai cầm qua cũng đọc được. Có ổ khóa thì như phong bì dán kín.

Chị Lan: Sắp thu tiền khách mà gửi bằng bưu thiếp thì chết.

Tú: Tin vui là các nhà hosting thường tự gắn ổ khóa miễn phí. Chị gắn tên miền xong là có HTTPS luôn. Nhưng chị vẫn phải tự kiểm tra, đừng chỉ tin lời ai cả, kể cả lời đầu bếp AI.

Tú: Mở trang trong Browser panel của 1DevTool. Nhìn thanh địa chỉ là biết mình đang ở bếp nào. Localhost là bếp thử trên máy chị. Còn địa chỉ bắt đầu bằng https và có ổ khóa là bếp thật, khách đang thấy.

Chị Lan: Chị sẽ mở cả hai cạnh nhau, so từng chỗ.

Tú: Chị hình dung nhé: domain là biển hiệu, DNS là ông bảo vệ đầu hẻm chỉ đường, HTTPS là anh shipper giao phong bì dán kín, còn hosting là bà chủ cho thuê mặt bằng...

Chị Lan: Thôi thôi, đủ rồi em. Cả cái hẻm của em đông hơn quán chị rồi.

Tú: Từ mới: domain, DNS, và HTTPS.

Tú: Thử ngay: nghĩ ba tên miền cho dự án của bạn, tra xem còn trống không. Rồi bấm vào ổ khóa của một trang bạn hay dùng xem nó nói gì.

Chương 4: Tài khoản khách hàng

Tú: Ôn bài: DNS giống cái gì?

Chị Lan: Cuốn danh bạ tra tên quán ra số nhà.

Khách: Chị ơi, vậy làm sao app biết em là em, dù em ghé quán nào?

Chị Lan: Em sẽ có một tài khoản. Đăng nhập một lần, tem ở hai quán dồn chung một thẻ.

Khách: Vậy em có phải nhớ thêm một mật khẩu nữa không chị?

Chị Lan: Chị hỏi đầu bếp rồi trả lời em sau nha.

Tú: Mỗi khách có một account, một tài khoản, giống tấm thẻ thành viên có tên và số tem. Còn việc kiểm tra xem người đang gõ cửa có đúng chủ thẻ không, gọi là authentication. Xác thực. Cách phổ biến là email kèm mật khẩu.

Tú: Hoặc gửi một đường link đăng nhập vào email, khách khỏi phải nhớ mật khẩu.

Chị Lan: Bếp trưởng ơi, làm cho chị phần đăng nhập. Em tự viết từ đầu luôn hả?

Bếp trưởng AI: Dạ không nên chị. Đăng nhập là cửa chính của quán, kẻ trộm hay thử phá nhất. Em sẽ dùng một thư viện đăng nhập nổi tiếng, đã được rất nhiều trang dùng. Đây là kế hoạch, chị duyệt giúp em: thêm bảng khách hàng,

Bếp trưởng AI: trang đăng ký, trang đăng nhập, và gửi link đặt lại mật khẩu.

Chị Lan: Duyệt. Ổ khóa cửa chính thì mua loại tốt, không tự rèn.

Tú: Còn điều quan trọng nhất: quán không bao giờ được giữ mật khẩu thật của khách. Mật khẩu được cho vào máy xay. Ra một chuỗi ký tự lộn xộn, gọi là password hash. Xay rồi thì không ai ráp lại được trái cây ban đầu.

Chị Lan: Vậy khi khách đăng nhập, làm sao biết đúng mật khẩu?

Tú: Xay mật khẩu khách vừa gõ, rồi so hai ly sinh tố. Giống nhau là đúng người.

Tú: Mở Database panel, xem bảng khách hàng. Có tên, có email, có số tem. Và cột mật khẩu chỉ toàn ký tự lộn xộn.

Chị Lan: Đến chị là chủ quán cũng không đọc được mật khẩu của khách. Vậy mới yên tâm.

Tú: Đúng vậy. Lỡ sổ có bị lộ, kẻ xấu cũng chỉ cầm một đống sinh tố.

Tú: Từ mới: account, authentication, và password hash.

Tú: Thử ngay: hỏi đầu bếp xem dự án của bạn có lưu mật khẩu dạng hash không, và nhờ nó giải thích bằng lời dễ hiểu.

Chương 5: Thu tiền an toàn

Tú: Câu hỏi nhanh: password hash giống cái gì?

Chị Lan: Ly sinh tố. Xay rồi không ráp lại được trái cây.

Chị Lan: Giờ tới tiền. Chị định nhờ đầu bếp làm một ô cho khách gõ số thẻ ngân hàng, lưu vào sổ đơn luôn cho tiện.

Tú: Dừng! Chị ơi, cái này em phải nói to: quán mình không bao giờ tự cầm số thẻ của khách. Ở quán thật, chị đâu tự chế máy cà thẻ. Chị dùng máy của ngân hàng. Trên mạng cũng vậy: dùng một cổng thanh toán nổi tiếng.

Tú: Khách bấm thanh toán, được đưa sang trang của cổng thanh toán. Số thẻ chỉ nằm ở bên họ, quán không bao giờ thấy. Trả xong, cổng thanh toán bấm chuông báo về quán: đơn số này đã trả tiền. Cái chuông đó gọi là webhook.

Tú: Nghe chuông, quán mới đánh dấu đơn đã trả, cộng tem, và pha món.

Chị Lan: Vậy quán chỉ cần nghe chuông, không cần cầm thẻ của ai.

Tú: Cổng thanh toán gọi là payment gateway. Chuông báo gọi là webhook. Và cổng thanh toán nào cũng có chế độ thử, gọi là sandbox. Tiền đồ chơi, thẻ giả, để chị thử thoải mái ở bếp thử.

Chị Lan: Ơ, Mochi vừa giẫm lên bàn phím. Nó bấm thanh toán ba lần liền!

Tú: Không sao, mình đang ở sandbox. Mochi vừa tiêu ba lần tiền đồ chơi.

Chị Lan: May quá. Mà cũng hay: giờ chị biết phải kiểm tra, lỡ khách bấm ba lần thì app có trừ tiền ba lần không.

Tú: Để thử chuông, mở HTTP panel. Em đã lưu sẵn một yêu cầu giả làm cổng thanh toán, gửi tới địa chỉ webhook của quán. Có ô chọn môi trường: Local, Staging, Production. Đổi một chỗ là cả bộ yêu cầu chuyển sang bếp tương ứng.

Tú: Bên dưới là phần kiểm tra tự động: mã trả về phải là hai trăm, và đơn phải được đánh dấu đã trả.

Chị Lan: Vậy chị bấm Send là biết chuông có kêu đúng không, khỏi chờ khách thật.

Bếp trưởng AI: Chị ơi, chìa khóa của cổng thanh toán em để trong file env của từng môi trường. Chìa thử cho bếp thử, chìa thật cho bếp thật.

Chị Lan: Và không bao giờ dán vào ảnh chụp màn hình. Tập trước chị nhớ đời rồi.

Tú: Từ mới: payment gateway, webhook, và sandbox.

Tú: Thử ngay: trong HTTP panel, tạo hai môi trường Local và Staging, rồi đổi qua lại xem địa chỉ yêu cầu thay đổi thế nào.

Chương 6: Sổ đơn lớn hơn

Tú: Ôn bài: webhook giống cái gì?

Chị Lan: Cái chuông cổng thanh toán bấm để báo đơn đã trả tiền.

Chị Lan: Hai quán giờ cùng ghi đơn, cùng cộng tem. Mà sổ đơn của mình là một file nhỏ nằm trong dự án.

Tú: Đúng, đó là SQLite. Giống cuốn sổ tay đặt trên quầy. Một quán, một người ghi thì rất tiện. Nhưng hai quán cùng ghi vào một cuốn sổ tay thì phải chuyền sổ qua lại. Chị cần sổ cái đặt ở văn phòng chính, ai cũng ghi vào được cùng lúc.

Tú: Sổ tay là SQLite, nhẹ, gọn, rất hợp lúc mới bắt đầu. Sổ cái là Postgres, một loại database chạy trên máy chủ riêng. Nhiều quán, nhiều người ghi cùng lúc mà không giẫm chân nhau. Còn việc chép từ sổ tay sang sổ cái, không sót đơn nào, gọi là migration.

Chị Lan: Chép sổ mà lỡ sót thì sao em?

Tú: Nên trước khi chép, mình chụp lại cuốn sổ cũ, tức là sao lưu như chị học ở tập trước. Chép xong thì đếm lại số dòng hai bên.

Tú: Database panel của 1DevTool mở được cả hai loại sổ. Đây là danh sách: SQLite, Postgres, MySQL, và hơn chục loại khác. Chị mở sổ tay và sổ cái cạnh nhau, đếm số đơn mỗi bên, so từng bảng một.

Chị Lan: Vậy chị chỉ cần một chỗ để xem mọi cuốn sổ.

Bếp trưởng AI: Em đọc hai cuốn sổ qua công cụ database của 1DevTool, nên em không cần cầm mật khẩu của sổ. Chép xong rồi chị. Sổ tay có một nghìn hai trăm đơn, sổ cái cũng một nghìn hai trăm đơn.

Người nếm AI: Em đã thử ghi đơn cùng lúc từ hai quán. Không đơn nào bị mất, không tem nào bị cộng hai lần.

Chị Lan: Người nếm nhớ bài tập trước ghê.

Tú: Từ mới: SQLite, Postgres, và migration.

Tú: Thử ngay: bấm vào một file database trong cây thư mục, nó mở thẳng trong Database panel. Xem có những bảng nào, và đếm số dòng.

Chương 7: Hộp cơm mang đi

Tú: Câu hỏi nhanh: chép sổ cũ sang sổ mới gọi là gì?

Chị Lan: Migration! Và nhớ sao lưu trước.

Bin: Cô ơi, máy cháu chạy app ngon lành. Mà đem sang máy ở chi nhánh hai thì báo lỗi đỏ lòm.

Tú: Câu nói nổi tiếng nhất của dân lập trình: trên máy em chạy mà! Máy của Bin có đủ gia vị, máy chi nhánh thiếu vài thứ. Giải pháp là đóng hết vào một hộp cơm.

Tú: Hộp cơm này chứa đủ mọi thứ: món chính là app, gia vị là các thư viện, và cả cách hâm nóng. Mở ở đâu cũng ăn được y như nhau. Công cụ đóng hộp phổ biến nhất tên là Docker. Một hộp đang mở, đang chạy, gọi là container.

Chị Lan: Một công thức, đóng ra bao nhiêu hộp cũng được. Như quán mình làm cơm văn phòng.

Tú: 1DevTool có Docker Manager. Mỗi dòng là một hộp. Đây là hộp chứa sổ cái Postgres của quán, đang chạy. Bấm vào một hộp là xem được nhật ký, cài đặt, và nó đang dùng bao nhiêu sức của máy.

Chị Lan: Không phải gõ lệnh nào hết.

Chị Lan: Vậy có bao giờ chị cần một máy chủ riêng không?

Tú: Bây giờ thì chưa. Nhà hosting lo hết cho chị. Nhưng khi quán lớn hơn, chị có thể thuê một máy chủ riêng, gọi là server. Như thuê hẳn một căn bếp riêng. Để vào căn bếp đó từ xa, người ta dùng SSH.

Tú: Nó như chìa khóa cửa sau, chỉ ai có đúng chìa mới vào được.

Tú: Tóm lại nha: Docker đóng hộp, container là hộp đang chạy, server là căn bếp thuê riêng, và SSH là chìa khóa cửa sau.

Tú: Trong 1DevTool, SSH Manager giữ cả chùm chìa khóa đó. Mỗi máy chủ một dòng, có tên, có người dùng, có chìa nào mở. Từ đây chị có thể mở một thư mục trên máy chủ như một dự án bình thường. Terminal mở ra là đã đứng trong căn bếp xa.

Chị Lan: Chìa nào cửa nấy, nhìn là biết.

Bin: Cô ơi, hộp cơm đóng rồi thì chở đi đâu cũng được, như xe máy giao hàng của quán!

Chị Lan: Cháu nói dễ hiểu hơn cả chú Tú.

Tú: Ê, ẩn dụ là nghề của anh mà!

Tú: Nói thật: quán nhỏ thì nhà hosting là đủ. Đừng thuê bếp riêng chỉ vì nghe nó oai. Có server riêng là chị phải tự lo hết: cập nhật, sao lưu, khóa cửa. Hỏng lúc nửa đêm cũng là chị dậy sửa. Khi nào thật sự cần, nên nhờ một người có kinh nghiệm cùng làm.

Tú: Từ mới: Docker, container, server, và SSH.

Tú: Thử ngay: mở Docker Manager và SSH Manager, xem trên máy bạn đang có những gì. Chỉ xem thôi, chưa cần chạy gì cả.

Chương 8: Giữ bí mật cho khách

Tú: Ôn bài lần cuối: SSH giống cái gì?

Chị Lan: Chìa khóa cửa sau, để vào căn bếp ở xa.

Khách: Chị ơi, sao lúc đăng ký app hỏi em cả ngày sinh, địa chỉ nhà, lẫn số căn cước vậy?

Chị Lan: Hả? Chị đâu có cần số căn cước của em!

Khách: Em thấy hơi sợ nên chưa đăng ký đó chị.

Chị Lan: Bếp trưởng, sao form đăng ký lại hỏi số căn cước?

Bếp trưởng AI: Dạ, em nghĩ càng nhiều thông tin thì càng tiện cho quán sau này.

Chị Lan: Không. Thứ gì quán không cần thì đừng hỏi. Chỉ giữ tên, email, và ngày sinh nếu khách muốn nhận quà sinh nhật.

Tú: Đây là nguyên tắc vàng của dữ liệu cá nhân: chỉ giữ thứ thật sự cần. Cột bên trái là thứ quán cần: email để đăng nhập, tên gọi để chào khách, ngày sinh nếu khách muốn nhận quà. Cột bên phải là thứ quán không giữ: số căn cước,

Tú: địa chỉ nhà khi không giao hàng, và số thẻ, vì đã có cổng thanh toán lo.

Chị Lan: Giữ càng ít, lỡ bị lộ càng ít thiệt hại.

Tú: Dữ liệu cá nhân là bất cứ thứ gì chỉ ra được một người cụ thể. Bảo vệ nó gọi là privacy, quyền riêng tư. Và consent, nghĩa là khách đồng ý. Muốn gửi tin khuyến mãi thì phải hỏi, khách gật đầu thì mới gửi.

Tú: Em nói thật nha chị, chương này em không đùa. Một: giữ tiền và dữ liệu của khách là có trách nhiệm pháp lý. Việt Nam có quy định riêng về bảo vệ dữ liệu cá nhân. Hai: luôn dùng một cổng thanh toán uy tín, nổi tiếng.

Tú: Đừng bao giờ tự giữ số thẻ của khách. Ba: đầu bếp AI viết code giỏi, nhưng AI không phải luật sư. Việc gì nghiêm túc, chị nên hỏi người có chuyên môn.

Chị Lan: Đầu bếp AI có đọc được dữ liệu của khách không em?

Tú: Chỉ đọc được những gì chị cho nó xem. Khi nhờ sửa lỗi, nên cho xem sổ thử với tên giả, đừng đưa sổ thật.

Chị Lan: Lỡ một ngày dữ liệu bị lộ thì sao?

Tú: Thì làm như tập trước: bình tĩnh đóng lỗ hổng, đổi chìa khóa, rồi báo cho khách một cách trung thực.

Chị Lan: Còn khách muốn xóa tài khoản?

Tú: Thì phải xóa được, và xóa thật. Chị nhờ đầu bếp làm thêm nút Xóa tài khoản ngay trong app.

Tú: Từ mới: privacy, personal data, và consent.

Tú: Thử ngay: nhờ đầu bếp liệt kê mọi thông tin app của bạn đang hỏi người dùng, rồi gạch bỏ những thứ không thật sự cần.

Khách: Chị ơi, form đăng ký giờ gọn ghê. Em đăng ký rồi nè. Thanh toán... xong! Có cả tem của chi nhánh hai luôn.

Chị Lan: Đơn trả tiền online đầu tiên của Cà phê Mây! Em gọi món gì vậy?

Khách: Một ly bạc xỉu chị ơi.

Chị Lan: Lại bạc xỉu!

Tú: Nhìn lại cả tập nha. Quy tắc vàng khi mở cửa ra thế giới có bốn bước. Một: thử ở bếp thử trước. Hai: khóa cửa thật kỹ, từ HTTPS tới mật khẩu đã xay. Ba: giữ ít dữ liệu nhất có thể. Bốn: việc nghiêm túc thì hỏi người giỏi.

Chị Lan: Thử trước, khóa kỹ, giữ ít, hỏi người giỏi. Chị nhớ rồi.

Tú: Tập này chị học environment, development, staging, production. Rồi hosting, build, preview. Học domain, DNS, HTTPS. Account, authentication, password hash. Payment gateway, webhook, sandbox.

Tú: Rồi SQLite, Postgres, migration. Docker, container, server, SSH. Và privacy, personal data, consent.

Chị Lan: Thêm hai mươi sáu từ nữa! Quán của chị giờ đã ra mặt tiền đường lớn thật rồi.

Tú: Chị để ý không? Đầu tập chị sợ cả chữ thanh toán. Giờ quán chị nhận tiền online, có địa chỉ riêng, có sổ cái cho hai quán.

Chị Lan: Và chị biết thứ gì tự làm được, thứ gì phải hỏi người giỏi. Cái đó mới quý.

Khách: Chào chị Lan, em là chủ quán trà sữa bên kia đường. Em thấy app tích điểm của chị hay quá. Chị bán lại cho em được không?

Chị Lan: Bán... app hả? Chị chưa nghĩ tới chuyện đó bao giờ.

Tú: Tập sau, tập cuối của mùa này: Từ quán thành công ty.

Tú: Tải 1DevTool, thử deploy bản preview đầu tiên, và nhớ: thử ở bếp thử trước nhé.

Chị Lan: Hẹn gặp lại ở Cà phê Mây, tập tám nhé!

Bếp trưởng AI: Chị ơi, em đã gắn HTTPS, đã xay mật khẩu, đã khóa mọi cửa. Giờ chính em cũng không vào được bếp nữa.

Chị Lan: Chìa khóa đâu rồi bếp trưởng?

Bếp trưởng AI: Em để trong file env... mà file env cũng bị em khóa luôn rồi.