- vừa được xem lúc

Học lập trình Flutter phần 2(tiếp theo)

0 0 17

Người đăng: nam minh

Theo Viblo Asia

12. Học cách sử dụng các phương thức làm việc với dữ liệu từ các API sử dụng HTTP request và parse các trả về dạng JSON trong flutter

Trong Flutter, bạn có thể sử dụng thư viện http để gửi các yêu cầu HTTP và dart:convert để parse các dữ liệu trả về dạng JSON. Để sử dụng các thư viện này, bạn cần thêm các phụ thuộc vào file pubspec.yaml của dự án của bạn:

dependencies: http: ^0.12.2 convert: ^4.0.0

Sau đó, bạn có thể import các thư viện vào file dart của bạn:

import 'package:http/http.dart' as http;
import 'dart:convert';
Để gửi một yêu cầu HTTP, bạn có thể sử dụng phương thức get, post, put hoặc delete của đối tượng http.Client hoặc sử dụng http.Request
final response = await http.get('https://jsonplaceholder.typicode.com/todos/1');
if (response.statusCode == 200) { final data = json.decode(response.body); print(data);
} else { print('Request failed with status: ${response.statusCode}');
}

Sau đó bạn có thể sử dụng jsonDecode để convert trả về thành dạng Map hoặc jsonEncode để chuyển từ dạng Map thành json.

final jsonData = jsonDecode(response.body);
print(jsonData);

Lưu ý rằng, các yêu cầu HTTP trong Flutter được xử lý dựa trên Future, do đó bạn cần sử dụng từ khóa await trước khi gọi các phương thức này. Khi làm việc với các API sử dụng HTTP request trong Flutter, có thể cần thiết để truyền các tham số, header hoặc body trong yêu cầu. Bạn có thể thêm các tham số vào đường dẫn url, hoặc sử dụng Map để truyền các tham số vào body hoặc header của yêu cầu. Ví dụ về việc truyền tham số qua đường dẫn URL:

final response = await http.get('https://jsonplaceholder.typicode.com/todos?userId=1');

Ví dụ về việc truyền tham số qua header và body:

final response = await http.post( 'https://jsonplaceholder.typicode.com/todos', headers: {HttpHeaders.contentTypeHeader: 'application/json'}, body: json.encode({'title': 'New Todo', 'completed': false}),
);

Khi nhận được dữ liệu trả về từ một API, bạn có thể sử dụng các lớp đối tượng để parse dữ liệu JSON và chuyển nó thành đối tượng của ứng dụng của bạn. Ví dụ:

class Todo { final int id; final String title; final bool completed; Todo({this.id, this.title, this.completed}); factory Todo.fromJson(Map<String, dynamic> json) { return Todo( id: json['id'], title: json['title'], completed: json['completed'], ); }
} final jsonData = jsonDecode(response.body);
final todo = Todo.fromJson(jsonData);

Bạn có thể tham khảo các tài liệu về http package và dart:convert package trong Flutter để biết thêm chi tiết về cách sử dụng chúng để làm việc với các API sử dụng HTTP request và parse các dữ liệu trả về dạng JSON trong Flutter. Để làm việc với các yêu cầu HTTP Async, bạn có thể sử dụng package http và async/await. Để gửi một yêu cầu HTTP, bạn có thể sử dụng phương thức get, post, put hoặc delete của đối tượng http.Client hoặc sử dụng http.Request. Ví dụ:

final url = 'https://jsonplaceholder.typicode.com/todos';
final response = await http.get(url);
if (response.statusCode == 200) { final data = json.decode(response.body); print(data);
} else { print('Request failed with status: ${response.statusCode}');
}

Khi làm việc với các yêu cầu POST, PUT, DELETE bạn có thể sử dụng các phương thức tương tự với các tham số body hoặc header tương ứng. Ví dụ:

final url = 'https://jsonplaceholder.typicode.com/todos';
final response = await http.post(url, body: {"title":"my new Todo"});

Bạn cũng có thể sử dụng package dio thay vì http để làm việc với các request HTTP, điển hình như: cancel request, handle errors, interceptors, FormData, Request Cancellation, File downloading, timeout and much more. Có thể sử dụng package dio để làm việc với các request HTTP trong Flutter, để có thể sử dụng các tính năng như: cancel request, handle errors, interceptors, FormData, Request Cancellation, File downloading, timeout và nhiều hơn nữa. Ví dụ về việc sử dụng dio để gửi một yêu cầu GET:

Dio dio = new Dio();
Response response = await dio.get("https://jsonplaceholder.typicode.com/todos");
print(response.data);

Ví dụ về việc sử dụng dio để gửi một yêu cầu POST:

Dio dio = new Dio();
Response response = await dio.post("https://jsonplaceholder.typicode.com/todos", data: {"title": "my new Todo"});
print(response.data);

Các bạn có thể tìm hiểu thêm về dio package tại đây: https://pub.dev/packages/dio Chúng ta có rất nhiều cách để làm việc với API bằng cách gửi request HTTP và parse dữ liệu trả về dạng JSON trong Flutter, bạn có thể chọn phương pháp phù hợp nhất với yêu cầu của ứng dụng của bạn.

13. Tìm hiểu về cách sử dụng các database để lưu trữ dữ liệu trong Flutter, chẳng hạn như sử dụng SQLite hoặc Firebase

Trong Flutter, bạn có thể sử dụng nhiều loại cơ sở dữ liệu để lưu trữ dữ liệu của ứng dụng, chẳng hạn như SQLite hoặc Firebase.

SQLite là một cơ sở dữ liệu tích hợp trong thiết bị, có thể sử dụng để lưu trữ dữ liệu của ứng dụng mà không cần kết nối mạng. Để sử dụng SQLite trong Flutter, bạn có thể sử dụng package sqflite để thao tác với cơ sở dữ liệu.

Ví dụ về việc sử dụng sqflite để tạo một bảng và thêm dữ liệu:

import 'package:sqflite/sqflite.dart'; // Define the function
Future<void> insertTodo(Todo todo) async { final Database db = await database; await db.insert( 'todos', todo.toMap(), conflictAlgorithm: ConflictAlgorithm.replace, );
}

Firebase trong Flutter cần các bước sau để cài đặt và cấu hình:

  • Tạo một dự án Firebase trên trang web của Firebase và kết nối nó với ứng dụng Flutter của bạn.
  • Thêm thư viện firebase_core và firebase_database vào file pubspec.yaml của ứng dụng và chạy flutter pub get để cập nhật các thư viện.
  • Thêm file google-services.json (được tải về từ dự án Firebase) vào thư mục android/app của ứng dụng
  • Khai báo biến FirebaseDatabase và khởi tạo nó trong hàm main() của ứng dụng
final FirebaseDatabase database = FirebaseDatabase.instance;
  • Để thêm dữ liệu vào Firebase, bạn có thể sử dụng hàm set() hoặc push() trên một nút con của một nút cha đã được khai báo. Ví dụ, để thêm một phần tử vào một danh sách "todos"
database.reference().child("todos").push().set({"title": "New Todo", "completed": false});
  • Để lấy dữ liệu từ Firebase, bạn có thể sử dụng hàm once() hoặc onValue trên một nút con đã được khai báo.
database.reference().child("todos").once().then((DataSnapshot snapshot) { print(snapshot.value);
}); 
  • Để lắng nghe sự thay đổi trên Firebase, bạn có thể sử dụng hàm onValue
database.reference().child("todos").onValue.listen((Event event) { print(event.snapshot.value);
}); 

14. Học cách sử dụng các testing framework để đảm bảo rằng các phần của ứng dụng Flutter của bạn hoạt động một cách chính xác

Flutter cung cấp một số công cụ và thư viện hỗ trợ cho việc testing, bao gồm:

flutter_test: là một thư viện cung cấp các hàm hỗ trợ cho việc testing, bao gồm các hàm testWidgets(), pumpWidget(), find.text() và nhiều hơn nữa.

test: là một thư viện cung cấp các hàm hỗ trợ cho việc testing, bao gồm các hàm expect(), group() và nhiều hơn nữa.

mockito: là một thư viện hỗ trợ việc mocking, giúp chúng ta test các hàm hoặc class mà không cần sử dụng các thành phần thực sự.

Việc sử dụng các testing framework trong Flutter sẽ tùy thuộc vào yêu cầu của ứng dụng của bạn. Tuy nhiên, để bắt đầu, các bạn có thể sử dụng flutter_test để test các widget và test các hàm hoặc logic trong ứng dụng.

Ví dụ về việc sử dụng flutter_test để test một widget:

testWidgets('MyWidget test', (WidgetTester tester) async { // Build the widget await tester.pumpWidget(MyWidget(title: 'My Title')); // Find a Text widget with specific text final titleFinder = find.text('My Title'); // Check if the text widget is present in the widget tree expect(titleFinder, findsOneWidget);
}); 

Ví dụ về việc sử dụng test để test một hàm hoặc logic:

void main() { test('My function test', () { int result = myFunction(2, 3); expect(result, 6); });
} 

Sau khi viết các test cases, bạn có thể chạy chúng bằng cách sử dụng các công cụ command line như flutter test hoặc sử dụng công cụ đồ họa như IntelliJ hoặc Android Studio để chạy test và xem kết quả.

Flutter cũng có một công cụ gọi là flutter run --flavor test để chạy các test trên thiết bị hoặc máy ảo.

Ngoài việc chạy các test trong quá trình phát triển, cũng có thể sử dụng các công cụ kiểm thử tự động như Codemagic, TravisCI hoặc Jenkins để tự động chạy test khi có sự thay đổi trong mã nguồn và gửi kết quả cho nhóm phát triển.

Như vậy, việc sử dụng các testing framework sẽ giúp bạn tạo ra các test cases để kiểm tra các chức năng của ứng dụng và giúp bạn tự tin hơn trong việc phát triển và bảo trì ứng dụng.

Bình luận

Bài viết tương tự

- vừa được xem lúc

Học Flutter từ cơ bản đến nâng cao. Phần 1: Làm quen cô nàng Flutter

Lời mở đầu. Gần đây, Flutter nổi lên và được Google PR như một xu thế của lập trình di động vậy.

0 0 281

- vừa được xem lúc

Học Flutter từ cơ bản đến nâng cao. Phần 3: Lột trần cô nàng Flutter, BuildContext là gì?

Lời mở đầu. Màn làm quen cô nàng FLutter ở Phần 1 đã gieo rắc vào đầu chúng ta quá nhiều điều bí ẩn về nàng Flutter.

0 0 214

- vừa được xem lúc

Flutter Animation: Creating medium’s clap animation in flutte Part II

Trong phần 1 mình đã giới thiệu với các bạn cơ bản về Animation trong Flutter. Score Widget Size Animation.

0 0 64

- vừa được xem lúc

Flutter - GetX - Using GetConnect to handle API request (Part 4)

Giới thiệu. Xin chào các bạn, lại là mình với series về GetX và Flutter.

0 0 359

- vừa được xem lúc

StatefulWidget và StatelessWidget trong Flutter

I. Mở đầu. Khi các bạn build một ứng dụng với Flutter thì Widgets là thứ không thể thiếu đúng không ạ. Và 2 loại Widget không thể thiếu đó là StatefullWidget và StatelessWidget.

0 0 145

- vừa được xem lúc

Tìm hiểu về Riverpod - Provider nhưng không hắn :v

Trong Flutter có rất nhiều các quản lý state: Provider, Bloc, GetX, Redux,... khó mà nói cái nào tốt hơn cái nào. Tuy nhiên nếu bạn đã làm quen với Provider thì không ngại để tìm hiểu thêm về Riverpod. Một bản nâng cấp của Provider. Nếu bạn để ý thì cái tên "Riverpod" là các chữ cái của "Provider" đ

0 0 67