Xin chào mọi người, hôm nay mình sẽ giới thiệu với mọi người cách mình làm site ảnh Gif NgaSap.ML
Tình huống là mấy anh em đang nói chuyện với nhau về những tên miền thú vị và nhắc đến tên miền ngasap.ml (ngã sấp ML) thì mình nghĩ ngay đến 1 trang web xem những ảnh Gif liên quan đến ngã (falling).
Bước 1: Nguồn ảnh gif
Về ảnh Gif thì có 1 trang web rất nổi tiếng là Giphy, mình vào đó search thử với từ khóa “falling” thì thấy có rất nhiều ảnh vui liên quan đến từ khóa này.
Đã có nơi lấy ảnh rồi, giờ tìm cách lấy ảnh về thôi. Giphy có cung cấp API cho phép developer lấy ảnh về.
Truy cập Giphy Developers, tạo Application dạng SDK và lấy API Key
Sau đó điền thông tin App Name và App Description, [đọc License Agreement và] tích chọn đồng ý sau đó bấm Create App
Sau khi tạo App xong thì ở giao diện Dashboard sẽ hiện App vừa tạo và API Key. Chúng ta sẽ dùng API Key này để lấy ảnh Gif
Bước 2: Setup server
Tiếp theo chúng ta sẽ cần viết 1 API lấy Gif từ Giphy và trả về để hiển thị lên trang web. Ở đây mình dùng NodeJS nên sẽ dùng Web SDK của Giphy.
2.1: Khởi tạo project và cài thư viện
Chúng ta sẽ cần cài express (nodejs framework đùng để viết API), @giphy/js-fetch-api (Web SDK của Giphy), dotenv (đọc biến môi trường)
Sau đó tạo file index.js với nội dung như sau:
Lưu file lại và chạy lệnh node index.js, truy cập http://localhost:3413 thấy chữ Ok
2.2: Viết API lấy dữ liệu từ Giphy.
Thêm 1 route với phương thức GET cho đường dẫn /api/get
Tạo file .env và thêm biến GIPHY_API_KEY với giá trị là API Key lấy từ Dashboard Giphy (thay giá trị bằng giá trị của bạn)
Khởi động tại server và truy cập http://localhost:3413/api/get, bạn sẽ thấy lỗi fetch is not defined như bên dưới:
Lỗi này là do Giphy SDK viết để dùng với Fetch API trên trình duyệt, muốn dùng với NodeJS thì chúng ta cần cài thư viện node-fetch và set hàm fetch vào object global của NodeJS. Thực hiện như sau:
Cài thư viện node-fetch
Thêm đoạn code vào đầu file index.js
Khởi động tại server và truy cập http://localhost:3413/api/get sẽ thấy dữ liệu được trả về là 1 object với key data là list những ảnh gif liên quan đến từ khóa “falling”:
Ở mỗi ảnh gif thì ta chỉ quan tâm đến field images. Field images là 1 object với mỗi key là 1 kích thước khác nhau. Sửa lại api /api/get để chỉ trả ra những dữ liệu chúng ta cần để hiển thị trên giao diện:
Khởi động tại server và thử lại được kết quả như bên dưới
2.3: Tính năng phân trang
Tiếp theo bổ sung tính năng phân trang: sửa lại phần gọi API Giphy như bên dưới
Bước 3: Làm giao diện.
3.1 Giao diện loading
Giao diện mình sẽ làm tính năng infinite-scroll để người xem có thể thoải mái xem mà không phải bấm nút next page.
Search Google với từ khóa “js infinite scroll” ta có ngay kết quả là thư viện: Infinite Scroll. May mắn thay khi đọc docs thì có link đến phần demo Loading JSON, vanilla JS, vào xem thì đúng thứ mình cần nên mình copy HTML, CSS, JS trên phần demo về rồi sửa lại 1 chút là xong:
Tào file index.html với nội dung như sau:
3.2 Tích hợp với API
Thêm phần script sau vào cuối thẻ body:
3.3 Render file index.html
Sửa api GET / ở file index.js trả về file index.html vừa tạo
Khởi động lại server và truy cập http://localhost:3413 sẽ được như hình dưới
Hết phần 1. Ở phần sau mình sẽ giới thiệu cách đóng gói và triển khai ứng dụng với Docker.
Source code: dangdungcntt/ngasap.ml