Luồng dữ liệu trong Redux React

Redux là 1 pattern được dùng rất phổ biến hiện tại nhằm giải quyết vấn đề quản lý global state trong React, React Native (cũng được dùng nhiều trong các ngôn ngữ, thư viện khác).

Redux hình thành với 3 nguyên tắc cơ bản trong việc quản lý state:

  1. Tất cả các trạng thái của ứng dụng đều được lưu trữ từ 1 kho (được gọi là store)
  2. Các trạng thái đều phải và chỉ là read-only (tức là chỉ đọc, ko được phép cập nhật)
  3. Các thay đổi phải thông qua các pure functions (hàm thuần – tức là kết quả đầu ra chỉ phụ thuộc vào giá trị đầu vào)

Luồng dữ liệu (Data Flow) trong Redux sẽ được thực hiện như dưới hình sau:

Trong đó:

  • Store là nơi sẽ lưu giữ tất cả các biến state (global state)
  • UI (View) sẽ lấy các giá trị state từ store để hiển thị
  • UI View không trực tiếp cập nhật giá trị đến store mà phải thông qua các action
  • Action được thực hiện, gửi dữ liệu mới đến cho reducer thực hiện việc update state data vào trong store

Cách tạo KeyHash Facebook cho ứng dụng Android

Khi phát triển ứng dụng Android có tích hợp đăng nhập Facebook (Facebook Login), KeyHash là một yếu tố bắt buộc phải cấu hình. Nếu KeyHash không đúng, ứng dụng sẽ gặp lỗi như “Invalid key hash” hoặc không thể đăng nhập Facebook dù code hoàn toàn chính xác. Trong bài viết này, mình sẽ hướng dẫn chi tiết cách tạo KeyHash Facebook bằng OpenSSL trên Windows, dựa trên quy trình phổ biến và dễ áp dụng cho người mới.

1. KeyHash Facebook là gì và vì sao cần tạo?

KeyHash Facebook là một chuỗi mã hóa được tạo ra từ certificate dùng để ký ứng dụng Android (debug hoặc release). Facebook sử dụng KeyHash để xác thực rằng ứng dụng đang gọi API Facebook thực sự là ứng dụng mà bạn đã khai báo trong Facebook Developer Console.

Trong quá trình phát triển, bạn sẽ thường gặp hai loại KeyHash:

  • Debug KeyHash: dùng khi chạy app trực tiếp từ Android Studio.
  • Release KeyHash: dùng khi build APK/AAB để upload lên Google Play.

Trong bài viết này, chúng ta tập trung vào Debug KeyHash, vì đây là trường hợp phổ biến nhất khi test và học tập.

2. Chuẩn bị công cụ cần thiết

Để tạo KeyHash Facebook trên Windows, bạn cần hai công cụ chính:

2.1. OpenSSL cho Windows

OpenSSL là công cụ mã hóa dòng lệnh, dùng để xử lý và chuyển đổi dữ liệu certificate.

Download OpenSSL tại link sau (Code Google Archive):

https://code.google.com/archive/p/openssl-for-windows/downloads

Sau khi tải về:

  1. Giải nén file.
  2. Tạo thư mục OpenSSL trong ổ C:/
  3. Copy toàn bộ thư mục OpenSSL đã giải nén vào C:\OpenSSL

Ví dụ:

C:\OpenSSL\bin\openssl.exe

2.2. Keytool (đã có sẵn trong JDK)

keytool là công cụ đi kèm JDK. Nếu bạn đã cài Android Studio thì gần như chắc chắn máy đã có JDK.

Bạn có thể kiểm tra bằng cách mở Command Prompt và gõ:

keytool -help

Nếu hiện ra hướng dẫn, nghĩa là keytool đã sẵn sàng.

3. Xác định vị trí file debug.keystore

File debug.keystore là file mặc định Android dùng để ký ứng dụng khi chạy debug.

Thông thường, file này nằm trong thư mục .android của user đang sử dụng trên Windows.

Ví dụ đường dẫn phổ biến:

C:\Users\Administrator\.android\debug.keystore

Hoặc:

C:\Documents and Settings\Administrator\.android\debug.keystore

Lưu ý:

  • .android là thư mục ẩn, bạn cần bật Show hidden files trong Windows Explorer.
  • Nếu không thấy file này, hãy chạy thử một project Android bằng Android Studio, hệ thống sẽ tự tạo debug.keystore

4. Chạy lệnh tạo KeyHash Facebook

Sau khi đã có đầy đủ:

  • OpenSSL
  • keytool
  • debug.keystore

Bạn mở Command Prompt (Run as Administrator để tránh lỗi quyền truy cập) và chạy lệnh sau:

keytool -exportcert -alias androiddebugkey -keystore "C:\Documents and Settings\Administrator\.android\debug.keystore" | "C:\OpenSSL\bin\openssl" sha1 -binary | "C:\OpenSSL\bin\openssl" base64

Giải thích nhanh lệnh:

  • keytool -exportcert: xuất certificate từ keystore
  • -alias androiddebugkey: alias mặc định của debug keystore
  • -keystore: đường dẫn tới file debug.keystore
  • openssl sha1 -binary: mã hóa SHA-1
  • openssl base64: chuyển kết quả sang Base64 (định dạng Facebook yêu cầu)

Khi chạy lệnh, hệ thống sẽ hỏi mật khẩu keystore.

Mật khẩu mặc định của debug.keystore là:

android

Sau khi nhập đúng mật khẩu, bạn sẽ nhận được một chuỗi KeyHash dạng:

AbCdEfGhIjKlMnOpQrStUvWxYz123456789=

5. Khai báo KeyHash vào Facebook Developer

Sau khi có KeyHash, bạn cần thêm nó vào Facebook App:

  1. Truy cập: https://developers.facebook.com
  2. Chọn ứng dụng của bạn
  3. Vào Settings → Basic
  4. Kéo xuống phần Android
  5. Dán KeyHash vào ô Key Hashes
  6. Save Changes

Nếu bạn làm việc trên nhiều máy hoặc nhiều môi trường, hãy thêm tất cả KeyHash tương ứng để tránh lỗi khi test.

6. Một số lỗi thường gặp và cách xử lý

Lỗi “Invalid key hash”

  • Kiểm tra lại đúng debug.keystore chưa
  • Đảm bảo chạy đúng user Windows (Administrator hay user khác)
  • Đảm bảo alias là androiddebugkey

Không nhận diện được openssl

  • Kiểm tra lại đường dẫn C:\OpenSSL\bin\openssl
  • Hoặc thêm OpenSSL vào Environment Variables → PATH

Sai keystore khi build release

  • Debug KeyHash không dùng cho bản release
  • Khi release, bạn cần tạo KeyHash từ keystore ký release

7. Kết luận

Việc tạo KeyHash Facebook là một bước nhỏ nhưng cực kỳ quan trọng khi tích hợp Facebook Login cho ứng dụng Android. Chỉ cần sai một ký tự, ứng dụng của bạn có thể không đăng nhập được dù mọi thứ khác đều đúng.

Với hướng dẫn trên, bạn hoàn toàn có thể:

  • Tạo KeyHash bằng OpenSSL trên Windows
  • Hiểu rõ vai trò của debug.keystore
  • Tự tin cấu hình Facebook Developer cho ứng dụng Android

Hy vọng bài viết này giúp bạn tiết kiệm thời gian và tránh được những lỗi khó chịu khi tích hợp Facebook Login. Chúc bạn code mượt và build app thành công!

Check validate Email trong JavaScript

Check validation email đầu vào là bài toán rất phổ biến, sử dụng để bắt validate form gửi lên ở phía client. Có khá nhiều tiêu chí ràng buộc với 1 email: Trong JavaScript, các bạn có thể sử dụng regex (biểu thức chính quy) để viết function check validate email. Dưới đây là 1 … Read more

Các loại Image Resize Mode thường dùng

Image Resize Mode (Chế độ thay đổi kích thước hình ảnh) là một khái niệm phổ biến trong xử lý hình ảnh và thiết kế đồ họa, mô tả cách thức một hình ảnh được thay đổi kích thước để phù hợp với không gian hoặc yêu cầu kích thước cụ thể.

Tùy vào mục đích sử dụng, các chế độ resize thường được sử dụng bao gồm:

  • Cover: bức ảnh luôn căn giữa, không bị vỡ hay bị nén. Ảnh sẽ có kích thước phù hợp với chiều lớn hơn theo tỉ lệ.

Ví dụ: ảnh có kích thước là 500×500

khung chứa ảnh có kích thước là 400×600

=> ảnh sẽ hiển thị fit với chiều 600, chiều 400 sẽ chỉ hiển thị được 400/600 (2/3) kích thước của ảnh

  • Contain: ngược lại với cover, ảnh sẽ có kích thước phù hợp với chiều bé hơn theo tỉ lệ.

Như ví dụ trên thì ảnh sẽ hiển thị fit với chiều 400, từ đó thì chiều 600 sẽ bị trống 2 vùng biên.

  • Stretch (Kéo giãn)

Hình ảnh được thay đổi kích thước sao cho nó vừa với không gian yêu cầu mà không giữ nguyên tỷ lệ ban đầu. Điều này có thể khiến hình ảnh bị méo mó.

  • Center (Căn giữa)

Hình ảnh được giữ nguyên kích thước ban đầu và căn giữa trong không gian yêu cầu. Nếu kích thước không khớp, các phần thừa sẽ được lấp bằng màu nền.

Các template view trong React Native

Một số bộ UI Component Kit cho React Native phổ biến: React Native Element là một thư viện giao diện người dùng (UI library) được xây dựng để hỗ trợ phát triển ứng dụng React Native một cách nhanh chóng và hiệu quả. Nó cung cấp một bộ sưu tập các thành phần UI đã … Read more