Giao tiếp với back-end qua API:

Thư viện http của flutter là một thư viện mạnh mẽ có thể sử dụng để thực hiện các request lên server như GET, POST, PUT, DELETE,… http còn có thể hỗ trợ cho authorization với các token,….

Upload dữ liệu POST(/login):

Future<Login> signIn(String email, String password) async{

Map data ={'email': email,'password': password,};

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 khi nhận dữ liệu từ các textfield widget là email và password, ta gọi hàm login để tiến hành đăng nhập vào ứng dụng bằng tài khoản đã đăng ký.

Ta sẽ khai báo MAP data với dữ liệu là email và string, sau đó thực hiện request với url đến server và body chính là dữ liệu mà chúng ta đã nhập trước đó.

Dữ liệu được trả về sẽ nằm ở dạng json dưới dạng {

success : true,

message: Login success, token: <chuỗi token> }

Để có thể chuyển đoạn json này thành cấu trúc mà DART có thể hiểu được, ta sẽ tạo cho chúng một model với tên là Login.dart (có thể sử dụng website Json to Dart để thực hiện tạ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<String, dynamic> json){

return Login( success: json['success'], message: json['message'], token: json['token'], ); } }

Ở trên là đoạn mã để chuyển chuỗi json về kiểu dữ liệu mà dart có thể hiểu được và sử dụng:

ScaffoldMessenger.of(context).showSnackBar(SnackBar(content:

Text(jsonData.message)));

Đối với các request khác ta cũng làm tương tự, chỉ cần khai báo cho gói http là sử dụng request mong muốn.

var response = await http.post(url+'login', body: data);

var response = await http.get('${UserPreferences.getBaseURL()}social');

Ngoài ra để thực hiện upload file hoặc hình ảnh ta sẽ sử dụ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<String, String> 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); }); } }

Chúng ta sẽ chuyển đổi file hình ảnh thành chuỗi bytestream, sau đó đư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 có header yêu cầu token hoặc các yêu cầu khác ta có thể thêm vào:

request.headers.addAll(headers); request.files.add(multipart);

và sau đó thực hiện request và nhận json kết quả trả về.

4.5 Shared Preferences:

Đối với một số dữ liệu, thì việc lưu trữ ở local giúp ích rất nhiều cho việc sử dụng, và làm nhẹ các kết quả trả về hoặc giảm thời gian truy cập, hay giảm số lần request,..

Trong flutter ta có thể sử dụng shread Preferences với cú pháp gần giống với khi sử dụng trong android.

Tạo một file mang tên UserPreferences.dart ở trong mụ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();

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 này sẽ lưu trữ các thông tin như là token sau khi đăng nhập của user, kiểm tra ứng dụng đã được đăng nhập hay chưa, hay url, hay bất kỳ giá trị nào mà chúng ta mong muốn lưu trữ để sử dụng giúp ích cho hoạt động của ứng dụ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);

Chúng ta có thể lưu trữ và xem kiểu dữ liệu như: String, int, bool, double, string list Sau khi đã khai báo và định nghĩa các hàm cần thiết, để gọi các sharedpreferences ở các nơi khác trong project để sử dụng, ta chỉ cần import file UserPreferences vào như một thư hiện flutter:

import 'package:shared_preferences/shared_preferences.dart'; sau đó, gọi hàm init() trong hàm void initState();

_loadPreference() async { await UserPreferences.init(); } @override void initState() { super.initState(); _loadPreference(); }

Và sử dụ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]);

4.6 Hình ảnh kết quả:

4.6.1 Camera screen:

Hình 4.31 Camera_screen

Ở màn hình camera, ta có thể chọn các filter về khuôn mặt, màu nền, hay hiệu ứng, để hiện danh sách các filter có sẵn ta chỉ cần nháy vào icon của mỗi phần để hiển thị danh sách, bao gồm: 18 hiệu ứng bộ lọc dành cho khuôn mặt, 5 bộ lọc dành cho hiệu ứng nền, và 4 bộ lọc dành cho hiệu ứng màu sắc.

Để lưu lại một bức ảnh, nhấp vào icon camera ở dưới cùng màn hình, ảnh sẽ được lưu ở trong thư mục Pictures.

Để lưu lại một bức video, nhấp vào icon camera bên cạnh icon chụp ảnh để bắt đầu quay 1 video, để kết thúc nhấn lại vào icon đó một lần nữa (lúc này đã đổi thành icon tắt camera). Video sau một lúc sẽ được lưu tại thư mục Videos

4.6.2 Image Enhance:

Ở màn hình image enhance ta có thể chọn hình ảnh bất kỳ từ thư viện ảnh của máy và chuyển hình ảnh đến màn hình edit image để bắt đầu chỉnh sửa.

Tại màn hình chỉnh sửa có thể chọn hoặc điều chỉnh các chức năng để tiến hành chỉnh sửa ảnh: xoay ảnh, lật ảnh, tăng giảm độ sáng, độ bão hòa, độ tương phản, sau đó nhấp vào lưu để chuyến đến màn hình lưu hoặc nhấp reset để khôi phục trạng thái ban đầu của ảnh.

Ở màn hình lưu trữ ta có thể chọn save để lưu ảnh, Chọn share để chuyển đến upload post (nên save rồi mới chọn share nếu muốn đăng tải hình ảnh vừa sửa), hoặc chọn back để quay lại màn hình ban đầu.

Hình 4.32 image enhance screen

4.6.3 Home screen:

Hình 4.33 Home screen

Màn hình home screen chỉ đơn giản show các hình ảnh (bài đăng của người dùng) theo thứ tự từ mới nhất đến cũ nhất và để đọc một bài viết chi tiết ta có thể nháy vào bài viết đấy và sẽ được chuyển đến trang viết bài và đọc các bình luận được để lại

Ngoài ra đối với những người dùng chưa đăng nhập, thì họ chỉ xem chứ không thể thực hiện bất kỳ tương tác nào khác.

Nút hình ảnh dưới cùng của trang home có chức năng chuyển đến màn hình đăng tải bài viết.

Để thực hiện đăng tải, ta chỉ cần chọn một hình ảnh từ thư viện, sau đó nhập một ít thông tin hoặc bất kỳ lời dẫn hoặc tiêu đề (caption) cho hình ảnh đó, và nháp vào nút

upload là có thể đăng tải hình ảnh lên server. Bài viết mới đăng sẽ xuất hiện ngay phần đầu tiên của trang home.

Hình 4.34 Upload post

4.6.4 Library screen:

Hình 4.35 Library Screen

Đối với người dùng chưa đăng nhập, ứng dụng sẽ không hiển thị thông tin lên màn hình mà yêu cầu người dùng phải đăng nhập mới có thể xem thông tin

Các thông tin bao gồm các hình ảnh đã đăng tải, số người mà người dùng follow, số người mà follow người dùng, hiển thị theo danh sách,…

4.6.5 Login và register:

Hình 4.36 Login và register screen

Màn hình register cho phép người dùng nhập vào các thông tin và tiến hành đăng ký một tài khoản FiAR cho riêng mình với mỗi email là độc nhất. Các thông tin nhập vào bao gồm, username, email, password và birthday.

Ở login, người dùng nhập vào email và tài khoản sẵn có của mình để tiến hành đăng nhập vào ứng dụng.

Chương 5 Kết luận

5.1 Kết quả đạt được:

- Tạo được một ứng dụng có chức năng chụp ảnh và quay video với bộ lọc AR (khuôn mặt, nền, hiệu ứng,..).

- Tạo được ứng dụng có khả năng giao tiếp giữa server và app thông qua restful api

- Tạo được một web back-end làm server cho một ứng dụng.

- Hiểu biết thêm về framework Laravel giúp tạo website và các thư viện đi kem.

- Mở rộng kiến thức về ngôn ngữ lập trình dart dành cho laravel.

- Mở rộng được kiến thức về mảng lập trình di động và các kiến thức về xử lí ảnh, AI, AR.

5.2 Khó khăn và hạn chế:

- Hạn chế của ứng dụng:

o Việc nhận dạng của khuôn mặt của AI còn hạn chế, chưa có độ chính xác cao, phải yêu cầu có các điều kiện về ánh sáng, độ bao quát của khuôn mặt,…mới có thể nhận diện và đưa bộ lọc vào được.

o Video sau khi quay một thời gian ngắn mới xuất hiện ở trong thư mục lưu trữ.

o Nguồn lưu trữ của các tệp đầu ra không thống nhất.

o Ứng dụng chạy khá nặng khi triển khai, dễ bị crash.

o Chưa có chức năng đăng nhập bằng khuôn mặt (face-id).

o Các chức năng của ứng dụng chưa thực sự ăn khớp với nhau. - Khó khăn trong quá trình thực hiện:

o Quá trình thực hiện tốn nhiều thời gian hơn dự kiến.

o Việc lên kế hoạch và chuẩn bị nghiên cứu không rõ ràng khiến cho việc tìm hiểu và phát triển gặp nhiều khó khăn.

o Số lượng người thực hiện ít, phải làm nhiều công việc theo nhiều mảng (full-stack).

5.3 Định hướng phát triển:

- Về ứng dụng:

o Phát triển ứng dụng chạy trên nền cà hai hệ điều hành IOS và Android

o Ứng dụng tương thích với thiết bị tốt hơn, hoạt động mượt mà hơn

o Các chức năng của ứng dụng liên kết với nhau tốt hơn

o Cơ sở dữ liệu đa dạng hơn

o Có thể dễ dàng tạo thêm các tài nguyên mask, filter, effect và upload thành của riêng mình thay vì dùng các ứng dụng mặc định.

o Phát triển lên website.

o Chia sẻ rộng rãi (facebook, messenger, instagram, twitter,….). - Về bản thân:

o Học hỏi thêm kiến thức về AI, AR, xử lí hình ảnh,..

o Học hỏi thêm các kiến thức về lập trình di động và web back-end để phục vụ cho mục đích phát triển đam mê của bản thân và phục vụ đất nước.

o Tìm tòi và học hỏi thêm các ngôn ngữ, các framework, các công nghệ mới

TÀI LIỆU THAM KHẢO 1. https://flutter.dev/docs/cookbook 2. https://github.com/codenameakshay/image-editor 3. https://flutter.dev/docs/cookbook/networking/fetch-data 4. https://flutter-examples.com/show-hide-widgets-in-flutter/ 5. https://pub.dev/packages/camera_deep_ar 6. https://www.youtube.com/watch?v=xs6lHOUrP0o

Kết quả thực hiện:

Sử dụng thư viện camera_deep_ar: