“Dự án thú cưng” : một vài thử nghiệm

1. “Sớm hôm qua”

Khởi đầu câu chuyện là khi đội hình một thành viên chúng tôi (tạm gọi là đội ABC) làm thêm công việc bán Đồ Chơi mô hình cho Người Lớn.
Tất nhiên hành động như mọi khi : tạo trang Facebook, tăng tương tác, upload ảnh, video …, nhưng vẫn có cảm giác chưa đầy đủ. Sau khi tham khảo những shop khác có website riêng, nên cả đội cũng muốn có “một thứ gì đó chạy được” để làm thương hiệu.

Ý tưởng hình dung cho phiên bản đầu tiên gồm những tiêu chí cơ bản :

• Có thể bắt đầu nhanh, chủ yếu là tạo động lực tinh thần
• Có công cụ quản lý nội dung sản phẩm, thêm sửa xóa …
• Có thể tùy biến một số phần giao diện

Những điều trên nhìn chung khá đơn giản, các bước thực hiện được tiến hành

• Mua một tên miền từ Mắt Bão: abc.vn. Ngoại trừ việc lúc đầu phải lên tận văn phòng ký giấy thì từ sau dịch vụ không có vấn đề, có hỗ trợ online, nhắc nhở ra hạn rất đều đặn.
• Tạo môt droplet trên OceanDigital, cấu hình khiêm tốn: Centos 6, 1 CPU, 512Mb RAM. OceanDigital cũng hỗ trợ khá tốt, cho phép sử dụng nếu nợ tiền trong vòng 1 tháng 😀
• Phần cài đặt code được gửi gắm cho một thương hiệu nổi tiếng

Với lựa chọn này, hầu hết các chức năng quản lý nội dung đều đã có sẵn.
Về giao diện, mất khoảng một ngày chủ yếu ngồi tìm giữa các theme miễn phí để chọn lấy một mẫu thuận mắt; và thêm một ngày để căn chỉnh một số chi tiết, thêm GA (Google Analytics), thêm Facebook Page plugin.
– Bước cuối là đẩy code lên Github; lên server Centos pull code và chạy.

2. “Hà Nội giờ tan tầm”

Phương án trong phần 1 bộc lộ một số điểm cần cải thiện:

• Khối lượng công việc tăng: Trước đây các sản phẩm được lưu trong album Facebook, sau khi có web abc.vn, việc cập nhật khi cần sửa đổi danh sách sản phẩm hoặc thông tin một món đồ phải lặp lại thêm một lần nữa để đồng bộ các thông tin lên web.
• Thông tin dư thừa: Qua quá trình bán hàng, nhận thấy có điểm khác biệt so với các mặt hàng khác, hộp của sản phẩm hầu như đã có đủ thông tin chi tiết mà khách hàng quan tâm; chỉ thiếu một điểm chính:

Từ đó, ý tưởng cho phiên bản thứ 2 gồm các mục tiêu:

• Cập nhật giá cả từng món một cách trực quan, dễ thấy nhất
• Giảm công sức cập nhật giữa album Facebook và trên web

Các sửa đổi đã thực hiện :

• Bỏ phần mô tả trong từng ảnh của album Facebook, thay vào đó viết luôn giá từng món vào giấy để cạnh hộp, chụp chung trong một bức ảnh. Cách này được kiểm chứng là khá hiệu quả.
• Với trang web abc.vn

+ Tạm biệt WordPress
+ Tạo project React, đưa toàn bộ ảnh sản phẩm vào phần public/images để ảnh được đưa lên cùng web, dùng Lightbox của thư viện react-images https://github.com/jossmac/react-images để hiển thị ảnh
Cơ bản việc cập nhật chuyển thành:
* Copy ảnh vào thư mục public/images/
* Sửa danh sách đường dẫn ảnh trong code (vì react-images cần danh sách đường dẫn ảnh nên phải liệt kê trước)
* Commit, push code; sau đó build trên server

3. “Một nhà”

Phương án ở phần 2 đã khá hơn so với thời kỳ đầu nhưng vẫn có hạn chế :

• Thời gian thao tác lâu: Việc cập nhật danh sách vẫn gồm nhiều bước: copy ảnh, sửa đường dẫn (phần này lâu nhất 🙁 )), commit và build
• “Có gì đó sai sai”: Mỗi commit thay đổi trong code chỉ là nội dung chứ không phải logic ????!!!

Mục tiêu sửa đổi:

• Cụ thể hóa hơn nữa mối liên kết đồng bộ giữa album Facebook và danh sách hiển thị trên web
• Giảm thiểu số thao tác cập nhật nội dung web
• Thêm phần lọc danh sách theo một số từ khóa

Các sửa đổi đã thực hiện:

• Thêm một project chạy nodejs (tạm gọi là Backend)

Chuyển cách thức cập nhật dữ liệu sang một chiều: chuẩn bị danh sách ảnh -> upload lên album Facebook -> đồng bộ từ album Facebook sang Backend
* Tạo một Facebook app và dùng PassportJS để đăng nhập FB
* Download ảnh trong album sử dụng Facebook SDK

function getImages() {
    FB.options({
        client_id: config.fbApp.clientID,
        client_secret: config.fbApp.clientSecret
    })
    FB.api('913563252113498/photos', { fields: 'images,name', limit: 50 }, function (res) {
        if(!res || res.error) {
            console.log(!res ? 'error occurred' : res.error);
            return;
        }
        // remove all existing files
        fs.readdir('./server/public/images', function(err, items) {
            items.forEach(function(img, index) {
              fs.unlink('./server/public/images/' + img, function(){console.log('deleted' + img)});
            });
        });
        
        //download new files
        res['data'].forEach((img, index) => {
            download(img['images'][0]['source'], './server/public/images/' + img['name'] + '.jpg', function(){console.log('downloaded ' + img['name'])});
        });
    })
}

• Nối hàm getImages() với một Backend controller, từ đó Backend đóng vai trò cập nhật danh sách ảnh sản phẩm. Việc cần làm chỉ là truy cập đường dẫn định sẵn.

router.get('/sync-images',
  function(req, res) {
    getImages();
    res.render('home');
  });

• “Gửi gắm” một số thông tin ngắn gọn vào phần description của mỗi ảnh trên Facebook (thể loại, hãng sản xuất), dùng chính thông tin này làm tên của ảnh (như trong hàm getImages() phía trên). Chức năng lọc theo từ khóa đơn giản là sử dụng thông tin có trong tên các bức ảnh.

4. “Luôn là mình”

Phiên bản số 4 là bản chuyển đổi từ ReactJS sang sử dụng VueJS, các chức năng giữ nguyên; và đang tiếp tục sửa đổi …

P/s: Tiêu đề các mục phần lớn là để đánh dấu, lấy từ tên bài hát của ban nhạc DaLab. Nhạc của họ ban đầu kén người nghe bù lại lời hát khá ý nghĩa, kính mời các bạn cùng thưởng thức.