Xây dựng app tin tức bóng đá thể thao

LỜI NÓI ĐẦU CHƯƠNG I: GIỚI THIỆU VỀ LẬP TRÌNH DI ĐỘNG V REACT NATIVE .5 Giới thiệu lập trình di động .5 1.1 Khái quát lập trình thiết bị di động .5 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 TIN TỨC BÓNG ĐÁ THỂ THAO .16 Giới thiệu đề tài 16 Giao diện chương trình 17 KẾT LUẬN 20 LỜI NÓI ĐẦU Trong lời báo cáo “Xây dựng App tin tức bóng đá 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 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, giáo Trường Đại Học Điện Lực nói chung thầy cô 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 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 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à 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 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! 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, tivi…) 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 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 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 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  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 - Ngoà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 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 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 - 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 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ờ đó, với kỹ sư thành thạo javascript, bạn chiến đấu mặt trận web, desktop, server mobile Điều 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/ 10 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 11 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 12 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 Hình : Cách hoạt động React native 2.4 Ưu điểm nhược điểm React Native 13 - Ư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 14 - 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 15 CHƯƠNG II: APP BẢNG TIN BĨNG ĐÁ Giới thiệu đề tài Bóng đá môn thể thao vua nên nhiều người quan tâm Bảng xếp hạng FIFA tháng 12 năm 2020 liên tục cập nhật xếp hạng/thứ hạng tuyển bóng đá nam Việt Nam sau tham dự giải đấu lớn khu vực Châu Á Thế giới như: U23 Châu Á, AFF Cup, Asian Cup (Cúp Châu Á), Asiad Vòng loại World Cup KV Châu Á Năm 2018 năm đội tuyển nam bóng đá Việt Nam có bước tiến nhảy vọt gặt hái bước tiến lớn cấp độ giải trẻ U23 đội tuyển quốc gia Việt Nam Bảng xếp hạng bóng đá FIFA nam (BXH FIFA) hệ thống xếp hạng (thứ hạng) cho đội tuyển quốc gia bóng đá nam Liên đồn bóng đá Các đội bóng quốc gia thành viên FIFA, nơi điều hành hoạt động bóng đá toàn giới, xếp hạng dựa kết trận đấu đội có nhiều thắng lợi xếp hạng cao hệ thống điểm sử dụng, điểm thưởng dựa kết trận đấu quốc tế FIFA công nhận Trước hệ thống nay, BXH dựa thành tích đội bóng năm gần nhất, với nhiều kết gần nhiều trận đấu quan trọng có ảnh hưởng nặng cho việc giúp mang lại vị trí cao cho đội bóng Chính nhóm mà nhóm chúng em lựa chọn đề tài làm báo cáo chuyên đề môn học Giao diện chương trình 16 Hình : Giao diện trang chủ ’ 17 Hình 11 : Giao diện chi tiết đội bóng 18 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 Đặng Trần Đức, nhóm em hồn thành báo cáo với đề tài: “Xây dưng APP bảng xếp hạng bóng đá” Trong q trình nghiên cứu xây dựng lên chương trình này, nhóm em cố gắng đồ án cịn có 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! 19 ...Trong lời báo cáo ? ?Xây dựng App tin tức bóng đá 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 người hỗ trợ, giúp đỡ em kiến thức tinh thần trình thực làm Em xin... CHƯƠNG II: APP BẢNG TIN BÓNG ĐÁ Giới thiệu đề tài Bóng đá mơn thể thao vua nên nhiều người quan tâm Bảng xếp hạng FIFA tháng 12 năm 2020 liên tục cập nhật xếp hạng/thứ hạng tuyển bóng đá nam Việt... thống xếp hạng (thứ hạng) cho đội tuyển quốc gia bóng đá nam Liên đồn bóng đá Các đội bóng quốc gia thành viên FIFA, nơi điều hành hoạt động bóng đá tồn giới, xếp hạng dựa kết trận đấu đội có nhiều