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 YOUTUBE

lOMoARcPSD|17343589 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 YOUTUBE Sinh viên thực : NGUYỄN QUỐC PHONG HỒ VĂN NGUYÊN Giảng viên hướng dẫn : PHƯƠNG VĂN CẢNH Ngành : CÔNG NGHỆ THÔNG TIN Chuyên ngành : CÔNG NGHỆ PHẦN MỀM Lớp : D14CNPM6 Khóa : 2019-2023 Hà Nội,Tháng 10 năm 2021 lOMoARcPSD|17343589 PHIẾU CHẤM ĐIỂM Sinh viên thực hiện: Mã Sinh Viên Họ tên sinh viên Nhiệm vụ 19810310437 Nguyễn Quốc Phong Xây dựng app 19810310458 Hồ Văn Nguyên Xây dựng app Điểm Chữ Ký Giảng viên chấm: Họ Và Tên Giảng viên Giảng viên Chữ Ký Ghi Chú lOMoARcPSD|17343589 MỤC LỤC LỜI NÓI ĐẦU CHƯƠNG I: GIỚI THIỆU VỀ LẬP TRÌNH DI ĐỘNG VÀ REACT NATIVE Giới thiệu lập trình di động 1.1 Khái quát lập trình thiết bị di động 1.2 Các đặc điểm lập trình di động 1.3 Vai trị lập trình di động đời sống kĩ thuật 1.4 Xu hướng công nghệ tương lai lập trình di động Giới thiệu React Native 2.1 React Native gì? .9 2.2 Cài đặt React Native Windows 10 2.3 Cách hoạt động 13 2.4 Ưu điểm nhược điểm React Native 14 CHƯƠNG II: APP Youtobe 16 Giới thiệu đề tài 16 Giao diện chương trình 17 KẾT LUẬN 22 lOMoARcPSD|17343589 LỜI NÓI ĐẦU Trong lời báo cáo “Xây dựng App Youtube ”, nhóm em muốn gửi lời cám ơn biết ơn chân thành tới tất người hỗ trợ, giúp đỡ em kiến thức tinh thần trình thực làm Em xin chân thành gửi lời cảm ơn tới thầy, cô giáo Trường Đại Học Điện Lực nói chung thầy giáo Khoa Cơng nghệ thơng tin nói riêng tận tình giảng dạy, truyền đạt cho em kiến thức kinh nghiệm quý báu suốt trình học tập Đặc biệt, em xin gửi lời cảm ơn đến Giáo viên hướng dẫn Phương Văn Cảnh, 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 em Trong thời gian học tập với thầy, em khơng tiếp thu thêm nhiều kiến thức bổ ích mà 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 chúng 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, giáo bạn để nhóm em có thêm kinh nghiệm tiếp tục hoàn thiện đồ án Chúng em xin chân thành cảm ơn! lOMoARcPSD|17343589 CHƯƠNG I: GIỚI THIỆU VỀ LẬP TRÌNH DI ĐỘNG V䄃 REACT NATIVE 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 đồ hoạ phát triển cách mạnh mẽ có nhiều ứng dụng sống Xử lý ảnh đồ hoạ đó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 thắng 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 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 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 lOMoARcPSD|17343589 Hình : 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ớ đầ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 độ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 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 trền 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 lOMoARcPSD|17343589  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 Ngơn ngữ lập trình Android Java iOS Objective-C Windows Phone C# IDE Android Studio IBM's Eclipse với Google's ADT plugins Apple' X-Code Microsoft's Visual Studio cho Windows phone lOMoARcPSD|17343589 Hình 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.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 lOMoARcPSD|17343589 1.3 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 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 - 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 - Tuy nhiên, bạn người tài có hồi bão, bạn vượt qua tất Hầu hết nhân vật tiếng ngành Công nghệ thông tin khởi đầu từ hai bàn tay trắng, ngày họ giới ngưỡng mộ 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 lOMoARcPSD|17343589 - 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 - Kể lập trình viên "chiến" một dự án cần hiểu rõ vấn đề Agile process giúp cho việc phát triển phần mềm nhanh gọn linh hoạt đó, developer nắm bắt process áp dụng cách hiệu quả, trình phát triển phần mềm rút ngắn tinh gọn nhiề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 2.Giới thiệu React Native 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ờ 10 lOMoARcPSD|17343589 đó, 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 tồ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 Tính Live Reload React native 2.2 Cài đặt React Native Windows - Bước 1: Đầu tiên cần cài nodejs:https://nodejs.org/en/ 11 lOMoARcPSD|17343589 Hình Cài đặt NodeJs - Bước 2: Download git link :https://git-scm.com/ Hình 5: Download cài đặt Git - Bước 3: Cài đặt Chocolatey: @powershell –NoProfile –ExecutionPolicy Bypass –Command “iex ((newobjectnet.webclient).DownloadString(‘https://chocolatey.org/install.ps1’)) ”&& SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin Tiếp đến cài đặt Python choco install python2 12 Downloaded by v? ngoc (vuchinhhp10@gmail.com) lOMoARcPSD|17343589 Sau cài đặt chocolatey,python tiếp đến cài đặt React Native Command Line Tools npm install –g react–native–cli - Bước 4: Tiến hành cài đặt SDK phiên Android SDK Build-Tools 23.0.1 cách bạn mở Android Studio, Menu bạn chọn Tools–>Android–>SDK manager Hình 6: Cài đặt SDK Tiếp đến tab SDK Tools chọn Android SDK Build-Tools 23.0.1 khơng tìm thấy Android SDK Build-Tools 23.0.1 nhấn Show Package Details 13 Downloaded by v? ngoc (vuchinhhp10@gmail.com) lOMoARcPSD|17343589 Hình Cài đặt SDK Sau bạn install Android SDK Build-Tools 23.0.1 bạn quay lại tab SDK Platforms bạn chọn install thành phần sau :  Google APIs Intel x86 Atom System Image  Intel x86 Atom_64 System Image  Google APIs Intel x86 Atom_64 System Image - Bước 5: Cài đặt ANDROID_HOME Control Panel ->System and Security ->System 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 14 Downloaded by v? ngoc (vuchinhhp10@gmail.com) lOMoARcPSD|17343589 Hình : Cách hoạt động React native 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 15 Downloaded by v? ngoc (vuchinhhp10@gmail.com) lOMoARcPSD|17343589 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 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 Đâ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 16 Downloaded by v? ngoc (vuchinhhp10@gmail.com) lOMoARcPSD|17343589  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 II: APP YOUTUBE Giới thiệu đề tài Hiện giới tiến vào thời đại 4.0 , công nghệ thông tin ngày phát triển Vì vậy, nhu cầu tìm hiểu thơng tin qua mạng ngày phổ biến Ví dụ cơng ty, doanh nghiệp người có nhu cầu muốn sở hữu thiết bị công nghệ, điện tử để tăng suất làm việc, phụ giúp giảm bớt thời gian làm việc, nhân cơng,… Chính nhu cầu vậy, nên chúng em có ý tưởng sáng tạo nên “App Bán hoa ” để đáp ứng nhu cầu tìm hiểu người tiêu dùng Giao diện chương trình 17 Downloaded by v? ngoc (vuchinhhp10@gmail.com) lOMoARcPSD|17343589 2.1 giao diện Home: 19 Downloaded by v? ngoc (vuchinhhp10@gmail.com) lOMoARcPSD|17343589 2.2 Giao trang ấn vào video cần xem : 20 Downloaded by v? ngoc (vuchinhhp10@gmail.com) lOMoARcPSD|17343589 2.3 Giao diện trang Explore: 21 Downloaded by v? ngoc (vuchinhhp10@gmail.com)