path: root/files/bn/archive/b2g_os/quickstart/your_first_app/index.html

---
title: আপনার প্রথম অ্যাপ
slug: Archive/B2G_OS/Quickstart/Your_first_app
tags:
  - Apps
  - Beginner
  - Guide
  - অ্যাপ
  - গাইড
  - নতুনদের জন্য
translation_of: Archive/B2G_OS/Quickstart/Your_first_app
---
<article class="brush: js">
 <div class="summary">
  <p>ডেভেলপাররা এত দিন ধরে যা চেয়েছিলেনঃ শুধুমাত্র HTML, CSS আর জাভাস্ক্রিপ্ট দিয়ে অ্যাপ তৈরি করতে যা সব প্ল্যাটফর্মে চলবে - ওপেন ওয়েব অ্যাপ ঠিক তাই। এসব অ্যাপ ডিভাইসে ইন্সটল করা যায়। ফায়ারফক্স ওএস হচ্ছে প্রথম প্ল্যাটফর্ম ওপেন ওয়েব অ্যাপ এর জন্য! এই গাইড লেখা হয়েছে যাতে আপনি খুব অল্প সময়ের মধ্যেই অ্যাপ সম্পর্কে প্রাথমিক আইডিয়া নিয়ে ফাটাফাটি একটা অ্যাপ তৈরি করা শুরু করে দিতে পারেন!</p>
 </div>
 <p>গাইডটি ভালভাবে বুঝার জন্য আপনি <a href="https://github.com/chrisdavidmills/mdn-app-template">দ্রুত অ্যাপ বানানোর টেম্পলেট</a> ডাউনলোড করে নিতে পারেন। এর ভেতর কি আছে সেটা জানার জন্য <a href="/bn-BD/docs/Project:MDN/Style_guide/Sample_app_coding_guidelines#.E0.A6.85.E0.A7.8D.E0.A6.AF.E0.A6.BE.E0.A6.AA_.E0.A6.9F.E0.A7.87.E0.A6.AE.E0.A7.8D.E0.A6.AA.E0.A6.B2.E0.A7.87.E0.A6.9F">অ্যাপ টেম্পলেট</a> গাইডটি পড়ুন।</p>
 <h2 id="অ্যাপ_স্ট্রাকচার">অ্যাপ স্ট্রাকচার</h2>
 <h3 id="প্যাকেজড_বনাম_হোস্ট-করা_অ্যাপ">প্যাকেজড বনাম হোস্ট-করা অ্যাপ</h3>
 <p>দুই ধরণের ওপেন ওয়েব অ্যাপ আছেঃ প্যাকেজড আর হোস্ট-করা। প্যাকেজড অ্যাপ হচ্ছে <code>zip</code> ফাইল যার ভেতর অ্যাপ এর সব ফাইলঃ HTML, CSS, JavaScript, ছবি, মেনিফেস্ট, ইত্যাদি দিয়ে দেওয়া থাকে। আর হোস্ট-করা এপ গুলো কোন একটা ডোমেইন এ সার্ভারে হোস্ট করা থাকে, স্ট্যান্ডার্ড ওয়েবসাইট গুলোর মতই। উভয় ধরণের অ্যাপ এরই বৈধ মেনিফেস্ট ফাইল লাগে। ফায়ারফক্স মার্কেটপ্লেসে যদি অ্যাপ জমা দিতে চান, তাহলে হয় আপনাকে অ্যাপটি জিপ ফাইল হিসেবে আপলোড করতে হবে অথবা কোন সার্ভারে হোস্ট-করে তার লিঙ্ক দিতে হবে।</p>
 <div style="width: 480px; margin: 0 auto;">
  <p><iframe frameborder="0" height="270" src="https://www.youtube.com/embed/Q7x-B13y33Q/?feature=player_detailpage" width="480"></iframe></p>
  <div class="video-caption">
   <p>Treehouse এর সাথে যৌথ উদ্যোগে বানানো হয়েছেঃ <a class="button" href="http://teamtreehouse.com/?cid=1154">Treehouse এর ব্যাপারে জানতে দেখুন!</a></p>
  </div>
 </div>
 <p>এই গাইডের উদ্দেশ্য হল আপনার কম্পিউটারের <code>localhost</code> এড্রেসে একটি হোস্ট-করা অ্যাপ তৈরি করা। যখন আপনার মনে হবে আপনার অ্যাপ ফায়ারফক্স মার্কেটপ্লেসে জমা দেওয়ার জন্য রেডি, আপনার সিদ্ধান্ত নিতে হবে আপনি কি প্যাকেজড অ্যাপ হিসেবে দিবেন নাকি কোন সার্ভারে হোস্ট করে দেবেন।</p>
 <h3 id="অ্যাপ_মেনিফেস্ট">অ্যাপ মেনিফেস্ট</h3>
 <p>প্রত্যেক ফায়ারফক্স অ্যাপ এর রুট ফোল্ডারে একটি <a href="/bn-BD/docs/Web/Apps/Manifest"><code>manifest.webapp</code></a> ফাইল থাকা লাগে। এই ফাইলের কাজ হল অ্যাপ সম্পর্কে গুরুত্বপূর্ণ তথ্য, যেমন ভার্সন, নাম, বর্ণনা, আইকন কোথায় আছে, লোকালাইজেশনের তথ্য, কোন কোন ডোমেইন থেকে অ্যাপটি ইন্সটল করা যাবে এবং আরো অনেক কিছু সরবরাহ করা। তবে শুধুমাত্র নাম আর বর্ণনাই হল আবশ্যকীয়, বাকিগুলো ঐচ্ছিক। অ্যাপ টেম্পলেটের সাথে আসা খুবই সহজ মেনিফেস্টটি নিচের মত দেখতেঃ</p>
 <pre class="brush: js">{
  "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": "http://yourawesomeapp.com"
  },
  "locales": {
    "es": {
      "description": "Su nueva aplicación impresionante Open Web",
      "developer": {
        "url": "http://yourawesomeapp.com"
      }
    },
    "it": {
      "description": "La tua nuova fantastica Open Web App",
      "developer": {
        "url": "http://yourawesomeapp.com"
      }
    }
  },
  "default_locale": "en"
}</pre>
 <div style="width: 480px; margin: 0 auto;">
  <p><iframe frameborder="0" height="270" src="https://www.youtube.com/embed/dgAUgHQOm8M#t/?feature=player_detailpage" width="480"></iframe></p>
  <div class="video-caption">
   <p>Treehouse এর সাথে যৌথভাবে বানানো হয়েছেঃ <a class="button" href="http://teamtreehouse.com/?cid=1154">দেখুন!</a></p>
  </div>
 </div>
 <p> </p>
 <p>এরকম প্রাথমিক একটা মেনিফেস্ট-ই দরকার অ্যাপ শুরু করার জন্য। মেনিফেস্ট নিয়ে আরো জানতে পড়ুন <a href="/bn-BD/docs/Web/Apps/Manifest">অ্যাপ মেনিফেস্ট</a>।</p>
 <h2 id="অ্যাপ_লে-আউট_এবং_ডিজাইন">অ্যাপ লে-আউট এবং ডিজাইন</h2>
 <p>বিভিন্ন ডিভাইসে আজকাল অনেক বেশি আর বিভিন্ন রকম রেজ্যুলেশনের ব্যবহার দেখা যায়। তাই রেস্পন্সিভ ডিজাইনের দিকেই সবাই আজকাল ঝুঁকে পড়ছেন। মোবাইল প্ল্যাটফর্ম যেমন ফায়ারফক্স ওএস যদি আপনার আসল টার্গেট হয়, এরপরেও মানুষজন অন্য ডিভাইস থেকেও আপনার অ্যাপ যাতে ব্যবহার করতে পারে, সেজন্য রেস্পন্সিভ ডিজাইন মেনে চলা উচিত। <a href="//developer.mozilla.org/docs/CSS/Media_queries">CSS media queries</a> ব্যবহার করে নিচের CSS উদাহরণের মত করে বিভিন্ন ডিভাইসে আপনার অ্যাপ যাতে সুন্দরমত দেখায় তা নিশ্চিত করতে পারেনঃ</p>
 <pre class="brush: 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 */
}</pre>
 <p>রেস্পন্সিভ ডিজাইন আর মোবাইলের অ্যাপ লেখার জন্য অনেক জাভাস্ক্রিপ্ট আর সিএসএস ফ্রেমওয়ার্ক আছে (<a href="http://twitter.github.com/bootstrap">Bootstrap</a>, ইত্যাদি।) আপনার অ্যাপ আর ডেভেলপমেন্ট-স্টাইলের সাথে মিলে যায় এমন ফ্রেমওয়ার্কগুলোই ব্যবহার করুন।</p>
 <h2 id="ওয়েব_API_সমূহ">ওয়েব API সমূহ</h2>
 <p>যেমন নতুন নতুন ডিভাইস বের হচ্ছে, জাভাস্ক্রিপ্ট API ও তার সাথে তাল মিলিয়েই তৈরি হচ্ছে। মজিলা <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> এর মাধ্যমে ডজন ডজন স্ট্যান্ডার্ড মোবাইল ফিচার জাভাস্ক্রিপ্ট API এর মাধ্যমে আমাদের হাতে এনে দিয়েছে। <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> পাতায় কোন কোন ডিভাইস সমর্থিত এবং তাদের স্ট্যাটাস দেখতে পাবেন। জাভাস্ক্রিপ্টের মাধ্যেম ডিভাইসে কোন একটা ফিচার আছে কিনা চেক করে নেওয়া উচিত, নিচের উদাহরণে দেখানো হয়েছে কিভাবে এটা করা যায়ঃ</p>
 <pre class="brush: js">// If this device supports the vibrate API...
if('vibrate' in navigator) {
    // ... vibrate for a second
    navigator.vibrate(1000);
}</pre>
 <p>ডিভাইসের ব্যাটারির অবস্থা'র ওপর নির্ভর করে কোন একটা <code>&lt;div&gt;</code> এর স্টাইল কিভাবে বদলানো যায়, নিচের উদাহরণে তা দেখানো হয়েছেঃ</p>
 <pre class="brush: java">// 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' : '';
  }
})();</pre>
 <p>ওপরের কোডেঃ যখন আপনি নিশ্চিত যে <a href="/bn-BD/docs/DOM/window.navigator.battery">ব্যাটারি API</a> সমর্থিত, আপনি <code>chargingchange</code> এবং <code>levelchange</code> ইভেন্টের জন্য লিসেনার যোগ করতে পারবেন HTML এলিমেন্টটির ডিসপ্লে পরিবর্তন করার জন্য। দ্রুত-শুরু করার টেম্পলেটে নিচের মত করে যোগ করে দেখুন তো কোড কাজ করে কিনা।</p>
 <p>মাঝেমধ্যেই <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> পাতাটি পড়ুন যাতে বিভিন্ন ডিভাইসে বিভিন্ন API এর সমর্থন সম্পর্কে আপনি আপডেটেড থাকেন।</p>
 <h3 id="API_ফাংশনালিটি_ইন্সটল_করা">API ফাংশনালিটি ইন্সটল করা</h3>
 <p>আমাদের template এ, আমরা একটা install button যোগ করেছি যাতে ক্লিক করে আপনি আপনার আপ্লিকেশনটি ওয়েবপেজ হিসেবে দেখতে পারবেন। , আপ্লিকেশন হিসেবে সাইটটি FirefoxOS এ দিতে হলে Button টির মার্কাআপ তেমন কঠিন নয়।</p>
 <pre class="brush: html">&lt;button id="install-btn"&gt;Install app&lt;/button&gt;</pre>
 <p> Install API ব্যাবহার করে এই বাটনের ফাংশনটি যোগ করা হয়েছে।  (দেখুন install.js):</p>
 <pre class="brush: 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);
  };
};
</pre>
 <p>Let's run through briefly what is going on:</p>
 <ol>
  <li>We get a reference to the install button and store it in the variable <code>button</code>.</li>
  <li>We use <code>navigator.mozApps.checkInstalled</code> to check whether the app defined by the manifest at <code>http://people.mozilla.com/~cmills/location-finder/manifest.webapp</code> is already installed on the device. This test is stored in the variable <code>installCheck</code>.</li>
  <li>When the test is successfully carried out, its success event is fired, therefore <code>installCheck.onsuccess = function() { ... }</code> is run.</li>
  <li>We then test for the existence of <code>installCheck.result</code> using an <code>if</code> 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.</li>
  <li>If the app isn't installed, we add a click event listener to the button, so the <code>install()</code> function is run when the button is clicked.</li>
  <li>When the button is clicked and the <code>install()</code> function is run, we store the manifest file location in a variable called <code>manifest_url</code>, and then install the app using <code>navigator.mozApps.install(manifest_url)</code>, storing a reference to that installation in the <code>installLocFind</code> 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.</li>
 </ol>
 <p>You may want to verify the <a href="/en-US/docs/Web/Apps/JavaScript_API">implementation state of the API</a> when first coming to Installable web apps.</p>
 <div class="note">
  <p>Note: Installable open web apps have a "single app per origin" security policy; basically, you can't host more than one installable app per origin. This makes testing a bit more tricky, but there are still ways around this, such as creating different sub-domains for apps, testing them using the Firefox OS Simulator, or testing the install functionality on Firefox Aurora/Nightly, which allows you to install installable web apps on the desktop. See <a href="/en-US/docs/Web/Apps/FAQs/About_app_manifests">FAQs about apps manifests</a> for more information on origins.</p>
 </div>
 <h2 id="WebRT_APIs_(Permissions-based_APIs)">WebRT APIs (Permissions-based APIs)</h2>
 <p>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 <code>manifest.webapp</code> file like so:</p>
 <pre class="brush: js">// New key in the manifest: "permissions"
// Request access to any number of APIs
// Here we request permissions to the systemXHR API
"permissions": {
    "systemXHR": {}
}</pre>
 <p>The three levels of permission are as follows:</p>
 <ul>
  <li>Normal — APIs that don't need any kind of special access permissions.</li>
  <li>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.</li>
  <li>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.</li>
 </ul>
 <p>For more information on app permission levels, read <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps" title="/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps">Types of packaged apps</a>. You can find out more information about what APIs require permissions, and what permissions are required, at <a href="/en-US/docs/Web/Apps/App_permissions">App permissions</a>.</p>
 <div class="note">
  <p>It's important to note that not all Web APIs have been implemented within the Firefox OS Simulator.</p>
 </div>
 <h2 id="Tools_Testing">Tools &amp; Testing</h2>
 <p>Testing is incredibly important when supporting mobile devices. There are many options for testing installable open web apps.</p>
 <h3 id="Firefox_OS_Simulator">Firefox OS Simulator</h3>
 <p>Installing and using the <a href="https://marketplace.firefox.com/developers/docs/firefox_os_simulator">Firefox OS Simulator</a> is the easiest way to get up and running with your app. After you install the simulator, it is accessible from the Tools -&gt; Web Developer -&gt; Firefox OS Simulator menu. The simulator launches with a JavaScript console so you can debug your application from within the simulator.</p>
 <h3 id="App_Manager">App Manager</h3>
 <p>The new kid on the block with regards to testing tools is called the <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_App_Manager">App Manager</a>. 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.</p>
 <h3 id="Unit_Testing">Unit Testing</h3>
 <p>Unit tests are extremely valuable when testing on different devices and builds. jQuery's <a href="http://qunitjs.com">QUnit</a> is a popular client-side testing utility, but you can use any set of testing tools you'd like.</p>
 <h3 id="Installing_Firefox_OS_on_a_Device">Installing Firefox OS on a Device</h3>
 <p>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 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform">MDN</a>.</p>
 <p>Dedicated Firefox OS developer preview devices are also available: read our <a href="https://marketplace.firefox.com/developers/dev_phone">Developer preview phone page</a> for more information.</p>
 <h2 id="App_Submission_and_Distribution">App Submission and Distribution</h2>
 <p>Once your app is complete, you can host it yourself like a standard web site or app (read <a href="/en-US/docs/Web/Apps/Publishing/Self-publishing_Apps">Self-publishing apps</a> for more information), or it can be <a href="https://marketplace.firefox.com/developers/submit/app/manifest">submitted</a> to the <a href="https://marketplace.firefox.com">Firefox Marketplace</a>. 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.</p>
 <h3 id="More_Marketplace_Listing_Information">More Marketplace &amp; Listing Information</h3>
 <ol>
  <li><a href="/en-US/docs/Web/Apps/Publishing/Submitting_an_app">Submitting an App to the Firefox OS Marketplace </a></li>
  <li><a href="/en-US/docs/Web/Apps/Publishing/Marketplace_review_criteria">Marketplace Review Criteria </a></li>
  <li><a href="http://s.vid.ly/embeded.html?link=8k2n4w&amp;autoplay=false">App Submission Video Walkthrough  </a></li>
 </ol>
</article>