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

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, ga

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

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

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

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

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

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

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

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ị

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

Quản lý

chung

Yêu cầu quản

Hiển thị thông tin

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

Thông tin

Lưu

Phê duyệt

2.2.3 Cơ sở dữ liệu và mô hình quan hệ

 Xác định các thực thể:

1 User(db_email ,db_name, ,db_pwd, db_icon,)

2 Group (db_id_auto, db_name, db_icon, db_check)

3.Comment(db_id_auto, db_id_cmt, db_name, db_contens,

db_likes, db_date)

4 Image(db_id_auto, db_names)

5 News(db_id_news, db_id_group, db_title, db_icon,

db_few_cnt, db_contens, db_likes, db_comment, , db_check)

 Mô tả chi tiết và về các quan hệ:

- Bảng User:

Hình 2.4 – Biểu đồ luồng dữ liệu dưới đỉnh 2

Yêu cầu comnent or like

Hình 2.5 – Bảng người dùng

Hình 2.8 – Sơ đồ quan hệ Hình 2.7 – Bảng chuyên mục

CHƯƠNG 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 năng, nhiệm vụ đã

đề ra Tuy nhiên, do hạn chế về thời gian nên tôi chỉ xin giới thiệu những kết quả cơ bản nhất trong quá trình xây dựng phần mềm

3.2 Vùng giao tiếp frontend

- Trang chủ:

Hình 3.1 – Trang chủ

- Tìm kiếm:

Hình 3.2– Lựa chọn chuyên mục

3.3 Vùng giao tiếp backend:

- Trang Admin:

Hình 3.3– Tìm kiếm

- Trang Xóa bản tin :

Hình 3.3– Trang thêm tin

Hình 3.3– Trang Xóa tin

KẾT LUẬN

Đối với em lần đầu tiên tìm hiểu về Sencha Tuoch 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 báo trên thiết bị di động sử dụng Sencha Tuoch

Kiểm nghiệm những kiến thức đã tìm hiểu được

Có cái nhìn rõ nét hơn về việc ứng dụng lý thuyết vào thực tế

Bên cạnh đó, nâng cao được kỹ năng phân tích, thiết kế và lập trình

t rong việc giải quyết những bài toán có trình độ phức tạp khá lớn

 Những điều chưa giải quyết được

Do khoảng thời gian ngắn để thực hiện, em đã không thể tiến hành tìm hiểu hiểu nghiên cứu sâu về vấn đề

Các chức năng của ứng dụng chưa phải là tối ưu nhất

Chưa cung cấp cho 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 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

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 hơn nữa các ứng dụng trên mobile phục vụ nhu cầu ngày càng cao của cuộc sống