এডাব্লুএস প্রশস্তকরণ এবং কৌণিক - এটি কীভাবে কাজ করে?

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

এই পোস্টে, আমরা একটি বেসিক কৌণিক অ্যাপ্লিকেশন তৈরি করি এবং এডাব্লুএস সম্পদ তৈরি করতে অ্যাডাব্লুএস এম্প্লিফাই ব্যবহার করে এম্প্লিফাই ফ্রন্ট-এন্ড এসডিকে কনফিগার করে এডাব্লুএস কগনিটোতে অনুমোদনের জন্য এটি সক্ষম করি।

এডাব্লুএস এমপ্লিফাই বর্তমানে নিম্নলিখিত বিভাগের এডাব্লুএস পরিষেবার সাথে কাজ করে:

দ্রষ্টব্য: এডাব্লুএস এম্প্লিফাইটি মডিউলাইজ করা হয়েছে যাতে আপনি কেবল প্রয়োজনীয় মডিউলটি আমদানি করতে পারেন (তবে, কোণগুলির সাথে> 6 সমস্যা ছিল Therefore তাই আমাকে পূর্ববর্তী "@" ছাড়াই প্যাকেজগুলি ব্যবহার করতে হয়েছিল I আমি এই নিবন্ধে এটি পরে বর্ণনা করেছি) নীচে তালিকাভুক্ত বিভিন্ন বিভাগের পাশে মডিউলগুলির এবং npm প্যাকেজের নাম।

  1. মূল - এনপিএম প্যাকেজ (@ অউজ-এমপ্লিফাই / কোর): আপনার নিম্নলিখিত ক্রিয়াকলাপগুলি ব্যবহারের জন্য পরিবর্ধকটি কনফিগার করতে এই মূল প্যাকেজটি দরকার।
  2. অ্যানালিটিক্স - এনপিএম প্যাকেজ (@ অ্যাউস-এমপ্লিফাই / বিশ্লেষণ)
  3. এপিআই - এনপিএম প্যাকেজ (@ অ্যাউস-এমপ্লিফাই / এপিআই)
  4. প্রমাণীকরণ (এডাব্লুএস কগনিটো) - এনপিএম প্যাকেজ (@ অউজ-এমপ্লিফাই / অউথ): এই পোস্টটি আপনার কৌণিক অ্যাপ্লিকেশনটিতে এটি ব্যবহার সম্পর্কে
  5. পারস্পরিক ক্রিয়ার
  6. পাবসব - এনপিএম প্যাকেজ (@ অউজ-এমপ্লিফাই / পাবসুব)
  7. রিলিজ
  8. সঞ্চয়স্থান - এনপিএম প্যাকেজ (@ অউজ-এমপ্লিফাই / স্টোরেজ)
  9. xr

এই নিবন্ধটি একটি কৌণিক অ্যাপ্লিকেশনটিতে অ্যাডাব্লুএস কগনিটো-ভিত্তিক প্রমাণীকরণ সক্ষম করতে আউস এমপ্লিফাই তৈরি এবং ব্যবহারের প্রক্রিয়াটি ব্যাখ্যা করে।

পূর্বশর্ত - পরিবর্ধন কনফিগারেশন সেট আপ এবং একটি নতুন কৌণিক অ্যাপ্লিকেশন শুরু:

আপনি শুরু করার আগে কয়েকটি প্রস্তুতিমূলক পদক্ষেপ:

  1. আপনার একটি AWS অ্যাকাউন্ট রয়েছে তা নিশ্চিত হয়ে নিন এবং AWS এবং অ্যাঙ্গুলারের বেসিকগুলি, পাশাপাশি তাদের বাস্তুসংস্থান এবং পরিভাষা সম্পর্কেও জানেন।
  2. আপনি এই পদ্ধতির জন্য ব্যবহার করবেন এমন AWS অ্যাকাউন্টের জন্য AWS প্রোফাইল সেটআপ দিয়ে আপনার সিস্টেমে AWS CLI কনফিগার করেছেন তা নিশ্চিত করুন।

এডাব্লুএস এমপ্লিফাই ক্লাইট ইনস্টল করুন এবং একটি নতুন কৌণিক অ্যাপ্লিকেশন তৈরি করুন:

  1. @ অ্যাউজ-এমপ্লিফাই / ক্লিপ ইনস্টল করুন
$ npm ইনস্টল করুন -g @ aws-amplify / cli

২. এডাব্লুএস এম্প্লিফাই সিএলআই ইনস্টল করা আছে কিনা তা যাচাই করুন

$ শক্তিশালী করা

৩. ইনস্টল করুন এবং আপনার সর্বশেষতম কৌণিক সিএলআই ইনস্টল করা আছে তা নিশ্চিত করুন

। npm ইনস্টল - সেভ @ কৌনিক / ক্লিপ $ এনজি সংস্করণ

4. একটি নতুন কোণ অ্যাপ্লিকেশন তৈরি করুন। (আমি আমার কৌণিক অ্যাপ্লিকেশনটিকে "কৌণিক লাভ" বলি Just একইটি নির্বাচন করুন))

angle ng নতুন কোণ-প্রশস্তকরণ

৫. আপনার নতুন নির্মিত অ্যাপ্লিকেশন ডিরেক্টরিতে পরিবর্তন করুন, স্টার্টার অ্যাপ্লিকেশনটি কাজ করে তা নিশ্চিত করার জন্য প্যাকেজটি ইনস্টল করুন এবং চালান

ইনস্টল করুন $ সিডি কৌণিক-প্রশস্ত $ npm $ npm শুরু

A. এডাব্লুএস এম্প্লিফাই সম্পর্কিত আপনার অ্যাঙ্গেল / ফ্রন্ট এন্ড অ্যাপ্লিকেশনটির জন্য অতিরিক্ত এনপিএম প্যাকেজ ইনস্টল করুন

  • aws-amplify - নিম্নলিখিত এনপিএম প্যাকেজটি প্রয়োজনীয়, অন্যথায় একটি ত্রুটি বার্তা আউটপুট
  • আউস-এম্প্লিফাই-কৌণিক - কৌণিক উপাদানগুলি প্রশস্ত করুন
  • @ aws-amplify / ui - ইউজার ইন্টারফেস - এম্প্লিফাই ডকুমেন্টেশনে তালিকাভুক্ত নয় এবং এডাব্লুএস বিষয়গুলির জন্য সিএসএস স্টাইল যুক্ত করতে ইউজার ইন্টারফেসের জন্য ইনস্টল করা আবশ্যক। কেবলমাত্র এই প্যাকেজটি ইনস্টল করলেই চলবে না। আপনাকে এঙ্গেল প্রজেক্টের স্টাইলস.এসএসএস ফাইলে নিম্নলিখিত বিষয় এবং সিএসএস ফাইলও আমদানি করতে হবে, যা এই পোস্টে পরে বর্ণিত হয়েছে।
  • @ আইম্পোর্ট "[email protected]/ui/src/Theme.css";
  • @ আইম্পোর্ট "[email protected]/ui/src/Angular.css";
pm এনপিএম ইনস্টল - সেভ অ্যাউজ-এমপ্লিফাই $ এনপিএম ইনস্টল - সেভ অ্যাউস-এম্প্লিফাই-কৌণিক $ এনপিএম ইনস্টল - সেভ @ অ্যাউজ-এম্প্লিফাই / ইউআই

সম্পর্কিত কনফিগারেশন ফাইল / ফোল্ডারগুলি সম্প্রসারিত করুন:

এই প্রকল্পের মূলে চলে, ডি। এইচ। / অ্যাঙ্গুলার-এম্প্লিফাই, নিম্নলিখিত আদেশ command

init প্রশস্তকরণ init

এবং তারপরে অনুরোধ করা হলে নিম্নলিখিত বিকল্পগুলি একের পর এক নির্বাচন করুন:

আমার নির্বাচন নীচে তালিকাভুক্ত করা হয়।

| => থিমকে শক্তিশালী করুন দ্রষ্টব্য: আপনার অ্যাপের মূল ডিরেক্টরিতে এই আদেশটি কার্যকর করার পরামর্শ দেওয়া হচ্ছে? আপনার ডিফল্ট সম্পাদক চয়ন করুন: ভিজ্যুয়াল স্টুডিও কোড? আপনি যে অ্যাপ্লিকেশনটির জন্য জাভাস্ক্রিপ্ট তৈরি করছেন সেটি নির্বাচন করুন দয়া করে আপনার প্রকল্প সম্পর্কে বলুন? আপনি কোন জাভাস্ক্রিপ্ট কাঠামো ব্যবহার করেন? উত্স ডিরেক্টরি পাথ: src? বিতরণ ডিরেক্টরি পথ: ডিস্ট? বিল্ড কমান্ড: এনপিএম বিল্ড? কমান্ড শুরু করুন: এনপিএম স্টার্ট স্ট্যান্ডার্ড প্রোভাইডার অ্যাজক্লাউডফরমেশন ব্যবহার করুন
এডাব্লুএস প্রোফাইলে আরও তথ্য পাওয়া যাবে: https://docs.aws.amazon.com/cli/latest/userguide/cli-m Multipleple-profiles.html
? আপনি কি AWS প্রোফাইল ব্যবহার করতে চান? হ্যাঁ? আপনি যে প্রোফাইলটি ডিফল্টরূপে ব্যবহার করতে চান তা নির্বাচন করুন the ক্লাউডে প্রকল্প শুরু করা ...

এটি এক্সটেনশনের জন্য কনফিগারেশন ফাইল এবং ডিরেক্টরিগুলির নিম্নলিখিত সেট তৈরি করা উচিত:

| _প্রতিবন্ধ / / _ # বর্তমান-মেঘ-ব্যাকএন্ড / | _ প্রশস্তকরণ-মেটা.জসন | _ .কনফিগ | _আউজ-তথ্য.জসন | _ প্রকল্প-কনফিগার.জসন | _ ব্যাকএন্ড / | _amplify-meta.json | _.amplifyrc

উপরের ফাইল / ডিরেক্টরি এবং তাদের উদ্দেশ্যে ব্যবহারের বিশদটি এই লিঙ্কটিতে রয়েছে। অ্যাডাব্লুএস জাভাস্ক্রিপ্টের ব্যবহার বাড়িয়ে দিচ্ছে।

পরিভাষাটি বোঝার জন্য, আপনার এডাব্লুএস এবং সম্পর্কিত পরিভাষা এবং পরিষেবাদির একটি প্রাথমিক ধারণা থাকা উচিত।

আমরা যে কৌণিক অ্যাপ্লিকেশনটি তৈরি করেছি তাতে প্রাথমিকভাবে কেবলমাত্র ডাব্লুএস আথ বা এডাব্লুএস কগনিটো পরিষেবা ব্যবহৃত হয়। সুতরাং আসুন এডাব্লুএস কগনিটোর জন্য মেঘ গঠন স্ট্যাক টেম্পলেট তৈরি করা যাক।

add যোগ লেখক প্রশস্ত করুন

এটি আপনার প্রকল্পের মাস্টের প্রশস্তকরণ / ব্যাকএন্ড ডিরেক্টরিতে "auth / cognitoxxxxxxxx" ডিরেক্টরি তৈরি করতে হবে। এই ডিরেক্টরিতে কগনিটো মেঘ এবং একটি পরামিতি JSON ফাইল গঠনের জন্য একটি নতুন উত্পন্ন স্ক্রিপ্ট থাকা উচিত।

এমপ্লিফাই ক্লাইমে উত্পাদিত স্থানীয় মেঘ গঠনের স্ক্রিপ্টগুলি ব্যবহার করে এখন আমরা আসল এডাব্লুএস সংস্থান তৈরি করছি। সংস্থানগুলি তৈরি করতে নিম্নলিখিত কমান্ডটি ব্যবহার করুন।

push পুশ শক্তিশালী করা
| বিভাগ | সংস্থান নাম | অপারেশন | সরবরাহকারী প্লাগইন | | -------- | --------------- | --------- | ----------------- | | আথ | cognitoa67f309a | তৈরি করুন | awscloudformation | ? আপনি কি নিশ্চিত যে আপনি চালিয়ে যেতে চান? (ওয়াই / এন)

উপরে "Y" লিখুন। কয়েক মিনিটের পরে, AWS উত্স তৈরি হয় এবং ফোল্ডারে "aws_export.js" একটি কনফিগারেশন ফাইল তৈরি করা হয় / src তৈরি হয়েছে।

আমরা আমাদের নতুন তৈরি AWS সংস্থান সম্পর্কে তথ্য সহ এই উত্পন্ন কনফিগারেশন ফাইলটি ব্যবহার করব আমাদের কৌণিক অ্যাপ্লিকেশনের পরবর্তী এডাব্লুএস প্রসারিত ফ্রন্ট-এন্ড এসডিকে কনফিগার করতে।

এখন কৌণিক অ্যাপ্লিকেশন এ স্যুইচ করুন:

আপনি উপরের থেকে তৈরি "src" ডিরেক্টরিতে "aws-برآمد.js" ফাইলের একটি অনুলিপি তৈরি করুন।

p সিপি সিআরসি / আউজ-এক্সপোর্টস.এসএসসিআর / আউস-এক্সপোর্টস.টি.

নিম্নলিখিত কোণ CLI দিয়ে "auth" নামে একটি উপাদান তৈরি করুন

g এনজি জিসি অথথ সিআরসি / অ্যাপ্লিকেশন / লেখক / অ্যাথ.কম / বিভাগ / এসএসএস (0 বাইট) তৈরি করুন এসআরসি / অ্যাপ / অথ / অট ডট কমপিটুন.এইচটিএমএল (23 বাইট) তৈরি করুন এসআরসি / অ্যাপ / লেখক / অ্যাথ ডট কম / স্পেন.স্পেক। (14১৪ বাইট) সিআরসি / অ্যাপ্লিকেশন / লেখক / অ্যাথ.কম.পোনেন্ট.টস (২2২ বাইট) আপডেট করুন সিআরসি / অ্যাপ / অ্যাপ.মডিউল.টস (৪77 বাইট)

একইভাবে, একটি "হোম" এবং একটি "নিরাপদ" উপাদান তৈরি করুন

বাড়ির উপাদান তৈরি করতে নিম্নলিখিত কমান্ডটি ব্যবহার করুন।

। এনজি জিসি হোম সিআরসি / অ্যাপ্লিকেশন / হোম / হোম ডটকমেন্টস.এসএসএস (0 বাইটস) তৈরি করুন সিআরসি / অ্যাপ / হোম / হোম ডটকমপিএনটিএইচটিএমএল (23 বাইটস) তৈরি করুন সিআরসি / অ্যাপ / হোম / হোম ডটকমেন্ট.স্পেক। ts (614 বাইট) ক্রিয়েট এসসিআর / অ্যাপ / হোম / হোম ডটকম্পোন্টস.স (262 বাইট) আপডেট সিআরসি / অ্যাপ / অ্যাপ.মডিউল.টস (541 বাইট)

"নিরাপদ" উপাদান তৈরি করতে নিম্নলিখিত কমান্ডটি ব্যবহার করুন।

RE এনজি গিসি ক্রিয়েট এসসিআর / অ্যাপ্লিকেশন / সুরক্ষিত / নিরাপদ.কম্পোন.এসএসএস (0 বাইটস) তৈরি করুন এসআরসি / অ্যাপ্লিকেশন / সুরক্ষিত / নিরাপদ.কম্পটেনটিএইচটিএমএল (25 বাইটস) তৈরি করুন সিআরসি / অ্যাপ্লিকেশন / সুরক্ষিত / সুরক্ষা.কম / স্পট। (8২৮ বাইট) সিআরসি / অ্যাপ্লিকেশন / সুরক্ষিত / নিরাপদ.কম্পোনেন্টস.স (২ by০ বাইট) আপডেট করুন সিআরসি / অ্যাপ / অ্যাপ.মডিউল.টস (23২৩ বাইট)

এই মুহুর্তে আমরা আমাদের AWS পরিবর্ধন কনফিগারেশন ফাইল তৈরি করেছি। আমাদের কাছে উপাদানগুলির সাথে একটি বেসিক অ্যাপ্লিকেশন কনফিগারেশন রয়েছে: "লেখক", "হোম" এবং "সুরক্ষিত"।

আমাদের সাধারণ বর্গক্ষেত্র ডেমো অ্যাপ্লিকেশনটির জন্য আমাদের অ্যাপ্লিকেশন url সেটআপ। এখানে বিশেষ কিছু নেই।

/ - "হোম" উপাদান / পৃষ্ঠা লোড করে (মানক / মূল পৃষ্ঠা)

/ auth - লেখক উপাদান / পৃষ্ঠা লোড করে

/ সুরক্ষিত - আপনি লগ ইন হয়ে গেলে, নিরাপদ উপাদান / পৃষ্ঠাটি লোড হয় বা / এথেকে পুনঃনির্দেশিত হয়। সফল নিবন্ধকরণের পরে, একটি উপাদান / পৃষ্ঠা কল করা হবে

কোণ প্রয়োগ প্রয়োগ করে কিনা তা পরীক্ষা করুন:

। npm শুরু

অ্যাডাব্লুএস এম্প্লিফাই এসডিকে ব্যবহার করতে কৌণিক অ্যাপ্লিকেশনটি কনফিগার করুন:

আপনার আউজ-এক্সপোর্ট.জেএস ফাইলের উপর ভিত্তি করে আপনার "আউজ-এক্সপোর্ট.এস্ট" ফাইলটি দেখতে দেখতে নিশ্চিত করুন:

এক্সট্রা কনট আউসোমোবাইল = {'আউজ_প্রজেক্ট_গ্রেইন': 'ইউএস-ইস্ট -1', 'অ্যাউস-কগনিটো_সিটিটিটি_পুল_আইডি': 'ইউএস-ইস্ট -১: এক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্স: ইউএস-ইস্টইউড'স_' 'ইউএস-ইস্ট -১_এক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্স', 'আউজ_উজার_পুলস_উইব_ক্লিয়েন্ট_আইডি': 'XXXXXXXXXXXXXXXXXXXXXXX'};

আপনার অ্যাপ্লিকেশনটির জন্য এমপ্লিফাই কনফিগার করতে নিম্নলিখিত কোড যুক্ত করতে মূল.টগুলি সংশোধন করুন:

'আউস-এমপ্লিফাই' থেকে আমদানি করুন; './aws-export' থেকে awsamplify হিসাবে আমদানি করুন; এমপ্লিফাই.কম কনফিগার (awsamplify.awsmobile);

এখন আবার আপনার অ্যাপ্লিকেশন চালান:

। npm শুরু

এখানে কিছু বাফারিং এবং স্ট্রিমিং সমস্যা থাকতে পারে, যেমন।

নোড_মডিউলস / অ্যাউএসডিডি / ক্লায়েন্ট / এসএম.ডি.টিস (133,37) এ ত্রুটি: ত্রুটি টিএস 2580: "বাফার" নামটি পাওয়া যায় নি। আপনার কি নোড ধরণের সংজ্ঞা ইনস্টল করতে হবে? `N pm আমি @ প্রকার / নোড` চেষ্টা করে দেখুন` ....

যদি আপনি উপরের ত্রুটি বার্তাটি পান তবে দয়া করে নীচের লিঙ্কটি দেখুন:

উপরের ডকুমেন্ট অনুসারে উপরের সমস্যাটি কীভাবে সমাধান করবেন:

"এই সমস্যাগুলি সমাধানের জন্য, হয়" প্রকার ": [" নোড "] প্রকল্পের tsconfig.app.json ফাইলটিতে যুক্ত করুন, বা" প্রকার "ক্ষেত্র পুরোপুরি সরিয়ে দিন"

নীচে থেকে tsconfig.app.json পরিবর্তন করতে:

extended "প্রসারিত": "../tsconfig.json", "সংকলক অপশন": out "আউটডির": "../out-tsc/app", "প্রকার": []}, "বাদ দিন": ["পরীক্ষা"। ts ", ** / *। spec.ts]}

করুন:

extended "প্রসারিত": "../tsconfig.json", "সংকলক অপশন": out "আউটডির": "../out-tsc/app", // "প্রকার": ["নোড"]}, "বাদ দিন" : ["test.ts", ** / *। spec.ts]}

কোণ প্রয়োগটি পুনরায় আরম্ভ করতে নীচের কমান্ডটি চালান এবং আপনার আঙ্গুলের অ্যাপ্লিকেশনটি সঠিকভাবে কাজ করছে কিনা তা নিশ্চিত করতে http: // লোকালহস্ট: 4200 / এ যান।

। npm শুরু

যদি আপনার অ্যাপ্লিকেশনটির মূল পৃষ্ঠাটি ফাঁকা হয় বা আপনি যখন কনসোলটি ডান ক্লিক করেন এবং পরীক্ষা করেন নীচের ত্রুটিটি দেখতে পান:

অবজ্ঞাত রেফারেন্স এরিয়ার: গ্লোবালটি অবজেক্ট .. / নোড_মডিউলস / বাফার / ইনডেক্স.জেএস (ইনডেক্স.জেএস: 43) এ __webpack_require__ (বুটস্ট্র্যাপ: 78) এ অবজেক্ট .. / নোড_মডিউলস / অ্যাডস-এসডিকে / লিব / ব্রাউজারহ্যাশ ইউটিলেস.জেএস এ সংজ্ঞায়িত করা হয়নি global (ব্রাউজারহ্যাশটিলস.জেএস: ১) অবজেক্ট .. / নোড_মডিউলস / অ্যাডস-এসডিকে / লিব / ব্রাউজারহ্যাম্যাক.জেএস (ব্রাউজারহ্যামস.জেএস: ১) এ অবজেক্টস / নোডে .. / aws-sdk / lib / browserCryptoLib.js (browserCryptoLib.js: 1) at __webpack_require__ (বুটস্ট্র্যাপ: 78) অবজেক্টে ../ নোড_মডিউলস / অ্যাডস-এসডিকে / লিব / ব্রাউজার_লডার.জেএস (ব্রাউজার_লোডার.জেএসবি: 4) এ__ বুটস্ট্র্যাপ: 78)

এর আগে সূচি html যোগ করুন উপরের সমস্যাটি সমাধান করতে নিম্নলিখিত কোড যুক্ত করুন