Nhận thức về điều này, chúng tôi quyết định phát triển một ứng dụng quản lý ghi âm, tập trung vào việc hỗ trợ người dùng ghi âm cuộc trò chuyện trong các cuộc họp hoặc bài giảng tiếng An
CƠ SỞ LÝ THUYẾT
React Native
React Native là một framework mã nguồn mở được tạo ra bởi Facebook Nó được sử dụng để phát triển ứng dụng di động cho Android, iOS, Web và UWP bằng cách cho phép các nhà phát triển sử dụng React cùng với môi trường ứng dụng native Đó là một framework phổ biến được xây dựng trên nền tảng JavaScript, cho phép xây dựng ứng dụng di động chạy trên cả 2 nền tảng Android và iOS
React Native được Facebook phát hành lần đầu như một dự án mã nguồn mở vào năm 2015 Chỉ sau vài năm, nó trở thành một trong những giải pháp hàng đầu được sử dụng cho phát triển ứng dụng di động Phát triển React Native được sử dụng để xây dựng một số ứng dụng di động hàng đầu trên thế giới, bao gồm Instagram, Facebook và Skype
React Native dễ dàng tích hợp với các API bên ngoài, chẳng hạn như các dịch vụ cloud, cơ sở dữ liệu, và các dịch vụ web khác Việc này giúp ứng dụng có thể tương tác với các nguồn dữ liệu và dịch vụ một cách mượt mà.
Visual Studio Code
Visual Studio Code là một trình soạn thảo mã nguồn được phát triển bởi Microsoft dành cho hệ điều hành Windows, Linux và macOS Đây là công cụ hỗ trợ tính năng gỡ lỗi, đi kèm với Git, có tô đậm cú pháp, tự động hoàn thiện mã nguồn, đoạn mã ngắn (snippets) và các cải tiến mã nguồn.
NodeJS
Node.js là một nền tảng phát triển ứng dụng được xây dựng trên JavaScript runtime của Chrome (V8 Javascript engine) mã nguồn mở và có khả năng chạy trên nhiều nền tảng Một ứng dụng Node.js chạy trong một quy trình đơn, mà không tạo ra một luồng mới cho mỗi yêu cầu
Node.js cho phép sử dụng JavaScript không chỉ trên trình duyệt mà còn trên máy chủ (server) Điều này tạo ra một môi trường đồng nhất cho phát triển cả frontend và backend của ứng dụng, giảm độ phức tạp và cản trở trong việc chuyển đổi giữa hai môi trường khác nhau
Một trong những đặc điểm quan trọng của Node.js là mô hình xử lý không chặn (non-blocking) Điều này cho phép nhiều thao tác I/O (như đọc/ghi vào cơ sở dữ liệu, gọi API) được thực hiện mà không cần chờ đợi kết quả trước khi tiếp tục xử lý Điều này làm cho Node.js rất hiệu quả trong việc xử lý hàng nghìn kết nối đồng thời.
Prisma
Prisma là một công cụ ORM (Object-Relational Mapping) cho Node.js và TypeScript, giúp giảm độ phức tạp khi làm việc với cơ sở dữ liệu Nó được thiết kế để tạo ra một lớp trừu tượng giữa ứng dụng của bạn và cơ sở dữ liệu, cho phép bạn tương tác với cơ sở dữ liệu bằng cách sử dụng các đối tượng JavaScript thay vì truy vấn SQL trực tiếp
Một số đặc điểm quan trọng của Prisma:
1 Độ linh hoạt: Prisma hỗ trợ nhiều hệ cơ sở dữ liệu như MySQL, PostgreSQL, SQLite, và SQL Server Điều này cho phép chọn cơ sở dữ liệu phù hợp với nhu cầu cụ thể của ứng dụng
2 Tạo Schema bằng mã (Code-First): Prisma sử dụng ngôn ngữ lập trình (TypeScript hoặc JavaScript) để định nghĩa schema của cơ sở dữ liệu Điều này giúp tận dụng tính linh hoạt của mã nguồn để quản lý cấu trúc cơ sở dữ liệu
3 Migrate dữ liệu: Prisma cung cấp các công cụ mạnh mẽ để quản lý quá trình migrate cơ sở dữ liệu, giúp bạn duy trì và cập nhật cấu trúc cơ sở dữ liệu một cách dễ dàng khi ứng dụng phát triển Prisma giúp làm giảm độ phức tạp trong việc tương tác với cơ sở dữ liệu, tăng tính hiệu quả và linh hoạt của quá trình phát triển ứng dụng.
Firebase Storage
Firebase là một nền tảng của Google cung cấp nhiều dịch vụ cho phát triển ứng dụng, bao gồm cả cơ sở dữ liệu, xác thực, phân tích, v.v
Firebase Storage là một dịch vụ lưu trữ đám mây của Google Firebase, được thiết kế để lưu trữ và quản lý các tệp tin và đa phương tiện trong ứng dụng web và di động Một số đặc điểm quan trọng của Firebase Storage:
1 Lưu trữ an toàn và linh hoạt: Firebase Storage cung cấp một nơi an toàn để lưu trữ dữ liệu trên đám mây với sự hỗ trợ của hạ tầng an toàn của Google
2 Tích hợp dễ dàng với Firebase: Firebase Storage tích hợp chặt chẽ với các dịch vụ khác của Firebase, như Firebase Realtime Database, Firebase Authentication, và Firebase Hosting Ngoài ra Firebase cũng dễ dàng tích hợp vào ứng dụng di động thông qua các thư viện SDK chính thức được cung cấp bởi Firebase.
Google Cloud – Speech to text
Speech to Text là công nghệ nhận dạng tiếng nói để tạo ra chuỗi văn bản tương ứng Tiếng nói sẽ được ghi nhận qua microphone và lưu trữ trong máy tính dưới dạng các tín hiệu số
Cloud Text-to-Speech sử dụng “WaveNet” – công nghệ giọng nói được phát triển bởi DeepMind, giúp các nhà phát triển có thể xây dựng các sản phẩm như:
- Hệ thống tương tác tự động bằng lời thoại cho các Call Center (Interactive Voice Response)
- Chức năng Talkback của các sản phẩm IoT (TV, ô tô, robot, etc.)
- Chuyển đổi nội dung văn bản (tin tức, sách) sang giọng nói (Podcast, Audiobook, etc)
Cloud Text-to-Speech có thể triển khai với 12 ngôn ngữ (không có tiếng Việt), bao gồm 32 kiểu giọng nói khác nhau Ngoài ra, nhà phát triển có thể tuỳ chỉnh âm lượng, tốc độ nói, định dạng âm thanh (MP3, WAV) theo nhu cầu sử dụng
Dựa theo cuộc khảo sát năm 2023, Google Cloud đứng thứ 2 về độ chính xác của so với các dịch vụ Speech To Text khác như IBM, Amazon
Hình 1 So sánh độ chính xác của các dịch vụ hỗ trợ Speech To Text
Tổng quan về backend server
Trong phạm vi đồ án này, nhóm chúng tôi quyết định xây dựng back end server bằng JavaScript trên môi trường NodeJS, định nghĩa và lưu dữ liệu trên Prisma Chức năng chính của server là nhận file ghi âm từ front end và trả về đoạn văn bản tương ứng với file ghi âm đó
Chúng tôi sử dụng Firebase Storage để lưu trữ file ghi âm, đồng thời tích hợp Google Cloud – Speech To Text để chuyển đổi file ghi âm thành đoạn văn bản Kết quả được trả về front end thông qua API và lưu trữ trong Prisma.
PHÂN TÍCH THIẾT KẾ HỆ THỐNG
Đối tượng người dùng
Đối tượng người dùng chính của ứng dụng là học sinh, sinh viên hoặc bất cứ người dùng cá nhân nào có nhu cầu ghi âm các cuộc trò chuyện, bài giảng, hội thảo, và sau đó chuyển thành văn bản phục vụ cho việc học tập và làm việc
Ngoài ra, ứng dụng cũng được xây dựng nhằm hướng đến đối tượng người dùng là người học tiếng Anh Người có nhu cầu học tiếng Anh có thể sử dụng phần mềm để nâng cao kỹ năng nghe và phát âm bằng cách ghi lại bài nói của mình và nghe lại khi cần thiết.
Xây dựng hệ thống
Ngôn ngữ lập trình: TypeScript
UI Framework: React Native IDE: Visual Studio Code Server: Expressjs, Prisma Database: Firebase, SQLite
Hình 2 Sơ đồ Use case
STT Chức năng Mô tả
1 Đăng nhập Có 4 phương thức để người dùng đăng nhập:
+ email và password + Liên kết với Google + Nhận diện vân tay/ khuôn mặt
2 Đăng ký Người dùng tạo tài khoản mới bằng cách cung cấp username, email, password
3 Quên mật khẩu Ứng dụng sẽ yêu cầu người dùng nhập địa chỉ email, sau đó mã code sẽ được gửi từ hệ thống về email, cuối cùng người dùng sẽ nhập mã code và đổi mật khẩu mới
4 Thêm mới file ghi âm Người dùng thêm mới một file ghi âm bằng cách thu âm trực tiếp hoặc đăng tải file ghi âm từ thiết bị
5 Xem file ghi âm Người dùng có thể xem chi tiết một file ghi âm, sửa file, xóa file, sắp xếp field
6 Chia sẻ file ghi âm Hệ thống cho phép người dùng chia sẻ file ghi âm của mình với người khác bằng cách cung cấp email của người nhận
7 Tạo nhóm Hệ thống hỗ trợ tạo nhóm, người dùng có thể tạo hoặc tham gia vào các nhóm khác nhau, chia sẻ file ghi âm cho các thành viên trong nhóm
8 Xem thông báo Người dùng nhận và xem thông báo khi được mời vào một nhóm Bảng 1 Bảng mô tả Use cases
3.2.4 Đặc tả Use case Use case 1: Đăng nhập
Mô tả Người dùng đăng nhập bằng username hoặc email và password
Luồng chính 1 Hệ thống hiển thị các trường nhập liệu tương ứng
2 Người dùng nhập username hoặc email, password và bấm nút “Đăng nhập”
3 Hệ thống kiểm tra nếu các thông tin hợp lệ, hệ thống điều hướng người dùng đến màn hình Home
Luồng phụ Ở bước 1, nếu người dùng chọn đăng nhập bằng google 1.a Người dùng bấm nút “Đăng nhập bằng google”
1.b Hệ thống hiện popup hiển thị các tài khoản google của người dùng
1.c Người dùng chọn 1 tài khoản google để đăng nhập 1.d Hệ thống kiểm tra, nếu tài khoản của người dùng không có trong hệ thống thì đăng ký tài khoản mới cho nguòi dùng Ngược lại, quay lại bước 3
Ngoại lệ Ở bước 3, nếu người dùng không nhập đầy đủ thông tin email hoặc username và password, hiển thị thông báo lỗi Ở bước 3, nếu người dùng chưa xác nhận email, hệ thống hiển thị thông báo lỗi
Mô tả Người dùng tạo tài khoản mới bằng cách cung cấp username, email, password
1 Hệ thống hiển thị các trường nhập liệu tương ứng
2 Người dùng nhập username, email, password và bấm nút “Đăng ký”
3 Hệ thống kiểm tra nếu các thông tin hợp lệ, hiển thị thông báo thành công, gửi email xác nhận và điều hướng đến màn hình Login
4 Người dùng xác nhận email và đăng nhập vào hệ thống
Ngoại lệ Ở bước 3, nếu người dùng không nhập đầy đủ thông tin email, username và password, hiển thị thông báo lỗi
Use case 3: Quên mật khẩu
Mô tả Hệ thống gửi link code reset password khi người dùng quên mật khẩu
1 Người dùng bấm nút “Quên mật khẩu”
2 Hệ thống hiển thị ô text input yêu cầu người dùng nhập email
3 Người dùng cung cấp email và bấm nút “Tiếp theo”
4 Hệ thống kiểm tra nếu email hợp lệ, gửi mã code
5 Người dùng nhập mã code và bấm nút “Tiếp theo”
6 Hệ thống kiểm tra nếu mã code hợp lệ, hiển thị text input
7 Người dùng nhập mật khẩu mới, xác nhận mật khẩu mới và bấm nút “Tiếp theo”
8 Hệ thống kiểm tra nếu mật khẩu mới hợp lệ, điều hướng người dùng vào trang Home
Ngoại lệ Ở bước 4, 6, 8, nếu thông tin không hợp lệ, hệ thống gửi thông báo lỗi
Use case 4: Thêm mới file ghi âm
Mô tả Người dùng thêm mới một file ghi âm bằng cách thu âm trực tiếp hoặc đăng tải một file ghi âm từ thiết bị
Luồng chính 1 Người dùng bấm nút “Thu âm” để thu âm trực tiếp
Sau khi thu âm, người dùng bấm nút “Lưu”
2 Hệ thống lưu file ghi âm, chuyển đổi âm thanh thành đoạn văn bản, hiển thị và lưu đoạn văn bản vào database
Luồng phụ Ở bước 1, người dùng có thể đăng tải file ghi âm có sẵn từ thiết bị, quay lại bước 2
Sau bước 2, người dùng lưu tiêu đề của file ghi âm
3 Hệ thống lưu tiêu đề của file ghi âm
Use case 5: Xem file ghi âm
Mô tả Người dùng có thể xem chi tiết một file ghi âm, sửa file, xóa file, sắp xếp field
1 Hệ thống hiển thị danh sách các file ghi âm
2 Người dùng chọn 1 file ghi âm trong danh sách để xem chi tiết
3 Hệ thống hiển thị thông tin chi tiết của file ghi âm: Tiêu đề, ngày tạo, file ghi âm, đoạn văn bản đã chuyển đổi
4 Người dùng bấm nút “Thay đổi” để thay đổi thông tin trong file record (tiêu đề hoặc đoạn văn bản)
5 Hệ thống lưu lại những thay đổi của người dùng
Luồng phụ Ở bước 2, người dùng có thể nhấn giữ một file ghi âm để xóa
2.a Hệ thống hiển thị cảnh báo 2.b Nếu người dùng bấm nút “Đồng ý”, hệ thống xóa file ghi âm khỏi database Ngược lại, hệ thống ẩn modal cảnh báo
Use case 6: Chia sẻ file ghi âm
Mô tả Hệ thống cho phép người dùng chia sẻ file ghi âm của mình với người khác bằng cách cung cấp email của người nhận
1 Người dùng bấm chọn một file có trong hệ thống, bấm nút “Chia sẻ”
2 Hệ thống hiển thị modal với text input yêu cầu nhập email người nhận
3 Người dùng nhập email người nhận và bấm nút
4 Hệ thống kiểm tra nếu email người nhận hợp lệ, gửi file record đến email người nhận
Ngoại lệ Ở bước 4, nếu email người nhận không hợp lệ, hệ thống thông báo lỗi
Hệ thống hỗ trợ tạo nhóm, người dùng có thể tạo hoặc tham gia vào các nhóm khác nhau, chia sẻ file ghi âm cho các thành viên trong nhóm
1 Người dùng bấm nút “Tạo nhóm mới”
2 Hệ thống hiển thị modal với text input
3 Người dùng nhập tên nhóm và bấm nút “Tạo”
4 Hệ thống lưu nhóm mới vào database
5 Người dùng bấm nút “Thêm thành viên vào nhóm”
6 Hệ thống hiện thị modal và danh sách các email có sẵn
7 Người dùng nhập email thành viên và bấm nút
8 Hệ thống gửi thông báo cho người được mời Luồng phụ Không có
Use case 8: Xem thông báo
Mô tả Người dùng nhận và xem thông báo khi được mời vào một nhóm
1 Hệ thống gửi thông báo cho người dùng khi họ được mời vào một nhóm
2 Người dùng bấm nút “Tham gia nhóm” để tham gia nhóm
3 Hệ thống thêm thành viên vào nhóm và lưu trữ danh sách các thông báo
Luồng phụ Ở bước 2, nếu người dùng bấm nút “Từ chối”, hệ thống ẩn modal
Hình 3 Sơ đồ Activity mô tả chức năng Đăng ký
Sơ đồ Tạo mới file ghi âm
Hình 4 Sơ đồ Activity mô tả chức năng tạo mới một file ghi âm
Sơ đồ Chia sẻ file ghi âm
Hình 5 Sơ đồ Activity mô tả chức năng Chia sẻ file ghi âm
Sơ đồ tạo nhóm mới
Hình 6 Sơ đồ Activity mô tả chức năng Tạo nhóm mới
CÀI ĐẶT ỨNG DỤNG
Giao diện người dùng chính
Hình 7 Giao diện màn hình đăng nhập
Hình 8 Giao diện màn hình đăng ký
4.1.3 Màn hình Quên mật khẩu
Hình 9 Giao diện màn hình Quên mật khẩu
Hình 10 Giao diện màn hình Home
Hình 11 Giao diện màn hình Recording
4.1.6 Màn hình Shared With Me
Hình 12 Giao diện màn hình Shared With Me
Hình 13 Giao diện màn hình Group
Hình 14 Giao diện màn hình Thông báo
Hình 15 Giao diện màn hình Cài đặt
Cài đặt người dùng
Download và tải file APK
Cài đặt dành cho developers
• Github: https://github.com/Tien25012003/ReactNative_Dolphin
+ IDE ( Visual Studio ) + Android Studio ( máy ảo )
• Setup thành công env để chạy React Native ( https://reactnative.dev/ )
+ Bước 1: Cài đặt mã nguồn https://github.com/Tien25012003/ReactNative_Dolphin.git + Bước 2: Cài đặt thư viện
Mở terminal trên Visual Studio và chạy lên npm i + Bước 3: Chạy dự án
Chạy lệnh: “npx react-native run-android” trên terminal
• Github: https://github.com/Tien25012003/NodeJS_Dolphin_BackEnd
+ IDE ( Visual Studio ) Setup thành công env để chạy Prisma và Expressjs ( Prisma và Expressjs ) Cài đặt:
+ Bước 1: Cài đặt mã nguồn https://github.com/Tien25012003/NodeJS_Dolphin_BackEnd.git + Bước 2: Cài đặt thư viện
Mở terminal trên Visual Studio và chạy lên npm i + Bước 3: Chạy dự án
Chạy lệnh: “npm start và npx prisma studio” trên terminal
