Báo cáo chuyên đề học phần lập trình trên thiết bị di động đ ti xây dựng ứng dụng bán đồ thể thao

TRƯỜNG ĐẠI HỌC ĐIỆN LỰC KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO CHUYÊN ĐỀ HỌC PHẦN LẬP TRÌNH TRÊN THIẾT BỊ DI ĐỘNG Đ TI: XÂY DỰNG ỨNG DỤNG BÁN ĐỒ THỂ THAO Sinh viên thực : ĐỖ CHUNG HIẾU : HÀ HUY HOÀN : HOÀNG VĂN ĐẠI Giảng viên hướng dẫn : CÙ VIỆT DŨNG Ngành : CÔNG NGHỆ THÔNG TIN Chuyên ngành : CÔNG NGHỆ PHẦN MỀM Lớp : D15CNPM1 Khóa : 2020-2024 Hà Nội, tháng năm 2022 PHIẾU CHẤM ĐIỂM: ST T Họ tên sinh viên Đỗ Chung Hiếu Nội dung thực Điểm 20810310029 Hà Huy Hoàn 20810310039 Hoàng Văn Đại 2081031003 Họ tên giảng viên Giảng viên chấm 1: Giảng viên chấm 2: Chữ ký Ghi Chữ ký MỤC LỤC LỜI MỞ ĐẦU Trong lời báo cáo: “Xây dựng ứng dụng bán đồ thể thao”, nhóm em muốn gửi lời cảm ơn biết ơn chân thành tới tất thầy cô hỗ trợ, giúp đỡ em kiến thức tinh thần trình thực làm Đặc biệt, em xin gửi lời cảm ơn đến giáo viên hướng dẫn Cù Việt Dũng, giảng viên Khoa Công nghệ thông tin – Trường Đại Học Điện Lực Thầy tận tình theo sát giúp đỡ, trực tiếp bảo, hướng dẫn suốt trình nghiên cứu học tập nhóm em Trong thời gian học tập với thầy, em tiếp thu thêm nhiều kiến thức bổ ích mà cịn học tập tinh thần làm việc, thái độ nghiên cứu khoa học nghiêm túc, hiệu Đây điều cần thiết cho chúng em q trình học tập cơng tác sau Do thời gian thực có hạn kiến thức cịn nhiều hạn chế nên làm nhóm em chắn khơng tránh khỏi thiếu sót định Chúng em mong nhận ý kiến đóng góp thầy bạn để nhóm e có thêm kinh nghiệm tiếp tục hồn thiệt đồ án Chúng em xin chân thành cảm ơn! CHƯƠNG 1: GIỚI THIỆU V LẬP TRÌNH DI ĐỘNG V REACT-NATIVE 1.1 Giới thiệu lập trình di động - Con người thu nhận thông tin qua giác quan, thị giác đóng vai trị quan trọng Những năm trở lại gần với phát triển phần cứng máy tính, xử lý ảnh đồ họa phất triển cách mạnh mẽ có nhiều ứng dụng sống Xử lý ảnh đồ họa đóng vai trị quan trọng tương tác người máy - Tùy theo tính chất yêu cầu, mức độ đáp ứng hệ thống phải nhanh chập nhận mức độ chẫm trễ tương đối nhà phát triển phần mềm phải tính tốn để điểu chỉnh chườn trình cho phù hợp với thiết bị đầu cuối (tính tương thích) Đây đặc tính quan trọng lập trình nhúng - Ngày nay, với phát triển mạnh mẽ hãng điện thoại di động, smart phone trở nên phổ biến hết, chiếm thị phần lớn thị trường thiết bị liên lạc cầm tay Kéo theo đó, ngành lập trình thiết bị di động đời phát triển song song vài năm gần 1.2 Khái quát lập trình thiết bị di động - Lập trình thiết bị di động, hay nói ngắn gọn lập trình Mobie ngành lập trình ứng dụng dành riêng cho thiết bị di động - Người lập trình ứng dụng cho thiết bị di động truyền thống luôn phải nhớ đầu nguyên tắc “tiết kiệm tối đa tài nguyên” thiết bị, dùng cách để tối ưu hóa độ phức tạp tính tốn lượng nhớ cần sử dụng - Tuy nhiên, với phát triển nhanh chóng phần cứng, thiết bị di dộng đại thường có cầu hình tốt, với vi xử lý mạnh mẽ, bỗn nhớ RAM lớn, khiến việc lập trình cho thiết bị di động trở nên dễ dàng hết Các kit phát triển hãng sản xuất hệ điều hành di động thường làm rõ hầu hết tác vụ liên quan đến quản lý nhớ, quản lý tiến trình… Lập trình viên phát triển tính cho ứng dụng lập trình cho máy tính cá nhân - Đặc trưng di động thiết bị kéo theo đặc trưng lập trình di động mà nhà phát triển cần phải quan tâm như: + Tính “di động” thiết bị khiến kết nối mạng trở nên bất ổn định khó kiểm sốt Các ứng dụng phụ thuộc nhiều vào kết nối Internet cần ý điểm + Lưu lượng Internet thiết bị di động thường có chi phí cao so với Internet ổn định Điều cần lưu ý phát triển ứng dụng sử dụng nhiều tài nguyên Internet + So với máy tính cá nhân, thiết bị di động đại trang bị thêm nhiều tính giúp việc tương tác với người dùng trở nên thuận tiện (màn hình cảm ứng đa điểm, tương tác giọng nói, cử chỉ,… ) loại kết nối da dạng (NFC, GPS, 3G, 4G, Bluetooth, IR,… ) cảm biến phong phú giúp trải nghiệm đa dạng (cảm biến ánh sáng, cảm biến tiệm cận, la bàn, cảm biến chuyển động, gia tốc kế,… ) Người lập trình, tùy thuộc vào ứng dụng cụ thể, sử dụng đến tính đặc biệt để đem đến cho người dùng trải nghiệm tốt thiết bị di động - Ngồi hãng phát triển hệ điều hành di động làm công cụ phát triển (SDK) mơi trường phát triển tích hợp (IDE) thuận tiện cho việc viết mã nguồn, biên dịch, gỡ rối, kiểm thử xuất phần mềm - Xét theo thị phần thị trường, ba hệ điều hành phổ biến cho thiết bi di động Google’s Android, Apple’s iOS Microsoft’s Windows Phone Mỗi ứng dụng thành công thường phát triển cho hệ điều hành Mỗi hệ điều hành nên có chợ ứng dụng hãng (Google có Google Play Store, Apple có AppStore, Microsoft có Windows Phone Store) với nhiều khách hàng tiềm năng, giúp người phát triển phân phối ứng dụng miễn phí có phí với chi phí định Recommandé pour toi 10 Suite du document ci-dessous Sherlock Holmespdf (10) - Sociology StuDocu Summary Library EN Mcq binomial and hypergeometric probability distribution with correct answers Bachelor of Business Administration & Bachelor of Legislative Law 22 100% (8) Beliefs in Society - Knowledge Organisers domestic acctg 27 100% (1) 93% (14) Personal Identification Techniques Word Business Law and Taxation 100% (4) - Bảng liệt kê hệ điều hành với ngơn ngữ lập trình IDE phổ biến nó: Hệ điều hành Ngơn ngữ lập trình Android Java iOS Windows Phone IDE - Android Studio IBM’s Eclip với Google’s ADT plugin Objective-C Apple’X-Code C# Microsoft’s Visual cho Windows phone Bảng: - Ngoài việc phát triển ứng dụng cho hệ điều hành kể trên, lập trình viên lựa chọn thư viện lập trình đa tảng để phát triển ứng dụng, phổ biến như: PhoneGap, Unity, Cocos, AndEngine, LibGDX,… Lợi việc sử dụng thư viện đa tảng tiết kiệm chi phí, tìm kiếm lập trình am hiểu nhiều hệ điều hành địi hỏi chi phí đắt đỏ thời gian viết code ứng dụng hệ điều hành riêng biệt lớn 1.3 Các đặc điểm lập trình di động - Dễ tiếp cận, dễ tìm hiểu dễ học - Giúp lập trình viên tạo ứng dụng cho người sử dụng - Giúp thực hóa ý tưởng lập trình viên - Giúp lập trình viên tạo ứng dụng cầu nối giao tiếp với người giới qua số lượng người download sử dụng ứng dụng 1.4 Vai trị lập trình di động đời sống kỹ thuật - Bạn tiếp cận với tri thức Bạn thấy kiến thức, công nghệ vài năm trước hoàn toàn lỗi thời so với Làm việc ngành này, bạn nắm bắt tri thức nhất, công nghệ đại nhân loại Nếu bạn người say mê khám phá ưa mẻ, bạn không cảm thấy nhàm chán - Lập trình di động lĩnh vực đầy động sáng tạo Phần lớn nhân viên làm việc lĩnh vực Lập trình di động cịn trẻ, đầy tài năng, hồi bão khát vọng Làm việc cơng đồng thế, bạn phát huy hết tiềm lực vốn có thân Đây điều kiện thuận lợi giúp bạn thể tối đa óc sáng tạo - Bạn có nhiều thách thức hội để khẳng định Lập trình di động nghề có tính cạnh tranh gay gắt tính đào thải khốc liệt Bởi lĩnh vực phát triển với tốc độ nhanh quy tụ nhiều trí tuệ siêu việt giới 1.5 Xu hướng công nghệ tương lai lập trình di động - Di động trở thành xu hướng tương lai Có nhiều cách cho lập trình viên phát triển ứng dụng di động, từ việc thiết kế website tối ưu cho di động (web app), phát triển ứng dụng lai dựa HTML (hybrid app) viết ứng dụng gốc cho tảng (native app) Mặc dù có nhiều phương pháp để phát triển ứng dụng cho di động chúng có điểm chung chạy mã gốc tảng định - Do đó, tổ chức muốn phát triển ứng dụng chạy tảng họ thường tuyển dụng ứng viên có kiến thức chuyên sâu tảng yêu cầu, hiểu rõ lớp, thành phần tảng ứng dụng có phát triển theo kỹ thuật - Nói quy trình phát triển phần mềm, thuật ngữ không hẳn dành cho quản lý dự án nhiều người nghĩ Một lập trình viên cần phải hiểu trình phát triển phần mềm nào, theo dõi tác vụ, tiến độ sao, làm việc với lập trình viên khác hiệu 1.6 Giới thiệu React Native - React Native framework giúp lập trình viên viết ứng dụng Javascript Đúng vậy, đơn giản Javascript, React Native phủ nhận định nghĩa ứng dụng Native đoạn - Sự đời React Native giúp cho lập trình viên web viết ứng dụng Native để khắc phục điểm yếu ứng dụng web hybrid Và nhờ đó, với kỹ sư thành thạo Javascript, bạn chiếu đấu mặt trận web, desktop, server moblie Điều khơng có lợi cho lập trình viên web mà giúp cho doanh nghiệp phát triển sản phẩm đầu cuối với nhân lực - Khi xây dựng React Native, điều tuyệt vời tích hợp tính Live Reload tương tự tính Hot Replacement Module Webpack Tính Live Reload khác tính Reload, Live Reload tải lại chức tập tin thay đổi Reload tải lại tồn mã nguồn Ngồi ra, bạn dễ dàng Debug Javascript Chrome Safari Đối với lỗi thuộc Native cần phải đến Xcode cho iOS Android Studio cho Android 1.7 Cài đặt React Native Windows - Đầu tiên cần cài nodejs: https://nodejs.org/en/ Hình: Cài đặt Nodejs - Cài đặt Chocolatey + Bước 1: Đăng kí Chocolatey Hình: + Bước 2: Chọn phương pháp cài đặt Hình: - Cài đặt Android SDK: + Android Studio cài đặt Android SDK theo mặc định Tuy nhiên, việc xây dựng ứng dụng React Native mã gốc yêu cầu phải có Android 12 (S) SDK nói riêng SDK Android bổ sung cài đặt thơng qua Trình quản lý SDK Android Studio Hãy mở Android Studio, nhấp vào nút "More Actions" chọn "SDK Manager" Hình: + Chọn tab “SDK Platforms” từ SDK Manager, sau chọn hộp bên cạnh “Show Package Details” góc bên phải Tìm kiếm mở rộng Android 12 (S)mục nhập, sau đảm bảo mục sau chọn: * Android SDK Platform 31 * Intel x86 Atom_64 System ImagehoặcGoogle APIs Intel x86 Atom System Image + Tiếp theo, chọn tab “SDK Tools” chọn hộp bên cạnh “Show Package Details” Tìm kiếm mở rộng Android SDK Build-Toolsmục nhập, sau đảm bảo mục 31.0.0 chọn + Cuối cùng, nhấp vào “Apply” để tải xuống cài đặt SDK Android công cụ xây dựng có liên quan + Cấu hình biến môi trường ANDROID_HOME: Các công cụ React Native yêu cầu số biến môi trường thiết lập để xây dựng ứng dụng mã gốc * Mở Windows Control Panel * Nhấp vào User Accounts, sau nhấp lại vào User Accounts * Nhấp vào Change my environment variables * Nhấp vào New để tạo ANDROID_HOMEbiến người dùng trỏ đến đường dẫn đến SDK Android: Hình: 1.8 Cách hoạt động - Ứng dụng viết React Native chia làm phần: phần view (hiển thị) phần xử lý - Phần hiển thị biên dịch từ javascript map với component hệ thống ví dụ: điều hướng, tab, touch,… Phần view cảm hứng từ Virtual DOM ReactJS, xử lý view thực DOM ảo, sau React Native render lại Native View - Phần xử lý thực trực tiếp ngôn ngữ Javascript 1.9 Ưu điểm nhược điểm React Native Ưu điểm: - Reactjs hiệu quả: Reactjs tạo chi DOM ảo – nơi mà component thực tồn Điều giúp cải thiện hiệu suất nhiều Reactjs tính tốn thay đổi cần cập nhật lên Dom thực chúng Điều này, giúp Reactjs tránh thao tác cần DOM mà nhiều chi phí - Reactjs giúp việc viết đoạn code JS dễ dàng Nó dùng cú pháp đặc biệt JSX (Javascript mở rộng) cho phép ta trộn code HTML Javascript Ta thêm vào đoạn HTML vào hàm render mà không cần phải nối chuỗi Đây đặc tính thú vị Reactjs Nó chuyển đổi đoạn HTML thành hàm khởi tạo đối tượng HTML biến đổi JSX - Nó có nhiều cơng cụ phát triển: Khi bạn bắt đầu ReactJS, đừng quên cài đặt ứng dụng mở rộng Chrome dành cho ReactJS Nó giúp bạn debug code dễ dàng Sau bạn cài đặt ứng dựng này, bạn có nhìn trực tiếp vào virtual DOM thể bạn xem DOM thông thường - Làm việc với vấn đề test giao diện: Nó dễ viết test case giao diện vitual DOM cài đặt hồn tồn JS - Hiệu cao ứng dụng có liệu thay đổi liên tục, dễ dàng cho bảo trì sửa lỗi Nhược điểm: - React View Library khơng phải MVC framework framework khác - Tích hợp ReactJS vào framework MVC truyền thống yêu cầu cần phải cấu hình lại - React nặng so với framework khác React có kích thước tương đương Angular Trong Angular frameworr hồn chỉnh - Khó tiếp cận cho người học Web CHƯƠNG 2: ỨNG DỤNG BÁN TAI NGHE 2.1 Giới thiệu đề tài Tai nghe thiết bị gồm cặp loa phát âm thiết kế nhỏ gọn, mang tính di động vị trí chúng thường đặt áp sát bên tai Có nhiều cách để phân loại tai nghe, loại có dây khơng dây, hay tai nghe gồm phận loa tai nghe gồm loa micrô Các nhu cầu cụ thể người nghe xác định lựa chọn tai nghe Sự cần thiết cho tính di động dẫn tới tai nghe nhẹ Tai nghe khơng có hạn chế thiết kế Nói chung, xét theo yếu tố hình thức, tai nghe chia thành bốn loại riêng biệt: circumaural, supra-aural (siêu âm thanh), earbud, inear headphones (tai nghe nhét tai) Ngày nay, có nhiều loại tai nghe với mẫu mã vô phong phú đa dạng Cùng với đó, khơng sàn thương mại điện tử bán mặt hang này, bán chung với nhiều mặt hàng khác nên để tìm kiếm loại tai nghe ưa thích tốn nhiều thời gian Chính vậy, nhóm chúng em chọn đề tài làm báo cáo chuyên đề cho môn học 2.2 Thiết kế giao diện 2.2.1 Giao diện trang chủ Hình: Giao diện trang chủ 2.2.2 Giao diện giỏ hàng Hình: Giao diện giỏ hàng 2.2.3 Giao diện đặt hàng Hình: Giao diện đặt hàng 2.2.4 Giao diện chi tiết sản phẩm Hình: Giao diện chi tiết sản phẩm 2.2.5 Giao diện đăng nhập đăng ký Hình: Giao diện đăng nhập đăng ký KẾT LUẬN Sau thời gian tích cực làm việc, nghiên cứu nhóm em với hướng dẫn, bảo nhiệt tình thầy giáo giảng dạy mơn – thầy Cấn Đức Điệp, nhóm em hồn thành báo cáo với đề tài: “Xây dựng ứng dụng bán tai nghe” Vì thời gian triển khai có hạn việc tìm hiểu cơng nghệ cịn gặp nhiều khó khăn khơng có nhiều tài liệu nên khơng tránh khỏi sai xót Em mong nhận đóng góp ý kiến hướng dẫn thầy cô để đề tài em hoàn chỉnh Chúng em xin chân thành cảm ơn!