Xây dựng ứng dụng web đọc tin tức trên thiết bị di động

BỘ CÔNG THƯƠNG TRƯỜNG CAO ĐẲNG CÔNG NGHIỆP HUẾ KHOA CÔNG NGHỆ THÔNG TIN    KHÓA LUẬN TỐT NGHIỆP Đề tài: XÂY DỰNG ỨNG DỤNG WEB ĐỌC TIN TỨC TRÊN THIẾT BỊ DI ĐỘNG GVHD Ths. Đặng Ngọc Hoàng Thành Sinh viên thực hiện Nguyễn Xuân Tâm Huế, 2013 PHỤ LỤC MỞ ĐẦU 1 CHƯƠNG 1. TÌM HIỂU VỀ SENCHA TOUCH 3 1.1. Sencha Touch 3 1.2. Lý do chọn Sencha Touch 3 1.3. Nền tảng được hỗ trợ 3 1.4. Sencha Touch với mô hình MVC 3 CHƯƠNG 2. XÂY DỰNG ỨNG DỤNG WEB ĐỌC BÁO TRÊN THIẾT BỊ DI ĐỘNG 6 2.1. Lý do chọn đề tài 6 2.2. Phân tích và thiết kế hệ thống 7 2.2.1. Sơ đồ ngữ cảnh 7 2.2.2. Biểu đồ luồng dữ liệu 7 2.2.3 Cơ sở dữ liệu và mô hình quan hệ 9 CHƯƠNG 3. HƯỚNG DẪN SỬ DỤNG PHẦN MỀM 13 3.1. Giới thiệu website: 13 3.2 Vùng giao tiếp frontend 13 KẾT LUẬN 19 TÀI LIỆU THAM KHẢO 21 Xây dựng ứng dụng WEB đọc báo trên thiết bị di động ======================================================= ======================================================= Sinh viên: Nguyễn Xuân Tâm – Lớp: 10CDTH01 – CĐCN Huế 1 MỞ ĐẦU Hiện nay, mọi người ngày càng có nhu cầu lớn về việc trải rộng “sự hiện diện” của họ ở mọi nơi, mọi lúc với các thông tin được luân chuyển liên tục qua thiết bị cá nhân nhằm gia tăng tối đa sự tiện lợi và khả năng tương tác của họ với xã hội. Thiết bị di động vì thế sẽ là lựa chọn tốt hơn để thỏa mãn nhu cầu này. Ta có thể dễ dàng nhận ra xu hướng sử dụng ngày càng nhiều các thiết bị di động như những dòng điện thoại thông minh, máy tính bảng (tablet) dựa trên nền tảng web, định vị toàn cầu (GPS), game video và ứng dụng không dây trong gia đình Với sự phát triển và cải tiến liên tục thiết bị di động, chúng ta có căn cứ để tin rằng, trong tương lai gần, máy tính truyền thống (PC) sẽ bị mất ưu thế so với thiết bị di động cá nhân nhỏ gọn, tiện ích và tích hợp đầy đủ chức năng của một chiếc máy tính. Châu Á đang nổi lên như một trong những khu vực có tốc độ tiêu dùng sản phẩm công nghệ thông tin phát triển nhảy vọt so với thế giới, thể hiện ở mức độ sử dụng Internet và sản phẩm công nghệ, đặc biệt là các thiết bị di động, bao gồm cả điện thoại thông minh, máy tính xách tay, máy tính bảng… Vì thế, chúng ta không nên chỉ nhìn nhận châu Á, trong đó có Việt Nam, là trung tâm sản xuất, gia công các sản phẩm công nghệ, mà còn là nơi hỗ trợ phát triển CNTT cho thế giới, mà cần coi đây như là thị trường khổng lồ tiêu thụ các sản phẩm CNTT. Với những nhận định trên, dòng sản phẩm điện toán di động sẽ tiếp tục đón nhận sự tăng trưởng mạnh mẽ trong năm 2013 và những năm tiếp theo, trong đó, máy tính vẫn đóng vai trò trung tâm trong cuộc sống số của mỗi người. Hơn nữa, năm 2013 còn được nhận định sẽ là năm của dòng sản phẩm ultrabook cho người dùng phổ thông với những lợi thế như thiết kế mỏng hơn 1 inch, nhẹ, xử lý nhanh và thời gian khởi động ngắn. Khả năng “tiêu dùng” và “tương tác” với thông tin mọi lúc, mọi nơi cũng như nhu cầu được chia sẻ, thảo luận những thông tin mà họ trải nghiệm được với những người xung quanh thông qua mạng xã hội đang trở thành một phần không thể thiếu của người sử dụng hiện đại. Bên cạnh đó, người sử dụng sẽ sẵn sàng trả tiền cho những trải nghiệm khác biệt và sự tiện lợi bởi các giải pháp CNTT. Xu hướng này cũng cho thấy ranh giới ngày càng mờ đi giữa các loại thiết bị như notebook, máy tính bảng tablet và các thiết bị di động khi người tiêu dùng đang tự tạo ra những phương thức sử dụng riêng. Khi các thiết bị di động được ưu tiên sử dụng hơn để kết nối web, khái niệm online và offline ngày càng trở nên không thích hợp. Và điều đó mang đến một phương thức nhìn nhận mới về việc, làm thế nào chúng ta sẽ hiểu về cách thức hòa nhập và trao đổi thông tin trong một bối cảnh nhất định về thời gian, không gian, và các mạng xã hội. Xây dựng ứng dụng WEB đọc báo trên thiết bị di động ======================================================= ======================================================= Sinh viên: Nguyễn Xuân Tâm – Lớp: 10CDTH01 – CĐCN Huế 2 Sự phát triển của smart phone và nhiều phương tiện với tính năng sử dụng web sẽ dẫn đến việc các trò chơi trên mạng xã hội trở thành trải nghiệm mới cho người sử dụng. Sự thay đổi tạo ra một cuộc cách mạng về phương tiện di động sẽ thúc đẩy việc sản xuất ngày càng nhiều hơn thiết bị di động. Quá trình tiêu thụ thông tin sẽ đòi hỏi nền tảng điện toán đám mây thông minh và các trung tâm dữ liệu hoạt động hiệu quả, bảo mật và quan trong là “nhận thức được khách hàng” để thích ứng với xu hướng và sự thay đổi ngày càng nhanh trong hành vi sử dụng CNTT của người tiêu dùng. . Xây dựng ứng dụng WEB đọc báo trên thiết bị di động ======================================================= ======================================================= Sinh viên: Nguyễn Xuân Tâm – Lớp: 10CDTH01 – CĐCN Huế 3 CHƯƠNG 1. TÌM HIỂU VỀ SENCHA TOUCH 1.1. Sencha Touch Sencha Touch là HTML5 Mobile Application Framework, được xây dựng để cho phép các nhà phát triển xây dựng một ứng dụng nhanh chóng, ấn tượng trên các môi trường iOS, Android, BlackBerry, Kindle Firevà sẽ tiếp tục hỗ trợ nhiều hơn nữa. Ở phiên bản 2.1 Sencha Touch hỗ trợ MVC (Models – Views – Controllers) tốt hơn so với phiên bản trước đó, bổ sung thêm các API để có thể truy cập các thiết bị phần cứng trên thiết bị tốt hơn. 1.2. Lý do chọn Sencha Touch Để xây dựng một ứng dụng cho mobile và đặc biệt là muốn phát triển cho cả 2 nền tảng là iOS và Android, lúc này thì chúng tôi sẽ phải học Objective C cho iOS và Java cho Android. Việc học 2 ngôn ngữ trên 2 nền tảng khác nhau quả thật rất khó khăn và tốn nhiều thời gian của chúng tôi. Tuy nhiên, với sự trợ giúp của thư viện Sencha Tuoch. Người thiết kế chỉ phải học duy nhất Sencha Tuoch là có thể triển khai ứng dụng trên các máy hệ điều hành Android , iOS và Ipad Sencha Touch sẽ là một lựa chọn tốt lúc này, bởi vì hiện nay nó đã cung cấp 1 bộ giao diện, các API (Application Programmer Interface) điều khiển thiết bị khá tốt. 1.3. Nền tảng được hỗ trợ Hầu như các thiết bị cầm tay có hệ điều hành được Sencha Touch hỗ trợ. Bản chất của Sencha Touch chính là HTML5, nên những thiết bị có hệ điều hành cần phải có một trình duyệt (Browser) được cập nhật những phiên bản mới nhất để có thể hỗ trợ đầy đủ mà Sencha Touch có. Các trình duyệt hỗ trợ tốt cho HTML5, mà cụ thể là Sencha Touch hiện nay như Google Chorme, Mobile Safari (iOS), Android Browser, BlackBerry Browser. 1.4. Sencha Touch với mô hình MVC Một ứng dụng Sencha Touch bao gồm các phần như: Controllers, Models, Views, Stores, Profiles. Xây dựng ứng dụng WEB đọc báo trên thiết bị di động ======================================================= ======================================================= Sinh viên: Nguyễn Xuân Tâm – Lớp: 10CDTH01 – CĐCN Huế 4 Controllers: Xử lý tương tác với người dùng, lắng nghe các sự kiện từ người dùng. Models: Đại diện như là một đối tượng ở Model bạn có thể khai báo các kiểu dữ liệu của bạn như mô tả table, các thuộc tính dữ liệu. Views: Dùng để hiển thị dữ liệu các components được xây dựng bởi Sencha Touch Store: Load dữ liệu cho ứng dụng của bạn, dữ liệu có thể là file Json hoặc từ một dịch vụ cung cấp dữ liệu nào đó. Có liên quan mật thiết tới Model. Profiles: bạn có thể dễ dàng tùy chọn cách hiển thị giao diện các component theo từng thiết bị mong muốn như: smartphone, tablet 1.5. Sencha Touch và jQuery Mobile Hai trong số những tên tuổi lớn nhất trong thiết kế web dành cho thiết bị di động là Sencha Touch & jQuery Mobile (mà hiện đã được tích hợp vào phiên bản mới nhất của Adobe Dreamweaver CS 5.5).Cả hai đều là miễn phí và cho phép các nhà phát triển để nâng cao trải nghiệm người dùng một cách nhanh chóng và dễ dàng bổ sung thêm các loại chuyển tiếp trơn chu, hình ảnh động và tương tác với việc sử dụng điện thoại thông minh màn hình cảm ứng kết hợp với các trình duyệt web di động mạnh mẽ. Tuy nhiên, dường như là Sencha là mạnh mẽ hơn và thực hiện tốt hơn so với jQuery Mobile, với các tương tác và hình ảnh động phong phú và mượt mà hơn, tạo "cảm giác tự nhiên"đối với giao diện người dùng. Về kiến trúc : jQuery không có kiến trúc thành lập nhưng đối với Sencha Touch phiên bản 2.0 trở đi, nó hỗ trợ mô hình MVC cực mạnh, từ đó nó dễ dàng quản lý hơn. Cả hai điều hỗ trợ tốt việc xử lí các công nghệ AJAX và JSON. Tuy nhiên , Sencha Touch không phụ thuộc và các thư viện khác. Nó chỉ tập trung vào việc xây dụng code bằng Javascipt và rất ít code html nên phù hợp với các các dự án lớn. Sencha Tuoch còn hỗ trợ xây dựng trên Adroid và iOS. Hình 1.1 - Kiến trúc cơ bản MVC Xây dựng ứng dụng WEB đọc báo trên thiết bị di động ======================================================= ======================================================= Sinh viên: Nguyễn Xuân Tâm – Lớp: 10CDTH01 – CĐCN Huế 5 Xây dựng ứng dụng WEB đọc báo trên thiết bị di động ======================================================= ======================================================= Sinh viên: Nguyễn Xuân Tâm – Lớp: 10CDTH01 – CĐCN Huế 6 CHƯƠNG 2. XÂY DỰNG ỨNG DỤNG WEB ĐỌC BÁO TRÊN THIẾT BỊ DI ĐỘNG Trong chương trước, báo cáo đã giới thiệu những kiến thức căn bản về Sencha Touch làm nền tảng cho việc xây dựng ứng dụng Web đọc báo trên thiết bị di động có sử dụng PHP & MySQL. Bước sang chương này, chúng tôi sẽ trình bày lý do chọn đề tài và đề xuất phương án thực hiện. Do giới hạn về quy mô khóa luận, chúng tôi không có điều kiện trình bày kiến thức nền về ngôn ngữ lập trình Sencha Touch và PHP, hệ quản trị cở sở dữ liệu MySQL, được sử dụng để xây dựng ứng dụng Web đọc báo trên thiết bị di động. 2.1. Lý do chọn đề tài Trong khoảng những năm trở lại đây, chúng ta đang chứng kiến 1 cuộc cách mạng thực sự với điện thoại và các thiết bị di động. Những chiếc điện thoại thông minh với cấu hình phần cứng còn cao hơn cấu hình của một chiếc máy tính desktop cách đây 10 năm. Phần lớn người dùng Việt Nam đang ưa thích những chiếc điện thoại với màn hình khá lớn, trang bị màn hình cảm ứng mà giá của chúng còn đắt hơn 1 chiếc máy tính sách tay. Xã hội càng phát triển, con người càng có xu hướng kết nối và cập nhật thông tin mọi lúc, mọi nơi. Việc truy cập website từ điện thoại thông minh hay máy tính bảng ngày nay đã là việc làm thường xuyên của không ít người. Điều đơn giản là điện thoại hay máy tính bảng rất nhỏ gọn, theo mọi người đi mọi nơi, giúp họ cập nhật thông tin từ Internet một cách nhanh nhất. Cách mà chúng ta tiếp cận với các website đã thay đổi, và các việc thiết kế các website cũng cần phải thay đổi để bắt kịp với những xu hướng mới. Trước đây, việc thiết kế website sử dụng cho điện thoại cũng đã được biết tới. Giải pháp khi đó là viết 1 phần mềm cho điện thoại, có mục đích tự động cập nhật thông tin từ website. Cũng có thể là xây dựng 1 phiên bản web giành riêng cho điện thoại di động và sử dụng như 1 sub-domain (Ví dụ mobile.tenmien.com hay m.tenmien.com ). Các giải pháp này đòi hỏi ngoài chi phí cho thiết kế website thông thường, bạn phải bỏ thêm chi phí để thiết kế thêm 1 website nữa hay 1 phần mềm di động nữa. Thực tế là chỉ có một vài công ty lớn, có tên tuổi và có tiềm lực tài chính mới có thể thực hiện điều này. Tin mừng cho chúng ta là trong một vài năm trở lại đây, các kỹ thuật thiết kế website cũng có những bước tiến vượt bậc. Các ngôn ngữ lập trình ngày một được hoàn thiện, các kỹ thuật mới được sáng tạo. HTML5, CSS3, PHP5 mang đến cho người thiết kế web nhiều giải pháp mới để lập trình web ứng dụng. Và những người thiết kế website hàng đầu cũng đã đón đầu xu hướng thiết kế website trên các thiết bị di động với công nghệ Sencha Touch. Hiện nay, báo điện tử đã trở nên phổ biến và tạo một thói quen đọc báo qua mạng (Internet) đối với nhiều người. Việc đọc báo qua mạng trên máy Xây dựng ứng dụng WEB đọc báo trên thiết bị di động ======================================================= ======================================================= Sinh viên: Nguyễn Xuân Tâm – Lớp: 10CDTH01 – CĐCN Huế 7 tính (PC) đã thể hiện những bất cập khi sử dụng. Chẳng hạn, một người muốn đọc báo điện tử, việc đầu tiên người đó phải tìm đến máy tính gần nhất, sau đó khởi động và vào mạng Internet. Công việc đó đã trở nên thuần thục đối đối những người thường xuyên tiếp xúc với máy tính. Nhưng với công việc bận rộn hiện nay, rất nhiều người không có thời gian để có thể trực tiếp sử dụng máy tính để đọc báo mạng. Trong khi những chiếc điện thoại thông minh ngày càng được phát triển, luôn theo sát người sử dụng với khả năng vược trội như truy cập mạng Internet mọi lúc, mọi nơi đã trở thành một giải pháp lý tưởng cho việc sử dụng thiết bị di động để đọc báo điện tử. Vậy, việc xây dựng một ứng dụng website đọc báo trên thiết bị di động là thật sự cần thiết. 2.2. Phân tích và thiết kế hệ thống 2.2.1. Sơ đồ ngữ cảnh 2.2.2. Biểu đồ luồng dữ liệu Biểu đồ luồng dữ liệu mức đỉnh Hình 2.1 – Sơ đồ mức ngữ cảnh Admin Hệ thống User Quản lý chung Yêu cầu quản lý Yêu cầu thông tin Hiển thị thông tin Xây dựng ứng dụng WEB đọc báo trên thiết bị di động ======================================================= ======================================================= Sinh viên: Nguyễn Xuân Tâm – Lớp: 10CDTH01 – CĐCN Huế 8 Biểu đồ luồng dữ liệu mức dưới đỉnh Chức năng cập nhật Chức năng Like và Comment Hình 2.3 – Biểu đồ luồng dữ liệu dưới đỉnh 1 Hình 2.2 – Biểu đồ luồng dữ liệu mức đỉnh Amin Quản trị HT Sửa đổi tin Tìm kiếm User Phân quyền Trang chủ Thông tin cập nhật Thông tin cập nhật Thông tin cập nhật Đăng nhập HT. Bổ sung Thông tin mới Thông tin Xóa Thông tin bổ sung Thêm TT mới Sửa Database Thông tin Thông tin Lưu Phê duyệt [...]... Sinh viên: Nguyễn Xuân Tâm – Lớp: 10CDTH01 – CĐCN Huế 17 Xây dựng ứng dụng WEB đọc báo trên thiết bị di động ======================================================= Hình 3.3– Trang Xóa tin ======================================================= Sinh viên: Nguyễn Xuân Tâm – Lớp: 10CDTH01 – CĐCN Huế 18 Xây dựng ứng dụng WEB đọc báo trên thiết bị di động =======================================================... Nguyễn Xuân Tâm – Lớp: 10CDTH01 – CĐCN Huế 11 Xây dựng ứng dụng WEB đọc báo trên thiết bị di động ======================================================= Hình 2.7 – Bảng chuyên mục Hình 2.8 – Sơ đồ quan hệ ======================================================= Sinh viên: Nguyễn Xuân Tâm – Lớp: 10CDTH01 – CĐCN Huế 12 Xây dựng ứng dụng WEB đọc báo trên thiết bị di động =======================================================... Xuân Tâm – Lớp: 10CDTH01 – CĐCN Huế 14 Xây dựng ứng dụng WEB đọc báo trên thiết bị di động ======================================================= Hình 3.3– Tìm kiếm 3.3 Vùng giao tiếp backend: - Trang Admin: ======================================================= Sinh viên: Nguyễn Xuân Tâm – Lớp: 10CDTH01 – CĐCN Huế 15 Xây dựng ứng dụng WEB đọc báo trên thiết bị di động =======================================================... Sinh viên: Nguyễn Xuân Tâm – Lớp: 10CDTH01 – CĐCN Huế 9 Xây dựng ứng dụng WEB đọc báo trên thiết bị di động ======================================================= Hình 2.5 – Bảng người dùng ======================================================= Sinh viên: Nguyễn Xuân Tâm – Lớp: 10CDTH01 – CĐCN Huế 10 Xây dựng ứng dụng WEB đọc báo trên thiết bị di động =======================================================... và xây dựng một ứng dụng Web đọc báo trên thiết bị di động Đây là một điều hết sức mới mẻ Chính vì vậy, đã thúc đẩy em tôi vừa tìm hiểu lý thuyết vừa cố gắng xây dựng một phần mềm ứng dụng, với tham vọng nắm được những gì gọi là căn bản nhất trong khoảng thời gian thực hiện Theo sự gợi ý và giúp đỡ tận tình của thầy Đặng Ngọc Hoàng Thành đã hướng dẫn em đã lựa chọn bài toán xây dựng ứng dụng web đọc. .. người dùng khả năng tùy chọn của ứng dụng như post bài, đăng nhập  Một vài suy nghĩ sau khi tìm hiểu về Sencha Tuoch để xây dựng ứng dụng đọc báo trên thiết bị di động Sự ra đời của Sencha Tuoch đã giảm đi rất nhiều công sức cho việc thiết kế một ứng dụng trên thiết bị di động Qua mỗi phiên bản về sau thì tính ưu việt của nó càng được thể hiện rõ Sencha Tuoch cung cấp giao di n mượt mà, thân thiện với... quả cài đặt ứng dụng ======================================================= Sinh viên: Nguyễn Xuân Tâm – Lớp: 10CDTH01 – CĐCN Huế 19 Xây dựng ứng dụng WEB đọc báo trên thiết bị di động ======================================================= Phát triển ứng dụng thành một địa chỉ cung cấp tin tức lớn và đáng tin cậy Dựa trên những gì tìm hiểu về Sencha Tuoch, trong tương lai sẽ cố gắng xây dựng nhiều... 3 HƯỚNG DẪN SỬ DỤNG PHẦN MỀM 3.1 Giới thiệu website: Sau khi tiến hành phân tích và thiết kế bài toán cần thực hiện, tôi đã tiến hành xây dựng ứng dụng web đọc báo trên thiết bị di động bằng ngôn ngữ lập trình Senchar Touch; kết hợp với ngôn ngữ lập trình PHP và Hệ quản trị CSDL MySQL Với sự phân tích và thiết kế như đã nêu trên thì phần mềm về cơ bản đã được xây dựng thành công, đáp ứng những chức... cung cấp giao di n mượt mà, thân thiện với người dùng  Hướng phát triển tiếp theo của đề tài Bài báo cáo được xây dựng dựa trên những bước đi chập chững đầu tiên trong quá trình tìm hiểu về Sencha Tuoch, PHP và MySQL, nhằm ứng dụng vào việc xây dựng ứng dụng web đọc báo trên thiết bị di động nên chắc chắn là sẽ có rất nhiều điều có thể tiếp tục phát triển Tuy nhiên, chỉ xét trong phạm vi bài toán... toán xây dựng ứng dụng web đọc báo trên thiết bị di động sử dụng Sencha Tuoch cùng với PHP và MySQL Trong khuôn khổ các tìm hiểu và học tập, em đã đạt được một số kết quả cụ thể như sau: Đã nắm được khái niệm về những thành phần, các kiến trúc cơ bản của Sencha Tuoch cũng như ngôn ngữ PHP và My SQL Ngoài ra, việc xây dựng được ứng dụng web đọc báo trên thiết bị di cho phép em: Kiểm nghiệm những kiến . CHƯƠNG 2. XÂY DỰNG ỨNG DỤNG WEB ĐỌC BÁO TRÊN THIẾT BỊ DI ĐỘNG 6 2. 1. Lý do chọn đề tài 6 2. 2. Phân tích và thiết kế hệ thống 7 2. 2.1. Sơ đồ ngữ cảnh 7 2. 2 .2. Biểu đồ luồng dữ liệu 7 2. 2.3. động là thật sự cần thiết. 2. 2. Phân tích và thiết kế hệ thống 2. 2.1. Sơ đồ ngữ cảnh 2. 2 .2. Biểu đồ luồng dữ liệu Biểu đồ luồng dữ liệu mức đỉnh Hình 2. 1 – Sơ đồ mức ngữ cảnh Admin. biệt là muốn phát triển cho cả 2 nền tảng là iOS và Android, lúc này thì chúng tôi sẽ phải học Objective C cho iOS và Java cho Android. Việc học 2 ngôn ngữ trên 2 nền tảng khác nhau quả thật