ĐỒ án MẠNG xã hội PHOTOME DÀNH CHO THỢ CHỤP ẢNH và NGƯỜI có NHU cầu CHỤP ẢNH, mẫu ẢNH (đồ án SE121 l21 PMCL)

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN MẠNG XÃ HỘI PHOTOME DÀNH CHO THỢ CHỤP ẢNH VÀ NGƯỜI CÓ NHU CẦU CHỤP ẢNH, MẪU ẢNH Giảng viên hướng dẫn: TH.S NGUYỄN CÔNG HOAN Sinh viên thực hiện: HÀ NHẬT LINH – MSV: 18520086 PHẠM VŨ LÊ MINH – MSV: 18520103 Tp Hồ Chí Minh, Tháng năm 2021 LỜI NÓI ĐẦU Tài liệu tạo yêu cầu lớp SE121.L21, Trường Đại học Công nghệ Thông tin, Đại học Quốc gia Thành phố Hồ Chí Minh, học kỳ II năm học 20202021 Báo cáo bao gồm thông tin từ việc khảo sát tham khảo tảng mạng xã hội, tài liệu thiết kế đặc tả phần mềm mạng xã hội bao gồm sơ đồ Use-case, thực hóa sở liệu, giao diện… Cách đọc tài liệu: Nội dung tài liệu đưa vào mục, đánh số thứ tự từ xuống, chi tiết xem thêm mục lục Chúng em cảm ơn thầy Nguyễn Cơng Hoan hỗ trợ hướng dẫn để nhóm hồn thành tốt đồ án NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN , ngày tháng……năm 2021 Người nhận xét (Ký tên ghi rõ họ tên) MỤC LỤC LỜI NÓI ĐẦU MỤC LỤC I GIỚI THIỆU BÀI TOÁN CẦN GIẢI QUYẾT, MƠ TẢ QUY TRÌNH THỰC HIỆN CÁC CƠNG VIỆC CHÍNH Bài tốn cần giải Quy trình thực II CƠNG NGHỆ React Native 1.1 Khái niệm React Native 8 1.2 Tại lại chọn React Native? 1.2.1 Hiệu suất tuyệt vời 1.2.2 Giao diện người dùng phong phú 1.2.3 1.2.4 Phát triển ứng dụng nhanh Phát triển đa tảng 9 1.2.5 Hỗ trợ cộng đồng mạnh mẽ 10 1.2.6 Dễ học 10 1.3 Kiến trúc React Native 11 Kiến trúc cũ 11 1.3.2 Kiến trúc 1.4 Mô tả tổng quát codebase 13 15 1.3.1 1.4.1 Firebase 15 1.4.2 Server 16 1.4.3 SRC 16 Mongodb 2.1 Sự đời Mongodb : 16 16 2.2 Khái niệm Mongodb: 17 2.2.1 Mongodb gì: 17 2.2.2 Kiến trúc tổng quát 2.3 Chức năng, vai trò Mongodb 17 19 2.3.1 Chức năng: 19 2.3.2 Vai trò: 20 2.4 Các khái niệm 20 2.4.1 Database 20 2.4.2 Collection 20 2.4.3 Document 20 2.4.4 2.4.5 Schema Các thao tác với Mongo 21 21 2.4.5.1 Create 21 2.4.5.2 21 Read 2.4.5.3 Update 22 2.4.5.4 Delete 22 NodeJs 3.1 Sơ lược Nodejs 23 23 3.2 Đặc điểm thành phần NodeJs 23 3.3 Ứng dụng Nodejs 24 Firebase 4.1 Sơ lược firebase 25 25 4.2 Lịch sử 25 4.3 4.4 Lợi ích sử dụng firebase lý sử dụng firebase vào việc lưu trữ ảnh 25 Chức storage phục vụ cho Photome 26 III XÁC ĐỊNH MƠ HÌNH HĨA U CẦU 26 Phân loại yêu cầu phần mềm 1.1 Danh sách yêu cầu nghiệp vụ 26 26 1.2 Biểu mẫu 27 1.2.1 BM1 27 1.2.2 BM2 27 1.2.3 1.2.4 BM3 BM4 27 27 1.3 Quy định 27 Sơ đồ lớp mức phân tích 27 Sơ đồ usecase 28 THIẾT KẾ HỆ THỐNG 29 IV Kiến trúc hệ thống 29 Mô tả thành phần hệ thống 2.1 Các thành phần kiến trúc 29 29 2.2 Hướng kiến trúc 30 V THIẾT KẾ DỮ LIỆU Danh sách lược đồ liệu 30 30 Mô tả lược đồ 2.1 Lược đồ User 31 31 2.2 Lược đồ Profile 31 2.3 Lược đồ Newfeed 32 2.4 Lược đồ Liked 33 2.5 Lược đồ Comment 33 VI THIẾT KẾ GIAO DIỆN 33 Danh sách hình 33 Mơ tả chi tiết hình 2.1 Màn hình đăng ký 2.2 Màn hình đăng nhập 35 35 36 2.3 Màn hình home 37 2.4 Màn hình notification 39 2.5 Màn hình search 40 2.6 Màn hình MyAccount 41 2.7 Màn hình PostNewfeed 2.8 Màn hình EditProfile 42 44 2.9 Màn hình comment 45 2.10 Màn hình trang cá nhân người dùng khác 47 VII CÀI ĐẶT VÀ KIỂM THỬ 48 VIII HƯỚNG PHÁT TRIỂN 48 IX 49 TÀI LIỆU THAM KHẢO I GIỚI THIỆU BÀI TỐN CẦN GIẢI QUYẾT, MƠ TẢ QUY TRÌNH THỰC HIỆN CÁC CƠNG VIỆC CHÍNH Bài tốn cần giải  Xây dựng mạng xã hội cho thợ chụp ảnh, mẫu ảnh người có nhu cầu chụp ảnh  Xác định đối tượng hướng đến: Người dùng: Thợ chụp ảnh, mẫu ảnh, người sở hữu mẫu ảnh, người có nhu cầu chụp ảnh, người có niềm đam mê với nhiếp ảnh  Mục đích: Tạo mơi trường nhiếp ảnh đại Ở người tập chung vào nhiếp ảnh Tạo điều kiện thuận lợi để người tìm kiếm hội mình, liên lạc cộng tác thông qua mạng xã hội Photome Đồng thời Photome mạng xã hội hình ảnh dùng để giải trí hướng đến người yêu thích chụp ảnh…  Hình thức phát triển: App mobile  Cơng nghệ sử dụng: + Frontend: React Native + Backend: NodeJS, Express, MongoDB, Firebase Quy trình thực Hiện hoạt động chụp ảnh, nhiếp ảnh hình thức tự phát, khơng có gắn kết người yêu thích thành cộng đồng lớn Hay có gắn kết thơng qua mạng xã hội lớn khác, hoạt động nhiếp ảnh sẻ bị pha lỗng tính chất mạng xã hội đa phương tiện Những người dùng yêu chụp ảnh có nhu cầu chụp ảnh khó sàng lọc đối tượng trang mạng xã hội lớn đồng thời bị vấn đề khác gây lỗng kết Có số ứng dụng mạng xã hội cho nhiếp ảnh gia phát triển, nhằm tạo khơng gian cho người u thích chụp ảnh Tuy nhiên ứng dụng dừng lại việc chia sẻ ảnh tạo gắn kết cộng đồng người chụp ảnh, chưa tạo phân hóa nhu cầu thực thể mạng xã hội Nắm bắt yêu cầu Những người dùng cần có ảnh đẹp Chụp ảnh khơng để vui mà cịn nghề nghiệp Tạo thêm nhiều công việc cho mẫu ảnh bán chuyên chuyên nghiệp Cũng tạo không gian nhiếp ảnh lành mạnh Chúng em thống chọn đề tài Photome mạng xã hội cho thợ chụp ảnh, mẫu ảnh người có nhu cầu chụp ảnh App xây dựng bao gồm nội dung bản:  Tạo tài khoản cá nhân, profile cho cá nhân để giới thiệu thân (như CV)  Up đăng mình(Ảnh status trạng thái)  Tương tác (like , comment ) với viết người khác  Tìm kiếm người dùng khác nhằm liên lạc hay follow  Xem thông báo người thực tương tác với viết  Xem viết, đăng ngẫu nhiên trang home từ nhận biết viết, người dùng cần để ý Các bước xây dựng App mobile:  Xác định yêu cầu, mơ hình hố  Thiết kế hệ thống  Thiết kế liệu  Thiết kế giao diện  Lập trình  Thử nghiệm sửa lỗi  Phát hành app, bảo trì II CƠNG NGHỆ React Native 1.1 Khái niệm React Native Được phát triển Facebook, React Native framework hướng đến phát triển ứng dụng di động đa tảng Với trợ giúp React Native, lập trình viên (developer) sử dụng JavaScript để tạo mobile apps (ứng dụng di động) hỗ trợ cho tảng Android iOS Instagram, Facebook, Skype,… ứng dụng bật sử dụng React Native 1.2 Tại lại chọn React Native? 1.2.1 Hiệu suất tuyệt vời React native khơng nhanh ứng dụng gốc thực xây dựng ngôn ngữ quen thuộc Java, Objective-C C # Tuy nhiên, bạn có hiệu suất gần ngơn ngữ cung cấp cho bạn thành phần gốc, Chế độ xem Văn Ứng dụng dành cho thiết bị di động dựa React Native ứng dụng web HTML5, hybrid di động Thay vào đó, ứng dụng di động thực Bạn nâng hiệu suất ứng dụng React Native lên tầm cao cách tối ưu hóa ứng dụng bạn mã gốc Có, React Native cho phép bạn sử dụng mã gốc Để có hiệu suất tối đa, bạn xây dựng số tính ứng dụng mã gốc số tính với React Native 1.2.2 Giao diện người dùng phong phú React Native cho phép bạn tạo UI độc đáo, bắt mắt thông qua thành phần khai báo xây dựng sẵn, chẳng hạn Picker, Nút, Thanh trượt, Chuyển đổi, v.v Bạn tạo thành phần riêng bạn với TouchableNativeFeedback TouchableOpacity Có nhiều thành phần dành riêng cho iOS Android có sẵn để giúp thiết bị hoạt động hiệu điện thoại di động Android iOS Ví dụ: iOS – ActionSheetIOS, AlertIOS, DatePickerIOS, ImagePickerIOS, ProgressViewIOS, PushNotificationIOS, SegmentedControlIOS, v.v Android – DatePickerAndroid, DrawerLayoutAndroid, RightsAndroid, ProgressBarAndroid, TimePickerAndroid, ToastAndroid, Thanh công cụ Android, View Page Android, v.v Email TextBox Điền email Password TextBox Điền mật Male/Female RadioButton Chọn giới tính Sign Up Button Đăng ký sau hoàn thiện mẫu 2.2 STT Màn hình đăng nhập Tên thành phần Email Loại TextBox Cách sử dụng Điền email Password TextBox Điền mật Sign In TextBox Đăng nhập vào tài khoản Don’t have an account RadioButton 2.3 STT Tạo tài khoản Màn hình home Tên thành phần Loại Cách sử dụng Photome Image Logo ứng dụng What on your mind Textbox Đăng đăng Hiển thị trang home Newfeed Tên Text Tên người đăng newfeed Avatar Image Avatar người đăng newfeed Iconjob Icon Job người đăng Time Text Thời gian người dùng đăng Status Text Trạng thái đăng Image Image Ảnh đăng 10 Liked Button Số lượt thích đăng 11 Comment Button Số lượt bình luận đăng 12 Dấu chấm Button Chỉnh sửa quyền đăng 2.4 STT Màn hình notification Tên thành phần Loại Cách sử dụng List tương tác List Hiển thị tương tác người dùng Avatar Image Avatar người tương tác Name Text Tên người tương tác 2.5 Màn hình search STT Tên thành phần Loại Cách sử dụng Thanh tìm kiếm SearchBar List người dùng tìm kiếm List Name Text Tên người dùng Avatar Image Avatar người dùng tìm kiếm 2.6 Màn hình MyAccount Tìm kiếm người dùng STT Tên thành phần Loại Cách sử dụng Avatar Image Avatar người dùng Name Text Tên người dùng Email Text Email người dùng Post Text Số đăng người dùng Follower Text Số người theo dõi Following Text Số người theo dõi Edit Profile Button Chỉnh sửa profile người dùng List đăng người List dùng 2.7 Màn hình PostNewfeed Có định dạng với newfeed trang home STT Tên thành phần Loại Cách sử dụng Reverse Button Quay lại hình Upload Button Đăng lên mạng xã hội Status TextBox Nhập status Upload Image Button Chọn ảnh để upload Image Image Ảnh chọn đăng 2.8 Màn hình EditProfile STT Tên thành phần Loại Cách sử dụng Dấu X Button Hủy sửa đổi profile Dấu V Button Cập nhật profile Avatar ImageButto Chọn ảnh để làm avatar m Name TextBox Nhập tên người dùng Date of birth Date picker Ngày sinh người dùng Introduction TextBox Giới thiệu người dùng Sex ListView Chọn giới tính Work ListView Chọn cơng việc 2.9 Màn hình comment STT Tên thành phần Loại Cách sử dụng Reverse Button Quay lại trang Số comment Text Hiển thị số comment viết Avatar Image Avatar người dùng Name Text Tên người dùng Comment Text Bình luận người dùng Time Text Thời gian bình luận Delete Button Xóa bình luận Type TextBox Nhập bình luận thân Send Button Đăng bình luận lên viết 2.10 Màn hình trang cá nhân người dùng khác STT Tên thành phần Loại Cách sử dụng Avatar Image Avatar người dùng khác Name Text Tên người dùng khác Post Text Số đăng người dùng khác Follower Text Số người theo dõi Following Text Số người theo dõi List đăng người List Có định dạng với newfeed trang home, dùng Nhưng khơng thể thao tác xóa CÀI ĐẶT VÀ KIỂM THỬ VII STT Tên chức Mức độ hoàn thành Đăng bài, caption 100% Tạo profile 100% Xem ảnh, đăng ngẫu nhiên 100% Xem ảnh, đăng người cụ thể 100% Tìm kiếm, xem trang cá nhân người khác 100% Hiển thị thông báo 100% Tương tác (like,comment) viết 100% Ghi VIII HƯỚNG PHÁT TRIỂN - Xây dựng tính chat realtime cho người dùng - Thêm chức tìm kiếm người dùng xung quanh (như Grab,….) - Thêm chức lưu ảnh chất lượng cao cho ứng dụng - Thêm nhiều trạng thái Notification, thông báo trực tiếp tảng platform cho người dùng - Thêm chức tìm kiếm theo vị trí tìm kiếm theo nghề nghiệp người dùng - Thêm UI vào cho trang home, search để hiển thị đăng người dùng phù hợp IX TÀI LIỆU THAM KHẢO [React native] 1- Hồng Nhi (2020), “React Native gì? Tổng quan ưu nhược điểm React Native”, https://wiki.tino.org/, link truy cập: https://blog.tinohost.com/react-native-la-gi/ (ngày truy cập: 28/06/2020) 2- Jeffrey Wilson (2020), “7 lý chọn React Native cho phát triển ứng dụng di động”, https://lordlikely.com/, link truy cập: https://lordlikely.com/phat-trin/7-ly-do-chnreact-native-cho-phat-trin-ng-dng-di/ (ngày truy cập: 28/06/2020) 3- Hà Anh Đức (2020), “Tái kiến trúc React Native năm 2020”, https://viblo.asia/, link truy cập: https://viblo.asia/p/tai-kien-truc-react-native-trong-nam-2020- RQqKLLD0K7z (ngày truy cập: 28/06/2020) [MongoDb] 4- “Tổng quan MongoDb”, 2014, https://bigsonata.wordpress.com/, link truy cập: https://bigsonata.wordpress.com/2014/06/05/mongodb/ (ngày truy cập: 29/06/2020) 5- “MongoDb gì? Chia sẻ từ A-Z”, https://hostingviet.vn/, link truy cập: https://hostingviet.vn/mongodb-la-gi (ngày truy cập: 29/06/2020) 6- Nguyễn Dương (2016), “MongoDb (Phần 1)”, https://viblo.asia/, link truy cập: https://viblo.asia/p/mongodb-co-ban-phan-1-l5XRBVN3RqPe (ngày truy cập: 29/06/2020) 7- Hoàng Hùng (2018), “Mongoose cho MongoDb, Nodejs”, https://viblo.asia/, link truy cập: https://viblo.asia/p/mongoose-cho-mongodb-nodejs-Qbq5QWvJZD8 (ngày truy cập: 29/06/2020) 8- Vương Hương (2019), “MongoDb CRUD Operations”, https://viblo.asia/, link truy cập: https://viblo.asia/p/mongodb-crud-operations-Az45banqlxY (ngày truy cập: 29/06/2020) [FireBase] 9- Dương Tú Anh (2020), “Firebase gì? Giải thích chức Firebase”, https://viblo.asia/, link truy cập: https://viblo.asia/p/firebase-la-gi-giaithich-nhung-chuc-nang-co-ban-cua-firebase-bWrZn0jQ5xw (ngày truy cập: 30/06/2020) [NodeJs] 10- Hiếu Trần (2020), “NoteJs gì? Hướng dẫn cài đặt viết chương trình NoteJs”, https://blog.itnavi.com.vn/, link truy cập: https://blog.itnavi.com.vn/nodejs-la-gi/ (ngày truy cập: 30/06/2020) ... dựng mạng xã hội cho thợ chụp ảnh, mẫu ảnh người có nhu cầu chụp ảnh  Xác định đối tượng hướng đến: Người dùng: Thợ chụp ảnh, mẫu ảnh, người sở hữu mẫu ảnh, người có nhu cầu chụp ảnh, người có. .. xã hội đa phương tiện Những người dùng yêu chụp ảnh có nhu cầu chụp ảnh khó sàng lọc đối tượng trang mạng xã hội lớn đồng thời bị vấn đề khác gây lỗng kết Có số ứng dụng mạng xã hội cho nhiếp ảnh. .. gian cho người yêu thích chụp ảnh Tuy nhiên ứng dụng dừng lại việc chia sẻ ảnh tạo gắn kết cộng đồng người chụp ảnh, chưa tạo phân hóa nhu cầu thực thể mạng xã hội Nắm bắt yêu cầu Những người