Build và deploy website để “khè” bạn bè vô cùng đơn giản với Glitch.com

Hãy tưởng tượng, bạn đang học làm web. Bạn vừa build được 1 cái website nho nhỏ bằng HTML/CSS (hoặc nguyên cục website bằng NodeJS) và muốn show cho bạn bè và người khác góp ý, hướng dẫn.

Việc này tưởng dễ mà không hề đơn giản:

  • Bạn phải kiếm 1 con VPS hoặc host free, sau đó kiếm tên miền và kết nối tên miền với VPS
  • Nếu web của bạn cần 1 số tính năng như micro, webcam, bạn phải cài đặt HTTPS, không hề dễ dàng xíu nào
  • Hoặc bạn có thể dựng web server hoặc chạy app ở local, sau đó dùng ngrok, portmap.io hoặc pagekite để open tunnel, cho người khác truy cập vào web của bạn

Những cách này khá tốn thời gian và không hề dễ dàng. Chưa kể, người xem không thể xem code, phụ bạn sửa code v…v.

Vì vậy, hôm nay mình giới thiệu Glitch.com, một trang web rất hay ho giúp bạn code phát là có web ngay, có domain lẫn HTTPS, ko cần cài IDE hay Git gì luôn. Hãy xem nó có gì bá đạo mà có quá trời người dùng nhé!

Giới thiệu về Glitch.com

Glitch.com là một trang web được sáng lập bởi Fog Creek Software, đội ngũ đã xây dựng nên Trello và Stack Overflow thần thánh của cộng đồng developer.

Glitch là nơi mà anh em developer tụi mình có thể lên và code nguyên 1 dự án: từ web tĩnh chỉ có HTML/CSS, hoặc project front-end với Angular/React, hoặc web full-stack với NodeJS.

Mục tiêu của Glitch là tạo ra 1 cộng đồng, nơi developer lẫn designer có thể lên để code chung với nhau, học hỏi code của nhau. Thấy dự án nào hay ho, các bạn cũng có thể bấm Remix để chôm về sửa lại thành dự án của mình luôn.

Glitch.com giúp bạn build ngay 1 web bằng cách code từ browser, chả cần cài IDE gì

Ví dụ, khi mình code 1 trang sử dụng Cookie để theo dõi người dùng, mình có thể share project Glitch tại glitch.com/~codedao-tracking.

Các bạn có thể vào chạy thử, xem code, remix để sửa lại thành project của các bạn luôn, tiện quá phải không nào?

Ủa vậy thui hả, còn gì gì hay ho nữa không? 

Ngoài tính cộng đồng của nó, Glitch còn có kha khá điều hay ho như sau:

1. Hỗ trợ code theo nhóm: Bạn có thể rủ bạn bè “Ê code chung với tao cái web này với, check lỗi phụ tao với”, không cần cài IDE đặt nhiều thứ phức tạp. Hai người vừa code, vừa xem sản phẩm mình tạo ra là 1 trải nghiệm rất hay ho thú dzị

2. Có version control sẵn, không lo mất code: Nếu không biết dùng Git, mỗi lần sửa code bị hư, bạn sẽ … bó tay không biết sửa sao để code chạy lại. Glitch đã có sẵn tính năng này, nếu lỡ sửa lợn lành thành lợn què, bạn có thể dễ dàng “rewind” thành lợn lành trở lại.

3. Có web ngay khi đang code, không cần phải lo hosting hay domain: Khi tạo 1 project trên Glitch, bạn đã có sẵn 1 sub-domain, chỉ cần tập trung viết code. Viết xong bạn chỉ cần copy URL của trang web là đã có web đi khoe bà con họ hàng rồi.

Nếu cần giúp đỡ, bạn có thể copy URL của nguyên project để bạn bè có thể vào xem, hỗ trợ bạn fix bug ngay và luôn, tiện chưa? 

Viết Code là có sẵn trang web chạy ngay bên cạnh

 

4. Có sẵn nhiều template để sử dụng:  Việc setup 1 dự án đôi khi cũng hơi rườm rà, phức tạp, tốn thời gian.

Glitch có sẵn khá nhiều Template từ React/Angular cho tới Slack App … Bạn chỉ cần bấm Remix và bắt đầu sửa code để bắt đầu code ngay cho nóng, không cần setup nhiều.

 

5. Code chơi, chạy thật nếu cần: Ngoài ra, nếu code chơi chơi trên Glitch nhưng bạn thấy ý tưởng của mình hay quá, nhiều người dùng, bạn có thể để source code sang private, gắn thêm custom domain để nhờ Glitch… host tạm dự án của mình luôn!

Mặc định, app của bạn sẽ được 512MB RAM, 200MB ổ cứng, Glitch sẽ tắt web của bạn nếu không có ai truy cập sau 5 phút.

Nếu có nhu cầu, bạn có thể trả 8$/tháng để web luôn sống, tăng dung lượng RAM lên 2GB. Cá nhân mình thấy dùng free cũng dư xăng cho các dự án nhỏ rồi.

Bạn có thể gắn domain của mình và để app chạy trên Glitch luôn

Hướng dẫn sử dụng (Very đơn giản)

Giao diện của Glitch cực dễ sử dụng nên mình cũng không cần hướng dẫn nhiều.

1. Đăng ký: Từ trang chủ Glitch.com, các bạn bấm Sign-up để đăng kí, có thể dùng Facebook, Google hoặc Github đều được.

2. Tạo project: Sau khi đăng nhập, bạn có thể bấm New Project, chọn project HTML/CSS thuần hoặc có NodeJS back-end đều được.

Nếu muốn code Angular/React thì bạn vào https://glitch.com/create và tìm template các project đó nhé.

 

3. Viết code: Tới đây là xong rồi, bạn chỉ việc viết code và tận hưởng thành quả thôi. Bạn có thể bấm Show và chọn xem trang web ở tab khác, hoặc ở cùng tab luôn.

Nếu code back-end, bạn có thể bấm Tools -> Logs để xem log rồi debug code cho tiện.

Tạm kết

Đấy, sau bài này, mình đã giới thiệu với các bạn về Glitch.com – Một tool siêu cool ngầu tiện lợi giúp bạn có thể nhanh chóng code ra 1 trang web, có cái share với bạn bè mà không cần setup gì nhiều cả.

Nếu đã dùng Glitch và có project nào bạn thấy hay ho, tâm đắc, nhớ share vào mục comment cho mọi người chiêm ngưỡng nhé.

Happy Coding!!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s