জাভাস্ক্রিপ্ট দিয়ে অ্যাপ বানানোর চেয়ে ভালো কিছু নেই। যদি না আপনি মোবাইল অ্যাপ বানান। জাভাস্ক্রিপ্ট হচ্ছে ওয়েব অ্যাপ বানানোর জন্য, এবং এটি ব্যবহার করে নেটিভ মোবাইল অ্যাপ বানানো আগে সম্ভব নয় ছিল। যেকোনো ওয়েব ডেভেলপারের জন্য নেটিভ মোবাইল অ্যাপে ডুব مرو আশোর ছিল। তাদের Java, বা Objective-C … অথবা এই উদ্দেশ্যে ব্যবহৃত যেকোনো প্রোগ্রামিং ল্যাঙ্গুয়েজ শিখতে হতো।
তবু Facebook-এর React Native এই বাধা ভাঙল। React Native-র সাথে আসে অনেক সুবিধা যেমন Android এবং iOS উভয় প্ল্যাটফর্মের জন্য ক্রস-প্ল্যাটফর্ম অ্যাপ বানানো। React Native-এর আগে, আপনাকে দুবার কোড লিখতে হতো — একটি Android-এর জন্য এবং একটি iOS-এর জন্য। এখন আর সেটি নয়।
এই আর্টিকেল React Native-এর দুনিয়ার একটি পরিচিতি, তাই প্রস্তুত হোন ?।
কেন React Native?
ঠিক আছে, তাহলে কেন React Native অন্য টেকনোলজি না?
এটি আমাদের অনেক সমাধান দেয় যা অন্য টেকনোলজি দিতে পারে না। React Native দিয়ে আপনি যা করবেন:
নেটিভ মোবাইল অ্যাপ বানানো
React Native আমাদের JavaScript-এ নেটিভ অ্যাপ লিখতে দেয় iOS এবং Android উভয়ের জন্য। এটি আমাদের সব নেটিভ কম্পোনেন্ট ব্যবহার করার ক্ষমতা দেয় যেমন gesture, push notification, camera, এবং location। মোবাইল অ্যাপ বানানোর জন্য অন্য কিছু JavaScript লাইব্রেরি আছে যেমন Ionic বা PhoneGap। কিন্তু সেগুলো WebView ব্যবহার করে, এবং সেগুলো দিয়ে বানানো অ্যাপগুলো নেটিভ নয়।
ক্রস-প্ল্যাটফর্ম মোবাইল অ্যাপ বানানো (iOS এবং Android)
হ্যাঁ, React Native-এ আপনি এমন মোবাইল অ্যাপ বানাতে পারেন যা iOS এবং Android-এ চলে। এটি React Native-এর إحدى বড় সুবিধা। Facebook এটা তৈরি করার আগে, আপনাকে দুবার অ্যাপ বানাতে হতো এবং আলাদা কোড দিয়ে: iOS-এর জন্য Swift বা Objective-C এবং Android-এর জন্য Java বা Kotlin। React Native এই সমস্যা সমাধান করলো তাই আপনি আপনার React Native অ্যাপ বানাবেন এবং সেটি iOS এবং Android-এ কাজ করবে। Awesome! ?
সব কোড JavaScript এবং React-এ লিখুন
React Native অ্যাপ বানানোর সময়, আপনি আসলে JavaScript লিখবেন। Reactjs কোড আমাদের দিয়ে বড় UI এবং ইউজার এক্সপেরিয়েন্স কম্পোনেন্ট বানাতে পারি।
React Native-এ শুরু করা
React Native-এ শুরু করা এক্সাইটিং, কিন্তু একই সাথে একটু কনফিউজিংও হতে পারে। প্রথম ধাপ হলো ইনস্টল করা, এবং এতে একাধিক উপায় আছে:
expo-cli ব্যবহার:
expo-cli একটি কমান্ড লাইন টুল। এটি React Native বয়লারপ্লেট ডাউনলোড ও ইনস্টল করে, expo API-এর সাথে ইন্টিগ্রেটেড (ইনস্টলেশন গাইডের জন্য এখানে দেখুন)। এটি React Native অ্যাপ বানানোর সহজ উপায়, এবং যারা React Native-এ নতুন শুরু করছেন তাদের জন্য রিকমেন্ডেড পথ।
expo-cli আপনাকে অনেক অপশন দেয়। আপনি কোনো কনফিগারেশন ছাড়া মোবাইল ডিভাইসে আপনার অ্যাপ্লিকেশন রান ও টেস্ট করতে পারেন। QR কোড স্ক্যান করুন এবং আপনার অ্যাপ expo মোবাইল অ্যাপে খুলবে। ব্রাউজারে appertize নামে একটি ওয়েব ইন্টারফেসে React Native দিয়ে বানানো অন্যান্য মোবাইল অ্যাপ্লিকেশন এক্সপ্লোর করতে পারেন!
react-native-cli ব্যবহার
react-native-cli একই কাজ করে expo-cli-এর মত, কিন্তু আলাদা পদ্ধতিতে এবং এক্সট্রা সুবিধা দিয়ে। react-native-cli-তে ইনস্টল করা অ্যাপগুলো আমাদের নিজস্ব নেটিভ মডিউল অ্যাপে তৈরি করার অপশন ও ক্ষমতা দেয়। আপনার অ্যাপ্লিকেশন eject করার দরকার নেই নেটিভ মডিউল বানাতে। Eject করলে আপনি নেটিভ মডিউল ব্যবহার করতে পারবেন এবং নিজের লিখতে পারবেন (নেটিভ মডিউল কীভাবে লিখবেন তা অন্য একটি পার্টে এক্সপ্লোর করব)।
বিভিন্ন প্ল্যাটফর্মে React Native অ্যাপ ডেভেলপ করা আলাদা প্রসেস। কখনো কখনো কোনো নির্দিষ্ট প্ল্যাটফর্মের জন্য নির্দিষ্ট কনফিগারেশন দরকার হয়। উদাহরণস্বরূপ Android-র জন্য বিল্ড করতে হলে Android SDK ব্যবহার করতে হবে, তাহলে দেখি কীভাবে কাজ করে!
Android-এর জন্য মোবাইল অ্যাপ বানানো
Android-এ ডেভেলপমেন্ট শুরু করার জন্য কিছু রিকোয়ারমেন্ট ইনস্টল করতে হবে। প্রথমে, Android SDK এবং Android Studio ডাউনলোড ও কনফিগার করতে হবে। এখানে লিংক থেকে ডাউনলোড করতে পারেন।
Android Studio ডাউনলোড করার পর কিছু API ও ইনস্টল করতে হবে। সেটি করতে Android Studio খুলুন, তারপর Settings ট্যাবে ক্লিক করুন এই উইন্ডো খুলবে:
প্রথমে, ✔️ আপনার পছন্দের প্ল্যাটফর্ম চেক করুন SDK Platforms ট্যাবে (যেমন Android 6.0 Marshmallow)। তারপর SDK Tools-এ যান।
এবং চেক করুন Android SDK Build-Tools, Android SDK tools, এবং google play service। Android SDK Build-Tools-এ সকল প্ল্যাটফর্ম সিলেক্ট করুন:
- 19.0.0 থেকে 20.0.0
- 22.0.0 থেকে 24.0.0
- এবং 25.0.2, 26.0.1 থেকে 26.0.3
- 27.0.3 এবং 28.0.1 থেকে 28.02
এখন SDK এবং Android Studio-র সাথে কাজ শেষ। পরবর্তী ধাপ হলো emulator। Emulator (বা simulator) হলো যেখানে আমাদের অ্যাপ রান ও টেস্ট করতে হবে। এখানেও অনেক অপশন আছে।
আপনি Android Studio emulator ব্যবহার করতে পারেন। এখানে দেখুন Android Studio-এ emulator কীভাবে তৈরি করবেন। সত্যি বলতে আমি কখনো এগুলো ব্যবহার করিনি। আমি Genymotion বা রিয়েল ডিভাইস পছন্দ করি।
Genymotion
Genymotion একটি ডেস্কটপ অ্যাপ্লিকেশন যা ভার্চুয়াল emulator দেয় আপনার অ্যাপ্লিকেশন টেস্ট করার জন্য। আমি এটিকে খুব পছন্দ করি কারণ এটি দ্রুত। ? এটি আপনাকে কাস্টমাইজড ফোন তৈরি করার অপশন দেয় যেকোনো রিয়েল ডিভাইসের ফিচার সহ। যেমন WiFi, Location, এবং Camera enable করা। আমি স্ট্রংলি রিকমেন্ড করি Genymotion Android Studio emulator বা অন্য emulator-এর চেয়ে।
Real Device ব্যবহার
রিয়েল ডিভাইস ব্যবহার করার চেয়ে ভালো কিছু নেই আপনার অ্যাপ রান ও টেস্ট করার জন্য। কারণ এটি আপনাকে জানায় আপনার অ্যাপ্লিকেশন রিয়েল ডিভাইসে কেমন দেখায়। এটি আপনাকে আপনার কাজের বাস্তবতা অনুভব করায় যেভাবে ভার্চুয়াল ডিভাইস দেয় না। তাই আপনার যদি ডিভাইস থাকে, সংকোচ করবেন না।
এ পর্যন্ত Android-র সাথে ঠিক আছে — কিন্তু iOS-এর কী?
iOS-র জন্য React Native অ্যাপ বানানো
iOS-এ React Native রান করা Android-এর থেকে খুব আলাদা দেখায় না। একই React Native অ্যাপ যা Android-এ চলে, সেটি iOS-এও চলে, কিছু এক্সেপশন ছাড়া।
উদাহরণস্বরূপ যদি আপনি iOS ডিভাইসে রান করতে চান, তবে আপনার MacOS থাকতে হবে। MacOS এবং iOS-র কথা বললে, Android-এর SDK-এর মতো এক্সট্রা ডিপেন্ডেন্সি ডাউনলোড করার দরকার নেই iOS-এ React Native রান করার জন্য।
Emulator-র কথা বললে, Xcode-র emulator ভালো আছে যা আপনি আপনার React Native অ্যাপ টেস্ট করতে পারেন। এই পোস্টটি দেখুন emulator-র সাথে কিছু ট্রিকস জানতে।
MacOS-এ আপনি iOS এবং Android দুটোই রান করতে পারেন। আপনি অবশ্যই Android Studio এবং Genymotion MacOS-এ ইনস্টল করতে পারেন। এই সম্ভাবনা PC-তে নেই যেখানে আপনি শুধু Android emulator রান করতে পারেন কিন্তু iOS emulator নয়। তাই আপনি ഭাগ্যবান ? যদি MacOS থাকে — উপভোগ করুন ?।
তাহলে এখন আমাদের React Native অ্যাপ বানানোর এনভায়রনমেন্ট রেডি, সব ইনস্টল করলাম, কিন্তু React Native কোড কীভাবে লিখা হয়? এটি খুব সিম্পল: আপনি আসলে Reactjs কোড লিখবেন।
আফিসিয়াল গাইড চেক করে React Native-র সাথে কিছু প্র্যাকটিস পেতে পারেন। আমি এই গয়েয়ার আর্টিকেল রিকমেন্ড করি শুরুতে "React Native YouTube Replica." এটি ধাপে ধাপে গাইড করবে আপনার প্রথম React Native অ্যাপ বানাতে।
Wow! এ পর্যন্ত আপনি ঠিক আছেন এবং React Native-এ কোডিং করছেন। ? কিন্তু আপনাকে আপনার এরর চেক ও ডিবাগ করতে হবে এবং কোডের লগ দেখতে হবে। Yeah the logs!! তাই আমাদের একটা debugger দরকার! React Native-এ কীভাবে ডিবাগ করবেন?
React Native ডিবাগিং
আপনার কোড ডিবাগ করা খুব গুরুত্বপূর্ণ, শুধু React Native-এ নয় বরং যেকোনো প্রোগ্রামিং ল্যাঙ্গুয়েজে। তাই আপনার React Native কোডে, আপনাকে জানতে হবে কী হচ্ছে। React Native অ্যাপ ডিবাগ করার অনেক উপায় আছে যেমন:
Chrome DevTools দিয়ে ডিবাগ
React Native আপনাকে Chrome devtools ব্যবহার করার অপশন দেয় আপনার অ্যাপের লগ देखने জন্য। Chrome-এ ডিবাগ করতে এবং emulator-এ ডিবাগ মোড অন করতে, কীবোর্ডে শুধু Ctrl+ m চাপুন।
এই স্ক্রিন পপ-আপ হবে:
তারপর Debug Js Remotely বেছে নিন। এটি Google Chrome-এ একটি ট্যাব খুলবে এই অ্যাড্রেসসহ https://localhost:8081/debugger-ui/। এটা হলো Chrome devtools-এর জন্য, অন্য অপশনগুলো কী?
React-native-debugger ব্যবহার
React-native-debugger React Native কোড ডিবাগ করার জন্য একটি দারুণ টুল। এটি একটি ডেস্কটপ অ্যাপ্লিকেশন যা অনেক সুবিধা দেয়। এতে Redux devtools এবং React-devtools ইন্টিগ্রেশন আছে। আপনি স্টাইলও ডিবাগ করতে পারেন। এটি আসলে React Native-এর জন্য সেরা ডিবাগার এবং এটি আমি ব্যবহার করি। সাধারণত এটি MacOS, Windows, এবং Linux-এ উপলব্ধ। ইনস্টলেশন ও ইন্টিগ্রেশন গাইড চেক করুন।
আমার মনে হয় এ পর্যন্ত পর্যাপ্ত। এটি React Native দিয়ে মোবাইল অ্যাপ বানানোর absolute guide-এর প্রথম পার্ট। পরবর্তী পার্টে আমরা ডুব মăriব আরও টেকনিক্যাল টিপস ও ইস্যুতে যেমন নেটিভ কম্পোনেন্ট কীভাবে ব্যবহার করবেন, React Native API, অন্যান্য লাইব্রেরির সাথে ইন্টিগ্রেশন, Redux, GraphQL এবং এরকম বিষয়ে। তাই এই মেইল-লিস্ট সাবস্ক্রাইব করুন পরবর্তী পার্ট আসার সময় জানতে। আপনার সময়ের জন্য ধন্যবাদ। ?
আপনি সবসময় আমাকে Twitter-এ পাবেন ?
