Đề tài NGHIÊN CỨU CHẾ TẠO MÔ HÌNH Ổ CẮM ĐIỆN ĐƯỢC ĐIỀU KHIỂN TỪ XA QUA MẠNG INTERNET 3G SỬ DỤNG RASPBERRY PI B+ VỚI GIAO DIỆN ĐIỀU KHIỂN ĐỒNG NHẤT TRÊN ĐIỆN THOẠI THÔNG MINH ANDROID, WINDOWSPHONE

Hệ thống giám sát hoạt động đóng cắt điện trên thiết bị di động theo thời gian thực qua internet với cơ chế cảnh báo quá tải và không tải. Nội dung tài liệu bao gồm: Hướng dẫn lập trình board mạch Raspberry pi Hướng dẫn lập trình Android theo công nghệ HTML 5 Hướng dẫn lập trình ứng dụng trên Windows 10 dùng HTML 5 Phần cứng giao tiếp raspberry PI

TRƯỜNG ĐẠI HỌC TIỀN GIANG KHOA KỸ THUẬT CÔNG NGHIỆP

_

HOÀNG HỮU DUY

ĐỀ TÀI NGHIÊN CỨU KHOA HỌC NGHIÊN CỨU CHẾ TẠO MÔ HÌNH Ổ CẮM ĐIỆN ĐƯỢC ĐIỀU KHIỂN TỪ XA QUA MẠNG INTERNET 3G SỬ DỤNG RASPBERRY PI B+ VỚI GIAO DIỆN ĐIỀU KHIỂN ĐỒNG NHẤT TRÊN ĐIỆN THOẠI THÔNG MINH

ANDROID, WINDOWSPHONE

TIỀN GIANGNĂM 2017

TRƯỜNG ĐẠI HỌC TIỀN GIANG KHOA KỸ THUẬT CÔNG NGHIỆP

_

HOÀNG HỮU DUY

ĐỀ TÀI NGHIÊN CỨU KHOA HỌC NGHIÊN CỨU CHẾ TẠO MÔ HÌNH Ổ CẮM ĐIỆN ĐƯỢC ĐIỀU KHIỂN TỪ XA QUA MẠNG INTERNET 3G SỬ DỤNG RASPBERRY PI B+ VỚI GIAO DIỆN ĐIỀU KHIỂN ĐỒNG NHẤT TRÊN ĐIỆN THOẠI THÔNG MINH

ANDROID, WINDOWSPHONE

MỤC LỤC

A MỞ ĐẦU

1 Mục tiêu của đề tài

Mục đích nghiên cứu là chế tạo mô hình ổ cắm điện được điều khiển từ xa quamạng Internet 3G với giao diện điều khiển đồng nhất trên điện thoại thông minhAndroid, WindowsPhone Để thực hiện được mục đích này, có các mục tiêu sau cầnphải thực hiện:

- Nghiên cứu thiết lập kết nối Internet 3G cho Raspberry PI B+

- Nghiên cứu giải pháp truyền nhận dữ liệu giữa Raspberry PI B+ với điện thoạiAndroid, WindowsPhone thông qua webServer

- Nghiên cứu lập trình dịch vụ web cho webServer

- Nghiên cứu lập trình điều khiển cho Raspberry PI B+

- Nghiên cứu lập trình điều khiển cho thiết bị di động Android, WindowsPhone

- Nghiên cứu xây dựng bộ chuyển đổi công suất điện và giám sát quá tải choRaspberry PI B+

+ Nghiên cứu tạo hình mô hình ổ cắm

2 Đối tượng nghiên cứu

Đối tượng nghiên cứu: Mô hình ổ cắm điện được điều khiển từ xa qua mạngInternet 3G sử dụng Raspberry PI B+ với giao diện điều khiển đồng nhất trên điệnthoại thông minh Android, WindowsPhone

- Sản phẩm nghiên cứu có các tính năng sau:

+ Số lượng ngõ ra điện là 4

+ Có chế độ điều khiển bằng tay và qua thiết bị di động

+ Ổ cắm điện kết nối với mạng di động Viettel

+ Điện áp vận hành 220V với dòng điện điều khiển tối đa 1A cho mỗi ngõ ra của

ổ cắm

+ Tự động ngắt thiết bị điện kết nối vào ổ cắm khi dòng điện lớn hơn 1A

+ Thời gian đáp ứng tối đa trong điều khiển là 3 giây

+ Thời gian kiểm tra thiết bị điện kết vào ổ cắm là 5 giây

+ Giao diện điều khiển đồng nhất trên điện thoại hệ điều hành Android vàWindowsPhone

+ Chương trình điều khiển trên điện thoại di động Android, WindowsPhone cóthể điều khiển nhiều mô hình ổ cắm điện với số lượng tối đa là 10

+ Chương trình điều khiển trên điện thoại di động Android, WindowsPhone:

dụng

+ Kích thước mô hình ổ cắm điện:

 Dài: 40 cm

3 Cách tiếp cận và phương pháp nghiên cứu

Cách tiếp cận:

- Tiếp cận từ thực tiễn → tổng hợp, phát triển bổ sung lý thuyết → giải pháp Phương pháp nghiên cứu, kỹ thuật sử dụng:

- Phương pháp nghiên cứu lý thuyết: tra cứu, tham khảo tài liệu sách báo

- Phương pháp mô hình hóa:

+ Sử dụng phần mềm Protues 8 để mô phỏng mạch

+ Sử dụng phần mềm intel XDK để mô phỏng điện thoại Android vàWindowsPhone

+ Sử dụng phần mềm Putty để mô phỏng chương trình điều khiển Raspberry PIB+

- Phương pháp thực nghiệm khoa học:

+ Sử dụng host miễn phí để vận hành phần mềm (Scripts) truyền nhận dữ liệu.+ Sử dụng điện thoại Android và WindowsPhone để kiểm tra phần mềm điềukhiển

+ Sử dụng VOM, máy dao động ký để đo điện áp ngõ ra

4 Giả thuyết nghiên cứu

Nếu ổ cắm điện được kết nối internet 3G và điện thoại thông minh Android,WindowsPhone có kết nối internet (3G/Wifi) thì người dùng có thể điều khiển và giámsát trạng thái điện ở ngõ ra của ổ cắm

5 Tổng quan tình hình nghiên cứu thuộc lĩnh vực của đề tài

5.1 Ngoài nước:

Sản phẩm ổ cắm điện thông minh có kết nối Internet qua 3G/GPRS đã đượcthương mại hóa với nhiều tính năng nổi bật như: hẹn giờ, kiểm tra quá dòng điện, kiểmtra thiết bị kết nối, phát cảnh báo Một số sản phẩm kết nối được đồng thời với cácthiết bị di động thông minh như: Android, iOS, WindownPhone…[17] [18]

Đề tài “The Design of the Embedded Wireless Vehicles Monitoring Management System Based on GPRS: Evidence from China” nghiên cứu giải pháp truyền nhận gói

dữ liệu qua mạng Internet thông qua kết nối GPRS Giải pháp cho phép gửi dữ liệuqua mạng di động với tốc độ thấp nhưng tầm hoạt động rất rộng [1]

Đề tài “Mobile Monitoring and Embedded Control System for Factory Environment” nghiên cứu giải pháp gửi dữ liệu và thu thập dữ liệu từ điện thoại di

động Hệ thống sử dụng phần mền dựng sẳn để xây dựng chương trình điều khiển trên

di động và sử dụng board mạch nhúng để thiết kế hệ thống xử lý dữ liệu thu thập được.Dữ liệu nhận được phục vụ cho việc theo dõi trạng thái môi trường của công ty [2]

Đề tài “GSM Based Home Automation System Using App-Inventor for Android Mobile Phone” nghiên cứu chế tạo bộ điều khiển đóng ngắt điện từ xa qua điện thoại

hệ điều hành Android Giải pháp của đề tài là sử dụng module GSM kết hợp với viđiều khiển 8951 Ưu điểm của đề tài là có giao diện điều khiển thân thiện với người

dùng Nhược điểm chỉ có thể điều khiển đóng ngắt và điều khiển được trên điện thoại

Android [5]

Đề tài “Home Appliance Control Ad-hoc Network System using App Inventor”

nghiên cứu giải pháp điều khiển đóng ngắt điện thông qua mạng WiFi với kết nối kiểuAd-hoc Giải pháp này có ưu điểm là chi phí vận hành thấp, tuy nhiên, tầm điều khiểnhẹp [6]

Đề tài “Web-controlled Embedded System using Mobile” và đề tài “Research and Implement of Ethernet Interface Based on Embedded System”nghiên cứu giải

pháp điều khiển qua web với giao diện mobile Hệ thống có sử dụng hệ thống nhúng

để xử lý dữ liệu truyền nhận Ưu điểm nổi trội của giải pháp này là giao diện điềukhiển thân thiện và tầm điều khiển xa [10][11]

5.2 Trong nước:

Việt Nam đang có tỷ lệ sử dụng điện thoại thông minh cũng như dịch vụ Internet3G khá cao Tỷ lệ thuê bao di dộng tại Việt Nam đạt khoảng 140 thuê bao/100 dân.Trong đó, số lượng người dùng dịch vụ 3G đạt khoảng 18,57%, với khoảng 27,5 triệuthuê bao phát sinh lưu lượng Mật độ phủ sóng di động trên cả nước là 94% [15].Trong tổng số 17,22 triệu điện thoại thông minh dự kiến được bán ra ở Việt Nam năm

2014, có tới 14,2 triệu (tương đương 82%) là thuộc về người dùng mới [16] Giá thànhdịch vụ 3G ngày càng rẻ và tốc độ truyền tải dữ liệu khá nhanh Điều này tạo tiền đềthuận lợi cho các ứng dụng điều khiển qua mạng Internet 3G kết hợp với Smartphone.Các sản phẩm điều khiển xa dùng để đóng ngắt thiết bị điện rất đa dạng và phongphú:

+ Đề tài “Thiết kế webServer điều khiển bật tắt thiết bị điện từ xa trên nền máy tính nhúng Rasberry PI” điều khiển đóng ngắt thiết bị điện thông qua webSite ở mạng

cục bộ Ưu điểm của giải pháp này là chi phí vận hành thấp Tuy nhiên, nhược điểm làphạm vi điều khiển bị giới hạn trong phạm vi mạng cục bộ [4]

+ Đề tài “Thiết kế hệ thống điều khiển xa qua đường dây điện thoại trên cơ sở chíp DTMF” cũng là điều khiển đóng ngắt thiết bị điện Với giải pháp điều khiển qua

dây điện thoại, phạm vi điều khiển xa hơn, có thể mở rộng toàn cầu Tuy nhiên, hệthống bị vướng bận do phải sử dụng dây dẫn và giá cước dịch vụ thường cao khi phải

di chuyển từ vùng này sang vùng khác Hạn chế thứ 2 của giải pháp đó là không cótính hai chiều [9]

Đề tài “Ứng dụng công nghệ GPRS và GPS vào chế tạo Robot giao tiếp với Server điều khiển”, “Thiết kế hệ thống điều khiển và giám sát từ xa thông qua hệ thống truyền thông với giao thức TCP/IP” và “Điều khiển hệ thống tưới tiêu từ xa bằng Internet” có điểm chung là điều khiển thông qua webServer Ưu điểm của giải

pháp này là cho phép truyền gửi hai chiều thông qua trang web Điều này cũng cónghĩa cần phải sử dụng máy tính có kết nối mạng để điều khiển Trong một số hoàncảnh, việc sử dụng máy tính trong điều khiển thường không mang lại sự tiện nghi chongười dùng [12][3][7]

Đề tài “Xây dựng ứng dụng điều khiển đóng-ngắt thiết bị điện qua web trên board mạch Raspberry PI” và đề tài “Ứng dụng Raspberry PI trong việc thiết kế chế tạo bộ đóng ngắt thiết bị điện được điều khiển từ xa qua thiết bị Android trong môi trường Internet” cho ra đời các bộ điều khiển đóng ngắt qua môi trường Internet sử

dụng trực tiếp board mạch Raspberry PI Ưu điểm của sản phẩm này là có thể điềukhiển qua Internet đồng thời trên website và trên thiết bị Android Tuy nhiên giao diện

điều khiển không được đồng nhất, gây khó khăn cho người vận hành Mặt khác, sảnphẩm chỉ có thể điều khiển thông qua thiết bị di động Android Module vận hành cầnphải có dây mạng mới có thể vận hành được [8][13].

Ổ cắm điện điều khiển từ xa là một trong các ứng dụng cụ thể của điều khiểnđóng ngắt điện Hiện nay trên thị trường xuất hiện loại ổ cắm này [17] Ưu điểm nổitrội của sản phẩm là nhỏ gọn Tuy nhiên khoản cách điều khiển có giới hạn và chỉ chophép điều khiển một chiều từ thiết bị điều khiển đến ổ cắm Người dùng hoàn toànkhông xác nhận chính xác trạng thái hoạt động Một số ít sản phẩm thông minh hơn,kết nối được với điện thoại thông minh thông qua WiFi hoặc Bluetooth Tuy nhiên,mức độ tương thích với điện thoại thông minh còn hạn chế, chủ yếu là điện thoạiAndroid và vùng điều khiển khá hẹp [14]

6 Luận giải về sự cần thiết, tính cấp bách, ý nghĩa lý luận và thực tiễn của đề tài

Đề tài được thực hiện với các lý do sau:

+ Điện thoại Android và WindowsPhone ngày càng trở nên thông dụng

+ Internet qua mạng 3G ngày càng phổ biến với giá thành rẻ, tốc độ truyền gửidữ liệu nhanh và thiết lập đơn giản

+ Ổ cắm điện là vật dụng sử dụng rộng rãi ở các hộ gia đình cũng như văn phòngvà được sử dụng với mục đích mở rộng số thiết bị điện hiện có Sản phẩm được xâydựng với mục đích giám sát và điều khiển tắt mở các thiết bị này, góp phần sử dụngđiện năng một cách hiệu quả

+ Sự đồng nhất giao diện điều khiển giữa các thiết bị giúp dễ dàng cho người sửdụng

Tầm quan trọng của đề tài:

+ Phù hợp với xu thế hiện là sử dụng các thiết bị di động để điều khiển các thiếtbị khác

+ Giám sát và điều khiển thiết bị điện ở bất cứ nơi nào có kết nối Internet 3G

B NỘI DUNG

CHƯƠNG 1.

MÔ HÌNH ĐIỀU KHIỂN QUA INTERNET 3G

1 Tổng quan TCP/IP và mạng 3G

1.1 Khái niệm TCP/IP

Bộ giao thức TCP/IP (Internet Protocol Suite) là bộ giao thức mà Internet và cácmạng máy tính đang sử dụng và chạy trên đó Nó gồm 2 giao thức chính là TCP(Transmission Control Protocol - Giao thức điều khiển giao vận) và IP (InternetProtocol - Giao thức liên mạng)

Bộ giao thức TCP/IP được coi là một tập hợp các tầng Mỗi tầng giải quyết mộttập các vấn đề liên quan đến việc truyền tải dữ liệu, và cung cấp cho các giao thức tầngcấp trên một dịch vụ được định nghĩa rõ ràng dựa trên việc sử dụng các dịch vụ của các tầng thấp hơn Hay nói cách khác, các tầng trên gần với người dùng hơnvà làm việc với dữ liệu trừu tượng hơn, chúng dựa vào các tầng cấp dưới để biến đổidữ liệu thành các dạng mà cuối cùng có thể truyền đi một cách vật lý

1.2 Mô hình TCP/IP

Mô hình TCP/IP được phân làm 4 lớp:

- Lớp ứng dụng - Application Layer: Tầng cao nhất trong cấu trúc phân lớp củaTCP/IP Tầng này bao gồm tất cả các chương trình ứng dụng sử dụng các dịch vụ sẵncó thông qua một chồng giao thức TCP/IP như DHCP, DNS, HTTP, FTP, Telnet,SMTP, … Chúng sẽ tương tác với tầng vận chuyển để truyền hoặc nhận dữ liệu

- Lớp vận chuyển - Transport Layer: Gồm 2 đại biểu chính: giao thức TCP vàgiao thức UDP

Hình 1.1 Mô hình TCP/IP

+ TCP tạo ra các kết nối gi.ữa 2 máy cần trao đổi dữ liệu (Tạo ra một “đườngống” riêng) mà qua đó các gói tin được bảo đảm chuyển tới nơi nhận một cách đángtin cậy và đúng thứ tự

+ UDP được dùng để gửi những dữ liệu ngắn (gọi là Datagram) tới những máykhác, UDP không cung cấp độ tin cậy và thứ tự truyền nhận.

- Tầng Internet - Internet Layer: Tầng này dùng để xác định mạng đích, địnhtuyến đường truyền cho phép truyền qua một số mạng trước khi đến đích

- Tầng truy cập mạng - Link Layer: Tạo ra cách thức kết nối như: Ethernet, Wifi,PPP…

1.3 Giao thức HTTP

Giao thức này nằm trong lớp ứng dụng, được sử dụng để truyền nội dung trangweb từ máy chủ (webserver) đến trình duyệt web ở máy khách (client) Giao thức nàyhoạt động theo cơ chế máy khách yêu cầu và máy chủ đáp ứng Để bắt đầu trao đổi dữliệu, phía máy khách khởi tạo một giao thức HTTP bằng cách mở một kết nối TCP đếnmáy chủ trước khi máy khách gửi yêu cầu tài nguyên Một yêu cầu từ máy khách phảiđảm bảo 3 thông tin chính:

- Method: Thường được sử dụng là GET, POST

- URI: Địa chỉ định danh của tài nguyên

- HTTP version: Phiên bản HTTP đang sử dụng

1.4 Kỹ thuật duy trì kết nối máy chủ máy khách

Trong giao thức http, kết nối giữa máy chủ và máy khách bị gián đoạn sau khigói tin được gửi từ máy chủ về đến máy khách Trong một số trường hợp, giao tiếpnày không cần phải kết nối lại và đảm bảo thông tin liên lạc giữa máy khách và máychủ thông suốt, một số kỹ thuật ra đời nhằm giải quyết vấn đề này

1.4.1 Kỹ thuật ajax polling

Máy khách gửi yêu cầu một trang web từ máy chủ Trang web được yêu cầu sửdụng Javascript thực hiện gửi yêu cầu liên tục đến một tập tin trên máy chủ với khoảngthời gian đều đặn Máy chủ tự động tính toán và gửi đáp ứng theo các yêu cầu của máykhách Kỹ thuật này cho phép thực hiện đơn giản Tuy nhiên, máy chủ phản hồi dữliệu một cách thụ động Trong các trường hợp cập nhật nhanh dữ liệu mới, kỹ thuậtnày tạo ra độ trễ khá lớn

Máy chủ

Máy khách

Thời gian

Gửi yêu cầu

Gửi phảnhồi

Gửi yêu cầu

Gửi phảnhồi

Gửi yêu cầu

Gửi phảnhồi

Hình 1.2 Mô hình kỹ thuật ajax polling

1.4.2 Kỹ thuật ajax long-polling

Kỹ thuật này tương tự như kỹ thuật ajax polling Tuy nhiên, máy chủ chỉ gửiđáp ứng khi có dữ liệu mới Máy khách chỉ gửi yêu cầu tiếp theo sau khi nhận được

gói dữ liệu từ máy chủ Kỹ thuật này cho phép thực hiện các thao tác cập nhật mớitheo thời gian thật Tuy nhiên, máy chủ vẫn bị động trong việc gửi dữ liệu đến máykhách.

Máy chủ

Máy khách

Thời gian

Gửi yêu cầu

Gửi phản hồi

Gửi yêu cẩu

Gửi phảnhồi

Gửi yêu cẩu

Hình 1.3 Mô hình kỹ thuật ajax long polling

1.4.3 Kỹ thuật websocket

Khi một dữ liệu được truyền tải thông qua giao thức HTTP sẽ chứa quá nhiều nộidung không cần thiết đến trong phần header Điều này gây hao tốn băng thông đườngtruyền và dẫn đến giảm tốc độ xử lý dữ liệu websocket là một công nghệ hỗ trợ giaotiếp hai chiều giữa máy chủ và máy khách mà ở đó chỉ có dữ liệu được trao đổi vớinhau mà không chứa các nội dung khác Các thông tin trong phần hearder chỉ trao đổimột lần duy nhất tại thời điểm kết nối Ngoài ứng dụng web được sử dụng trong giaothức này, các ứng dụng cho các nền tảng khác cũng được phát triển nhằm mục đíchtrao đổi nhanh chống dữ liệu giữa máy chủ và máy khách

Hình 1.4 Nội dung header trong kết nối websocket

Có 2 thuộc tính trong giao thức websocket:

- Thuộc tính trạng thái sẳn sàng (Socket.readyState): Thuộc tính này diễn tảtrạng thái kết nối Giá trị trả về là một số nguyên từ 0 đến 3

+ Giá trị 0 thể hiện kết nối chưa được thành lập

+ Giá trị 1 thể hiện kết nối đã được thành lập và sẳn sàng giao tiếp

+ Giá trị 2 thể hiện kết nối đang được đóng lại và không thể giao tiếp

+ Giá trị 3 thể hiện kết nối đã đóng lại hoặc không thể mở trở lại

- Thuộc tính bộ nhớ đệm (Socket.bufferedAmount): Thuộc tính này diễn tả sốlượng byte được lưu trong bộ nhớ tạm trước khi được gửi đi.

Máy khách sau khi kết nối với websocket xảy ra 4 sự kiện:

- Sự kiện mở kết nối: Sự kiện này xảy ra khi kết nối thành công giữa máy kháchvà máy chủ

- Sự kiện nhận dữ liệu: Sự kiện này xảy ra khi có một bản tin được gửi từ máychủ đến máy khách

- Sự kiện lỗi: Sự kiện này xảy ra khi có bất cứ lỗi nào phát sinh trong quá trìnhgiao tiếp

- Sự kiện đóng kết nối: Sự kiện này xảy ra khi kết nối bị đóng lại

Yêu kết nối Phản hồi kết nối

Dữ liệu đến máy chủ

Máy khách chủ động gửi dữ liệu

Dữ liệu đến máy khách

Máy chủ chủ động gửi dữ liệu Sự kiện nhận dữ liệu

Lỗi phát sinh Sự kiện lỗi

Sự kiện lỗi

Sự kiện nhận dữ liệu Sự kiện kết nối thành công Mã trạng thái Sự kiện kết nối thành công

Sự kiện đóng kết nối Mã trạng thái Sự kiện đóng kết nối

Kết nối thành công

Mất kết nối

Tạo kết nối

Hình 1.5 Trao đổi dữ liệu trong websocket

1.5 Tổng quan mạng internet 3G

1.5.1 Tổng quan

Mạng 3G là thế hệ thứ ba của chuẩn công nghệ điện thoại di động, ngoài cácdịch vụ thông thường như : nghe, gọi, nhắn tin , còn cung cấp các dịch vụ khác như:tải dữ liệu, âm thanh, hình ảnh Điểm mạnh 3G so với công nghệ trước là cho phéptruy cập internet, sử dụng các dịch vụ định vị toàn cầu GPS, truyền, nhận các dữ liệu,

âm thanh, hình ảnh chất lượng cao cho cả thuê bao cố định và thuê bao đang di chuyểnở các tốc độ khác nhau

Công nghệ 3G được các nhà sản xuất thiết bị viễn thông lớn trên thế giới xâydựng thành 4 chuẩn chính:

- W-CDMA: Là nền tảng của chuẩn UMTS, sử dụng băng rộng để có tốc độ cao + HSDPA (High-Speed Downlink Packet Access): Gói đường truyền tải xuốngtốc độ cao, cho phép tốc độ tải dữ liệu về máy tối đa đạt đến 42 Mbps, tương đươngvới tốc độ đường truyền ADSL

+ HSUPA (High-Speed Uplink Packet Access): Gói đường truyền tải lên tốc độcao, cho phép tốc độ tối đa đạt 5.76 Mbps

- CDMA 2000: Đây là thế hệ kế tiếp chuẩn 2G CDMA và cung cấp tốc độ truyền

dữ liệu từ tối đa đạt 3 Mbit/s

- TD-CDMA: Được phát triển trền nền tảng chuẩn UTMS Đây là một chuẩn

thương mại áp dụng hỗn hợp giữa TDMA và CDMA nhằm cung cấp chất lượng dịchvụ tốt hơn cho dữ liệu đa phương tiện kể cả âm thanh, hình ảnh

- TD-SCDMA: Một chuẩn khác dựa trên nền tảng chuẩn UTMS, đang được phát

triển tại Trung Quốc nhằm mục đích như là một giải pháp thay thế cho W-CDMA.1.5.2 Mô hình mạng 3G

Một mạng 3G với nền tảng UMTS bao gồm ba phần: thiết bị di động (UE), mạngtruy nhập vô tuyến mặt đất (UTRAN), mạng lõi (CN)

- UE bao gồm: Thiết bị đầu cuối, thiết bị di động và module nhận dạng thuê bao

- UTRAN bao gồm: Các trạm thu phát sóng và hệ thống điều khiển trạm

- Mạng lõi CN bao gồm: Miền CS, miền PS và miền HE Các miền này đảm bảoxác định được thuê bao cũng như cung cấp đúng mà người sử dụng đang cần

Môi trường internet được hình thành thuận tiện cho việc trao đổi dữ liệu điềukhiển Phạm vi điều khiển qua mạng internet rất rộng, do đó đồi hỏi hệ thống trao đổidữ liệu phải nhanh, tin cậy và ít tốn băng thông websocket với các cơ chế vận hànhcủa nó đảm bảo được yêu cầu này webserver trong mô hình có 3 nhiệm vụ chính:

- Nhiệm vụ 1: Nhận dữ liệu từ thiết bị di động gửi đến, và chuyển giao dữ liệu đóđến ổ cắm điện một cách tức thời

- Nhiệm vụ 2: Cơ chế ngược lại với nhiệm vụ 1

- Nhiệm vụ 3: Thông báo đến thiết bị di động và ổ cắm điện trạng thái kết nối

Nhà cung cấp dịch vụ internet mạng 3G

Nhà cung cấp dịch vụ internet mạng 3G

Nhà cung cấp cấp dịch vụ

ADSL Modem ADSL

Modem 3G

WEBSOCKET

INTERNET

Hình 1.7 Mô hình kết nối ổ cắm điện với thiết bị di động

2.2 Trao đổi dữ liệu điều khiển qua websocket

Websocket giữ vai trò trung tâm trong việc trao đổi dữ liệu giữa ổ cắm điện vàthiết bị di động Hình 1.8 và 1.9 thể hiện hướng dữ liệu đi từ nơi gửi đến nơi nhận

WEBSERVER

WEBSOCKET

Gửi mã

lệnh

Nhận mã

lệnh

Nhận mã

lệnh

Nhận mã

lệnh

Hình 1.8 Mô hình gửi dữ liệu từ thiết bị di động đến ổ cắm điện

WEBSOCKET

Gửi mã

lệnh

Nhận mã

lệnh

Nhận mã

lệnh

Nhận mã

lệnh

Hình 1.9 Mô hình gửi dữ liệu từ ổ cắm điện đến thiết bị di động

2.3 Mã hóa dữ liệu

Dữ liệu trao đổi giữa ổ cắm điện và thiết bị di động được mã hóa theo một quyước chung nhằm mục đích thuận tiện trong việc xử lý và an toàn trong điều khiển.Hướng dữ liệu từ thiết bị di động hoặc ổ cắm điện gửi đến webserver quy ước làhướng gửi dữ liệu Hướng ngược lại quy ước là hướng nhận dữ liệu

2.3.1 Mã hóa dữ liệu gửi

Dữ liệu gửi từ ổ cắm điện đến webserver và từ thiết bị di động đến webserverđược mã hóa thành chuỗi ký 7 ký tự, tương ứng với 7 byte Các byte được đánh số thứtự từ bên trái sang bên phải, bắt đầu từ byte thứ 1

Byte thứ 1 đến byte thứ 4 quy định địa chỉ gửi, trong đó địa chỉ gửi từ thiết bị diđộng cố định là A000 Địa chỉ gửi từ thiết bị di động bắt đầu bằng ký tự B và 3 sốnguyên tiếp theo và được giới hạn từ 000 đến 254

Byte thứ 5 đến byte thứ 7 quy ước trạng thái có điện hoặc không có điện ổ cắmđiện Trạng thái này là cơ sở để chương trình điều khiển trên thiết bị di động hiển thịchính xác trạng thái có điện hoặc không có điện ổ cắm điện hoặc chương trình điềukhiển ổ cắm điện xuất tín hiệu điều khiển ngắt điện hoặc đóng điện ngõ ra ổ cắm điện.Byte thứ 5 có hai giá trị thiết lập: A hoặc B Nếu thiết lập là A, byte thứ 6 và byte thứ

7 được sử dụng để thiết lập hiển thị hoặc thiết lập ngõ ra điện Trong trường hợp bytethứ 5 thiết lập là B, hướng dữ liệu sẽ đi từ thiết bị di động đến webserver và điểm đíchđến là ổ cắm điện Mã lệnh này yêu cầu ổ cắm điện phản hồi tất cả trạng thái có điệnhoặc không có điện về thiết bị di động và được sử dụng khi chương trình điều khiểntrên thiết bị di động khởi động Thứ tự các ngõ ra điện trên ổ cắm điện được mã hóa ởbyte thứ 6 với các ký tự A, B, C, và D Byte thứ 7 mô tả trạng thái có điện hoặc không

có điện tương ứng với hai giá trị 1 và 0.

Bảng 1.1 Quy ước dữ liệu gửi

đánh số thứ tự từ

000 đến 254

trạng thái

A: Thiết lập trạng thái

B: Phản hồi trạng thái

Quy ướctrạng thái ổcắm điện

Mỗi một ổ cắmđiện được nhậndiện trên hệ thốngcó 4 ngõ ra điệnvà được điềukhiển độc lập

điện được điều khiển

A: Ổ cắm điện thứ 1

B: Ổ cắm điện thứ 2

C: Ổ cắm điện thứ 3

D: Ổ cắm điện thứ 4

đóng điện hoặc trạng tháingắt điện

0: Không có điện ở ngõ ra

1: Có điện ở ngõ ra

2.3.2 Mã hóa dữ liệu nhận

Dữ liệu từ máy chủ gửi đến thiết bị di động hoặc ổ cắm điện có dạng chuỗi 11 kýtự tương ứng với 11 byte và được phân chia như sau:

Từ byte thứ 1 đến byte thứ 4: Quy ước địa chỉ gửi đến Dữ liệu nhận được có thể

từ ổ cắm điện khác gửi đến hoặc từ các chương trình điều khiển trên thiết bị di động.Nội dung 4 byte này tuân thủ các quy tắc trong mã hóa dữ liệu nhận Ổ cắm điện chỉ

xử lý dữ liệu có địa chỉ gửi từ chương trình điều khiển trên thiết bị di động Điều nàycó nghĩa 4 byte đầu tiên có giá trị có định là A000 Tương tự, chương trình điều khiểntrên thiết bị di động chỉ xử lý dữ liệu với địa chỉ gửi là ổ cắm điện Tuy nhiên, trên một

hệ thống có thể có nhiều ổ cắm điện với nội dung mã hóa khác nhau, chỉ những ổ cắmđiện được chọn, các byte tiếp theo mới được xử lý

Từ byte thứ 5 đến byte thứ 8: Quy ước địa chỉ nhận, nơi xử lý các yêu cầu từ nơigửi đến Quy tắc mã hóa tương tự như 4 byte đầu tiên Ngoài ra, byte đầu tiên trongnhóm dữ liệu này còn dùng để mã hóa trạng thái kết nối với websocket Biến trạng tháinày dùng để theo dõi thiết bị đăng nhập vào hệ thống hoặc thoát ra khỏi hệ thống Cơsở để chương trình điều khiển trên thiết bị di động cập nhật danh sách ổ cắm điện cóthể kết nối đến

Từ byte thứ 9 đến byte thứ 11: Quy ước trạng thái có điện và không có điện ổcắm điện Quy ước trong 3 byte này tương tự như mã hóa dữ liệu gửi.

Bảng 1.2 Quy ước dữ liệu nhận

Ký tự thứ 1

Mã nhận diện thiết bị gửi

A: Thiết bị di động

gửi dữ liệu

Ký tự thứ 9

Mã nhận diện bắt đầu chuỗi trạng thái

A: Thiết lập trạng thái

B: Phản hồi trạng thái

Quy ước trạngthái ổ cắm điện

Ký tự thứ 10

Mã nhận diện vị trí ổ cắm điện được điều khiển

A: Ổ cắm điện thứ 1

B: Ổ cắm điện thứ 2

C: Ổ cắm điện thứ 3

D: Ổ cắm điện thứ 4

Ký tự thứ 11

Mã nhận diện trạng thái đóng điện hoặc trạngthái ngắt điện

0: Không có điện ở ngõ ra

1: Có điện ở ngõ ra

3 Xây dựng websocket cho webserver

3.1 Tổng quan ASP.NET

ASP.NET là công nghệ phát triển các ứng dụng trên nền web với các ưu điểm:

- Có thể sử dụng để phát triển các ứng dụng web đủ mọi kích cỡ, từ ứng dụngnhỏ nhất cho đến ứng dụng toàn doanh nghiệp ƒ

- Ứng dụng viết bằng ASP.NET dễ dàng tương thích với nhiều loại trình duyệtweb khác nhau

- Sử dụng bộ soạn thảo mã nguồn bằng Visual Studio, không tạo ra sự khác biệt

so với lập trình ứng dụng cho máy tính cá nhân

- Truy xuất dữ liệu bằng công nghệ của microsoft, cho phép xử lý ứng dụngnhanh và hiệu quả

- Dễ dàng bảo trì cũng như sửa lỗi do mã nguồn và giao diện được tách biệt

- ASP.net sử dụng ngôn ngữ lập trình VB.NET hoặc C# hoặc cả hai để phát triểnứng dụng

3.2 Tổng quan ngôn ngữ lập trình C#

3.2.1 Các khái niệm

Khác với các ngôn ngữ lập trình khác, ngôn ngữ C# có các khái niệm mớinhư sau:

- Lớp đối tượng: Bản chất của lập trình đối tượng là tạo ra một kiểu dữ liệu mới.Kiểu dữ liệu này dùng để mô tả cụ thể một đối tượng cần xây dựng Từ khóa Classđược sử dụng để thể hiện một đối tượng

- Phương thức: Các hành vi của một lớp được gọi là phương thức thành viên củalớp đó Một phương thức là một hàm Một phương thức định nghĩa những gì mà mộtlớp có thể làm

- Vùng tên (Namespaces): Là vùng làm việc của các lớp đối tượng Các lớp đốitượng có thể trùng tên nhưng được phân biệt với nhau thông qua vùng tên

3.2.2 Cấu trúc chương trình C#

Cấu trúc chương trình C# gồm 3 vùng:

- Vùng 1: Khai báo sử dụng thư viện Vùng này sử dụng từ khóa using Phía sau

từ khóa using là tên thư viện được sử dụng.

- Vùng 2: Khai báo không gian tên chương trình Vùng này bắt đầu bằng từ khóanamespace

- Vùng 3: Khai báo các lớp có trong chương trình Mỗi lớp có các hàm hoặc thủtục xử lý các nhiệm vụ khác nhau

//Vùng bắt đầu khai báo thư viện

using System;

using System.Collections.Generic;

using System.Linq;

//Khai báo không gian tên của ứng dụng

namespace <Tên không gian của chương trình>

{

//Vùng bắt đầu khai báo tên các Class

static class <Tên class>

{

<Khai báo các biến>

static void <Tên hàm hoặc thủ tục>

{

<Các tập lệnh>

}

}

}

Một chương trình với ngôn ngữ C# có thể có chứa nhiều không gian chươngtrình khác nhau và thực hiện các chức năng riêng biệt Tập tin có phần mở rộng cs cóchức năng lưu trữ mã chương trình Hình 3.1 thể hiện giản đồ cấu trúc chương trìnhviết bằng ngôn ngữ C#

Hình 1.10 Kết cấu tập tin trong ngôn ngữ lập trình C#

3.2.3 Kiểu dữ liệu và cấu trúc rẽ nhánh

Ngôn ngữ lập trình C# bắt buộc người dùng phải khai báo kiểu dữ liệu trước khi

sử dụng Có nhóm kiểu dữ liệu chính:

- Kiểu dữ liệu giá trị: Là kiểu dữ liệu được xây dựng sẳn như: kiểu số nguyên,kiểu số thực, kiểu chuỗi…

- Kiểu dữ liệu tham chiếu: Là kiểu dữ liệu do người dùng tự định nghĩa

Giống như các ngôn ngữ lập trình khác, ngôn ngữ lập trình C# cũng cung cấpcác lệnh rẽ nhánh Bảng 3.10 thể hiện các lệnh rẽ nhánh cơ bản có trong C#

Bảng 1.3 Lệnh rẽ nhánh trong ngôn ngữ lập trình C#

Kiểm tra điều kiện đúng

} [else { // câu lệnh thực thi nếu biểu thức điều kiện sai }]

Kiểm tra nhiều trường hợp

khác nhau

switch (Biến điều kiện){

case giá trị 1:

// Câu lệnh thực thi break;

case giá trị 2:

// Câu lệnh thực thi

Program

Namespace A { } Namespace A { } Namespace A { }

Class X{ } Class Y{ } Class Z{ } Class I{ } Class H{ }

break;

case giá trị 3:

// Câu lệnh thực thi break;

default:

// Câu lệnh thực thi break;

}Thực hiện vòng lặp khi

điều kiện được thỏa mãn while (biểu thức điều kiện){ // câu lệnh

}Thực hiện vòng lặp khi

điều kiện không được thỏa

mãn

do{

// câu lệnh }

while (biểu thức điều kiện)Thực hiện vòng lặp theo

các bước lặp đã được định

3.3 Tạo websock trên visual studio 2013

3.3.1 Giới thiệu visual studio 2013

Visual Studio 2013 là một công cụ lập trình do microsoft phát triển với nhữngtính năng vượt trội Công cụ này không những cho phép phát triển các ứng dụng trênmáy tính, trên thiết bị di động mà còn phát triển được cả trên nền web ASP.Net làcông nghệ mà microsoft hướng đến trong việc xây dựng một ứng dụng web Điểmmạnh của phiên bản 2013 so với các phiên bản khác đó là cung cấp tính năngwebsocket Tính năng này cho phép kết nối dữ liệu hai chiều một cách nhanh chống,hiệu quả và ít tiêu tốn băng thông đường truyền Ngoài các ngôn ngữ lập trình webthông dụng như visual basic, C++…, ngôn ngữ lập trình C# cũng được tích hợp Điềunày không những tạo ra sự tương thích mạnh mẽ cho lập trình viên mà còn giúp lậptrình viên chuyển các ứng dụng máy tính thành ứng dụng web một cách nhanh chốngvà dễ dàng

3.3.2 Dự án ASP.NET

Một dự án ASP.NET cơ bản bao gồm 3 thành phần chính:

- Properties: Chứa thông tin cơ bản về dự án như: tên dự án, phiên bản dự án…

- Peferencres: Chứa tên vùng không gian tên mà dự án sử dụng

- web.config: Chứa thông tin liên quan đến cài đặt webserver

Hình 1.11 Giao diện tạo dự án ASP.NET với C# trên Visual studio 2013

Ngoài các thành phần trên, dự án ASP.NET còn chứa các trang web và các thưviện hỗ trợ trang web như: hình ảnh, âm thanh, jQuery…

Hình 1.12 Tập tin có trong dự án ASP.NET

3.3.3 Tạo websocket cho dự án ASP.net

Generic Handler là một chương trình xử lý mặc định phía webserver và được lưutrữ dưới dạng tập tin với phần mở rộng ashx Chức năng chính của Generic Handler làđáp trả dữ liệu về người dùng trực tiếp thông qua các định dạng văn bản, hình ảnh,hoặc bất cứ kiểu dữ liệu nào và không có chứa bất cứ giao diện nào Thành phần nàydùng kết hợp với trang web nhằm trao đổi trực tiếp thông tin giữa máy khách và máychủ mà không cần phải bóc tách gói dữ liệu Javacripts thường nhận nhiệm vụ nàytrong quá trình xử lý dữ liệu trang web Máy khách hoàn toàn có thể truy xuất dữ liệutrực tiếp từ thanh địa chỉ của trình duyệt web Ngày nay, ngoài các trang web, các ứngdụng cũng có thể truy xuất trựcc tiếp được đối tượng này Đoạn mã sau thể hiện cấutrúc của một Generic Handler viết bằng ngôn ngữ lập trình C# và dữ liệu gửi về máykhách là đoạn văn bản có nội dung “Hello Word”

using System;

using System.Web;

public class Handler : IHttpHandler {

public void ProcessRequest (HttpContext context) {

Hình 1.13 Giao diện tạo đối tượng Generic Handler

Ứng dụng web với websocket sau khi được biên dịch bởi công cụ visual studio

2013 sẽ được lưu trữ tại webserver, nơi mà có thể cung cấp dịch web liên tục 24/24giờ Mỗi webserver chỉ có duy nhất một dãy IP hoặc tên miền Đây được xem là địachỉ chứa websocket Tập tin với phần mở rộng ashx xử lý các yêu cầu từ phía ngườidùng và đáp trả lại dữ liệu theo yêu cầu đó Tập tin này có bổ sung websocket nhằmduy trì kết nối hai chiều giữa máy khách và máy chủ Giao thức sử dụng websocket códạng ws:// hoặc wss:// nhằm giúp cho tập tin có phần mở rộng ashx xác định đúng yêucầu kết nối websocket và thực hiện việc kết nối, các giao thức khác sẽ bị từ chối

ws://<địa chỉ chứa websocket>/<tên tập tin với phần mở rộng ashx>

wss://<địa chỉ chứa websocket>/<tên tập tin với phần mở rộng ashx>

Ngôn ngữ lập trình C# cung cấp phương thức AcceptWebsocketRequest nhằmmục đích chấp nhận kết yêu cầu kết nối websocket Sau khi chấp nhận kết nối, các tiếntrình xử lý tiếp theo sẽ được thực hiện như: mở kết nối websocket, nhận dữ liệuwebsocket, đóng kết nối websocket Đoạn mã sau thể hiện kết quả trả về người dùngđoạn văn bản có nội dung “Open” sau khi kết nối thành công websocket Phương thứcBroadcast cho phép dữ liệu gửi đến tất cả các máy khách có kết nối với websocket.public class websocket : websocketHandler

{

private static websocketCollection clients = new websocketCollection();

public override void OnOpen()

Hình 1.14 Giao diện bổ sung thư viện websocket

3.3.4 Thuật toán xử lý websocket cho mô hình ổ cắm điện

Hình 1.10 thể hiện quá trình xử lý dịch vụ websocket từ webserver GenericHandler giữ vai trò trung tâm trong việc kiểm tra giao thức kết nối giữa máy chủ vàmáy khách Có hai loại máy khách kết nối với websocket: thiết bị di động và mô hình

ổ cắm điện Kết nối kiểu bắt tay được hình thành khi lớp XU_LY_MAY_CHU thựcthi Ngoài nhiệm vụ theo dõi trạng thái kết nối giữa máy chủ và máy khách, lớpXU_LY_MAY_CHU còn theo dõi quá trình nhận dữ liệu từ phía máy khách Một bản

tin được gửi đến webserver thông qua websocket không những được phản hồi về nơigửi đến mà còn gửi đến tất cả các máy khách khách khác đang kết nối với websocket.Nội dung bản tin nhận được và gửi đi từ phía webserver không giống giốngnhau Bản tin gửi đi có kèm theo thông điệp với ngụ ý mô tả nguồn gốc bản tin Cácquy ước về tên máy khách và nội dung bản tên đều được mô tả ở phần mô hình kết nốivà mã hóa dữ liệu điều khiển ổ cắm điện.

Bảng 3.11 thể hiện chức năng các biến có trong lớp XU_LY_MAY_CHU

Bảng 1.4 Khai báo biến trong lớp xử lý websocket

Bảng 3.10 thể hiện chức năng các khai báo có trong lớp XU_LY_MAY_CHU

Bảng 1.5 Khai báo thư viện trong lớp xử lý websocket

Sự kiện Lỗi

Sự kiện Đóng websocket Tên máy khách = ID

Tên máy khách = null

Gửi phản hồi:

Tên máy khách +

“CONNECT”

Gửi phản hồi:

Tên máy khách + dữ liệu nhận

Gửi phản hồi:

Tên máy khách +

CHƯƠNG 2.

XÂY DỰNG CHƯƠNG TRÌNH ĐIỀU KHIỂN Ổ CẮM ĐIỆN

TRÊN THIẾT BỊ HỆ ĐIỀU HÀNH ANDROID VÀ WINDOWSPHONE

1 Khái quát HTML 5

1.1 Giới thiệu HTML 5

HTML là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web Mộttập tin HTML bao gồm nhiều thẻ Những thẻ này nhằm giúp cho trình duyệt hiểu đượcnội dung cần phải hiển thị Phần mở rộng của tập tin HTML là htm hoặc html và cóthể được tạo bởi một trình soạn thảo văn bản đơn giản

Mọi tài liệu HTML đều có khung cấu trúc như sau:

HTML 5 cung cấp:

- Các thẻ mô tả chính xác theo yêu cầu người sử dụng

- Tăng cường khả năng truyền thông trên mạng

- Cải thiện khả năng lưu trữ chung

- Truy vấn dữ liệu tốt hơn

- Cải thiện tốc độ nạp và lưu trang

- Hỗ trợ cho CSS3 để quản lý giao diện người dùng đồ họa

- Cải thiện xử lý biểu mẫu trình duyệt

- Cho phép truyền thông hiệu quả hơn giữa các thiết bị di động và các máy chủ.1.2 Các thẻ trong tập tin HTML 5

Tập tin HTML 5 vẫn kế thừa các thẻ ở các phiên bản trước Bảng 1.1 thể hiệncác thẻ thông dụng trong tập tin HTML 5

Bảng 2.1 Các thẻ trong tập tin HTML 5

<br /> Ngắt một đoạn text xuống hàng.

<h1> đến <h6> Xác định tiêu đề html

2 Tổng quan về jQuery Mobile

2.1 Khái niệm

jQuery Mobile là một khung công tác để phát triển giao diện người dùng theodạng web trên các thiết bị di điện thoại thông minh và máy tính bảng hiện nay Khungcông tác này được xây dựng dựa vào thư viện jQuery Với tính năng kết hợp giữaHTML 5, CSS3 và Javascipts, ứng dụng dạng web trên thiết bị di động ngoài giao diệnđẹp dễ thiết kế, các công việc xử lý tương tác với người dùng cũng được lập trình đơngiản

2.2 Các thành phần trong jQuery Mobile

2.2.1 jQuery Mobile Page

Page là một thành phần chính dùng để tổng hợp các nội dung liên quan tạo thànhmột khung công tác (Framework) và hiển thị lên trình duyệt, hay nói cách khác là mộtthành phần chính trong jQuery Mobile giúp tương tác với người dùng

Cấu trúc HTML của một trang web và cấu trúc HTML của một Page trongjQuery Mobile hoàn toàn khác nhau Một trang HTML có thể có nhiều Page trongjQuery Mobile

jQuery Mobile hoạt động trên HTML 5 và CSS3 nên bắt buộc phải có phần khaibáo <!DOCTYPE html>

<!DOCTYPE html>

Thẻ meta viewport được đặt trong thẻ head để khai báo độ thu phóng (zoom) và

kích thước của trang Nếu người dùng không đặt thẻ này thì một số trình duyệt củaMobile sẽ hiển thị ở dạng giống phiên bản Desktop, nghĩa là sẽ phải thu phóng nó tolên mới có thể nhìn thấy rõ nội dung

<meta name="viewport" content="width=device-width, initial-scale=1">

// độ rộng của content (phần hiển thị nội dung) bằng với độ rộng của thiết bị di động.

Để sử dụng được những tính năng trong jQuery Mobile, cần phải khai báo vàotrang web Có hai phần cần bổ sung là mã nguồn Javascript: jQuery và jQuery Mobilevà mã nguồn CSS

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href=" /mobile/1.4.5/jquery.mobile-1.4.5.min.css">

// nội dung của page

</div>

Bên trong Page, khởi tạo một thẻ div với thuộc tính data-role="header" để tạo một tiêu đề ở trên đầu trang Tương tự như trên, <div> chứa thuộc tính data-role="main"

được dùng để xác định phần nội dung của trang: Chứa văn bản, hình ảnh, các nút

nhấn… Khi <div> có thuộc tính data-role="footer" sẽ được dùng để tạo 1 tiêu đề ở đáy

của trang Bên trong tất cả những khối chính kể trên, bất kỳ thành phần HTML đều cóthể sử dụng được

Trong jQuery Mobile hoàn toàn có thể tạo nhiều Page trong một tập tin HTML

đơn Mỗi Page được tạo trong từng khối <div data-role="page" Để phân biệt từng Page, cần đặt ID riêng cho chúng và sử dụng thuộc tính href của thẻ a để chuyển

hướng sang một trang khác nằm trong trang HTML hiện tại

<div data-role="page" id="page-1">

<div data-role="main" class="ui-content">

// link đến element có id="#page-2" nói cách khác là chuyển đến trang 2

<a href="#page-2">Go to Page Two</a>

</div>

</div>

……

<div data-role="page" id="page-2">

<div data-role="main" class="ui-content">

<a href="#pageone">Go to Page One</a>

2.2.2 jQuery Mobile Transitions

jQuery Mobile cho phép chuyển trang với nhiều hiệu ứng khác nhau:

- Fade (mờ dần): Hiệu ứng mặc định cho tất cả các liên kết trong jQuery Mobile,trang cũ mờ dần rồi biến mất và trang tiếp theo từ từ hiện ra

- Flip: Lật sang trang tiếp theo từ sau ra trước

- Flown: Ném trang hiện tại ra khỏi view và đi kèm sau đó là trang tiếp theo

- Pop: Đi đến trang tiếp theo như một cửa sổ Popup

- Slide: Hiệu ứng chuyển tiếp ngang, trượt từ phải sang trái

- Slidefade: Trượt từ phải sang trái, trang hiện tại mờ dần rồi hiện trang tiếp theo

- Slideup: Trượt dọc từ dưới lên trên

- Slidedown: Trượt dọc từ trên xuống dưới

- Turn: Trang tiếp theo được đẩy ra dần dần

- None: Không có hiệu ứng chuyển tiếp.

Trường hợp hiệu ứng chuyển tiếp là slide (chuyển tiếp trang bình thường)

<a href="#anylink" data-transition="slide">Slide to Page Two</a>

Trường hợp muốn chuyển trang ở dạng Dialog ngoài việc thêm thuộc tính Dialog="true" vào thẻ <div> chứa page thì còn một cách đơn giản nữa là chỉ cần bổ sung thuộc tính data-rel="Dialog" vào các link chuyển tiếp.

data-<a href="#anylink" data-transition="slide" data-rel="Dialog">Slide to Page Two</ a>

Tất cả các hiệu ứng trên cũng có hỗ trợ các hành động ngược lại, chỉ cần xét giá

trị cho thuộc tính data-direction="reverse".

<a href= "#pagetwo" data-transition= "slide" data-direction= "reverse"> Slide</a>

2.2.3 jQuery Mobile Button

jQuery Mobile hỗ trợ một số kiểu nút nhấn (Button) căn bản để tạo giao diệnweb Những nút nhấn này rất thô sơ nên để đẹp mắt cần phải bổ sug các khai báo trongCSS

Có 3 cách để tạo Button trong jQuery Mobile

- Sử dụng thẻ <input> có type="Button".

<input type="Button" value="Button">

- Sử dụng thẻ <Button> sau đó thêm class="ui-btn".

<Button class="ui-btn">Button</Button>

- Sử dụng thẻ <a> sau đó thêm class="ui-btn".

<a href="#anylink" class="ui-btn">Button</a>

Nếu người dùng muốn Button đơn của mình có bo góc thì bổ sung class corner-all vào Button đó.

ui-<a href="#" class="ui-btn ui-corner-all">Button</a>

<Button class="ui-btn ui-corner-all">Button</Button>

Để quay lại trang trước khi đang ở tới trang mới chỉ cần tạo một Button ở trang

hiện tại và thêm thuộc tính data-rel="back" vào Button đó.

<a href="#" class="ui-btn" data-rel="back">Go Back</a>

Những Button thường hiển thị ở dạng full width (rộng bằng kích thước mànhình), còn nếu muốn một Button có chiều dài phụ thuộc vào nội dung thì thêm class

ui-btn-inline.

<a href="#" class="ui-btn ui-btn-inline">btn</a>

<Button class="ui-btn ui-btn-inline">btn</Button>

2.2.4 jQuery Mobile Popup

Popup là một thành phần không thể thiếu trong các ứng dụng Mobile và được sửdụng khi muốn hiển thị đoạn text nhỏ, ảnh, bản đồ hoặc nội dung nào đó Để tạo một

Popup cần sử dụng một thẻ a (chứa Button để khi click thì show Popup) và 1 thẻ div (đóng vai trò là Popup) Bổ sung một thuộc tính data-rel="Popup" vào thẻ a của Button

và khai báo thêm thuộc tính data-role="Popup" vào thẻ div để báo cho jQuery Mobile hiển thị ở dạng Popup Đặt 1 ID cho thẻ div và lưu giá trị href của thẻ a bằng chính ID này Nội dung bên trong thẻ div chính là nội dung sẽ được hiển thị trong Popup khi người dùng nhấn chọn vào đối tượng Thẻ div chứa Popup và thẻ a chứa liên kết tới

Popup phải nằm trong cùng 1 trang

<a href="#mypopup" data-rel="Popup" class="ui-btn ui-btn-inline all">Show popup</a>

ui-corner-<div data-role="popup" id="myPopup">

<p>This is a simple popup.</p>

</div>

Để tạo một Button nhằm mục đích đóng Popup, phải đặt Button đó nằm bên

trong thẻ div chính chứa Popup và đồng thời bổ sung thuộc tính data-rel="back".

2.2.5 jQuery Mobile Dialog

Popup đã là một dạng Dialog tuy nhiên cần phải có thuộc tính dismissible="false" cho thẻ div chính để đảm bảo người dùng luôn luôn click vào các Button trong Dialog Dialog luôn được hiển thị giữa màn hình với thuộc tính data- position-to="window".

data-2.2.6 jQuery Mobile Header bars

Header là phần nằm phía trên cùng trang web Nó thường chứa tiêu đề của trangweb hoặc các Button điều hướng hoặc là Menu Có thể thêm các Button vào Headerbars tại các vị trí giữa, trái và phải đều được Tiêu đề thường được hiển thị trong thẻ

h1, tuy nhiên có thể sử dụng các thẻ từ h1 - h6 bất kì để thay thế Header là một thẻ div nằm bên trong thành phần Page và bắt buộc phải có thuộc tính data-role="header".

<div data-role="header">

<h1>Page Title</h1>

</div>

2.2.7 jQuery Mobile Footer bars

Footer là phần nằm phía dưới cùng của trang web và nó hoạt động linh hoạt hơnheader, nghĩa là người dùng có thể thêm nhiều module trên nó giúp người dùng thao

tác dễ dàng hơn Để khai báo footer cần phải bổ sung thuộc tính data-role="footer" và

bắt buộc phải nằm trong Page

<div data-role="footer">

<h4>Powered by jQuery Mobile</h4>

</div>

2.2.8 jQuery Mobile Panel

jQuery Mobile Panel là thành phần trượt ra từ bên phải hoặc bên trái khi ngườidùng tác động đến Đây là thành phần hay sử dụng trong Menu ở các giao diện chạytrên thiết bị di động Panel có cấu trúc tương tự như một page bao gồm: Header, Main,

Footer Nhìn vào cấu trúc có thể thấy để khai báo thẻ div Panel ở đâu thì chỉ cần bổ sung thuộc tính data-role="panel" vào thẻ div đó.

<div data-role="page">

<div data-role="header">

data-dismissible và data-swipe-close phải được bổ sung:

- data-dismissible: Có 2 giá trị true/false, xác định liệu panel có thể được đóng

lại bằng việc nhấn chọn bên ngoài nó hay không

- data-swipe-close: Có 2 giá trị true/false, xác định liệu panel có thể được đóng

lại bằng việc nhấn ESC hay không

Trường hợp người dùng sử dụng data-dismissible="true", Button cần bổ sung thuộc tính data-rel="close" để có thể tắt Panel.

3 Tổng quan về CSS

3.1 Khái niệm

CSS (Cascading Style Sheets tạm dịch là tờ mẫu theo Style Sheets) là một ngôn

ngữ quy định cách trình bày cho các tài liệu viết bằng HTML, XHTML, XML,…HTML hỗ trợ một số thuộc tính định dạng cơ bản cho text, Picture, table,…nhưng nó không thật sự phong phú và chính xác như nhau trên mọi hệ thống CSScung cấp hàng trăm thuộc tính trình bày dành cho các đối tượng với sự sáng tạo caotrong kết hợp các thuộc tính giúp mang lại hiệu quả

Sử dụng các mã định dạng trực tiếp trong HTML tốn hao nhiều thời gian thiết

kế Trong khi đó CSS đưa ra phương thức “tờ mẫu” giúp áp dụng một khuôn mẫuchuẩn từ một tập tin CSS ở ngoài Nó thật sự có hiệu quả đồng bộ khi tạo một trangweb có hàng trăm trang hay cả khi muốn thay đổi một thuộc tính trình bày nào đó 3.2 Cú pháp CSS

CSS cho phép điều khiển một đối tượng có trong tập tin HTML Cú pháp CSS cơbản như sau:

Selector { property:value; }

Trong đó:

- Selector: Các đối tượng sẽ áp dụng các thuộc tính trình bày Nó là các thẻ

HTML, class hay id

- Property: Chính là các thuộc tính quy định cách trình bày

- Value: Giá trị của thuộc tính

khiển là màu nền (background) với giá trị là màu trắng (:#FFF) Một đối tượng có thểcó nhiều thuộc tính được điều khiển.

3.3 Đơn vị CSS

Trong CSS hỗ trợ các loại đơn vị là đơn vị đo chiều dài, thời gian, cường độ âmthanh và màu sắc Tuy nhiên, sử dụng phổ biến nhất vẫn là đơn vị đo chiều dài và màusắc Sau đây là bảng liệt kê các đơn vị chiều dài và màu sắc dùng trong CSS

Bảng 2.2 Danh sách các đơn vị chiều dài và màu sắc dùng trong CSS

với nhau tạo ra vô số màu

3.4 Vị trí đặt CSS

Có ba cách khác nhau để nhúng CSS vào trong một tài liệu HTML:

- Cách 1: Nội tuyến.

Đây là một phương pháp nguyên thủy nhất để nhúng CSS vào một tài liệuHTML bằng cách nhúng vào từng thẻ HTML muốn áp dụng Và dĩ nhiên trong trường

hợp này sẽ không cần selector trong cú pháp.Tuy nhiên, nếu muốn áp dụng nhiều

thuộc tính cho nhiều thẻ HTML khác nhau thì không nên dùng cách này

Đây chỉ là một phương cách thay thế cách thứ nhất bằng cách rút tất cả các thuộc

tính CSS vào trong thẻ style với mục đích tiện cho công tác bảo trì, sửa chữa

<html>

<head>

<title>Ví dụ</title>

Tương tự như cách 2 nhưng thay vì đặt tất cả các mã CSS trong thẻ style người

dùng sẽ đưa chúng vào trong một tập tin CSS (có phần mở rộng css) bên ngoài và liên

kết nó vào trang web bằng thuộc tính href trong thẻ link Đây là cách làm được khuyến

cáo, nó đặc biệt hữu ích cho việc đồng bộ hay bảo trì một trang web lớn sử dụng cùngmột kiểu mẫu, chỉ cần thay đổi nội dung một tập tin CSS, tất cả các trang web sẽ đượccập nhật ngay lập tức

3.5 Một số đặc tính cơ bản về CSS

3.5.1 Thuộc tính Border

Thuộc tính Border cho phép thiết lập kiểu cách, màu sắc và độ rộng của đườngbao của một thành phần Trong HTML đối tượng bảng biểu được sử dụng để tạo ra cácđường bao xung quanh một văn bản Trong khi đó, các thuộc tính Border trong CSS cóthể tạo các đường bao với hiệu ứng đẹp cho bất cứ phần tử nào

Bảng 2.3 Các thuộc tính Border trong CSS

border Một thuộc tính để thiết lập cho toàn bộ cả 4 đường bao trong một khai báo.

border-widthborder-styleborder-color

bao đáy trong một khai báo

border-bottom-widthborder-style

border-color

border-bottom-style Thiết lập kiểu cách của đường bao đáy border-style

border-bottom-width Thiết lập độ rộng của đường bao đáy

ThinMediumThicklengthborder-color Thiết lập màu sắc của bốn đường bao, có thể đạt màu từ một đến bốn. color

border-left Một thuộc tính để thiết lập cho đường bao trái trong một khai báo.

border-left-widthborder-styleborder-color

ThinMediumThicklengthborder-right Một thuộc tính để thiết lập cho đường bao phải trong một khai báo.

border-right-widthborder-style

border-color

ThinMediumThicklength

border-style Thiết lập kiểu cách của cả bốn đường bao, có thể đạt được kiểu từ một đến

bốn

Nonehiddendotteddashedsoliddoublegrooveridgeinsetoutset

bao đỉnh trong một khai báo

border-top-widthborder-style

ThinMediumThicklength

border-width Một thuộc tính tốc hành để thiết lập độ rộng của bốn đường bao trong một khai

báo, có thể có từ một đến bốn giá trị

ThinMediumThicklength3.5.2 Thuộc tính Font

Thuộc tính Font cho phép thay đổi kiểu chữ, độ đậm, kích cỡ và kiểu cách kiểuchữ của văn bản Các kiểu chữ được xác định bởi tên của chúng Nếu một trình duyệtweb không hỗ trợ thuộc tính Font được chỉ định, Font mặc định sẽ được áp dụng

Bảng 2.4 Các thuộc tính Font trong CSS

font Một thuộc tính nhỏ để thiết lập tất cảthuộc tính cho một font trong một

khai báo

font-style font-variant font-weight font-size/line-height font-family

captioniconMenumessage-boxsmall-captionstatus-bar

cho một thành phần

family-name generic-family

x-smallsmallmediumlargex-largexx-largesmallerlarger

%

oblique3.5.3 Thuộc tính List

Thuộc tính List cho phép thay đổi giữa các điểm đánh dấu mục danh sách khácnhau, thiết lập một ảnh như một điểm đánh dấu mục danh sách và thiết lập nơi để đặtđiểm đánh dấu mục danh sách

Bảng 2.5 Các thuộc tính List trong CSS

list-style

Một thuộc tính ngắn gọn để thiết lậpcho toàn bộ thuộc tính của danh sáchtrong một khai báo

list-style-type list-style-position list-style-image

dấu mục danh sách

none

url

list-style-position Đặt một điểm đánh dấu mục danh sáchtrong danh sách. insideoutside

3.5.4 Thuộc tính Text

Thuộc tính Text cho phép kiểm soát diện mạo của văn bản Nó cũng có thểthay đổi màu của văn bản, tăng hoặc giảm khoảng cách giữa các ký tự trong mộtvăn bản, căn chỉnh một văn bản, trang trí cho văn bản, thụt dòng đầu tiên và nhiềuhiệu ứng khác

Bảng 2.6 Các thuộc tính Text trong CSS

phần

leftrightcenterjustify

none

color length

white-space Thiết lập bao nhiêu khoảng trắngtrong một thành phần

normalprenowrap3.5.5 Thuộc tính Padding

Thuộc tính Padding xác định khoảng trống giữa phần tử đường bao và nội dung.Không cho phép các giá trị âm Khoảng trống đệm của đỉnh, phải, dưới và trái có thểđược thay đổi một cách độc lập bằng cách sử dụng các thuộc tính riêng biệt

Bảng 2.7 Các thuộc tính Padding trong CSS

padding Một thuộc tính ngắn gọn để thiết lậptất cả các khoảng đệm chỉ với một lần

khai báo

padding-top padding-right padding-bottom padding-left

3.5.6 Thuộc tính Background

Thuộc tính Background cho phép kiểm soát màu nền của một thành phần, thiếtlập một ảnh như nền trong văn bản, lặp lại một ảnh nền theo chiều dọc hoặc chiềungang và vị trí của một ảnh trên một trang

Bảng 2.8 Các thuộc tính Background trong CSS

background

Một thuộc tính ngắn gọn để thiết lậptất cả các thuộc tính nền trong mộtkhai báo

background-color background-image background-repeat background-attachment background-position

color-rgb color-hex color-name

transparent

none

lại như thế nào

repeatrepeat-xrepeat-yno-repeat3.5.7 Thuộc tính Margin

Thuộc tính căn lề (Margin) xác định khoảng trống xung quanh các phần tử Nócó thể sử dụng cả giá trị âm gối lên nội dung Các thuộc tính căn lề đỉnh, phải, đáy vàtrái có thể được thay đổi một cách độc lập sử dụng các thuộc tính riêng rẽ

Bảng 2.9 Các thuộc tính Margin trong CSS

Thuộc tính Mô tả Giá trị

margin Một thuộc tính nhanh để thiết lậpthuộc tính cho lề trong một khai báo.

margin-top margin-right margin-bottom margin-left

4.1 Khái niệm về Javascript

Javascript làm cho các trang web có tính động: Có thể thay đổi các thông tin trêntrang web mà không cần hiệu chỉnh mã nguồn, tương tác với người dùng, thực hiệncác tính toán, mở đóng cửa sổ…

Javascript là một ngôn ngữ kịch bản và là ngôn ngữ lập trình kiểu thông dịch.Các đoạn chương trình viết bằng ngôn ngữ này được nhúng trong các trang web vàđược các trình duyệt web thông dịch Các ngôn ngữ kịch bản cho phép phát triển cácchương trình đơn giản và nhanh hơn việc sử dụng các ngôn ngữ lập trình dạng biêndịch C, C++…

4.2 Cách đặt mã Javascript vào trang web

4.2.1 Chèn trực tiếp đoạn mã lệnh Javascript vào trang web

Đặt các dòng mã lệnh của Javascript giữa cặp thẻ <script>…</script> vào bất

kỳ vị trí nào trong trang web: Phần đầu (<head>…</head>) hoặc phần thân (<body>…</body>) Tuy nhiên nên đặt trong phần đầu để dễ kiểm soát và sửa đổi

chương trình Có thể viết nhiều đoạn mã lệnh Javascript trong cùng một trang web.4.2.2 Chèn gián tiếp đoạn mã lệnh Javascript vào trang web

Thay vì đặt các dòng mã lệnh của Javascript giữa cặp thẻ <script>…</script> vào bất kỳ vị trí nào trong trang web: Phần đầu (<head>…</head>) hoặc phần thân (<body>…</body>), chỉ cần chèn khai báo địa chỉ tập tin chứa mã lệnh Từ khóa src

sẽ giúp cho trình duyệt web đọc được nội dung mã lệnh Tập tin chứa mã lệnh có phầnmở rộng là js Các trang web khác nhau có thể sử dụng chung tập tin này Điều nàycho phép việc nâng cấp tính năng chương trình nhanh và hiệu quả

4.3 Ngôn ngữ Javascript cơ bản

4.3.1 Kiểu dữ liệu