Loading...
Xây dựng landing page trong vòng 1 tiếng với Unicorn Platform và Github Page

Vừa rồi mình có tính xây dựng vài trang landing page cho các dự án cá nhân của mình, do đó được @khoanguyen là CEO Nocode VietNam giới thiệu cho công cụ Unicorn Platform để tạo ra các trang static pages.

Kết hợp với thêm kiến thức trước đó về việc tự host 1 static page lên Github Page và gắn domain vào thì mình có thể xây dựng được 1 trang okela.

Vậy từng bước như thế nào?

 

Từng bước xây dựng Landing Page với Unicorn Platform

Bước 1: Truy cập https://unicornplatform.com/ và đăng ký một tài khoản

Bước 2: Tạo page => Chọn template và kéo thả (thêm, xoá, sửa) các sections + cập nhật nội dung

Bước 3: Kết nối các form (nếu có) với database/nơi dữ liệu xuất ra (Như google sheet, mailchimp,…)

Bước 4: Cập nhật thông tin SEO, Feature image, Title, Description cho trang web

Bạn xem tất cả các bước từ đăng ký đến khi tạo ra website và tự host lên github page qua video sau nhé:

Tải source về và xoá branding

Bước 1: Nhấn setting -> Export HTML => Và download file Assets và name.html về

Để tải về được thì bạn phải đăng ký tài khoản https://unicornplatform.com/pricing/ với giá 9$/tháng

Bước 2: Giải nén file assets và copy file name.html vào trong thư mục vừa giải nén

Bước 3: Đổi tên file name.html thành index.html

Bước 4: mở file index.html trên trình duyệt và xem thử nó đã hiển thị như mình đã thiết kế trên UnicornPlatform hay chưa?

Bước 5: Mở file index.html với trình chỉnh sửa code như Visual Studio Code, Notepad, Hoặc Sublime Text để xoá đi branding UnicornPlatform

Host lên trên Github Page

Bước 1: Bạn tạo tài khoản Github nếu chưa có và tạo 1 repository để làm nơi lưu trữ code của static page

Bước 2: Sử dụng phần mềm Github Desktop clone code từ repository bạn mới tạo về local (máy tính của bạn)

Bước 3: Copy code từ thư mục lúc nãy bạn download vào trong thư mục bạn vừa clone từ Github về.

Bước 4: Bạn commit và push dữ liệu lên ngược lại trên github

Bước 5: Cấu hình Github page (bạn xem kỹ video của mình có hướng dẫn rồi nhé)

Gắn Domain

Bạn thực hiện gắn domain theo như hướng dẫn.
Mình dùng cloudflare để làm DNS cho domain của mình, bạn xem kỹ video để làm theo nhé.

 

Sau khi gắn xong bạn có thể có 1 trang web như mình 😀 https://blockchainba.hoangphan.blog/

Có gì chưa ok thì bạn có thể comment trên bài đăng youtube của mình, mình sẽ làm video hướng dẫn cụ thể hơn cho những bước bạn chưa hiểu nha.

Giới thiệu

Mới gần đây thôi,… cỡ đâu 14-15 tháng trước, có một anh giới thiệu công cụ kiểu vẽ để present và phát khảo nhanh ý tưởng mà dân Defi (Decentralized Finance – ý nói những người hay nghiên cứu, chơi và build sản phầm tài chính phi tập trung) hay sử dụng.

excalidraw
excalidraw

Từ ngày mình biết tới nó mình sài hơi bị nhiều, vì kiểu nhìn nó như bản vẻ tay, vô cùng thân thiện.

Một số ưu điểm mà mình nghĩ nó over hợp với BA.

À mà đâu phải hợp mỗi BA, mình thấy hợp với nhiều người á chứ, cứ liên quan đến phát khảo idea, present đồ các kiểu là over hợp hết.
Dưới là một số ưu điểm mà mình thấy

  1. Phác Thảo Ý Tưởng Nhanh Chóng: Excalidraw cho phép bạn nhanh chóng phác thảo ý tưởng, tạo wireframe và sketch với giao diện đơn giản, trực quan. Có sẵn một số mẫu để kéo ra sử dụng từ library, giúp phát khảo ý tưởng rất nhanh.
  2. Present Dễ Dàng: Với Excalidraw, việc chia sẻ và trình bày ý tưởng cho team của bạn trở nên dễ dàng hơn bao giờ hết. Bạn có thể vẽ, chỉnh sửa và cùng làm việc với đồng nghiệp chỉ qua một link mà không cần phải tạo tài khoản.
  3. Lưu trữ local/lưu cloud linh hoạt: Khi tạo xong wireframe, có thể lưu lại file vào local sau đó có thể mở ra sử dụng sau đó, hoặc thay vì lưu local, mình có thể lưu trên cloud và sẽ có 1 link để mình truy cập và sử dụng sau này, khi mở link thì những gì mình đã vẽ sẽ còn lưu lại.
    Có hỗ trợ export ra hình ảnh png, sgv, copy phần đã chọn để paste (dạng image) vào nơi khác.
  4. Free, không cần tài khoản: Sử dụng hoàn toàn miễn phí, cứ mở link https://excalidraw.com/ lên là sử dụng thôi, và có thế bật lên chế độ cùng chỉnh sửa, nhiều người cùng tham gia edit và phát hoạ ý tưởng trên cùng 1 Canvas.
  5. Thư viện wireframe: Hiện có nhiều thư viện wireframe có thể bạn thêm vào, và kéo thả từ khung thư viện, nào là icons, khung frame web, mobile, wireframe mẫu sẵn, …
  6. Text to diagram (AI): Hiện tại có hỗ trợ text to diagram để lên diagram, flow chart, sequence, class nhanh chóng (bạn xem hình mình để mẫu nhé). => mình có thấy tính năng wireframe to code,… ae có thể sài ChatGPT thử nghiệm thử nhé.
  7. Các công cụ (tools) cơ bản mà một ứng dụng vẽ wireframe cần có như: Thêm hình vuông, hình tròn, ellipse, hình thoi, mũi tên, đường thẳng, đường cong, vẽ pen, thêm text, thêm image, xoá, hỗ trợ group layers, add frame, đổi màu, …
  8. Hỗ trợ tính năng present: Laser pointer, import video, web embed, …

Mình nghĩ là sẽ còn nhiều tính năng hay ho khác bạn có thể xem tại đây: https://plus.excalidraw.com/excalidraw-plus-vs-excalidraw, nếu mà bạn thử nghiệm trực tiếp thì sẽ có cảm nhận thực tế hơn qua cách mình trình bày 😀

 

Ngoài ra hình như có hỗ trợ embed/integrate Excalidraw vào trong ứng dụng (app/webapp) của bạn, tìm hiểu kỹ hơn tại đây https://docs.excalidraw.com/docs/@excalidraw/excalidraw/integration

Nhược điểm mình thấy

Nhưng vẫn có 1 nhượt điểm đó là thực sự so sánh với những công cụ chuyên cho công việc của chính công cụ đó thì Excalidraw sẽ không bằng.

Ví dụ như vẽ diagram để trình bày trong tài liệu, thì sẽ không thể ngon bằng các công cụ Visio, Draw.io, LucidChart
Hay vẽ wireframe, mockup thì không thể ngon bằng sketch, xd, hay figma được.

Nhưng nếu chỉ xét khía cạnh present và thực hiện nhanh khi đang present, thì công cụ này tuyệt vời với những tính năng và ưu điểm mình nói ở trên.

Thực tế đối với mình khi xử dụng, mình vẽ phát hoạ nhanh bằng Excalidraw lúc đang call với mọi người khi trình bày ý tưởng, hoặc thảo luận về luồng, cách thức hoạt động, cấu trúc hệ thống.
Rồi khi document details lại thì sẽ screenshot màn hình của Excalidraw rồi copy bỏ vào Figma nếu liên quan đến wireframe/mockup => Rồi vẽ lại = figma cho đầy đủ, chỉnh chu. Còn nếu là diagram thì sẽ bỏ vào draw.io rồi vẽ lại để có sản phẩm cuối cùng.

Dưới đây là một số hình minh hoạ, bạn có thể xem qua nhé.

Vẽ sketch/wireframe với Excalidraw.com

Image 1 of 5

Kết bài

Mình hi vọng với bài chia sẻ này, bạn có thể thấy công cụ này hữu ích với công việc của bạn, và giúp bạn tối ưu công việc của mình bởi việc sử dụng nó :D.