Hướng Dẫn Cài Đặt Server Deeplink Cho Flutter

Bài viết này là phần đầu tiên trong seri hướng dẫn chi tiết về cách cài đặt deeplink cho ứng dụng Flutter. Bạn có thể tham khảo sách hướng dẫn chi tiết tại viblo.asia.

Tại Sao Cần Cài Đặt Server Deeplink?

Server deeplink có vai trò quan trọng trong việc điều hướng người dùng đến cửa hàng ứng dụng khi ứng dụng chưa được cài đặt. Nếu không có server, deeplink chỉ mở được ứng dụng nếu nó đã được cài đặt. Ngược lại, nếu ứng dụng chưa được cài đặt, việc nhấn vào deeplink sẽ không dẫn đến đâu cả.

Hướng Dẫn Tạo Server Đơn Giản Bằng Next.js Để Hỗ Trợ Deeplink Trong Flutter

Phần này sẽ hướng dẫn bạn từng bước tạo một server đơn giản bằng Next.js giúp hỗ trợ việc tạo deeplink cho ứng dụng Flutter.

Bước 1: Tạo Dự Án Next.js

1. Cài Đặt Node.js và npm: Đảm bảo rằng bạn đã cài đặt Node.js và npm trên máy tính của mình.

2. Tạo dự án mới: Mở terminal và chạy lệnh sau:

npx create-next-app deeplink-server

Bước 2: Tạo Thư Mục .well-known

Tại thư mục public, tạo một thư mục với tên .well-known. Thư mục này sẽ chứa các file cấu hình cần thiết cho Android và iOS:

1. File: assetlinks.json

   json Copy

   [{
       "relation": ["delegate_permission/common.handle_all_urls"],
       "target" : { "namespace": "android_app", "package_name": "com.tntkhang.deeplink",
        "sha256_cert_fingerprints": ["E8:A1:F3:FE:5D:44:27:89:2D:09:F9:D0:11:DF:E8:C6:32:06:3D:F0:EC:C6:B9:55:EA:F3:12:F3:DF:6B:B4:A2"] }
     }]

   Lưu ý thay com.tntkhang.deeplink bằng package name của bạn và cập nhật sha256_cert_fingerprints cho đúng.

   Để lấy sha256 của debug keystore trên máy Mac, bạn có thể chạy lệnh sau:

   bash Copy

   keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

2. File: apple-app-site-association

   json Copy

   {
       "applinks": {
           "details": [
               {
                   "appIDs": ["TPHCM2024.com.tntkhang.DeepLink"],
                   "components": [
                           {
                               "/": "/*",
                               "comment": "Matched any url"
                           }
                       ]
               }
           ]
       }
   }

   Thay thế TPHCM2024 bằng Team ID trong provisioning và com.tntkhang.DeepLink bằng bundle ID của ứng dụng iOS.

Bước 3: Kiểm Tra Cấu Hình

Sau khi hoàn tất cài đặt, chạy lệnh npm run dev. Ứng dụng Next.js sẽ chạy tại port 3000, và bạn có thể kiểm tra file apple-app-site-association bằng cách truy cập URL: localhost:3000/.well-known/apple-app-site-association.

• Nếu trình duyệt tải file này về, bạn đã cấu hình đúng!
• Ngược lại, nếu trình duyệt chỉ hiện nội dung JSON, bạn đã cấu hình sai.

Bước 4: Tạo URL Để Điều Hướng Tới Cửa Hàng Ứng Dụng

Mở file app/page.tsx và thay đổi nội dung bằng đoạn mã sau:

"use client";
import { useEffect } from 'react';

export default function Home() {
  useEffect(() => {
    const userAgent = navigator.userAgent;
    const isIOS = /iPad|iPhone|iPod/.test(userAgent);
    const isAndroid = /Android/.test(userAgent);

    if (isIOS) {
      window.location.href = 'https://apps.apple.com/us/app/facebook/id284882215';
    } else if (isAndroid) {
      window.location.href = 'https://play.google.com/store/apps/details?id=com.facebook.katana';
    }
  }, []);

  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
}

Chú ý rằng link đến ứng dụng Facebook chỉ là ví dụ. Bạn có thể thay bằng link của ứng dụng trên cửa hàng của bạn. Đoạn mã này sẽ xác định userAgent và điều hướng người dùng đến cửa hàng ứng dụng tương ứng.

Bước 5: Chạy Ứng Dụng

Mở terminal tại thư mục dự án và chạy lệnh:

npm run dev

Nếu ứng dụng chạy thành công, bạn sẽ thấy màn hình chính với dòng chữ "Hello World".

Bước 6: Triển Khai Ứng Dụng Next.js Trên Vercel

Truy cập vercel.com và đăng nhập bằng tài khoản GitHub của bạn. Push dự án Next.js lên GitHub. Khi tạo repo trên GitHub, bạn nên chọn tên có liên quan đến dự án. Sau khi thành công, Vercel sẽ hiển thị lựa chọn để bạn nhập và triển khai dự án.

• Nhớ chọn tên branch cần triển khai và hoàn tất quá trình.

Sau khi triển khai, terminal sẽ in ra URL cho bạn — đây sẽ là base URL của bạn để sử dụng trong DeepLink.

Kết Luận

Chúng ta đã hoàn thành phần thiết lập server deeplink. Ở phần tiếp theo, mình sẽ hướng dẫn các bạn cách cài đặt deeplink trên Native Android và iOS.
source: viblo