báo cáo tiểu luận lập trình thiết bị di động đề tài ứng dụng di động clone instagram

Đồ án này sẽ tập trung vào việc xây dựng mộtứng dụng di động tương tự Instagram, với các chức năng chính như đăng nhập,đăng ký, đăng hình ảnh/video, theo dõi người dùng khác, và tương tá

HỌC VIỆN HÀNG KHÔNG VIỆT NAM

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO TIỂU LUẬN LẬP TRÌNH THIẾT BỊ DI ĐỘNG

ĐỀ TÀI: ỨNG DỤNG DI ĐỘNG CLONE INSTAGRAM

HỌC KỲ 1 – NĂM HỌC: 2023 - 2024

MÃ LỚP HỌC PHẦN: 010100085501

Giảng viên hướng dẫn: ThS Huỳnh Thanh Sơn

Nhóm sinh viên thực hiện: Lê Hoàng Anh

Nguyễn Tấn PhátĐàm Mạnh LưuNguyễn Phạm Khánh Chi

Vũ Hải

TP HCM, tháng 11 năm 2023

LỜI NÓI ĐẦU

MỤC LỤC

Chương 1: GIỚI THIỆU 1

1.1 Giới thiệu đề tài: 1

1.2 Lý do chọn đề tài: 1

1.3 Ứng dụng thực tiễn: 2

1.4 Mục tiêu đạt được: 2

Chương 2: CƠ SỞ LÝ THUYẾT 3

2.1 Sử dụng ngôn ngữ Flutter 3

2.2 Database là Nosql sử dụng Firebase: 3

2.3 Cách cài đặt flutter: 3

2.3.1 Tải Flutter SDK: 3

2.3.2 Giải nén và đặt thư mục Flutter: 3

2.3.3 Cập nhật biến môi trường (Environment Variables): 4

2.3.4 Kiểm tra cài đặt Flutter: 4

2.4 Cách tạo một dự án firebase cho code flutter: 4

2.5 Cài đặt các plugin của Flutter 10

2.6 Sơ đồ tuần tự 11

Chương 3: SẢN PHẨM ĐỒ ÁN 13

Chương 4: KẾT LUẬN 14

4.1 Nội dung đã đạt được 14

4.2 Những điểm chưa đạt được 14

4.3 Hướng phát triển 14

Tài liệu tham khảo 15

Chương 1: GIỚI THIỆU1.1 Giới thiệu đề tài:

Đề tài của đồ án môn lập trình di động này là “Ứng dụng di động cloneInstagram” Instagram là một trong những ứng dụng mạng xã hội phổ biến nhấthiện nay, cho phép người dùng chia sẻ hình ảnh và video, theo dõi người khác vàtương tác với nội dung họ đăng tải Đồ án này sẽ tập trung vào việc xây dựng mộtứng dụng di động tương tự Instagram, với các chức năng chính như đăng nhập,đăng ký, đăng hình ảnh/video, theo dõi người dùng khác, và tương tác với bàiđăng

Instagram đã trở thành một phần không thể thiếu của cuộc sống hàng ngàycủa chúng ta, và việc hiểu rõ cách thức hoạt động của nó sẽ giúp chúng ta tận dụngtối đa các tiện ích mà nó mang lại Đồ án này sẽ giúp chúng ta hiểu rõ hơn về cáchthức hoạt động của Instagram, từ cách thức đăng nhập và đăng ký, đến cách thứcđăng tải hình ảnh và video, và cách thức tương tác với người dùng khác

1.2 Lý do chọn đề tài:

Lý do chọn đề tài này là do sự phổ biến và sự tiện lợi của Instagram Việcxây dựng một ứng dụng clone Instagram không chỉ giúp chúng ta hiểu rõ hơn vềcách thức hoạt động của một ứng dụng mạng xã hội, mà còn cung cấp một cơ hộituyệt vời để học hỏi và thực hành các kỹ năng lập trình di động

Instagram là một ứng dụng mạng xã hội phổ biến, với hàng trăm triệu ngườidùng trên toàn thế giới Việc hiểu rõ cách thức hoạt động của Instagram sẽ giúpchúng ta tận dụng tối đa các tiện ích mà nó mang lại, từ việc chia sẻ hình ảnh vàvideo, đến việc theo dõi và tương tác với người dùng khác Đồ án này sẽ giúp

chúng ta hiểu rõ hơn về cách thức hoạt động của Instagram, và qua đó, giúp chúng

ta tận dụng tối đa các tiện ích mà nó mang lại

1.3 Ứng dụng thực tiễn:

Ứng dụng này có thể được sử dụng như một nền tảng mạng xã hội riêng biệt,hoặc như một phần mở rộng của một ứng dụng hiện có Nó cũng có thể được sửdụng như một công cụ học tập để hiểu rõ hơn về lập trình di động và phát triển ứngdụng

Ứng dụng này có thể được sử dụng như một nền tảng mạng xã hội riêng biệt,cho phép người dùng chia sẻ hình ảnh và video, theo dõi người khác và tương tácvới nội dung họ đăng tải Nó cũng có thể được sử dụng như một phần mở rộng củamột ứng dụng hiện có, cho phép người dùng tận dụng các tiện ích mà Instagrammang lại Ngoài ra, ứng dụng này cũng có thể được sử dụng như một công cụ họctập, giúp chúng ta hiểu rõ hơn về cách thức hoạt động của các ứng dụng mạng xãhội và cách thức phát triển ứng dụng di động

1.4 Mục tiêu đạt được:

Mục tiêu của đồ án này là xây dựng một ứng dụng di động hoạt động mượt

mà, có giao diện thân thiện với người dùng và bao gồm các chức năng chính củaInstagram Qua đó, nâng cao kỹ năng lập trình di động và hiểu biết về cách thứchoạt động của các ứng dụng mạng xã hội

Hơn nữa đề tài giúp chúng ta hiểu rõ hơn về cách thức hoạt động của cácứng dụng mạng xã hội như Instagram Qua đó, chúng ta có thể tận dụng tối đa các

cao kỹ năng lập trình di động và hiểu biết về cách thức phát triển ứng dụng diđộng.

Chương 2: CƠ SỞ LÝ THUYẾT2.1 Sử dụng ngôn ngữ Flutter

Hiện nay, Phần Vũ Hải

2.2 Database là Nosql sử dụng Firebase:

Firebase Realtime Database là một hệ thống cơ sở dữ liệu NoSQL lưu trữđám mây, cho phép bạn lưu trữ và đồng bộ hóa dữ liệu Dữ liệu được biểu diễndưới dạng JSON và tự động đồng bộ theo thời gian thực trên tất cả các máy kếtnối

Khi xây dựng ứng dụng đa nền tảng với SDK cho iOS, Android, vàJavaScript, tất cả các client sẽ chia sẻ một phiên bản của Realtime Database và tựđộng cập nhật với dữ liệu mới nhất Điều này làm cho nó trở thành một giải pháphiệu quả và thấp độ trễ cho các ứng dụng di động có yêu cầu đồng bộ hóa trạngthái thời gian thực giữa các thiết bị

`flutter_windows_vxxxx-2.3.2 Giải nén và đặt thư mục Flutter:

Giải nén file vừa tải về và đặt thư mục `flutter` ở một vị trí bạn mong muốn,

ví dụ: `C:\src`

Lưu ý: Không đặt thư mục trong "C:\Program Files" để tránh vấn đề quyềnriêng tư.

2.3.3 Cập nhật biến môi trường (Environment Variables):

Click phải chuột vào "This PC" và chọn "Properties"

Chọn "Advanced system settings" > "Environment Variables"

Trong phần "User variables", tìm biến `PATH` và nhấn "Edit"

Nhấn "New" và thêm đường dẫn đến thư mục `flutter\bin` (ví dụ: `C:\src\flutter\bin`)

Nếu không tìm thấy biến `PATH`, tạo một biến mới với tên `PATH` vàđường dẫn tương ứng

2.3.4 Kiểm tra cài đặt Flutter:

Mở Command Prompt và chạy lệnh `flutter version`

Nếu bạn thấy thông tin về Flutter framework, Dart version, và các thông tinkhác, đó là dấu hiệu cài đặt thành công

Bây giờ, bạn đã sẵn sàng để bắt đầu phát triển ứng dụng Flutter Hãy tiếp tụccài đặt các plugins cho IDE của bạn để có trải nghiệm lập trình tốt nhất

2.4 Cách tạo một dự án firebase cho code flutter:

Điều kiện tiên quyết

Nếu dự án của bạn được tạo trước khi Flutter Web được kích hoạt, bạn cầnmột bản sao của thư mục "web" chứa tệp index.html Nếu thư mục "web" không tồntại trong thư mục gốc của bạn, vui lòng thực hiện lệnh sau để tạo một thư mục mới:

$ flutter create

Nếu bạn tạo một dự án sau khi tính năng Flutter web được bật, nó sẽ tự độngtạo tệp "web/index.html" cho bạn Giờ đến phần thiết lập Lưu trữ Firebase Lưu ý:Bạn có thể bỏ qua Bước 1 và 2 nếu bạn đã cài đặt Firebase và các công cụ Firebase.Bước 1: Tạo dự án Firebase

Bỏ qua bước này nếu bạn đã có dự án Firebase Lưu ý: Một dự án mới cũng

có thể được tạo từ dòng lệnh trong bước 2, nhưng hướng dẫn này sẽ tạo nó trongbảng điều khiển Firebase Trong trình duyệt, truy cập Firebase Console

Nhấn vào “Add project” và đặt tên cho cái dự án của bạn muốn tạo ra:

Chú ý: Tên thực tế của dự án có thể được bổ sung thêm một số ký tự ở cuối

để tạo tính duy nhất

Nhấn "Tiếp tục" Nếu bạn không muốn kích hoạt Google Analytics cho dự ánnày, vui lòng tắt nó và nhấp vào "Tạo dự án" Nếu bạn muốn sử dụng GoogleAnalytics, hãy bật nó và thực hiện các bước liên quan

Đợi vài giây cho dự án được tạo, rồi sau đó nhấp vào “Continue”

Đó là đã hoàn thành xong bước 1.

Bước 2: Cài đặt CLI của firebase-tools

Nên bỏ qua cái bước này nếu đã cài được firebase-tools Nếu bạn chưa cónpm, cài đặt nó trước

$ npm install -g firebase-tools

Sau khi cài đặt xong npm, chạy lệnh sau để cài đặt firebase-tools

Bước 3: Khởi tạo lưu trữ Firebase cho dự án Flutter

Mở Terminal, điều hướng đến thư mục gốc của dự án Flutter và chạy lệnhsau để đăng nhập:

$ firebase login

Lưu ý: Nếu bạn đã đăng nhập và muốn đăng nhập lại bằng tài khoản khác, thìhãy đăng xuất bằng:

Tệp lưu trữ sẽ được tải lên và lưu trữ trên Firebase của bạn Bạn có thể theodõi liên kết trong Terminal đến dự án web Flutter của mình.

2.5 Cài đặt các plugin của Flutter

"Plugin" thường được sử dụng để chỉ các thư viện mở rộng, thành phần hoặccông cụ bổ sung giúp phát triển ứng dụng Flutter một cách hiệu quả và nhanhchóng hơn

Bước 1: Mở Visual studio code

Bước 2: Vào extensions, tìm kiếm “Flutter”

2.6 Mô hình ER

Hình: Mô hình ER

2.7 Sơ đồ tuần tự

Hình 2 6 1: Sơ đồ tuần tự cho chức năng đăng nhập

Hình 2 6 2: Sơ đồ tuần tự cho chức năng thông báo

Hình 2 6 3: Sơ đồ tuần tự cho chức năng sửa trang cá nhân

Chương 3: SẢN PHẨM ĐỒ ÁN

3.1 Demo các chức năng chính

3.1.1 Chức năng đăng nhập

Hình: Trang đăng nhậpChức năng đăng nhập trong ứng dụng Instagram là một phần quan trọng để người dùng có thể truy cập và tương tác với nội dung trên nền tảng Mục tiêu của chức năng này là cung cấp một giao diện cho phép người dùng nhập thông tin đăng nhập

và xác thực thông tin này để truy cập vào tài khoản cá nhân của họ

Người dùng chủ yếu là những cá nhân đã đăng ký tài khoản trên Instagram và muốn truy cập vào ứng dụng để xem, chia sẻ hoặc tương tác với nội dung, cũng

Giao Diện Người Dùng và Xử Lý Thông Tin Đăng Nhập: Màn hình đăng nhập trong ứng dụng Instagram được thiết kế với mục đích cho phép người dùng nhập địa chỉ email để truy cập vào tài khoản của mình Bao gồm các phần tử sau:

- Trường Nhập Email: Là trường dữ liệu văn bản cho phép người dùng nhập địa chỉ email đã đăng ký trước đó trên Instagram Giao diện cung cấp trợ giúp bằng cách hiển thị gợi ý hoặc kiểu chữ để người dùng dễ dàng nhập thông tin hơn

- Trường Nhập Mật Khẩu: Cho phép người dùng nhập mật khẩu tương ứng với tài khoản đã nhập ở trường trên Dữ liệu nhập vào được ẩn để bảo mật thông tin người dùng

- Nút Đăng Nhập: Là nút hoặc button mà người dùng nhấn để xác nhận thông tin đăng nhập và tiếp tục vào tài khoản Nút này có thể có các hiệu ứng trực quan để người dùng biết rõ rằng họ đã chọn

Quá trình xử lý thông tin đăng nhập dựa trên việc nhập địa chỉ email:

- Nhập Địa Chỉ Email: Người dùng điền thông tin địa chỉ email vào trường tương ứng Giao diện cung cấp khả năng nhập và chỉnh sửa dữ liệu một cách thuận tiện

- Kiểm Tra Cơ Sở Dữ Liệu: Ứng dụng sẽ kiểm tra thông tin email từ người dùng với cơ sở dữ liệu người dùng của Instagram Nếu địa chỉ email này chính xác và tồn tại trong hệ thống, quá trình đăng nhập tiếp tục.

- Xử Lý Kết Quả: Nếu thông tin đăng nhập không chính xác hoặc địa chỉ email không tồn tại, ứng dụng sẽ hiển thị thông báo lỗi cho người dùng thông qua giao diện

Quá trình đăng nhập trong ứng dụng Instagram tập trung vào việc nhập địa chỉ email, kiểm tra và xác thực thông tin người dùng để đảm bảo tính chính xác và an toàn của việc đăng nhập

3.1.2 Chức năng đăng ký

Hình: Trang đăng kýChức năng đăng ký trong ứng dụng Instagram nhằm cung cấp cho người dùng khả năng tạo tài khoản mới Người dùng có thể đăng ký bằng cách cung cấp thông tin

cá nhân như địa chỉ email, mật khẩu, tên và mô tả ngắn về bản thân (Bio), cũng như tải lên ảnh đại diện

Người dùng, mục tiêu: Những người chưa có tài khoản trên Instagram và muốn tạomột tài khoản để truy cập vào nền tảng và tham gia vào cộng đồng mạng xã hội này

Màn hình đăng ký trong ứng dụng Instagram bao gồm các phần tử sau:

- Avatar (Ảnh Đại Diện): Cho phép người dùng chọn hoặc tải ảnh đại diện củahọ.

- Email: Trường dữ liệu để người dùng nhập địa chỉ email của mình

- Password: Trường để người dùng tạo và nhập mật khẩu cho tài khoản

- Tên: Trường để người dùng nhập tên của mình

- Bio (Thông Tin Giới Thiệu): Trường để người dùng nhập thông tin ngắn về bản thân

Sử dụng Firebase Authentication để đăng ký người dùng với email/password thôngqua createUserWithEmailAndPassword Sau khi đăng ký thành công, thông tin người dùng được lưu trữ trong Firestore hoặc Realtime Database của Firebase để quản lý tài khoản và thông tin cá nhân

Chức năng đăng ký trong ứng dụng Instagram cung cấp một cơ chế cho người dùng mới tạo tài khoản và tham gia vào cộng đồng mạng xã hội Bằng việc cung cấp thông tin cá nhân cơ bản và avatar, người dùng có thể tạo tài khoản và bắt đầu trải nghiệm ứng dụng một cách dễ dàng.

3.1.3 Chức năng đăng bài viết

Hình: Trang NewfeedChức năng Feed Post trong ứng dụng Instagram tạo ra một giao diện cho người dùng xem và tương tác với các bài đăng từ người dùng khác trên nền tảng này Cácbài đăng này có thể bao gồm ảnh, video hoặc nội dung văn bản

Người dùng mục tiêu là những người sử dụng Instagram mong muốn xem và tham gia tương tác với nội dung từ các tài khoản khác trên ứng dụng

Mỗi bài đăng trên feed của Instagram chứa các yếu tố sau:

- Nội Dung Đa Dạng: Bao gồm ảnh, video hoặc nội dung văn bản, thể hiện thông điệp hoặc trải nghiệm của người đăng

- Nút Thích (Like): Cho phép người dùng thể hiện sự ủng hộ hoặc quan tâm đối với bài đăng

- Hộp Bình Luận: Người dùng có thể nhập và gửi bình luận, chia sẻ ý kiến hoặc phản hồi về bài đăng

- Nút Chia Sẻ: Cho phép người dùng chia sẻ bài đăng tới các nền tảng khác hoặc gửi cho người khác thông qua các kênh khác nhau như tin nhắn, email, v.v

Quá trình tương tác bao gồm:

- Thích Bài Đăng: Người dùng có thể nhấn "Like" để thể hiện sự đồng ý hoặc thích thú đối với nội dung Thông tin về lượt thích sẽ được ghi lại để theo dõi tương tác của người dùng

- Bình Luận: Người dùng có thể nhập và gửi bình luận về bài đăng, các bình luận này sẽ được lưu trữ và hiển thị cho người dùng khác

- Chia Sẻ Bài Đăng: Cho phép người dùng chia sẻ bài đăng tới các nền tảng khác hoặc gửi cho người khác qua nhiều phương tiện truyền thông khác nhau như tin nhắn, email, v.v

3.1.4 Chức năng tìm kiếm

Hình: Trang tìm kiếmChức năng tìm kiếm theo tên người dùng sẽ cung cấp cho người dùng khả năng tìmkiếm và truy cập nhanh chóng vào các tài khoản cụ thể bằng cách nhập tên người dùng vào thanh tìm kiếm trên giao diện ứng dụng Giao diện sẽ bao gồm một thanhtìm kiếm đơn giản và dễ sử dụng, nơi người dùng có thể nhập tên người dùng mà

họ muốn tìm kiếm

Khi người dùng nhập tên vào thanh tìm kiếm, hệ thống sẽ xử lý thông tin và tìm kiếm trong cơ sở dữ liệu của ứng dụng theo tên người dùng Kết quả tìm kiếm sẽ

hiển thị danh sách các tài khoản phù hợp nhất với từ khóa tìm kiếm, có thể theo tênhoặc chứa phần tên mà người dùng nhập vào.

Chức năng này sẽ mang lại lợi ích về tính tiện lợi cho người dùng, giúp họ dễ dàngtìm và truy cập vào các tài khoản cụ thể mà họ quan tâm chỉ bằng vài bước đơn giản trên giao diện ứng dụng di động

3.1.5 Trang cá nhân

Hình: Trang cá nhân

Đồ án lập trình di động này tập trung vào việc phát triển trang cá nhân trong ứng dụng di động, mô phỏng trang cá nhân trên nền tảng mạng xã hội như Instagram.Trang cá nhân sẽ cung cấp một không gian cho người dùng quản lý và hiển thị thông tin cá nhân Giao diện trang cá nhân sẽ bao gồm các yếu tố sau:

- Thông tin Cá Nhân: Cho phép người dùng cập nhật thông tin như hình ảnh

- Bài Đăng Cá Nhân: Hiển thị danh sách các bài đăng mà người dùng đã chia

sẻ trên trang cá nhân của mình

- Số Lượng Người Theo Dõi và Đang Theo Dõi: Thể hiện số lượng người theo dõi trang cá nhân của người dùng và số lượng tài khoản mà người dùng đang theo dõi

Khi người dùng cập nhật thông tin cá nhân, hệ thống sẽ lưu trữ và hiển thị các thông tin này trên trang cá nhân của họ Người dùng cũng có thể quản lý bài đăng

cá nhân, thể hiện sự tương tác và chia sẻ nội dung mà họ muốn hiển thị trên trang

cá nhân

Trang cá nhân trong ứng dụng di động giúp người dùng tạo và quản lý một không gian cá nhân trực tuyến, thể hiện bản thân và tương tác với cộng đồng mạng một cách dễ dàng và linh hoạt

Chương 4: KẾT LUẬN4.1 Nội dung đã đạt được

-

4.2 Những điểm chưa đạt được

4.3 Hướng phát triển