Báo cáo bài t¾p lớn b1 tên bài t¿p xây dựng weather app

TRịNG ắI HC Mõ - ịA CHT KHOA CễNG NGHấ THƠNG TIN BÁO CÁO BÀI T¾P LỚN B1 Tên t¿p: Xây dựng Weather App Nhóm thực hißn: Nhóm 05 Danh sách thành viên: Lê Ngọc Lân 2021050379 Thái Khắc Xuân Mạnh 2021050440 Vũ Duy Nam 2021050468 Hà Nội - 09/2022 MĀC LĀC I PHÂN CHIA CƠNG VIÞC NHĨM II WEATHER APP Ý t°ởng trang web 2 Các chức Weather App 2.1 Trang thống kê 2.1.1 Thơng báo kết qu¿ tìm kiếm 2.1.2 Hiển thß thơng tin thßi tiết 2.1.3 Chức dark mode 2.1.4 Các chức lề khác 2.1.5 Tự đánh giá 2.2 Trang lịch ( calendar ) 2.2.1 Chức 2.2.2 Điểm tự đánh giá 12 2.3 Trang cài đặt ( setting ) 13 2.3.1 Chức 13 2.3.2 Điểm tự đáng giá 16 III TÞNG QUÁT 17 I PHÂN CHIA CÔNG VIịC NHểM Bng phõn chia cụng viòc nhúm Hỏ v Tên MSV Nhißm vā Lê Ngọc Lân 2021050379 - Trang thống kê Vũ Duy Nam 2021050468 - Trang lịch Thái Khắc Xuân Mạnh 2021050440 - Trang cài đặt II WEATHER APP Ý t°ởng trang web Weather App tất thành viên nhóm đồng ý làm bái nay, việc cập nhật thßi tiết liên tục việc có ích cho tất ngưßi Giúp ta chuẩn bị ứng phó Đối tượng tất quan tâm đến lịch thßi tiết Hình ảnh giao diện Weather App Các chức Weather App Với việc sử dụng openweather api, Weather App tìm kiếm hết tất điểm giới 2.1 Trang thống kê 2.1.1 Thơng báo kết tìm kiếm Hình ảnh input nhập từ khóa tìm kiếm Khi má Weather App, mặc định lấy vị trí bạn, cịn bạn nhập địa điểm giới, từ khóa tìm kiếm khớp với liệu, hiển thị thơng tin thßi tiết thơng báo thành cơng Khi tìm kiếm thành cơng Và tất nhiên địa điểm không rõ khơng tìm thấy, có thơng báo Khi tìm kiếm thất bại 2.1.2 Hiển thị thông tin thời tiết Tất thơng tin nhiệt độ, thơng tin thßi tiết mưa, bão, nắng, có mây…., tốc độ gió, tia uv, thßi tiết giß thị Weather App Thời tiết địa điểm Tình hình thời tiết Tốc độ gió Thời gian (h) Nhiệt độ Thời tiết tiếng Ngày mai Thời tiết ngày 2.1.3 Chức dark mode Để đẹp mắt tránh gây ảnh hưáng tới mắt vào buổi tối, Weather App có chức Dark Mode tùy chỉnh hiển thị giao diện sáng tối Chỉ cần click vào button giao diện từ sáng thành tối, từ tối thành sáng Recommandé pour toi Suite du document ci-dessous Grammar bank answers pre intermediate giáo dục thể chất 100% (8) Giao diện tối Nếu để ý có hiệu ứng tuyết rơi bề sau tạo chuyển động đẹp mắt cho Weather App 2.1.4 Các chức lề khác Với việc thßi gian có hạn nhiều deadline nên chức liệt kê icon NavBar click vào có thơng báo update Click vào icon thứ thông báo Update Với reponsive, Weather App má tương thích loại máy: - PC: - Tablet: - Moblie: * giao diện Tablet, Navbar cấu hình đính vào phía bên trái lướt vị trí trang web * Còn giao diện Mobile, NavBar di chuyển đính phía mà hình 2.1.5 Tự đánh giá Phần HTML Weather App code 300 dòng html, 15 loại thẻ là: div, a, aside, nav, header, h1, h3, h4, img, input, i, button, ul, li, noscript, script, span, Điểm đánh giá: 2đ Phần CSS Hầu css Weather App css thuần, phần icon phải dùng thư viện css Điểm đánh giá: 2đ Phần thiết kế Weather App thiết kế nhìn bắt mắt khơng bị rối sử dụng, web đơn giản dễ dùng Điểm đánh giá: 2đ 2.2 Trang lịch ( calendar ) 2.2.1 Chức Giao diện web có chức bao quát nav lịch tháng năm - Khi di chuột vào có hiệu ứng tạo background - Di chuột khung tháng thỉ danh sách tháng năm, di vào tháng danh sách tháng có lớp giả mang nội dung 2022 chạy qua - Lọc ngày tháng năm tiêu đề 10 - Chuyển năm icon tăng giảm kích chuột vào( chưa cập nhật giao diện chuyển năn chuyển tháng 11 2.2.2 Điểm tự đánh giá Tên Thành Viên Nhißm vā Điểm tự đánh giá Điểm tự đánh html giá css Điểm tự đánh giá thiết kế Vũ Duy Nam Thiết kế xây Các thẻ sử dụng: Các đối tượng Trang web dựng giao diện div, ul, li, img, br, css: body, chức xem nav-logo, lịch span, select, h3, thiết kế có đủ thành option, h5, a, table, logotitel, h3, phần layout thead, th, td, tbody nav-icon li, phần table year, h5, bố trí table month, hợp lí month, a, supmonth, supmonth a, week, th ,td Tổng : 16 thẻ Tổng css: 15 2 1.5 12 2.3 Trang cài đặt ( setting ) 2.3.1 Chức Có header là: General Setting Với tính chất phần Setting nên có thành phần như: + Thay đổi ngôn ngữ ( Language ) 13 + Chọn kiều giß (Time format) + Cho phép để bật/ tắt tính như: dự báo ngày tiếp theo, thông báo, cho phép bật định vị,… + Có thể sửa/ thêm địa email, số điện thoại 14 + Sau đó, lưu lại/ hủy bỏ thay đổi : Footer quyền thuộc Nhóm 05, có phương thức liên lạc như: facebook, messenger, twiter,… 15 2.3.2 Điểm tự đáng giá Phần HTML Điểm tự đánh giá: Phần CSS Điểm tự đánh giá: 1.5 Phần Thiết kế Điểm tự đánh giá: 16 III TÞNG QUÁT Weather App có trang web tạo nên trang Thống kê, trang Lịch trang Cài Đặt thành viên nhóm hỗ trợ kết hợp với Web thiết kế dễ nhìn sử dụng, có sai sót mong thầy nhắc nhá giúp đỡ nhóm em B¿ng tßng hÿp STT Há Tên Lê Ngác Lân Nhißm vā Trang Thống Điểm tự Điểm tự Điểm tự đánh giá đánh giá đánh giá HTML CSS Thiết kế 2 kê Vũ Duy Nam Trang Lßch 2 1.5 Thái Khắc Trang Cài 1.5 Xuân M¿nh Đặt 17