Xây dựng ứng dụng di động cho hội thảo atigb của trường đại học sư phạm kĩ thuật đà nẵng

Điều đó đòi hỏi phải có một hệ thống tốt để hỗ trợ thực hiện công việc.Ứng dụng hỗ trợ các đối tượng liên quan như người quan tâm hội thảo, độc giả,người viết bài, người phản biện dễ dàn

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT



ĐỒ ÁN CHUYÊN NGÀNH

XÂY DỰNG ỨNG DỤNG DI ĐỘNG CHO HỘI THẢO ATiGB CỦA TRƯỜNG ĐẠI HỌC SƯ

PHẠM KĨ THUẬT ĐÀ NẴNG

Giảng viên hướng dẫn : ThS Đỗ Phú Huy

Sinh viên thực hiện : Bùi Xuân Đắc

: Lê Thị Thúy Ngân

Đà Nẵng, tháng 7 năm 2020

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT



ĐỒ ÁN CHUYÊN NGÀNH

XÂY DỰNG ỨNG DỤNG DI ĐỘNG CHO HỘI THẢO ATiGB CỦA TRƯỜNG ĐẠI HỌC SƯ

PHẠM KĨ THUẬT ĐÀ NẴNG

Đà Nẵng, tháng 7 năm 2020

LỜI CẢM ƠN

Trong suốt thời gian 3 năm học tập và rèn luyện tại Trường Đại học Sư phạm Kỹ thuật – Đại học Đà Nẵng cho đến nay, em đã nhận được rất nhiều sự quan tâm, giúp đỡ của quý Thầy Cô và bạn bè Với lòng biết ơn sâu sắc và chân thành nhất, em xin gửi đến quý Thầy Cô ở Khoa Điện - Điện tử – Trường Đại học Sư phạm Kỹ thuật - Đại học Đà Nẵng đã cùng với tri thức và tâm huyết của mình để truyền đạt vốn kiến thức quý báu cho chúng em trong suốt thời gian học tập tại trường.

Em xin chân thành cảm ơn ThS Đỗ Phú Huy đã tận tâm hướng dẫn em qua từng buổi học trên lớp cũng như những buổi nói chuyện, thảo luận về đề tài tốt nghiệp này trong suốt học kỳ vừa qua.

Em cũng xin bày tỏ lòng biết ơn đến ban lãnh đạo của Trường Đại học Sư phạm Kỹ thuật và các Khoa, Phòng ban chức năng đã trực tiếp và gián tiếp giúp đỡ em trong suốt quá trình học tập và nghiên cứu đề tài này.

Không thể không nhắc tới sự chỉ đạo của Ban lãnh đạo Công ty Cổ phần Công nghệ IRTECH, nhờ có sự giúp đỡ nhiệt tình của các anh chị ở các phòng ban, đã tạo điều kiện thuận lợi nhất cho tôi trong suốt thời gian thực tập tại Công ty Cổ phần Công nghệ IRTECH.

Với điều kiện thời gian cũng như kinh nghiệm còn hạn chế của một sinh viên, bài báo cáo này không thể tránh được những thiếu sót Em rất mong nhận được sự chỉ bảo, đóng góp ý kiến của các quý thầy cô để tôi có điều kiện bổ sung, nâng cao ý thức của mình, phục vụ tốt hơn công tác thực tế sau này.

Em xin chân thành cảm ơn !

Đà Nẵng, ngày 20 tháng 7 năm 2020

Sinh viên thực hiện

Bùi Xuân Đắc- Lê Thị Thúy Ngân

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

Đà Nẵng, ngày tháng năm 2020

GVHD

NHẬN XÉT CỦA HỘI ĐỒNG PHẢN BIỆN

iii

Đà Nẵng, ngày tháng năm 2020

HĐPB

MỤC LỤC

LỜI CẢM ƠN i

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN ii

NHẬN XÉT CỦA HỘI ĐỒNG PHẢN BIỆN iii

MỤC LỤC iv

DANH MỤC HÌNH ẢNH vii

CHƯƠNG I: TỔNG QUAN ĐỀ TÀI 1

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

2 Mục tiêu và nhiệm vụ 1

2.1 Mục tiêu 1

2.2 Nhiệm vụ 1

3 Đối tượng và phạm vi nghiên cứu 2

3.1 Đối tượng 2

3.2 Phạm vi nghiên cứu 2

4 Phương pháp nghiên cứu 2

6 Tổng kết 2

CHƯƠNG II: CƠ SỞ LÝ THUYẾT 3

1 Giao diện lập trình ứng dụng (API) 3

1.1 API là gì ? 3

1.2 Ưu điểm và nhược điểm 4

2 Ngôn ngữ lập trình (React Native) 4

2.1 Tổng quan về React Native 4

2.2 Ưu điểm và nhược điểm 5

CHƯƠNG III: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 7

1 Sơ đồ Use Case 7

2 Đặc tả Use Case 7

2.1 Đăng nhập 7

2.2 Đổi mật khẩu 8

2.3 Xem danh sách bài báo 9

2.4 Xem thông tin tài khoản cá nhân 10

2.5 Quên mật khẩu 11

2.6 Xem danh sách nhà tài trợ 12

2.7 Xem thông tin bài báo 13

2.8 Xem lịch sự kiện 14

2.9 Xem danh sách tác giả 15

3 Sơ đồ ERD 18

4 Tìm nạp dữ liệu API 19

body: formData }) 19

5 Các API tiêu biểu 19

5.1 API đăng nhập 19

5.2 API đăng ký 20

CHƯƠNG IV: THIẾT KẾ CƠ SỞ DỮ LIỆU 23

1 Bảng dữ liệu 23

1.1 Bảng người dùng (Users) 23

1.2 Bảng quản trị viên (table_admin) 24

1.3 Bảng đánh giá (table_rating) 25

1.4 Bảng Chương trình nghị sự (Agenda) 25

1.5 Bảng hội nghị (Conference) 27

1.6 Bảng tác giả (table_notification) 28

1.7 Bảng bài báo (table_ user_paper) 28

1.8 Bảng nhà tài trợ chính(table_sponsor) 29

1.9 Bảng thiết bị người dùng (table_device_user) 29

1.10 Bảng phiên làm việc (table_section) 30

1.11 Bảng ngôn ngữ(table_language) 30

1.12 Bảng các ban của hội nghị ( table_committee) 30

1.13 Bảng (table_committee_member) 31

CHƯƠNG V: KẾT QUẢ THỰC HIỆN 32

1 Thiết kế giao diện 32

1.1 Màn hình Đăng nhập 32

1.2 Màn hình trang chủ 32

1.3 Màn hình danh sách Agenda 33

1.4 Màn hình diễn giả 34

1.5 Màn hình danh sách người tham dự 35

KẾT LUẬN 39

1 Ưu điểm 39

2 Hướng phát triển 39

PHỤ LỤC 40

1 Cài đặt ứng dụng 40

2 Tài liệu tham khảo 40

DANH MỤC HÌNH ẢNH

Hình 1 Cách hoạt động của API 3

Hình 2: Sơ đồ Use Case tổng quát 7

Hình 3: Sơ đồ hoạt động đăng nhập 8

Hình 4 Sơ đồ hoạt động đổi mật khẩu 9

Hình 5 Sơ đồ hoạt động xem danh sách bài báo 10

Hình 6 Sơ đồ hoạt động xem thông tin tài khoản 11

Hình 7 Sơ đồ hoạt động quên mật khẩu 12

Hình 8: Sơ đồ hoạt động Xem danh sách nhà tài trợ 13

Hình 9: Sơ đồ hoạt động Xem thông tin bài báo 14

Hình 10: Sơ đồ hoạt động Xem lịch sự kiện 15

Hình 11: Sơ đồ hoạt động Xem danh sách tác giả 16

Hình 12: Sơ đồ ERD 18

Hình 13: Màn hình đăng nhập 32

Hình 14: Màn hình Trang chủ 33

Hình 15: Màn hình danh sách Agenda 34

Hình 16: Màn hình hiển thị danh sách diễn giả 35

Hình 17: Màn hình danh sách Người tham dự 36

Hình 18: Màn hình danh sách nhà tài trợ 37

Hình 19: Màn hình chức năng 38

1Bùi Xuân Đắc – Lê Thị Thúy Ngân

Xây dựng ứng dụng di động hỗ trợ cho hội thảo ATiGB

CHƯƠNG I: TỔNG QUAN ĐỀ TÀI

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

Với tình trạng ô nhiễm môi trường, khí hậu chuyển biến như hiện nay thì cácbiện pháp phát triển đi kèm với giảm thiểu ô nhiễm môi trường đang là xu hướng.Không nằm ngoài xu hướng này thì trường Đại học Sư phạm Kĩ Thuật Đà Nẵng

đã tổ chức hội thảo thường niên AtiGB (Applying New Technology in GreenBuilding) với các chủ đề chính xoay quanh như:

Từ những lý do trên, chúng tôi chọn đề tài “Xây dựng ứng dụng di dộng hỗ trợhội thảo ATiGB cho trường Đại học Sư Phạm Kĩ Thuật Đà Nẵng” làm hướngnghiên cứu cho đề tài

2 Mục tiêu và nhiệm vụ

2.1 Mục tiêu

Việc quản lý và mở rộng đối tượng tham gia hội thảo là điều mà nhà trườnghướng tới Điều đó đòi hỏi phải có một hệ thống tốt để hỗ trợ thực hiện công việc.Ứng dụng hỗ trợ các đối tượng liên quan như người quan tâm hội thảo, độc giả,người viết bài, người phản biện dễ dàng theo dõi thao tác trên di động nhằm đápứng kịp thời công việc Mục tiêu của đề tài này là xây dựng một ứng dụng di độngvới giao diện trực quan, dễ dàng sử dụng, hỗ trợ quản lý

2.2 Nhiệm vụ

- Nghiên cứu về các nghiệp vụ cần thiết khi xây dựng ứng dụng di động

- Thiết kế giao diện trực quan đối với người dùng

- Nghiên cứu về ngôn ngữ, các công cụ để phục vụ cho việc xây dựng ứngdụng

3 Đối tượng và phạm vi nghiên cứu

4 Phương pháp nghiên cứu

- Phương pháp thu thập: Áp dụng phương pháp nghiên cứu lý thuyết (phươngpháp thu thập thông tin qua sách, các tài liệu, trang web) để tìm được các cơ

sở lý thuyết liên quan đến vấn đề mình nghiên cứu

- Phương pháp phân tích, đánh giá: dựa vào những cơ sở lý thuyết đã tìmđược và nhìn nhận vấn đề vào thực tế để lựa chọn giải pháp hoàn thiện đềtài

- Phương pháp tổng hợp: Áp dụng lựa chọn tốt nhất từ bước phân tích kếthợp với công nghệ, từ đó từng bước hoàn thành đề tài

5 Kế hoạch thực hiện

STT Công việc Thời gian Ghi chú

1 Tìm hiểu qui trình nghiệp vụ thực tế của Hội thảo 1 tuần

2 Phân tích thiết kế hệ thống 3 tuần

4 Thiết kế giao diện mobile 2 tuần

5 Xây dựng các chức năng chính 4 tuần

6 Tổng kết

Nội dung đồ án bao gồm

Chương I: Tổng quan đề tài

Chương II: Cơ sở lý thuyết

Chương III: Phân tích thiết kế hệ thống

Chương IV: Kết quả thực hiện

Kết luận

Phụ lục

CHƯƠNG II: CƠ SỞ LÝ THUYẾT

1 Giao diện lập trình ứng dụng (API)

1.1 API là gì ?

API – Application Programming Interface – giao diện lập trình ứng dụng,

là phương thức kết nối giữa các thư viện và ứng dụng khác nhau với mục đíchcuối là giúp ứng dụng của người dùng có thể truy cập đến một tệp các hàm thựchiện chức năng như tương tác hoặc trao đổi thông tin với nhau

Vì là mã nguồn mở nên bạn được sử dụng bất kì client nào có hỗ trợ XML,JSON Điểm cộng của API là có cấu hình đơn giản hỗ trợ chức năng RESTful

Hình 1 Cách hoạt động của API

RESTful API được định nghĩa là một tiêu chuẩn dùng trong việc thiết kế APIcho các ứng dụng web để tiện cho việc quản lý các resource RESTful API đang

là kiểu thiết kế được sử dụng phổ biến nhất đối với dân lập trình hiện nay

API mô tả cũng như quy định các hoạt động mong muốn mà thư viện cungứng Một API có thể có nhiều cách triển khai hoạt động khác nhau API cũng cóthể giúp cho một chương trình được viết bằng ngôn ngữ này nhưng có thể sử dụngđược thư viện viết bằng ngôn ngữ khác Nếu dựa trên quyền truy cập thì có thểphân API thành các loại sau:

API mở (Open API): Có sẵn, công khai, không hạn chế quyền truy cập.

API đối tác (Partner API): Cần có quyền hoặc giấy phép cụ thể mới truy cập.

API nội bộ (Internal API): Chỉ dùng cho các hệ thống nội bộ (chẳng hạn như

công ty, tổ chức) Các đội ngũ phát triển nội bộ khác nhau có thể sử dụng chúng

để cải thiện cho các sản phẩm hay dịch vụ chỉ phục vụ cho riêng nhân viên côngty

1.2 Ưu điểm và nhược điểm

- Ưu điểm của API

 Tính tự động hóa rất cao: API có thể thay thế chúng ta quản lý công việc

cực kì hiệu quả API giúp các cơ quan có thể cập nhật, xử lý hoàn thiệncông việc nhanh và chất lượng hơn

 Ứng dụng cực kỳ linh hoạt: API có thể truy cập vào các thành phần ứng

dụng giúp việc cung cấp dịch vụ và thông tin linh hoạt hơn nhiều

 Khả năng thích ứng tốt: API có chức năng thay đổi cũng như dự đoán

thay đổi theo thời gian cho nên dữ liệu được truyền tốt hơn, thông tin đượcchọn lọc kĩ hơn, dịch vụ tốt hơn

 Cá nhân hóa: Người dùng có thể tinh chỉnh API cho phù hợp nhu cầu sử

dụng

 Dữ liệu có sẵn: API cho phép mọi thông tin được tạo ở dạng chính chủ

luôn có sẵn cho mọi người xem được

 Phạm vi: Ngoài dữ liệu mới có sẵn được chia sẻ rộng rãi, người dùng còn

có thể hiệu chỉnh web API để cung cấp dịch vụ, thông tin cá nhân hóa

- Nhược điểm của API

 API chỉ hỗ trợ mặc định get, post chưa hoàn toàn là restful service.

sử dụng, người dùng khó mà nhớ và dùng dễ dàng như các ứng dụng khác

 Web API tốn kha khá chi phí vận hành, phát triển, hiệu chỉnh và đòi hỏi

kiến thức chuyên sâu Khi bị tấn công hệ thống, người dùng đôi lúc gặp rắcrối về bảo mật

2 Ngôn ngữ lập trình (React Native)

2.1 Tổng quan về React Native

Đầu tiên, chúng ta cần hiểu về ứng dụng Native là gì Đó là những ứng dụngđược viết riêng cho một loại nền tảng như iOS, Android, Windows Phone bằng

các ngôn ngữ tương ứng của mỗi nền tảng đó ví dụ Java trên Android, Object Ctrên

iOS, C# trên winphone Mỗi Native App chỉ chạy được trên một nền tảng vàkhông thể mang sang các nền tảng khác Ví dụ game cho iOS sẽ không thể chạyđược trên các máy Android Đa phần các game mobile hiện nay là Native App.Vậy còn React Native, nó giúp gì trong việc xây dựng một Native App? ReactNative được phát triển bởi Facebook với mục đính ban đầu là áp dụng vào mạng

xã hội lớn nhất hành tinh: Facebook Do đặc tính công nghệ của mạng xã hội,Facebook cần phải tạo ra nền tảng phát triển ứng dụng di động đa nền tảng có hiệunăng không thua kém so với ứng dụng được phát triển độc lập cho từng nền tảng.React Native chính thức trở thành mã nguồn mở vào tháng 3 năm 2015 Với100% Native UI, React Native tạo nên sự “mượt mà” trong việc render UI và xóanhòa khoảng cách về hiệu năng giữa ứng dụng đa nền tảng so với ứng dụng độclập nền tảng Bởi vì với React Native, lập trình viên có thể “Code một lần, chạynhiều chỗ” REACT Native giúp bạn tạo các mobile apps thực sự và thú vị với sựtrợ giúp của JavaScript hỗ trợ cho cả nền tảng Android và iOS Chỉ cần code mộtlần, các REACT Native apps luôn có sẵn cho cả nền tảng iOS và Android, giúpcác nhà phát triển tiết kiệm thời gian tối đa Được chống lưng bởi Facebook,REACT Native sở hữu một cộng đồng hỗ trợ rất lớn hiện nay

2.2 Ưu điểm và nhược điểm

- Nhược điểm

 Bảo mật không cao do dựa trên JS.

CHƯƠNG III: PHÂN TÍCH THIẾT KẾ HỆ THỐNG

1 Sơ đồ Use Case

Hình 2: Sơ đồ Use Case tổng quát

2 Đặc tả Use Case

2.1 Đăng nhập

- Tên Use Case: Đăng nhập

- Mô tả: Người dùng muốn đăng nhập vào ứng dụng để sử dụng dịch vụ từ ứng dụng

- Mục đích: Đảm bảo xác thực thông tin người sử dụng

- Tác nhân: Người dùng ứng dụng

- Điều kiện trước:

- Điều kiện sau:

 LocalStorage lưu thông tin đăng nhập của người dùng

- Sơ đồ hoạt động:

Hình 3: Sơ đồ hoạt động đăng nhập

2.2 Đổi mật khẩu

- Tên Use Case: Đổi mật khẩu

- Mô tả: Người dùng muốn đổi mật khẩu

- Mục đích: Tăng tính bảo mật cho tài khoản của người dùng

- Tác nhân: Người dùng ứng dụng

- Điều kiện trước:

- Điều kiện sau:

- Sơ đồ hoạt động:

Hình 4 Sơ đồ hoạt động đổi mật khẩu

2.3 Xem danh sách bài báo

- Tên Use Case: Xem danh sách bài báo

- Mô tả: Người dùng được phép xem những bài báo đã gửi cho hệ thống trước đó

- Mục đích:

- Tác nhân: Người dùng ứng dụng

- Điều kiện trước:

 Thiết bị được kết nối với internet

- Điều kiện sau: không có

- Sơ đồ hoạt động:

Hình 5 Sơ đồ hoạt động xem danh sách bài báo

2.4 Xem thông tin tài khoản cá nhân

- Tên Use Case: Xem thông tin tài khỏa cá nhân

- Mô tả: Người dùng bấm vào tab Tài khoản để xem thông tin tài khoản cánhân đã đăng kí

- Mục đích: Giúp người dùng xem được thông tin tài khoản của mình để có thể điều chỉnh kịp thời nếu phát hiện sai sót

- Tác nhân: Người dùng hệ thống

- Điều kiện trước:

- Điều kiện sau:

- Sơ đồ hoạt động:

Hình 6 Sơ đồ hoạt động xem thông tin tài khoản

2.5 Quên mật khẩu

- Tên Use Case: Quên mật khẩu

- Mô tả: Người dùng điền email dùng để đăng ký tài khoản và nhấn nút gửi

- Mục đích: Giúp người dùng lấy lại mật khẩu khi quên mật khẩu cũ

- Tác nhân: Người dùng ứng dụng

- Điều kiện trước:

- Điều kiện sau:

- Sơ đồ hoạt động:

Hình 7 Sơ đồ hoạt động quên mật khẩu

2.6 Xem danh sách nhà tài trợ

- Tên usecase: Xem danh sách nhà tài trợ

- Mô tả: Người dùng được phép xem những nhà tài trợ đã có trong hệ thống

- Mục đích:

- Tác nhân: Người dùng ứng dụng

- Điều kiện trước:

- Điều kiện sau: không có

- Sơ đồ hoạt động:

Hình 8: Sơ đồ hoạt động Xem danh sách nhà tài trợ

2.7 Xem thông tin bài báo

- Tên Use Case: Xem thông tin bài báo

- Mô tả: Người dùng bấm vào tab Bài báo để xem thông tin bài báo đã up trước đó

- Mục đích: Giúp người dùng xem được thông tin bài báo để có thể điều chỉnh kịp thời nếu phát hiện sai sót

- Tác nhân: Người dùng hệ thống

- Điều kiện trước:

- Điều kiện sau:

- Sơ đồ hoạt động:

Hình 9: Sơ đồ hoạt động Xem thông tin bài báo

2.8 Xem lịch sự kiện

- Tên Use Case: Xem lịch sự kiện

- Mô tả: Người dùng bấm vào tab Sự kiện để xem thông tin lịch của các sự kiện được up lên trên hệ thống

- Mục đích: Giúp người dùng xem được thông tin các sự kiện để có thể nắm bắt được các sự kiện của hội thảo

- Tác nhân: Người dùng hệ thống

- Điều kiện trước:

- Điều kiện sau:

- Sơ đồ hoạt động:

Hình 10: Sơ đồ hoạt động Xem lịch sự kiện

2.9 Xem danh sách tác giả

- Tên usecase: Xem danh sách tác giả

- Mô tả: Người dùng được phép xem những tác giả đã có trong hệ thống

- Mục đích: Xem được danh sách tác giả

- Tác nhân: Người dùng ứng dụng

- Điều kiện trước:

- Điều kiện sau: không có

- Sơ đồ hoạt động: