Tổng quan lý thuyết và công cụ
Android studio
Android Studio là phần mềm phát triển ứng dụng cho thiết bị sử dụng hệ điều hành Android, bao gồm smartphone và tablet Nó tích hợp nhiều công cụ như code editor, debugger, performance tools và hệ thống build/deploy, cùng với trình giả lập để mô phỏng môi trường thiết bị trên máy tính Nhờ vậy, lập trình viên có thể nhanh chóng phát triển ứng dụng từ đơn giản đến phức tạp.
Flutter
Flutter là nền tảng phát triển ứng dụng đa nền tảng cho iOS và Android, được phát triển bởi Google Nền tảng này sử dụng ngôn ngữ lập trình DART, cũng do Google phát triển, và đã được áp dụng để tạo ra các ứng dụng native cho chính Google.
Ngôn ngữ DART, được Google giới thiệu vào năm 2011, là một ngôn ngữ lập trình hướng đối tượng nhằm cung cấp sự lựa chọn hiện đại hơn cho các nhà phát triển, mà không thay thế Javascript.
Ngôn ngữ DART được hỗ trợ khá tốt ở Visual Studio Code, và trong AndroidStudio.
Visual Studio Code (VSCode)
Là một trình biên tập lập trình code miễn phí dành cho Windows, Linux và macOS,
Visual Studio Code được phát triển bởi Microsoft Nó được xem là một sự kết hợp hoàn hảo giữa IDE và Code Editor.
Visual Studio Code cung cấp nhiều tính năng hữu ích như hỗ trợ debug, tích hợp Git, đánh dấu cú pháp, tự hoàn thành mã thông minh, và snippets, giúp cải thiện mã nguồn hiệu quả Ngoài ra, người dùng có thể tùy chỉnh giao diện bằng cách thay đổi theme, phím tắt và các tùy chọn khác để phù hợp với nhu cầu cá nhân.
Laravel Framework
Laravel là một PHP Framework mã nguồn mở và miễn phí, được phát triển bởi
Taylor Otwell và nhắm mục tiêu hổ trợ phát triển các ứng dụng dụng web theo cấu trúc model-view-controller (MVC)
Laravel được phát hành theo giấy phép MIT, với mã nguồn được lưu trữ tại Github.
MVC là viết tắt của Model, View và Controller, là một mô hình thiết kế phổ biến trong kỹ thuật phần mềm Mô hình này chia source code thành ba phần riêng biệt, mỗi phần đảm nhận một chức năng khác nhau trong hệ thống Model quản lý dữ liệu, View chịu trách nhiệm hiển thị giao diện người dùng, và Controller điều phối các tương tác giữa Model và View.
Mô hình quản lý dữ liệu có trách nhiệm lưu trữ và truy xuất các thực thể từ cơ sở dữ liệu như MySQL, SQL Server, PostgreSQL Đồng thời, mô hình này cũng thực thi các logic cần thiết do ứng dụng cung cấp.
View chịu trách nhiệm hiển thị dữ liệu được truy xuất từ model theo định dạng mà lập trình viên đã xác định Cách sử dụng của View tương tự như các module templates thường thấy trong các ứng dụng web phổ biến như WordPress và Joomla.
Controller là thành phần trung gian có nhiệm vụ xử lý tương tác giữa model và view Nó nhận yêu cầu từ client, gọi các model để thực hiện các hoạt động cần thiết và gửi kết quả ra view View sẽ định dạng lại dữ liệu từ controller và trình bày thông tin theo định dạng đầu ra như HTML.
Laravel Framework hỗ trợ lập trình theo mô hình MVC mạnh mẽ, bao gồm các thành phần chính như Model, View, Controller và Routes Mọi yêu cầu từ người dùng đều phải đi qua Routes, nơi dữ liệu được chuyển đến Controller để xử lý Controller sẽ lấy hoặc cập nhật dữ liệu từ Model và cuối cùng gửi kết quả đến View để hiển thị cho người sử dụng.
Camera_deep_ar
Thư viện camera_deep_ar là một thư viện Flutter chuyên dụng cho các ứng dụng sử dụng bộ lọc hình ảnh và khuôn mặt dựa trên công nghệ AR của DeepAR thông qua API Để sử dụng thư viện camera_deep_ar trên Android, người dùng cần cài đặt thư viện và lấy API key từ trang web deepar.io.
Opensource codenameakshay/image-editor
Là một opensource do codenameaksahy viết nên sử dụng các thư viện chỉnh sửa ảnh của flutter: image_editor, image_picker.
- Chọn ảnh từ thư viện
- Chỉnh sửa ảnh o Cắt ảnh o Chỉnh độ sáng o Độ tương phản o Độ bão hòa o Xoay ảnh và lật ảnh
- Khôi phục gốc và lưu ảnh. Để sử dụng ta source code này phải cài đặt các thư viện đi kem để lấy ảnh, lưu ảnh, chỉnh sửa,…:
- gallery_saver: Để lưu hình ảnh vào thư viện
- image_picker: Để lấy hình ảnh
- photo_view: Xem lại ảnh trước khi lưu
- cached_network_image: cache hình ảnh
- image_editor: Để chỉnh sửa hình ảnh
- extended_image: Để cắt ảnh
Phân tích & thiết kế hệ thống
Giới thiệu bài toán
Xây dựng ứng dụng Image Filter – Bộ lọc hình ảnh cho Android
− Xây dựng được ứng dụng giúp người dùng chỉnh sửa hình ảnh theo mong muốn trước khi chụp lại.
− Ứng dụng có được các chức năng lọc và xử lý ảnh khác nhau, như màu nền, hình động,….
− Ứng dụng có thể lưu trữ ảnh và chia sẻ trên các phương tiện truyền thông
Áp dụng kiến thức đã học, hệ thống có khả năng tự động nhận diện khuôn mặt của người dùng đã đăng ký tài khoản, đồng thời lưu trữ dữ liệu vào cơ sở dữ liệu.
− Tìm hiểu về framework flutter, ngôn ngữ Dart và học để thiết kế và lập trình ứng dụng cho android
− Tìm hiểu về một số phương pháp, thuật toán xử lí ảnh kết hợp với công nghệ
AI để đưa vào xây dựng chức năng nhận diện khuôn mặt cho ứng dụng
− Tìm tòi và học hỏi về công nghệ, kỹ thuật thực tế ảo tăng cường và áp dụng vào ứng dụng
− Tham khảo các chức năng, các điểm ưu nhược của các ứng dụng đã có, từ đó quyết định các ứng dụng và hướng phát triển
− Tìm hiểu và tham khảo các thư viện cần thiết cho việc hỗ trợ phát triển ứng dụng
− Tham khảo và lập trình giao diện cho ứng dụng
− Lập trình các chức năng theo định hướng đã định sẵn
− Kiểm thử phần mềm, sửa chữa và phát triển thêm các ý tưởng mới (nếu có)
− Xây dựng báo cáo hoàn chỉnh
Tìm hiểu một vài ứng dụng
− Chụp ảnh và quay video với các bộ lọc khuôn mặt và video
− Có sử dụng công nghệ AI và AR để phát hiện khuôn mặt trực tiếp trước khi chụp
− Chụp ảnh tự sướng (selfie)
− Quay video bomerang (lặp liên tục)
− Các hình động đa dạng, thú vị, được cập nhật liên tục
− Có thể chỉnh sửa ảnh sau khi chụp (Thêm nhãn dán, thêm chữ, cắt ảnh, lọc màu nền, độ sáng, tương phản,…)
− Lưu ảnh vào máy hoặc gửi tin nhắn đi trực tiếp
− Đăng ảnh hoặc video ngắn thành story
− Khi gọi video có các hoạt động chơi game hoặc sử dụng bộ lọc hình ảnh trực tiếp giữa những người gọi với nhau
− Các bộ lọc khuông mặt, hình nền, màu nền, sticker đa dạng, thư viện hiệu ứng
− Các tùy chọn chỉnh sửa hình ảnh khuôn mặt đa dạng, nhiều chức năng, nhiều cấp độ khác nhau
− Chỉnh sửa ảnh từ thư viện máy hoặc sau khi chụp
− Thêm chữ, bố cục, nhiều khung hình, superzoom, chế độ rảnh tay
− Chia sẻ hình ảnh (đăng tin, story, post,….)
− Mạng xã hội, trang cá nhân,….
− Khám phá cộng đồng ảnh, video,…
− Giao diện đẹp bắt mắt
− Công cụ mạnh mẽ hiện đại với giao diện bắt mắc dễ nhìn
− Chỉnh sửa hình ảnh, lọc màu nền, môi trường,…
− Chỉnh sửa trực tiếp hoặc chọn ảnh từ máy
− Có thể đồng bộ hóa thiết bị với Adobe Creative Cloud để sao lưu hình ảnh và truy cập từ bất cứ đâu
− Chức năng lọc tất cả hình ảnh có người (AI)
− Mục hướng dẫn cụ thể
− Cộng đồng chia sẻ ảnh riêng (trending, hot… )
− Chia sẻ hình ảnh, video,…
Một nhược điểm của ứng dụng là người dùng phải trả phí để truy cập đầy đủ các chức năng, thay vì chỉ được sử dụng một số tính năng hạn chế như trong phiên bản miễn phí.
Giao diện cần phải bắt mắt và dễ nhìn, tạo ấn tượng tốt cho người dùng Đồng thời, nó cũng phải dễ sử dụng và tương tác tốt, đảm bảo sự thân thiện trong quá trình trải nghiệm Các phần của giao diện cần hoạt động một cách mượt mà, giúp người dùng có trải nghiệm liền mạch và thoải mái.
Ứng dụng cần có chức năng hoạt động tốt, cho phép người dùng chỉnh sửa hình ảnh từ thư viện hoặc sau khi chụp Hệ thống lọc hình ảnh phải tương tác hiệu quả, nhận diện được vị trí khuôn mặt người dùng và có khả năng nhận diện nhiều khuôn mặt cùng lúc Người dùng có thể đăng nhập bằng cả tên đăng nhập - mật khẩu và nhận diện khuôn mặt đã được đăng ký Ứng dụng cũng cần cung cấp nhiều bộ lọc khác nhau như khuôn mặt, hoạt động, màu sắc, màu nền và hình nền, đồng thời đa dạng hóa các chức năng chỉnh sửa hình ảnh như điều chỉnh màu sắc, độ sáng và xử lý ảnh cơ bản.
Ý tưởng phát triển ứng dụng bao gồm việc chia sẻ hình ảnh tương tự như một mạng xã hội, cập nhật các chức năng xử lý ảnh như thêm chữ và nhãn dán Ứng dụng cũng sẽ tích hợp công nghệ AR và phát triển mạng xã hội, cung cấp thêm nhiều nhãn dán cho người dùng Người dùng có thể sử dụng hình ảnh của chính mình hoặc tạo ra các hình ảnh mới để đưa vào bộ lọc Ngoài ra, sẽ có một website cho phép người dùng tạo nhãn dán miễn phí để tải về, tuy nhiên sẽ có hạn chế về hình vẽ có sẵn và tính phí cho những tính năng đa dạng hơn.
Biểu đồ Use-case
− Actor và chức năng: o Người dùng:
Chỉnh sửa hình ảnh sau khi chụp
Chính sửa hình ảnh từ thư viện
Sử dụng bộ lọc trực tiếp
Lưu hình ảnh vào tài khoản
Đăng nhập (bằng password, bằng nhân diên khuôn mặt)
Tạo kho lưu trữ riêng (trang cá nhân)
Chia sẻ hình ảnh
Xem hình ảnh của người dùng khác (nếu được chia sẻ)
Hình 2.1 Biểu đồ Use-case
Cơ sở dữ liệu
- Các chức năng cần được lưu trữ trên cơ sở dữ liệu: o Dữ liệu người dùng:
Tài khoản (username, password, thông tin cá nhân)
Khuôn mặt (nhận diện khuôn mặt) (sẽ sao lưu thông tin của người dùng đã đăng nhập vào trong máy điện thoại đang sử dụng)
Hình ảnh đã chụp hoặc chỉnh sửa (Nếu người dùng sao lưu) o Dữ liệu ứng dụng:
Các bộ lọc (Một số sẽ được lưu mặc định trên hệ thống và người dùng có thể tìm kiếm thêm và tải về máy)
Hình ảnh người dùng chia sẻ qua mạng xã hội
Các bài viết, poster (sau này)
Hướng dẫn sử dụng (sau này)
2.4.2 Mô tả một số bảng chính:
Bảng dữ liệu người dùng bao gồm các trường thông tin quan trọng như us_id (ID người dùng) với độ dài 9 ký tự, name (họ tên đầy đủ) tối đa 50 ký tự, username (tên tài khoản) tối đa 30 ký tự, email (địa chỉ email) tối đa 30 ký tự, password (mật khẩu) dạng số nguyên, giới tính, birthday (ngày sinh) dạng ngày, level (quyền truy cập) dạng số nguyên, created_at (ngày tham gia/tạo tài khoản) dạng thời gian, và update_at (thời gian chỉnh sửa/cập nhập tài khoản gần nhất) dạng thời gian.
Bảng 2-1 Cấu trúc bảng – Users
Tên Kiểu Độ dài Mô tả id char 9 ID bài viết
User_id char 100 Id tác giả
Image_id char 9 Id hình ảnh
Like int Sô lượt like
Created_at datetime Thời gian tạo
Updated_at datetime Thời gian cập nhật lần cuối
Bảng 2-2 Cấu trúc bảng – Social Post
Hình 2.2 Cơ sở dữ liệu
Xây Dựng Back-end
Yêu cầu chức năng
- Sử dụng laravel Framework để thiết kế một hệ thống back and cho ứng dụng.
- Sử dụng ứng dụng xampp để tiến hành deploy và kiểm thử trên môi trường local (trên máy)
- Hệ thống back-end có chức năng quản lí dành cho admin với các quyền chỉnh sửa, thay đổi trực tiếp đến cơ sở dữ liệu
- Hệ thống back-end hiển thị trực quan thông tin trên cơ sở dữ liệu và sắp xếp
- Hệ thống chỉ cho phép admin đăng nhập các trang quản trị
- Hệ thống phải trả về được các api chứa các thông tin dữ liệu, và giao tiếp với ứng dụng để thực hiện các chức năng.
- Có khả năng lưu trữ những hình ảnh mà người dùng muốn đăng tải.
Thiết kế (Mô hình MVC)
Trong dự án này, sử dụng mô hình MVC của laravel để thiết kế cho hệ thống backend
Dựa vào cơ sở dữ liệu đã được thiết kế từ trước, trong dự án này ta sẽ thiết kế các model như sau:
Bảng "users" trong cơ sở dữ liệu tượng trưng cho thông tin người dùng, bao gồm các trường như id, tên, email, mật khẩu, cấp độ và ngày sinh, cho phép thực hiện truy vấn để lấy thông tin chi tiết về người dùng.
- UserImage: Tượng trưng cho bảng “user_images” chứa đường dẫn đến nơi lưu trữ các hình ảnh được người dùng đăng tải lên.
Bảng "social_posts" là biểu tượng cho việc lưu trữ thông tin về các bài đăng hình ảnh của người dùng, bao gồm người đăng và hình ảnh được lấy từ bảng liên quan.
“user_images”, nội dung, số lượt yêu thích)
Bảng "friends" là biểu tượng cho việc lưu trữ thông tin về mối quan hệ theo dõi giữa người dùng, ghi lại ai theo dõi ai và ngược lại Trước khi lưu trữ, các bản ghi được xử lý để đảm bảo không có thông tin trùng lặp, giúp quản lý mối quan hệ một cách hiệu quả.
Hình 3.3 Lưu trữ thông tin trên bảng friend
Bảng "likes" lưu trữ thông tin về người dùng thích bài viết, bao gồm ID của người dùng và ID của bài viết đó.
- Comment: “comments”, lưu trữ các bình luận của ai, dành cho bài viết nào và khi nào.
Sau khi đã có các model để thực hiện truy vấn đến cơ sở dữ liệu, bước tiếp theo là tạo các route trong file web.php trong thư mục route Điều này cho phép chúng ta chuyển hướng đến các trang web của website hoặc thực hiện các request cần thiết.
Các route trong website nhận diện cấu trúc URL và gọi đến hàm được triển khai trong controller tương ứng Thông thường, có 4 loại route để thực hiện 4 yêu cầu HTTP cơ bản.
- Route::get(): để lấy dữ liệu
- Route::post(): để thực hiện tạo mới dữ liệu (upload ảnh, video, tệp tin , )
- Route::put(): Có thể để thực hiện tạo mới dữ liệu hoặc cập nhật
- Route::delete(): Dùng để xóa
Và để tiện lợi cho quá trình viết route, laravel hỗ trợ thêm Route::group để nhóm các route giống nhau lại thành một cụm ví dụ:
Route::group(['prefix'=>'users','as'=>'user.'], function(){
Route::get('/','AdminController@index')->name('index');
Route::put('/{id}','AdminController@update')->name('update');
Route::get('/{id}/edit','AdminController@edit')->name('edit');
Route::delete('/{id}','AdminController@denied')->name('denied');
- Prefix là tiền tố trong url: http://192.168.0.102:8000/users
- ‘as’ => ‘user.’: giống như một cách đặt tên để gọi tắt url.
Các route::get, put, delete đều phục vụ các chức năng khác nhau nhưng chung quy lại là xử lý các request để trả về view Route::get đầu tiên với tên "index" sẽ thực hiện việc lấy dữ liệu từ cơ sở dữ liệu thông qua model, hướng đến hàm index trong controller AdminController Để gọi route này từ view, chỉ cần sử dụng "user.index" Các route còn lại có cấu trúc và cách làm tương tự Để truyền biến vào các hàm trong controller, có thể đặt tên biến trong {} và đảm bảo tên biến trong hàm tổng controller trùng khớp với tên đã đặt trong {} để sử dụng.
Trong đồ án này sử theo mục tiêu ban đầu, nên thiết kế các nhóm group như sau:
- Group admin: bao phủ toàn bộ các group con bên trong
- Group user: thực hiện các truy vấn liên quan đến user
- Group images: thực hiện các truy vấn liên quan đến images
- Group social: thực hiện cá truy vấn liên quan đến các social_posts
- Group friends: thực hiện các truy vấn liên quan đến friends
- Group comment: thực hiện các truy vấn liên quan đến comments
Số lượng controller trong mỗi dự án sẽ khác nhau tùy thuộc vào quan điểm, kỹ năng, phong cách và yêu cầu thực hiện, với các chức năng đa dạng để đáp ứng nhu cầu cụ thể của từng dự án.
Route::get('/home', 'HomeController@index')->name('home');
Route này khi đọc url với kết thúc đuôi là /home sẽ chuyển đến thực thi hàm index() ở class HomeController. public function index(){ return view('home');
Trong hàm index của controller Laravel, chúng ta sẽ trả về view home được tạo ở mục view Bên cạnh việc trả về các view, chúng ta còn có thể truyền các biến dữ liệu đến trang view, thực hiện các truy vấn và thực thi các đoạn code để giải quyết vấn đề dữ liệu mong muốn và trả về kết quả.
3.2.4 Views: js để xây dựng giao diện UI Các view này được lưu trong thư mục resources/view và chỉ có thể được gọi đến thông qua route và controller.
Trong view, người dùng có thể viết mã code HTML, CSS và JS để xây dựng giao diện người dùng Bên cạnh đó, có thể sử dụng các câu lệnh PHP kết hợp với code HTML thông qua khai báo @php @endphp, hoặc thực hiện các vòng lặp như @for.
@foreach) hoặc câu lệnh @if để kiểm tra các điều kiện.
Để tránh việc ghi lại một đoạn mã nhiều lần, Laravel cung cấp các hàm chức năng hữu ích có thể sử dụng trong Blade.
- @extends: kế thừa một giao diện
- @include: chen đoạn code vào vị trí khai báo @include
- @yield: khai báo vị trí có thể chen code
- @section @endsection: chen đoạn code và nơi khai báo @yield.
Hình 3.8 @extend @include @yield @section
Tạo API
Để một back-end có thể giao tiếp hiệu quả với ứng dụng đích và xử lý các kết quả trả về, cần thiết phải sử dụng các API như một kết nối trung gian giữa server và ứng dụng Điều này giúp đảm bảo việc truyền tải thông tin diễn ra suôn sẻ và hiệu quả giữa hai bên.
Giống như trong phát triển front-end, chúng ta áp dụng mô hình MVC để xử lý dữ liệu, với đầu ra là các chuỗi JSON hoặc XML Cần khai báo các route cần thiết, tạo và thực hiện các đoạn code hoặc truy vấn để xử lý dữ liệu, và đưa vào các resource nhằm trả về dữ liệu.
Trong dự án này, chúng ta sẽ sử dụng các API trả về dữ liệu dưới dạng chuỗi JSON Để thực hiện điều này, cần có các Resource đảm nhiệm việc chuyển đổi dữ liệu đã lưu trữ thành các chuỗi hoặc mảng JSON Điều này cho phép chúng ta xử lý và truy vấn dữ liệu từ cả controller và resource.
Trước tiên, để tạo một resources ta sẽ nhập câu lệnh: php artisan make:resource CommentResources
Lệnh trên sẽ tạo một tệp có tên CommentResources.php trong thư mục app/http/resource/, nơi chúng ta sẽ xác định cách chuỗi JSON được trả về thông qua lớp CommentResources kế thừa từ JsonResource.
* Transform the resource into an array.
* @param \Illuminate\Http\Request $request
$user = User::find($this->uid); return [
Sau đó, để sử dụng resource này, ta cần phải khai báo resource muốn sử dụng trong controller:
Có hai cách để có thể sử dụng resource:
Cách đầu tiên để yêu cầu trả về dữ liệu là sử dụng dạng collection, tức là một chuỗi các mảng chứa nhiều giá trị dữ liệu Để thực hiện điều này, bạn chỉ cần khai báo thêm ::collection sau tên resource trong phương thức getComment($pid).
$comment = DB::table('comments')->where('spid',$pid)->get(); return CommentResources::collection($comment);
Khi dữ liệu trả về chỉ có một node, tức là dữ liệu đơn, ta cần khai báo khởi tạo một resource mới.
$social = SocialPost::find($id); return new SocialResources($social);
Cuối cùng, chúng ta sẽ thiết lập route cho API, cho phép ứng dụng gửi các yêu cầu HTTP đến server thông qua các URL đã được định hướng và khai báo.
// get all the shared post - user dont need to login to view them
Route::get('social','API\APISocialController@getSocialPost');
Route::get('social/{id}','API\APISocialController@getPost');
Route::get('social/{id}/comment','API\APISocialController@getComment');
Cách khai báo sẽ tương tự như khai báo route trên web, và việc thực hiện sẽ được chỉnh sửa trong tệp api.php trong thư mục routes.
Kết quả: url: “/api/social”
Kết quả thực hiện
Các trang welcome, home hiển thị hình ảnh trước khi login và sau khi login của website.
Trang login: Cho phép người dùng nhập vào email và mật khẩu để login vào website
Trang register: Chop phép người dùng đăng ký tài khoản bằng cách nhập vào username, email, name, and password.
Chỉ có quản trị viên (cấp độ 1) mới có quyền truy cập vào các trang như Welcome Page, Home Page, Login Page và Register Page trên website Tất cả các tài khoản khác khi đăng nhập sẽ không thể truy cập vào phần quản lý của trang.
Hình 3.11 Not have permission
Hình 3.12 User Manager Ở trang UserManager, admin có thể xem thông tin của tất cả user đã đăng ký (tên, username, email và quyền truy cập của user đó).
Admin còn có thể điều hướng đến trang chỉnh sửa thông tin để chỉnh sửa thông tin hoặc quyền hạn của một người dùng.
Khi quản trị viên nhấn vào xóa một người dùng, tài khoản đó sẽ không bị xóa hoàn toàn; thay vào đó, quyền truy cập sẽ được thiết lập lại về mức không Điều này không đồng nghĩa với việc tài khoản đó bị vô hiệu hóa.
Hình 3.13 User manager – Edit
Trang người dùng hiển thị tất cả hình ảnh mà người dùng đã đăng tải trong các bài viết được chia sẻ Nếu dữ liệu quá nhiều, admin có thể lọc các hình ảnh theo người dùng bằng cách nhấp vào ID mong muốn để tìm kiếm.
Ví dụ khi click vào ID thứ 2, ta sẽ thấy tài khoản với id là 2 chỉ đăng tải 1 hình ảnh.
Hình 3.15 User Image – Filter
Hình 3.16 Social Post Management
Quản lý bài đăng trên mạng xã hội sẽ hiển thị thông tin về các hình ảnh được tài khoản chia sẻ, bao gồm nội dung, số lượt yêu thích và thời gian đăng tải.
Ta có thể chọn lọc các bài viết dựa theo ID tài khoản đăng tải.
Hình 3.17 Social Post – Filter
Trên trang quản lý bài đăng mạng xã hội, người dùng có thể dễ dàng truy cập vào liên kết của từng bài viết cụ thể, giúp họ đọc chi tiết nội dung và theo dõi các bình luận mà người dùng khác đã để lại.
Hình 3.19 Read Post – comment
Hình 3.20 Add Post Ở trang này admin có thể tạo mới một bài viết với hình ảnh được chọn từ máy
Trang danh sách bạn bè hiển thị thông tin về những người bạn đã kết nối, bao gồm thời gian kết bạn và các thông tin chi tiết như ID và tên Người dùng có thể dễ dàng lọc danh sách bạn bè theo ID hoặc tên để tìm kiếm thông tin một cách nhanh chóng và hiệu quả.
Trang bình luận cho phép người dùng xem ai đã bình luận và nội dung bình luận của họ trên bài viết Trong tương lai, các bình luận này sẽ được thể hiện cảm xúc một cách rõ ràng hơn.
Chúng ta có thể lọc thông tin dựa trên tên tài khoản hoặc ID của người dùng để xem họ đã bình luận bao nhiêu lần Ngoài ra, cũng có thể tra cứu ID của bài viết để biết số lượng bình luận mà bài viết đó nhận được.
Xây dựng ứng dụng android
Thiết kế
4.1.2 Cấu trúc project: Để dễ quản lý, ta sẽ tổ chức project thành các thành phần riêng biệt:
Model: (Gồm có 7 model), chứa các model dùng để xử lí các chuỗi json được trả về thông qua api
Bài viết này đề cập đến một ứng dụng với 10 màn hình riêng biệt, mỗi màn hình chứa mã thực thi và mã giao diện (Dart) được xen kẽ Trong đó, file camera.dart xử lý các tác vụ liên quan đến camera và các bộ lọc AR thông qua thư viện camera_deep_ar, trong khi file image_enhance.dart cho phép người dùng chọn hình ảnh để bắt đầu quá trình chỉnh sửa.
edit_screen.dart: Các chức năng chỉnh sửa hình ảnh
Tập tin save_image.dart xử lý các tác vụ sau khi người dùng hoàn thành chỉnh sửa ảnh, bao gồm việc lưu hoặc chia sẻ hình ảnh Trong khi đó, tập tin home.dart hiển thị danh sách các bài viết và hình ảnh đã được chia sẻ, sắp xếp theo thứ tự từ mới đến cũ.
post_read.dart: Đọc chi tiết của một bài viết, xem các bình luận
Trong ứng dụng, file `upload_post.dart` cho phép người dùng đăng tải và chia sẻ hình ảnh như một bài viết, trong khi `library.dart` chứa thông tin về người dùng, số lượng người theo dõi và các hình ảnh đã đăng Ngoài ra, `login.dart` là trang đăng nhập dành cho người dùng, và `register.dart` là trang đăng ký.
SharedPreferences là một thư viện giúp lưu trữ các biến cục bộ trong ứng dụng thông qua một file preferences File UserPreferences.dart chứa các tham chiếu cần thiết để lưu trữ các biến này, cho phép người dùng có thể gọi và sử dụng chúng ở bất kỳ đâu trong dự án bằng cách import và thực thi hàm init().
File main.dart: File khởi đầu để khởi chạy project/ứng dụng.
- Có thể hoạt động offline
- Có thể chỉnh sửa hình ảnh
- User có thể đăng bài
- User có thể xem thông tin
Người dùng chưa đăng nhập vẫn có thể sử dụng các chức năng chụp ảnh, quay video với camera AR, chỉnh sửa ảnh và lưu vào máy Họ cũng có thể xem các bài viết đã được chia sẻ, nhưng không thể tương tác hay truy cập vào thư viện.
Sử dụng thư viện camera_deep_ar
Để sử dụng thư viện, ta cần phải có các quyền truy cập vào hệ thống như camera, thư viện ảnh, chỉnh sửa, xóa,…
Ta tiến hành mở file tạo file camera.dart và bắt đầu khai báo:
Import thư viện: import 'package:camera_deep_ar/camera_deep_ar.dart';
Khai báo controller để điều khiển:
Và tiến hành xây dựng ui kem với chức năng:
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( backgroundColor: Colors.black, body: Stack( children: [
_platformVersion = "Camera status $isReady"; setState(() {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content:
_platformVersion = "Image Taken @ $path"; setState(() {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content:
_platformVersion = "Video Recorded @ $path"; isRecording = false; setState(() {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content:
});}, androidLicenceKey: apiKey, iosLicenceKey: null, cameraDeepArCallback: (c) async { cameraDeepArController = c; setState(() {});
To switch the camera direction in a Flutter application, use the Align widget with top-right alignment and wrap it in a Padding widget for spacing Implement a FloatingActionButton with a transparent background and an icon for camera switching In the onPressed method, check if the current camera is the front camera; if so, utilize the cameraDeepArController to switch to the front camera direction, ensuring the isFrontCamera variable is updated accordingly.
} else { cameraDeepArController.switchCameraDirection( direction: CameraDirection.back); isFrontCamera = false;
Để sử dụng ứng dụng, tại phần androidLicenceKey, chúng ta cần nhập Key API đã lấy từ đầu Đối với iOS, chúng ta sẽ tạo một Key riêng từ trang web deepAR và đưa vào iosLicenceKey.
- Để đổi một mặt nạ(mask) sử dụng hàm changeMask(int p); cameraDeepArController.changeMask(p);
- Để đổi một màu nền (filter) sử dụng hàm changeFilter(int p); cameraDeepArController.changeFilter(p);
- Để đổi một hiệu ứng (effect) sử dụng hàm changeEffect(int p); cameraDeepArController.changeEffect(p);
Để thay đổi hướng của camera, bạn có thể thực hiện các bước sau: Để chuyển sang camera trước, sử dụng lệnh `cameraDeepArController.switchCameraDirection(direction: CameraDirection.front);` Nếu bạn muốn chuyển sang camera sau, hãy sử dụng lệnh `cameraDeepArController.switchCameraDirection(direction: CameraDirection.back);`.
- Để chụp ảnh dùng hàm snapPhoto(); cameraDeepArController.snapPhoto();
- Để bắt đầu hoặc kết thúc quay video ta thực hiện (bắt đầu - start: kết thúc - stop): cameraDeepArController.startVideoRecording(); cameraDeepArController.stopVideoRecording();
- Để kiểm tra camera có sẵn sàng hay chưa: isCameraReady();
4.2.1 Tận dụng tối đa thư viện
Khi cài đặt thư viện, người dùng chỉ có thể sử dụng khoảng 6 masks, 2 filters và 2 effects, trong khi thư viện mặc định cung cấp 18 masks, 6 filters và 5 effects Để tối ưu hóa số lượng này, cần thực hiện một số điều chỉnh trong thư viện camera_deep_ar Để chuyển đến tệp tin chứa hàm thực thi gốc, người dùng có thể nhấn giữ controller và chọn một hàm bất kỳ trong thư viện camera_deep_ar đang sử dụng, IDE sẽ dẫn đến tệp camera_deep_ar.dart Ngoài ra, người dùng cũng có thể truy cập theo đường dẫn flutter\.pub-cache\hosted\pub.dartlang.org\camera_deep_ar0.0.1\lib\camera_deep_ar.dart.
Tại đây, ta tìm đến các hàm enum mask, enum filters, enum effects
Có nhiều hiệu ứng khác nhau, nhưng các hàm supportedMasks, supportedFilters và supportedEffects lại có số lượng khai báo ít hơn trong các danh sách enum hiện có Chúng ta chỉ cần thêm các giá trị con cho các hàm này.
Và như thế chúng ta có thể sử dụng tối đa các tài nguyên có sẵn của thư viện
Lưu ý: Tuyệt đối không chỉnh sửa nếu như không chắc chắn về việc đang làm.
Chỉnh sửa hình ảnh
To install the necessary libraries, open the pubspec.yaml file and add the following dependencies: image_picker version ^0.6.7+4, cached_network_image version ^2.2.0+1, image_editor version ^0.7.1, extended_image from the Git repository (git://github.com/codenameakshay/extended_image.git), photo_view version ^0.9.2, and gallery_saver version ^2.0.1.
Tiếp theo, bạn cần đưa các tệp hoặc sao chép mã code vào dự án, sau đó chỉnh sửa để đảm bảo chúng phù hợp và có thể hoạt động trong project Kết quả thu được sẽ như sau:
Về chức năng, màn hình image_enhance cho phép người dùng chọn một hình ảnh để bắt đầu chỉnh sửa Thư viện image_picker của Flutter hỗ trợ dễ dàng trong việc chọn và lưu ảnh vào một biến Sau đó, hình ảnh đã chọn sẽ được chuyển qua màn hình edit_screen để tiến hành chỉnh sửa.
To utilize essential libraries in your Flutter application, ensure you import the following packages: `image_picker` for selecting images, `extended_image` for enhanced image handling, `image_editor` for editing functionalities (excluding ImageSource), `gallery_saver` for saving images to the gallery, and `photo_view` for displaying images in a zoomable view.
- Chọn ảnh: final pickedFile = await picker.getImage(source: ImageSource.gallery);
CupertinoPageRoute( builder: (context) => EditPhotoScreen( arguments: [_image],
Trong màn hình chỉnh sửa, chúng ta có thể thực hiện việc chỉnh sửa hình ảnh một cách đơn giản Thư viện image_editor đã hỗ trợ hầu hết các tính năng cần thiết để chỉnh sửa ảnh cơ bản Tất cả những gì bạn cần làm là gọi hàm và thực hiện các thao tác chỉnh sửa.
Để xoay ảnh, chúng ta sử dụng hàm với tham số true hoặc false; nếu true, ảnh sẽ được lật 90 độ sang bên phải, còn nếu false, ảnh sẽ lật 90 độ sang bên trái Ngoài ra, có thể điều chỉnh mã nguồn bằng cách thay đổi từ rotate(right) thành rotate(left) để thay đổi hướng lật ảnh Cụ thể, cú pháp là: `void rotate(bool right) { editorKey.currentState.rotate(right: right); }`.
- Lật ảnh: void flip() { editorKey.currentState.flip();
Khi gọi hàm, ảnh sẽ đơn giản được lật ngược lại so với chiều ban đầu theo chiều ngang.
The Flutter extended_image library offers comprehensive image cropping functionalities Users can directly access the raw image data and cropping rectangle through the ExtendedImageEditorState, utilizing the `getCropRect()` method and `rawImageData` To set up cropping options, developers can prepare various settings such as rotation angle, horizontal and vertical flipping, and the raw image data The ImageEditorOption class allows for the addition of clipping options based on the defined rectangle, as well as flipping options, and rotation adjustments if an angle is specified.
To edit an image using the specified options, add saturation, brightness, and contrast adjustments with the following code: `option.addOption(ColorOption.saturation(sat));`, `option.addOption(ColorOption.brightness(bright + 1));`, and `option.addOption(ColorOption.contrast(con));` Set the output format to JPEG with maximum quality by using `option.outputFormat = const OutputFormat.jpeg(100);` Finally, execute the image editing with `final Uint8List result = await ImageEditor.editImage(image: img, imageEditorOption: option);`.
Ảnh sau khi được chỉnh sửa sẽ ở dạng dữ liệu hình ảnh, cho phép người dùng lưu trữ hoặc thực hiện các tác vụ khác liên quan đến chỉnh sửa ảnh.
- Đổi độ sang, độ tương phản, độ bão hòa:
Thư viện image_editor của Flutter sử dụng ma trận 5x4 để chuyển đổi màu sắc và các thành phần của một bitmap ảnh Ma trận này có thể được truyền dưới dạng mảng đơn, với màu mặc định được khai báo như sau: final defaultColorMatrix = const [.
]; o Hàm dùng để tính toán màu bão hòa
List calculateSaturationMatrix(double saturation) { final m = List.from(defaultColorMatrix); final R = 0.213 * invSat; final G = 0.715 * invSat; final B = 0.072 * invSat; m[0] = R + saturation; m[1] = G; m[2] = B; m[5] = R; m[6] = G + saturation; m[7] = B; m[10] = R; m[11] = G; m[12] = B + saturation; return m;
} o Tính toán độ tương phản:
List calculateContrastMatrix(double contrast) { final m = List.from(defaultColorMatrix); m[0] = contrast; m[6] = contrast; m[12] = contrast; return m;
Sau khi chỉnh sửa, ảnh sẽ được chuyển sang màn hình dưới dạng file, cho phép người dùng lưu trữ ảnh vào hệ thống hoặc chia sẻ dễ dàng.
Trước tiên để lưu hình ảnh, ta cần phải đổi tên hình ảnh đó để tránh bị trùng lặp void renameImage() {
List ogPathList = ogPath.split('/');
String ogExt = ogPathList[ogPathList.length - 1].split('.')[1];
DateTime today = new DateTime.now();
"${today.day.toString().padLeft(2, '0')}-${today.month.toString().padLeft(2, '0')}-${today.year.toString()}_${today.hour.toString().padLeft(2, '0')}-$
{today.minute.toString().padLeft(2, '0')}-${today.second.toString().padLeft(2, '0')}"; image = image.renameSync(
"${ogPath.split('/image')[0]}/PhotoEditor_$dateSlug.$ogExt"); print(image.path);
Sau đó sử dụng thư viên gallery_image để lưu hình ảnh vào thư viện:
Future saveImage() async { renameImage(); await GallerySaver.saveImage(image.path, albumName: "PhotoEditor"); setState(() {savedImage = true;});
Ảnh sẽ được lưu vào thư viện hình ảnh trong album PhotoEditor Bạn có thể thay đổi đích lưu trữ bằng cách đổi tên thư mục PhotoEditor thành tên mà bạn mong muốn.
Giao tiếp với back-end qua API
Thư viện HTTP của Flutter là một công cụ mạnh mẽ cho phép thực hiện các yêu cầu đến máy chủ, bao gồm GET, POST, PUT và DELETE Ngoài ra, thư viện này cũng hỗ trợ xác thực thông qua các token, giúp tăng cường bảo mật cho ứng dụng.
Upload dữ liệu POST(/login):
Future signIn(String email, String password) async{
Map data ={'email': email,'password': password,};
Login jsonData; var response = await http.post(url+'login', body: data); if(response.statusCode == 200){ jsonData = Login.fromJson(jsonDecode(response.body)); setState(() {Navigator.pop(context, true);});
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content:
}else print(response.body); return jsonData;
Sau khi nhận dữ liệu từ các trường văn bản (textfield) là email và mật khẩu, chúng ta sẽ gọi hàm đăng nhập để thực hiện quá trình đăng nhập vào ứng dụng bằng tài khoản đã đăng ký.
Chúng ta sẽ khai báo dữ liệu MAP với thông tin là email và chuỗi, sau đó thực hiện yêu cầu gửi đến server với URL và nội dung chính là dữ liệu mà chúng ta đã nhập trước đó.
Dữ liệu được trả về sẽ nằm ở dạng json dưới dạng
{ success : true, message: Login success, token:
Để chuyển đổi đoạn JSON này thành cấu trúc mà DART có thể hiểu, chúng ta sẽ tạo một model có tên là Login.dart Model này sẽ bao gồm các thuộc tính như: final bool success, final String message, và final String token Bạn có thể sử dụng trang web Json to Dart để thực hiện việc tạo model một cách tự động.
Login({ this.success, this.message, this.token,
}); factory Login.fromJson(Map json){ return Login( success: json['success'], message: json['message'], token: json['token'],
} Ở trên là đoạn mã để chuyển chuỗi json về kiểu dữ liệu mà dart có thể hiểu được và sử dụng: jsonData = Login.fromJson(jsonDecode(response.body));
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content:
Để thực hiện các yêu cầu khác, bạn chỉ cần khai báo gói http và sử dụng các phương thức request tương ứng Ví dụ, để gửi yêu cầu đăng nhập, bạn có thể sử dụng: `var response = await http.post(url+'login', body: data);` Đối với yêu cầu lấy dữ liệu xã hội, bạn có thể sử dụng: `var response = await http.get('${User Preferences.getBaseURL()}social');`.
Ngoài ra để thực hiện upload file hoặc hình ảnh ta sẽ sử dụng multipart
To upload a post with an image and accompanying text, use the `uploadPost` function, which creates a multipart request to the specified URL First, it initializes a stream from the image file and retrieves its length Then, it constructs a URI using the base URL from user preferences and prepares a `MultipartRequest` for a POST operation Finally, it adds the image as a `MultipartFile`, including the stream, length, and filename, ready for submission.
To send a request with authorization, use the 'Authorization' header with the Bearer token from user preferences Add the content to the request fields and include necessary headers and files After sending the request, check the response status code; if it is 200, listen to the response stream and print the output.
Chúng ta sẽ chuyển đổi file hình ảnh thành chuỗi bytestream và sau đó đưa vào yêu cầu bằng cách sử dụng biến `request` với cú pháp `var request = new http.MultipartRequest("POST", uri);` Tiếp theo, chúng ta tạo một file đa phần bằng cách sử dụng `var multipart = new http.MultipartFile('image', stream, length, filename: basename(image.path));`.
Để thêm header yêu cầu token hoặc các yêu cầu khác, bạn có thể sử dụng: `request.headers.addAll(headers);` và `request.files.add(multipart);` Sau đó, thực hiện yêu cầu và nhận kết quả trả về dưới dạng JSON.
Shared Preferences
Việc lưu trữ dữ liệu cục bộ giúp tối ưu hóa hiệu suất sử dụng ứng dụng, giảm thời gian truy cập và số lần yêu cầu Trong Flutter, chúng ta có thể sử dụng Shared Preferences với cú pháp tương tự như trong Android, mang lại sự tiện lợi và hiệu quả cho việc quản lý dữ liệu.
To create a file named UserPreferences.dart within the Shared Preferences directory, begin by importing the necessary package: `import 'package:shared_preferences/shared_preferences.dart';` In this file, define the UserPreferences class, which includes a static SharedPreferences variable called _preferences Additionally, set up constants for keys such as _keyLogin, _keyToken, _BASE_URL, _userId, and _userName Lastly, implement an asynchronous method named init to initialize the preferences.
The code snippet demonstrates how to manage user authentication and preferences using asynchronous methods It includes functions to set and retrieve the login status, token, base URL, user ID, and user name Each method utilizes the `_preferences` object to store and access these values, ensuring that user data is easily manageable and retrievable within the application.
Tệp này sẽ lưu trữ thông tin quan trọng như token sau khi người dùng đăng nhập, kiểm tra trạng thái đăng nhập của ứng dụng, cũng như các URL và giá trị khác cần thiết để hỗ trợ hoạt động của ứng dụng.
Giống như android, để khai báo:
_preferences = await SharedPreferences.getInstance(); Để lưu trữ dữ liệu: await _preferences.setBool(_keyLogin, _isLogin); Để lấy dữ liệu: preferences.getBool(_keyLogin);
Chúng ta có thể lưu trữ và xem các kiểu dữ liệu như: String, int, bool, double và danh sách String Sau khi đã khai báo và định nghĩa các hàm cần thiết, để sử dụng SharedPreferences ở các phần khác trong dự án, ta chỉ cần nhập file UserPreferences vào như một thư viện Flutter bằng cách sử dụng câu lệnh: import 'package:shared_preferences/shared_preferences.dart' Tiếp theo, gọi hàm init() trong hàm void initState() để khởi tạo.
_loadPreference() async { await UserPreferences.init();
@override void initState() { super.initState();
Và sử dụng trong class: await UserPreferences.setLoginStatus(_isLogin); await UserPreferences.setToken(_token); await UserPreferences.setUserId(jsonData.message.split('_')[0]); await UserPreferences.setUserName(jsonData.message.split('_')[1]);
Hình ảnh kết quả
Trên màn hình camera, người dùng có thể chọn các bộ lọc cho khuôn mặt, màu nền và hiệu ứng bằng cách nhấp vào biểu tượng tương ứng để hiển thị danh sách Có 18 hiệu ứng bộ lọc cho khuôn mặt, 5 bộ lọc cho hiệu ứng nền và 4 bộ lọc cho hiệu ứng màu sắc Để lưu ảnh, chỉ cần nhấp vào biểu tượng camera ở dưới cùng màn hình, ảnh sẽ được lưu trong thư mục Pictures Để ghi video, nhấp vào biểu tượng camera bên cạnh biểu tượng chụp ảnh để bắt đầu quay, và nhấn lại vào biểu tượng đó để kết thúc (biểu tượng sẽ chuyển thành biểu tượng tắt camera) Video sẽ được lưu trong thư mục Videos.
4.6.2 Image Enhance: Ở màn hình image enhance ta có thể chọn hình ảnh bất kỳ từ thư viện ảnh của máy và chuyển hình ảnh đến màn hình edit image để bắt đầu chỉnh sửa.
Tại màn hình chỉnh sửa, người dùng có thể điều chỉnh các chức năng như xoay, lật ảnh, và điều chỉnh độ sáng, độ bão hòa, độ tương phản Sau khi hoàn tất, nhấn lưu để chuyển đến màn hình lưu hoặc nhấn reset để khôi phục trạng thái ban đầu của ảnh Tại màn hình lưu trữ, bạn có thể chọn lưu ảnh, chia sẻ để chuyển đến đăng tải (nên lưu trước khi chia sẻ), hoặc quay lại màn hình ban đầu.
Hình 4.32 image enhance screen
Màn hình chính hiển thị các hình ảnh từ bài đăng của người dùng theo thứ tự từ mới nhất đến cũ nhất Để đọc chi tiết một bài viết, người dùng chỉ cần nhấp vào bài viết đó để được chuyển đến trang chi tiết và xem các bình luận Đối với những người dùng chưa đăng nhập, họ chỉ có thể xem nội dung mà không thể thực hiện bất kỳ tương tác nào khác.
Nút hình ảnh ở dưới cùng của trang chính cho phép người dùng chuyển đến màn hình đăng tải bài viết Để đăng tải, chỉ cần chọn một hình ảnh từ thư viện, nhập một ít thông tin hoặc lời dẫn cho hình ảnh đó, và nhấn nút upload để hình ảnh được tải lên server Bài viết mới sẽ xuất hiện ngay phần đầu tiên của trang chính.
Đối với người dùng chưa đăng nhập, ứng dụng sẽ yêu cầu họ đăng nhập trước khi có thể xem thông tin trên màn hình.
Thông tin bao gồm các hình ảnh đã được đăng tải, số lượng người dùng mà người dùng theo dõi, cũng như số lượng người theo dõi người dùng, được hiển thị theo danh sách.
Hình 4.36 Login và register screen
Màn hình đăng ký cho phép người dùng tạo tài khoản FiAR độc nhất với mỗi email, yêu cầu nhập các thông tin như username, email, mật khẩu và ngày sinh Để đăng nhập, người dùng chỉ cần nhập email và tài khoản đã có sẵn để truy cập ứng dụng.
Kết luận
Kết quả đạt được
- Tạo được một ứng dụng có chức năng chụp ảnh và quay video với bộ lọc
AR (khuôn mặt, nền, hiệu ứng, ).
- Tạo được ứng dụng có khả năng giao tiếp giữa server và app thông qua restful api
- Tạo được một web back-end làm server cho một ứng dụng.
- Hiểu biết thêm về framework Laravel giúp tạo website và các thư viện đi kem.
- Mở rộng kiến thức về ngôn ngữ lập trình dart dành cho laravel.
- Mở rộng được kiến thức về mảng lập trình di động và các kiến thức về xử lí ảnh, AI, AR.
Khó khăn và hạn chế
Ứng dụng hiện tại gặp nhiều hạn chế, bao gồm độ chính xác thấp trong việc nhận diện khuôn mặt, yêu cầu điều kiện ánh sáng và góc nhìn phù hợp để hoạt động hiệu quả Video sau khi quay chỉ xuất hiện trong thư mục lưu trữ sau một thời gian ngắn, và nguồn lưu trữ các tệp đầu ra không đồng nhất Ngoài ra, ứng dụng cũng chạy nặng, dễ bị crash, và chưa hỗ trợ tính năng đăng nhập bằng khuôn mặt (face-id) Cuối cùng, các chức năng của ứng dụng chưa thực sự tương thích và ăn khớp với nhau.
Trong quá trình thực hiện, chúng tôi gặp phải nhiều khó khăn như thời gian thực hiện kéo dài hơn dự kiến Việc lập kế hoạch và chuẩn bị nghiên cứu không rõ ràng đã gây trở ngại cho việc tìm hiểu và phát triển Đội ngũ thực hiện ít người, buộc phải đảm nhận nhiều công việc ở nhiều lĩnh vực khác nhau (full-stack) Thêm vào đó, việc nghiên cứu ngôn ngữ mới lạ cũng tiêu tốn nhiều thời gian.
Định hướng phát triển
Ứng dụng được phát triển để chạy trên cả hai hệ điều hành iOS và Android, mang lại khả năng tương thích tốt hơn với thiết bị và hoạt động mượt mà hơn Các chức năng của ứng dụng liên kết chặt chẽ với nhau, cùng với cơ sở dữ liệu đa dạng, cho phép người dùng dễ dàng tạo thêm các tài nguyên như mask, filter, effect và tải lên thành phẩm của riêng mình thay vì chỉ sử dụng các ứng dụng mặc định Ngoài ra, ứng dụng còn phát triển lên website và hỗ trợ chia sẻ rộng rãi trên các nền tảng mạng xã hội như Facebook, Messenger, Instagram, Twitter, và nhiều hơn nữa.
Tôi đang nỗ lực mở rộng kiến thức của mình về trí tuệ nhân tạo (AI), thực tế tăng cường (AR) và xử lý hình ảnh Đồng thời, tôi cũng học hỏi thêm về lập trình di động và web back-end nhằm phát triển đam mê cá nhân và đóng góp cho đất nước Tôi tìm tòi và khám phá các ngôn ngữ lập trình, framework và công nghệ mới để nâng cao kỹ năng và khả năng sáng tạo của mình.