20.07.27 - Apigee Edge ইন্টিগ্রেটেড পোর্টাল রিলিজ নোট

আপনি Apigee Edge-এর ডকুমেন্টেশন দেখছেন।
Apigee X ডকুমেন্টেশন .info- তে যান।

আগামী ২৭শে জুলাই, সোমবার, আমরা Apigee Edge ইন্টিগ্রেটেড পোর্টালের একটি নতুন সংস্করণ প্রকাশ করা শুরু করব।

নতুন বৈশিষ্ট্য এবং উন্নতি

এই অংশে বর্তমান সংস্করণের নতুন বৈশিষ্ট্য এবং উন্নয়নসমূহ বর্ণনা করা হয়েছে।

প্রবেশগম্যতা এবং প্রতিক্রিয়াশীলতার উন্নতি

এই রিলিজের জন্য বাস্তবায়িত অ্যাক্সেসিবিলিটি এবং রেসপন্সিভনেস-এর উন্নতিগুলো নিচে তালিকাভুক্ত করা হলো।

• কিবোর্ড নেভিগেশন: এখন কিবোর্ড ব্যবহার করে হেডার ও ফুটার নেভিগেশন বার, স্মার্টডকস সাইড নেভিগেশন, অ্যাপস তালিকা, অ্যাপ ভিউ এবং এপিআই কার্ড নেভিগেট করা সম্ভব।
  
• ফোকাস ব্যবস্থাপনা: হেডার নেভিগেশন বার এবং স্মার্টডকস সাইড নেভিগেশন ব্যবহার করে নেভিগেট করার সময়, কোনো নেভিগেশন অ্যাকশনের পর ফোকাস পৃষ্ঠার প্রথম <H1> এ চলে যায়।
• লাইভ রিজিয়ন: টেক্সচুয়াল ফিল্টারিংয়ের ফলে এপিআই (API)-এর তালিকায় যে পরিবর্তনগুলো আসে, তা এখন স্ক্রিন রিডার ব্যবহারকারী ব্যবহারকারীদের জানানো হয়।
• এইচটিএমএল হেডিং-এর অর্থগত ব্যবহার: এখন সমস্ত লেখা অর্থগতভাবে উপযুক্ত এইচটিএমএল ট্যাগের মধ্যে রাখা হয়েছে। এখন পুরো পোর্টাল জুড়ে একটি যথাযথ শ্রেণিবিন্যাসগত হেডিং কাঠামো ব্যবহার করা হয়েছে।
• <H1>-এর একক ব্যবহার : এখন প্রতিটি পৃষ্ঠায় কেবল একটি <H1> থাকে, ফলে স্ক্রিন রিডাররা সহজেই পৃষ্ঠার বিষয়বস্তুর সবচেয়ে তথ্যবহুল বিবরণটি শনাক্ত করতে পারে।
• শৈলীগত ক্যাপিটালাইজেশন: দৃশ্যগত আকর্ষণ হিসেবে সব অক্ষর বড় হাতের (all-caps) ব্যবহার এখন মূল টেক্সটের পরিবর্তে শুধুমাত্র CSS-এর মাধ্যমে প্রয়োগ করা হয়।
• DOM-এর যৌক্তিক বিন্যাস: Create এবং Edit App পেজের অ্যাকশন বাটনগুলোকে DOM-এ ফর্ম এলিমেন্টগুলোর নিচে সরানো হয়েছে, যাতে ফর্মের ইন্টারঅ্যাকশন সম্পন্ন হওয়ার পর সেগুলোকে যৌক্তিক ক্রমে সক্রিয় করা যায়।
• দৃশ্যমান উপাদানগুলোর লিখিত বিবরণ: লেবেল, অল্ট টেক্সট এবং বাটন টেক্সটের ব্যবহার উন্নত করা হয়েছে, যা স্ক্রিন রিডারের সাহায্যে নেভিগেশনকে আরও সহজ করে তোলে।
• রঙের বৈসাদৃশ্য: পণ্যটির বিভিন্ন স্থানে WCAG AA বৈসাদৃশ্যের প্রয়োজনীয়তা পূরণের জন্য রঙের বৈসাদৃশ্য বাড়ানো হয়েছে। সম্ভাব্য অপর্যাপ্ত রঙের বৈসাদৃশ্য এড়াতে API তালিকার API শিরোনামগুলি ছবির নিচে সরানো হয়েছে।
• ফর্ম যাচাইকরণ: 'অ্যাপ তৈরি করুন' এবং 'সম্পাদনা করুন' পেজগুলিতে, ফর্ম জমা দেওয়ার বাটনগুলি এখন আর নিষ্ক্রিয় থাকে না এবং ফর্মটি যাচাই করার জন্য সক্রিয় করা যায়। 'অ্যাপ তৈরি করুন' এবং 'সম্পাদনা করুন' পেজগুলিতে যাচাইকৃত ফর্ম ফিল্ডগুলিতে এখন যাচাইকরণ ত্রুটির লিখিত বিবরণ অন্তর্ভুক্ত থাকে।
• রেসপন্সিভনেস: এখন একটি সর্বোচ্চ প্রস্থ নির্ধারণ করা হয়েছে যা স্মার্টডকস ছাড়া বাকি সব পেজের জন্য প্রযোজ্য। স্মার্টডকস নেভিগেশন এখন ফোনের ছোট আকারের স্ক্রিনেও কাজ করে। ক্রিয়েট এবং এডিট অ্যাপের পেজগুলো এখন ছোট স্ক্রিনের জন্য আরও বেশি রেসপন্সিভ।

DOM পরিবর্তন যা আপনার পোর্টালকে প্রভাবিত করতে পারে

বিশেষ করে বিবেচনা করুন যদি:

• নেভিগেশন বার (হেডার ও ফুটার) এবং পেজ হেডিংগুলোকে CSS ওভাররাইডের মাধ্যমে স্টাইল করা (বা লুকানো) হয়েছে। এখন পেজের কন্টেন্টের জন্য একটি সর্বোচ্চ প্রস্থ নির্ধারণ করা হয়েছে। নেভিগেশন বার এবং পেজ হেডারগুলোকে ব্রাউজার উইন্ডোর প্রান্ত পর্যন্ত প্রসারিত করতে, Apigee :before সিউডো এলিমেন্টটিকে স্টাইল করেছে। আরও তথ্যের জন্য, নেভিগেশন বার এবং পেজ হেডারের জন্য প্রাইমারি কালার ওভাররাইড করা দেখুন।
• (ফুল-স্ক্রিন ব্যাকগ্রাউন্ড ইমেজ ছাড়া) এমন কিছু পেজ এলিমেন্ট আছে যাদের ব্যাকগ্রাউন্ড ব্রাউজার উইন্ডোর প্রান্ত পর্যন্ত বিস্তৃত থাকে: রেসপন্সিভনেস উন্নত করার জন্য পেজের কন্টেন্টের সর্বোচ্চ প্রস্থ সীমিত করা হয়েছে, যা কাস্টম পেজের মধ্যে থাকা পূর্বে সম্পূর্ণ প্রস্থের প্যানেলগুলোকে সীমাবদ্ধ করতে পারে। নতুন সর্বোচ্চ-প্রস্থ সেটিংস ব্যবহার সম্পর্কে আরও তথ্যের জন্য, “একটি পোর্টাল পেজে একটি সম্পূর্ণ-প্রস্থের প্যানেল তৈরি করুন” দেখুন।
• টেক্সট স্টাইল পরিবর্তন করার জন্য CSS সিলেক্টর ব্যবহার করে নির্দিষ্ট HTML হেডিং লেভেলকে টার্গেট করা হয়েছে: কিছু কন্টেন্টের ক্ষেত্রে প্রযোজ্য হেডিং লেভেল পরিবর্তিত হয়েছে। উদাহরণস্বরূপ: <H1> → <H2> ঠিক কোন কোন কন্টেন্ট প্রভাবিত হয়েছে তা বুঝতে এই রিলিজের বিস্তারিত পরিবর্তন তালিকাটি পর্যালোচনা করুন।
• পোর্টাল থিম এডিটরে 'সেকেন্ডারি কালার' হিসেবে সাদা বা খুব হালকা কোনো রঙ নির্বাচন করা হয়: এই সেকেন্ডারি কালারটি নেভিগেশন এলিমেন্টগুলোর জন্য ব্যবহৃত হয়, যেগুলো সাদা ব্যাকগ্রাউন্ডের বিপরীতে দেখতে অসুবিধা হতে পারে। আমরা একটি অ্যাক্সেসিবল সেকেন্ডারি কালার বেছে নেওয়ার পরামর্শ দিই এবং তারপর নির্দিষ্ট পরিস্থিতিতে প্রয়োজনে কাস্টম scss ব্যবহার করে সেটিকে ওভাররাইড করার কথা বলি।
• টেক্সটের ভেতরের লিঙ্কগুলোর স্টাইল পরিবর্তন করা হয়েছে: লিঙ্কগুলোর স্টাইলিং এখন আরও সহজলভ্য। এটি আপনার বিদ্যমান স্টাইলিংয়ের সাথে কীভাবে কাজ করতে পারে, তা বুঝতে নিচের পরিবর্তনগুলো দেখুন।
• হোম ভিউ কার্ডের কন্টেন্ট এরিয়ার ২ পিক্সেলের 'border-bottom' বর্ডারটিকে CSS ওভাররাইডের মাধ্যমে স্টাইল করা হয়েছে বা লুকানো হয়েছে: এই বর্ডারটিকে <mat-card-content> থেকে সরিয়ে <mat-card-actions> এর 'border-top'-এ আনা হয়েছে।

বিস্তারিত পরিবর্তনের সারাংশ

নিম্নলিখিত বিভাগগুলিতে এই রিলিজে বাস্তবায়িত বিস্তারিত পরিবর্তনগুলি বিভাগ অনুসারে সংক্ষেপে তুলে ধরা হয়েছে।

পোর্টাল-ব্যাপী পরিবর্তন

পোর্টাল-ব্যাপী পরিবর্তনগুলো নিচে সংক্ষেপে তুলে ধরা হলো।

• নিম্নলিখিত ভেরিয়েবলগুলো আর ব্যবহার করা হয় না:
  • $layout-horizontal-padding
  • $layout-main-content-horiz-padding
  • $layout-header-horiz-padding
  • $layout-context-bar-horiz-padding
• নতুন কিছু ভ্যারিয়েবল রয়েছে যা মূল কন্টেন্ট এরিয়ার সর্বোচ্চ প্রস্থ এবং সর্বনিম্ন হরাইজন্টাল প্যাডিং নিয়ন্ত্রণ করে:
  • $layout-main-content-max-width
  • $layout-horizontal-min-padding

প্রাথমিক নেভিগেশন বারের পরিবর্তন

প্রধান নেভিগেশন বারের পরিবর্তনগুলো নিচে সংক্ষেপে তুলে ধরা হলো।

• <img> লোগোটি এখন ডেস্কটপ এবং মোবাইল উভয় স্ক্রিনের আকারের জন্য একটি <a> এর মধ্যে মোড়ানো হয়েছে।
• ব্যবহারকারীর ড্রপ-ডাউন বাটনটি এখন <a> এর পরিবর্তে <button> হবে।

লিঙ্ক শৈলী পরিবর্তন

টেক্সটের মধ্যে থাকা স্ট্যান্ডার্ড লিঙ্ক <a> উপর এখন ডিফল্টরূপে একটি আন্ডারলাইন এবং হোভার করলে একটি ব্যাকগ্রাউন্ড কালার (থিম সেটিংসের "সেকেন্ডারি কালার" অনুযায়ী) দেখা যায়।

৪০৪ পৃষ্ঠার পরিবর্তন

404 পৃষ্ঠার পরিবর্তনগুলো নিচে সংক্ষেপে তুলে ধরা হলো।

• "এখনই সাইন ইন করুন" এখন <H1> এর পরিবর্তে <H2> হয়েছে।
• ব্যাখ্যামূলক লেখাটি এখন <H2> এর পরিবর্তে <H1> হবে।

এপিআই পৃষ্ঠা

এপিআই পৃষ্ঠার পরিবর্তনগুলো নিচে বিভাগ অনুযায়ী সংক্ষেপে তুলে ধরা হলো।

• এপিআই অনুসন্ধান/ফিল্টার ইনপুট কার্ড:
  • <mat-card-content class="mat-card-content"> এখন সার্চ এপিআই-এর কার্ড হেডিং এবং ইনপুটকে র‍্যাপ করে।
  • <H2> এখন class= class="api-doc-filter-title" এর পরিবর্তে class="mat-subheading-1" ব্যবহার করে।
  • <mat-form-field> এখন appearance="outline" ব্যবহার করে।
  • <mat-form-field> এ ইনপুটের আগে একটি সার্চ আইকন যোগ করা হয়েছে: "<mat-icon matPrefix>search</mat-icon>"
  • ইনপুটে আরিয়া লেবেল এবং কন্ট্রোল রেফারেন্স যোগ করা হয়েছে।
• খালি এপিআই তালিকার বার্তা:
  • "কোনো এপিআই খুঁজে পাওয়া যায়নি" এখন <H1> <H2> ।
  • ব্যাখ্যাটি এখন <H3> এর পরিবর্তে <H2>
• এপিআই কার্ডের তালিকা:

  "আপনার অনুসন্ধানের সাথে কোনো API মেলে না" এখন <H1> <H2> ।

• এপিআই কার্ড:
  • >div class="api-doc-card-content-image-gradient"></div> সরিয়ে ফেলা হয়েছে
  • API শিরোনামটি <div> ধারণকারী ছবিটি থেকে সরিয়ে ঠিক পরের <div> ছবিটির <div class="api-doc-card-content-title"></div> অংশে রাখা হয়েছে।
  • এপিআই শিরোনাম এখন <H2> এর পরিবর্তে <H1> হবে।

অ্যাপের তালিকা:

• শূন্য অবস্থা:
  • "Get Started" এখন <H2> এর পরিবর্তে <H1>
  • খালি রাজ্যের নির্দেশিকা এখন <H3> এর পরিবর্তে <H2>
• তালিকা:
  • "আমার অ্যাপস" এখন <H1> <H2> ।
  • <mat-row> এখন একটি <a> তে বিকৃত হয়ে গেছে

অ্যাপ পৃষ্ঠা তৈরি এবং সম্পাদনা করুন

অ্যাপ তৈরি এবং সম্পাদনা পৃষ্ঠাগুলিতে আনা পরিবর্তনগুলি নিচে সংক্ষেপে তুলে ধরা হলো।

• <div class="app-buttons"> <form> এর শেষে সরানো হয়েছে এবং এর পরিবর্তে <div class="form-buttons-sticky-container"> ব্যবহার করা হয়েছে।
• .app-layout-section ক্লাসের সকল ব্যবহার .details-layout-section এ পরিবর্তন করা হয়েছে।
• .app-layout-section-title ক্লাসের সকল ব্যবহার .details-layout-section-title এ পরিবর্তন করা হয়েছে।
• এখন থেকে সকল সেকশন হেডিং <div> এর পরিবর্তে <H2> হবে।
• .app-layout-section-content ক্লাসের সকল ব্যবহার .details-layout-section-content এ পরিবর্তন করা হয়েছে।
• এপিআই-এর তালিকাটি এখন আর টগল সুইচসহ এপিআই কার্ডের তালিকা নয় (যা এপিআই তালিকার অনুরূপ ছিল)। এর পরিবর্তে, এটি এপিআই-এর একটি সারণি।
• কলব্যাক ইউআরএল ইনপুটটি একটি নতুন বিভাগে সরানো হয়েছে।
• সেভ বাটনটি এখন mat-raised-button স্টাইল এবং প্রাইমারি কালার ব্যাকগ্রাউন্ড ব্যবহার করে।
• টেবিলগুলো এখন .app-table-wrapper ক্লাসসহ একটি <div> ট্যাগের মধ্যে থাকে।
• টেবিলের হেডারগুলিতে এখন <thead> র‍্যাপার ব্যবহার করা হয়।
• টেবিলের বডিতে এখন <tbody> র‍্যাপার ব্যবহার করা হয়।
• টেবিলের কলামের প্রস্থ নির্ধারণ করতে [style.width] এখন আর ব্যবহৃত হয় না।
• টেবিলের ভেতরের সমস্ত <a> ট্যাগে এখন <button ব্যবহার করা হয়।

দলগুলির তালিকা

টিম তালিকার পরিবর্তনগুলো নিচে সংক্ষেপে তুলে ধরা হলো।

• শূন্য অবস্থা:
  • "Get started" এখন <H1> এর পরিবর্তে <H2> হবে।
  • "যৌথ অ্যাপের মালিকানা ব্যবস্থাপনার জন্য একটি টিম তৈরি করুন" এখন <H3> এর পরিবর্তে <H2>
• তালিকা:

  "টিমস" শিরোনাম এখন <H2> এর পরিবর্তে <H1>

টিম পেজ তৈরি এবং সম্পাদনা করুন

টিম তৈরি এবং সম্পাদনা পেজগুলিতে আনা পরিবর্তনগুলির সারসংক্ষেপ নিচে দেওয়া হলো।

• <form> -এ .teams-form ক্লাসটিকে .details-form দ্বারা প্রতিস্থাপন করা হয়েছে।
• <div class="teams-buttons"> <form> এর শেষে সরানো হয়েছে এবং এর পরিবর্তে <div class="form-buttons-sticky-container"> ব্যবহার করা হয়েছে।
• .teams-layout-section ক্লাসের সকল ব্যবহার .details-layout-section এ পরিবর্তন করা হয়েছে।
• .teams-layout-section-title ক্লাসের সকল ব্যবহার .details-layout-section-title এ পরিবর্তন করা হয়েছে।
• .teams-layout-section-content ক্লাসের সকল ব্যবহার .details-layout-section-content এ পরিবর্তন করা হয়েছে।
• <div class="team-apps-container"> <table class="team-apps"> এর চারপাশে যোগ করা হয়েছে।

স্মার্টডকস

SmartDocs ইন্টারফেসের পরিবর্তনগুলো নিচে সংক্ষেপে তুলে ধরা হলো।

• পার্শ্ব নেভিগেশন:
  • সাইড নেভিগেশনটি অ্যাঙ্গুলার-মেটেরিয়াল কম্পোনেন্ট ব্যবহার করে সম্পূর্ণ নতুন করে লেখা হয়েছে।
  • সাইড নেভিগেশন হেডিং এখন <div> এর পরিবর্তে <H2> হবে।
  • নেভিগেশন আইটেমগুলো এখন পোর্টাল থিম এডিটরের 'সেকেন্ডারি কালার'-এর পরিবর্তে পোর্টালের ডিফল্ট টেক্সট কালার ব্যবহার করে।
  • সাইড নেভিগেশনের নির্বাচিত, ফোকাসকৃত এবং হোভার করা আইটেমগুলোতে এখন টেক্সট এবং ব্যাকগ্রাউন্ডের জন্য যথাক্রমে পোর্টাল থিম এডিটরের 'সেকেন্ডারি কালার'-এর ডার্ক এবং লাইট ভ্যারিয়েশন ব্যবহার করা হয়।
• বিষয়বস্তু:
  • 'Path Parameters' এবং 'Header Parameters'-এর মতো অনেক উপশিরোনাম এখন <H2> -এর পরিবর্তে <H3> হয়েছে।
  • ওভারভিউ পৃষ্ঠার স্কিমা এনটিটিগুলো এখন <H2> এর পরিবর্তে <H3>=> হবে।

বিদ্যমান হোম পেজে অ্যাক্সেসিবিলিটি উন্নতকরণ যোগ করা

আপনার যদি একটি বিদ্যমান পোর্টাল থাকে, তাহলে নেভিগেবল কার্ডগুলির জন্য নতুন অ্যাক্সেসিবিলিটি উন্নতিগুলির সুবিধা নিতে আপনাকে হোম পেজটি সম্পাদনা করতে হবে, যা নিচে বর্ণনা করা হলো:

1. <mat-card> কন্টেইনার থেকে href="" সরিয়ে ফেলুন।
2. <mat-card-header> এর মধ্যে কার্ডের শিরোনামের জন্য <H1> এর পরিবর্তে <H2> ব্যবহার করুন।
3. কার্ড হেডিং <h2> এর ভিতরে টেক্সটটিকে একটি <a class="navigable-content" href=" href-name "> এর মধ্যে রাখুন এবং href-name কার্ডের ন্যাভিগেশনের জন্য উপযুক্ত মানে সেট করুন।

বিকল্পভাবে, আপনি নিম্নলিখিত কার্ড টেমপ্লেটটি ব্যবহার করতে পারেন:

<mat-card class="home-page-card quick-start">
  <mat-card-header class="home-page-card-header" color="primary">
    <mat-icon class="home-page-card-header-icon">
      check_circle
    </mat-icon>
    <h2 class="home-page-card-header-text">
      <a class="navigable-content" href="page-route">
        Card heading
      </a>
    </h2>
  </mat-card-header>
  <mat-card-content class="home-page-card-content">
    <p class="home-page-card-content-text">
      Extra content
    </p>
  </mat-card-content>
</mat-card>
</p>

নেভিগেশন বার এবং পেজ হেডারের জন্য প্রাথমিক রঙ পরিবর্তন করা

ব্রাউজার উইন্ডোর প্রান্ত পর্যন্ত নেভিগেশন বার এবং পেজ হেডার প্রসারিত করতে, অ্যাডভান্সড থিম এডিটর ব্যবহার করে নেভিগেশন বার এবং পেজ হেডারের জন্য কাস্টম স্টাইলিং যোগ করুন, যেমনটি হেডার নেভিগেশন বারের জন্য নিচে দেখানো হয়েছে:

// Override use of the primary color for header navigation bar background-color
.nav-header .mat-toolbar {
  color: #fff //  color for navigation text

  // Use the :before pseudo element to style the background of full-width bars
  // (header and footer navigation bars and page headers)
  &:before {
    background-color: #000; // background color for header navigation bar
  }
}

একটি অ্যাপের এপিআই পরিচালনার জন্য হালনাগাদ করার পদ্ধতি

ইন্টিগ্রেটেড পোর্টালে একটি অ্যাপের এপিআই (API) পরিচালনা করার ইউজার ইন্টারঅ্যাকশন পরিবর্তিত হয়েছে। বিশেষত, একটি অ্যাপ পরিচালনা করার সময়, এপিআই (API) বিভাগে ব্যবহারকারীদের অবশ্যই ক্লিক করতে হবে। অথবা অ্যাপ থেকে কোনো এপিআই-তে যথাক্রমে অ্যাক্সেস চালু বা বন্ধ করার জন্য (টগলের পরিবর্তে)।

আপনার পোর্টালে থাকা অ্যাপস পৃষ্ঠার এপিআই (API) পরিচালনার পদ্ধতি বর্ণনা করে এমন যেকোনো কার্যপ্রণালী (যদি প্রযোজ্য হয়) হালনাগাদ করুন। আরও তথ্যের জন্য, আপনার অ্যাপে এপিআই পরিচালনা (Managing the APIs in your app ) দেখুন।

ত্রুটিগুলি সমাধান করা হয়েছে

এই রিলিজে নিম্নলিখিত বাগগুলো সমাধান করা হয়েছে। এই তালিকাটি মূলত সেইসব ব্যবহারকারীদের জন্য, যারা তাদের সাপোর্ট টিকেটগুলো সমাধান হয়েছে কিনা তা পরীক্ষা করে দেখতে চান। এটি সকল ব্যবহারকারীকে বিস্তারিত তথ্য প্রদানের জন্য তৈরি করা হয়নি।

পরিচিত সমস্যা

ইন্টিগ্রেটেড পোর্টালের পরিচিত সমস্যাগুলির তালিকার জন্য, ইন্টিগ্রেটেড পোর্টালের পরিচিত সমস্যাগুলি দেখুন।