STDIO
Tìm kiếm gần đây
    • Nội dung
    • QR Code
    • 0
    • 0
    • Sao chép

    Firefox OS - Phát Triển Ứng Dụng - Và Thế Giới Của Mozilla

    Firefox OS đã ngừng phân phối vào 8/2015. Bên cạnh đó, bài viết này giới thiệu về cách thức triển khai 1 project HTML5 lên thiết bị chạy Firefox OS xem như tài liệu tham khảo khi phát triển 1 ứng dụng dạng web.
    18/09/2014
    15/09/2020
    10 phút đọc
    Firefox OS - Phát Triển Ứng Dụng - Và Thế Giới Của Mozilla
    img_firefoxos_logo
    Firefox OS logo

    Tháng 12/2008, trong các lựa chọn sử dụng trình duyệt web thì Firefox đang rất phát triển vào thời điểm đó. 2013, Firefox OS ra đời với thiết bị thông minh giá rẻ cho đến tháng 8/2015 thì Firefox OS ngừng phân phối, 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, hy vọng Firefox OS sẽ quay lại với cách thức mới.

    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 còn phù hợp 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, điều này cũng tương tự khi viết 1 ứng dụng với nền tảng là hệ điều hành web như smart-tivi.

    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... 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à các API của hệ điều hành để tương tác với các linh kiện phần cứng như camera, ... 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. Ư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 sử dụng trong bài là 43.0.3).
    • Thiết bị chạy Firefox OS (hiện tại thiết bị tôi sử dụng là Geeksphone Peak chạy phiên bản hệ điều hành Firefox OS 2.2). Trường hợp 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 ứ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, 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
    img_webide_interface
    Giao diện WebIDE

    Ứng dụng Hello Firefox OS

    Từ giao diện chính của WebIDE, 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. 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 (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 hiện tại đã có thể chạy được. Firefox OS app chỉ chạy được trên môi trường FirefoxOS, do đó project chạy trực tiếp 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, chọn Install Simulator.

    img_install_simulator

    Geeksphone Peak chạy FirefoxOS 2.2, vì vậy để tương thích, chọn cài đặt simulator phù hợp - phiên bản 2.2.

    img_install_simulator_ffos_22

    Cà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. 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, 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 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:

    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. 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. 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

    Tư duy lập trình web được áp dụng cho việc phát triển Firefox OS app. Giả sử thay đổi nội dung của ứng dụng, đổi màu chữ và đổi màu nền, có thể 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>

    Kết quả thu được sau khi 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ế 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ệ.

    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 hay mục Download ở cuối bài viết này:

    img_peak_driver

    Tiếp đến, 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 ý 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. 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, 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 cập nhật trình điều khiển thiết bị hiện lên, lần lượt 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

    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.

    img_firefoxos_on_stdio_piano
    0
    JavaScript

    JavaScript

    STDIO Training - Đào tạo lập trình Frontend - Backend.

    Khi bạn nhấn vào liên kết sản phẩm do STDIO đề xuất và mua hàng, STDIO có thể nhận được hoa hồng. Điều này hỗ trợ STDIO tạo thêm nhiều nội dung hữu ích.. Tìm hiểu thêm.

    Đề xuất

    DirectX - Lịch Sử Phát Triển và Những Thăng Trầm
    Bài viết dành cho những ai quan tâm đến lịch sử hình thành và phát triển ...
    28/09/2014
    Giới Thiệu về Arduino Mega 2560
    Bài viết đưa cho các bạn về cái nhìn khái quát về Arduino Mega 2560. ...

    Khám phá

    10 Thứ Bạn Có Thể Làm với JavaScript
    Giới thiệu 10 ứng dụng mà JavaScript với sự mạnh mẽ của nó có thể tạo ...
    10 Phần Mềm Nổi Tiếng Được Viết Bằng C/C++
    Giới thiệu các phần mềm nổi tiếng được viết bằng C/C++ với hiệu năng ...
    Tính Hiệu Quả và Khả Thi trong Việc Sử Dụng Hệ Thống Chơi Game Thực Tại Ảo Tại Gia Cho Người Lớn Tuổi
    Tổng hợp các kết quả khảo sát về hướng phát triển ứng dụng mới trong y ...
    Giới Thiệu về Kỹ Thuật Phần Mềm – Software Engineering
    Software Engineering là một phần của System Engineering - liên quan đến ...
    22/09/2014
    LEGO - Raspberry Pi: Sáng Tạo Ra Khỏi Cái Hộp
    Chia sẻ với các bạn dưới góc nhìn của một người sử dụng, nhà phát triển ...
    Tổng Quan Về Thực Tại Ảo - Virtual Reality
    Tổng thể về thực tại ảo, những thành phần chính của hệ thống và xu hướng ...
    Sơ Lược Về Thiết Bị Leap Motion
    Các tính năng cơ bản của thiết bị Leap Motion ứng dụng trong phát triển ...
    13/08/2015
    Thỏa Thuận Sử Dụng Dịch Vụ STDIO
    Thỏa thuận này quy định về điều kiện giao kết hợp đồng, quyền lợi, nghĩa ...
    STDIO
    Trang chính
    Công ty TNHH STDIO

    30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, Hồ Chí Minh
    +84 28.36205514 - +84 942.111912
    developer@stdio.vn

    383/1 Quang Trung, Phường 10, Quận Gò Vấp, Hồ Chí Minh
    Số giấy phép ĐKKD: 0311563559 do sở Kế hoạch và Đầu Tư TPHCM cấp ngày 23/02/2012

    ©STDIO, 2013 - 2020