phát triển mạng xã hội từ thiện đa nền tảng dựa trên react native

Để đạt được những kết quả như vậy, chúng em xin chân thành cảm ơn khoa Công nghệ thông tin trường Đại học Sư phạm Kỹ thuật TP.HCM đã tạo điều kiện cho chúng em được học tập và nghiên cứu

GIỚI THIỆU ĐỀ TÀI

Tổng quan đề tài

Trong cuộc sống của chúng ta có rất nhiều hoàn cảnh khó khăn, những mảnh đời cần được giúp đỡ Ngày nay có các nhà hảo tâm mang tấm lòng yêu thương giúp đỡ những người có hoàn cảnh đó Hoạt động từ thiện ngày nay một trong những hành động tích cực và yêu thương người đang được lan rộng Cùng với quá trình toàn cầu hóa và sự phát triển của công nghệ thông tin, mạng internet trên thế giới và Việt Nam ngày càng phát triển mạnh mẽ Sự tham gia của các cá nhân trên mạng ngày càng tích cực; và nhu cầu chia sẻ thông tin, kết nối bạn bè là nhu cầu thiết yếu thúc đẩy sự ra đời và phát triển của các mạng xã hội Từ những yếu tố trên, nhu cầu nắm bắt những thông tin từ thiện mới nhất, chia sẻ sự yêu thương của các nhà hảo tâm ngày càng to lớn, hàng loạt những website, ứng dụng trực tuyến liên quan tới từ thiện được tạo ra.

Lý do chọn đề tài

Vừa qua, vào thời điểm dịch bệnh xảy ra lên đến đỉnh điểm, thời gian giãn cách xã hội kéo dài ở các thành phố lớn làm cho các cá nhân, tổ chức muốn đứng ra kêu gọi và triển khai từ thiện cũng trở nên khó khăn do những quy định gắt gao của Chỉ thị 16 Đứng trước những khó khăn trên, nhiều ứng dụng thiện nguyện ra đời nhằm giúp các cá nhân, tổ chức có thể làm từ thiện tại nhà Không chỉ mang đến cơ hội quyên góp tiền, các ứng dụng này đã phát triển với nhiều tính năng cùng các hình thức khác nhau để giúp đỡ những gia đình khó khăn, đồng hành cùng họ tìm thấy được những lạc quan và niềm tin để vững tâm vượt qua đại dịch

Không dừng lại ở đó, những phát triển công nghệ cũng đã được vận dụng trong nhiều ứng dụng thiện nguyện mang tính lâu dài, xây dựng nên nền tảng giúp truyền thống tương thân tương ái của dân tộc Việt Nam Trong tương lai, đây sẽ là tiền đề sẽ góp phần giữ gìn được vẻ đẹp vốn có của hoạt động từ thiện, đồng thời xóa bỏ mọi rào cản về địa lý hay cả những mặc cảm về tài chính mang lại cơ hội giúp đời, giúp người cho bất kỳ ai có lòng tốt

Tuy nhiên, dù đã có một số ứng dụng thiện nguyện, nhưng nhu cầu của các nhà hảo tâm vẫn rất cao và tính phân loại càng cần thiết Ứng dụng phải được xem như cầu nối giữa các nhà hảo tâm và người kêu gọi từ thiện, các nhà hảo tâm có thể dễ dàng gửi

11 những lời động viên cũng như theo dõi được diễn biến của các hoàn cảnh sau khi được giúp đỡ

Chính vì những lý do trên, chúng em quyết định chọn đề tài “Phát triển mạng xã hội từ thiện đa nền tảng dựa trên react native” để thực hiện.

Mục đích đề tài

Chúng em chọn đề tài này, với mục đích xây dựng một ứng dụng mạng xã hội từ thiện chia sẻ thông tin những hoàn cảnh khó khăn cần được giúp đỡ, cũng như tạo điều kiện để các nhà hảo tâm có thể làm từ thiện một cách dễ dàng, thoải mái nhất Ở đây, mọi người có thể trao đổi, bàn bạc với nhau để đi tới những quyết định thiện nguyện thống nhất Hơn nữa, với tính năng chia sẻ những hoàn cảnh khó khăn từ ứng dụng đến các nền tảng xã hội sẽ càng giúp lan tỏa và kết nối những tấm lòng hảo tâm một cách mạnh mẽ Đây cũng là một hành động thiết thực, một nghĩa cử cao đẹp mà cá nhân đều có thể làm trong thời từ thiện 4.0 ngày nay.

Đối tượng và phạm vi đề tài

Phạm vi nghiên cứu: các nền tảng mạng xã hội ở Việt Nam Đối tượng nghiên cứu: mạng xã hội từ thiện và tình hình phát triển mạng xã hội từ thiện tại Việt Nam Khách thể nghiên cứu là người dùng trên các nền tảng mạng xã hội ở Việt Nam

CƠ SỞ LÝ THUYẾT

React native là một công cụ giúp chúng ta xây dựng các ứng dụng trên môi trường native với lập trình đa nền tảng Nó là một framework mã nguồn mở do Facebook phát triển, cho phép bạn phát triển phần mềm trên điện thoại di động Android và IOS bằng Javascript React native tương tự như React, vì vậy chúng sử dụng các native components thay vì các web components Do đó, để hiểu rõ về cấu trúc của React native, chúng ta cần phải có các kiến thức cơ bản về các khái niệm cơ bản của React như là JSX, components, props hay là state

React Native được Facebook phát hành lần đầu tiên dưới dạng một dự án mã nguồn mở vào năm 2015

Chỉ trong 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 mobile development Việc phát triển React Native được sử dụng để cung cấp năng lượng cho một số ứng dụng di động hàng đầu thế giới, bao gồm Instagram, Facebook và Skype

Khi khởi chạy một React Native app, phần code JS sẽ được package (được gọi là

JS Bundle) và được tách riêng ra với phần Native Code (Android/IOS)

Lúc này, app sẽ được thực thi bởi 3 threads sau:

1 JS thread (Javascript thread/ Main thread): Được sử dụng bởi JS Engine, dùng để chạy JS bundle

2 Native/UI thread: Được sử dụng để khởi chạy các native module, các tiến trình render UI, animations, gesture handle,

3 Shadow thread: Được sử dụng để tính toán Layout của element trước khi render ra màn hình

Hình 2.1: Kiến trúc cũ React Native (nguồn: https://viblo.asia/p/mot-chut-ve-kien- truc-moi-cua-react-native-Az45bRXO5xY) Đối với kiến trúc cũ, ngay cả đối với một tương tác bất kì lớn nhỏ nào, nó sẽ phải đi qua tất cả các luồng trên, thực tế thì điều này không quá tệ nhưng performance hoặc đặc biệt là một vài frames sẽ bị drop vì responses không được đồng bộ với main thread trừ khi đây là những thao tác thực sự được đồng bộ hóa Vì thế, một kiến trúc React Native mới đã được đề ra

Bốn thành phần chính của kiến trúc mới:

- JSI: ở kiến trúc hiện tại, JS Thread giao tiếp với Native/UI Thread qua một thứ gọi là Bridge, dữ liệu được gửi từ thread này qua bridge sẽ được seralized thành JSON và được decode ở thread bên kia Có thể hiểu là JS thread không biết Native thread đang làm gì và ngược lại, tất cả đều phải đợi data từ Bridge trả về

- Fabric: là một rendering system, thứ sẽ thay thế cho UI manager hiện tại Nhờ JSI loại bỏ Bridge, nên các hành vi người dùng như cuộn, kéo thả, sẽ được Fabric ưu tiên thực hiện sync (Đồng bộ) trên JS thread hoặc Native thread, trong khi những tasks khác như gọi API sẽ được thực thi async (bất đồng bộ)

- Turbo Modules: Ở kiến trúc hiện tại, tất cả Native Modules được sử dụng bởi JavaScript (Bluetooth, Camera, Location, ) phải được khởi tạo trước khi app khởi động xong Có nghĩa là kể cả khi người dùng không có nhu cầu sử dụng những module này thì nó vẫn được khởi tạo lúc app khởi động Với Turbo

14 Modules, giờ đây các Native Modules được lazy-loaded (nghĩa là khi nào cần mới dùng tới) thay vì load tất cả trong khi khởi động

- CodeGen: JavaScript là một ngôn ngữ kiểu động (Dynamically typed language), còn JSI thì lại được viết bằng C++, một ngôn ngữ kiểu tĩnh (Statically Typed Language) Vấn đề giờ là cần phải đảm bảo giao tiếp thông suốt giữa cả hai Đó là lí do kiến trúc mới cũng bao gồm luôn một static type checker gọi là CodeGen CodeGen sẽ sử dụng TypeScript/Flow để generate nhiều native code ở build time hơn thay vì ở run time Tóm lại thì Codegen giúp: code size nhỏ hơn, thực thi nhanh hơn, ít lỗi hơn

JavaScript là ngôn ngữ lập trình phổ biến nhất trên thế giới trong suốt 20 năm qua Nó cũng là một trong số 3 ngôn ngữ chính của lập trình web:

1 HTML: Giúp bạn thêm nội dung cho trang web

2 CSS: Định dạng thiết kế, bố cục, phong cách, canh lề của trang web

3 JavaScript: Cải thiện cách hoạt động của trang web

JavaScript có thể học nhanh và dễ dàng áp dụng cho nhiều mục đích khác nhau, từ việc cải thiện tính năng của website đến việc chạy game và tạo phần mềm nền web Hơn nữa, có hàng ngàn mẫu template JavaScript và ứng dụng ngoài kia, nhờ vào sự cống hiến của cộng đồng, đặc biệt là Github

15 JavaScript có rất nhiều ưu điểm khiến nó vượt trội hơn so với các đối thủ, đặc biệt trong các trường hợp thực tế Sau đây chỉ là một số lợi ích của JavaScript:

1 Bạn không cần một compiler vì web browser có thể biên dịch nó bằng HTML;

2 Nó dễ học hơn các ngôn ngữ lập trình khác;

3 Lỗi dễ phát hiện hơn và vì vậy dễ sửa hơn;

4 Nó có thể được gắn trên một số element của trang web hoặc event của trang web như là thông qua click chuột hoặc di chuột tới;

5 JS hoạt động trên nhiều trình duyệt, nền tảng, vâng vâng;

6 Bạn có thể sử dụng JavaScript để kiểm tra input và giảm thiểu việc kiểm tra thủ công khi truy xuất qua database;

7 Nó giúp website tương tác tốt hơn với khách truy cập;

8 Nó nhanh hơn và nhẹ hơn các ngôn ngữ lập trình khác

Hình 2.2: JavaScript (nguồn: https://mona.media/thiet-ke-website-bang-ngon-ngu- javascript/)

Từ phiên bản 16.8 trở đi, chúng ta đã có thể sử dụng state trong stateless (functional) component, việc mà từ trước tới nay ta bắt buộc phải khai báo Class Cộng với việc không sử dụng Class kế thừa từ React Component nữa nên giờ đây kích thước bundle sẽ được giảm đáng kể bởi code sử dụng Hooks

16 Để có thể thay thế được Class thì React Hooks cung cấp cho chúng ta một bộ các built-in Hooks, giúp chúng ta sử dụng được các thành phần tạo nên React, có 2 loại built-in đó là: Basic Hooks và Additional Hooks

2.1.4.1 useState và useEffect useState nhận đầu vào là giá trị khởi tạo của 1 state và trả ra 1 mảng gồm có 2 phần tử, phần tử đầu tiên là state hiện tại, phần tử thứ 2 là 1 function dùng để update state Ví dụ:

Hình 2.3: Ví dụ useState useEffect cho phép ta có thể thực hiện công việc call API Để tránh việc hàm useEffect luôn chạy vào mỗi khi có thay đổi State thì ta có thể truyền vào tham số thứ 2 trong useEffect đó là 1 array, trong array này ta có thể truyền vào đó những giá trị mà useEffect sẽ subcribe nó, tức là chỉ khi nào những giá trị đó thay đổi thì hàm useEffect mới được thực thi Hoặc bạn cũng có thể truyền vào 1 array rỗng thì khi đó nó sẽ chỉ chạy 1 lần đầu tiên sau khi render

Thực tế khi sử dụng useState thì nó sẽ trả về 1 phiên bản đơn giản của useReducer, vậy nên chúng ta có thể coi useReducer như một phiên bản nâng cao hơn

17 dùng để thay thế cho việc sử dụng useState Nếu đã làm việc với React-Redux thì chắc hẳn bạn sẽ dễ dàng nhận ra flow quen thuộc này phải không nào Giống như reducer trong Redux thì useReducer cũng nhận vào một reducer dạng (state, action) và trả ra một newState Khi sử dụng chúng ta sẽ nhận được một cặp bao gồm current state và dispatch function

React Native

React native là một công cụ giúp chúng ta xây dựng các ứng dụng trên môi trường native với lập trình đa nền tảng Nó là một framework mã nguồn mở do Facebook phát triển, cho phép bạn phát triển phần mềm trên điện thoại di động Android và IOS bằng Javascript React native tương tự như React, vì vậy chúng sử dụng các native components thay vì các web components Do đó, để hiểu rõ về cấu trúc của React native, chúng ta cần phải có các kiến thức cơ bản về các khái niệm cơ bản của React như là JSX, components, props hay là state

React Native được Facebook phát hành lần đầu tiên dưới dạng một dự án mã nguồn mở vào năm 2015

Chỉ trong 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 mobile development Việc phát triển React Native được sử dụng để cung cấp năng lượng cho một số ứng dụng di động hàng đầu thế giới, bao gồm Instagram, Facebook và Skype

Khi khởi chạy một React Native app, phần code JS sẽ được package (được gọi là

JS Bundle) và được tách riêng ra với phần Native Code (Android/IOS)

Lúc này, app sẽ được thực thi bởi 3 threads sau:

1 JS thread (Javascript thread/ Main thread): Được sử dụng bởi JS Engine, dùng để chạy JS bundle

2 Native/UI thread: Được sử dụng để khởi chạy các native module, các tiến trình render UI, animations, gesture handle,

3 Shadow thread: Được sử dụng để tính toán Layout của element trước khi render ra màn hình

Hình 2.1: Kiến trúc cũ React Native (nguồn: https://viblo.asia/p/mot-chut-ve-kien- truc-moi-cua-react-native-Az45bRXO5xY) Đối với kiến trúc cũ, ngay cả đối với một tương tác bất kì lớn nhỏ nào, nó sẽ phải đi qua tất cả các luồng trên, thực tế thì điều này không quá tệ nhưng performance hoặc đặc biệt là một vài frames sẽ bị drop vì responses không được đồng bộ với main thread trừ khi đây là những thao tác thực sự được đồng bộ hóa Vì thế, một kiến trúc React Native mới đã được đề ra

Bốn thành phần chính của kiến trúc mới:

- JSI: ở kiến trúc hiện tại, JS Thread giao tiếp với Native/UI Thread qua một thứ gọi là Bridge, dữ liệu được gửi từ thread này qua bridge sẽ được seralized thành JSON và được decode ở thread bên kia Có thể hiểu là JS thread không biết Native thread đang làm gì và ngược lại, tất cả đều phải đợi data từ Bridge trả về

- Fabric: là một rendering system, thứ sẽ thay thế cho UI manager hiện tại Nhờ JSI loại bỏ Bridge, nên các hành vi người dùng như cuộn, kéo thả, sẽ được Fabric ưu tiên thực hiện sync (Đồng bộ) trên JS thread hoặc Native thread, trong khi những tasks khác như gọi API sẽ được thực thi async (bất đồng bộ)

- Turbo Modules: Ở kiến trúc hiện tại, tất cả Native Modules được sử dụng bởi JavaScript (Bluetooth, Camera, Location, ) phải được khởi tạo trước khi app khởi động xong Có nghĩa là kể cả khi người dùng không có nhu cầu sử dụng những module này thì nó vẫn được khởi tạo lúc app khởi động Với Turbo

14 Modules, giờ đây các Native Modules được lazy-loaded (nghĩa là khi nào cần mới dùng tới) thay vì load tất cả trong khi khởi động

- CodeGen: JavaScript là một ngôn ngữ kiểu động (Dynamically typed language), còn JSI thì lại được viết bằng C++, một ngôn ngữ kiểu tĩnh (Statically Typed Language) Vấn đề giờ là cần phải đảm bảo giao tiếp thông suốt giữa cả hai Đó là lí do kiến trúc mới cũng bao gồm luôn một static type checker gọi là CodeGen CodeGen sẽ sử dụng TypeScript/Flow để generate nhiều native code ở build time hơn thay vì ở run time Tóm lại thì Codegen giúp: code size nhỏ hơn, thực thi nhanh hơn, ít lỗi hơn

JavaScript là ngôn ngữ lập trình phổ biến nhất trên thế giới trong suốt 20 năm qua Nó cũng là một trong số 3 ngôn ngữ chính của lập trình web:

1 HTML: Giúp bạn thêm nội dung cho trang web

2 CSS: Định dạng thiết kế, bố cục, phong cách, canh lề của trang web

3 JavaScript: Cải thiện cách hoạt động của trang web

JavaScript có thể học nhanh và dễ dàng áp dụng cho nhiều mục đích khác nhau, từ việc cải thiện tính năng của website đến việc chạy game và tạo phần mềm nền web Hơn nữa, có hàng ngàn mẫu template JavaScript và ứng dụng ngoài kia, nhờ vào sự cống hiến của cộng đồng, đặc biệt là Github

15 JavaScript có rất nhiều ưu điểm khiến nó vượt trội hơn so với các đối thủ, đặc biệt trong các trường hợp thực tế Sau đây chỉ là một số lợi ích của JavaScript:

1 Bạn không cần một compiler vì web browser có thể biên dịch nó bằng HTML;

2 Nó dễ học hơn các ngôn ngữ lập trình khác;

3 Lỗi dễ phát hiện hơn và vì vậy dễ sửa hơn;

4 Nó có thể được gắn trên một số element của trang web hoặc event của trang web như là thông qua click chuột hoặc di chuột tới;

5 JS hoạt động trên nhiều trình duyệt, nền tảng, vâng vâng;

6 Bạn có thể sử dụng JavaScript để kiểm tra input và giảm thiểu việc kiểm tra thủ công khi truy xuất qua database;

7 Nó giúp website tương tác tốt hơn với khách truy cập;

8 Nó nhanh hơn và nhẹ hơn các ngôn ngữ lập trình khác

Hình 2.2: JavaScript (nguồn: https://mona.media/thiet-ke-website-bang-ngon-ngu- javascript/)

Từ phiên bản 16.8 trở đi, chúng ta đã có thể sử dụng state trong stateless (functional) component, việc mà từ trước tới nay ta bắt buộc phải khai báo Class Cộng với việc không sử dụng Class kế thừa từ React Component nữa nên giờ đây kích thước bundle sẽ được giảm đáng kể bởi code sử dụng Hooks

16 Để có thể thay thế được Class thì React Hooks cung cấp cho chúng ta một bộ các built-in Hooks, giúp chúng ta sử dụng được các thành phần tạo nên React, có 2 loại built-in đó là: Basic Hooks và Additional Hooks

2.1.4.1 useState và useEffect useState nhận đầu vào là giá trị khởi tạo của 1 state và trả ra 1 mảng gồm có 2 phần tử, phần tử đầu tiên là state hiện tại, phần tử thứ 2 là 1 function dùng để update state Ví dụ:

Hình 2.3: Ví dụ useState useEffect cho phép ta có thể thực hiện công việc call API Để tránh việc hàm useEffect luôn chạy vào mỗi khi có thay đổi State thì ta có thể truyền vào tham số thứ 2 trong useEffect đó là 1 array, trong array này ta có thể truyền vào đó những giá trị mà useEffect sẽ subcribe nó, tức là chỉ khi nào những giá trị đó thay đổi thì hàm useEffect mới được thực thi Hoặc bạn cũng có thể truyền vào 1 array rỗng thì khi đó nó sẽ chỉ chạy 1 lần đầu tiên sau khi render

Thực tế khi sử dụng useState thì nó sẽ trả về 1 phiên bản đơn giản của useReducer, vậy nên chúng ta có thể coi useReducer như một phiên bản nâng cao hơn

17 dùng để thay thế cho việc sử dụng useState Nếu đã làm việc với React-Redux thì chắc hẳn bạn sẽ dễ dàng nhận ra flow quen thuộc này phải không nào Giống như reducer trong Redux thì useReducer cũng nhận vào một reducer dạng (state, action) và trả ra một newState Khi sử dụng chúng ta sẽ nhận được một cặp bao gồm current state và dispatch function

NET Core

ASP.NET Core là một web framework mã nguồn và được tối ưu hóa cho cloud để phát triển các ứng dụng web chạy trên nhiều nền tảng như Windows, Linux và Mac Hiện tại, nó bao gồm MVC framework được kết hợp các tính năng của MVC và Web API thành một web framework duy nhất

 Các ứng dụng ASP.NET Core có thể chạy trên NET Core hoặc trên NET Framework hoàn chỉnh

 Nó đã được thiết kế để cung cấp một framework tối ưu cho các ứng dụng để triển khai tới cloud hoặc chạy on-premises

 Nó bao gồm những modular với các thành phần tối thiểu, do đó bạn giữ được tính linh hoạt trong quá trình xây dựng các giải pháp của mình

 Có thể phát triển và chạy các ứng dụng đa nền tảng từ ASP.NET Core trên Windows, Mac và Linux Nó cũng triển khai đặc điểm của NET Standard Ưu điểm NET core

 ASP.NET Core có một số thay đổi kiến trúc dẫn đến modular framework nhỏ hơn

 ASP.NET Core không còn dựa trên System.Web.dll Nó dựa trên một tập hợp nhiều yếu tố của Nuget packages

 Điều này cho phép bạn tối ưu ứng dụng của mình chỉ cần những NuGet packages cần thiết

 Lợi ích của diện tích bề mặt ứng dụng nhỏ hơn thì bảo mật chặt chẽ hơn, giảm dịch vụ, cải thiện hiệu suất và giảm chi phí

Với ASP.NET Core, bạn có thể nhận được các cải tiến sau:

 Xây dựng và chạy các ứng dụng ASP.NET Core đa nền tảng trên Windows, Mac và Linux

 Được xây dựng trên NET Core, hỗ trợ side-by-side app versioning

 Công cụ mới giúp đơn giản hóa việc phát triển web hiện đại

 Liên kết đơn các web stack như Web UI và API Web

 Cấu hình dựa trên môi trường đám mây sẵn có

 Được xây dựng dựa trên cho DI (Dependency Injection)

 Tag Helpers làm cho các Razor markup trở nên tự nhiên hơn với HTML

 Có khả năng host trên IIS hoặc self-host

Khi xây dựng Web API trong Asp.net Core, về cơ bản tiếp tục sử dụng MVC framework với một số thay đổi về kỹ thuật Điều này có nghĩa là khi xây dựng Web API, xây dựng hoặc sử dụng các thành phần Model như trong ứng dụng MVC Controller trong Web API chính là Controller của MVC

Do vậy tiếp tục làm việc với những khái niệm quen thuộc từ MVC như action, routing, model binding, model validation, view model

Có thể hình dung rằng thành phần View của MVC trong Web API giờ không còn dành cho người dùng (user-friendly) nữa mà là dành cho chương trình khác sử dụng (machine-friendly)

Như vậy, Web API trong Asp.net Core không phải là một framework riêng rẽ Ứng dụng Web API có thể triển khai song song bên cạnh ứng dụng MVC hoặc có thể xây dựng hoàn toàn độc lập

Tuy nhiên cần lưu ý, mỗi loại client có cách khác nhau để sử dụng dịch vụ do Web API cung cấp

Entity Framework ra đời nhằm hỗ trợ sự tương tác giữa các ứng dụng trên nền tảng NET với các cơ sở dữ liệu quan hệ Hay, Entity Framework chính là công cụ giúp ánh xạ giữa các đối tượng trong ứng dụng, phần mềm với các bảng của một cơ sở dữ liệu quan hệ

Hình 2.12: Entity Framework (nguồn: https://chiasekinang.com/entity-framework-la- gi/)

RESTful API là một tiêu chuẩn dùng trong việc thiết kế API cho các ứng dụng web (thiết kế Web services) để tiện cho việc quản lý các resource Nó chú trọng vào tài nguyên hệ thống (tệp văn bản, ảnh, âm thanh, video, hoặc dữ liệu động…), bao gồm các trạng thái tài nguyên được định dạng và được truyền tải qua HTTP Ở đây ta sử dụng .NET để tạo rest API

Hình 2.13: REST APIs (nguồn: https://topdev.vn/blog/restful-api-la-gi/)

REST hoạt động chủ yếu dựa vào giao thức HTTP Các hoạt động cơ bản nêu trên sẽ sử dụng những phương thức HTTP riêng

GET (SELECT): Trả về một Resource hoặc một danh sách Resource

POST (CREATE): Tạo mới một Resource

PUT (UPDATE): Cập nhật thông tin cho Resource

DELETE (DELETE): Xoá một Resource

Những phương thức hay hoạt động này thường được gọi là CRUD tương ứng với Create, Read, Update, Delete – Tạo, Đọc, Sửa, Xóa

Khi chúng ta request một API nào đó thường thì sẽ có vài status code để nhận biết sau:

200 OK – Trả về thành công cho những phương thức GET, PUT, PATCH hoặc DELETE

201 Created – Trả về khi một Resource vừa được tạo thành công

204 No Content – Trả về khi Resource xoá thành công

304 Not Modified – Client có thể sử dụng dữ liệu cache

400 Bad Request – Request không hợp lệ

401 Unauthorized – Request cần có auth

403 Forbidden – bị từ chối không cho phép

404 Not Found – Không tìm thấy resource từ URI

405 Method Not Allowed – Phương thức không cho phép với user hiện tại

410 Gone – Resource không còn tồn tại, Version cũ đã không còn hỗ trợ

415 Unsupported Media Type – Không hỗ trợ kiểu Resource này

422 Unprocessable Entity – Dữ liệu không được xác thực

429 Too Many Requests – Request bị từ chối do bị giới hạn.

Firebase

Firebase là dịch vụ cơ sở dữ liệu hoạt động trên nền tảng đám mây – cloud Kèm theo đó là hệ thống máy chủ cực kỳ mạnh mẽ của Google Chức năng chính là giúp người dùng lập trình ứng dụng bằng cách đơn giản hóa các thao tác với cơ sở dữ liệu

Cụ thể là những giao diện lập trình ứng dụng API đơn giản Mục đích nhằm tăng số lượng người dùng và thu lại nhiều lợi nhuận hơn Đặc biệt, còn là dịch vụ đa năng và bảo mật cực tốt

Có các loại: Realtime, Authen, Storage

Sau quá trình sử dụng, cùng với những đánh giá của người dùng khác, tôi đã tổng hợp 10 ưu điểm nổi bật của Firebase:

 Tạo tài khoản và sử dụng dễ dàng

 Tốc độ phát triển nhanh

 Nhiều dịch vụ trong một nền tảng

 Được cung cấp bởi Google

 Tập trung vào phát triển giao diện người dùng

 Firebase không có máy chủ

 Tạo lưu lượng truy cập

Hình 2.14: Firebase (nguồn: https://fptcloud.com/firebase-la-gi/)

Python Flask

Flask là một web framework, nó là một Python module giúp dễ dàng phát triển các ứng dụng web Nó có tính mở rộng và là một microframework không bao gồm ORM (Object Relational Manager) hoặc các tính năng tương tự Nó được phát triển bởi Armin Ronacher, người dẫn đầu một nhóm những người đam mê Python quốc tế có tên là Poocco Flask dựa trên bộ công cụ Werkzeg WSGI và template engine Jinja2

Flask thường được coi là một microframework Nó được thiết kế để giữ cho cốt lõi của ứng dụng đơn giản và có thể mở rộng (scalable) Thay vì sử dụng lớp trừu tượng (abstraction layer) để hỗ trợ cơ sở dữ liệu, Flask hỗ trợ các phần extensions để thêm các khả năng như vậy vào ứng dụng

Hình 2.15: Python Flask (nguồn: https://nq.com.vn/flask-python-la-gi-tinh-nang-co- ban-va-ly-do-vi-sao-nen-su-dung/)

27 Flask là một trong những web framework phổ biến nhất, vì thế nó luôn được cập nhật và hiện đại Chúng ta có thể dễ dàng mở rộng chức năng và mở rộng quy mô cho các ứng dụng phức tạp Ở trong project này, chúng em sử dụng Python Flask để viết các api bài báo cho ứng dụng Cụ thể là thư viện Newspaper3k Thư viện này giúp tải toàn bộ những bài báo có trong một url xuống và sử dụng Ví dụ:

(nguồn:https://newspaper.readthedocs.io/en/latest/)

Giới thiệu hệ thống

Mạng xã hội từ thiện là nơi tổng hợp, cung cấp các thông tin từ thiện từ nhiều nguồn báo khác nhau, mọi người có thể đăng bài, thảo luận nhằm mục đích tạo nên một cộng đồng chung một chí hướng từ thiện, mạng xã hội từ thiện cũng cung cấp cho người dùng đấu giá để kêu gọi quyên góp hay tổ chức từ thiện một cách minh bạch và dễ dàng, app cung cấp thông tin, nơi các mạnh thường quân biết chỗ để cho, các người gặp khó khăn biết chỗ để lấy App nhằm mục đích xây dựng khối cộng đồng từ thiện thể hiện qua các bài đăng có ý nghĩa và giá trị.

Phân tích hệ thống

Hệ thống chỉ có tác nhân người dùng sử dụng

3.2.2 Biểu đồ Use Case của hệ thống Ứng dụng chủ yếu phục vụ cho người dùng nên ở trong hệ thống chỉ có tác nhân người dùng, ở hệ thống người dùng có đầy đủ các chức năng quan trọng để sử dụng ứng dụng một cách thuận tiện nhất

 Mô tả: use case này cho phép người dùng đăng nhập vào ứng dụng

 Tiền điều kiện: không có

 Hậu điều kiện: không có

1 Người dùng nhập email và password vào form Login và click vào nút Login

2 Hệ thống kiểm tra thông tin đăng nhập và thông báo đăng nhập thành công hoặc thất bại

3 Đăng nhập thành công hệ thống sẽ đưa vào màn hình chính

 Luồng thay thế: không có

 Luồng ngoại lệ: không có

3.2.3.2 Use case “Đăng bài viết”

 Mô tả: use case này cho phép người dùng đăng bài viết

 Tiền điều kiện: người dùng đã đăng nhập thành công

 Hậu điều kiện: không có

1 Người dùng click vào đăng bài

2 Hoàn thành nội dung cần đăng

 Luồng thay thế: không có

 Luồng ngoại lệ: không có

3.2.3.3 Use case “Bình luận bài viết”

 Mô tả: use case này cho phép người dùng bình luận một bài viết

 Tiền điều kiện: người dùng đã đăng nhập thành công

 Hậu điều kiện: không có

1 Người dùng click phần bình luận của bài viết

2 Hoàn thành nội dung cần bình luận

 Luồng thay thế: không có

 Luồng ngoại lệ: không có

3.2.3.4 Use case “Thích bài viết”

 Mô tả: use case này cho phép người dùng thích một bài viết

 Tiền điều kiện: người dùng đã đăng nhập thành công

 Hậu điều kiện: không có

1 Người dùng click vào nút like của bài viết

2 Hệ thống cập nhật số lượt thích của bài viết

 Luồng thay thế: không có

 Luồng ngoại lệ: không có

3.2.3.5 Use case “Chỉnh sửa thông tin cá nhân”

 Mô tả: use case này cho phép người dùng chỉnh sửa thông tin cá nhân của mình

 Tiền điều kiện: người dùng đã đăng nhập thành công

 Hậu điều kiện: không có

1 Người dùng click vào tab thông tin cá nhân

2 Click vào nút “Edit” và tiến hành chỉnh sửa thông tin

 Luồng thay thế: không có

 Luồng ngoại lệ: không có

3.2.3.6 Use case “Đọc tin từ thiện”

 Mô tả: use case này cho phép người dùng đọc các tin tức từ thiện mà mình quan tâm

 Tiền điều kiện: người dùng đã đăng nhập thành công

 Hậu điều kiện: không có

1 Người dùng click vào tab trang chủ

2 Click vào nút bài viết từ thiện mình muốn đọc

 Luồng thay thế: không có

 Luồng ngoại lệ: không có

3.2.3.7 Use case “Gắn cờ bài viết”

 Mô tả: use case này cho phép người dùng gắn cờ bài viết khiến mình khó chịu

 Tiền điều kiện: người dùng đã đăng nhập thành công

 Hậu điều kiện: không có

1 Người dùng click vào biểu tượng 3 chấm bên phải bài viết muốn gắn cờ

2 Tiến hành gắn cờ bài viết

 Luồng thay thế: không có

 Luồng ngoại lệ: không có

 Mô tả: use case này cho phép người dùng tiến hành đăng ký tài khoản mới

 Tiền điều kiện: không có

 Hậu điều kiện: không có

1 Người dùng click vào nút “Register”

2 Tiến hành nhập đầy đủ thông tin

 Luồng thay thế: không có

 Luồng ngoại lệ: không có

 Mô tả: use case này cho phép người đăng xuất tài khoản hiện tại của mình

 Tiền điều kiện: người dùng đã đăng nhập

 Hậu điều kiện: không có

1 Người dùng click vào tab thông tin cá nhân

 Luồng thay thế: không có

 Luồng ngoại lệ: không có

3.2.3.10 Use case “Chỉnh sửa bài viết”

 Mô tả: use case này cho phép người dùng chỉnh sửa bài viết của mình

 Tiền điều kiện: người dùng đã đăng nhập thành công

 Hậu điều kiện: không có

1 Người dùng click vào biểu tượng 3 chấm bên phải bài viết muốn gắn cờ

2 Chọn chỉnh sửa bài viết và tiến hành chỉnh sửa

 Luồng thay thế: không có

 Luồng ngoại lệ: không có

Activity Diagram cho chức năng đấu giá từ thiện

Menu danh mục đấu giá:

Hình 3.2: Activity Diagram menu danh mục đấu giá

Chức năng chi tiết đấu giá

Hình 3.3: Activity Diagram chức năng chi tiết đấu giá

3.2.5 Lược đồ cơ sở dữ liệu

3.2.5.1 Ảnh lược đồ cơ sở dữ liệu

Hình 3.4: Lược đồ cơ sở dữ liệu

3.2.5.2 Mô tả lược đồ cơ sở dữ liệu

Cột Kiểu Ràng buộc Mô tả uid varchar(100) Primary key, not null Id của user firstname varchar(50) Tên của user lastname varchar(50) Họ của user mobile varchar(15) Số điện thoại của user email varchar(50) Email của user avatar text Ảnh đại diện của user

Cột Kiểu Ràng buộc Mô tả postid int(11) Primary key, not null Id của bài viết uid varchar(100) Foreign key, not null Id của user postcontent text Nội dung của bài viết picture text Ảnh bài viết likecount bigint(20) Số lượt thích của bài viết createdate timestamp Thời điểm tạo bài viết updatedate timestamp Thời điểm cập nhật bài viết status int(11) Trạng thái bài viết

Cột Kiểu Ràng buộc Mô tả commentid int(11) Primary key, not null

Id của bình luận postid int(11) Foreign key, not null Id của bài viết commentcontent text Nội dung của bình luận createdate timestamp Thời điểm đăng bình luận updatedate timestamp Thời điểm cập nhật bình luận commentpicture varchar(100) Ảnh của bình luận like int(11) Số lượt like uid varchar(100) Id của user

Cột Kiểu Ràng buộc Mô tả uid varchar(100) Not null Id của user postid int(11) Not null Id của bài viết

Cột Kiểu Ràng buộc Mô tả uid varchar(100) Not null Id của user postid int(11) Not null Id của bài viết status int(11) Trạng thái bài đấu giá

Cột Kiểu Ràng buộc Mô tả mcid int(11) Primary Key,

Id của minh chứng postid int(11) Not null Id của bài viết uid varchar(100) Id của user postcontent text Nội dung bài viết picture text Ảnh

Cột Kiểu Ràng buộc Mô tả historyid int(11) Primary Key,

Id của minh chứng userwin varchar(200) Id của user mới userold varchar(200) Id của user cũ topbid float Số tiền đấu giá dateclose timestamp Thời điểm đóng đấu giá postid int(11) Not null Id của bài viết

Cột Kiểu Ràng buộc Mô tả donateid int(11) Primary Key,

Id buổi quyên góp createdate timestamp Not null Thời gian ghi nhận payment float Tổng số tiền quyên góp postid int(11) Id bài viết status int(11) Trạng thái quyên góp topdonate varchar(100) User quyên góp nhiều nhất

Cột Kiểu Ràng buộc Mô tả donatedetailid int(11) Primary Key,

Id chi tiết lượt quyên góp createdate timestamp Not null Thời gian ghi nhận payment float Tổng số tiền đã quyên góp postid int(11) Id bài viết uid varchar(100) User quyên góp

3.2.5.3 Lược đồ cơ sở dữ liệu của api các bài báo Ảnh lược đồ cơ sở dữ liệu:

Hình 3.5: Lược đồ cơ sở dữ liệu api bài báo

Mô tả lược đồ cơ sở dữ liệu:

Cột Kiểu Ràng buộc Mô tả id int(11) Not null Id của user name varchar(50) Not null Id của bài viết url varchar(255) Trạng thái bài đấu giá

3.2.6 Danh sách api mạng xã hội từ thiện

Các tính năng đã phát triển

3.3.1 Login với google và user

Thông qua bảo mật chứng thực firebase, người dùng đăng nhập bằng username hoặc password thiết lập hoặc email cá nhân của mình

Giao diện đăng nhập chính

Hình 3.6: Giao diện đăng nhập chính Đăng ký tài khoản, người dùng nhập thông tin tương ứng để tạo tài khoản đăng nhập

Hình 3.7: Đăng ký tài khoản

3.3.2 Trích dẫn tin tức từ nhiều nguồn

Khi đăng nhập thành công, người dùng sẽ vào giao diện chính, đã có sẵn chức năng lưu thông tin đăng nhập trên thiết bị, người dùng không cần phải đăng nhập mỗi khi vào app Giao diện chính là giao diện tin tức từ thiện, nơi người dùng có thể xem được thông tin được trích dẫn từ nhiều nguồn báo khác nhau

Hình 3.8: Màn hình tin tức từ thiện

3.3.3 Chi tiết từng bài viết

Hình 3.9: Chi tiết bài viết

Người dùng đăng bài viết lên news feed, cộng đồng từ thiện sẽ thấy bài viết

Danh sách bài đăng của mọi user dùng ứng dụng, để đăng, chia sẻ thông tin từ thiện Mọi người có thể, like, comment bài viết

Hình 3.11: Danh sách bài đăng

Người dùng có thế comment bài viết, chỉnh sửa hoặc xóa comment

Chủ bài viết có quyền xóa bài đăng, chỉnh sửa bài đăng cá nhân, và bất chức năng đấu giá

Hình 3.13: Chỉnh sửa, xóa, bật đấu giá

Hình 3.14: Gắn cờ nội dung gây khó chịu

Nếu không phải người đăng bài post, người dùng có quyền gắn cờ các bài viết họ cảm thấy khó chịu, hệ thống sẽ tự động xóa bài post do có quá nhiều người gắn cờ bài viết

3.3.7 Danh mục đấu giá bài đăng

Người dùng muốn yêu cầu đấu giá bài đăng nhấn icon hình “tờ tiền” icon cuối cùng sau like và comment

Hình 3.15: Yêu cầu đấu giá bài đăng

Nếu là chủ sở hữu bài viết bạn không thể tự yêu cầu đấu giá bài đăng

Hình 3.16: Cảnh báo không thể đấu giá

Khi yêu cầu đấu giá 1 bài post, nếu chủ sở hữu bài post chưa bật tính năng đấu giá thì người dùng vào danh mục đấu giá, vào tab yêu cầu để xem danh sách hàng đợi những bài viết mà gửi yêu cầu đấu giá

Hình 3.17: Danh sách hàng đợi những bài viết yêu cầu đánh giá

Nếu là chủ sở hữu bài post, khi thấy có yêu cầu người dùng muốn đấu giá bài viết, có thể bật tính năng đấu giá bài viết

Hình 3.18: Bật đấu giá bài viết

Nếu chưa bật chức năng này, mà có người muốn đấu giá, vào tab được yêu cầu ở danh mục đấu giá để xem bài viết được gửi yêu cầu đấu giá, từ màn hình này có thể bật đấu giá theo mong muốn của các yêu cầu gửi tới

55 Bạn có thể tắt hoặc bật đấu giá bài viết ở tab được yêu cầu

Nếu bài viết được chủ sở hữu bật chức năng đấu giá, sẽ được di chuyển qua hàng đợi ở tab đấu giá ở danh mục đấu giá

Muốn tham gia đấu giá người dùng click vào nút tham gia đấu giá Màn hình đấu giá với thông tin chủ bài viết, mã số bài đầu giá, tổng số tiền đã đấu giá

Hình 3.21: Màn hình đấu giá

Click vào đặt giá, để đặt giá mong muốn

Hình 3.22: Nhập số tiền đặt giá

Số tiền hiện tại đang là 2 vnd, nếu nhập số tiền nhỏ hơn 2 thì không đúng với tiêu chí đấu giá, app sẽ báo lỗi, nếu nhập số tiền lớn hơn số tiền user hiển thị ở top đặt giá, sẽ đặt thành công và đứng đầu top đặt giá Nếu nhập 1 VND:

Hình 3.23: Nhập số tiền đấu giá nhỏ hơn hiện tại

Nếu nhập 3 VND, show thông báo và leo lên dẫn đầu đúng với tiêu chí 1 cuộc đấu giá

Hình 3.24: Nhập số tiền lớn hơn số tiền hiện tại

Chức năng danh sách trong đấu giá hiển thị toàn bộ lịch sử các user đã tham gia cuộc đấu giá Hiển thị số tiền và thời gian thật tương ứng

Hình 3.25: Màn hình thông tin user tham gia đấu giá

Nếu người dùng muốn xem lịch sử của cá nhân đã đặt giá như thế nào Xem ở chức năng lịch sử

Hình 3.26: Lịch sử đấu giá của user

Chức năng tiếp theo là chức năng tự động đấu giá, khi người dùng bật chức năng này, giá sẽ được đặt dựa trên công thức = tiền đã nhập + số tiền cao nhất tới hiện tại

Hình 3.27: Tự động đấu giá

Nhập số tiền tự động thành công, nút tự động sẽ luôn bật, có thể tắt nếu không muốn app tự động đặt nữa

Hình 3.28: Tắt tự động đấu giá

Ví dụ mức giá tự động đặt bạn nhập là 2 vnd, hệ thống sẽ tự nhận diện được số tiền mà user khác đặt giá thành công và cộng thêm số tiền tự động đặt

Hình 3.29: Ví dụ đấu giá tự động

Nếu là chủ bài viết, có thể kết thúc cuộc đấu giá với giá mong muốn

Hình 3.30: Kết thúc đấu giá

Hình 3.31: Thông báo xác nhận kết thúc đấu giá

Nếu không phải chủ bài viết và là người thắng cuộc sẽ thấy được thông tin số điện thoại để liên lạc trao đổi với chủ bài viết

Hình 3.32: Trao đổi, liên lạc với chủ bài viết

Minh chứng có 2 chiều, với phía người thắng cuộc bắt buộc phải gửi minh chứng (ảnh, thông tin, số điện thoại, tài khoản ngân hàng, để nhằm mục đích nâng cao việc từ thiện, hạn chế trục lợi cá nhân) Màn hình gửi minh chứng thành công, có thể chỉnh sửa minh chứng trước khi chủ bài viết chuyển nhượng

Hình 3.33: Màn hình đã gửi minh chứng

Màn hình của chủ post lục này sẽ thấy được thông tin minh chứng

Hình 3.34: Màn hình minh chứng chủ bài viết thấy

Nếu đã có minh chứng từ người thắng cuộc, chủ post có thể chuyển nhượng bài viết

Hình 3.35: Màn hình xác nhận chuyển nhượng bài viết

Chuyển nhượng thành công khi có minh chứng

Hình 3.36: Màn hình chuyển nhượng thành công khi có minh chứng

Chuyển nhượng thất bại khi không có minh chứng

Hình 3.37: Màn hình chuyển nhượng thất bại khi không có minh chứng

Lúc này ở hàng chờ tab thành công bên danh mục đấu giá sẽ hiển thị số tiền đã quyên góp, ghi nhận lịch sử

Hình 3.38: Màn hình những bài viết đấu giá thành công

Thông tin chủ cũ để xem được chủ cũ của bài viết Lúc này sẽ hiển thị toàn bộ thông tin của chủ cũ bài viết, để minh bạch hơn trong từ thiện đấu giá

Hình 3.39: Thông tin chủ cũ bài viết

Lúc này ở newfeed sẽ cập nhật bài viết đã được nhượng qua người thắng cuộc đi kèm minh chứng, nếu như minh chứng không rõ ràng, cộng đồng có thể cùng nhau gắn cờ bài viết để tránh kêu gọi quyên góp để trục lợi cho bản thân

Hình 3.40: Bài viết được cập nhật ở newfeed

3.3.8 Màn hình thông báo center

Gửi notify thiết bị, thông báo thích, đấu giá bài viết của bản thân

Hình 3.41: Màn hình thông báo của user

3.3.9 Màn hình thông tin Account, User Ở đây người dùng có thể chỉnh sửa thông tin cá nhân, danh sách bài đăng cá nhân và đăng xuất khỏi tài khoản

Hình 3.42: Màn hình thông tin account, user

Nhằm mục đích quyên góp tiền từ thiện thêm minh bạch, người dùng có thể bật chức năng quyên góp từ bài viết của họ để kêu gọi từ thiện

Hình 3.43: Màn hình bật quyên góp

81 Sau khi bật chức năng quyên góp, mọi người click vào bài post để xem buổi kêu gọi từ thiện diễn ra thế nào Mỗi lần kêu gọi cung cấp định danh của 1 ví chung không của riêng cá nhân nào, nhằm mục đích minh bạch và tránh trục lợi, ví này sẽ do quản trị viên quản lý khi có giấy phép đủ cơ sở để ủy quyền từ nhà nước hoặc bên thứ 3 có đủ uy tín như công an hoặc các ngân hàng lớn Điều này giúp phần nào giảm thiểu tối đa việc trục lợi của một số tổ chức hay thành phần cá nhân Các thông tin chính như ID bài viết hay còn gọi là ID ví, mỗi bài viết khi bật chức năng quyên góp đều thuộc quản lý 1 ví riêng, tổng số tiền quyên góp và các tính năng như xem lịch sử của cộng đồng, lịch sử cá nhân hay chức năng đặt tiền để quyên góp, ngoài ra chủ sở hữu bài post có toàn quyền kết thúc 1 buổi kêu gọi từ thiện khi cảm thấy số tiền đã đủ lớn

Hình 3.44: Màn hình sau khi bật quyên góp

82 Đầu tiên là chức năng đặt giá tiền quyên góp, ấn vào Đặt giá để tiến hành nhập mốc tiền muốn quyên góp

Hình 3.45: Màn hình đặt mốc tiền quyên góp Ấn đặt tiền để tiến hành đặt tiền, hệ thống sẽ tự động liên kết với paypal (ví điện tử toàn cầu với độ bảo mật và uy tín rất lớn) Số tiền sẽ tương ứng với số tiền người dùng đặt

Hình 3.46: Màn hình thanh toán bằng PayPal Ấn Continue để hệ thống tiếp tục thanh toán

Hình 3.47: Màn hình đang xử lý

Kết luận

Tụi em đã học được các kiến thức tổ chức cấu trúc dữ liệu, bảo mật người dùng, login qua bên thứ 3, thao tác với file và multiple files, cách triển khai backend và frontend, học hỏi được nhiều kiến thức lập trình về React Native và Asp.Net Core, tối ưu tốc độ load dữ liệu, thao tác live data và nhiều thứ khác

Qua đề tài lần này tụi em cũng rút ra được những kinh nghiệm về cách làm việc nhóm cần được tối ưu hơn, hoàn thiện một sản phẩm ở mức độ cao, cách sắp xếp các task đúng thời gian hoàn thành Ưu điểm: cơ bản dễ sử dụng, là nơi cung cấp những thông tin từ thiện từ nhiều nguồn báo ở Việt Nam (báo thanh niên, báo từ thiện, báo công an, …), một mạng xã hội cho phép người dùng chia sẻ thông tin, kêu gọi từ thiện với minh chứng và đấu giá minh bạch, người cho biết chỗ để cho, người cần lấy biết chỗ để lấy Là nơi quyên góp cho mọi người tránh việc trục lợi cá nhân do có một ví đại diện

Nhược điểm: Còn nhiều bước xác thực người dùng thêm để bảo mật và tránh trục lợi từ app hơn Tính năng đấu giá cần phải thao tác nhiều hoặc hiểu một chút về đấu giá để thao tác dễ dàng Giao diện chưa bắt mắt.

Hướng phát triển

Sẽ tăng cường khả năng bảo mật cho app bằng một số bước xác thực người dùng, như chứng minh thư và nhận diện khuôn mặt, một hệ thống bản đồ để mọi người xem được quá trình kêu gọi từ thiện từ lúc quyên góp tới lúc trao tay cho người dân cần hoặc gặp khó khăn, liên kết một số pháp lý liên quan tới sao kê, chứng minh, đảm bảo bảo mật thông tin người dùng, các mạnh thường quân dưới sự cho phép của nhà nước và công an