Nội dung bài viết
Đăng ký học lập trình C++
Tại STDIO bạn được dạy nền tảng lập trình tốt nhất.
Đăng ký học
La Kiến Vinh Giới thiệu về QR codes, ứng dụng và hướng dẫn tạo mã QR với JavaScript, Canvas, HTML5, tương thích với tất cả các web-browser hiện đại. Cách hiện thực này không tốn kém quá nhiều năng lực của web-server.

Giới thiệu

QR Code cũng như mã vạch, lưu trữ các thông tin thông qua một hình ảnh. Từ đó ta có thể dùng các thiết bị có khả năng đọc mã và phân tích thông tin trên mã và trả về thông tin mà nó đang ẩn chứa, cụ thể là một chuỗi.

Điều này có ích lợi tương tự như mã vạch, đỡ tốn kém thời gian nhập thông tin từ các thiết bị nhập.

ss_1
QR Code - Thông tin của mã trên là http://play.stdio.vn/games/play/zero

Tiền đề bài viết

Với nhu cầu tạo ra tính tiện dụng cho người sử dụng đọc bài viết trên Stdio trên điện thoại của các bạn, điều khó khăn nhất là nhập đường dẫn rất dài vào trình duyệt trên di động. Stdio đã tạo ra một mã QR, bạn chỉ cần sử dụng điện thoại di động với các phần mềm quét mã QR rất phổ biến hiện nay để đọc được nội dung của mã và bạn sẽ có được đường dẫn trên di động ngay để truy cập vào bài viết của mã đó.

Thiết nghĩ nhu cầu này của các web-developer khá cao, nên tôi chia sẻ cách mà tôi đã hiện thực điều này cho các website trong hệ thống của Stdio.

ss_2

Chức năng này cũng sử dụng sản phẩm của bên thứ 3, do đó, các bạn nên đọc kỹ giấy phép sử dụng của họ trước khi ứng dụng vào hệ thống của mình.

Đối tượng hướng đến

Web-developer cần hiện thực chức năng liên quan đến di động, do chức năng này sử dụng HTML5, nên sẽ độc lập với server (không bị phụ thuộc PHP, JSP hay ASP.NET).

Bạn cần biết một số kiến thức về HTML và JavaScript để có thể hiện thực được tính năng này.

QR Code là gì?

QR Code (Quick Response Code) cũng tương tự như mã vạch, dùng lưu thông tin dưới dạng hình ảnh, các đầu đọc mã sẽ giải mã nó và đưa thông tin lại cho chúng ta. Do bài viết mang tính ứng dụng, nên tôi không bàn quá sâu về lích sử của nó.

Hiện tại QR Code được ứng dụng rất nhiều, vì sự nhanh chóng đáp ứng của nó. Ví dụ như bạn sử dụng điện thoại muốn truy cập vào website bán một món hàng để tra cứu thông tin, thay vì phải gõ một đường dẫn rất dài trên điện thoại, thì các hãng sản xuất hiện tại đã dán các mã QR này vào gói hàng, bạn chỉ cần một phần mềm trên điện thoại để quét mã này (QR Scanner).

QR Code và xu hướng thời đại

Nếu không vì sự xuất hiện của Smart-Phone, có lẽ QR Code không được nhiều người biết đến như vậy. Vì nhu cầu rất cao trong việc nhập, xuất với smart-phone cần được giảm thiểu, mà QR Code trở thành lựa chọn rất tốt (Mã vạch thông thường chỉ lưu số, còn QR Code có thể lưu các ký tự).

Giả sử trong một hội thảo, thay vì chúng ta yêu cầu khách hàng truy cập vào một website thuộc công ty, dù cho chúng ta cố gắng làm ngắn gọn đường dẫn đi chăng nữa, có thể họ sẽ rất ngán ngẫm khi phải nhập một đường dẫn vào trình duyệt smart-phone, thay vì vậy, hãy đưa ra một mã QR chứa thông tin đường dẫn, và nhờ họ dùng QR Scanner trên điện thoại và quét mã này, họ chỉ cần tốn vài cú chạm vào màn hình.

Sự tò mò về thông tin ẩn đằng sau mã QR cũng làm cho người khác phải chú ý và muốn biết đằng sau thông tin đó là gì? Giả sử trong hội thảo, ta tạo 1 standy với một mã QR thật to, tôi cũng tin chắc là sẽ có nhiều đối tượng tò mò và quét mã của bạn, thông qua đó, bạn có thể gửi gắm thông tin cho họ.

Tôi hy vọng bạn sẽ không quét mã QR dưới đây, vì nó mang thông tin không hay cho lắm, có thể làm bạn thấy không vui.

ss_3

QR Code với JavaScript

Cài đặt

Download qrcode.min.zip và giải nén được file qrcode.min.js up load file này lên web-server của bạn (bạn có thể download từ website gốc của nhà phát triển Sangmin Shim tại https://github.com/davidshimjs/qrcodejs

Tại tag head trong phần html, bạn hãy load script vào như cách ta load 1 file javascript vào file html. Lưu ý dòng số 1, do sử dụng HTML5 Canvas để vẽ QR Code nên ta cần thông báo cho trình duyệt biết phiên bản HTML ta đang sử dụng là HTML5 <!DOCTYPE HTML>.

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="/qrcode.min.js">
	</head>
	<body>
	...
	</body>
</html>

Tại vị trí trong tag body, bất kể ở đâu mà ta muốn mã QR sẽ hiện lên, ta sẽ đặt tag sau

<div id="id_qrcode"></div>

Ví dụ (xem dòng số 9)

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="qrcode.min.js"></script>
	</head>
	<body>
	<h1>Hien thi QR Codes boi Stdio</h1>
	<p>
		<div id="id_qrcode"></div>
	</p>
	</body>
</html>

Tạo QR Codes

Sau khi trang được load xong (onload) bạn có thể gọi thực thi việc tạo QR Code với nội dung mong muốn

var qrcode = new QRCode("id_qrcode", {
	text:"www.stdio.vn",
	width:100,
	height:100,
	colorDark:"#000000",
	colorLight:"#ffffff",
	correctLevel:QRCode.CorrectLevel.H
});

Bạn có thể thay thế dòng số 2 với nội dung www.stdio.vn thành nội dung mà bạn muốn. Bạn cũng có thể thay đổi kích thước width, height như mong muốn.

Tham khảo

https://github.com/davidshimjs/qrcodejs - 31/3/2015

Download demo hoàn chỉnh

DOWNLOAD QR_CODE_DEMO.zip

ss_4

THẢO LUẬN
ĐÓNG