= 30 منٹ میں AWS کے ساتھ آپ کے رد عمل کی درخواست کی میزبانی کرنا =
یہ ٹیوٹوریل بہت زیادہ امیج ہے اور مکمل ابتدائیوں کے لیے ہدف ہے۔ یہ بتاتا ہے کہ آپ کس طرح ایک مکمل اجازت کے نظام کے ساتھ ویب سائٹ پر اپنی React ایپلیکیشن کی میزبانی کر سکتے ہیں۔ یہ موبائل ہب CLI (کمانڈ لائن انٹرفیس) کے ذریعے AWS MobileHub کی طاقت کا مطالبہ کرتا ہے۔ ٹیوٹوریل کے لیے AWS سروسز کے ساتھ کسی مہارت کی ضرورت نہیں ہے اور یہ آپ کو ایک React بوائلر پلیٹ ایپلیکیشن سیٹ اپ کرنے کے لیے بھی دکھائے گا۔
اگر آپ کے پاس پہلے سے ہی ایک React ایپلیکیشن ہے،
**آپ سیکشن 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 (کمانڈ لائن انٹرفیس) انسٹال کریں** ** اس کورس کے لیے ہم فیس بک کی جانب سے رکھی ہوئی بوائلر پلیٹ استعمال کریں گے، React کے تخلیق کار ** آپ کی پسند کا ایک ایڈیٹر
- میں بصری اسٹوڈیو کوڈ کے ساتھ شروع کرنے کا مشورہ دیتا ہوں، ایک انتہائی قابل ترمیم ہلکا پھلکا ایڈیٹر جو زیادہ تر پروگرامنگ زبانوں اور فریم ورک کو چلا سکتا ہے۔
پرو ٹپ: VS کوڈ کے انسٹال کرنے کے عمل میں، یقینی بنائیں کہ اس باکس کو چیک کریں جو اسے آپ کے ماحول کے راستے کے ناموں میں شامل کرتا ہے۔ یہ آپ کو ٹرمینل سے VS کوڈ کھولنے تک رسائی فراہم کرتا ہے کوڈ میں آرام دہ ہوں۔
- زیادہ تر ڈویلپرز کو اپنے کمپیوٹر پر Git انسٹال کرنا چاہئے۔ یہ آپ کو گٹ باش تک رسائی فراہم کرتا ہے جو کہ بہت سے ڈویلپرز جانے والے ٹرمینل ہیں۔
چلو شروع کریں!
**1۔ React ایپلیکیشن بنائیں اور ٹرمینل کے ذریعے پروجیکٹ فولڈر میں داخل ہوں**
ٹرمینل درج کریں اور اپنے فولڈر کا پتہ لگائیں جہاں آپ ایپلی کیشنز کو اسٹور کرتے ہیں۔ میں âÃÂÃÂdevâÃÂàنامی فولڈر تجویز کرتا ہوں۔
npx create-react-app پروجیکٹ کا نام&& سی ڈی پروجیکٹ کا نام
یا
npm -g install create-react-app create-react-app پروجیکٹ کا نام
یہاں ہم بوائلر پلیٹ کی بنیاد پر ایک React ایپلی کیشن بناتے ہیں۔ âÃÂÃÂnpxâÃÂàایک نوڈ ٹول ہے جو ریموٹ پیکجوں پر کال کرنے کے لیے npm سرور استعمال کرتا ہے۔ دوسرا کوڈ کا ٹکڑا مقامی طور پر تخلیق ری ایکٹ ایپ کو انسٹال کرتا ہے۔
*npm -g install create-react-app* ** اور پھر ایپلیکیشن بناتا ہے۔ میں تجویز کرتا ہوں کہ npx کا استعمال ہمیشہ Create-react-app کے ساتھ اپ ٹو ڈیٹ رہیں اور پھر ایپلیکیشن تخلیق کریں۔ میری تجویز ہے کہ تخلیق-ردعمل-ایپ کے ساتھ ہمیشہ اپ ٹو ڈیٹ رہنے کے لیے npx استعمال کریں۔ **2۔ اپنے کمپیوٹر پر awsmobile CLI انسٹال کریں اور اسے پروجیکٹ میں چلائیں**
اس مقام سے، آپ کو اپنے کوڈ ایڈیٹر میں اپنی React ایپلیکیشن پر توجہ دینی چاہیے۔ اس میں فولڈرز جیسے کہ /awsmobile اور package.json فائل میں کچھ اضافے کیے جائیں گے۔
ٹرمینل ونڈو میں ٹائپ کریں۔
npm install -g awsmobile-cli
عالمی سطح پر awsmobile-cli انسٹال کرنے کے لیے۔ AWS Mobile Hub کنسول میں کچھ کام کرنے کے بعد ہم اسے استعمال کریں گے۔
یقینی بنائیں کہ آپ اپنے پروجیکٹ کے اندر ہیں اور ٹائپ کریں۔
awsmobile init
آپ کو سوالات کے ایک سیٹ کے ساتھ اشارہ کیا جاتا ہے، جس میں ڈیفالٹس اچھے ہوتے ہیں اس لیے ہر ترتیب کے ذریعے انٹر دبائیں جب تک کہ یہ آپ کے ڈیفالٹ براؤزر میں AWS خود بخود نہ کھل جائے۔ اپنے مفت ٹائر اکاؤنٹ کے ساتھ لاگ ان کریں اگر آپ نے پہلے سے نہیں کیا ہے۔
یہ awsmobile-cli کو یقین دلاتا ہے کہ ہم درست AWS اکاؤنٹ سے جڑے ہوئے ہیں۔ اپنے ٹرمینل پر واپس جائیں اور جاری رکھنے کے لیے Enter دبائیں۔
AWS کو ایپلیکیشن کو کنٹرول کرنے کے لیے صارف کو سیٹ اپ کرنے کی ضرورت ہے۔ یہ awsmobile-cli کے ذریعے خود بخود ہو جائے گا جب آپ انٹر دباتے رہیں گے۔
اسے مکمل کرنے کے بعد، آپ کو AWS IAM میں لے جایا جائے گا جہاں آپ صرف اگلا ¢ÃÂàمکمل ہونے تک اپنا راستہ دوسرے مرحلے میں اسے خود بخود âÃÂÃÂAdministrator AccessâÃÂàکو چیک کرنا چاہیے تھا جو صارف کو AWS کی تمام خصوصیات تک رسائی فراہم کرتا ہے جس کی ہمیں ضرورت ہے۔
جب ہو جائے تو، یہ بہت اہم ہے کہ آپ .csv فائل کو اپنی خفیہ اسناد کے ساتھ ڈاؤن لوڈ کریں کیونکہ وہ AWS میں صرف ایک بار دکھائی جائیں گی۔ یہ چابیاں آپ کے ٹرمینل ونڈو کے اگلے مراحل میں استعمال ہونے والی ہیں۔
یہ کامیابی کے ساتھ آپ کی AWS MobileHub ایپلیکیشن بناتا ہے اور خود بخود aws-amplify انسٹال کرتا ہے۔& aws-amplify-react اپنے مقامی React پروجیکٹ میں
جب یہ عمل مکمل ہو جائے (~1 منٹ) تو آپ ٹائپ کر سکتے ہیں۔
awsmobile کنسول
اپنے ڈیفالٹ براؤزر میں اپنی موبائل ہب ایپلیکیشن دیکھنے کے لیے۔ آپ مختلف کارروائیوں کی فہرست دیکھنے کے لیے âÃÂÃÂawsmobileâÃÂàبھی ٹائپ کر سکتے ہیں۔ یہاں سے، ہم براؤزر کے ساتھ Cognito لاگ ان کو شامل کریں گے، لیکن آپ اسے awsmobile CLI سے کر سکتے ہیں۔
**3۔ اصل میں کوگنیٹو سائن ان اور ہوسٹنگ شامل کرنا**
آخری مرحلے کے لیے، ہم AWS MobileHub کنسول کے ذریعے اپنے پروجیکٹ میں AWS Cognito شامل کریں گے۔ آپ ہوسٹنگ کو بھی چیک کر سکتے ہیں جو پہلے سے طے شدہ طور پر فعال ہے۔
ہوسٹنگ کی جانچ کرنے کے لیے، اپنے کنسول میں موجود فیچر پر کلک کریں اور اس URL پر کلک کریں جو آپ کو فراہم کیا گیا ہے۔ یہاں کا مواد AWS کی طرف سے ایک ٹیمپلیٹ ہے، لیکن آپ اسے جلد ہی React ایپلیکیشن کے ساتھ اوور رائٹ کر دیں گے۔
**کوگنیٹو یوزر سائن ان شامل کرنے کے لیے، âÃÂÃÂUser Sign-inâÃÂàتلاش کرنے کے لیے نیچے سکرول کریں اور اس پر کلک کریں۔ ** یہ ایک تصدیقی نظام کے ساتھ کوگنیٹو یوزر پولز کو قابل بناتا ہے۔ اپنے لاگ ان میں بطور صارف نام ای میل کو زبردستی بھیجنے کے لیے ای میل ایڈریس یا فون نمبر سے âÃÂÃÂEmailàکا استعمال کریں۔ یا آپ یوزر نیم استعمال کر سکتے ہیں اور âÃÂÃÂEmailâÃÂà+ âÃÂÃÂUsernameâà Âàصارف کو منتخب کرنے دیں۔ آپ کو کسی بھی طرح سے ای میل کے ذریعے تصدیقی کوڈ موصول ہوگا۔
ہم ای میل قبول کرتے ہیں کیونکہ AWS رجسٹریشن کے تصدیقی کوڈز ای میل پر بھیجنے کے لیے چارج نہیں لیتا، جبکہ SMS بھیجنے کے لیے اصل رقم خرچ ہوتی ہے۔
جس کے نتیجے میں:
اگر آپ Cognito میں Action >Edit پر کلک کرتے ہیں، تو آپ کو اپنے صارفین اور اعلیٰ حفاظتی خصوصیات کے انتظام کے لیے Cognito کنسول نظر آئے گا۔ اس مرحلے میں آپ نے جو کچھ سیٹ اپ کیا ہے وہ ناقابل واپسی ہے لیکن آپ ہمیشہ اپنے یوزر پول کو حذف کر کے ایک نیا بنا سکتے ہیں۔
یہ MobileHub کے اندر AWS Cognito کی ترتیب کو مکمل کرتا ہے۔ یہ کوڈ شامل کرنے کا وقت ہے۔ کتنا؟ 5 لائنیں! اور ان میں سے 3 صرف React میں امپورٹ ہیں۔
= اپنی ترتیبات کو React پروجیکٹ میں شامل کرنا اور اپنی ویب سائٹ پر شائع کرنا =
اپنے ٹرمینل میں، آپ کسی بھی وقت awsmobile pull یا awsmobile push کا استعمال کر سکتے ہیں بالترتیب AWS MobileHub Console سے اپنی تبدیلیوں کو اپنی درخواست میں کھینچ سکتے ہیں، یا ٹرمینل میں awsmobile CLI کے ذریعے ہونے والی اپنی مقامی تبدیلیوں کو آگے بڑھا سکتے ہیں۔
اس استعمال کے معاملے کے لیے ہم ان تبدیلیوں کو لانا چاہتے ہیں جو ہم نے کی ہیں۔ اپنے ٹرمینل پر واپس جائیں اور ٹائپ کریں۔
VS کوڈ میں واپس، آپ دیکھیں گے کہ آپ کے پروجیکٹ میں اب ترمیم کی گئی ہے۔ آپ اپنی مقامی کنفیگریشنز کو ./awsmobile/backend/mobile-hub-project.yml میں چیک کر سکتے ہیں۔
اس کے علاوہ، ./package.json میں آپ کو awsmobile init کے ذریعے شامل کی جانے والی دو نمایاں لائبریریاں ملیں گی جو ہم نے پہلے کی تھیں۔
اب ہم اپنی درخواست کو کوگنیٹو لاگ ان ونڈو میں لپیٹنے کے لیے ان کا استعمال کریں گے۔ ./src/index.js کھولیں اور اس میں ترمیم کریں:
اس کے لیے:
'رد عمل'سے رد عمل درآمد کریں؛
'react-dom'سے ReactDOM درآمد کریں؛
درآمد index.css'؛
ایپ سے ایپ درآمد کریں'؛
registerServiceWorker سے رجسٹر سروس ورکر درآمد کریں'؛
aws-exports سے 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:
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:
When this process is done, your hosted website automatically opens in your default browser:
**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
