Apache Cordova ব্যবহার করে মোবাইলে Chrome Apps চালান

মোবাইলে Chrome অ্যাপ্লিকেশানগুলি চালানোর জন্য টুলচেন প্রাথমিক বিকাশকারী পূর্বরূপে রয়েছে৷ গিটহাব ইস্যু ট্র্যাকার , আমাদের ক্রোম অ্যাপস ডেভেলপার ফোরাম , স্ট্যাক ওভারফ্লো বা আমাদের G+ ডেভেলপার পৃষ্ঠা ব্যবহার করে নির্দ্বিধায় আপনার প্রতিক্রিয়া জানান।

একটি Chrome অ্যাপ ডেস্কটপ এবং মোবাইল উভয় ক্ষেত্রেই চলছে

ওভারভিউ

আপনি HTML, CSS এবং JavaScript ব্যবহার করে নেটিভ ক্ষমতা সহ মোবাইল অ্যাপ তৈরির জন্য Apache Cordova-এর উপর ভিত্তি করে একটি টুলচেইনের মাধ্যমে আপনার Chrome অ্যাপগুলিকে Android এবং iOS-এ চালাতে পারেন।

Apache Cordova আপনার অ্যাপ্লিকেশনের ওয়েব কোড একটি নেটিভ অ্যাপ্লিকেশন শেল দিয়ে মুড়ে দেয় এবং আপনাকে Google Play এবং/অথবা Apple App Store এর মাধ্যমে আপনার হাইব্রিড ওয়েব অ্যাপ বিতরণ করতে দেয়। একটি বিদ্যমান Chrome অ্যাপের সাথে Apache Cordova ব্যবহার করতে, আপনি cca ( c ordova c hrome a pp) কমান্ড-লাইন টুল ব্যবহার করুন৷

অতিরিক্ত সম্পদ

  • কর্ডোভার সাথে বিকাশ করার সময় আপনার কিছু বিশেষ বিবেচনার কথা মাথায় রাখা উচিত; আমরা বিবেচনা বিভাগে তাদের তালিকাভুক্ত করেছি।
  • মোবাইলে কোন Chrome APIগুলি সমর্থিত তা দেখতে, API স্থিতি পৃষ্ঠাতে যান৷
  • টুলচেন ছাড়াই একটি অ্যান্ড্রয়েড ডিভাইসে আপনার Chrome অ্যাপের পূর্বরূপ দেখতে, Chrome অ্যাপস ডেভেলপার টুল (ADT) ব্যবহার করুন।

চলুন শুরু করা যাক.

ধাপ 1: আপনার ডেভেলপমেন্ট টুল ইনস্টল করুন

মোবাইল টুলচেনের জন্য Chrome Apps iOS 6+ এবং Android 4.x+ কে টার্গেট করতে পারে।

সমস্ত প্ল্যাটফর্মের জন্য বিকাশ নির্ভরতা

  • npm সহ Node.js সংস্করণ 0.10.0 (বা উচ্চতর) প্রয়োজন:

    • উইন্ডোজ : nodejs.org থেকে ডাউনলোডযোগ্য ইনস্টলেশন এক্সিকিউটেবল ব্যবহার করে Node.js ইনস্টল করুন।
    • ওএস এক্স বা লিনাক্স : ইন্সটলেশন এক্সিকিউটেবলগুলিও nodejs.org থেকে পাওয়া যায়। আপনি যদি রুট অ্যাক্সেসের প্রয়োজনীয়তা এড়াতে চান তবে nvm এর মাধ্যমে ইনস্টল করা আরও সুবিধাজনক হতে পারে। উদাহরণ: 
    curl https://raw.github.com/creationix/nvm/master/install.sh | sh
source ~/.bash_profile || source ~/.profile || source ~/.bashrc
nvm install 0.10
nvm alias default 0.10

অ্যান্ড্রয়েডকে লক্ষ্য করে

অ্যান্ড্রয়েডের জন্য একটি অ্যাপ্লিকেশন বিকাশ করার সময়, আপনাকে ইনস্টল করতে হবে:

  • Java JDK 7 (বা উচ্চতর)
  • Android SDK সংস্করণ 4.4.2 (বা উচ্চতর)
    • অ্যান্ড্রয়েড SDK এবং অ্যান্ড্রয়েড ডেভেলপার টুলগুলি ইনস্টল করুন যা Android ADT বান্ডেলের সাথে একত্রিত।
    • আপনার PATH এনভায়রনমেন্ট ভেরিয়েবলে sdk/tools এবং sdk/platform-tools যোগ করুন।
    • OS X : Eclipse-এর যে সংস্করণটি Android SDK-এর সাথে আসে তার জন্য JRE 6 প্রয়োজন৷ Eclipse.app খোলার ফলে আপনি JRE 6 ইনস্টল করতে না চাইলে, ম্যাক অ্যাপ স্টোরের মাধ্যমে এটি পান৷
    • Linux : Android SDK-এর জন্য 32 বিট সমর্থন লাইব্রেরি প্রয়োজন৷ উবুন্টুতে, এগুলোর মাধ্যমে পান: apt-get install ia32-libs ।
  • অ্যাপাচি পিঁপড়া
    • আপনার PATH এনভায়রনমেন্ট ভেরিয়েবলে apache-ant-xxx/bin যোগ করুন।

আইওএস টার্গেটিং

অনুগ্রহ করে মনে রাখবেন যে iOS ডেভেলপমেন্ট শুধুমাত্র OS X এ করা যেতে পারে। উপরন্তু, আপনাকে ইনস্টল করতে হবে:

  • Xcode 5 (বা উচ্চতর) যার মধ্যে Xcode কমান্ড লাইন টুল রয়েছে
  • ios-deploy (একটি iOS ডিভাইসে স্থাপন করা প্রয়োজন)
    • npm install -g ios-deploy
  • ios-sim (iOS সিমুলেটরে স্থাপন করা প্রয়োজন)
    • npm install -g ios-sim
  • ঐচ্ছিক: একটি iOS বিকাশকারী হিসাবে নিবন্ধন করুন৷
    • বাস্তব ডিভাইসে পরীক্ষা করার জন্য এবং অ্যাপ স্টোরে জমা দেওয়ার জন্য এটি প্রয়োজনীয়।
    • আপনি যদি শুধুমাত্র iPhone/iPad সিমুলেটর ব্যবহার করার পরিকল্পনা করেন তাহলে আপনি নিবন্ধন এড়িয়ে যেতে পারেন।

cca কমান্ড-লাইন টুল ইনস্টল করুন

npm এর মাধ্যমে cca ইনস্টল করুন:

npm install -g cca

নতুন রিলিজের সাথে টুলচেইন আপডেট করতে: npm update -g cca ।

কমান্ড লাইন থেকে এই কমান্ডটি চালিয়ে সবকিছু সঠিকভাবে ইনস্টল করা হয়েছে তা নিশ্চিত করুন:

cca checkenv

আপনি cca আউটপুট করা সংস্করণ নম্বর এবং আপনার Android বা iOS SDK ইনস্টলেশন সম্পর্কে নিশ্চিতকরণ দেখতে পাবেন।

ধাপ 2: একটি প্রকল্প তৈরি করুন

YourApp রান নামের একটি ডিরেক্টরিতে একটি ডিফল্ট মোবাইল ক্রোম অ্যাপ প্রকল্প তৈরি করতে:

cca create YourApp

আপনি যদি ইতিমধ্যেই একটি Chrome অ্যাপ তৈরি করে থাকেন এবং এটিকে একটি মোবাইল প্ল্যাটফর্মে পোর্ট করতে চান, তাহলে আপনি এটিতে একটি সিমলিঙ্ক তৈরি করতে --link-to পতাকা ব্যবহার করতে পারেন:

cca create YourApp --link-to=path/to/manifest.json

আপনি যদি পরিবর্তে আপনার বিদ্যমান ক্রোম অ্যাপ ফাইলগুলি অনুলিপি করতে চান তবে আপনি --copy-from পতাকা ব্যবহার করতে পারেন:

cca create YourApp --copy-from=path/to/manifest.json

এখনও আপনার নিজস্ব Chrome অ্যাপ নেই? মোবাইল সমর্থন সহ অনেক নমুনা Chrome অ্যাপগুলির মধ্যে একটি ব্যবহার করে দেখুন৷

ধাপ 3: বিকাশ করুন

আপনি দুটি উপায়ে আপনার অ্যাপ্লিকেশন তৈরি এবং চালাতে পারেন:

  • বিকল্প A: কমান্ড লাইন থেকে, cca টুল ব্যবহার করে, বা
  • বিকল্প B: একটি IDE ব্যবহার করে, যেমন Eclipse বা Xcode। আপনার হাইব্রিড মোবাইল অ্যাপ্লিকেশন চালু, কনফিগার এবং ডিবাগ করার জন্য একটি IDE ব্যবহার সম্পূর্ণরূপে ঐচ্ছিক (কিন্তু প্রায়ই দরকারী)।

বিকল্প A: কমান্ড লাইন ব্যবহার করে বিকাশ এবং নির্মাণ করুন

আপনার cca উত্পন্ন প্রকল্প ফোল্ডারের রুট থেকে:

অ্যান্ড্রয়েড

  • অ্যান্ড্রয়েড এমুলেটরে আপনার অ্যাপ চালানোর জন্য: cca emulate android
    • দ্রষ্টব্য: এর জন্য আপনাকে একটি এমুলেটর সেট আপ করতে হবে। আপনি এটি সেট আপ করতে android avd চালাতে পারেন। android চালিয়ে অতিরিক্ত এমুলেটর ছবি ডাউনলোড করুন। ইন্টেল ছবিগুলিকে দ্রুত চালানোর জন্য, Intel এর HAXM ইনস্টল করুন৷
  • একটি সংযুক্ত অ্যান্ড্রয়েড ডিভাইসে আপনার অ্যাপ চালানোর জন্য: cca run android

iOS

  • iOS সিমুলেটরে আপনার অ্যাপ চালানোর জন্য: cca emulate ios
  • একটি সংযুক্ত iOS ডিভাইসে আপনার অ্যাপ চালাতে: cca run ios

বিকল্প B: একটি IDE ব্যবহার করে বিকাশ এবং নির্মাণ করুন

অ্যান্ড্রয়েড

  1. Eclipse এ, File -> Import নির্বাচন করুন।
  2. Existing Android Code Into Workspace Android > বিদ্যমান Android কোড বেছে নিন।
  3. আপনি যে পথটি cca দিয়ে তৈরি করেছেন তা থেকে আমদানি করুন।
    • আপনার আমদানি করার জন্য দুটি প্রকল্প আশা করা উচিত, যার মধ্যে একটি হল *-CordovaLib ।
  4. আপনার অ্যাপ চালানোর জন্য প্লে বোতামে ক্লিক করুন।
    • আপনাকে একটি রান কনফিগারেশন তৈরি করতে হবে (সকল জাভা অ্যাপ্লিকেশনের মতো)। আপনি সাধারণত স্বয়ংক্রিয়ভাবে প্রথমবার এটির জন্য অনুরোধ পান।
    • আপনাকে প্রথমবার আপনার ডিভাইস/ইমুলেটর পরিচালনা করতে হবে।

iOS

  1. একটি টার্মিনাল উইন্ডোতে নিম্নলিখিত টাইপ করে Xcode এ প্রকল্পটি খুলুন:

    cd YourApp
open platforms/ios/*.xcodeproj

  2. আপনি সঠিক লক্ষ্য নির্মাণ করছেন তা নিশ্চিত করুন।

    উপরের বাম দিকে (রান এবং স্টপ বোতামের পাশে), লক্ষ্য প্রকল্প এবং ডিভাইস নির্বাচন করার জন্য একটি ড্রপডাউন রয়েছে। নিশ্চিত করুন যে YourApp নির্বাচন করা হয়েছে এবং CordovaLib নয়।

  3. প্লে বোতামে ক্লিক করুন।

আপনার অ্যাপ সোর্স কোড পরিবর্তন করা

আপনার HTML, CSS, এবং JavaScript ফাইলগুলি আপনার cca প্রজেক্ট ফোল্ডারের www ডিরেক্টরির মধ্যে থাকে।

গুরুত্বপূর্ণ : www/ তে পরিবর্তন করার পরে, আপনার অ্যাপ্লিকেশন স্থাপন করার আগে আপনাকে অবশ্যই cca prepare চালাতে হবে। আপনি যদি কমান্ড লাইন থেকে cca build , cca run , বা cca emulate চালান, প্রস্তুতির ধাপটি স্বয়ংক্রিয়ভাবে সম্পন্ন হয়। আপনি যদি Eclipse/XCode ব্যবহার করে ডেভেলপ করছেন, তাহলে আপনাকে অবশ্যই নিজে নিজে cca prepare চালাতে হবে।

ডিবাগিং

আপনি যেভাবে Cordova অ্যাপ্লিকেশনগুলিকে ডিবাগ করেন সেভাবে আপনি মোবাইলে আপনার Chrome অ্যাপ ডিবাগ করতে পারেন৷

ধাপ 4: পরবর্তী পদক্ষেপ

এখন আপনার কাছে একটি কার্যকরী মোবাইল Chrome অ্যাপ রয়েছে, মোবাইল ডিভাইসে অভিজ্ঞতা উন্নত করার অনেক উপায় রয়েছে৷

মোবাইল ম্যানিফেস্ট

কিছু নির্দিষ্ট Chrome অ্যাপ সেটিংস আছে যা শুধুমাত্র মোবাইল প্ল্যাটফর্মে প্রযোজ্য। আমরা এইগুলি ধারণ করার জন্য একটি www/manifest.mobile.json ফাইল তৈরি করেছি এবং নির্দিষ্ট মানগুলি প্লাগইন ডকুমেন্টেশন এবং এই নির্দেশিকা জুড়ে উল্লেখ করা হয়েছে৷

আপনি সেই অনুযায়ী এখানে মান সমন্বয় করা উচিত.

আইকন

ডেস্কটপ ক্রোম অ্যাপের তুলনায় মোবাইল অ্যাপের আরও কিছু আইকন রেজোলিউশন প্রয়োজন।

অ্যান্ড্রয়েডের জন্য, এই আকারগুলি প্রয়োজন:

  • 36px, 48px, 78px, 96px

iOS অ্যাপের জন্য, আপনি iOS 6 বনাম iOS 7 সমর্থন করেন কিনা তার উপর নির্ভর করে প্রয়োজনীয় মাপ ভিন্ন হয়। ন্যূনতম সংখ্যক আইকন প্রয়োজন:

  • iOS 6 : 57px, 72px, 114px, 144px
  • iOS 7 : 72px, 120px, 152px

একটি সম্পূর্ণ আইকন তালিকা আপনার manifest.json ফাইলের মত দেখাবে:

"icons": {
  "16": "assets/icons/icon16.png",
  "36": "assets/icons/icon36.png",
  "48": "assets/icons/icon48.png",
  "57": "assets/icons/icon57.png",
  "72": "assets/icons/icon72.png",
  "78": "assets/icons/icon78.png",
  "96": "assets/icons/icon96.png",
  "114": "assets/icons/icon114.png",
  "120": "assets/icons/icon120.png",
  "128": "assets/icons/icon128.png",
  "144": "assets/icons/icon144.png",
  "152": "assets/icons/icon152.png"
}

প্রতিবার আপনি cca prepare সময় প্রতিটি প্ল্যাটফর্মের জন্য উপযুক্ত স্থানে আইকনগুলি কপি করা হবে।

স্প্ল্যাশ স্ক্রিন

আইওএস-এ অ্যাপ লোড হওয়ার সাথে সাথে একটি সংক্ষিপ্ত স্প্ল্যাশ স্ক্রিন দেখায়। platforms/ios/[AppName]/Resources/splash এ ডিফল্ট কর্ডোভা স্প্ল্যাশ স্ক্রীনের একটি সেট অন্তর্ভুক্ত করা হয়েছে।

প্রয়োজনীয় মাপ হল:

  • 320px x 480px + 2x
  • 768px x 1024px + 2x (iPad পোর্ট্রেট)
  • 1024px x 768px + 2x (iPad ল্যান্ডস্কেপ)
  • 640px x 1146px

স্প্ল্যাশ স্ক্রীনের ছবি বর্তমানে cca দ্বারা পরিবর্তিত হয় না।

ধাপ 5: প্রকাশ করুন

আপনার প্রকল্পের platforms ডিরেক্টরিতে, আপনার দুটি সম্পূর্ণ নেটিভ প্রকল্প রয়েছে: একটি Android এর জন্য এবং একটি iOS এর জন্য৷ আপনি এই প্রকল্পগুলির রিলিজ সংস্করণ তৈরি করতে পারেন এবং সেগুলিকে Google Play বা iOS অ্যাপ স্টোরে প্রকাশ করতে পারেন৷

প্লে স্টোরে প্রকাশ করুন

প্লে স্টোরে আপনার অ্যান্ড্রয়েড অ্যাপ্লিকেশন প্রকাশ করতে:

  1. দুটি অ্যান্ড্রয়েড সংস্করণ আইডি আপডেট করুন, তারপর cca prepare চালান:

    • android:versionName www/manifest.json এ version কী ব্যবহার করে সেট করা হয়েছে (এটি আপনার ডেস্কটপ প্যাকেজড অ্যাপের সংস্করণও সেট করে)।
    • android:versionCode www/manifest.mobile.js এ versionCode কী ব্যবহার করে সেট করা হয়েছে।

  2. platforms/android/ant.properties সম্পাদনা (বা তৈরি করুন) এবং key.store এবং key.alias বৈশিষ্ট্যগুলি সেট করুন (যেমন Android বিকাশকারী ডক্সে ব্যাখ্যা করা হয়েছে)।

  3. আপনার প্রকল্প তৈরি করুন:

    ./platforms/android/cordova/build --release

  4. platforms/android/ant-build/ ভিতরে অবস্থিত আপনার স্বাক্ষরিত .apk খুঁজুন।

  5. Google Play বিকাশকারী কনসোলে আপনার স্বাক্ষরিত অ্যাপ্লিকেশন আপলোড করুন৷

iOS অ্যাপ স্টোরে প্রকাশ করুন

  1. www/manifest.mobile.js এ CFBundleVersion কী সেট করে অ্যাপ সংস্করণটি আপডেট করুন, তারপর cca prepare চালান।

  2. আপনার platforms/ios ডিরেক্টরির অধীনে পাওয়া Xcode প্রকল্প ফাইলটি খুলুন:

    ওপেন প্ল্যাটফর্ম/ios/*.xcodeproj

  3. অ্যাপলের অ্যাপ ডিস্ট্রিবিউশন গাইড অনুসরণ করুন।

বিশেষ বিবেচনা

আপনি যদি Chrome Apps-এ নতুন হয়ে থাকেন, তাহলে সবচেয়ে বড় সমস্যা হল কিছু ওয়েব বৈশিষ্ট্য অক্ষম করা হয়েছে ৷ যাইহোক, এর মধ্যে বেশ কয়েকটি বর্তমানে কর্ডোভার মধ্যে কাজ করে।

একটি Chrome অ্যাপ মোবাইলে বাক্সের বাইরে কাজ নাও করতে পারে৷ মোবাইলে পোর্ট করার কিছু সাধারণ সমস্যা:

  • ছোট পর্দার সাথে লেআউটের সমস্যা, বিশেষ করে যখন পোর্ট্রেট ওরিয়েন্টেশনে।
  • ডিভাইসের নেটিভ ডাইমেনশন ব্যবহার করার পরিবর্তে chrome.app.window- এর মাধ্যমে সেট করা Chrome অ্যাপ উইন্ডোর মাপ উপেক্ষা করা হবে।
    • প্রস্তাবিত সমাধান: হার্ড-কোডেড উইন্ডো মাত্রা সরান; বিভিন্ন আকারের কথা মাথায় রেখে আপনার অ্যাপ ডিজাইন করুন।
  • ছোট বোতাম এবং লিঙ্ক একটি আঙুল দিয়ে টোকা কঠিন হবে.
    • প্রস্তাবিত সমাধান: আপনার স্পর্শ লক্ষ্যগুলিকে অন্তত 44 x 44 পয়েন্টে সামঞ্জস্য করুন।
  • টাচ স্ক্রিনে বিদ্যমান নেই এমন মাউস হোভারের উপর নির্ভর করার সময় অপ্রত্যাশিত আচরণ।
    • প্রস্তাবিত সমাধান: হোভার ছাড়াও, UI উপাদানগুলি সক্রিয় করুন যেমন ড্রপডাউন এবং ট্যাপে টুলটিপ৷
  • একটি 300ms ট্যাপ বিলম্ব।

সমর্থিত Chrome APIs

আমরা মোবাইলের জন্য Chrome অ্যাপ্লিকেশানগুলিতে অনেকগুলি মূল Chrome API উপলব্ধ করেছি, যার মধ্যে রয়েছে:

  • পরিচয় - সাইন-ইন ব্যবহারকারীরা OAuth2 ব্যবহার করে৷
  • অর্থপ্রদান - আপনার মোবাইল অ্যাপের মধ্যে ভার্চুয়াল পণ্য বিক্রি করুন
  • pushMessaging - আপনার সার্ভার থেকে আপনার অ্যাপে বার্তা পাঠান
  • সকেট - TCP এবং UDP ব্যবহার করে নেটওয়ার্কের মাধ্যমে ডেটা পাঠান এবং গ্রহণ করুন
  • বিজ্ঞপ্তি (শুধুমাত্র অ্যান্ড্রয়েড) - আপনার মোবাইল অ্যাপ থেকে সমৃদ্ধ বিজ্ঞপ্তি পাঠান
  • সঞ্চয়স্থান - স্থানীয়ভাবে মূল-মান ডেটা সংরক্ষণ এবং পুনরুদ্ধার করুন
  • syncFileSystem - Google ড্রাইভ দ্বারা ব্যাক করা ফাইলগুলি সঞ্চয় এবং পুনরুদ্ধার করুন৷
  • অ্যালার্ম - পর্যায়ক্রমে কাজ চালান
  • নিষ্ক্রিয় - মেশিনের নিষ্ক্রিয় অবস্থার পরিবর্তন হলে সনাক্ত করুন
  • পাওয়ার - সিস্টেমের পাওয়ার ম্যানেজমেন্ট বৈশিষ্ট্যগুলিকে ওভাররাইড করে

যাইহোক, সমস্ত Chrome JavaScript API প্রয়োগ করা হয় না। এবং সমস্ত Chrome ডেস্কটপ বৈশিষ্ট্য মোবাইলে উপলব্ধ নয়:

  • কোন <webview> ট্যাগ নেই
  • IndexedDB নেই
  • কোন getUserMedia()
  • NaCl নেই

আপনি আমাদের API স্থিতি পৃষ্ঠা থেকে অগ্রগতি ট্র্যাক করতে পারেন৷

ক্রোম অ্যাপস ডেভেলপার টুল

অ্যান্ড্রয়েডের জন্য Chrome অ্যাপস ডেভেলপার টুল (ADT) হল একটি স্বতন্ত্র অ্যান্ড্রয়েড অ্যাপ যা আপনাকে উপরে বর্ণিত ডেভেলপমেন্ট টুলচেন সেট আপ না করেই একটি Chrome অ্যাপ ডাউনলোড এবং চালানোর অনুমতি দেয়। আপনি যখন আপনার Android ডিভাইসে একটি বিদ্যমান ক্রোম অ্যাপের (ইতিমধ্যে একটি .crx হিসাবে প্যাকেজ করা আছে) দ্রুত পূর্বরূপ দেখতে চান তখন Chrome ADT ব্যবহার করুন৷

Android এর জন্য Chrome ADT বর্তমানে একটি প্রাক-আলফা রিলিজে রয়েছে। এটি ব্যবহার করে দেখতে, ইনস্টলেশন এবং ব্যবহারের নির্দেশাবলীর জন্য ChromeADT.apk রিলিজ নোটগুলি দেখুন৷