ĐỒ ÁN CƠ SỞ - TÊN ĐỀ TÀI: XÂY DỰNG ỨNG DỤNG IMAGE FILTER - BỘ LỌC HÌNH ẢNH CHO ANDROID

ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG - - ĐỒ ÁN CƠ SỞ ĐỀ TÀI XÂY DỰNG ỨNG DỤNG IMAGE FILTER – BỘ LỌC HÌNH ẢNH CHO ANDROID Sinh Viên Thực Hiện: Nguyễn Quang Hoàng Vu Mã sinh viên – Lớp: 18IT118 - 18IT2 Giảng Viên Hướng Dẫn: TS Nguyễn Đức Hiển Đà Nẵng, tháng 05 năm 2021 ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG - - ĐỒ ÁN CƠ SỞ ĐỀ TÀI XÂY DỰNG ỨNG DỤNG IMAGE FILTER – BỘ LỌC HÌNH ẢNH CHO ANDROID Đà Nẵng, tháng 05 năm 2021 Đờ án sở Ngũn Quang Hồng Vũ – 18IT118 MỞ ĐẦU Trong một xã hội hiện đại ngày nay, có thể thấy người ta thường rất ít dành thời gian để vui chơi giải trí, tận hưởng khoảnh khắc vui vẻ bên gia đình, bạn be rất ít, mọi người phải tấp nập, bận rộn để mưu sinh Một những cách mà mọi người thường chọn để lưu giữ những kỹ niệm vui vẻ, cười đùa với bằng cách lưu lại những bức ảnh, những video chơi đùa bên nhau, lưu giữ những khoảnh khắc, những kỷ niệm,… Hơn nữa, một bức ảnh đẹp có thể khiến cho chúng ta tự tin hơn, làm hình ảnh đại diện cho bản thân, một tấm ảnh hài hước có thể khiến cho chúng ta cảm thấy vui vẻ mỗi nhớ lại,… Với mục tiêu để mọi người có thể tận hưởng những phút giây cười đùa vui vẻ bên nhau, lưu giữ những khoảnh khắc đáng nhớ hết tận dụng những gì đã học, vận dụng tính ham tim tòi thử thách bản thân, đề tài đồ án em lựa chọn xây dựng một ứng dụng trí tuệ nhân tạo để nhận diện khuông mặt, xử lí hình ảnh điện thoại android, cụ thể ứng dụng bô lọc khuôn mặt, hình ảnh Bắt đầu với ý tưởng trên, em thực hiện đồ án: “XÂY DỰNG ỨNG DỤNG IMAGE FILTER – BỘ LỌC HÌNH ẢNH CHO ANDROID” Cấu trúc đồ án bao gồm: Chương 1: Tổng quan Chương 2: Phân tích thiết kế hệ thống Chương 3: Xây dựng back-end Chương 4: Xây dựng ứng dụng android Chương 5: Kết luận Đồ án sở Nguyễn Quang Hoàng Vũ – 18IT118 LỜI CẢM ƠN Lời đầu tiên, em xin trân trọng gửi lời cảm ơn sâu sắc nhất tới giảng viên hướng dẫn bộ môn Đồ Án Cơ Sở thầy Nguyễn Đức Hiển đã nhiệt tình đóng góp ý kiến hướng dẫn chúng em hồn thành tớt đờ án Em xin chân thành cảm ơn thầy cô giáo giảng dạy tại Trường Đại học công nghệ thông tin truyền thông Việt Hàn – Đại học Đà Nẵng đã nhiệt tình ủng hộ, cung cấp tài liệu đưa những ý kiến góp ý quý báu Cuối cùng, em xin chân thành cảm ơn tới bạn be đã động viên, khuyến khích tạo điều kiện cho chúng tơi hồn thành tớt đề tài mình Chúng em xin chân thành cảm ơn! Sinh viên thực hiện Nguyễn Quang Hoàng Vu – 18IT118 Đà Nẵng, tháng 05 năm 2021 Đồ án sở Nguyễn Quang Hoàng Vũ – 18IT118 MỤC LỤC Trang Chương Tổng quan lý thuyết và công cụ 1.1 Android studio: .1 1.2 Flutter: 1.2.1 Ngôn ngữ Dart: .1 1.3 Visual Studio Code (VSCode): 1.4 Laravel Framework: 1.4.1 Laravel Framework: .1 1.4.2 Mô hình MVC: .2 1.5 Camera_deep_ar: 1.6 Opensource codenameakshay/image-editor: Chương Phân tích & thiết kế hệ thống 2.1 Giới thiệu bài toán: 2.1.1 Đề tài: 2.1.2 Mục tiêu: 2.1.3 Phương pháp: 2.2 Tìm hiểu một vài ứng dụng: 2.2.1 Messenger: 2.2.2 Instagram: .5 2.2.3 Adobe photoshop lightroom: 2.2.4 Đúc kết: 2.3 Biểu đồ Use-case: 2.4 Cơ sở dữ liệu: 2.4.1 Phân tích: 2.4.2 Mô tả một số bảng chính: .8 2.4.3 Cơ sở dữ liệu: .10 Chương Xây Dựng Back-end 10 3.1 Yêu cầu chức năng: 10 3.2 Thiết kế (Mô hình MVC): 11 3.2.1 Model: 11 3.2.2 Routes: 11 Đờ án sở Ngũn Quang Hồng Vũ – 18IT118 3.2.3 Controllers: 13 3.2.4 Views:13 3.3 Tạo API: 15 3.4 Kết quả thực hiện: 17 Chương Xây dựng ứng dụng android 25 4.1 Thiết kế: 25 4.1.1 Logo ứng dụng: 25 4.1.2 Cấu trúc project: 25 4.1.3 Yêu cầu ứng dụng: 26 4.2 Sử dụng thư viện camera_deep_ar: 26 4.2.1 Tận dụng tối đa thư viện .28 4.3 Chỉnh sửa hình ảnh: 29 4.4 Giao tiếp với back-end qua API: .32 4.5 Shared Preferences: 34 4.6 Hình ảnh kết quả: .36 4.6.1 Camera screen: .36 4.6.2 Image Enhance: 36 4.6.3 Home screen: 37 4.6.4 Library screen: 38 4.6.5 Login register: 39 Chương Kết luận .40 5.1 Kết quả đạt được: .40 5.2 Khó khăn và hạn chế: 40 5.3 Định hướng phát triển: 41 TÀI LIỆU THAM KHẢO 42 Đồ án sở Nguyễn Quang Hoàng Vũ – 18IT118 DANH MỤC HÌNH ẢNH Trang Hình 2.1 Biểu đồ Use-case .8 Hình 2.2 Cơ sở dữ liệu 10 Hình 3.3 Lưu trữ thông tin bảng friend 11 Hình 3.4 Routes 12 Hình 3.5 Laravel controller 13 Hình 3.6 View .14 Hình 3.7 Laravel blade 14 Hình 3.8 @extend @include @yield @section 15 Hình 3.9 Json API 17 Hình 3.10 Welcome Page, Home Page, Login Page, Register Page 18 Hình 3.11 Not have permission 19 Hình 3.12 User Manager 19 Hình 3.13 User manager – Edit 20 Hình 3.14 User Image 20 Hình 3.15 User Image – Filter .21 Hình 3.16 Social Post Management 21 Hình 3.17 Social Post – Filter 21 Hình 3.18 Read Post .22 Hình 3.19 Read Post – comment 22 Hình 3.20 Add Post 22 Hình 3.21 Friend List 23 Hình 3.22 Friend List – Filter .23 Hình 3.23 Friend List - filter 23 Hình 3.24 Comment .24 Hình 3.25 Comment – filter 24 Hình 4.26 Logo .25 Hình 4.27 Camera_deep_ar 27 Hình 4.28 camera upgrade 29 Hình 4.29 Supported 29 Hình 4.30 Image_enhance 30 Đồ án sở Nguyễn Quang Hoàng Vũ – 18IT118 Hình 4.31 Camera_screen 36 Hình 4.32 image enhance screen 37 Hình 4.33 Home screen 37 Hình 4.34 Upload post 38 Hình 4.35 Library Screen 38 Hình 4.36 Login và register screen 39 Đồ án sở Nguyễn Quang Hoàng Vũ – 18IT118 DANH MỤC CÁC BẢNG Trang Bảng 2-1 Cấu trúc bảng – Users Bảng 2-2 Cấu trúc bảng – Social Post Đờ án sở Ngũn Quang Hồng Vũ – 18IT118 Chương .Tổng quan lý thuyết và công cụ 1.1 Android studio: Android Studio một phầm mềm bao gồm bộ công cụ khác dùng để phát triển ứng dụng chạy thiết bị sử dụng hệ điều hành Android loại điện thoại smartphone, tablet Android Studio đóng gói với một bộ code editor, debugger, công cụ performance tool một hệ thống build/deploy (trong đó có trình giả lập simulator để giả lập môi trường thiết bị điện thoại hoặc tablet máy tính) cho phép lập trình viên có thể nhanh chóng phát triển ứng dụng từ đơn giản tới phức tạp 1.2 Flutter: Flutter nền tảng phát triển ứng dụng đa nền tảng cho iOS Android Google phát triển Flutter sử dụng ngôn ngữ DART cũng Google phát triển flutter cũng đã sử dụng để tạo ứng dụng native cho Google 1.2.1 Ngôn ngữ Dart: Ngôn ngữ DART ngôn ngữ thuần hướng đối tượng Google giới thiệu từ năm 2011, với mục đích cung cấp sự lựa chọn hiện đại không thay thế Javascript Ngôn ngữ DART hỗ trợ tốt ở Visual Studio Code, Android Studio 1.3 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 macOS, Visual Studio Code phát triển bởi Microsoft Nó xem mợt sự kết hợp hồn hảo giữa IDE Code Editor Visual Studio Code hỗ trợ chức debug, kem với Git, có syntax highlighting, tự hoàn thành mã thông minh, snippets, cải tiến mã nguồn Nhờ tính tùy chỉnh, Visual Studio Code cũng cho phép người dùng thay đổi theme, phím tắt, tùy chọn khác 1.4 Laravel Framework: 1.4.1 Laravel Framework: Laravel một PHP Framework mã nguồn mở miễn phí, phát triển bởi Image Filter – FiAR 1|Page - Để đổ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); - Để đổi hướng camera ta làm sau: Đổi thành camera trước (front): cameraDeepArController.switchCameraDirection( direction: CameraDirection.front); Đổi thành camera sau(back): 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 Thư viện cài đặt về có thể sử dụng khoảng masks, fitlters effects (mặc định có sẵn thư viện 18 masks, filters effects) để tối đa điều ta phải chỉnh sửa một ít ở thư viện camera_deep_ar Đối với một vài ide để chuyển đến tệp tin có chứa hàm thực thi gốc, ta nhấn giữ controller rồi nhất vào một hàm bất kỳ thư viện camera_deep_ar mà ta sử dụng, ide điều hướng chúng ta đên tệp tin có tên camera_deep_ar.dart Hoặc ta có thể truy cập theo đường dẫn: flutter\.pubcache\hosted\pub.dartlang.org\camera_deep_ar0.0.1\lib\camera_deep_ar.dart Tại đây, ta tìm đến hàm enum mask, enum filters, enum effects Image Filter – FiAR 28 | P a g e Hình 4.28 camera upgrade Có thể thấy có rất nhiều hiệu ứng khác ở hàm supportedMasks, supportedFilters, supportedEffects, lại khai báo ít danh sách enum có sẵn Việc ta cần làm khai báo thêm giá trị cho hàm sau: Hình 4.29 Supported Và thế chúng ta có thể sử dụng tối đa tài nguyên có sẵn thư viện Lưu ý: Tuyệt đối không chỉnh sửa nếu không chắc chắn về việc làm 4.3 Chỉnh sửa hình ảnh: Mở file pubspec.yaml cài đặt vào thư viện trên: image_picker: ^0.6.7+4 cached_network_image: ^2.2.0+1 image_editor: ^0.7.1 extended_image:git:url: git://github.com/codenameakshay/extended_image.git photo_view: ^0.9.2 gallery_saver: ^2.0.1 Tiếp đó đưa tệp hoặc chép mã code vào dự án chỉnh sửa lại để phù hợp có thể chạy với project Kết quả thu sau: Image Filter – FiAR 29 | P a g e Hình 4.30 Image_enhance Về chức năng, tai hình image_enhance, chúng ta có thể chọn một hình ảnh để bắt đầu chỉnh sửa, thư viện image_picker flutter hỗ trợ cho chúng ta dễ dàng chọn lưu ảnh một biến, sau đó chúng ta chuyển ảnh đó qua hình edit_screen để bắt đầu chỉnh sửa: import import import import import import Khai báo thư viện: 'package:image_picker/image_picker.dart'; 'package:extended_image/extended_image.dart'; 'save_screen.dart'; 'package:image_editor/image_editor.dart' hide ImageSource; 'package:gallery_saver/gallery_saver.dart'; 'package:photo_view/photo_view.dart'; - Chọn ảnh: final pickedFile = await picker.getImage(source: ImageSource.gallery); - Chỉnh sửa ảnh: Navigator.push( context, CupertinoPageRoute( builder: (context) => EditPhotoScreen( arguments: [_image], ), ), ), Ở hình edit, ta thực hiện chỉnh sửa hình ảnh, thư viện image_editor hầu đã hỗ trợ gần hết mọi thứ để chúng ta có thể chỉnh sửa ảnh bản một cách đơn giản, mọi công việc cần gọi hàm thực hiện: - Xoay ảnh: Ta truyền vào hàm giá trị true hoặc false, nếu true, lật về bên phải (tức 90o về bên phải) nếu false lật về bên trái (tức 90 o về bên trái), hoặc chúng ta có thể điều chỉnh code thay vì rotate(right) thành rotate(left) để có thể đổi hướng lật Image Filter – FiAR 30 | P a g e void rotate(bool right) { editorKey.currentState.rotate(right: right); } - Lật ảnh: void flip() { editorKey.currentState.flip(); } Khi gọi hàm, ảnh đơn giản lật ngược lại so với chiều ban đầu theo chiều ngang - Cắt ảnh: Thư viện extended_image flutter cũng hỗ trợ đầy đủ cho chức cắt ảnh: o Lấy dữ liệu hình ảnh thô trực tiếp cắt từ ExtendedImageEditorState(): final Rect rect = state.getCropRect(); final Uint8List img = state.rawImageData; o Chuẩn bị cài đặt cắt ảnh: final EditActionDetails action = state.editAction; final double radian = action.rotateAngle; final bool flipHorizontal = action.flipY; final bool flipVertical = action.flipX; final Uint8List img = state.rawImageData; final ImageEditorOption option = ImageEditorOption(); option.addOption(ClipOption.fromRect(rect)); option.addOption(FlipOption(horizontal: flipHorizontal, vertical: flipVertical)); if (action.hasRotateAngle) { option.addOption(RotateOption(radian.toInt())); } option.addOption(ColorOption.saturation(sat)); option.addOption(ColorOption.brightness(bright + 1)); option.addOption(ColorOption.contrast(con)); option.outputFormat = const OutputFormat.jpeg(100); o Cắt ảnh với editImage: final Uint8List result = await ImageEditor.editImage( image: img,imageEditorOption: option, ); Ảnh sau chỉnh sửa sẻ ở dạng Image data có thể sử dụng để lưu ảnh hoặc thực hiện bất cứ tác vụ khác cho chỉnh sửa ảnh - Đổi độ sang, độ tương phản, độ bão hòa: Thư viện image_editor flutter sử dụng ma trận 5x4 để chuyển đổi màu sắc thành phần một bitmap ảnh Ma trận có thể truyền dưới mảng đơn: o Khai báo màu mặc định: final defaultColorMatrix = const [ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, ]; 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 invSat = - saturation; Image Filter – FiAR 31 | P a g e } 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 tố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; } Ảnh sau chỉnh sửa chuyên sang hình dưới dạng file, từ đó ta có thể lưu trữ ảnh vào hệ thống hoặc chia sẻ 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() { String ogPath = image.path; List ogPathList = ogPath.split('/'); String ogExt = ogPathList[ogPathList.length - 1].split('.')[1]; DateTime today = new DateTime.now(); String dateSlug = "${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 lưu vào thư viện hình ảnh lưu album forlder PhotoEditor Có thể đổi đích lưu trữ bằng cách đổi tên PhotoEditor bằng tên mong muốn 4.4 Giao tiếp với back-end qua API: Thư viện http flutter một thư viện mạnh mẽ có thể sử dụng để thực hiện request lên server GET, POST, PUT, DELETE,… http còn có thể hỗ trợ cho authorization với token,… Image Filter – FiAR 32 | P a g e 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: Text(jsonData.message))); }else print(response.body); return jsonData; } Sau nhận dữ liệu từ textfield widget email password, ta gọi hàm login để tiến hành đăng nhập vào ứng dụng bằng tài khoản đã đăng ký Ta khai báo MAP data với dữ liệu email string, sau đó thực hiện request với url đến server body chính dữ liệu mà chúng ta đã nhập trước đó Dữ liệu trả về nằm ở dạng json dưới dạng { success : true, message: Login success, token: } Để có thể chuyển đoạn json thành cấu trúc mà DART có thể hiểu được, ta tạo cho chúng một model với tên Login.dart (có thể sử dụng website Json to Dart để thực hiện tạo tự động): class Login{ final bool success; final String message; final String token; Login({ this.success, this.message, this.token, }); factory Login.fromJson(Map json){ return Login( success: json['success'], message: json['message'], token: json['token'], ); } } Ở đoạn mã để chuyển chuỗi json về kiểu dữ liệu mà dart có thể hiểu sử dụng: jsonData = Login.fromJson(jsonDecode(response.body)); Sử dụng dữ liệu trả về để hiện thông báo cho người dùng Image Filter – FiAR 33 | P a g e ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(jsonData.message))); Đối với request khác ta cũng làm tương tự, cần khai báo cho gói http sử dụng request mong muốn var response = await http.post(url+'login', body: data); var response = await http.get('${UserPreferences.getBaseURL()}social'); Ngoài để thực hiện upload file hoặc hình ảnh ta sử dụng multipart _uploadPost(File image, String text) async { var stream = new http.ByteStream(Stream.castFrom(image.openRead())); var length = await image.length(); var uri = Uri.parse('${UserPreferences.getBaseURL()}user/social-add'); var request = new http.MultipartRequest("POST", uri); var multipart = new http.MultipartFile('image', stream, length, filename: basename(image.path)); Map headers = { 'Content-Type': 'application/json', 'Accept': 'application/json', 'Authorization': 'Bearer ${UserPreferences.getToken()}',}; request.fields['contents'] = text; request.headers.addAll(headers); request.files.add(multipart); var response = await request.send(); print(response.statusCode); if(response.statusCode == 200){ response.stream.transform(utf8.decoder).listen((event) { print(event); }); } } Chúng ta chuyển đổi file hình ảnh thành chuỗi bytestream, sau đó đưa vào request var request = new http.MultipartRequest("POST", uri); var multipart = new http.MultipartFile('image', stream, length, filename: basename(image.path)); Nếu có header yêu cầu token hoặc yêu cầu khác ta có thể thêm vào: request.headers.addAll(headers); request.files.add(multipart); sau đó thực hiện request nhận json kết quả trả về 4.5 Shared Preferences: Đối với một số dữ liệu, thì việc lưu trữ ở local giúp ích rất nhiều cho việc sử dụng, làm nhẹ kết quả trả về hoặc giảm thời gian truy cập, hay giảm số lần request, Trong flutter ta có thể sử dụng shread Preferences với cú pháp gần giống với sử dụng android Tạo một file mang tên UserPreferences.dart ở mục Shared Preferences: import 'package:shared_preferences/shared_preferences.dart'; class UserPreferences { static SharedPreferences _preferences; static const _keyLogin = '_isLogin'; static const _keyToken ='_token'; static const _BASE_URL = '_BASE_URL'; static const _userId = '_userId'; static const _userName = '_userName'; static Future init() async { _preferences = await SharedPreferences.getInstance(); } Image Filter – FiAR 34 | P a g e } static Future setLoginStatus(bool _isLogin) async => await _preferences.setBool(_keyLogin, _isLogin); static bool getLoginStatus() =>_preferences.getBool(_keyLogin); static Future setToken(String _token) async => await _preferences.setString(_keyToken, _token); static String getToken() => _preferences.getString(_keyToken); static Future setBaseURL(String _URL) async => await _preferences.setString(_BASE_URL, _URL); static String getBaseURL() => _preferences.getString(_BASE_URL); static Future setUserId(String id) async => await _preferences.setString('_userId', id); static String getUserId() => _preferences.getString(_userId); static Future setUserName(String name) async => await _preferences.setString(_userName, name); static String getUserName() => _preferences.getString(_userName); Tệp lưu trữ thông tin token sau đăng nhập user, kiểm tra ứng dụng đã đăng nhập hay chưa, hay url, hay bất kỳ giá trị mà chúng ta mong muốn lưu trữ để sử dụng giúp ích cho hoạt động ứng dụng Giống 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ữ xem kiểu dữ liệu như: String, int, bool, double, string list Sau đã khai báo định nghĩa hàm cần thiết, để gọi sharedpreferences ở nơi khác project để sử dụng, ta cần import file UserPreferences vào một thư hiện flutter: import 'package:shared_preferences/shared_preferences.dart'; sau đó, gọi hàm init() hàm void initState(); _loadPreference() async { await UserPreferences.init(); } @override void initState() { super.initState(); _loadPreference(); } Và sử dụng class: await UserPreferences.setLoginStatus(_isLogin); await UserPreferences.setToken(_token); await UserPreferences.setUserId(jsonData.message.split('_')[0]); await UserPreferences.setUserName(jsonData.message.split('_')[1]); UserPreferences.getLoginStatus() Image Filter – FiAR 35 | P a g e 4.6 Hình ảnh kết quả: 4.6.1 Camera screen: Hình 4.31 Camera_screen Ở hình camera, ta có thể chọn filter về khuôn mặt, màu nền, hay hiệu ứng, để hiện danh sách filter có sẵn ta cần nháy vào icon mỗi phần để hiển thị danh sách, bao gồm: 18 hiệu ứng bộ lọc dành cho khuôn mặt, bộ lọc dành cho hiệu ứng nền, bộ lọc dành cho hiệu ứng màu sắc Để lưu lại một bức ảnh, nhấp vào icon camera ở dưới cùng hình, ảnh lưu ở thư mục Pictures Để lưu lại một bức video, nhấp vào icon camera bên cạnh icon chụp ảnh để bắt đầu quay video, để kết thúc nhấn lại vào icon đó một lần nữa (lúc đã đổi thành icon tắt camera) Video sau một lúc lưu tại thư mục Videos 4.6.2 Image Enhance: Ở hình image enhance ta có thể chọn hình ảnh bất kỳ từ thư viện ảnh máy chuyển hình ảnh đến hình edit image để bắt đầu chỉnh sửa Tại hình chỉnh sửa có thể chọn hoặc điều chỉnh chức để tiến hành chỉnh sửa ảnh: xoay ảnh, lật ảnh, tăng giảm độ sáng, độ bão hòa, độ tương phản, sau đó nhấp vào lưu để chuyến đến hình lưu hoặc nhấp reset để khôi phục trạng thái ban đầu ảnh Ở hình lưu trữ ta có thể chọn save để lưu ảnh, Chọn share để chuyển đến upload post (nên save rồi mới chọn share nếu muốn đăng tải hình ảnh vừa sửa), hoặc chọn back để quay lại hình ban đầu Image Filter – FiAR 36 | P a g e Hình 4.32 image enhance screen 4.6.3 Home screen: Hình 4.33 Home screen Màn hình home screen đơn giản show hình ảnh (bài đăng người dùng) theo thứ tự từ mới nhất đến cũ nhất để đọc một viết chi tiết ta có thể nháy vào viết đấy chuyển đến trang viết đọc bình luận để lại Ngồi đới với những người dùng chưa đăng nhập, thì họ xem chứ không thể thực hiện bất kỳ tương tác khác Nút hình ảnh dưới cùng trang home có chức chuyển đến hình đăng tải viết Để thực hiện đăng tải, ta cần chọn một hình ảnh từ thư viện, sau đó nhập một ít thông tin hoặc bất kỳ lời dẫn hoặc tiêu đề (caption) cho hình ảnh đó, nháp vào nút Image Filter – FiAR 37 | P a g e upload có thể đăng tải hình ảnh lên server Bài viết mới đăng xuất hiện phần đầu tiên trang home Hình 4.34 Upload post 4.6.4 Library screen: Hình 4.35 Library Screen Đối với người dùng chưa đăng nhập, ứng dụng không hiển thị thông tin lên hình mà yêu cầu người dùng phải đăng nhập mới có thể xem thông tin Các thông tin bao gồm hình ảnh đã đăng tải, số người mà người dùng follow, số người mà follow người dùng, hiển thị theo danh sách,… Chức logout Image Filter – FiAR 38 | P a g e 4.6.5 Login và register: Hình 4.36 Login và register screen Màn hình register cho phép người dùng nhập vào thông tin tiến hành đăng ký một tài khoản FiAR cho riêng mình với mỗi email độc nhất Các thông tin nhập vào bao gồm, username, email, password birthday Ở login, người dùng nhập vào email tài khoản sẵn có mình để tiến hành đăng nhập vào ứng dụng Image Filter – FiAR 39 | P a g e Chương Kết luận 5.1 Kết quả đạt được: - Tạo một ứng dụng có chức chụp ảnh quay video với bộ lọc AR (khuôn mặt, nền, hiệu ứng, ) - Tạo ứng dụng có khả giao tiếp giữa server app thông qua restful api - Tạo 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 thư viện kem - Mở rộng kiến thức về ngôn ngữ lập trình dart dành cho laravel - Mở rộng kiến thức về mảng lập trình di động kiến thức về xử lí ảnh, AI, AR 5.2 Khó khăn và hạn chế: - Hạn chế ứng dụng: o Việc nhận dạng khuôn mặt AI còn hạn chế, chưa có độ chính xác cao, phải yêu cầu có điều kiện về ánh sáng, độ bao quát khuôn mặt,…mới có thể nhận diện đưa bộ lọc vào o Video sau quay một thời gian ngắn mới xuất hiện ở thư mục lưu trữ o Nguồn lưu trữ tệp đầu không thống nhất o Ứng dụng chạy nặng triển khai, dễ bị crash o Chưa có chức đăng nhập bằng khuôn mặt (face-id) o Các chức ứng dụng chưa thực sự ăn khớp với - Khó khăn trình thực hiện: o Quá trình thực hiện tốn nhiều thời gian dự kiến o Việc lên kế hoạch chuẩn bị nghiên cứu không rõ ràng khiến cho việc tìm hiểu phát triển gặp nhiều khó khăn o Số lượng người thực hiện ít, phải làm nhiều công việc theo nhiều mảng (full-stack) o Việc nghiên cứu ngôn ngữ mới lạ khiến mất nhiều thời gian Image Filter – FiAR 40 | P a g e 5.3 Định hướng phát triển: - Về ứng dụng: o Phát triển ứng dụng chạy nền cà hai hệ điều hành IOS Android o Ứng dụng tương thích với thiết bị tốt hơn, hoạt động mượt mà o Các chức ứng dụng liên kết với tốt o Cơ sở dữ liệu đa dạng o Có thể dễ dàng tạo thêm tài nguyên mask, filter, effect upload thành riêng mình thay vì dùng ứng dụng mặc định o Phát triển lên website o Chia sẻ rộng rãi (facebook, messenger, instagram, twitter,….) - Về bản thân: o Học hỏi thêm kiến thức về AI, AR, xử lí hình ảnh, o Học hỏi thêm kiến thức về lập trình di động web back-end để phục vụ cho mục đích phát triển đam mê bản thân phục vụ đất nước o Tìm tòi học hỏi thêm ngôn ngữ, framework, công nghệ mới Image Filter – FiAR 41 | P a g e TÀI LIỆU THAM KHẢO https://flutter.dev/docs/cookbook https://github.com/codenameakshay/image-editor https://flutter.dev/docs/cookbook/networking/fetch-data https://flutter-examples.com/show-hide-widgets-in-flutter/ https://pub.dev/packages/camera_deep_ar https://www.youtube.com/watch?v=xs6lHOUrP0o Image Filter – FiAR 42 | P a g e