Hôm nay mình sẽ hướng dẫn các bạn tạo ra một ứng dụng ví điện tử cho riêng mình bằng Thunkable, đặc biệt các bạn không cần phải biết bất cứ một ngôn ngữ lập trình nào hết. Tất cả chỉ là game xếp hình, chúng ta sẽ xếp tất cả những gì có sẵn lại để tạo ra một ứng dụng "xịn xò". Và qua bài này các bạn cũng sẽ biết cách hoạt động của qrcode trong giao dịch là như thế nào, làm sao để bảo mật qrcode mà mình đã tạo ra.
Đầu tiên các bạn phải có một tài khoản Thunkable và các bạn có thể login bằng chính tài khoản google hay apple của mình: https://thunkable.com/
Tiếp theo các bạn hãy copy project ví điện tử của mình và biến nó thành project của các bạn nhé: https://x.thunkable.com/copy/8bc34e65a8b56208d21586af67b35988
Sau đó các bạn hãy xem video hướng dẫn sau nếu các bạn không hiểu gì nhé:
Như thường lệ app của mình sẽ có 3 trang chính:
Login: các bạn có thể sử dụng Module Login của Firebase, các bạn có thể đọc lại cách sử dụng firebase ở bài viết này. https://www.ctovietnam.org/post/lam-the-nao-de-su-dung-firebase
Home: là nơi các bạn có thể xem những thông tin chính của ví điện tử của các bạn, và cũng là nơi để các bạn tạo ra mã qr để giao dịch.
Transaction: là trang thực hiện giao dịch, các bạn sẽ scan qrcode và thực hiện chuyển tiền ở đây.
Trong Project ví điện tử ewallet này mình sẽ sử dụng các module chính "kéo thả" sau của Thunkable:
Realtime_DB: là module real time Database của Firebase, mình sử dụng trong project này với mục đích làm backup database cho DB chính Airtable, dùng nó để update số dư trong thời gian thực và để gửi notify thông báo cho user khi số dư thay đổi.
Timer: module này mình dùng để đếm ngược thời gian từ 60 giây xuống 0 giây, qua thời gian này thì qrcode sẽ bị hết hạn (expired) và tự tạo ra qrcode khác.
Alert: sẽ bật câu thông báo trên điện thoại cho người chuyển tiền nếu qrcode đã bị hết hạn (tương tự như mã OTP bị hết hạn)
airtable: là một database "lai" với excel, rất dễ sử dụng và hoàn toàn miễn phí, trong project này mình chỉ sử dụng 2 table đó là table account lưu giữ tất cả tài khoản, và table transaction sẽ ghi nhận tất cả giao dịch.
Web_Api: mình sử dụng 2 web api có sẵn để tạo ra mã hash và tạo ra qrcode: https://documenter.getpostman.com/view/3362843/RWMCt9WU?version=latest và https://developers.google.com/chart/infographics/docs/qr_codes
Bây giờ mình sẽ đi chi tiết vào trang HOME
Giao diện chính của trang Home như sau:
Trang home rất đơn giản chỉ chứa:
3 label chính gồm: số dư tài khoản, số tài khoản và họ tên chủ tài khoản.
2 button: dùng để chuyển tiền và tạo qrcode.
1 image: dùng để giữ hình ảnh qrcode
Và sau đây là toàn bộ "code" của database và trang home:
Account number: là số tài khoản của user, mỗi user sẽ có 1 số tài khoản nhất định dùng để định danh user đó.
code: là 1 chuỗi đã được hash dựa vào thông tin của user và 1 "salt" mỗi lần giao dịch hay sau 1 phút sẽ có 1 code khác nhau, do đó code sẽ không sử dụng lại được khi có người xấu muốn hack giao dịch của khách hàng.
balance: là số dư tài khoản.
row_number: chỉ là index của hàng dữ liệu của user.
block ở trên có nhiệm vụ query dữ liệu xem dòng nào trong database ở cột Account Number sẽ bằng với tài khoản mà user vừa login vào, nếu user login thành công, block này sẽ lấy Tên Tài khoản, số dư tài khoản, và số tài khoản để hiển thị lên trang home.
Khi bấm vào nút tạo qrcode thì block generate này sẽ hoạt động:
đầu tiên nó sẽ gọi api từ trang web: https://api.hashify.net/hash/md4/hex?value=
cùng với giá trị kèm theo là account number và số giây được tính từ năm 1970
ví dụ: account number hiện tại là 000001 và số giây hiện tại là 34567 thì api sau sẽ được gọi: https://api.hashify.net/hash/md4/hex?value=00000134567
và sẽ cho ra 1 kết quả dươí dạng json: {"Digest":"f5ca6b8017eae4ca681a1d0376d8ba45","DigestEnc":"hex","Type":"MD4","Key":""}
sau đó chúng ta chỉ cần lưu lại giá trị f5ca6b8017eae4ca681a1d0376d8ba45 vào database trong cột code
Vì chúng ta thêm chút "muối" là số giây nên mỗi lần bấm nút tạo qrcode sẽ ra mã hash khác nhau.
Sau đó chúng ta sẽ gọi API thứ 2 để tạo ra qrcode dựa trên chuỗi hash mà chúng ta vừa tạo ra: https://chart.googleapis.com/chart?cht=qr&chs=200x200&chl= với đầu vào là mã hash vừa tạo.
ví dụ: qrcode của mã vừa tạo sẽ gọi api sau:
sau khi gọi api trên thì chúng ta sẽ có qrcode sau:
các bạn có thể thử lấy điện thoại và scan qrcode trên xem kết quả có giống như ví dụ không nhé ^^
Sau 60 giây thì ứng dụng sẽ tự gọi lại hàm generate để tạo ra 1 qrcode mới, để tránh việc người xấu sử dụng lại qrcode cũ để thực hiện giao dịch.
ví dụ: bạn đưa qrcode ví momo cho quán cafe để thực hiện thanh toán, nếu qrcode không bị expire thì thu ngân có thể chụp lại qrcode và đợi sau này sẽ charge thêm tiền của các bạn.
Vậy là xong trang home: hiển thị thông tin tài khoản và tạo ra mã qrcode
Khi bấm vào nút chuyển tiền thì ứng dụng sẽ chuyển các bạn đến trang Transaction, và chuyện gì sẽ xảy ra?
Khi trang Transaction được mở lên thì app sẽ hiển thị Tên Tài Khoản và Số dư tài khoản, đồng thời sẽ gọi chức năng scan barcode:
nếu cancel thì ứng dụng sẽ trở lại trang home
còn nếu lấy được dữ liệu thành công (chuỗi hash) thì sẽ dựa vào chuỗi hash đó để tìm kiếm dữ liệu (get customer) của người được chuyển tiền trong database.
Block trên chỉ thực hiện 1 nhiệm vụ duy nhất là tìm kiếm xem trong database ở cột "code" có chuỗi nào trùng với chuỗi hash vừa được scan từ qrcode ra hay không, nếu chuỗi hash tồn tại thì ứng dụng sẽ lấy thông tin (tên tài khoản, số tài khoản v.v..) của người được chuyển tiền và hiển thị lên màn hình.
Và khi bạn bấm nút chuyển tiền thì ứng dụng xử lý như thế nào?
Khi nút chuyển tiền được click vào thì ứng dụng sẽ gọi hàm "get customer" thêm một lần nữa để update số dư của người được chuyển tiền mới nhất, và check thêm 1 lần nữa xem chuỗi hash có bị hết hạng hay chưa,
Khi mọi thứ ok, thì ứng dụng sẽ cập nhật số dư của người chuyển tiền (app account no) và người được chuyển tiền (app acc_guess_no) trong DB chính Airtable và trong Database backup là Firebase (Realtime_DB1)
Đồng thời cũng ghi giao dịch xuống Table Transaction
Vậy là chúng ta đã xây dựng xong ứng dụng ví điện tử vơí những chức năng "xịn xò"
Nếu các bạn cảm thấy khó hiểu thì mình mong các bạn đọc lại những bài cũ của mình về thunkable, vì những bài cũ sẽ hướng dẫn chi tiết cho các bạn về căn bản của thunkable.
hoặc các bạn có thể xem lại những video hướng dẫn của mình ở kênh sau:
Hẹn gặp lại các bạn ở bài viết sau.