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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (419.97 KB, 28 trang )

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

HỌC VIỆN HÀNG KHÔNG VIỆT NAMKHOA CƠNG NGHỆ THƠNG TIN

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

ĐỀ TÀI: ỨNG DỤNG DI ĐỘNGCLONE 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ơnNhó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 ChiVũ Hải

TP. HCM, tháng 11 năm 2023

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

LỜI NÓI ĐẦU

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

MỤC LỤC

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

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

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

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

Tài liệu tham khảo...15

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

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

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

chúng ta hiểu rõ hơn về cách thức hoạt động của Instagram, và qua đó, giúp chúngta 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. Ngồ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ượtmà, 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

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

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`.

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

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.

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

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ũngcó 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:

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

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”.

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

Đó là đã hồ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.

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

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:

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

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”

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

2.6. Mơ hình ER

Hình: Mơ hình ER

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

2.7. Sơ đồ tuần tự

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

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

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

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

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

3.1. Demo các chức năng chính3.1.1. Chức năng đăng nhập

Hình: Trang đăng nhập

Chứ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ậpvà 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

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

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.

Q 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.

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

-

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ý

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

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:

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

-

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.

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

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 Newfeed

Chứ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.

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

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.

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

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

Hình: Trang tìm kiếm

Chứ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ẽ

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

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

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

-

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