আপনার প্রথম অ্যাপ

গাইডটি ভালভাবে বুঝার জন্য আপনি দ্রুত অ্যাপ বানানোর টেম্পলেট ডাউনলোড করে নিতে পারেন। এর ভেতর কি আছে সেটা জানার জন্য অ্যাপ টেম্পলেট গাইডটি পড়ুন।

অ্যাপ স্ট্রাকচার

প্যাকেজড বনাম হোস্ট-করা অ্যাপ

দুই ধরণের ওপেন ওয়েব অ্যাপ আছেঃ প্যাকেজড আর হোস্ট-করা। প্যাকেজড অ্যাপ হচ্ছে zip ফাইল যার ভেতর অ্যাপ এর সব ফাইলঃ HTML, CSS, JavaScript, ছবি, মেনিফেস্ট, ইত্যাদি দিয়ে দেওয়া থাকে। আর হোস্ট-করা এপ গুলো কোন একটা ডোমেইন এ সার্ভারে হোস্ট করা থাকে, স্ট্যান্ডার্ড ওয়েবসাইট গুলোর মতই। উভয় ধরণের অ্যাপ এরই বৈধ মেনিফেস্ট ফাইল লাগে। ফায়ারফক্স মার্কেটপ্লেসে যদি অ্যাপ জমা দিতে চান, তাহলে হয় আপনাকে অ্যাপটি জিপ ফাইল হিসেবে আপলোড করতে হবে অথবা কোন সার্ভারে হোস্ট-করে তার লিঙ্ক দিতে হবে।

এই গাইডের উদ্দেশ্য হল আপনার কম্পিউটারের localhost এড্রেসে একটি হোস্ট-করা অ্যাপ তৈরি করা। যখন আপনার মনে হবে আপনার অ্যাপ ফায়ারফক্স মার্কেটপ্লেসে জমা দেওয়ার জন্য রেডি, আপনার সিদ্ধান্ত নিতে হবে আপনি কি প্যাকেজড অ্যাপ হিসেবে দিবেন নাকি কোন সার্ভারে হোস্ট করে দেবেন।

অ্যাপ মেনিফেস্ট

প্রত্যেক ফায়ারফক্স অ্যাপ এর রুট ফোল্ডারে একটি manifest.webapp ফাইল থাকা লাগে। এই ফাইলের কাজ হল অ্যাপ সম্পর্কে গুরুত্বপূর্ণ তথ্য, যেমন ভার্সন, নাম, বর্ণনা, আইকন কোথায় আছে, লোকালাইজেশনের তথ্য, কোন কোন ডোমেইন থেকে অ্যাপটি ইন্সটল করা যাবে এবং আরো অনেক কিছু সরবরাহ করা। তবে শুধুমাত্র নাম আর বর্ণনাই হল আবশ্যকীয়, বাকিগুলো ঐচ্ছিক। অ্যাপ টেম্পলেটের সাথে আসা খুবই সহজ মেনিফেস্টটি নিচের মত দেখতেঃ

{
  "version": "0.1",
  "name": "Open Web App",
  "description": "Your new awesome Open Web App",
  "launch_path": "/app-template/index.html",
  "icons": {
    "16": "/app-template/app-icons/icon-16.png",
    "48": "/app-template/app-icons/icon-48.png",
    "128": "/app-template/app-icons/icon-128.png"
  },
  "developer": {
    "name": "Your Name",
    "url": "https://yourawesomeapp.com"
  },
  "locales": {
    "es": {
      "description": "Su nueva aplicación impresionante Open Web",
      "developer": {
        "url": "https://yourawesomeapp.com"
      }
    },
    "it": {
      "description": "La tua nuova fantastica Open Web App",
      "developer": {
        "url": "https://yourawesomeapp.com"
      }
    }
  },
  "default_locale": "en"
}

এরকম প্রাথমিক একটা মেনিফেস্ট-ই দরকার অ্যাপ শুরু করার জন্য। মেনিফেস্ট নিয়ে আরো জানতে পড়ুন অ্যাপ মেনিফেস্ট।

অ্যাপ লে-আউট এবং ডিজাইন

বিভিন্ন ডিভাইসে আজকাল অনেক বেশি আর বিভিন্ন রকম রেজ্যুলেশনের ব্যবহার দেখা যায়। তাই রেস্পন্সিভ ডিজাইনের দিকেই সবাই আজকাল ঝুঁকে পড়ছেন। মোবাইল প্ল্যাটফর্ম যেমন ফায়ারফক্স ওএস যদি আপনার আসল টার্গেট হয়, এরপরেও মানুষজন অন্য ডিভাইস থেকেও আপনার অ্যাপ যাতে ব্যবহার করতে পারে, সেজন্য রেস্পন্সিভ ডিজাইন মেনে চলা উচিত। CSS media queries ব্যবহার করে নিচের CSS উদাহরণের মত করে বিভিন্ন ডিভাইসে আপনার অ্যাপ যাতে সুন্দরমত দেখায় তা নিশ্চিত করতে পারেনঃ

/* The following are examples of different CSS media queries */

/* Basic desktop/screen width sniff */
@media only screen and (min-width : 1224px) {
  /* styles */
}

/* Traditional iPhone width */
@media
  only screen and (-webkit-min-device-pixel-ratio : 1.5),
  only screen and (min-device-pixel-ratio : 1.5) {
  /* styles */
}

/* Device settings at different orientations */
@media screen and (orientation:portrait) {
  /* styles */
}
@media screen and (orientation:landscape) {
  /* styles */
}

রেস্পন্সিভ ডিজাইন আর মোবাইলের অ্যাপ লেখার জন্য অনেক জাভাস্ক্রিপ্ট আর সিএসএস ফ্রেমওয়ার্ক আছে (Bootstrap, ইত্যাদি।) আপনার অ্যাপ আর ডেভেলপমেন্ট-স্টাইলের সাথে মিলে যায় এমন ফ্রেমওয়ার্কগুলোই ব্যবহার করুন।

ওয়েব API সমূহ

যেমন নতুন নতুন ডিভাইস বের হচ্ছে, জাভাস্ক্রিপ্ট API ও তার সাথে তাল মিলিয়েই তৈরি হচ্ছে। মজিলা WebAPI এর মাধ্যমে ডজন ডজন স্ট্যান্ডার্ড মোবাইল ফিচার জাভাস্ক্রিপ্ট API এর মাধ্যমে আমাদের হাতে এনে দিয়েছে। WebAPI পাতায় কোন কোন ডিভাইস সমর্থিত এবং তাদের স্ট্যাটাস দেখতে পাবেন। জাভাস্ক্রিপ্টের মাধ্যেম ডিভাইসে কোন একটা ফিচার আছে কিনা চেক করে নেওয়া উচিত, নিচের উদাহরণে দেখানো হয়েছে কিভাবে এটা করা যায়ঃ

// If this device supports the vibrate API...
if('vibrate' in navigator) {
    // ... vibrate for a second
    navigator.vibrate(1000);
}

ডিভাইসের ব্যাটারির অবস্থা'র ওপর নির্ভর করে কোন একটা <div> এর স্টাইল কিভাবে বদলানো যায়, নিচের উদাহরণে তা দেখানো হয়েছেঃ

// Create the battery indicator listeners
(function() {
  var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery,
      indicator, indicatorPercentage;

  if(battery) {
    indicator = document.getElementById('indicator'),
    indicatorPercentage = document.getElementById('indicator-percentage');

    // Set listeners for changes
    battery.addEventListener('chargingchange', updateBattery);
    battery.addEventListener('levelchange', updateBattery);

    // Update immediately
    updateBattery();
  }

  function updateBattery() {
    // Update percentage width and text
    var level = (battery.level * 100) + '%';
    indicatorPercentage.style.width = level;
    indicatorPercentage.innerHTML = 'Battery: ' + level;
    // Update charging status
    indicator.className = battery.charging ? 'charging' : '';
  }
})();

ওপরের কোডেঃ যখন আপনি নিশ্চিত যে ব্যাটারি API সমর্থিত, আপনি chargingchange এবং levelchange ইভেন্টের জন্য লিসেনার যোগ করতে পারবেন HTML এলিমেন্টটির ডিসপ্লে পরিবর্তন করার জন্য। দ্রুত-শুরু করার টেম্পলেটে নিচের মত করে যোগ করে দেখুন তো কোড কাজ করে কিনা।

মাঝেমধ্যেই WebAPI পাতাটি পড়ুন যাতে বিভিন্ন ডিভাইসে বিভিন্ন API এর সমর্থন সম্পর্কে আপনি আপডেটেড থাকেন।

API ফাংশনালিটি ইন্সটল করা

আমাদের template এ, আমরা একটা install button যোগ করেছি যাতে ক্লিক করে আপনি আপনার আপ্লিকেশনটি ওয়েবপেজ হিসেবে দেখতে পারবেন। , আপ্লিকেশন হিসেবে সাইটটি FirefoxOS এ দিতে হলে Button টির মার্কাআপ তেমন কঠিন নয়।

<button id="install-btn">Install app</button>

 Install API ব্যাবহার করে এই বাটনের ফাংশনটি যোগ করা হয়েছে।  (দেখুন install.js):

var manifest_url = location.href + 'manifest.webapp';

function install(ev) {
  ev.preventDefault();
  // define the manifest URL
  // install the app
  var installLocFind = navigator.mozApps.install(manifest_url);
  installLocFind.onsuccess = function(data) {
    // App is installed, do something
  };
  installLocFind.onerror = function() {
    // App wasn't installed, info is in
    // installapp.error.name
    alert(installLocFind.error.name);
  };
};

// get a reference to the button and call install() on click if the app isn't already installed. If it is, hide the button.
var button = document.getElementById('install-btn');

var installCheck = navigator.mozApps.checkInstalled(manifest_url);

installCheck.onsuccess = function() {
  if(installCheck.result) {
    button.style.display = "none";
  } else {
    button.addEventListener('click', install, false);
  };
};

Let's run through briefly what is going on:

1. We get a reference to the install button and store it in the variable button.
2. We use navigator.mozApps.checkInstalled to check whether the app defined by the manifest at https://people.mozilla.com/~cmills/location-finder/manifest.webapp is already installed on the device. This test is stored in the variable installCheck.
3. When the test is successfully carried out, its success event is fired, therefore installCheck.onsuccess = function() { ... } is run.
4. We then test for the existence of installCheck.result using an if statement. If it does exist, meaning that the app is installed, we hide the button. An install button isn't needed if it is already installed.
5. If the app isn't installed, we add a click event listener to the button, so the install() function is run when the button is clicked.
6. When the button is clicked and the install() function is run, we store the manifest file location in a variable called manifest_url, and then install the app using navigator.mozApps.install(manifest_url), storing a reference to that installation in the installLocFind variable. You'll notice that this installation also fires success and error events, so you can run actions dependent on whether the install happened successfully or not.

You may want to verify the implementation state of the API when first coming to Installable web apps.

WebRT APIs (Permissions-based APIs)

There are a number of WebAPIs that are available but require permissions for that specific feature to be enabled. Apps may register permission requests within the manifest.webapp file like so:

// New key in the manifest: "permissions"
// Request access to any number of APIs
// Here we request permissions to the systemXHR API
"permissions": {
    "systemXHR": {}
}

The three levels of permission are as follows:

• Normal — APIs that don't need any kind of special access permissions.
• Privileged — APIs available to developers to use in their applications, as long as they set access permissions in the app manifest files, and distribute them through a trusted source.
• Certified — APIs that control critical functions on a device, such as the call dialer and messaging services. These are generally not available for third party developers to use.

For more information on app permission levels, read Types of packaged apps. You can find out more information about what APIs require permissions, and what permissions are required, at App permissions.

Tools & Testing

Testing is incredibly important when supporting mobile devices. There are many options for testing installable open web apps.

Firefox OS Simulator

Installing and using the Firefox OS Simulator is the easiest way to get up and running with your app. After you install the simulator, it is accessible from the Tools -> Web Developer -> Firefox OS Simulator menu. The simulator launches with a JavaScript console so you can debug your application from within the simulator.

App Manager

The new kid on the block with regards to testing tools is called the App Manager. This tool allows you to connect desktop Firefox to a compatible device via USB (or a Firefox OS simulator), push apps straight to the device, validate apps, and debug them as they run on the device.

Unit Testing

Unit tests are extremely valuable when testing on different devices and builds. jQuery's QUnit is a popular client-side testing utility, but you can use any set of testing tools you'd like.

Installing Firefox OS on a Device

Since Firefox OS is an open source platform, code and tools are available to build and install Firefox OS on your own device. Build and installation instructions, as well as notes on what devices it can be installed on, can be found on MDN.

Dedicated Firefox OS developer preview devices are also available: read our Developer preview phone page for more information.

App Submission and Distribution

Once your app is complete, you can host it yourself like a standard web site or app (read Self-publishing apps for more information), or it can be submitted to the Firefox Marketplace. Your app's manifest will be validated and you may choose which devices your app will support (e.g. Firefox OS, Desktop Firefox, Firefox Mobile, Firefox Tablet). Once validated, you can add additional details about your app (screenshots, descriptions, price, etc.) and officially submit the app for listing within the Marketplace. Once approved, your app is available to the world for purchase and installation.

More Marketplace & Listing Information

1. Submitting an App to the Firefox OS Marketplace
2. Marketplace Review Criteria
3. App Submission Video Walkthrough