= 30 মিনিটের মধ্যে AWS এর সাথে আপনার প্রতিক্রিয়া অ্যাপ্লিকেশন হোস্ট করা =

এই টিউটোরিয়ালটি খুব ইমেজ ভারী এবং সম্পূর্ণ নতুনদের দিকে লক্ষ্য করে। এটি ব্যাখ্যা করে কিভাবে আপনি একটি সম্পূর্ণ অনুমোদন ব্যবস্থা সহ একটি ওয়েবসাইটে আপনার প্রতিক্রিয়া অ্যাপ্লিকেশন হোস্ট করতে পারেন। এটি মোবাইলহাব সিএলআই (কমান্ড লাইন ইন্টারফেস) এর মাধ্যমে AWS MobileHub-এর শক্তিকে আহ্বান করে। টিউটোরিয়ালটিতে AWS পরিষেবাগুলির সাথে কোনও দক্ষতার প্রয়োজন নেই এবং এটি আপনাকে একটি প্রতিক্রিয়া বয়লারপ্লেট অ্যাপ্লিকেশন সেট আপ করতেও দেখাবে৷

আপনার যদি ইতিমধ্যে একটি প্রতিক্রিয়া অ্যাপ্লিকেশন থাকে,

**আপনি বিভাগ 2 এ যেতে পারেন যেখানে আমরা awsmobile-cli ইনস্টল করি এবং এটি আমাদের অ্যাপ্লিকেশনে যোগ করি

= আমরা শুরু করার আগে আপনার কম্পিউটারে সেট আপ করা কিছু জিনিস দরকার =

**নোড 8.x পরিবেশ আপনার কম্পিউটারে ইনস্টল করা হয়েছে**

- এটি জাভাস্ক্রিপ্ট অ্যাপ্লিকেশন সার্ভারের জন্য রানটাইম পরিবেশ। এটি নোড প্যাকেজ ম্যানেজার (NPM) এর সাথে অনুসরণ করে।

- NPM নোড প্যাকেজ ইনস্টল করতে ব্যবহৃত হয় যেমন React, AWS Amplify, একটি AWS-JS সংযোগকারী প্যাকেজ এবং এটি মূলত এটি।

- httpsnodejs.org/en/download/

**একটি AWS ফ্রি টিয়ার অ্যাকাউন্ট

- আপনি ফ্রি টিয়ারের মাধ্যমে AWS পরিষেবাগুলিতে বিনামূল্যে অ্যাক্সেস পান৷ এই টিউটোরিয়ালের জন্য, এটি যথেষ্ট বেশি হওয়া উচিত। যাইহোক, মনে রাখবেন যে প্রতিটি পরিষেবা প্রতি মাসে ব্যবহারের একটি সীমা থাকে এবং এর জন্য আপনার প্রকৃত অর্থ ব্যয় হতে পারে।

- httpsaws.amazon.com/free/

**আপনার কনসোল থেকে সরাসরি AWS পরিষেবাগুলিতে কল করার জন্য AWS CLI (কমান্ড লাইন ইন্টারফেস) ইনস্টল করুন** **এই কোর্সের জন্য আমরা ফেসবুক থেকে রক্ষণাবেক্ষণ করা বয়লারপ্লেট ব্যবহার করব, প্রতিক্রিয়ার নির্মাতারা **আপনার পছন্দের একজন সম্পাদক

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

প্রো টিপ: VS কোডের ইনস্টল করার প্রক্রিয়ায়, আপনার পরিবেশের পথের নামের সাথে এটি যোগ করে এমন বাক্সটি চেক করুন। এটি আপনাকে টার্মিনাল থেকে VS কোড খুলতে অ্যাক্সেস দেয় কোড আরামদায়ক

- বেশিরভাগ বিকাশকারীদের তাদের কম্পিউটারে গিট ইনস্টল করা উচিত। এটি আপনাকে Git Bash-এ অ্যাক্সেস দেয় যা অনেক ডেভেলপাররা টার্মিনালে যায়।

চল শুরু করি!

**1। প্রতিক্রিয়া অ্যাপ্লিকেশন তৈরি করুন এবং টার্মিনালের মাধ্যমে প্রকল্প ফোল্ডারে প্রবেশ করুন**

টার্মিনালে প্রবেশ করুন এবং আপনার ফোল্ডারটি সনাক্ত করুন যেখানে আপনি অ্যাপ্লিকেশনগুলি সংরক্ষণ করেন৷ আমি âÃÂÃÂdevâÃÂàনামে একটি ফোল্ডার সাজেস্ট করছি।

npx create-react-app প্রকল্পের নাম&& সিডি প্রকল্প-নাম

বা
npm -g install create-react-app create-react-app প্রকল্পের নাম

এখানে আমরা বয়লারপ্লেটের উপর ভিত্তি করে একটি প্রতিক্রিয়া অ্যাপ্লিকেশন তৈরি করি। একটি নোড টুল যা দূরবর্তী প্যাকেজ কল করার জন্য npm সার্ভার ব্যবহার করে। দ্বিতীয় কোড স্নিপেট স্থানীয়ভাবে তৈরি-প্রতিক্রিয়া-অ্যাপ ইনস্টল করে

*npm -g ক্রিয়েট-রিঅ্যাক্ট-অ্যাপ ইনস্টল করুন* **এবং তারপরে অ্যাপ্লিকেশন তৈরি করে। আমি ক্রিয়েট-রিঅ্যাক্ট-অ্যাপ-এর সাথে সর্বদা আপ-টু-ডেট থাকার জন্য npx ব্যবহার করার পরামর্শ দিই এবং তারপরে অ্যাপ্লিকেশন তৈরি করে। আমি ক্রিয়েট-রিঅ্যাক্ট-অ্যাপের সাথে সর্বদা আপ-টু-ডেট থাকার জন্য npx ব্যবহার করার পরামর্শ দিই। **2। আপনার কম্পিউটারে awsmobile CLI ইনস্টল করুন এবং এটি প্রকল্পে চালান**

এই মুহুর্তে, আপনার কোড এডিটরে আপনার প্রতিক্রিয়া অ্যাপ্লিকেশনের দিকে মনোযোগ দেওয়া উচিত। সেখানে /awsmobile এর মতো ফোল্ডার এবং package.json ফাইলে কিছু সংযোজন করা হবে।

একটি টার্মিনাল উইন্ডোতে, টাইপ করুন

npm install -g awsmobile-cli

বিশ্বব্যাপী awsmobile-cli ইনস্টল করতে। AWS মোবাইল হাব কনসোলে কিছু কাজ করার পরে আমরা এটি ব্যবহার করব৷

নিশ্চিত করুন যে আপনি আপনার প্রকল্পের ভিতরে আছেন এবং টাইপ করুন

awsmobile init

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

![ ](httpsmiro.medium.com/max/1360/1*fqDYITZ3T-JAVMf0TwH7-A.png)

এটি awsmobile-cli-কে নিশ্চিত করে যে আমরা সঠিক AWS অ্যাকাউন্টের সাথে সংযুক্ত। আপনার টার্মিনালে ফিরে যান এবং চালিয়ে যেতে এন্টার টিপুন।

অ্যাপ্লিকেশন নিয়ন্ত্রণ করার জন্য AWS-কে একজন ব্যবহারকারী সেটআপ করতে হবে। আপনি এন্টার টিপতে থাকলে এটি স্বয়ংক্রিয়ভাবে awsmobile-cli দ্বারা সম্পন্ন হবে।

![ ](httpsmiro.medium.com/max/1122/1*mUD3gl1bsrU03MKg4CZj9Q.png)

এটি সম্পূর্ণ করার পরে, আপনাকে AWS IAM-এ নিয়ে যাওয়া হবে যেখানে আপনি কেবলমাত্র পরবর্তী ¢ÃÂàসম্পূর্ণতার মাধ্যমে আপনার পথ! দ্বিতীয় ধাপে এটি স্বয়ংক্রিয়ভাবে অ্যাডমিনিস্ট্রেটর অ্যাক্সেস চেক করা উচিত যা ব্যবহারকারীকে আমাদের প্রয়োজনীয় AWS-এর সমস্ত বৈশিষ্ট্যগুলিতে অ্যাক্সেস দেয়৷

![ ](httpsmiro.medium.com/max/1400/1*clWJ77BP4-1LcgqmBVnVdQ.png)

হয়ে গেলে, এটি অত্যন্ত গুরুত্বপূর্ণ যে আপনি আপনার গোপন শংসাপত্র সহ .csv ফাইলটি ডাউনলোড করুন কারণ সেগুলি শুধুমাত্র একবার AWS-এ প্রদর্শিত হবে৷ এই কীগুলি আপনার টার্মিনাল উইন্ডোর পরবর্তী ধাপে ব্যবহার করা হবে।

![ ](httpsmiro.medium.com/max/1400/1*eduJiN7QBTezz8y3vVrjkg.png)

![ ](httpsmiro.medium.com/max/1004/1*-gK1PXA0XNjFmWoOer8xgw.png)


এটি সফলভাবে আপনার AWS MobileHub অ্যাপ্লিকেশন তৈরি করে এবং স্বয়ংক্রিয়ভাবে aws-amplify ইনস্টল করে& aws-amplify-আপনার স্থানীয় প্রতিক্রিয়া প্রকল্পে প্রতিক্রিয়া জানান

![ ](httpsmiro.medium.com/max/1224/1*z8xlOVoTSYNKvtOiPsyb1w.png)

এই প্রক্রিয়াটি সম্পন্ন হলে (~1 মিনিট) আপনি টাইপ করতে পারেন

awsmobile কনসোল

আপনার ডিফল্ট ব্রাউজারে আপনার মোবাইল হাব অ্যাপ্লিকেশন দেখতে। এছাড়াও আপনি বিভিন্ন কর্মের তালিকা দেখতে âÃÂÃÂawsmobileâÃÂàটাইপ করতে পারেন। এখান থেকে, আমরা ব্রাউজার দিয়ে কগনিটো লগইন যোগ করব, কিন্তু আপনি এটি awsmobile CLI থেকে করতে পারেন৷

**3। আসলে কগনিটো সাইন-ইন এবং হোস্টিং যোগ করা হচ্ছে**

শেষ ধাপের জন্য, আমরা AWS MobileHub কনসোলের মাধ্যমে আমাদের প্রজেক্টে AWS Cognito যোগ করব। আপনি ইতিমধ্যেই ডিফল্টরূপে সক্রিয় হোস্টিং পরীক্ষা করতে পারেন।

![ ](httpsmiro.medium.com/max/1400/1*qs_KoX4Qn4QXJfXqMCZ7tA.png)

হোস্টিং পরীক্ষা করতে, আপনার কনসোলের বৈশিষ্ট্যটিতে ক্লিক করুন এবং আপনাকে যে URLটি প্রদান করা হয়েছে সেটিতে ক্লিক করুন৷ এখানে সামগ্রীটি AWS-এর একটি টেমপ্লেট, কিন্তু আপনি শীঘ্রই প্রতিক্রিয়া অ্যাপ্লিকেশনের মাধ্যমে এটিকে ওভাররাইট করবেন৷

**কগনিটো ব্যবহারকারী সাইন-ইন যোগ করতে, âÃÂàব্যবহারকারী সাইন-ইন âÃÂàখুঁজতে নিচে স্ক্রোল করুন এবং এটিতে ক্লিক করুন। **এটি একটি প্রমাণীকরণ সিস্টেম সহ কগনিটো ব্যবহারকারী পুল সক্ষম করে। আপনার লগইনে ইউজারনেম হিসেবে জোর করে ইমেল পাঠাতে ইমেল ঠিকানা বা ফোন নম্বর থেকে âÃÂÃÂEmailâÃÂàব্যবহার করুন। অথবা আপনি ব্যবহারকারীর নাম ব্যবহার করতে পারেন এবং âÃÂÃÂEmailâÃÂà+ âÃÂÃÂUsernameâà সক্ষম করতে পারেন Âàব্যবহারকারীকে বেছে নিতে দিতে। আপনি যেকোনো উপায়ে ইমেলের মাধ্যমে নিশ্চিতকরণ কোড পাবেন৷

আমরা ইমেল গ্রহণ করি কারণ AWS ইমেলে নিবন্ধীকরণ নিশ্চিতকরণ কোড পাঠানোর জন্য কোনো চার্জ নেয় না, যদিও SMS পাঠাতে প্রকৃত অর্থ খরচ হয়।

![ ](httpsmiro.medium.com/max/1322/1*4ozbhL2UjGXfwcXk9t-mmg.png)

যার ফলে:

![ ](httpsmiro.medium.com/max/1304/1*CCPIwYcPoehI2Bzzwj7BKA.png)

আপনি যদি Cognito-তে Action >Edit এ ক্লিক করেন, তাহলে আপনি আপনার ব্যবহারকারীদের এবং উন্নত নিরাপত্তা বৈশিষ্ট্যগুলি পরিচালনা করার জন্য Cognito কনসোল দেখতে পাবেন৷ এই ধাপে আপনার করা কিছু সেটআপ অ-প্রত্যাবর্তনযোগ্য কিন্তু আপনি সবসময় আপনার ব্যবহারকারী পুল মুছে ফেলতে পারেন এবং একটি নতুন তৈরি করতে পারেন।

এটি MobileHub-এর ভিতরে AWS Cognito-এর কনফিগারেশন সম্পূর্ণ করে। এখন কোড যোগ করার সময়। কত? 5 লাইন! এবং তাদের মধ্যে 3টি কেবলমাত্র প্রতিক্রিয়ায় আমদানি।

= প্রতিক্রিয়া প্রকল্পে আপনার সেটিংস যোগ করা এবং আপনার ওয়েবসাইটে প্রকাশ করা =


আপনার টার্মিনালে, আপনি যেকোনো সময়ে AWS MobileHub কনসোল থেকে আপনার অ্যাপ্লিকেশনে আপনার পরিবর্তনগুলিকে টেনে আনতে যথাক্রমে awsmobile পুল বা awsmobile push ব্যবহার করতে পারেন, অথবা টার্মিনালে awsmobile CLI এর মাধ্যমে আপনার স্থানীয় পরিবর্তনগুলিকে পুশ করতে পারেন৷

এই ব্যবহারের ক্ষেত্রে আমরা আমাদের করা পরিবর্তন আনতে চাই। আপনার টার্মিনালে ফিরে যান এবং টাইপ করুন

![ ](httpsmiro.medium.com/max/1394/1*zxtajVqajk5MtgNNHea7bg.png)

VS কোডে ফিরে, আপনি দেখতে পাবেন যে আপনার প্রকল্প এখন পরিবর্তন করা হয়েছে৷ আপনি ./awsmobile/backend/mobile-hub-project.yml-এ আপনার স্থানীয় কনফিগারেশন পরীক্ষা করতে পারেন

এছাড়াও, ./package.json-এ আপনি দুটি হাইলাইট করা লাইব্রেরি খুঁজে পাবেন যা আমরা আগে করেছিলাম।

![ ](httpsmiro.medium.com/max/928/1*0j1ZYd5Qgx3GIUEQ3QA80A.png)

আমরা এখন আমাদের অ্যাপ্লিকেশনটিকে একটি কগনিটো লগইন উইন্ডোতে মোড়ানোর জন্য এগুলি ব্যবহার করব৷ ./src/index.js খুলুন এবং এটি পরিবর্তন করুন:

![ ](httpsmiro.medium.com/max/1244/1*fnbXXDHYud2OC411jcja_w.png)

এর জন্য:

'প্রতিক্রিয়া'থেকে প্রতিক্রিয়া আমদানি করুন;

'react-dom'থেকে ReactDOM আমদানি করুন;

আমদানি index.css';

অ্যাপ থেকে অ্যাপ আমদানি করুন';

registerServiceWorker থেকে registerServiceWorker আমদানি করুন';

aws-রপ্তানি থেকে awsMobile আমদানি করুন';

'aws-amplify'থেকে Amplify আমদানি করুন;

"aws-amplify-react"Amplify.configure(awsMobile) থেকে { with Authenticator } আমদানি করুন;

const AppWithAuth = withAuthenticator(App)ReactDOM.render(('root

registerServiceWorker

And you’re done! Try to run your application from your terminal with

npm start

and see it be loaded into the browser with a sleek GUI created by AWS:

![ ](httpsmiro.medium.com/max/1216/1*9pmJHX6DTtFkhhXMtjEL4w.png)

From here you can register, login or reset users, and as an admin you can see the users who are registering.

**To add hosting simply go to your terminal and type

awsmobile publish

If you get this warning, abort the publish, run awsmobile pull and run awsmobile publish again:

![ ](httpsmiro.medium.com/max/1350/1*9vJAXhEKd4FVv121B4i9Uw.png)

When this process is done, your hosted website automatically opens in your default browser:

![ ](httpsmiro.medium.com/max/1400/1*TNAioGF6HyaebijhULw.png)

**There, you’re done

= Pitfalls in the process =

If the application says “No user pools”, make sure your MobileHub console has Sign-In activated, and that you’ve called awsmobile pull from your terminal. This updates the aws-exports.js file which is then added to Amplify.configure() in React. Also, remember to import that file!

**Further challenges** **Use the ** **aws-amplify authentication documentation ** **to add a signout button to your application

Hint: You’ll need to import Auth and call its signOut function.

import { Auth } from aws-amplify-react

**Add your custom domain name to the hosted website**This is done through CloudFront, which you can access in MobileHub “Hosting and Streaming”. Read the docs provided if you want assitance:

== Using Custom URLs for Files by Adding Alternate Domain Names (CNAMEs) - Amazon CloudFront ==

 Describes how to add an alternate domain name, known as a CNAME, to use your own domain name instead of the default… 

docs.aws.amazon.com

**Add Google Login**Delete your Cognito User Pool and add one with Facebook/Google providers. This can be a bit tricky as you need to get e.g. Google Web App Client ID from the google terminal to make this work. **Hope you enjoyed this very detailed introduction to AWS MobileHub. It’s a lot of fun once you get the hang of it, and creating a Serverless backend for your frontend project has never been as easy