Chiều chủ nhật, chán như con gián.
Hôm trước rảnh rang ngồi code cái Swift Wrapper cho Kipalog API.

Khổ nỗi code xong cũng chưa hình dung được sẽ dùng thế nào.
Giờ code cái iOS Example Project cũng mệt, tiện lâu không động vào Server side Swift, code thử web app xem sao.

Ý tưởng

  • Làm một trang web app đơn giản call các API của Kipalog trong đây.
  • Nhân tiện vọc chút Kitura xem hàng IBM chất lượng thế nào. Nói đến Server side Swift chắc ai cũng biết có 3 framework nổi tiếng là: Perfect, Kitura Vapor. Lần này mình chọn Kitura vì Perfect trước đã dùng rồi, chắc lần sau sẽ thử Vapor.

Chuẩn bị

  • macOS High Sierra
  • XCode 9.4.1

Khởi tạo Project

mkdir KipalogViewer
cd KipalogViewer
swift package init --type executable

Tên folder cũng sẽ là tên Project luôn nên ai thích tên gì nhớ sửa lại cho thích hợp.
Tiếp theo mở file Package.swift thêm package Kitura vào.

open -a Xcode Package.swift

Nội dung file Package.swift như bên dưới.

import PackageDescription

let package = Package(
    name: "KipalogViewer",
    dependencies: [
        .package(url: "https://github.com/IBM-Swift/Kitura.git",
                 from: "2.4.0"),
        .package(url: "https://github.com/IBM-Swift/HeliumLogger.git",
                 from: "1.7.1"),
        .package(url: "https://github.com/nam-dh/KipalogAPI.git",
                 from: "1.0.1")
        ],
    targets: [
        .target(name: "KipalogViewer",
                dependencies: ["Kitura", "HeliumLogger", "KipalogAPI"],
                path: "Sources")
    ]
)

Tạm thời ta add 3 package là Kitura, HeliumLoggerKipalogAPI.
HeliumLogger giúp in log cho đẹp, hiện thị rõ log file nào dòng nào… Thật ra cũng không cần thiết mấy, nhưng package này cũng nhẹ, tạm thời ta cứ thêm vào để debug cho dễ.
KipalogAPI là wrapper mấy API của Kipalog do mình code từ trước.

Sau này khi thêm package mới nào, chú ý cần tạo package vào phần dependencies và cần thêm tên package sử dụng cho từng target (dòng thứ 2 từ dưới lên)

Tạm ổn. Giờ ta build thử xem sao.

swift build

Build ngon không vấn đề.

Compile Swift Module 'KipalogViewer' (5 sources)
Linking ./.build/x86_64-apple-macosx10.10/debug/KipalogViewer

Giờ code của ta chưa có gì, nên chạy thử chỉ in ra Hello world thôi.

./.build/debug/KipalogViewer 

Hello, world!
Program ended with exit code: 0

Giờ ta tạo xcodeproj file bằng cách

swift package generate-xcodeproj

Ta sẽ nhận được output như bên dưới

generated: ./KipalogViewer.xcodeproj

Mở file này bằng XCode bình thường. Để run Project bằng XCode, chú ý chọn Scheme KipalogViewer (màu đen, các scheme khác màu vàng là library).

Thiết lập cho Kitura

Để dễ quản lý, ta tạo file mới đặt tên là Application.swift đặt cùng folder với main.swift.

import Foundation
import Kitura

final class App {
    let router = Router()
    
    func run() {
        setupRoutes()
        Kitura.addHTTPServer(onPort: 8080, with: router)
        Kitura.run()
    }

    private func setupRoutes() {

    }

Hiện setupRoutes() mình chưa implement gì tạm để trống. Sau này ta sẽ thêm implement sau.

Giờ ta khởi tạo class này trong main.swift.
Tiện thể khởi tạo luôn HeliumLogger.

import Kitura
import HeliumLogger

HeliumLogger.use()

let app = App()
app.run()

Thiết lập cho Kitura đến đây là xong.

Giờ ta có thể chạy swift build để build lại Project, hoặc build bằng XCode đều được.
Sau khi build và run thử, truy cập vào local host ở http://localhost:8080, ta sẽ thấy trang default của Kitura như bên dưới.

kitura-default

Ngon lành cành đào rồi. Giờ bắt đầu test thử Kipalog API thôi.

Test thử Kipalog API

Kipalog API yêu cầu phải truyền token để sử dụng các API liên quan đến post bài, có vẻ loằng ngoằng. API liên quan đến lấy post list thì không cần. Ta thử với các API này trước vậy.
Xem thêm các API ở đây.

Giờ quay lại file Application.swift, thêm vào function setupRoutes() như bên dưới:

router.get("/hot") { request, response, next in
  self.getPostListAndResponse(for: .hot, response: response)
}

Với hàm getPostListAndResponse như bên dưới

private func getPostListAndResponse(for type: KipalogAPI.PostListType, response: RouterResponse) {
  KipalogAPI.shared.getPostList(type: type) { (result) in
    if let posts = result.value {
      response.send("\(posts.count)")
    } else {
      response.send("Error")
    }
  }
}

Không quên import library.

import KipalogAPI

Kipalog API chỉ cho ta lấy 30 post đứng đầu danh sách. Nên nối trả về số 30 ra màn hình tức là API chạy ngon.
Giờ ta build app rồi truy cập thử: http://localhost:8080/hot

Chạy đến đây nếu ngon là coi như đã đi được nửa chặng đường rồi.
Bước tiếp theo là hiện thị list các post sao cho đẹp ra màn hình nữa thôi.

Thay vì response con số posts.count đơn giản, ta response nội dung HTML hoành tráng nữa là xong.
Khổ nỗi mình lại ngu HTML làm sao giờ. Đành nhờ cậy anh Boostrap vậy. Anh này chắc ai cũng quen thuộc rồi.

Cơ mà làm cách nào để truyền data lấy từ Kipalog API vào HTML cho dễ nhỉ?
Cái này đành nhờ cậy anh Stencil.
Mình sẽ nói về cách sử dụng các libs này ở phần sau.

Dưới đây là demo trang web sau khi hoàn thành.
kipalog-viewer


Code mình lưu ở đây anh em tham khảo cho ý kiến.
Sản phẩm demo ở đây.