listViewPN.Items.Add(docdulieu0.ToString()); listViewPN.Itemsi.SubItems.Add(docdulieu1.ToString()); listViewPN.Itemsi.SubItems.Add(docdulieu2.ToString()); listViewPN.Itemsi.SubItems.Add(Convert.ToDateTime(docdulieu3).ToShortDateString()); i++; } ketnoi.Close(); } private void listViewPN_Click(object sender, EventArgs e) { textBox1.Text = listViewPN.SelectedItems0.SubItems0.Text; } public bool CHECKID() { if (String.IsNullOrEmpty(textBox1.Text)) { MessageBox.Show( Bạn chưa nhập ID phiếu , Thông báo, MessageBoxButtons.OK, MessageBoxIcon.Information); textBox1.Focus(); return false; } return true; } private void button1_Click(object sender, EventArgs e) {
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 APP NHÀ HÀNG HẢI SẢN Sinh viên thực : ĐÀO NGUYÊN TRUNG Giảng viên hướng dẫn : CẤN ĐỨC ĐIỆP Ngành : CÔNG NGHỆ THÔNG TIN Chuyên nghành : CÔNG NGHỆ PHẦN MỀM Lớp : DH.06 Khóa : 2019 -2024 Hà Nội, tháng 6năm 2023 PHIẾU CHẤM ĐIỂM Sinh viên thực hiện: Họ tên Chữ ký Ghi Đào Nguyên Trung – MSV: 19810310448 Giảng viên chấm: Họ tên Giảng viên chấm 1: Giảng viên chấm 2: Điểm Chữ ký Ghi MỤC LỤC LỜI NÓI ĐẦU CHƯƠNG 1: GIỚI THIỆU VỀ LẬP TRÌNH DI ĐỘNG VÀ REACT NATIVE .2 1.1 Giới thiệu lập trình di động .2 1.1.1 Khái quát lập trình thiết bị di động 1.1.2 Các đặc điểm lập trình di động .4 1.1.3 Vai trị lập trình di động đời sống kỹ thuật 1.1.4 Xu hướng công nghệ tương lai lập trình di động .5 1.2 Giới thiệu React Native 1.2.1 React Native gì? 1.2.2 Cài đặt React Native Windows 1.2.3 Cách hoạt động 1.2.4 Ưu điểm nhược điểm React Native CHƯƠNG APP NHÀ HÀNG HẢI SẢN 2.1 Giới thiệu đề tài 2.2 Giao diện chương trình 2.2.1 Giao diện trang chủ 2.2.2 Giao diện danh mục sản phẩm .10 2.2.3 Giao diện sản phẩm 11 2.2.4 Giao diện chi tiết sản phẩm .12 2.2.5 Giao diện tìm kiếm sản phẩm 14 KẾT LUẬN .20 LỜI NÓI ĐẦU Trong lời báo cáo “Xây dựng App nhà hàng hải sản ”, nhóm em muốn gửi lời cảm ơn tới tất người hỗ trợ, giúp đỡ chúng em kiến thức tinh thần trình thực làm Chúng em xin chân thành cảm ơn tới thầy cô trường Đại học Điện Lực nói chung thầy khoa Cơng Nghệ Thơng Tin nói riêng tận tình giảng dạy, truyền đạt cho chúng em kiến thức kinh nghiệm quý báu suôt trình học tập Đặc biệt, chúng em xin gửi lời cảm ơn đến thầy Cấn Đức Điệp, giảng viên mơn Lập trình thiết bị di động khoa Cơng nghệ thơng tin Thầy tận tình theo sát giúp đỡ, bảo, hướng dẫn suốt trình nghiên cứu học tập chúng em Trong thời gian học tập với thầy, chúng 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, mẹo học bổ ích, hiệu Đây điều cần thiết cho chúng em trình học tập làm việc sau Do thời gian có hạn cịn nhiều hạn chế kiến thức, làm chúng em khơng tránh khỏi thiếu sót định Chúng em mong nhận ý kiến đóng góp thầy, giáo bạn để nhóm em có thêm kinh nghiệm hồn thiện báo cáo 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 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 (ví dụ: hệ thống phanh xe điều khiển thiết bị nhà máy, …), chấp nhận mức độ châm trễ tương đối (như điện thoại di động, máy lạnh, ti-vi,…) nhà phát triển phần mềm phải tính tốn để điều chỉnh chương 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 hay điện thoại thông minh 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.1.1 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 Mobile ngành lập trình ứng dụng dành riêng cho thiết bị di động Hình 1.1 Khái quát lập trình 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ớ 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ực 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 động đại thường có cấu hình tốt, với chip xử lý mạnh mẽ, nhớ (RAM) lớn, khiến việc lập trình cho thiết bị di dộ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 quan tâm đến việc tối ưu hóa sử dụng tài nguyên tập trung vào việc “code”, 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 soá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 cố đị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ử ), loại kết nối đa 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 bị 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ệ Mỗi hệ có chợ ứng dụng hãng (Google có Google Play Store, Apple có Apple 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 - 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ĐH Android iOS Windowns Phone Ngôn ngữ lập IDE trình Java Android Studio IBM’s Eclipse với Google’s ADT plugins Objective-C Apple’ X-Code C# Microsoft’s Visual Studio cho Windowns Phone Hình 1.2 Sự đa dạng hệ điều hành - 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 viên 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.1.2 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.1.3 Vai trị lập trình di động đời sống kỹ thuật - Lập trình di động (LTDĐ) 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 LTDĐ 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 LTDĐ 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 - 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 hồn tồn lỗi thời so với tạ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 1.1.4 Xu hướng công nghệ tương lai lập trình di động - Di dộ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 - 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 - Quy trình phát triển phần mềm nhanh gọn (agile) có nhiều phương pháp khác Scrum, Kanban, XP…và lập trình viên cần chọn cho dự án phương pháp phù hợp dựa tiêu chí đánh giá dự án Các cơng cụ cung cấp để phát triển theo hướng agile cách hiệu nhiều, kể đến Pivotal hay Trello, giúp cho việc phát triển phần mềm rõ ràng, nhanh gọn so với phương pháp truyền thống 1.2 Giới thiệu React Native 1.2.1 React Native gì? - React Native framework giúp lập trình viên viết ứng dụng Native 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ến đấu mặt trận web, desktop, server mobile Đ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 năng/tập tin thay đổi, Reload tải lại toàn mã nguồn Ngoài ra, bạn dễ dàng debug javascript Chrome Safari Đối với lỗi thuộc Native phải cần đến XCode cho iOS Android Studio cho Android Hình 1.3 Tính Live Reload React Native 1.2.2 Cài đặt React Native Windows - Bước 1: Đầu tiên cần cài nodejs: https://nodejs.org/en/ Hình 1.4 Cài đặt NodeJs - Bước 2: Download git link: https://git-scm.com/ Hình 1.5 Download cài đặt Git 1.2.3 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 lấy cảm hứng từ Virtual DOM React JS, 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: ví dụ “1+1=2”, biểu thức xử lý core thực thi Javascript, thông dịch qua Java hay Swift/Objective-C làm phép tính Hình 1.6 Cách hoạt động React Native 1.2.4 Ưu điểm nhược điểm React Native - Ưu điểm: Reactjs hiệu quả: Reactjs tạo cho 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 len DOM thực chúng Điều 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 hơn: Nó dung cú pháp đặc biệt JSX (Javascript mở rộng) cho phép ta trộn code HTML Javascript Ta them 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 Render tầng server: Một vấn đề với ứng dụng đơn trang tối ưu SEO thời gian tải trang Nếu tất việc xây dựng hiển thị trang thực client, người dung phải chờ cho trang khởi tạo hiển thị lên Điều thực tế chậm Hoặc giả sử người dung vơ hiệu hóa Javascript sao? Reactjs thư viện component, vừa render ngồi trình duyệt sử dụng DOM render chuỗi HTML mà server trả Làm việc với vấn đề test giao diện: Nó dễ để viết test case giao diện virtual DOM cài đặt hoàn toà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 Đây thư viện Facebook giúp render phần view Vì React khơng có phần Model Controller, mà phải kết hợp với thư viện khác React khơng có 2-way binding Ajax 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 tương với Angular (Khoảng 35kb so với 39kb Angular) Trong Angular framework hồn chỉnh Khó tiếp cận cho người học Web CHƯƠNG APP NHÀ HÀNG HẢI SẢN 2.1 Giới thiệu đề tài Năm 2021 trở thành mốc lịch sử Việt Nam, toàn dân tộc phải chống chọi với đại dịch COVID-19 Cuộc sống người người dân chuyển từ làm việc, học tập quan, trường học sang làm việc, học tập nhà việc chọn cho laptop cho thân gia đình vơ quan trọng Do đó, website bán laptop phát triển nhanh chóng Nhưng nhiều trang web bán điện máy Việt Nam, hình thức quản lý webiste khơng theo kịp phát triển thời đại gây nhiều bất tiện Vì lý đó, cải tiến website bán điện máy nhu cầu cần thiết Chính chúng em chọn đề tài “Xây dựng App nhà hàng hải sản” nhằm đáp ứng yêu cầu thị trường 2.2 Giao diện chương trình 2.2.1 Giao diện trang chủ 10 Hình 2.1 Giao diện trang chủ 2.2.2 Giao diện danh mục sản phẩm 11 12 Hình 2.2 Giao diện trang danh mục sản phẩm 2.2.3 Giao diện sản phẩm 13 14 Hình 2.3 Giao diện trang sản phẩm 2.2.4 Giao diện chi tiết sản phẩm 15 16 Hình 2.4 Giao diện trang chi tiết sản phẩm 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 App nhà hàng hải sản” Trong trình nghiên cứu xây dựng lên chương trình này, nhóm em cố gắng nghiên cứu thời gian có hạn nên báo cáo cịn nhiều thiếu sót Chúng em mong nhận đóng góp, bảo thầy, cô Chúng em xin chân thành cảm ơn! 17