TRƯỜNG ĐẠI HỌC BÁCH KHOA KHOA CÔNG NGHỆ THÔNG TIN Tel (84-236) 3736949, Fax (84-236) 3842771 Website: http://dut.udn.vn/khoacntt, E-mail: cntt@dut.udn.vn BÁO CÁO THỰC TẬP CÔNG NHÂN PHẦN THIẾT KẾ WEBSITE ĐỀ TÀI: 43Drinks – Uống Ở đâu Đà Nẵng? Đà Nẵng, 12/2018 MỤC LỤC MỞ ĐẦU CHƯƠNG 1: CƠ SỞ LÝ THUYẾT LIÊN QUAN Giới thiệu HTML CSS 1.1.1 HTML 1.1.2 CSS 1.2 Giới thiệu JavaScript 1.2.1 Giới thiệu ReactJS 1.2.2 Giới thiệu Redux – Redux Saga 1.2.3 Tổng quan NodeJS 1.3 Giới thiệu PosgreSQL 1.4 Giới thiệu số thư viện, module, frame-work khác có sử dụng 11 1.4.1 Ant.Design UI 11 1.4.2 React-admin Framework 11 1.4.3 Babel 11 1.4.4 Bcrypt 11 1.4.5 JSON Web Token 12 1.4.6 Formidable, Fs-Extra, 12 1.4.7 Sequelize 12 1.1 CHƯƠNG 2: PHÂN TÍCH & THIẾT KẾ HỆ THỐNG 13 Phân tích toán 13 2.1.1 Phân tích yêu cầu đề 13 2.1.2 Phân tích chức 13 2.1.3 Phân tích trạng 14 2.2 Thiết kế hệ thống 14 2.2.1 Biểu đồ Use-case 14 2.2.2 Biểu đồ Activity 16 2.2.3 Sơ đồ Class 24 2.1 CHƯƠNG 3: TRIỂN KHAI & ĐÁNH GIÁ KẾT QUẢ 25 3.1 3.2 3.3 Môi trường triển khai 25 Hình ảnh demo chương trình 25 Kết thu đánh giá 30 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 32 TÀI LIỆU THAM KHẢO 33 DANH SÁCH HÌNH ẢNH Hình Cấu trúc trang HTML Hình Mô tả Virtual DOM Hình Mơ tả One-way data pending Hình Cấu trúc Redux Hình Redux data flow Hình Bảng điều khiển Admin – Quản lí thành viên 25 Hình Bảng điều khiển Admin– Thêm thành viên 26 Hình Bảng điều khiển Admin – Chỉnh sửa thành viên 26 Hình Bảng điều khiển Admin – Quản lí địa điểm 27 Hình 10 Bảng điều khiển Admin – Chỉnh sửa địa điểm 27 Hình 11 Trang Đăng nhập cho thành viên 28 Hình 12 Giao diện trang chủ 28 Hình 13 Danh sách địa điểm trang chủ 29 Hình 14 Trang chi tiết địa điểm 29 Hình 15 Trang kết tìm kiếm theo địa 30 Hình 16 Trang thêm địa điểm cho thành viên 30 DANH SÁCH TỪ VIẾT TẮT Từ viết tắt Diễn giải IP Internet Protocol MD5 Message-Degist Algorithm SHA Secure Hash Algorithm API Application Programming Interface URL Uniform Resource Locator HTML Hypertext Markup Language CSS Cascading Style Sheets SQL Structured Query Language UI User Interface MỞ ĐẦU Tổng quan đề tài Với xu xã hội phát triển thời điểm tại, ẩm thực nói chung loại đồ uống nói riêng, tất gia tăng cách chóng mặt số lượng chất lượng Và hệ trước xu đó, quán Caffe/Dessert ngày mọc lên ngày nhiều, mà cá nhân khơng thể biết hết tất địa điểm xuất ngày nhiều, từ 43Drinks xuất để người chia sẻ nơi biết, tạo nơi người dễ dàng tìm kiếm thấy địa điểm phù hợp nhu cầu thời điểm 43Drinks cần đưa gợi ý địa điểm cho người, đồng thời tạo nơi cho người chia sẻ địa điểm mới, hỗ trợ tìm kiếm địa điểm phù hợp người dùng theo nhu cầu cụ thể Mục đích ý nghĩa đề tài 2.1 Mục đích Hỗ trợ người dễ dàng tìm thấy địa điểm điểm điểm cho có điều kiện phù hợp với mong muốn, nhu cầu Tạo nơi để người chia sẻ địa điểm tốt, ngon lạ 2.2 Ý nghĩa Tối giản hóa thời gian cần thiết muốn tìm địa điểm thưởng thức đồ uống phù hợp cho người Phương pháp thực Phương pháp phân tích thiết kế hệ thống: sử dụng sơ đồ để mô tả yêu cầu hệ thống (use case, activity, class) Phương pháp thử nghiệm, đánh giá kết Bố cục đề tài Báo cáo đề tài bao gồm nội dung sau: Mở đầu Chương 1: Cơ sở lí thuyết liên quan Chương 2: Phân tích & thiết kế hệ thống Chương 3: Triển khai đánh giá kết Kết luận hướng phát triển Phân công tổ chức công việc Các công việc phân công theo Task Trello Mã nguồn hệ thống cập nhật đồng GitHub Các thành viên họp theo định kì để kiểm tra tiến độ thảo luận vấn đề nảy sinh Bảng phân công công việc cụ thể bảng dưới: STT Tên Thành Viên Công Việc 1) Phân tích yêu cầu thiết kế giao diện, hệ thống, sở liệu Đào Hữu Minh 2) Hỗ trợ nghiên cứu, triển khai giải vấn đề, cố mà thành viên khác gặp phải 3) Viết báo cáo 1) Nghiên cứu modules, framework, thư viện liên quan đến lập trình giao diện ứng dụng vào hệ thống Nguyễn Văn Hoàng 2) Xây dựng giao diện cho trang: Trang chủ, Xem chi tiết, Thêm địa điểm, Đăng nhập, Bảng điều khiển Quản Trị Viên 1) Xây dựng sở liệu dựa theo đặc tả ban đầu 2) Nghiên cứu modules, framework, Trần Quốc Lâm thư viện liên quan đến lập trình Backend ứng dụng vào hệ thống 3) Lập trình Backend 4) Chỉnh sửa báo cáo Xây dựng liệu ban đầu, triển khai Cả nhóm hệ thống lên máy chủ, kiểm thử tính CHƯƠNG 1: CƠ SỞ LÝ THUYẾT LIÊN QUAN 1.1 Giới thiệu HTML CSS 1.1.1 HTML HTML từ viết tắt cho HyperText Markup Language ngôn đánh dấu siêu văn bản, dùng để định dạng bố cục, cách xếp phần tử trang web Theo trang web gồm phần sau: Phần đầu: header, chứa logo, câu slogan, liên kết, banner liên kết, button, đoạn flash, form ngắn form tìm kiếm, Phần liên kết tồn cục: global navigation, dùng để chứa liên kết đến trang quan trọng tồn trang, phần chứa thêm liên kết (sub navigation) Phần thân trang: page body, phần chứa phần nội dung (content) phần nội dung phụ (sidebar) Phần nội dung chính: content, phần chứa nội dung cần thể cho người dùng xem Phần nội dung phụ: sidebar, phần chứa liên kết phụ trang (local navigation), banner chứa liên kết liên quan, dùng để chứa liên kết quảng cáo, Phần cuối trang web: footer, phần thường chứa phần liên hệ như: tên công ty, địa chỉ, số điện thoại, mail liên hệ, đặc biệt copyright, chứa liên kết tồn trang, banner liên kết, Hình Cấu trúc trang HTML 1.1.2 CSS CSS chữ viết tắt Cascading Style Sheet, đơn thuẩn file text với phần mở rộng css Nếu HTML cho phép thiết kế cấu trúc trang web css giúp thiết phần định dạng (style) cho trang web Các loại css thơng dụng mà trang web có:  Background: định dạng hình nên cho html  Text, Font: định dạng cách hiển thị đoạn text, kiểu chữ 1.2 Giới thiệu JavaScript Javascript ngơn ngữ lập trình dùng để giúp trang web có tính tương tác Các slideshow, pop-up quảng cáo tính autocomplete Google viết Javascript Được phát triển từ năm 1995, ban đầu Javascript không coi trọng sử dụng để trang trí website (front-end) Nhưng ngơn ngữ ngày tiếp tục phát triển trở thành ngơn ngữ lập trình phổ biến giới Các thư viện xây dựng giao diện người dùng viết Javascript kể đến AngularJs Google ReactJs Facebook Ngoài ra, với xuất framework Nodejs, Javascript sử dụng để lập trình phía máy chủ (backend) 1.2.1 Giới thiệu ReactJS ReactJs thư viện UI Javascript, phát triển Facebook để xây dựng trang web có tính tương tác cao Một điểm hấp dẫn thư viện thư viện tự động cập nhật HTML, giảm bớt khối lượng công việc cho server Một số khái niệm ReactJs Virtual DOM : Việc node gốc có trạng thái thay đổi tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree phải thay đổi phần, điều ảnh hưởng đến tốc độ xử lý React JS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề Virtual DOM object Javascript, object chứa đầy đủ thông tin cần thiết để tạo DOM, liệu thay đổi tính tốn thay đổi object tree thật, điều giúp tối ưu hoá việc re-render DOM tree thật 21 22 23 2.2.3 Sơ đồ Class 24 CHƯƠNG 3: TRIỂN KHAI & ĐÁNH GIÁ KẾT QUẢ 3.1 Môi trường triển khai Đề tài lập trình giao diện ReactJS Phần Backend lập trình NodeJS Hệ sở liệu sử dụng PostgreSQL Hệ thống triển khai lên máy chủ Heroku 3.2 Hình ảnh demo chương trình Hình Bảng điều khiển Admin – Quản lí thành viên 25 Hình Bảng điều khiển Admin– Thêm thành viên Hình Bảng điều khiển Admin – Chỉnh sửa thành viên 26 Hình Bảng điều khiển Admin – Quản lí địa điểm Hình 10 Bảng điều khiển Admin – Chỉnh sửa địa điểm 27 Hình 11 Trang Đăng nhập cho thành viên Hình 12 Giao diện trang chủ 28 Hình 13 Danh sách địa điểm trang chủ Hình 14 Trang chi tiết địa điểm 29 Hình 15 Trang kết tìm kiếm theo địa Hình 16 Trang thêm địa điểm cho thành viên 3.3 Kết thu đánh giá Hệ thống hoạt động ổn định, thực đa số chức mà u cầu đề Khách dễ dàng tìm kiếm, lọc hay xem danh sách, chi tiết địa điểm Thành viên chia sẻ địa điểm biết 30 Quản trị viên quản lí thành viên địa điểm thông qua bảng điều khiển Khơng có lỗi nghiêm trọng phát sinh q trình triển khai Dù vậy, nhiều chức chưa hoàn thiện chưa triển khai 31 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN KẾT QUẢ ĐẠT ĐƯỢC Trong thời gian tìm hiểu, nghiên cứu sở lý thuyết triển khai ứng dụng công nghệ, đề tài đạt kết sau: Về mặt lý thuyết, đề tài giúp sinh viên hiểu thêm bố cục, cấu trúc trang web, nắm bắt rõ HTML CSS JavaScript Đặc biệt hiểu ứng dụng ReactJS NodeJS, sử dụng sở liệu PostgreSQL vào thực tiễn để lập trình Đây ngơn ngữ có nhiều tiềm để phát triển sau Về mặt thực tiễn ứng dụng, đề tài xây dựng trang web – hệ thống bao gồm chức đề Hệ thống triển khai tốt, giúp sinh viên có nhiều kinh nghiệm triển khai hệ thống thực tế Tuy nhiên, đề tài tồn vấn đề sau:  Giao diện chưa thật thân thiện với người dùng  Chức bình luận, đánh giá thành viên cho địa điểm chưa triển khai  Chưa phân loại loại địa điểm với Tag cụ thể  Đăng kí thành viên chưa thuận tiện  Hiện chỉnh sửa thơng tin thơng qua Quản trị viên  Bảng điều khiển Quản trị viên sơ sài HƯỚNG PHÁT TRIỂN Một số số hướng nghiên cứu phát triển đề tài sau:  Cải thiện giao diện hệ thống  Tiếp tục hoàn thiện chức đề ra, thực chức  Xây dựng thêm ứng dụng điện thoại 32 TÀI LIỆU THAM KHẢO Tiếng Việt [1] Phan Huy Khánh, Giáo trình Phân tích Thiết kế Hệ thống thơng tin, ĐH Bách Khoa Đà Nẵng [2] Lê Thị Mỹ Hành, Giáo trình Cơng nghệ phần mềm, ĐH Bách Khoa Đà Nẵng Internet [3] https://reactjs.org [4] https://nodejs.org/en [5] http://www.w3schools.com [6] https://www.postgresql.org [7] https://ant.design [8] https://github.com/marmelab/react-admin [9] https://viblo.asia [10] https://www.codehub.vn [11] https://heroku.com 33 PHỤ LỤC Phần trình bày cách cài đặt cấu hình website lên mạng Internet hướng dẫn sử dụng (quản trị admin, chức phân quyền) Cách cài đặt (upload) lên mạng Internet (Máy chủ Heroku) 1.1 Cách deploy Nodejs lên Heroku - Người dùng cần tạo tài khoản heroku, cài đặt ứng dụng Heroku cli - Truy cập https://dashboard.heroku.com chọn Create new app, nhập tên ứng dụng vào mục App name, chọn builpack Nodejs cho ứng dụng - Trên thư mục chưa ứng dụng Nodejs mở terminal tạo Git local repository lệnh “git init” - Clone app’s source máy local lệnh: “heroku git:clone -a ” - Upload source code lên heroku cách thực lệnh: o git add o git commit -am "" o git push heroku master - Đợi heroku khởi động ứng dụng nodejs truy cập 1.2 Cách deploy ReactJS lên Heroku Cách làm tương tự nodejs cần điều chỉnh buildpack sau: Trên thư mục ứng dụng Reactjs Heroku vào settings mục buildpacks chọn Add buildpack: trỏ đường dẫn buildpack đến https://github.com/mars/createreact-app-buildpack Một số vấn đề liên quan đến Heroku Với dịch vụ miễn phí từ heroku sau đến server khơng có người truy cập server chuyển sang trạng thái ngủ 34 Khi sử dụng domain mặc định heroku (*.herokuapp.com) việc sử dụng SLL trả tiền Tuy nhiên trỏ đến domain cá nhân SSL khơng (để giải dùng Cloudflare để làm DNS) 35 ... để chứa liên kết đến trang quan trọng toàn trang, phần chứa thêm liên kết (sub navigation) Phần thân trang: page body, phần chứa phần nội dung (content) phần nội dung phụ (sidebar) Phần nội dung... content, phần chứa nội dung cần thể cho người dùng xem Phần nội dung phụ: sidebar, phần chứa liên kết phụ trang (local navigation), banner chứa liên kết liên quan, dùng để chứa liên kết quảng cáo, Phần. .. đánh giá kết Bố cục đề tài Báo cáo đề tài bao gồm nội dung sau: Mở đầu Chương 1: Cơ sở lí thuyết liên quan Chương 2: Phân tích & thiết kế hệ thống Chương 3: Triển khai đánh giá kết Kết luận hướng