Chương 1: GIỚI THIỆU ĐỀ TÀI 1. 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 10 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. Đố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. 11 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2. Giới thiệu 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. Kiến trúc React Native 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,. Shadow thread: Được sử dụng để tính toán Layout của element trước khi render ra màn hình.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 13 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.
Javascripts 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. CSS: Định dạng thiết kế, bố cục, phong cách, canh lề của trang web.
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. 14 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.2: JavaScript (nguồn: https://mona.media/thiet-ke-website-bang-ngon-ngu- javascript/) 2. Hook 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. 15 Để 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.
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.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.