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 Bài viết này không nhằm vào việc chia sẻ về kỹ thuật, nó thiên về việc chia sẻ 1 tầm nhìn, giải pháp và nó dùng để đánh dấu 1 điều mà ít ai biết đến, và dù có biết thì họ cũng không quan tâm đến - Firefox OS - đã ngừng phân phối vào 8/2015.

Giới thiệu

Bài viết này không nhằm vào việc chia sẻ về kỹ thuật, nó thiên về việc chia sẻ 1 tầm nhìn, giải pháp và nó dùng để đánh dấu 1 điều mà ít ai biết đến - Firefox OS đã ngừng phân phối vào 8/2015. Bên cạnh đó, tôi cũng giới thiệu về cách thức triển khai 1 project HTML5 lên thiết bị chạy Firefox OS (Ứng dụng trên Firefox OS là 1 ứng dụng dạng web) như 1 kỷ niệm cho 1 sự nỗ lực của họ.

img_firefoxos_logo

Tiền đề bài viết

Trong các thiết bị mà STDIO đang sở hữu, thiết bị chạy Firefox OS được tôi ưu ái đặt ở 1 vị trí mà tôi muốn nhìn thấy nhất, trình duyệt web trên PC là trình duyệt web tôi sử dụng và xem như là duy nhất (trừ các công việc cần kiểm tra STDIO chạy đa nền tảng).

Tình cảm đó không đơn giản được xây dựng trong thời gian ngắn. Vào tháng 12/2008, khi bắt đầu tự tay học hỏi và phát triển 1 website cá nhân, tôi phải đưa ra lựa chọn sử dụng trình duyệt web tiện cho việc học tập và làm việc của mình và tôi chọn Firefox vì định hướng của Mozilla là bảo vệ 1 trình duyệt web độc lập với quyền kiểm soát của 1 người hay 1 nhóm người.

Đến tháng 8/2015, Firefox OS bị ngừng phân phối và tôi cũng không quá bất ngờ với thông tin này, nó đã chấm dứt 3 năm phát triển không cạnh tranh được với các nền tảng mạnh và ngày càng rẻ hơn như Android (tôi vẫn không nghĩ ra lý do để sử dụng Firefox OS) nhưng tôi vẫn hy vọng được thấy ngày Firefox OS quay trở lại với cách thức mới.

Bài viết này ra đời để cá nhân tôi lưu trữ các cảm xúc của mình.

img_stdio_firefox_os

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

Bài viết này thể hiện quan điểm, cảm xúc cá nhân. Ngoài ra, Firefox OS không còn được phân phối nữa, nên các kiến thức về kỹ thuật với Firefox OS trong bài viết này không phù hợp với việc thương mại. Tuy nhiên, bạn có thể trải nghiệm thử việc phát triển 1 ứng dụng trên nền tảng là 1 hệ điều hành web hoặc học hỏi về kỹ thuật. Các đối tượng bạn đọc không có cùng quan điểm, có thể bỏ qua bài này.

Lời chào từ STDIO đến Firefox OS

Firefox OS Apps và phân loại

Ứng dụng được viết cho Firefox OS (Firefox OS application hay Firefox OS app) về cơ bản có khá nhiều điểm tương đồng so với một trang web bởi kiến trúc của Firefox OS app được xây dựng dựa trên các tiêu chuẩn web mở gồm có HTML, JavaScript, CSS... Điểm mấu chốt tạo nên sự khác biệt giữa Firefox OS app so với một trang web thông thường là khả năng được cài đặt vào thiết bị và sử dụng một số API của hệ điều hành để tương tác với các thiết bị phần cứng như camera, sensor... hay các dịch vụ của hệ điều hành: truy cập danh bạ, gửi tin nhắn... Firefox OS app được phân phối thông qua Firefox Marketplace.

Firefox OS hỗ trợ 2 loại ứng dụng: Hosted AppsPackaged Apps.

  • Hosted Apps - ứng dụng được phân phối dưới dạng một web url - toàn bộ tài nguyên của ứng dụng: HTML, JavaScript, hình ảnh, âm thanh... được lưu trữ trên web server. Vì vậy, để sử dụng được ứng dụng, yêu cầu thiết bị của chúng ta phải kết nối internet liên tục. Ưu điểm của loại ứng dụng này là ta có thể cập nhật ứng dụng và người sử dụng sẽ ngay lập tức có những cập nhật này.
  • Packaged Apps - trái ngược lại so với Hosted Apps, toàn bộ tài nguyên của ứng dụng được đóng gói thành dạng ZIP file. File này sẽ được tải về và cài đặt vào thiết bị thông qua Firefox Marketplace hay cài đặt trực tiếp bằng thao tác sao chép file cài đặt vào thiết bị. Ưu điểm của dạng ứng dụng này là có thể hoạt động mà không có kết nối internet. Trong gới hạn bài viết này, tôi chỉ sử dụng Packaged Apps.

Môi trường phát triển

  • Firefox WebIDE (được tích hợp sẵn trong trình duyệt web Mozilla Firefox - phiên bản hiện tại tôi sử dụng là 43.0.3).
  • Thiết bị chạy Firefox OS (hiện tại thiết bị STDIO sử dụng là Geeksphone Peak chạy phiên bản hệ điều hành Firefox OS 2.2). Nếu bạn không có thiết bị, bạn có thể sử dụng Simulator có sẵn trên Firefox WebIDE.
  • Cáp kết nối để triển khai (deploy) ứng dụng lên Firefox OS.
  • Driver kết nối Geeksphone Peak với PC.

img_stdio_firefox_os_link

Khởi động Firefox WebIDE và tạo project đầu tiên

Firefox WebIDE là một IDE được Mozilla thiết kế chuyên biệt cho việc phát triển ứng dụng dành riêng cho Firefox OS. Với WebIDE, ta có thể tạo, chỉnh sửa chạy và debug cho ứng dụng trên Firefox OS Simulator cũng như trên thiết bị thực tế. Bản thân Firefox WebIDE đã được tích hợp trong trình duyệt web Firefox từ phiên bản 33 trở về sau. Một lưu ý nhỏ là các ứng dụng được xây dựng với WebIDE chỉ có thể chạy được với phiên bản Firefox OS 1.3 trở về sau.

WebIDE được khởi động bằng những cách sau:

  • Vào Firefox Menu > Developer > WebIDE.
  • Sử dụng tổ hợp phím Shift + F8.
  • Biểu tượng WebIDE trên thanh công cụ của Firefox. Biểu tượng này xuất hiện khi sử dụng phiên bản Firefox Developer Edition hay phiên bản Firefox 36 trở về sau với điều kiện WebIDE đã được khởi động ít nhất một lần.

img_webide_shortcut

Giao diện WebIDE khi vừa được khởi chạy.

img_webide_interface

Ứng dụng "STDIO chào Firefox OS"

Bắt đầu từ giao diện chính của WebIDE, ta tiến hành tạo một ứng dụng mới bằng cách sử dụng menu File > New App... hay biểu tượng New App... nằm ở sidebar bên trái.

Tại cửa sổ New App, WebIDE cung cấp sẵn cho chúng ta 3 loại template: HelloWorld, Priviledged Empty App và Priviledged App. Ta chọn HelloWorld và đặt tên project là STDIO_Hello_FirefoxOS.

img_project_template

Tiếp theo WebIDE yêu cầu ta chọn nơi lưu project - trong trường hợp này tôi sẽ lưu project vào D:\STDIO_FFOS. Chọn Select Folder để xác nhận.

img_ffos_project_location

Sau khi tạo project thành công, giao diện làm việc của WebIDE gồm có 2 thành phần chính - phần bên trái chứa thông tin cấu trúc thư mục của project và phần bên phải chứa thông tin của project gồm có mô tả, nơi lưu trữ, app id... Phần này cũng là nơi để ta viết code cho ứng dụng.

img_stdio_ffos_project_interface

Project của ta đến đây đã có thể chạy được. Firefox OS app chỉ chạy được trên môi trường FirefoxOS, do đó ta sẽ chạy trực tiếp project trên thiết bị (sẽ được đề cập ở phần sau) hay sử dụng FirefoxOS. Simulator Để cài đặt simulator, tại giao diện của WebIDE, ta chọn Install Simulator.

img_install_simulator

Do Geeksphone Peak của tôi chạy FirefoxOS 2.2, vì vậy để tương thích tôi cũng chọn cài đặt simulator phiên bản 2.2.

img_install_simulator_ffos_22Cài đặt hoàn tất, ta sẽ thấy ở mục Simulators nằm bên thanh sidebar bên phải sẽ xuất hiện simulator FirefoxOS 2.2.

img_install_simulator_success

Chọn vào Firefox OS 2.2 sẽ khởi chạy simulator và đưa ta đến giao diện Home của hệ điều hành. Ta hoàn toàn có thể thao tác trên simulator tương tự như thao tác trên thiết bị thật.

img_ffos_22_simulator

Trở lại với giao diện của WebIDE, ta tiến hành cài đặt ứng dụng của vừa tạo bằng cách chọn vào biểu tượng Install and Run trên giao diện của WebIDE. Lúc này ứng dụng ta viết sẽ được tự động cài đặt và chạy trên simulator

img_install_app

Và kết quả chạy ứng dụng của ta:

img_run_app

Ngôn ngữ HTML, song song với JavaScript và CSS đã trở thành chuẩn mực để phát triển ứng dụng web vì tính linh hoạt, đơn giản và mạnh mẽ và trên hết là khả năng đa nền tảng đặc biệt của nó. Với Firefox OS, Mozilla tham vọng đưa bộ ba này lên một tầm cao mới, tận dụng tối đa ưu thế vốn có của bộ ba này để tạo thành một chuẩn mực mới cho việc phát triển ứng dụng trên di động. Với tham vọng của Mozilla, bất cứ ai chỉ cần biết về lập trình web đều có thể lập trình các ứng dụng cho thiết bị chạy với FirefoxOS. Ta dễ dàng thấy được kiến trúc của một Firefox OS app rất tương đồng với một website.

img_ffos_project_structure

Và vì lẽ đó, ta hoàn toàn có thể dùng những tư duy lập trình web và áp dụng cho việc phát triển Firefox OS app. Ví dụ như ta muốn thay đổi nội dung của ứng dụng, đổi màu chữ và đổi màu nền, ta sửa nội dung file index.html như sau.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">

    <title>Hello World</title>

    <style>
      body {
        background: #f80;
      } 
      
      h1 {
        color: white;
      }
    </style>
    <script src="app.js" defer></script>
  </head>

  <body>    
    <h1>STDIO<br>Hello Firefox OS.</h1>
  </body>

</html>

Và đây là kết quả thu được sau khi ta chỉnh sửa ứng dụng mẫu sẵn có:

img_run_app_stdio

Triển khai lên thiết bị

Với bất kỳ một ứng dụng nào, ta đều phải kiểm tra hoạt động của chúng trong điều kiện thực tế chứ không chỉ sử dụng simulator, vì chỉ trong điều kiện thực tế ta mới có thể phát hiện những lỗi thuộc về thiết bị và xây dựng giải pháp khắc phục một cách toàn vẹn. Ứng dụng được viết trong ví dụ mẫu này cũng không ngoại lệ, trong phần này ta sẽ tiến hành triển khai ứng dụng lên thiết bị - Geeksphone Peak chạy Firefox OS 2.2 theo những bước sau:

  • Khởi động chế độ Developer.
  • Kết nối thiết bị với máy tính và cài đặt trình điều khiển cho thiết bị.
  • Triển khai ứng dụng lên thiết bị thông qua sự hỗ trợ của WebIDE.

Khởi động chế độ Developer

Trong Firefox OS, chế độ Developer là chế độ cho phép lập trình viên có thể kết nối thiết bị trực tiếp với máy tính và thực hiện các thao tác như cài đặt, chỉnh sửa và debug ứng dụng của mình. Để khởi động chế độ này, từ màn hình Home ta lần lượt chọn Settings > Device information > More information > Developer Menu.

img_enable_developer_mode_01

img_enable_developer_mode_02

img_enable_developer_mode_03

Trở lại màn hình Settings, ta thấy có thêm một menu mới xuất hiện là menu Developer.

img_enable_developer_mode_04

Ta tiếp tục chọn menu Developer > Debugging vía USB và chọn ADB and DevTools.

img_enable_developer_mode_05

Kết thúc bước này, ta đã bật thành công chế độ Developer. Bước tiếp theo ta sẽ kết nối thiết bị vào máy tính và tiến hành cài đặt trình điều khiển thiết bị.

Kết nối thiết bị với máy tính và cài đặt trình điều khiển cho thiết bị

Trước tiên, ta cần phải tài trình điều khiển (driver) cho Geeksphone - ta có thể dễ dàng tìm thấy tại Geeksphone website hay mục Download ở cuối bài - và giải nén tập tin này:

img_peak_driver

Tiếp đến ta kết nối thiết bị với máy tính thông qua cáp USB và tiến hành cài đặt trình điều khiển. Để việc cài đặt thành công, lưu ý ta phải luôn giữ thiết bị trong trạng thái mở và unlock màn hình khóa.

Khởi động Device Manager của Windows - Control Panel > Device Manager. Ta sẽ thấy thiết bị Peak trong tình trạng hệ thống không biết đây là thiết bị gì do thiếu trình điều khiển. Vì vậy ta sẽ cập nhật trình điều khiển cho thiết bị bằng cách click phải và chọn Update Driver Software...

img_peak_install_driver_01

Khi cửa sổ cho phép ta cập nhật trình điều khiển thiết bị hiện lên, ta lần lượt ta chọn theo thứ tự sau Browse my computer for driver software > Let me pick from a list of device drivers on my computer > Next > Have Disk... > Browse... > Chuyển đến thư mục chứa trình điều khiển thiết bị đã giải nén bên trên > Chọn file android_winusb.inf > Open.

img_peak_install_driver_02

img_peak_install_driver_03

img_peak_install_driver_04

img_peak_install_driver_05

img_peak_install_driver_06

img_peak_install_driver_07

Nếu các bước trên được thực hiện chính xác, ta sẽ có được danh sách các thiết bị được hỗ trợ và ta chọn Geeksphone ADB Interface > Next > Close.

img_peak_install_driver_08

img_peak_install_driver_10

Cuối cùng, ta kiểm tra việc kết nối thiết bị bằng ứng dụng ADB (Android Debug Bridge) - giải nén tập tin adb.zip (xem mục Download) và chạy lệnh adb devices sau từ Command Promt.

img_run_adb

Triển khai ứng dụng lên thiết bị thông qua sự hỗ trợ của WebIDE

Sau khi cài đặt trình điều khiển cho Geeksphone thành công, trở lại giao diện chính của WebIDE. Nằm trên mục USB Devices ta sẽ thấy xuất hiện thiết bị Firefox OS (GP-Peak).

img_connect_to_device

Chọn vào Firefox OS (GP-Peak) để kết nối WebIDE với thiết bị. Kiểm tra lại trên thiết bị ta thấy thông báo yêu cầu cho phép kết nối hiện ra - chọn OK để cho phép kết nối.

img_confirm_connection

Giao diện chính của WebIDE thay đổi, báo cho ta biết thiết bị và WebIDE đã kết nối với nhau thành công.

img_connect_to_device_success

Cuối cùng, tại giao diện chính của WebIDE ta chọn vào Install and Run và kiểm tra kết quả của ứng dụng khi thực thi trên thiết bị thật.

img_result_on_device

Toàn bộ source code của project này bạn có thể tải tại mục Download ở cuối bài viết.

Download

Lời kết

Firefox OS có thể là quá khứ, nhưng nó cũng mang lại 1 số thành tựu nhất định cho chính nó. Và có thể nó cũng là 1 phép thử của Mozilla cho 1 điều gì đó khác hơn nữa, điều đó tôi cũng không biết được. Nhưng thiết nghĩ có thể dám làm 1 điều khác biệt mà mình muốn trong cuộc đời thì cũng xứng đáng.

img_firefoxos_on_stdio_piano

THẢO LUẬN
ĐÓNG