App tư vấn và hỗ trợ cho các bệnh nhân có khả năng liên quan đến ung thư

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ TP HCM BÁO CÁO ĐỒ ÁN MÔN HỌC CÔNG CỤ VÀ MÔI TRƯỜNG PHÁT TRIỂN PHẦN MỀM APP TƯ VẤN VÀ HỖ TRỢ CHO CÁC BỆNH NHÂN CÓ KHẢ NĂNG LIÊN QUAN ĐẾN UNG THƯ Ngành : CÔNG NGHỆ THƠNG TIN Mơn học : CƠNG CỤ VÀ MƠI TRƯỜNG PHÁT TRIỂN PHẦN MỀM MỤC LỤC CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 Figma - Công cụ hỗ trợ việc thiết kế UI 1.1.1 Khái niệm .3 1.1.2 Ưu điểm công cụ Figma 1.2 Công cụ Trello 1.2.1 Bắt đầu với Trello 1.2.2 Ưu điểm bật Trello .5 1.2.3 Cấu tạo Trello (Boards, Lists, and Cards) 1.3 Bitbucket 1.3.1 Bitbucket gì? .6 1.3.2 Những tính bật Bitbucket CHƯƠNG ÁP DỤNG CÁC CÔNG CỤ VÀO ỨNG DỤNG .9 2.1 Figma - Công cụ hỗ trợ việc thiết kế UI 2.2 Công cụ Trello 2.3 Bicbutket 10 CHƯƠNG KẾT QUẢ THỰC NGHIỆM 12 3.1 Giao diện ứng dụng 12 3.1.1 Giao diện trang chủ 12 3.1.2 Giao diện trang tư vấn 12 3.1.3 Giao diện trang tin tức 14 3.1.4 Giao diện trang cá nhân .15 CHƯƠNG KẾT LUẬN 16 4.1 Kết luận 16 4.2 Kết đạt .16 4.3 Về mặt thiết kế 16 DANH MỤC HÌNH ẢNH Hình 2.1 Công cụ thiết kế figma .10 Hình 2.2 Quản lí công việc Trello 11 Hình 2.3 Quản lí source code bicbutket 11 Hình 2.4 Commit dự án 12 Hình 3.1 Giao diện trang chủ 13 Hình 3.2 Giao diện trang tư vấn .13 Hình 3.3 Giao diện trang thông tin bác sĩ .14 Hình 3.4 Giao diện trang thơng tin bệnh viện 15 Hình 3.5 Giao diện trang tin tức .15 Hinh 3.6 Giao diện trang cá nhân 16 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 Figma - Công cụ hỗ trợ việc thiết kế UI 1.1.1 Khái niệm Figma với Sketch, Adobe XD công cụ hỗ trợ việc thiết kế UI phổ biến nhiều nhà thiết kế sử dụng trình phát triển sản phẩm Ta thiết kế với Figma tảng Website, để cần ổn định trình làm việc ta dễ dàng cài đặt Figma tảng Mac Window Hình 1.1 Logo Figma – Công cụ thiết kế UI 1.1.2 Ưu điểm công cụ Figma  Cho phép nhiều người thiết kế Project Khi đó, người sử dụng máy tính riêng join vào Project Figma  Figma hoạt động nhanh, cập nhật thường xun có gói miễn phí sử dụng  Dữ liệu lưu hệ thống máy chủ Figma Chính vậy, bạn làm việc máy tính khác, lúc nơi mà không cần phải mang theo File Design  Figma thiết kế dạng Vector Khi thiết kế xong, Tool Designer xuất nhiều File khác PNG, SVG, JPG,… kích thước mà khơng lo bị vỡ Photoshop  Figma có khả quản lý lúc nhiều Artboards Nếu Photoshop cho phép thiết kế khung hình Figma lại cho phép thiết kế nhiều hình khung hình Nghĩa là, khung hình, bạn thiết kế nhiều Layout cho sản phẩm 1.2 Công cụ Trello 1.2.1 Bắt đầu với Trello Trello công cụ hỗ trợ quản lý dự án Web đơn giản, gọn nhẹ hiệu cho hầu hết loại dự án: kinh doanh, văn phịng, phần mềm bạn sử dụng Trello lên kế hoạch kỳ nghỉ, tổ chức chiến dịch tiếp thị, theo dõi mắt sản phẩm mới… đặc biệt Trello hồn tồn miễn phí Hình 1.2 Logo Trello Trello tổ chức dự án dạng List Trong khoảng thời gian ngắn,Trello cho bạn biết công việc thực hiện, nhân viên làm việc công cụ nào, công việc trạng thái Nếu cần phần mềm giúp bạn nắm thơng tin dự án mộtcách tổng quát từ xem xét chi tiết cực nhỏ nhiệm vụ Trello sản phẩm dành cho bạn Hãy tưởng tượng bạn có bảng khổng lồ gạch đầu dòng núi phiếu số (index card- loại phiếu mà bạn điều chỉnh hình dạng kích cỡ) cần click vào phiếu bạn ghi ngày hết hạn phiếu đó, ghi thêm thơng tin hay giao cho để họ thực cơng việc Ngồi ra, bạn cịn đính kèm tệp tin tài liệu vào nhữngchiếc thẻ để gửi cho thành viên khác nhóm bạn Trello cơng cụ hợp tác tổ chức dự án ý tưởng bạn vào Trong nháy mắt, Trello cho bạn biết làm việc đó, người làm việc gì, đâu q trình 1.2.2 Ưu điểm bật Trello  Phân chia quản lý cơng việc rõ ràng theo vị trí, tình trạng đầu việc nhưu: làm, làm xong, hủy bỏ,…  Tổng hợp phân chia đầu việc tới người nhóm bao gồm mơ tả cơng việc cụ thể, thời gian, tình trạng hồn thành công việc  Đây công cụ hỗ trợ làm việc nhóm nên cho phép thành viên nhóm yêu cầu giúp đỡ thực nhiệm vụ  Ưu điểm Trello rõ ràng hướng đến đơn giản, linh hoạt miễn phí Với tính cao cấp bạn phải trả phí Tuy nhiên, với phần lớn công việc cần dùng miễn phí đủ 1.2.3 Cấu tạo Trello (Boards, Lists, and Cards) Một bảng Trello số sản phẩm dự án phát triển liên tục, hội đồng quản trị có nhiều mục đích sử dụng thứ khác có ý nghĩa Bảng tạo thành từ nhiều danh sách, danh sách chứa thẻ Thẻ đại diện cho đơn vị hội đồng quản trị, ví dụ: tính mới, dẫn đầu câu chuyện, vụ kiện, khách hàng, nghiên cứu cho báo, nhân viên tiềm năng, vấn đề hỗ trợ khách hàng Thẻ di chuyển từ danh sách liệt kê để tiến triển Thành viên hội đồng quản trị thêm vào thẻ, bắt đầu trò chuyện thẻ, tạo danh sách thẻ, 1.3 Bitbucket 1.3.1 Bitbucket gì? Bitbucket hiểu dịch vụ website phát triển quản lý điều hành công ty Atlassian Đây dịch vụ giúp cho việc lưu trữ toàn mã nguồn tất phiên mà người dùng thao tác code Hình 1.3 Logo Bitbucket Có thể thấy, hệ thống kiểm sốt có khả điều chỉnh tác động tích cực cơng việc nhà phát triển Các developer khơng lưu trữ mã nơi an tồn mà thuộc nhóm truy cập dễ dàng vào mã hay module họ nhanh chóng lấy code theo yêu cầu công việc Vậy câu hỏi đặt nên sử dụng phiên kiểm soát hệ thống cho đảm bảo? Và Bitbucket lựa chọn đắn cho vấn đề Bitbucket mang đến hệ thống điều khiển vơ an tồn dành cho nhóm dự án có sử dụng Git Mercurial Version Bên cạnh đó, hệ thống Bitbucket cung cấp cho người dùng kho lưu trữ cá nhân sử dụng thoải mái, không giới hạn hồn tồn miễn phí dành cho nhóm nhỏ Khơng vậy, liên kết mã, Bitbucket cịn hỗ trợ cho việc phân tích pull – request lớn thực xem xét đánh giá code Thơng qua đó, Bitbucket giúp cho nhóm phát triển có phương án tối ưu để phát triển ứng dụng 1.3.2 Những tính bật Bitbucket Bitbucket cung cấp cho người dùng nhiều tính ưu việt:  Pull requests: tạo điều kiện review code nhằm cải thiện chất lượng code giúp người nhóm chia sẻ kiến thức lẫn  Quyền truy cập branch: quản lý đối tượng truy cập, viết merge branch cụ thể  Cơng cụ tìm kiếm nhận diện code: tiết kiệm thời gian với kết hiển thị gần xác mà developer muốn tìm kiếm  Bitbucket Pipelines: cơng cụ hay ho cho tất nhu cầu bạn, từ code deployment  Kho lưu trữ file Git rộng lớn (LFS): lưu lượng lớn liệu data media  Trello boards: tổ chức dự án hợp tác với thành viên nhóm qua cơng cụ Trello  Xây dựng tích hợp: Bitbucket nói cho bạn biết độ mạnh, yếu code cách trả icon thành công thất bại dựa hệ thống CI – tích hợp liên tục  Tích hợp Jira: dễ dàng tạo branch dựa vào issue phần mềm Jira thiết lập kích hoạt để thay đổi qua lại trạng thái lần review merge code  Hợp với bên thứ 3: hợp thao tác Bitbucket với workflow nhằm tinh giản quy trình phát triển dự án Tuy nhiên, có tính bật mà biết  Số lượng private reposity Bitbucket tên “đóng khung” cho người làm dự án cá nhân Với số lượng thành viên dự án không vượt người, bạn thoải mái tạo reposity cá nhân mà khơng tốn chi phí Bạn tạo dự án cá nhân GitHub bạn yêu cầu trả mức phí $7/tháng  Omnibar Omnibar action nhanh Bitbucket, bạn nhanh chóng mở omnibar phím bắt đầu gõ chọn action muốn hướng đến Công cụ omnibar linh hoạt việc matching từ khóa Các gợi ý hiển thị dựa theo tên repository mà bạn quản lý, theo tiêu đề issues, request pull hay chí tên filename nằm repository hành  Những phím tắt thần thánh Sử dụng phím để kích hoạt omnibar nhiều lựa chọn phím tắt Để xem đầy đủ danh sách phím tắt, bạn nhấn tổ hợp phím ⇧+? Một số phím tắt thơng dụng kể đến như:  / để tập trung vào tìm kiếm trang web  [ để thu gọn sidebar  CTRL+↵ để gửi bình luận  Binary Snippets Không cho phép chia sẻ code đơn repository khác, Bitbucket phát triển tính Snippet hỗ trợ người dùng chia sẻ nhiều loại tệp khác với dung lượng tối đa 10MB/ file Chỉ cần kéo thả file bạn muốn như: ảnh, video chí code mã hóa  Có app quản lý riêng Làm để quản lý repository, kiểm tra thay đổi nắm issues dự án bạn khơng ngồi trước hình máy tính? Bitbucket cho phép bạn làm điều thông qua ứng dụng: Bitbeaker (Android) CHƯƠNG ÁP DỤNG CÁC CÔNG CỤ VÀO ỨNG DỤNG 2.1 Figma - Công cụ hỗ trợ việc thiết kế UI Link: https://www.figma.com/file/FPdNEEQ4CpvYOb48Ie5WOn/Untitled?nodeid=0%3A1 Hình 2.1 Cơng cụ thiết kế figma 2.2 Công cụ Trello Một dự án thực tổ chức xác định, tập hợp tài nguyên cósự điều hành, quản lý để đạt kết theo yêu cầu thời gian hạn định Sử dụng Trello, quản lý công việc cần triển khai dự án:  Cơng việc gì?  Ai thực hiện?  Thời gian thực hiện?  Tài nguyên?  Yêu cầu kết quả? Quản lý cơng việc Trello 10 Hình 2.2 Quản lí cơng việc Trello 2.3 Bicbutket  Quản lý source code bicbutket: Hình 2.3 Quản lí source code bitbutket 11  Commit dự án: Hình 2.4 Commit dự án 12 CHƯƠNG KẾT QUẢ THỰC NGHIỆM 3.1 Giao diện ứng dụng Xem trực tiếp 3.1.1 Giao diện trang chủ Hình 3.1 Giao diện trang chủ 3.1.2 Giao diện trang tư vấn 13 Hình 3.2 Giao diện trang tư vấn 3.1.2.1 Thơng tin bác sĩ Hình 3.3 Giao diện trang thông tin bác sĩ 14 3.1.2.1 Thông tin bệnh viện Hình 3.4 Giao diện trang thơng tin bệnh viện 3.1.3 Giao diện trang tin tức Hình 3.5 Giao diện trang tin tức 15 3.1.4 Giao diện trang cá nhân Hình 3.6 Giao diện trang cá nhân 16 CHƯƠNG KẾT LUẬN 4.1 Kết luận Thông qua môn học dự án, nhóm nắm bắt cách thức xây dựng ứng dụng thiên front-end giao diện nhiều, hiểu quy trình thực công cụ quản lý phát triển dự án Giúp cho người dùng biết bệnh hỗ trợ tư vấn nhanh chóng từ tiết kiệm thời gian cho người dùng 4.2 Kết đạt Giao diện người dùng dễ nhìn mang lại tiện lợi thân thiện cho người sử dụng Nâng cao trải nghiệm lướt ứng dụng người dùng Xây dựng thành công ứng dụng tư vấn hỗ trợ cho bệnh nhân có khả liên quan đến ung thư, thực đầy đủ chức mục tiêu đề 4.3 Về mặt thiết kế Thiết kế giao diện đáp ứng yêu cầu dự án Trình bày bố cục ứng dụng gọn gàng, phù hợp với việc tìm hiểu, khơng màu mè hoa mĩ File tệp: https://drive.google.com/file/d/1Tma9RQZHv8ljc5vDJAv5WW9LEgXzuoK/view?usp=sharing 17 ... cao trải nghiệm lướt ứng dụng người dùng Xây dựng thành công ứng dụng tư vấn hỗ trợ cho bệnh nhân có khả liên quan đến ung thư, thực đầy đủ chức mục tiêu đề 4.3 Về mặt thiết kế Thiết kế giao diện... triển dự án Giúp cho người dùng biết bệnh hỗ trợ tư vấn nhanh chóng từ tiết kiệm thời gian cho người dùng 4.2 Kết đạt Giao diện người dùng dễ nhìn mang lại tiện lợi thân thiện cho người sử dụng... kích thư? ??c mà khơng lo bị vỡ Photoshop  Figma có khả quản lý lúc nhiều Artboards Nếu Photoshop cho phép thiết kế khung hình Figma lại cho phép thiết kế nhiều hình khung hình Nghĩa là, khung hình,