<![CDATA[Lam Nhan]]>https://blog.lamnhan.devRSS for NodeSat, 02 May 2026 14:51:11 GMT60<![CDATA[Flutter/Dart: Simplifying Isolate and Worker Usage]]>https://blog.lamnhan.dev/isolate-and-worker-in-flutterhttps://blog.lamnhan.dev/isolate-and-worker-in-flutterWed, 15 May 2024 15:34:43 GMTBy using the isolate_manager v5.0.0, the Isolate on the VM and Worker on the Web will be implemented more easily than ever.

This package uses js_interop and the web package under the hood, so the app can freely compile to WASM.

Firstly, add an annotation to a function that you want to use as a Worker:

@isolateManagerWorker
int add(List<int> params){
  return params[0] + params[1]
}

@isolateManagerWorker
int subtract(List<int> params) {
  return params[0] - params[1];
}

Note that those functions can not be depended on any Flutter UI library like dart:ui or dart:io which are not supported when compiling to js.

Then create an IsolateManager instance:

final isolatedAdd = IsolateManager.create(
                      add, 
                      workerName: 'add', 
                      concurrent: 2,
                   );

final isolatedSubtract = IsolateManager.create(
                      subtract, 
                      workerName: 'subtract', 
                      concurrent: 2,
                   );

Run this command to generate the Workers:

dart run isolate_manager:generate

Now we can use it to compute something like:

final addResult = await isolatedAdd([50, 30]); // 80
final subtractResult = await isolatedSubtract([50, 30]); //20

Or

StreamBuilder(
  stream: isolatedAdd.stream,
  builder: (context, snapshot) {
    if (!snapshot.hasData) {
      return const Center(
        child: CircularProgressIndicator(),
      );
    }
    return Text('Isolated Add: ${snapshot.data}');
  },
),

That’s it. Those isolated functions will work on both VM (via Isolate) and Web (via Worker).

Thank you for your reading.

]]><![CDATA[Đa Ngôn Ngữ Cho Ứng Dụng Flutter Với LanguageHelper]]>https://blog.lamnhan.dev/da-ngon-ngu-cho-ung-dung-flutter-voi-languagehelperhttps://blog.lamnhan.dev/da-ngon-ngu-cho-ung-dung-flutter-voi-languagehelperSun, 03 Mar 2024 07:39:39 GMTPHẦN 1: CÁC BƯỚC THIẾT LẬP VÀ SỬ DỤNG CƠ BẢN

GIỚI THIỆU

Có nhiều cách để có thể sử dụng được nhiều ngôn ngữ (hay còn gọi là localization) cho ứng dụng Flutter. Ở bài viết này, mình sẽ giới thiệu thư viện language_helper và cách sử dụng của nó để có thể tạo ứng dụng đa ngôn ngữ một cách đơn giản và hiệu quả nhất.

TÍNH NĂNG

  • Dễ dàng kiểm soát và thay đổi ngôn ngữ trong ứng dụng. Tự động áp dụng ngôn ngữ hiện tại của máy cho ứng dụng.

  • Có thể kiểm soát bản dịch với LanguageConditions (như dịch số nhiều trong tiếng Anh).

  • Sử dụng generator để tách chuỗi cần thiết để tiện cho việc dịch (không cần sử dụng build_runner nên chạy rất nhanh).

  • Có thể sử dụng Language Helper Translator trên Chat GPT-4 để hỗ trợ dễ hơn cho việc dịch.

CÀI ĐẶT

Chỉ có bước này là bắt buộc trong quá trình phát triển ứng dụng, những bước còn lại có thể thực hiện sau khi ứng dụng đã sẵn sàng cho việc phát hành.

  • Thêm language_helper vào project:

      flutter pub add language_helper

  • Thêm khởi tạo ngôn ngữ vào project:

      main() async {
    WidgetsFlutterBinding.ensureInitialized();
    await LanguageHelper.instance.initial(data: []);
    runApp(const MyApp());
  }

  • Thêm .tr, .trP hay .trF vào những chuỗi cần dịch:

    • Cơ bản:

        Text('Chữ cần dịch'.tr)

    • Dịch có điều kiện:

        Text('Xin chào @{name}'.trP({'name': name}))

    • Số nhiều:

        final data = {
      'We have @{number} dollar': LanguageConditions(
          param: 'number',
          conditions: {
              '0': 'We have zero dollar',
              '1': 'We have one dollar',
              '_': 'We have @{number} dollars'
          },
      ),
  }

  Text('We have @{number} dollar'.trP({'number': number}))

GENERATOR

Generate:

dart run language_helper:generate

Đường dẫn sau khi chạy:

.lib
|--- resources
|    |--- language_helper
|    |    |--- language_data.dart
|    |    |--- languages
|    |    |    |--- _generated.dart   ; This file will be overwritten when re-generating

DỊCH VÀ HIỆU CHỈNH

Tạo thêm tệp với ngôn ngữ tương ứng như en.dart, vi.dart,... ở trong thư mục languages.

Mở Language Helper Translator trên Chat-GPT 4, sao chép nội dung trong tệp _generated.dart, dán vào với theo mẫu sau và tiến hành dịch:

Đây là bản dịch của ứng dụng [Tên ứng dụng và mục đích cơ bản của ứng dụng]. Dịch sang [Ngôn ngữ đích]:

```dart
const analysisLanguageData = <String, dynamic>{
  'Xin chào @{name}': 'Xin chào @{name}',
  'Chúng ta có @{number} đô-la': 'Chúng ta có @{number} đô-la',
};
```

Sao chép kết quả và dán vào tệp ngôn ngữ tương ứng. Chẳng hạn như tệp en.dart:

const en = <String, dynamic>{
  'Xin chào @{name}': 'Xin chào @{name}',
  'Chúng ta có @{number} đô-la': 'We have @{number} dollar',
};

Hiệu chỉnh lại kết quả cần thiết như số nhiều, bạn có thể hiệu chỉnh trực tiếp ở biến en hoặc tạo biến mới như enOverride như sau:

final enOverride = <String, dynamic>{
  'Chúng ta có @{number} đô-la': LanguageCondition(
    param: 'number',
    conditions: {
      '0': 'We have zero dollar',
      '1': 'We have one dollar',
      '_': 'We have @{number} dollars',
    }
  ),
};

Thêm ngôn ngữ vừa dịch vào tệp language_data.dart:

LanguageData data = {
  LanguageCodes.vi: analysisLanguageData,
  LanguageCodes.en: en,
};

LanguageData dataOverrides = {
  LanguageCodes.en: enOverride,
};

Cập nhật lại trong project:

main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await LanguageHelper.instance.initial(
      data: [LanguageDataProvider.data(data)]
      dataOverrides: [LanguageDataProvider.data(dataOverrides)],   
  );
  runApp(const MyApp());
}

CẬP NHẬT WIDGET KHI NGÔN NGỮ THAY ĐỔI

Sử dụng LanguageBuilder hoặc Tr cho những Widget cần thay đổi khi ứng dụng thay đổi ngôn ngữ. Chỉ có LanguageBuilder cần thiết được cập nhật nên bạn có không cần quan tâm nếu sử dụng LanguageBuilder ở nhiều nơi dẫn đến dư thừa.

Ở MaterialApp:

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return LanguageBuilder(
      builder: (context) {
        return MaterialApp(
          localizationsDelegates: languageHelper.delegates,
          supportedLocales: languageHelper.locales,
          locale: languageHelper.locale,
          home: const HomePage(),
        );
      }
    );
  }
}

Ở Widget:

LanguageBuilder(
    builder: (context) {
        return Scaffold(
          body: Column(
            children: [
              Text('Xin chào @{name}'.tr),
              Text('Chúng ta có @{number} đô-la'.tr),
            ],
          ),
        );
    },
),

Sử dụng Tr (Phiên bản thu gọn của LanguageBuilder):

Tr((_) => Text('Xin chào @{name}'.tr)),

KIỂM SOÁT NGÔN NGỮ

Thay đổi ngôn ngữ:

languageHelper.change(LanguageCodes.vi);

Thêm bản dịch mới:

languageHelper.addData(LanguageDataProvider.data(newLanguageData));
languageHelper.addDataOverrides(LanguageDataProvider.data(newLanguageDataOverrides));

KẾT LUẬN

Ở phần mở đầu, chúng ta đã hoàn thành việc cài đặt và cách sử dụng căn bản cho language_helper. Ở phần tiếp theo, chúng ta sẽ tìm hiểu cách thiết lập để có thể sử dụng được cho ứng dụng phức tạp hơn với JSON.

]]><![CDATA[How To Use OTP For Email Authentication In Flutter/Dart With Shared Hosting]]>https://blog.lamnhan.dev/how-to-use-otp-for-email-authentication-in-flutter-dart-with-shared-hostinghttps://blog.lamnhan.dev/how-to-use-otp-for-email-authentication-in-flutter-dart-with-shared-hostingMon, 04 Dec 2023 07:54:48 GMTIntroduction

In the Flutter application, when we need to authenticate Email via OTP, we have many ways to achieve this, such as:

  • Send OTP directly from within the Flutter app. This method will not be safe because it is easy to reveal the email configuration.

  • Send OTP via API call to the Server, the Server will be responsible for generating the OTP code and sending it to the user's email. In this way, we have two cases:

    • The OTP when the user enters from Email will be re-authenticated at the Server. In this way, we need to store the Email on the Server. Therefore, with this method, we need more configuration to use it and can affect the privacy policy if not set up carefully.

    • OTP when the user enters from Email will be authenticated on the Client side. With this method, the Server only makes a request to send OTP to the user's email, and at the same time sends OTP to the application and the application will be responsible for re-authenticating the OTP when the user enters the code. This is also the way I will guide in this article.

Currently, Shared Hosting is very cheap and popular in the market, so this is the goal I aim for. Besides, I chose the PHP language to perform the task of sending OTP because this is a very portable language, and can be used anywhere in Shared Hosting without any additional configuration (Javascript is supported but must be used with Nodejs and must configure Shared Hosting to run a Nodejs application).

The package mentioned is auth_email, I will give more specific instructions in this article.

Configuration And Usage

Server

On the Server side, the package uses PHP as the language and also uses the PHPMailer library to send emails to users.

First, you need to download v0.0.4 and unzip it, you will get a folder named src with the following structure:

And here is the content in index.php:

// Set the SMTP server to send through
$HOST = 'example.com';
// SMTP username
$USER_NAME = 'auth@example.com';
// SMTP password
$PASSWORD = 'password';
// TCP port to connect to
$PORT = 587;
// Send from
$SEND_FROM = $USER_NAME;

// Default subject for the email
$DEFAULT_SUBJECT = 'Verify Email';
// Default body for the email
$DEFAULT_BODY = 'Please use this OTP to verify your email for the <b>{appName}</b>, do not share this code to anyone: <b>{otp}</b>';
// Default length of the OTP
$DEFAULT_OTP_LENGTH = 6;

// Server key in SHA256 encryption (Ex: authemailtestkey)
$SERVER_SHA256_KEY = '6955c3a2dbfd121697623896b38f5eb759d2cd503476980e14b9beb0cc036c4d';

// Secure your applications
$ALLOWED_APPS = [
    // App name. Must be the same as the `appName` on the client side
    'Auth Email Test' => [
        // Allow/Disallow the app using the modified subject
        'modifiedSubject' => false,
        // Allow/Disallow the app using the modified body
        'modifiedBody' => false,
        // Allow/Disallow the app using the modified OTP length
        'modifiedOtpLength' => false,
    ],
];

With $DEFAULT_BODY, {appName} and {otp} will be replaced by the appName taken from the Client and the OTP is automatically generated at the Server.

The server only allows applications named in $ALLOWED_APPS to call to send an email.

After the configuration is complete, upload PHPMailer, config.php, and index.php to your Shared Hosting. For example, where you upload is https://example.com/auth/email to prepare for the next step.

So, we have completed the installation on the Server side.

Client

Add this package to your app:

flutter pub add auth_email

Create a new instance for AuthEmail:

final authEmail = AuthEmail(
    // App name. Must be available in `$ALLOWED_APPS` on the Server.
    appName: 'Auth Email Test',
    // Uploaded path.
    server: 'https://example.com/auth/email',
    // Normal form of the server key.
    serverKey: 'authemailtestkey',
    // Print the debug log.
    isDebug: true,
);

Next, OTP will be looked like this:

final bool result = await authEmail.sendOTP(
    email: 'exampleclient@gmail.com', 
    subject: 'Verify Email',
    body: 'Please use this OTP to verify your email for the <b>{appName}</b>, do not share this code to anyone: <b>{otp}</b>',
    otpLength: 6,
);

Notice that you can only change the subject, body and otpLength when the configuration on the Server side allows to change these values.

And here is the way to re-authenticate an OTP inputted by the user:

final bool isVerified = authEmail.verifyOTP(
    email: 'exampleclient@gmail.com', 
    otp: '<code>'
);

isVerified will be true if the inputted OTP is right and false if it's wrong.

So, you can confirm whether the Email the user entered is a valid Email or not.

Additional Information

Before sending OTP, you can check whether the user's email is correct or not with this method:

final isValid = AuthEmail.isValidEmail('exampleclient@gmail.com');

Conclusion

Thus, we can simply and safely send and confirm OTP in the Flutter/Dart application when using Shared Hosting with PHP programming language.

]]><![CDATA[Hướng Dẫn Sử Dụng OTP Để Xác Thực Email Trong Flutter/Dart Với Shared Hosting]]>https://blog.lamnhan.dev/xac-thuc-email-qua-otp-trong-flutter-khi-dung-shared-hostinghttps://blog.lamnhan.dev/xac-thuc-email-qua-otp-trong-flutter-khi-dung-shared-hostingSun, 03 Dec 2023 08:14:36 GMTGiới Thiệu

Trong ứng dụng Flutter, khi cần xác thực Email thông qua OTP, chúng ta có nhiều cách để đạt được điều này, chẳng hạn như:

  • Gửi OTP trực tiếp từ trong ứng dụng Flutter. Cách này sẽ không an toàn vì rất dễ để lộ cấu hình của email.

  • Gửi OTP thông qua API gọi đến Server, Server sẽ chịu trách nhiệm tạo mã OTP và gửi đến email của người dùng. Ở cách này chúng ta có hai trường hơp:

    • OTP khi người dùng nhập từ Email sẽ được xác thực lại ở Server, với cách này thì chúng ta cần lưu trữ Email ở Server. Do đó với cách này, chúng ta cần cấu hình nhiều hơn để sử dụng được và có thể ảnh hưởng đến chính sách bảo mật nếu không được thiết lập cẩn thận.

    • OTP khi người dùng nhập từ Email sẽ được xác thực ở phía Client. Với cách này thì Server chỉ thực hiện yêu cầu gửi OTP đến email người dùng, đồng thời gửi OTP đến ứng dụng và ứng dụng sẽ chịu trách nhiệm xác thực OTP khi người dùng nhập mã. Đây cũng chính là cách mình sẽ hướng dẫn ở trong bài viết này.

Hiện nay, Shared Hosting có giá rất rẻ và rất phổ biến trên thị trường, do đó đây là mục tiêu mà mình hướng đến. Bên cạnh đó, mình chọn ngôn ngữ PHP để thực hiện nhiệm vụ gửi OTP vì đây là ngôn ngữ rất lưu động, có thể sử dụng bất kỳ đâu ở Shared Hosting mà không cần cấu hình gì thêm (Javascript được hỗ trợ nhưng phải sử dụng với Nodejs và phải cấu hình Shared Hosting để chạy được ứng dụng Nodejs).

Package được đề cập đến là auth_email, mình sẽ hướng dẫn cụ thể hơn ở bài viết này.

Cấu Hình Và Sử Dụng

Server

Ở phía Server, package sử dụng PHP làm ngôn ngữ, đồng thời sử dụng thư viện PHPMailer để gửi email tới người dùng.

Trước tiên, bạn cần tải v0.0.4 về và giải nén, khi đó bạn sẽ nhận được được thư mục có tên src với cấu trúc như sau:

Và đây là nội dung trong file index.php:

// Set the SMTP server to send through
$HOST = 'example.com';
// SMTP username
$USER_NAME = 'auth@example.com';
// SMTP password
$PASSWORD = 'password';
// TCP port to connect to
$PORT = 587;
// Send from
$SEND_FROM = $USER_NAME;

// Tiêu đề mặc định cho Email
$DEFAULT_SUBJECT = 'Verify Email';
// Nội dung mặc định cho Email
$DEFAULT_BODY = 'Please use this OTP to verify your email for the <b>{appName}</b>, do not share this code to anyone: <b>{otp}</b>';
// Độ dài mặc định của OTP
$DEFAULT_OTP_LENGTH = 6;

// Client key ở mã hóa SHA256 (VD: authemailtestkey)
$SERVER_SHA256_KEY = '6955c3a2dbfd121697623896b38f5eb759d2cd503476980e14b9beb0cc036c4d';

// Bảo mật cho ứng dụng của bạn
$ALLOWED_APPS = [
    // Tên ứng dụng. `appName` ở client phải trùng với tên ứng dụng này
    'Auth Email Test' => [
        // Cho phép/Không cho phép ứng dụng sử dụng tiêu đề tùy chỉnh
        'modifiedSubject' => false,
        // Cho phép/Không cho phép ứng dụng sử dụng nội dung tùy chỉnh
        'modifiedBody' => false,
        // Cho phép/Không cho phép ứng dụng sử dụng độ dài OTP tùy chỉnh
        'modifiedOtpLength' => false,
    ],
];

Bạn hãy cấu hình dựa trên thông tin từ nhà cung cấp email, với số lượng ít thì bạn có thể sử dụng Gmail cho việc xác thực này. Mình sẽ có một bài viết cụ thể hơn về cách sử dụng SMTP trong Gmail.

Với $DEFAULT_BODY, {appName} và {otp} sẽ được thay thế bởi appName được lấy từ Client và OTP được tự động tạo ở Server.

Server chỉ cho phép ứng dụng có tên trong $ALLOWED_APPS gọi tới để gửi email.

Sau khi cấu hình xong, bạn hãy tải PHPMailer, config.php và index.php lên Shared Hosting của bạn. Ví dụ nơi bạn tải lên là https://example.com/auth/email để chuẩn bị cho bước tiếp theo.

Như vậy, chúng ta đã hoàn thiện việc cài đặt ở phía Server.

Client

Thêm package vào ứng dụng:

flutter pub add auth_email

Tạo instance mới cho AuthEmail:

final authEmail = AuthEmail(
    // Tên của ứng dụng. Phải có trong `$ALLOWED_APPS` ở server.
    appName: 'Auth Email Test',
    // URL của server.
    server: 'https://example.com/auth/email',
    // Key của server ở dạng thường.
    serverKey: 'authemailtestkey',
    // In log để debug
    isDebug: true,
);

Tiếp theo, OTP sẽ được gửi như sau:

final bool result = await authEmail.sendOTP(
    email: 'exampleclient@gmail.com', 
    subject: 'Xác Thực',
    body: 'Vui lòng sử dụng OTP này để xác thực cho ứng dụng <b>{appName}</b>, không chia sẻ với bất kỳ ai: <b>{otp}</b>',
    otpLength: 6,
);

Lưu ý là bạn chỉ có thể thay đổi subject, body và otpLength khi cấu hình ở Server cho phép thay đổi những thông tin này.

Và đây là cách để xác thực OTP sau khi người dùng nhập mã từ Email:

final bool isVerified = authEmail.verifyOTP(
    email: 'exampleclient@gmail.com', 
    otp: '<code>'
);

isVerified sẽ trả về true nếu OTP đã nhập đúng và false nếu OTP sai.

Như vậy, bạn đã có thể xác nhận được Email người dùng nhập có là Email khả dụng hay không rồi.

Thông Tin Thêm

Trước khi thực hiện việc gửi OTP, bạn có thể kiểm tra xem Email người dùng có chính xác hay chưa bằng hàm:

final isValid = AuthEmail.isValidEmail('exampleclient@gmail.com');

Kết Thúc

Như vậy, chúng ta đã có thể gửi và xác nhận OTP một cách đơn giản, an toàn trong ứng dụng Flutter (Dart) khi sử dụng Shared Hosting với ngôn ngữ PHP.

]]>