DEV Community: Lê Vũ Huy

Tích hợp GA4 Google Analytics vào Zalo MiniApp

Lê Vũ Huy — Tue, 17 Mar 2026 13:14:44 +0000

Hệ thống SaaS Evotech bên mình đã chạy được gần 1 năm, khách hàng có doanh nghiệp lên đến hàng nghìn lượt truy cập mỗi ngày, tuy nhiên vẫn chưa có 1 cơ chế tracking đầy đủ để tracking user behavior, lượt truy cập, revenue,... Chính vì vậy, team mình đã tìm các giải pháp tracking đang có trên thị trường.

1. Posthog Self-hosted
Mình có thử qua Posthog self-hosted nhưng triển khai server khá phức tạp, tài liệu ko rõ ràng, và bản thân team Posthog thông báo công khai là không có customer support cho self-hosted nên đành phải quay xe, mặc dù tính năng của Posthog rất hay.

2. Google Analytics
Dạo qua 1 vòng Community của miniapp thì thấy ae hay dùng GA4, tuy nhiên các câu hỏi Q&A đã outdate, và Zalo cũng ko có tài liệu chính thức, vì vậy mình tổng hợp lại các bước dưới đây cho anh em tham khảo. Hiện tại cách duy nhất gửi dữ liệu lên GA4 là thông qua gọi API Measurement Protocol. Thư viện https://www.npmjs.com/package/zmp-ga4 đã deprecated.

Tạo API Key
Truy cập Google Analytics trên Google Console -> Admin -> Data streams -> Add stream -> Web -> Copy API Key
Gắn vào mini app
Tạo 1 file Tracking.ts dùng chung cho việc xử lý event tracking:

// utils/Tracking.ts - Measurement Protocol cho Zalo Mini App
const MEASUREMENT_ID = 'G-XXXXXXXXXX';  // Thay bằng ID của bạn
const API_SECRET = 'YOUR_API_SECRET';   // Thay secret

async function sendGA4Event(eventName, params = {}) {
  try {
    // Lấy Zalo user ID làm client_id (unique tracking)
    const zaloUser = await zmp.getCurrentUserInfo();
    const clientId = zaloUser?.userId || `zalo_anonymous_${Date.now()}`;

    const payload = {
      client_id: clientId,
      user_id: clientId,
      user_properties: currentUserProperties,
      events: [{
        name: eventName,
        params: {
          // Auto params
          page_title: document.title || zmp.currentPage?.title || 'Zalo Mini App',
          page_location: `zalo://miniapp${window.location.pathname || '/'}`,
          engagement_time_msec: 100,  // Tăng retention
          // Custom params
          ...params
        }
      }]
    };

    const url = `https://www.google-analytics.com/mp/collect?measurement_id=${MEASUREMENT_ID}&api_secret=${API_SECRET}`;

    const response = await fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });

    if (!response.ok) {
      console.warn('GA4 send fail:', response.status, await response.text());
    }
  } catch (error) {
    console.error('GA4 error:', error);
  }
}

// Export functions dùng
export const GA4 = {
  pageView: (pageTitle) => sendGA4Event('page_view', { page_title: pageTitle }),
  buttonClick: (buttonName) => sendGA4Event('button_click', { button_name: buttonName }),
  purchase: (value, currency = 'VND') => sendGA4Event('purchase', { value, currency }),
  // Thêm events khác...
};

Kiểm tra network log, nếu có API này response 204 là thành công rồi

Kết quả trên trang Realtime Analytics trên Firebase

Nếu có khó khăn gì thì nhắn mình support nha :D

Hướng dẫn tích hợp CheckoutSDK vào Zalo Mini App (COD)

Lê Vũ Huy — Sun, 14 Jul 2024 09:37:35 +0000

Mình viết bài này để ghi lại quá trình tích hợp Checkout SDK của Zalo. Không rõ các bạn ở Zalo bị dí deadline nhiều không :D mà tài liệu hướng dẫn của các bạn hơi thiếu thốn, không được cập nhật thường xuyên. Nhiều thông tin phải search ở trên trang community của Zalo chứ doc cũng không có luôn. Hi vọng bài này có thể giúp các bạn né được các pain point mà mình đã trải qua.

Nhớ là phải đọc hết bài trước khi đặt câu hỏi nhé

Bài viết này mình sẽ hướng dẫn với phương thức thanh toán COD trước.

Tham khảo tài liệu hướng dẫn của Zalo

1. Tạo đơn hàng bằng CheckoutSDK

Giả sử rằng mini app của bạn đã hoàn thành xong chức năng tạo đơn hàng, giờ chúng ta cần gửi thông tin đơn hàng đó lên CheckoutSDK của Zalo. Để tạo được đơn hàng trên CheckoutSDK chúng ta cần tạo đơn hàng trên server của chúng ta, sau đó để nó ở trạng thái "Chờ thanh toán", rồi dùng ID của đơn hàng đó để định danh với CheckoutSDK.
Cài đặt thư viện ở mini app:

"dependencies": {
    "zmp-sdk": "^2.39.1",
}

Tạo đơn hàng:

import { Payment } from "zmp-sdk";

async function createOrder() {
    const cart = {
        items: [
            {
                product: { id: 1, name: "Xa phong", price: 10000},
                quantity: 2,
            }
        ],
        receiverName: "HuyLV"
        address: "toa nha FPT, so 10 Pham Van Bach",
        finalPrice: 20000,
    }
    const order = await createOrderOnYourServer(cart);

    // build data để tạo order trên CheckoutSDK
    const item = cart.items.map((item) => ({
      id: String(item.product.id),
      amount: item.quantity * item.product.price,
    }));
    const paymentMethod = {
      id: "COD_SANDBOX",
      isCustom: false,
    };
    const extraData = {
      storeName: "Kho tổng",
      storeId: "1",
      orderId: order.id, // id mà chúng ta đã tạo ở server của mình
      notes: "",
    };
    const orderData: any = {
      desc: `Thanh toan ${cart.finalPrice}`,
      item,
      amount: body.finalPrice,
      extradata: JSON.stringify(extraData),
      method: JSON.stringify(paymentMethod),
    };
    // ở bước này cần tạo 1 chuỗi mac từ orderData để đảm bảo tính toàn vẹn của dữ liệu
    // để tạo được mac, chúng ta cần API ở bước 2
    const mac = await createMac(orderData);
    orderData.mac = mac;
    return new Promise((resolve, reject) => {
        Payment.createOrder({
            ...orderData,
            success: resolve,
            fail: reject,
        });
    });
}

Chú ý: Ở bước tạo mac của orderData, chúng ta bắt buộc phải gọi lên server để tạo mac chứ ko được tạo mac ở client side. Đoạn này tài liệu của Zalo có nhắc đến nhưng rất dễ bị miss.

2. Xây dựng các API payment phục vụ cho việc thanh toán

2.1. API tạo mac

Mac là 1 string lưu thông tin xác thực của dữ liệu đơn hàng, dùng PrivateKey được cung cấp để chứng thực toàn bộ dữ liệu. Các dữ liệu được sắp xếp theo thứ tự từ điển tăng dần để tạo mã hash cho thông tin. Code API tạo mac như sau:

const CryptoJS = require('crypto-js');

createMac: async (body) => {
    try {
      const dataMac = Object.keys(body)
        .sort()
        .map(
          (key) =>
            `${key}=${
              typeof body[key] === 'object'
                ? JSON.stringify(body[key])
                : body[key]
            }`
        )
        .join('&');
      // biến môi trường ZALO_CHECKOUT_SECRET_KEY lấy ở bước 3
      const mac = CryptoJS.HmacSHA256(
        dataMac,
        process.env.ZALO_CHECKOUT_SECRET_KEY
      ).toString();
      return mac;
    } catch (e) {
      console.log(e);
    }
  }

2.2. API nhận dữ liệu PTTT

Chúng ta cần build 1 API mở để server của Zalo gọi vào, và chúng ta sẽ phản hồi dữ liệu đó có toàn vẹn hay không. Đối với 2 phương thức: Thanh toán khi nhận hàng (COD) và Chuyển khoản ngân hàng, chúng ta cần hiện thực API này khi người dùng chọn một trong hai phương thức này.

Chú ý API này không require authentication nhé
const CryptoJS = require('crypto-js');

zaloNotify: async (body) => {
try {
const { data, mac } = body || {};
if (!data || !mac) {
return {
returnCode: 0,
returnMessage: 'Missing data or mac',
};
}
const { method, orderId, appId } = data || {};
if (!method || !orderId || !appId) {
return {
returnCode: 0,
returnMessage: 'Missing method or orderId or appId',
};
}
const str = appId=${appId}&orderId=${orderId}&method=${method};
const reqMac = CryptoJS.HmacSHA256(
str,
process.env.ZALO_CHECKOUT_SECRET_KEY
).toString();
if (reqMac == mac) {
return {
returnCode: 1,
returnMessage: 'Success',
};
} else {
return {
returnCode: 0,
returnMessage: 'Fail',
};
}
} catch (e) {
console.log(e);
return {
returnCode: 0,
returnMessage: 'Fail',
};
}
}

OK, deploy 2 API này lên test server nhé.

> Server của bạn cần whitelist cho danh sách địa chỉ IP của CheckoutSDK Server:
> 118.102.2.29
> 49.213.78.2

# 3. Cài đặt trên trang quản lý mini app
- Truy cập trang quản lý mini app: 
https://mini.zalo.me/developers -> Chọn ZaloApp -> chọn mini app -> ở menu bên trái chọn CheckoutSDK -> cấu hình chung
- Chỉnh `AppStatus` thành `ACTIVE`, sử dụng `Private Key` cho biến môi trường `ZALO_CHECKOUT_SECRET_KEY`
- Thêm phương thức thanh toán mới, chọn `Thanh toán khi nhận hàng - Sandbox`
 - Notify Url: điền API ở bước 2.2

 - Redirect path: đường dẫn mà mini app sẽ redirect đến khi thanh toán xong
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sblsv4hczgnjz6vwre2d.png)

# 4. Thêm màn hình kết quả thanh toán
Sau thanh toán xong thì chắc chắn là phải mở ra màn kết quả thanh toán rồi. Ở đây sẽ xảy ra 2 trường hợp phụ thuộc vào phiên bản Zalo mà user sử dụng.

1. Với phiên bản Zalo đã hỗ trợ event open app, bạn cần lắng nghe sự kiện OpenApp và kiểm tra kết quả từ hệ thống thanh toán để xử lý.
> iOS: từ 22.02.01
> Android: từ 22.03.02

2. Với những phiên bản Zalo chưa hỗ trợ event OpenApp, sau khi thanh toán, hệ thống sẽ điều hướng người dùng tới redirect path đã cấu hình trên web.

Để lắng nghe sự kiện open app, bạn cần khai báo hook `useHandlePayment` và gọi nó khi khởi tạo app.

import { events, EventName } from "zmp-sdk";

export const useHandlePayment = () => {
const navigate = useNavigate();

useEffect(() => {
events.on(EventName.OpenApp, (data) => {
// data.path = /checkout-result?env=DEVELOPMENT&version=zdev-655f4b9a&appTransID=240601_1923887902773438459351224118883
// checkout-result là path mà chúng ta khai báo ở bước 3
if (data?.path) {
navigate(data?.path, {
state: data,
});
}
});
});
}

Do thanh toán COD thì kết quả luôn là thành công rồi nên màn kết quả thanh toán cũng đơn giản thôi:

// CheckoutResult.tsx
export default function CheckoutResult() {
const navigate = useNavigate();

return (

Thanh toán thành công

);

}

OK, everything well done, hãy build lên **máy thật** và chạy thử thôi nào. Phần thanh toán này chỉ có thể test trên máy thật thôi nhé.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/koibniji4o3buqhvsp4x.png)

# 5. Go live
Chú ý: lên môi trường production cần phải tạo thêm phương thức thanh toán `Thanh toán khi nhận hàng` (ko Sandbox).

Like ủng hộ mình để mình làm tiếp bài hướng dẫn tích hợp VNPAY nha :D

Nếu có bất kỳ thắc mắc nào, có thể comment bên dưới hoặc contact mình qua [đây](https://www.facebook.com/huylv.177), mình sẽ support bạn trong khả năng của mình ;)

Install NVM, Yarn, Postgres, Nginx, PM2 on Centos 8

Lê Vũ Huy — Sun, 14 Apr 2024 14:51:53 +0000

These are the quick commands to install NVM, Nodejs, Yarn, Nginx on Centos 8

1. NVM

sudo yum install curl tar nano -y 
curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash   
source ~/.bashrc
nvm install 18

2. Yarn

curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
sudo rpm --import https://dl.yarnpkg.com/rpm/pubkey.gpg
sudo yum install yarn -y

5. Nginx

sudo yum install -y epel-release nginx
sudo systemctl start nginx

Config firewall

sudo yum install firewalld -y
sudo systemctl enable firewalld
sudo reboot

sudo firewall-cmd --permanent --zone=public --add-service=http
sudo firewall-cmd --permanent --zone=public --add-service=https
sudo firewall-cmd --reload
sudo systemctl enable nginx

6. PostgreSQL

Download:

sudo dnf module enable postgresql:13 -y
sudo dnf install postgresql-server -y
sudo postgresql-setup --initdb
sudo systemctl start postgresql
sudo systemctl enable postgresql

Setup password for user postgres

sudo -u postgres psql
ALTER USER postgres with password 'yourpassword';

Open port 5432 to connect database from remote:
nano /var/lib/pgsql/data/postgresql.conf

listen_addresses = '*'
port = 5432

Open firewall port:

firewall-cmd --zone=public --add-port=5432/tcp --permanent
firewall-cmd --reload
systemctl restart firewalld

Open this file: nano /var/lib/pgsql/data/pg_hba.conf and add this line to end of file:

host    all   all   0.0.0.0/0   md5
host    all   all   ::/0        md5

Restart postgres

sudo systemctl restart postgresql

7. Unzip, git, pm2

yum install -y unzip git
npm i -g pm2

Troubleshoot

If you got this error:

(13: Permission denied) while connecting to upstream

Try to run this:

setsebool -P httpd_can_network_connect 1

Send email confirmation in Strapi v4

Lê Vũ Huy — Sat, 30 Sep 2023 07:19:43 +0000

I have spent 1 hour to search internet for this feature but encountered a few obstacles. So I write this tutorial, hope it helps someone 😄

First, you need a SMTP mail server to send verification email. Luckily, Sendgrid provide this. In this tutorial, I will guide you to send email from your domain email, using Sendgrid as a mail server.

1. Verify your domain on Sendgrid

Go to Sender authentication page, then click Authenticate Your Domain to start the process, they will ask you to add some DNS record to your domain. The result should look like this:

Next, go to Setting -> API Keys and create a new API Key for this email.

2. Config SMTP on strapi

In .env file in your strapi project, add

URL=http://localhost:1337

config strapi url:

// /config/server.js

module.exports = ({env}) => {
    ...
    url: env("URL", "http://localhost:1337"),
})

Install email plugin using this command:

yarn add @strapi/provider-email-nodemailer

Add SMTP config to your .env file

SMTP_HOST=smtp.sendgrid.net
SMTP_PORT=465
SMTP_USERNAME=apikey
SMTP_PASSWORD=<your api key from step 1>

Create a file name plugins.js in config folder

// /config/plugin.js

module.exports = ({ env }) => ({
  email: {
    config: {
      provider: 'nodemailer',
      providerOptions: {
        host: env('SMTP_HOST', 'smtp.sendgrid.net'),
        port: env('SMTP_PORT', 465),
        auth: {
          user: env('SMTP_USERNAME'),
          pass: env('SMTP_PASSWORD'),
        },
      },
      settings: {
        defaultFrom: 'hello@example.com', 
        defaultReplyTo: 'hello@example.com',
      },
    },
  },
});

The defaultFrom and defaultReplyTo are email from your domain, it can be any email such as support@yourdomain.com, admin@yourdomain.com,...

yarn build
yarn develop --watch-admin

3. Test send mail

Now go to admin dashboard on http://localhost:8000, navigate to Settings -> Email plugin -> Configuration, enter your email and Send test email, if everything is setup correctly, you should receive an email 😎

4. Send verification email

You are almost done, now navigate to Settings -> Advanced setting, turn on the Enable email confirmation. Next, enter the Redirection url below, it should be a page on your site to display the text Congratulation! You have successfully confirmed your email

Don't hesitate to ask me if you have any question 😁 @huylvz

Extend core controller in Strapi v4

Lê Vũ Huy — Fri, 29 Sep 2023 04:43:30 +0000

Let's assume that you have a content type named Notification, it store all the notification shows in Notification Screen. And you want to create an API to get only notification belongs to current user. Here is how to achieve this.

This content type has some columns:

// src/api/notification/content-types/notification/schema.json
{
  "kind": "collectionType",
  "collectionName": "notifications",
  "info": {
    "singularName": "notification",
    "pluralName": "notifications",
    "displayName": "Notification"
  },
  "options": {
    "draftAndPublish": false
  },
  "pluginOptions": {},
  "attributes": {
    "content": {
      "type": "text",
      "required": true
    },
    "userId": {
      "type": "integer",
      "required": true
    }
  }
}

After creating this content type on admin dashboard, source code should look like this:

Now you want to create an API to get only notification belongs to current user. You do not need to create a new API using npx strapi generate, just extend the generated controller.

1. Extend the core controller

//src/api/notification/controllers/notification.js

const { createCoreController } = require('@strapi/strapi').factories;

module.exports = createCoreController(
  'api::notification.notification',
  ({ strapi }) => ({
    async findMy(ctx) {
      const entries = await strapi
        .service('api::notification.notification')
        .find({
          filters: {
            userId: ctx.state.user.id,
          },
          sort: {
            createdAt: 'desc',
          },
        });
      ctx.body = entries;
    },
  })
);

2. Extend core router

Create a file name my-notification.js in src/api/notification/routes/

// src/api/notification/routes/my-notification.js
module.exports = {
  routes: [
    {
      method: 'GET',
      path: '/notifications/my',
      handler: 'notification.findMy',
      config: {
        policies: [],
        middlewares: [],
      },
    },
  ],
};

Now go to admin dashboard, grant permission access this enpoint to Authenticated users

3. Test it

Try to call this endpoint from Postman:

Don't hesitate to ask me if you have any question :D @huylvz

Upload image to an entry on Strapi

Lê Vũ Huy — Thu, 21 Sep 2023 13:00:32 +0000

Strapi is great but their document is really confusing. I spent about 2 hours trying to achieve this. When you create a new entry from REST API, you may also want to upload image to that entry.

1. REST API

Try make a POST request to

https://STRAPI_URL/api/upload

with the form-data:

ref: the table ID (ex: `api::submission.submission`)
refId: the entry ID
field: the field to upload
files: the file to upload

This is how we do it in Postman

2. Javascript SDK

strapi-js-sdk haven't supported upload file. Luckily, we can do it with a workaround.

const formData = new FormData();
formData.append(
    "files",
    blobFile,
    "file-name.jpg"
);
formData.append("ref", "api::submission.submission");
formData.append("refId", entryId);
formData.append("field", "speakingAudio");

const response = await strapi.request("POST", "/upload", {
    headers: {
        "Content-Type": "multipart/form-data",
    },
    data: formData,
});

If you have a question, don't hesitate to comment below.

Deploy Strapi trên Centos 7 sử dụng Nginx, PM2

Lê Vũ Huy — Thu, 21 Sep 2023 12:23:27 +0000

1. Clone repo to VPS

2. Tạo file ecosystem.config.js trong project

module.exports = {
  apps: [
    {
      name: "strapi-app",
      script: "npm",
      args: "run develop",
      exp_backoff_restart_delay: 100,
    },
  ],
};

Config domain cho project strapi: ./config/server.ts

export default ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
  url: 'http://admin.yourdomain.com',
  app: {
    keys: env.array('APP_KEYS'),
  },
  webhooks: {
    populateRelations: env.bool('WEBHOOKS_POPULATE_RELATIONS', false),
  },
});

3. Chạy pm2 service

npm i -g pm2
pm2 start ecosystem.config.js

4. Cài đặt Nginx

Hướng dẫn

5. Tạo file config nginx:

Tạo file /etc/nginx/con.f/loyalty-strapi.conf (thường sẽ đặt tên file theo tên app)

upstream strapi {
    server 127.0.0.1:1337;
}

server {
    # Listen HTTP
    listen 80;
    listen [::]:80;
    server_name admin.yourdomain.com; 

        client_max_body_size 100M;

location / {
        proxy_pass http://strapi;

        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Host $http_host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_pass_request_headers on;
    }
}

Bạn cần thay thế các thông tin domain của bạn vào field server_name

6. Chạy nginx dưới user root:

mở file /etc/nginx/nginx.conf

//change this
user nginx;

//to this
user root;

7. Restart nginx:

sudo systemctl restart nginx

8. Troubleshoot

1. Permission denied

 connect() to 127.0.0.1:1337 failed (13: Permission denied) while connecting to upstream, client: 42.114.89.25, server: admin.yourdomain.com, request: "GET /favicon.ico HTTP/1.1", upstream: "http://127.0.0.1:1337/favicon.ico", host: "103.185.184.216", referrer: "http://103.185.184.216/"

→ chạy lệnh

setsebool -P httpd_can_network_connect 1

Install NVM, Nodejs, Yarn, Python3, GCC, Nginx, Postgres on Centos 7

Lê Vũ Huy — Thu, 21 Sep 2023 11:57:23 +0000

These are the quick commands to install NVM, Nodejs, Yarn, Python3, Gcc, Nginx on Centos 7

1. NVM

sudo yum install curl nano -y 
curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash   
source ~/.bashrc
nvm install 16

2. Yarn

curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
sudo rpm --import https://dl.yarnpkg.com/rpm/pubkey.gpg
sudo yum install yarn -y

3. Python 3

If you want to install sqlite on Centos7, you will need python3 and gcc

sudo yum install -y python3

4. GCC

yum install gcc-c++ -y
yum install cmake -y
yum install centos-release-scl -y
yum install devtoolset-9 -y

scl enable devtoolset-9 bash

If you restart the shell, it will revert to GCC 4.8.5.
You can add source /opt/rh/devtoolset-9/enable into you bashrc file to set GCC 9 as the default.

5. Nginx

sudo yum install -y epel-release
sudo yum install -y nginx
sudo systemctl start nginx

Config firewall

sudo yum install firewalld -y
sudo systemctl enable firewalld
sudo reboot
sudo firewall-cmd --state // check the firewall state
firewall-cmd --get-active-zones //check active zones

sudo firewall-cmd --permanent --zone=public --add-service=http
sudo firewall-cmd --permanent --zone=public --add-service=https
sudo firewall-cmd --reload
sudo systemctl enable nginx

6. PostgreSQL

Download:

sudo yum install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-7-x86_64/pgdg-redhat-repo-latest.noarch.rpm
sudo yum install -y postgresql15-server
sudo /usr/pgsql-15/bin/postgresql-15-setup initdb
sudo systemctl start postgresql-15
sudo systemctl enable postgresql-15

Setup password for user postgres

sudo passwd postgres

Open port 5432 to connect database from remote:
nano /var/lib/pgsql/15/data/postgresql.conf

listen_addresses = '*'
port = 5432

Open firewall port:

firewall-cmd --zone=public --add-port=5432/tcp --permanent
firewall-cmd --reload

Open this file: nano /var/lib/pgsql/data/pg_hba.conf and add this line to end of file:

host  all  all 0.0.0.0/0 md5

Restart postgres

sudo systemctl restart postgresql-15

7. Unzip

yum install -y unzip

Cài đặt alias trong dự án React Native

Lê Vũ Huy — Thu, 21 Sep 2023 11:54:31 +0000

Alias là dạng import rút gọn trong các dự án React, giúp chúng ta có code nhìn đẹp hơn. Bạn có thể import dạng @components/Button thay vì ../../components/Button. Các bước để cài đặt alias trong ứng dụng React Native khá đơn giản.

1. Cài đặt

yarn add --dev babel-plugin-module-resolver

2. Setup babel.config.js

Định nghĩa các alias mà bạn sẽ sử dụng trong project, cái này sẽ giúp babel khi thông dịch code ts ra js thì sẽ hiểu dc các import alias.

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module-resolver",
        {
          alias: {
            utils: "./src/utils",
            screens: "./src/screens",
            components: "./src/components",
            recoilStates: "./src/recoil",
            navigator: "./src/navigator",
          },
        },
      ],
    ],
  };
};

3. Setup tsconfig.json

Định nghĩa lại 1 lần nữa ở bên tsconfig.json, cái này giúp typescript server hiểu được các import alias khi development.

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "baseUrl": "src",
    "paths": {
      "utils/*": [
        "utils/*"
      ],
      "components/*": [
        "components/*"
      ],
      "screens/*": [
        "screens/*"
      ],
      "recoilStates/*": [
        "recoil/*"
      ],
      "navigator/*": [
        "navigator/*"
      ]
    }
  }
}

4. Done 😄

Hãy thử rebuild project của bạn và trải nghiệm, nhớ là mỗi khi thay đổi file babel.config.js thì bạn phải restart metro server nhé (react-native start —reset-cache hoặc expo start -c).

E2E test dự án React native sử dụng Detox

Lê Vũ Huy — Sat, 16 Sep 2023 07:36:44 +0000

Detox là 1 framework do Wix phát triển, dùng trong end to end testing (E2E), tức là test theo những thao tác mà end user thường thực hiện. E2E test tuy thời gian chạy lâu nhưng sẽ kiểm thử được sát nhất với những gì mà end user sẽ sử dụng trên app của chúng ta.

Để bắt đầu E2E test trên React native:

1. Cài đặt

npm install detox-cli --g
// for iOS
brew tap wix/brew
brew install applesimutils

yarn add "jest@^29" --dev
yarn add detox --dev
detox init

Sau khi chạy dòng này, output thường sẽ là:

Created a file at path: .detoxrc.js 
Created a file at path: e2e/jest.config.js
Created a file at path: e2e/starter.test.js

2. Setup cho iOS

Replace all toàn bộ string YOUR_APP trong file .detoxrc.js thành tên dự án của bạn

apps: {
     'ios.debug': {
       type: 'ios.app',
       binaryPath: 'ios/build/Build/Products/Debug-iphonesimulator/YOUR_APP.app',
       build: 'xcodebuild -workspace ios/YOUR_APP.xcworkspace -scheme YOUR_APP -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build'
     },
     'ios.release': {
       type: 'ios.app',
       binaryPath: 'ios/build/Build/Products/Release-iphonesimulator/YOUR_APP.app',
       build: 'xcodebuild -workspace ios/YOUR_APP.xcworkspace -scheme YOUR_APP -configuration Release -sdk iphonesimulator -derivedDataPath ios/build'
     },

Cũng trong file này, lựa chọn máy ảo để chạy test trên Android và iOS.

Tên máy ảo sẽ có dạng iPhone 14 Pro và Pixel_4_API_31

Thêm script test vào package.json:

"scripts": {
    ...
    "pree2e-ios-debug": "detox build -c ios.sim.debug",
    "e2e-ios-debug": "detox test -c ios.sim.debug",
    "pree2e-android-debug": "detox build -c android.emu.debug",
    "e2e-android-debug": "detox test -c android.emu.debug"
}

Chạy build debug:

yarn pree2e-ios-debug

Chạy test:

yarn e2e-ios-debug

Cài đặt cho android

Thêm thư viện detox vào android/build.gradle

 buildscript {
   ext {
     buildToolsVersion = "31.0.0"
     minSdkVersion = 21 // (1)
     compileSdkVersion = 30
     targetSdkVersion = 30
+    kotlinVersion = 'X.Y.Z' // (2)
   }
 …
   dependencies {
     classpath("com.android.tools.build:gradle:7.1.1")
     classpath("com.facebook.react:react-native-gradle-plugin")
     classpath("de.undercouch:gradle-download-task:5.0.1")
+    classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion") // (3)
 …

 allprojects {
   repositories {
     …
     google()
+    maven { // (4)
+      url("$rootDir/../node_modules/detox/Detox-android")
+    }
     maven { url 'https://www.jitpack.io' }
   }
 }

Bổ sung thư viện vào android/app/build.gradle

android {
   …
   defaultConfig {
     …
     versionCode 1
     versionName "1.0"
+    testBuildType System.getProperty('testBuildType', 'debug')
+    testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'
   …
   buildTypes {
     release {
       minifyEnabled true
       proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+      proguardFile "${rootProject.projectDir}/../node_modules/detox/android/detox/proguard-rules-app.pro"

       signingConfig signingConfigs.release
     }
   }
   …

 dependencies {
+  androidTestImplementation('com.wix:detox:+')
+  implementation 'androidx.appcompat:appcompat:1.1.0'
   implementation fileTree(dir: "libs", include: ["*.jar"])

Tạo file hỗ trợ test tại đường dẫn: android/app/src/androidTest/java/<your.package>/DetoxTest.java, chú ý là bạn phải tạo folder androidTest nhé

package com.<your.package>; // (1)

import com.wix.detox.Detox;
import com.wix.detox.config.DetoxConfig;

import org.junit.Rule;
import org.junit.Test;
import org.junit.runner.RunWith;

import androidx.test.ext.junit.runners.AndroidJUnit4;
import androidx.test.filters.LargeTest;
import androidx.test.rule.ActivityTestRule;

@RunWith(AndroidJUnit4.class)
@LargeTest
public class DetoxTest {
    @Rule // (2)
    public ActivityTestRule<MainActivity> mActivityRule = new ActivityTestRule<>(MainActivity.class, false, false);

    @Test
    public void runDetoxTests() {
        DetoxConfig detoxConfig = new DetoxConfig();
        detoxConfig.idlePolicyConfig.masterTimeoutSec = 90;
        detoxConfig.idlePolicyConfig.idleResourceTimeoutSec = 60;
        detoxConfig.rnContextLoadTimeoutSec = (BuildConfig.DEBUG ? 180 : 60);

        Detox.runTests(mActivityRule, detoxConfig);
    }
}

Chạy build debug:

yarn pree2e-android-debug

chạy test:

e2e-android-debug

Done :D

Nếu có vấn đề gì, đừng ngại comment hỏi mình bên dưới nhé!