রিঅ্যাক্ট নেটিভ-এ মোবাইল অ্যাপ তৈরি করতে আপনার যা জানা দরকার

জাভাস্ক্রিপ্ট দিয়ে অ্যাপ তৈরি করার চেয়ে ভালো আর কিছুই নেই। যদি না আপনি মোবাইল অ্যাপস তৈরি করছেন। JavaScript হল ওয়েব অ্যাপ তৈরি করার জন্য, এবং এটি ব্যবহার করে নেটিভ মোবাইল অ্যাপ তৈরি করা সম্ভব ছিল না। কোনো ওয়েব ডেভেলপারের জন্য নেটিভ মোবাইল অ্যাপ তৈরিতে ডুব দেওয়া কঠিন ছিল। তাদের জাভা, অথবা অবজেক্টিভ-সি …অথবা এই উদ্দেশ্যে ব্যবহৃত যেকোন প্রোগ্রামিং ভাষা শিখতে হবে।

অর্থাৎ যতক্ষণ না ফেসবুকের রিঅ্যাক্ট নেটিভ এই বাধা ভেঙেছে। রিঅ্যাক্ট নেটিভ অ্যান্ড্রয়েড এবং আইওএস উভয়ের জন্য ক্রস-প্ল্যাটফর্ম অ্যাপ তৈরি করার মতো দুর্দান্ত সুবিধা নিয়ে আসে। রিঅ্যাক্ট নেটিভের আগে, আপনাকে দুইবার আপনার কোড লিখতে হয়েছিল — একটি Android এর জন্য এবং একটি IOS-এর জন্য। সেটা আর হয় না।

এই নিবন্ধটি প্রতিক্রিয়া নেটিভ বিশ্বের একটি ভূমিকা, তাই প্রস্তুত হন?.

নেটিভ প্রতিক্রিয়া কেন?

ঠিক আছে, তাহলে কেন নেটিভ প্রতিক্রিয়া দেখান এবং অন্য কোন প্রযুক্তি নয়?

এটি আমাদের অনেক সমাধান দেয় যা অন্যান্য প্রযুক্তি সামর্থ্য করতে পারে না। এখানে আপনি প্রতিক্রিয়া নেটিভ এর সাথে কি করতে পারেন:

নেটিভ মোবাইল অ্যাপ তৈরি করা

React Native আমাদের iOS এবং Android উভয়ের জন্য JavaScript-এ নেটিভ অ্যাপ লিখতে দেয়। এটি আমাদের সমস্ত নেটিভ উপাদান যেমন অঙ্গভঙ্গি, পুশ বিজ্ঞপ্তি, ক্যামেরা এবং অবস্থান ব্যবহার করার ক্ষমতা দেয়৷ আয়নিক বা ফোনগ্যাপের মতো মোবাইল অ্যাপ তৈরির জন্য আরও কিছু জাভাস্ক্রিপ্ট লাইব্রেরি রয়েছে। কিন্তু সেই লাইব্রেরিগুলো Webview ব্যবহার করে, এবং সেইসব প্রযুক্তির সাহায্যে তৈরি অ্যাপগুলো নেটিভ নয়।

বিল্ডিং ক্রস প্ল্যাটফর্ম মোবাইল অ্যাপস (iOS এবং Android)

হ্যাঁ, রিঅ্যাক্ট নেটিভ দিয়ে আপনি মোবাইল অ্যাপ তৈরি করতে পারেন যা iOS এবং Android-এ চলতে পারে। এটি রিঅ্যাক্ট নেটিভের একটি বড় সুবিধা। Facebook এটি তৈরি করার আগে, আপনাকে আপনার অ্যাপটি দুবার এবং বিভিন্ন কোড দিয়ে তৈরি করতে হয়েছিল:একটি আইওএসের জন্য সুইফট বা অবজেক্টিভ-সি ব্যবহার করে এবং একটি জাভা বা কোটলিন ব্যবহার করে অ্যান্ড্রয়েডের জন্য। React Native এই সমস্যার সমাধান করেছে যাতে আপনি আপনার React Native অ্যাপ তৈরি করতে পারেন এবং এটি iOS এবং Android-এ কাজ করবে। অসাধারণ! ?

আপনার কোড জাভাস্ক্রিপ্টে লিখুন এবং প্রতিক্রিয়া করুন

আপনি যখন রিঅ্যাক্ট নেটিভ অ্যাপস তৈরি করছেন, আপনি আসলে জাভাস্ক্রিপ্ট লিখবেন। Reactjs কোড আমাদের দুর্দান্ত UI এবং ব্যবহারকারীর অভিজ্ঞতার উপাদান তৈরি করতে দেয়।

প্রতিক্রিয়া-নেটিভ দিয়ে শুরু করা

প্রতিক্রিয়া-নেটিভ দিয়ে শুরু করা উত্তেজনাপূর্ণ হতে পারে, কিন্তু একই সাথে কিছুটা বিভ্রান্তিকরও হতে পারে। প্রথম ধাপ হল এটি ইনস্টল করা, এবং এটি করার বিভিন্ন উপায় রয়েছে:

expo-cli ব্যবহার করা:

expo-cli একটি কমান্ড লাইন টুল। এটি এক্সপো API-এর সাথে একত্রিত আপনার জন্য রিঅ্যাক্ট নেটিভ বয়লারপ্লেট ডাউনলোড এবং ইনস্টল করে (ইন্সটলেশন গাইডের জন্য এখানে দেখুন)। এটি একটি রিঅ্যাক্ট নেটিভ অ্যাপ তৈরি করার একটি সহজ উপায় এবং আপনি যদি সবেমাত্র রিঅ্যাক্ট নেটিভ দিয়ে শুরু করে থাকেন তবে এটি প্রস্তাবিত উপায়।

expo-cli আপনাকে অনেক অপশন দেয়। আপনি কোনো কনফিগারেশন ছাড়াই একটি মোবাইল ডিভাইসে আপনার অ্যাপ্লিকেশন চালাতে এবং পরীক্ষা করতে পারেন। একটি QR কোড স্ক্যান করুন এবং আপনার অ্যাপ এক্সপো মোবাইল অ্যাপের সাথে খুলবে। আপনি অ্যাপারটাইজ নামে একটি ওয়েব ইন্টারফেসের মাধ্যমে ব্রাউজারে প্রতিক্রিয়া নেটিভ সহ নির্মিত অন্যান্য মোবাইল অ্যাপ্লিকেশনগুলি অন্বেষণ করতে পারেন!

react-native-cli ব্যবহার করা

প্রতিক্রিয়া-নেটিভ-ক্লাই এক্সপো-ক্লির মতো একই কাজ করে, তবে একটি ভিন্ন পদ্ধতি এবং অতিরিক্ত সুবিধা সহ। react-native-cli-এর সাথে ইনস্টল করা অ্যাপগুলি আমাদের অ্যাপে আমাদের নিজস্ব মডিউল তৈরি করার বিকল্প এবং ক্ষমতা প্রদান করে। নেটিভ মডিউল তৈরি করতে আপনাকে আপনার অ্যাপ্লিকেশনটি বের করার দরকার নেই। ইজেক্ট করা আপনাকে নেটিভ মডিউল ব্যবহার করতে এবং আপনার নিজের লিখতে সক্ষম করে তোলে (আমরা অন্য অংশে নেটিভ মডিউলগুলি কীভাবে লিখতে হয় তা অন্বেষণ করব )।

বিভিন্ন প্ল্যাটফর্মে প্রতিক্রিয়া নেটিভ অ্যাপ্লিকেশনগুলি বিকাশ করা একটি ভিন্ন প্রক্রিয়া। কিছু সময় আমাদের একটি নির্দিষ্ট প্ল্যাটফর্মের জন্য কিছু নির্দিষ্ট কনফিগারেশনের প্রয়োজন হয়। উদাহরণস্বরূপ, Android এর জন্য তৈরি করতে, আপনাকে Android SDK ব্যবহার করতে হবে, তাই আসুন এটি কীভাবে কাজ করে তা অন্বেষণ করি!

অ্যান্ড্রয়েডের জন্য মোবাইল অ্যাপ তৈরি করা

Android এর জন্য বিকাশ শুরু করার জন্য আপনাকে কিছু প্রয়োজনীয়তা ইনস্টল করতে হবে৷ প্রথমে, আপনাকে অ্যান্ড্রয়েড এসডিকে এবং অ্যান্ড্রয়েড স্টুডিও উভয়ই ডাউনলোড এবং কনফিগার করতে হবে। আপনি এখানে এই লিঙ্ক দিয়ে সেগুলি ডাউনলোড করতে পারেন৷

অ্যান্ড্রয়েড স্টুডিও ডাউনলোড করার পরে আপনাকে কিছু এপিআই ইনস্টল করতে হবে। এটি করতে অ্যান্ড্রয়েড স্টুডিও খুলুন, তারপর সেটিংস ট্যাবে ক্লিক করুন এই উইন্ডোটি খুলবে:

প্রথমে, SDK প্ল্যাটফর্ম ট্যাবে (উদাহরণস্বরূপ Android 6.0 Marshmallow) ✔️যে প্ল্যাটফর্মটিকে আপনি সমর্থন করতে চান সেটি দেখুন। তারপর SDK টুলগুলিতে স্যুইচ করুন৷

এবং 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

এখন আমরা এসডিকে এবং অ্যান্ড্রয়েড স্টুডিও দিয়ে শেষ করেছি। পরবর্তী ধাপ হল এমুলেটর। এমুলেটর (বা সিমুলেটর) হল যেখানে আমাদের অ্যাপ চালাতে হবে এবং পরীক্ষা করতে হবে। অনেক ভিন্ন পছন্দ আছে।

আপনি অ্যান্ড্রয়েড স্টুডিও এমুলেটর ব্যবহার করতে পারেন। অ্যান্ড্রয়েড স্টুডিওতে কীভাবে একটি এমুলেটর তৈরি করবেন তা আপনি এখানে চেক করুন। সত্যি বলতে আমি সেগুলি কখনই ব্যবহার করিনি। আমি এর পরিবর্তে জেনিমোশন বা একটি বাস্তব ডিভাইস পছন্দ করি৷

Genymotion৷

Genymotion হল একটি ডেস্কটপ অ্যাপ্লিকেশন যা আপনার অ্যাপ্লিকেশন পরীক্ষা করার জন্য একটি ভার্চুয়াল এমুলেটর প্রদান করে। আমি এটি ব্যবহার করতে পছন্দ করি কারণ এটি দ্রুত। ? এটি আপনাকে বৈশিষ্ট্যগুলির সাথে একটি কাস্টমাইজড ফোন তৈরি করার বিকল্প দেয় যা আপনি যেকোনো বাস্তব ডিভাইসে খুঁজে পেতে পারেন। উদাহরণস্বরূপ Wifi, অবস্থান এবং ক্যামেরা সক্ষম করুন। আমি আপনাকে অ্যানড্রয়েড স্টুডিও এমুলেটর বা অন্য কোনো এমুলেটরের মাধ্যমে জেনিমোশন ব্যবহার করার পরামর্শ দিচ্ছি।

বাস্তব ডিভাইস ব্যবহার করা

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

এই মুহুর্তে, আমরা অ্যান্ড্রয়েডের সাথে ঠিক আছি — কিন্তু iOS সম্পর্কে কী?

IOS-এর জন্য প্রতিক্রিয়া-নেটিভ অ্যাপ তৈরি করা

iOS-এর জন্য রিঅ্যাক্ট নেটিভ চালানো অ্যান্ড্রয়েড থেকে খুব বেশি আলাদা দেখায় না। অ্যান্ড্রয়েডে চলে সেই একই রিঅ্যাক্ট নেটিভ অ্যাপ কিছু ব্যতিক্রম ছাড়া, iOS-এও চলতে পারে।

উদাহরণস্বরূপ আপনি যদি একটি iOS ডিভাইসে চালাতে চান তবে আপনার একটি MacOS থাকতে হবে। MacOS এবং iOS সম্পর্কে কথা বললে, iOS-এ React Native চালানোর জন্য আপনাকে Android এর জন্য SDK-এর মতো কোনো অতিরিক্ত নির্ভরতা ডাউনলোড করতে হবে না।

এমুলেটর সম্পর্কে, এক্সকোডের চমৎকার এমুলেটর রয়েছে যা আপনি আপনার প্রতিক্রিয়া নেটিভ অ্যাপ পরীক্ষা করতে ব্যবহার করতে পারেন। আপনি এই পোস্টটি পরীক্ষা করতে পারেন যা এমুলেটরগুলির সাথে ব্যবহার করার জন্য কিছু কৌশল দেখায়৷

MacOS এ আপনি iOS এবং Android উভয়ই চালাতে পারেন। আপনি অবশ্যই MacOS-এ Android Studio এবং Genymotion ইনস্টল করতে পারেন। এই সম্ভাবনাটি একটি পিসিতে বিদ্যমান নেই যেখানে আপনি শুধুমাত্র অ্যান্ড্রয়েড এমুলেটর চালাতে পারেন কিন্তু একটি iOS এমুলেটর নয়। তাই আপনি ভাগ্যবান? আপনার যদি MacOS থাকে — উপভোগ করুন?.

সুতরাং এখন আমাদের কাছে একটি প্রতিক্রিয়া নেটিভ অ্যাপ তৈরি করার পরিবেশ রয়েছে এবং আমরা সবকিছু ইনস্টল করেছি, তবে প্রতিক্রিয়া নেটিভ কোডটি কীভাবে লেখা হয়? এটা খুবই সহজ:আপনি আসলে Reactjs কোড লিখবেন।

React Native-এর সাথে কিছু অনুশীলন পেতে আপনি অফিসিয়াল গাইড দেখতে পারেন। আমি "নেটিভ ইউটিউব প্রতিরূপ প্রতিক্রিয়া" শুরু করার জন্য এই দুর্দান্ত নিবন্ধটি সুপারিশ করি৷ এটি আপনাকে আপনার প্রথম প্রতিক্রিয়া নেটিভ অ্যাপ তৈরি করতে ধাপে ধাপে গাইড করবে।

কি দারুন! এখন পর্যন্ত আপনি ভাল আছেন এবং আপনি প্রতিক্রিয়া-নেটিভ কোডিং করছেন। ? কিন্তু আপনাকে আপনার ত্রুটিগুলি পরীক্ষা এবং ডিবাগ করতে হবে এবং আপনার কোডের লগগুলি দেখতে হবে৷ হ্যাঁ লগ!! তাই আমাদের একটির প্রয়োজন dইবাগার! আপনি কীভাবে প্রতিক্রিয়া নেটিভ দিয়ে ডিবাগ করবেন?

ডিবাগিং প্রতিক্রিয়া-নেটিভ

আপনার কোড ডিবাগ করা খুবই গুরুত্বপূর্ণ, শুধুমাত্র রিঅ্যাক্ট নেটিভের সাথে নয় অন্য কোন প্রোগ্রামিং ভাষার সাথে। তাই আপনার প্রতিক্রিয়া নেটিভ কোডে, আপনাকে কী ঘটছে তা জানতে হবে। রিঅ্যাক্ট নেটিভ অ্যাপ ডিবাগ করার বিভিন্ন উপায় আছে যেমন:

Chrome devtools দিয়ে ডিবাগ করুন

React Native আপনাকে আপনার অ্যাপের লগ দেখতে Chrome devtools ব্যবহার করার বিকল্প দেয়। Chrome এর সাথে ডিবাগ করতে এবং আপনার এমুলেটরে ডিবাগিং মোড সক্ষম করতে, কীবোর্ডে শুধু Ctrl+ m ক্লিক করুন .

এই স্ক্রীন পপ-আপ হবে:

এবং তারপর Debug Js Remotely বেছে নিন . এটি Google Chrome-এ এই ঠিকানা https://localhost:8081/debugger-ui/ সহ একটি ট্যাব খুলবে৷ . এটি Chrome devtools ব্যবহার করার জন্য, অন্যান্য বিকল্পের কী হবে?

প্রতিক্রিয়া-নেটিভ-ডিবাগার ব্যবহার করা

প্রতিক্রিয়া নেটিভ কোড ডিবাগ করার জন্য প্রতিক্রিয়া-নেটিভ-ডিবাগার একটি দুর্দান্ত সরঞ্জাম। এটি একটি ডেস্কটপ অ্যাপ্লিকেশন যা আপনাকে অনেক সুবিধা দেয়। এটি Redux devtools এবং React-devtools ইন্টিগ্রেশনের সাথে আসে। আপনি শৈলীটিও ডিবাগ করতে পারেন। এটি প্রকৃতপক্ষে প্রতিক্রিয়া নেটিভের জন্য সেরা ডিবাগার এবং এটিই আমি ব্যবহার করি। সাধারণত এটি MacOS, Windows এবং Linux-এ উপলব্ধ। ইনস্টলেশন এবং ইন্টিগ্রেশন গাইড দেখুন।

আমি মনে করি এই মুহুর্তে এটি যথেষ্ট। এটি হল রিঅ্যাক্ট নেটিভ সহ মোবাইল অ্যাপ তৈরির জন্য পরম গাইডের প্রথম অংশ। পরবর্তী অংশে আমরা আরও প্রযুক্তিগত টিপস এবং সমস্যাগুলিতে ডুব দিতে যাচ্ছি যেমন আমরা কীভাবে নেটিভ উপাদানগুলি ব্যবহার করতে পারি, প্রতিক্রিয়া নেটিভ এপিআই, অন্যান্য লাইব্রেরির সাথে একীকরণ, Redux , GraphQL এবং এই জাতীয় জিনিসগুলি। তাই পরবর্তী অংশ বের হলে সাথে থাকার জন্য এই মেইল-লিস্টে সাবস্ক্রাইব করুন। সময় দেয়ার জন্য ধন্যবাদ. ?

আপনি সবসময় আমাকে টুইটারে খুঁজে পেতে পারেন?