ĐỒ án ỨNG DỤNG TRỢ lý THÚ CƯNG

Giới hạn phạm vi Hệ thống được xây dựng đáp ứng được những yêu cầu dưới đây: ● Đăng nhập, xác thực người dùng ● Quản lý người dùng ● Quản lý thú cưng PET ● Quản lý mạng xã hội thú cưng ●

ĐẠ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

-🙚🙚🙚🙚🙚

-BÁO CÁO ĐỒ ÁN 2 SE122.L11

ĐỀ TÀI:

ỨNG DỤNG TRỢ LÝ THÚ CƯNG

Giảng viên hướng dẫn:

ThS Huỳnh Hồ Thị Mộng Trinh

Sinh viên thực hiện:

Tp Hồ Chí Minh, 22/01/2020

Lời cảm ơn

Đầu tiên, nhóm tác giả xin gửi lời cảm ơn chân thành đến tập thể quý Thầy Cô Trường Đại học Công nghệ thông tin – Đại học Quốc gia TP.HCM và quý Thầy Cô khoa Công nghệ phần mềm đã giúp cho nhóm tác giả có những kiến thức cơ bản làm nền tảng để thực hiện đề tài này.

Đặc biệt, nhóm tác giả xin gửi lời cảm ơn và lòng biết ơn sâu sắc nhất tới cô Huỳnh Hồ Thị Mộng Trinh (Giảng viên môn đồ án 2) Cô đã hướng dẫn, hỗ trợ nhóm hoàn thành đồ án này.

Trong thời gian một học kỳ thực hiện đề tài, nhóm tác giả

đã vận dụng những kiến thức nền tảng đã tích lũy đồng thời kết hợp với việc học hỏi và nghiên cứu những kiến thức mới Từ đó, nhóm vận dụng tối đa những gì đã thu thập được để hoàn thành một báo cáo

đồ án tốt nhất Tuy nhiên, trong quá trình thực hiện, nhóm tác giả không tránh khỏi những thiếu sót Chính vì vậy, nhóm tác giả rất mong nhận được những sự góp ý từ phía các Thầy Cô nhằm hoàn thiện những kiến thức mà nhóm tác giả đã học tập và là hành trang để nhóm tác giả thực hiện tiếp các đề tài khác trong tương lai.

Xin chân thành cảm ơn các quý Thầy Cô!

Mục Lục

Chương 1 Giới thiệu đề tài

sự yêu thương với các boss nên chúng em đã chọn và thực hiện đề tài

1.2 Tổng quan các vấn đề chính

1.2.1 Bài toán

Bài toán đặt ra là xây dựng ứng dụng trợ lý thú cưng giúp quản lí thú cưng như cân nặng, lịch tiêm chủng, … Ngoài ra còn giúp thú cưng hẹn hò hay đăng bài sống ảo

1.2.2 Giới hạn phạm vi

Hệ thống được xây dựng đáp ứng được những yêu cầu dưới đây:

● Đăng nhập, xác thực người dùng

● Quản lý người dùng

● Quản lý thú cưng (PET)

● Quản lý mạng xã hội thú cưng

● Quản lý các bài Wiki, kinh nghiệm nuôi, các bài báo khoa học

1.2.3 Các nội dung nghiên cứu thực hiện

● Học Nodejs và framework Expressjs: Tìm event loop, routing

và xử lý bất đồng trong Expressjs

● Tìm hiểu Graphql và apollo server để viết API

● Tìm hiểu React và xây dựng DashBoard cho ứng dụng

● Tìm hiểu Flutter để xây dựng app cho ứng dụng

1.2.4 Kết quả hướng tới

Hướng tới việc xây dựng app mobile đa nền tảng đồng thời có dashboard làweb quản lí ứng dụng Khai thác triệt để lợi thế của nền tảng nodejs Đồng thời tạo ra ứng dụng có khả năng dễ dàng nâng cấp sau này

Chương 2 Các kiến thức công nghệ, nền tảng

2.1 Nodejs và framework Expressjs

Expressjs là một web framework mã nguồn mở dành cho Nodejs, được thiết

kế để xây dựng web application và API Express là framework Nodejs phổ biếnnhất

- Với NoSQL bạn có thể mở rộng dữ liệu mà không lo tới những việc nhưtạo khóa ngoại, khóa chính, kiểm tra ràng buộc v.v

- NoSQL bỏ qua tính toàn vẹn của dữ liệu và transaction để đổi lấy hiệu suất nhanh và khả năng mở rộng

- NoSQL được sử dụng ở rất nhiều công ty, tập đoàn lớn, ví dụ như FaceBook sử dụng Cassandra do FaceBook phát triển, Google phát triển

và sử dụng BigTable,

hệ nên truy vấn sẽ rất nhanh.

- Với CSDL quan hệ chúng ta có khái niệm bảng, các cơ sở dữ liệu quan

hệ (như MySQL hay SQL Server ) sử dụng các bảng để lưu dữ liệu thì với MongoDB chúng ta sẽ dùng khái niệm là collection thay vì bảng

- So với RDBMS thì trong MongoDB collection ứng với table, còn document sẽ ứng với row , MongoDB sẽ dùng các document thay cho row trong RDBMS

- Các collection trong MongoDB được cấu trúc rất linh hoạt, cho phép các dữ liệu lưu trữ không cần tuân theo một cấu trúc nhất định

- Thông tin liên quan được lưu trữ cùng nhau để truy cập truy vấn nhanh thông qua ngôn ngữ truy vấn MongoDB

-2.3 Reactjs

React là một thư viện Javascript nhằm đơn giản hóa việc phát triển giaodiện trực quan được phát triển tại facebook và phát hành vào năm 2013, Reactđược sử dụng làm thư viện font-end chính của facebook và instagram từ khi nó ramắt Hiện nay số lượng ứng dụng React đang tăng lên rất nhanh

Mục tiêu chính của nó là làm cho chúng ta dễ dàng hình dung về một giaodiện và trạng thái của nó tại bất kỳ thời điểm nào, bằng cách chia UI thành một bộcác “Component”

React được sử dụng để xây dựng các ứng dụng single pageapplication

2.4 GraphQL

GraphQL là một Graph Query Language được dành cho API Nó được phát triển bởi Facebook và hiện tại nó được duy trì bởi rất nhiều công ty lớn, và mọi cá nhân trên khắp thế giới GraphQL từ khi ra đời đã gần như thay thế hoàn toàn REST bởi sự hiệu quả, mạnh mẽ và linh hoạt hơn rất nhiều

- Quan phân tích, chúng tôi lựa chọn noSQL database cụ thể là mongoDB

để triển khai dự án này bởi những ưu điểm sau:

• Document oriented

• Hiệu suất cao

• Tính sẵn sàng cao – Nhân rộng

• Khả năng mở rộng cao – Sharding

• Năng động – Không có lược đồ cứng nhắc

• Linh hoạt – thêm / xóa trường có ít hoặc không ảnh hưởng đến ứng dụng

• Dữ liệu không đồng nhất

• Không joins

• Phân phối được

• Biểu diễn dữ liệu trong JSON hoặc BSON

• Hỗ trợ không gian địa lý (Geospatial)

• Tích hợp dễ dàng với BigData Hadoop

• Ngôn ngữ truy vấn dựa trên tài liệu mạnh mẽ như SQL

• Các bản phân phối cloud như AWS, Microsoft, RedHat, dotCloud vàSoftLayer, v.v … Trên thực tế, MongoDB được xây dựng cho cloud Kiến trúc mở rộng quy mô tự nhiên của nó, được kích hoạt bởi sharding, liên kết tốt với quy mô và sự nhanh nhẹn có được nhờ điện toán đám mây

2.5 Flutter

Để lập trình ứng dụng (app), chúng tôi lựa chọn Flutter là nền tảng phát triển ứng dụng đa nền tảng cho iOS và Android do Google phát triển Tại sao lại là flutter?

- Tính nhanh chóng: Tính năng hot reload của nó giúp bạn nhanh chóng và dễ dàng thử nghiệm, xây dựng giao diện người dùng, thêm tính năng và sửa lỗi nhanh hơn Trải nghiệm tải lại lần thứ hai, mà không làm mất trạng thái, trên emulator, simulator và device cho iOS và Android.

- Tính thẩm mĩ: Thỏa mãn người dùng của bạn với các widget built-inđẹp mắt theo Material Design và Cupertino (iOS-flavor), các API chuyển động phong phú, scroll tự nhiên mượt mà và tự nhận thức được nền tảng

- Tính chính thống: Làm cho ứng dụng của bạn trở nên sống động với API của platform, SDK của bên thứ ba và native code Nó cho phép bạn sử dụng lại mã Java, Swift và ObjC hiện tại của mình và truy cập các tính năng và SDK native trên iOS và Android

- Tính thống nhất: Flutter có các công cụ và thư viện để giúp bạn dễ dàng đưa ý tưởng của mình vào cuộc sống trên iOS và Android Nếu bạn chưa có kinh nghiệm phát triển trên thiết bị di động, thì Flutter là một cách

dễ dàng và nhanh chóng để xây dựng các ứng dụng di động tuyệt đẹp Nếu bạn là một nhà phát triển iOS hoặc Android có kinh nghiệm, bạn có thể sử dụng Flutter cho các View của bạn và tận dụng nhiều code Java / Kotlin / ObjC / Swift hiện có của bạn

Chương 3 Xây dựng ứng dụng

3.1 Tổng quan khảo sát ứng dụng liên quan

Pet Assistant, Pet Diary Assistant, Maddie's Pet Assistant

3.2 Xác định yêu cầu

3.2.1 Usecase

a) Tổng quát

b) Đăng nhập hệ thống

c) Quản lý người dùng

d) Quản lý thú cưng

e) Quản lý bài đăng

f) Quản lý các bài báo (Wiki)

3.2.2 Mô tả usecase

a) Actor

● Người quản lý : Quản lí người dùng, các bài viết hệ thống,…

● Người dùng: Quản lí PET, quản lí các bài đăng của PET…b) Usecase

Usecase Đăng nhập

Mô tả Đăng nhập người dùng vào hệ thống

Main Flow ● Người dùng nhập email và mật khẩu

● Nhấn nút đăng nhập

● Hệ thống xác thực thông tin đăng nhập

● Nếu thông tin đăng nhập đúng thì cho phép đăng nhập người dùng vào hệ thống

● Nếu thông tin đăng nhập sai thì thông báo lỗi ra màn hình

Alternative

Flow(s)

● Nếu nhập thiếu email hoặc mật khẩu, thông báo lỗi

Usecase Quản lý người dùng

Mô tả Quản lý tất cả thông tin từ người dùng

Main Flow ● Chọn chức năng muốn sử dụng

● Điều hướng đến màn hình chức năng tương ứng

Alternative Flow(s) ● Nếu xảy ra lỗi, thông báo

Usecase Quản lý thú cưng

Mô tả Quản lý các thông tin thú cưng

Main Flow ● Chọn chức năng muốn sử dụng

● Điều hướng đến màn hình chức năng tương ứngAlternative Flow(s) ● Nếu hệ thống xảy ra lỗi thì hiển thị thông báo

Usecase Quản lý các bài đăng (post)

Mô tả Quản lý các bài post

Main Flow ● Chọn chức năng muốn sử dụng

● Điều hướng đến màn hình chức năng tương ứngAlternative Flow(s) ● Nếu hệ thống xảy ra lỗi thì hiển thị thông báo

Usecase Quản lí các bài báo (Wiki)

Mô tả Quản lí nội dung các bài báo

Main Flow ● Chọn chức năng muốn sử dụng

● Điều hướng đến màn hình chức năng tương ứngAlternative Flow(s) ● Nếu hệ thống xảy ra lỗi thì hiển thị thông báo

Usecase Thêm thú cưng

Mô tả Tạo thông tin thú cưng

Main Flow ● Nhấn nút tạo thú cưng

● Nhập thông tin thú cưng

● Nhấn nút đồng ýAlternative Flow(s) ● Nếu hệ thống xảy ra lỗi thì hiển thị thông báo

Usecase Sửa thú cưng

Mô tả Sửa thông tin thú cưng

Main Flow ● Chọn thú cưng

● Nhấn nút sửa thú cưng

● Nhập thông tin thú cưng muốn sửa

● Nhấn nút đồng ýAlternative Flow(s) ● Nếu hệ thống xảy ra lỗi thì hiển thị thông báo

Usecase Tìm kiếm thú cưng

Mô tả Tìm kiếm thú cưng

Main Flow ● Nhập các thông tin tìm kiếm vào các mục tương

ứng

● Nhấn nút tìm kiếmAlternative Flow(s) ● Nếu hệ thống xảy ra lỗi thì hiển thị thông báo

Usecase Thêm bài đăng

Mô tả Tạo thông tin bài đăng

Main Flow ● Nhấn nút tạo bài viết

● Nhập thông tin bài viết

● Nhấn nút đồng ýAlternative Flow(s) ● Nếu hệ thống xảy ra lỗi thì hiển thị thông báo

Usecase Xóa bài đăng

Mô tả Xóa thông tin bài đăng

Pre - Conditions Bài đăng đã được tạo

Post - Conditions

Main Flow ● Chọn bài viết

● Nhấn nút xóa

● Nhấn nút đồng ýAlternative Flow(s) ● Nếu hệ thống xảy ra lỗi thì hiển thị thông báo

Usecase Sửa bài đăng

Mô tả Sửa thông tin bài đăng

Main Flow ● Chọn bài đăng

● Nhấn nút sửa bài đăng

● Nhập thông tin muốn sửa

● Nhấn nút đồng ýAlternative Flow(s) ● Nếu hệ thống xảy ra lỗi thì hiển thị thông báo

Usecase Thêm bài báo (Wiki)

Mô tả Tạo thông tin bài báo

Main Flow ● Nhấn nút tạo bài báo

● Nhập thông tin bài

● Nhấn nút đồng ýAlternative Flow(s) ● Nếu hệ thống xảy ra lỗi thì hiển thị thông báo

Usecase Xóa bài báo (Wiki)

Mô tả Xóa thông tin bài báo

Main Flow ● Chọn bài báo

● Nhấn nút xóa

● Nhấn nút đồng ýAlternative Flow(s) ● Nếu hệ thống xảy ra lỗi thì hiển thị thông báo

Usecase Sửa bài báo (Wiki)

Mô tả Sửa thông tin bài báo

Main Flow ● Chọn bài báo

● Nhấn nút sửa bài báo

● Nhập thông tin muốn sửa

● Nhấn nút đồng ýAlternative Flow(s) ● Nếu hệ thống xảy ra lỗi thì hiển thị thông báo

Usecase Tìm kiếm bài báo

Mô tả Tìm kiếm bài báo

Main Flow ● Nhập các thông tin tìm kiếm vào các mục tương

ứng

● Nhấn nút tìm kiếmAlternative Flow(s) ● Nếu hệ thống xảy ra lỗi thì hiển thị thông báo

3.2.3 Thiết kế databasea) Sơ đồ ERD

b) Danh sách các bảng

STT Tên bảng Ý nghĩa

1 users Chứa thông tin của “Sen”

2 pets Chứa thông tin của “Boss”

3 races Lưu thông tin giống của Boss

4 postcategories Lưu trữ các bài báo

5 postcategories Chứa thông tin chủ đề của các bài báo

6 typeofwikis Loại của bài báo

7 Post Bài đăng trên mạng xã hội của “Sen”

c) Mô tả chi tiết các bảng

● Bảng users (người dùng hệ thống)STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa

2 uid string Mã định danh xác minh firebase

3 password string Mật khẩu tài khoản được mã hóa

4 role string Vai trò trong hệ thống

6 phone string Số điện thoại “Sen”

7 email string Địa chỉ mail

8 follows string[] Danh sách người theo dõi

9 createdAt date Ngày tạo

10 updatdAt date Ngày cập nhật gần đây

● Bảng pets

STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa

4 birthday date Ngày sinh của “Boss”

6 character string Tính cách của “Boss”

7 userId string “Sen” của “Boss”

8 images string[] Ảnh của “Boss”

9 videos string[] Video của “Boss”

10 updatdAt date Ngày cập nhật

11 createAt date Ngày tạo

12 avatar string Ảnh đại diện của Boss

13 coverImage string Ảnh cover

● Bảng racesSTT Tên thuộc tính Kiểu dữ liệu Ý nghĩa

1 _id objectId Mã giống của pet

3 image string Ảnh nhận diện

5 createdAt datetime Ngày tạo

6 updatdAt datetime Ngày cập nhật gần đây

● Bảng typeofwikisSTT Tên thuộc tính Kiểu dữ liệu Ý nghĩa

3 createdAt datetime Ngày tạo

4 updatdAt datetime Ngày cập nhật gần đây

● Bảng wikicategories

STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa

1 _id title Mã phân loại bài báo

2 title string Tiêu đề phân loại bài báo

4 typeOfWikiId objectId Mã loại Wiki

6 updatdAt date Ngày cập nhật gần đây

● Bảng postcategoriesSTT Tên thuộc tính Kiểu dữ liệu Ý nghĩa

1 _id objectId Mã bài post wiki

2 title string Tiêu đề bài báo

3 content string Nội dung bài báo

5 wikiCategoryId objectId Mã phân loại bài báo

9 createdAt datetime Ngày tạo

10 updatedAt datetime Ngày cập nhật gần đây

3.2.4 Mô tả giao diện

a) Giao diện đăng nhập hệ thống

Người dùng cần tiến đến giao diện đăng ký tài khoản nếu chưa có tài khoảnđăng nhập

Hoặc đăng nhập nếu đã có tài khoản

Người dùng gõ chính xác email và password để đăng nhập và có thể tìm lại mật khẩu khi quên.

b) Giao diện tab Story

Dùng để các “Sen” đăng bài và tương tác với các thành viên như một mạng xã hội dành cho các “Sen”

c) Giao diện Home

Nơi để các “Sen” thêm, cập nhật thông tin của các “Boss” Ngoài ra còn cung cấp các tính năng mua bán, trao đổi PET và còn có hơi set kèo hẹn hò cho các chiếc thú của chúng ta

Với giao diện thêm “Boss”

Đầu tiên là chọn loại Boss của mình muốn thêm, ví dụ mình muốn thêm chó thì chọn Dog Sau đó thì thêm thông tin cho chiếc cún đáng yêu của chúng ta nữa thôi là hoàn thành rồi

d) Giao diện thông báo

Hiển thị danh sách thông báo hoạt động

e) Giao diện cài đặt

Dùng để quản lý các cài đặt, quản lý profile của “Sen”, “Boss” và chưa tin nhắn tương tác giữa các “Sen”

3.2.5 Các áp dụng chính của Framework Expressjs vào đề tài

Expressjs là một framework được xây dựng trên nền tảng của Nodejs Nó cung cấp các tính năng mạnh mẽ để phát triển web hoặc mobile Expressjs

hỗ trợ các method HTTP và middleware tạo ra API vô cùng mạnh mẽ và dễ

sử dụng

Tất cả các ứng dụng chính đều được áp dụng

a) Thuê Manager (require statements)

Express giúp tạo ra người quản lí để load các gói module được tải vềlên để ứng dụng sử dụng

b) Middleware

Với tư tưởng chung là cầu nối giữa tương tác của người dùng và phần nhân của hệ thống, trong lập trình Web, Middleware sẽ đóng vai trò trung gian giữa request/response (tương tác với người dùng) và các xử lý logic bên trong web server

Do đó, Middleware trong các Framework lập trình Web (ExpressJS),

sẽ là các hàm được dùng để tiền xử lý, lọc các request trước khi đưa vào xử

lý logic hoặc điều chỉnh các response trước khi gửi về cho người dùng.c) Routing và Router

Routing trong Nodejs là một khái niệm nói đến việc xác định ứng dụng sẽ đáp ứng như thế nào khi người dùng tạo một request đến một endpoint (Điểm cuối) cụ thể nào đó Điểm cuối đó thường là một URI hoặc một đường dẫn (Path) với một Request method (POST, PUT, GET, ) cụ thể

Router là phương thức khai báo để đáp lại request từ client, nó có thểhiểu tương tự như một Request mapping Nói đơn giản hơn là định nghĩa URL cho trang web mà người dùng sẽ tương tác Một số định nghĩa router thường dùng

Chương 4: Thử nghiệm, đánh giá

4.1 Môi trường thử nghiệm

a) Máy khách:

Máy 1:

● Laptop Core I5, 8GB RAM

● Trình duyệt Google Chrome v83, Firefox 77

● Giao diện cực đẹp, reload mượt

● Tuy nhiên API fetch còn chậm do demo trên server miễn phí

4.3 Đánh giá kết quả sản phẩm

Sản phẩm hoạt động đúng với 90% yêu cầu nhóm đề ra Các chức năng đềuhoạt động tốt, giao diện được thiết kế đẹp, thuận mắt Tuy nhiên còn một vài lỗi phát sinh như phần mềm hoạt động không ổn định là máy chủ miễn phí Nhóm sẽ cố gắng khắc phục những bất cập trên trong thời gian sớm nhất để tạo ra ứng dụng hoàn hảo