Báo cáo nhập môn ngành và kĩ năng mềm đề tài ứng dụng tìm kiếm thú cưng bị lạc

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG VIỆT HÀN Khoa Khoa Học Máy Tính BÁO CÁO NHẬP MÔN NGÀNH VÀ KĨ NĂNG MỀM ĐỀ TÀI: ỨNG DỤNG TÌM KIẾM THÚ CƯNG BỊ LẠC Sinh viên thực hiện: Bùi Văn Ý Trương Văn Thịnh Nguyễn Đăng Rin Trần Lâm Sơn Lớp: 22NS Giảng viên hướng dẫn: THS.Trần Thu Thủy Đà Nẵng, 07 tháng 04 năm 2023 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG VIỆT HÀN Khoa Khoa Học Máy Tính BÁO CÁO NHẬP MƠN NGÀNH VÀ KĨ NĂNG MỀM ĐỀ TÀI: ỨNG DỤNG TÌM KIẾM THÚ CƯNG BỊ LẠC Sinh viên: Bùi Văn Ý Mã: 22NS088 Trương Văn Thịnh Mã: 22NS068 Trần Lâm Sơn Mã: 22NS059 Nguyễn Đăng Rin Mã: 22NS058 Giảng viên hướng dẫn: THS.Trần Thu Thủy Đà Nẵng, 07 tháng 04 năm 2023 NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN LỜI CẢM ƠN Đây năm chúng em bước vào đường đại học đặc biệt chào đón chúng em cổng trường đại học Công nghệ Thông tin Truyền thông Việt Hàn Cảm thấy thật may mắn học mái trường khơng sở vật chất mà cịn nhiệt tình, thân thiện đội ngũ cán giảng viên Để hoàn thành báo cáo cuối kì này, bên cạnh sáng tạo tìm tịi chúng em, cịn nhận góp ý, dẫn tận tình dạy môn Nhập môn ngành Kĩ mềm Với vốn kiến thức tiếp thu q trình học khơng tảng cho trình nghiên cứu báo cáo mà hành trang quý báu để chúng em bước vào đời cách vững tự tin Đây lần chúng em làm báo cáo nên tránh khỏi sai sót, mong q thầy vui lịng góp ý để chúng em rút kinh nghiệm cho lần sau Lời cuối, chúng em xin chân thành cảm ơn quý nhà trường giáo viên môn Nhập môn ngành Kĩ mềm tạo điều kiện cho chúng em học tập hoàn thành cuối kì Xin kính chúc thầy thật nhiều sức khỏe thành công với nghề nghiệp cao quý MỤC LỤC LỜI CẢM ƠN iv MỞ ĐẦU i Tổng quan i 1.1 Bối cảnh thực đề tài .i Vấn đề cần giải .i Nội dung cần thực i Bố cục báo cáo i Chương TỔNG QUAN VỀ NGƠN NGỮ LẬP TRÌNH ĐỂ XÂY DỰNG TRANG WEB i Sơ lược ngôn ngữ lập trình web HTML i Sơ lược ngơn ngữ lập trình web CSS i Giới thiệu phần mềm Visual Studio Code ii 3.1 Khái niệm Visual Code ii 3.2 Những tính mạnh mẽ VisualCode .ii Giới thiệu môi trường hoạt động Chrome iii Chương PHÂN TÍCH ĐỀ TÀI VÀ XÂY DỰNG v Các yêu cầu: v Các bước thiết kế: v 2.1 Thu thập thông tin: .v 2.2 Thiết kế giao diện v 2.3 Phát triễn tính tìm kiếm v 2.4 Phát triễn tính chia sẻ thơng tin .v 2.5 Kiểm tra thử nghiệm .v KẾT LUẬN vi MỞ ĐẦU Tổng quan Bối cảnh thực đề tài Xã hội ngày phát triển, tương tác người thú cưng ngày trở nên gắn bó hơn,thân thiết hơn, vấn đề thú cưng bị lạc ngày xảy phổ biến đươc nhiều người quan tâm Vậy nên chúng em tạo ứng dụng tìm kiếm thú cưng với mong muốn người chủ tìm lại thú cưng bị thất lạc Vấn đề cần giải Nội dung cần thực Bố cục báo cáo Chương TỔNG QUAN VỀ NGƠN NGỮ LẬP TRÌNH ĐỂ XÂY DỰNG TRANG WEB Sơ lược ngơn ngữ lập trình web HTML HTML chữ viết tắt cụm từ HyperText Markup Language (dịch Ngôn ngữ đánh dấu siêu văn bản) sử dụng để tạo trang web, website chứa nhiều trang trang quy tài liệu HTML (thi thoảng ghi tập tin HTML).Cha đẻ HTML Tim Berners-Lee, người khai sinh World Wide Web chủ tịch World Wide Web Consortium (W3C – tổ chức thiết lập chuẩn môi trường Internet) Một tài liệu HTML hình thành phần tử HTML (HTML Elements) quy định cặp thẻ (tag), cặp thẻ bao bọc dấu ngoặc Các Một tập tin HTML bao gồm phần tử HTML lưu lại đuôi mở rộng html Sơ lược ngơn ngữ lập trình web CSS CSS ngôn ngữ tạo phong cách cho trang web – Cascading Style Sheetlanguage Nó dùng để tạo phong cách định kiểu cho yếu tố viết dạng ngơn ngữ đánh dấu, HTML Nó điều khiển định dạng nhiều trang web lúc để tiết kiệm công sức cho người viết web Nó phân biệt cách hiển thị trang web với nội dung trang cách điều khiển bố cục, màu sắc font chữ.CSS phát triển W3C (World Wide Web Consortium) vào năm 1996, lý đơn giản HTML không thiết kế để gắn tag để giúp định dạng trang web Bạn dùng để “đánh dấu” lên site Những tag mắt HTML phiên 3.2, gây nhiều rắc rối cho lập trình viên Vì website có nhiều font khác nhau, màu phong cách khác Để viết lại code cho trang web trình dài, cực nhọc Vì vậy, CSS tạo W3C để giải vấn đề Mối tương quan HTML CSS mật thiết HTML ngôn ngữ markup (nền tảng site) CSS định hình phong cách (tất tạo nên giao diện website), chúng tách rời CSS lý thuyết được, website khơng trang chứa văn mà khơng có khác Giới thiệu phần mềm Visual Studio Code 3.1 Khái niệm Visual Code VisualCode công cụ soạn thảo mã nguồn Microsoft phát triển, giới thiệu lần đầu vào năm 2015 thức phát hành năm 2016 VSCode cài đặt sử dụng Windows, MacOS Linux VSCode mã nguồn mở hồn tồn miễn phí Có thể nói VisualCode kết hợp tuyệt vời tính đơn giản editor cơng cụ hỗ trợ mạnh mẽ dành cho lập trình viên Debugger, Git, Terminal nhiều Đúng vậy, nhìn chung VSCode Code Editor độ hữu ích khơng cạnh IDE 3.2 Những tính mạnh mẽ VisualCode Nói đến tính hỗ trợ lập trình viên từ lúc bắt đầu, VSCode cho thấy vượt trội so với Code Editor khác Tiêu biểu số tính kể đến như:  IntelliSense: IntelliSense kết hợp code auto-complete trí tuệ nhân tạo (AI) Tính cung cấp loạt đề nghị với gợi ý mô tả ngắn ta viết code Những gợi ý tính tốn dựa theo nhân tố bối cảnh ngơn ngữ lập trình, cú pháp, biến, hàm, code file Hầu hết Code Editor đại có IntelliSense, phần mềm chuyên nghiệp VisualCode Đây tính nâng cao hiệu suất lập trình khơng thể thiếu lập trình viên chuyên nghiệp VisualCode cung cấp sẵn IntelliSense cho ngơn ngữ lập trình JavaScript, CSS, HTML, TypeScript Ngồi bạn cài thêm IntelliSense cho ngôn ngữ khác thông qua extension, bạn tự custom tính cho phù hợp với mình, tiện q khơng nào!  Tích hợp sẵn git: Nhu cầu làm việc nhóm lưu trữ khơng thể thiếu, tích hợp Git vào Code Editor tính lựa chọn đắn Git VisualCode cung cấp cho bạn git action commit code, pull, push, … Và qua phiên việc hỗ trợ Git đầy đủ  Debugger: Một tính VisualCode khả hỗ trợ debug tuyệt vời Theo mặc định, VisualCode kèm theo trình Debug hỗ trợ NodeJS Nhưng tất nhiên, lần nữa, bạn cài thêm extension để debug cho ngôn ngữ khác  Tích hợp Terminal: Một tính VisualCode khả hỗ trợ debug tuyệt vời Theo mặc định, VisualCode kèm theo trình Debug hỗ trợ NodeJS Nhưng tất nhiên, lần nữa, bạn cài thêm extension để debug cho ngôn ngữ khác  Khả tùy chỉnh mở rộng: VisualCode cung cấp khả tùy chỉnh tuyệt vời dành cho người dùng, từ theme, font chữ, kích thước đến tùy chỉnh tính năng, keyboard shortcut, snippets,coding style, … vơ linh hoạt Ngồi bạn cịn tùy chỉnh từngworkspace tiện lợi cho loại dự án Cũng Code Editor/IDE khác, VisualCode có khả mở rộng thơng qua việc cài thêm extension Giới thiệu môi trường hoạt động Chrome Google lấy thông tin từ nhiều nguồn khác nhau, bao gồm: - Trang web - Nội dung người dùng gửi, chẳng hạn nội dung người dùng gửi Google Doanh nghiệp Maps - Nội dung quét từ sách - Cơ sở liệu công khai Internet - Và nhiều nguồn khác Google thực ba bước để tạo kết từ trang web :  Thu thập liệu: - Bước tìm trang tồn web Google không lưu giữ danh mục trung tâm trang web, đó, chúng tơi phải liên tục tìm kiếm trang thêm trang vào danh sách trang biết Google biết đến số trang chúng tơi truy cập trang từ trước Google tìm thấy trang khác theo đường liên kết từ trang biết đến trang Ngồi ra, chúng tơi phát số trang khác chủ sở hữu trang web gửi danh sách trang để Google thu thập liệu Nếu bạn sử dụng nhà cung cấp dịch vụ lưu trữ web quản lý, họ u cầu Google thu thập liệu trang bạn tạo cập nhật - Khi phát URL trang, Google truy cập thu thập liệu trang để tìm hiểu nội dung trang Google hiển thị trang phân tích nội dung văn lẫn nội dung văn bố cục hiển thị tổng thể để định vị trí trang kết Tìm kiếm Càng hiểu rõ trang web bạn Google hiển thị trang cho người tìm kiếm nội dung bạn cách phù hợp nhiêu  Lập mục: - Sau tìm thấy trang, Google cố gắng tìm hiểu nội dung trang Q trình gọi lập mục Google phân tích nội dung trang, lập danh mục hình ảnh tệp video nhúng trang cố gắng tìm hiểu trang theo cách khác Thơng tin lưu trữ mục Google – sở liệu khổng lồ lưu trữ nhiều máy tính  Phân phát (Và xếp hàng): - Khi người dùng nhập cụm từ tìm kiếm, Google cố gắng tìm câu trả lời phù hợp mục dựa nhiều yếu tố Google cố gắng xác định câu trả lời có chất lượng cao xem xét yếu tố cung cấp trải nghiệm người dùng tốt câu trả lời phù hợp nhất, vị trí, ngơn ngữ thiết bị người dùng (máy tính điện thoại) Chương PHÂN TÍCH ĐỀ TÀI VÀ XÂY DỰNG Các yêu cầu: - Xây dựng website với giao diện dễ nhìn, sáng sủa - Tích hơp chức như: tìm kiếm, thơng báo,tương tác người dùng chat - Kết hợp với MAP thông tin liên hệ người nhặt người Các bước thiết kế: 2.1 Thu thập thông tin: Thu thập thơng tin chức tính mà trang web cần có ( Tìm kiếm thú cưng bị lạc, xác định vị trí, chia sẻ thơng tin,liên hệ,…) Bên cạnh đó, trọng nghiên cứu thị trường tìm hiểu cách trang web tìm kiếm thú cưng khác hoạt động để có ý tưởng phương pháp tốt 2.2 Thiết kế giao diện Thiết kế giao diện trang web để người dùng dễ dàng sử dụng tìm kiếm thơng tin thú cưng bị lạc Bố cục hình ảnh phải rõ ràng thu hút ý người dùng Các bước thiết kế giao diện: - Xây dựng Header: Gồm logo, mục tìm kiếm, đăng nhập, đăng xuất, icon tìm kiếm Tạo nên hiệu ứng chuyển động di chuột click vào mục, icon - Xây dựng container: Gồm thẻ chứa thông tin, hình ảnh thú cưng, thời gian nhặt,một button để hiển thị thông tin chi tiết(Thời gian,địa điểm nhặt, tên thú cưng, dấu hiệu nhận biết, hoạt động thú cưng, thông tin liên hệ người nhận ) - Xây dựng Footer: Hiển thị thông tin ứng dụng, trang web liên quan đến tìm kiếm thú cưng bị lạc 2.3 Phát triễn tính tìm kiếm Phát triển tính tìm kiếm để người dùng tìm kiếm thơng tin thú cưng bị lạc cách nhanh chóng dễ dàng Tính nên cho phép người dùng tìm kiếm theo nhiều tiêu chí khác nhau, ví dụ tên, lồi, tuổi, màu sắc, vị trí thời gian tích 2.4 Phát triễn tính chia sẻ thơng tin Phát triển tính chia sẻ thơng tin để người dùng chia sẻ thơng tin thú cưng bị lạc giúp tìm kiếm thú cưng trở nên dễ dàng 2.5 Kiểm tra thử nghiệm Kiểm tra thử nghiệm trang web để đảm bảo tính chức hoạt động tốt khơng có lỗi Nếu phát lỗi, sửa chúng kiểm tra lại trước triển KẾT LUẬN Kết đạt được: Sau thời gian tâp trung phát triển trang web tìm kiếm thú cưng bị lạc, chúng em hồn thành với giao diện dễ nhìn, thao tác dễ dàng, thân thiện với người dùng Sau hoàn thành giao, chúng em có thêm kĩ tảng để xây dựng website việc sử dụng HTML, CSS biết đến công cụ Visual Code, cơng cụ hữu ích mạnh mẽ Bên cạnh đó, kĩ tự học kĩ word, power point nâng cao hơn, Bên cạnh kết đạt được, chúng em thấy số tồn tốc độ xử lí chưa cao, số lỗi không lớn lắm, chưa xử lí Ứng dụng tìm kiếm thú cưng bị lạc ứng dụng hữu ích cho người yêu động vật Ứng dụng giúp người dùng dễ dàng tìm kiếm thông tin thú cưng bị liên lạc với người đăng thông tin để lấy lại thú cưng Ngồi ra, ứng dụng cịn cho phép người dùng đăng thông tin thú cưng Ngày 07 tháng 04 năm 2023 Giảng viên hướng dẫn (ký ghi rõ họ tên)