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

আপনি Apigee Edge ডকুমেন্টেশন দেখছেন।
Apigee X ডকুমেন্টেশন দেখুন। তথ্য

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

নতুন ফিচার ও উন্নতি

এই বিভাগে এই রিলিজে থাকা নতুন ফিচার ও উন্নতি সম্পর্কে বর্ণনা করা হয়েছে।

অ্যাক্সেসিবিলিটি ও রেসপন্সিভনেস সংক্রান্ত উন্নতি

এই রিলিজে অ্যাক্সেসিবিলিটি ও রেসপন্সিভনেস সংক্রান্ত যেসব উন্নতি করা হয়েছে, তার তালিকা নিচে দেওয়া হল।

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

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

বিশেষ করে এগুলি বিবেচনা করুন:

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

বিস্তারিত পরিবর্তনের সারসংক্ষেপ

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

পুরো পোর্টাল জুড়ে পরিবর্তন

সম্পূর্ণ পোর্টাল জুড়ে করা পরিবর্তনগুলি নিচে সংক্ষিপ্তভাবে উল্লেখ করা হল।

• নিম্নলিখিত ভেরিয়েবেল আর ব্যবহার করা হয় না:
  • $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 পৃষ্ঠায় পরিবর্তন

404 পৃষ্ঠায় করা পরিবর্তনগুলি নিচে সংক্ষিপ্তভাবে দেওয়া হল।

• "এখনই সাইন-ইন করুন" বিকল্পটি এখন <H1>-এর পরিবর্তে <H2>
• ব্যাখ্যা করার টেক্সট এখন <H1>-এর পরিবর্তে <H2>

API পৃষ্ঠা

API পৃষ্ঠায় করা পরিবর্তনগুলি নিচে বিভাগ অনুযায়ী সংক্ষিপ্তভাবে দেওয়া হল।

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

  "আপনার সার্চের সাথে কোনও API ম্যাচ করছে না" এখন <H1>-এর পরিবর্তে <H2>

• API কার্ড:
  • >div class="api-doc-card-content-image-gradient"></div> সরিয়ে দেওয়া হয়েছে
  • <div> থাকা ছবি থেকে এপিআইয়ের নাম সরিয়ে <div class="api-doc-card-content-title"></div>-এ রাখা হয়েছে, এটি <div>-এর ঠিক পরেই আছে
  • API-এর নাম এখন <H1>-এর পরিবর্তে <H2>

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

• খালি অবস্থা:
  • "শুরু করা যাক" বিকল্পটি এখন <H1>-এর পরিবর্তে <H2>
  • খালি স্টেট সংক্রান্ত নির্দেশিকা এখন <H2>-এর পরিবর্তে <H3>
• তালিকা:
  • "আমার অ্যাপ" এখন <H1>-এর পরিবর্তে <H2>
  • <mat-row> এখন <a>-এ মোড়ানো আছে

অ্যাপ পৃষ্ঠা তৈরি ও এডিট করা

Create ও Edit অ্যাপ পৃষ্ঠায় করা পরিবর্তনগুলি নিচে সংক্ষিপ্তভাবে দেওয়া হল।

• <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 করা হয়েছে
• API-এর তালিকা আর টগল সুইচ সহ API কার্ডের তালিকা (API তালিকার মতো) নয়। পরিবর্তে, এটি API-এর একটি টেবিল
• কলব্যাক URL ইনপুট একটি নতুন বিভাগে সরানো হয়েছে
• 'সেভ করুন' বোতাম এখন mat-raised-button স্টাইল ও প্রাথমিক রঙের ব্যাকগ্রাউন্ড ব্যবহার করে
• টেবিলগুলি এখন <div>-এ মোড়ানো আছে, যার ক্লাস .app-table-wrapper
• টেবিল হেডারে এখন <thead> র‍্যাপার ব্যবহার করা হয়
• টেবিল বডি এখন <tbody> র‍্যাপার ব্যবহার করে
• টেবিল কলামের প্রস্থ সেট করার জন্য [style.width] আর ব্যবহার করা হয় না
• টেবিলের মধ্যে থাকা সব <a> ট্যাগে এখন <button ব্যবহার করা হয়

টিমের তালিকা

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

• খালি অবস্থা:
  • "শুরু করা যাক" বিকল্পটি এখন <H1>-এর পরিবর্তে <H2>
  • "শেয়ার করা অ্যাপের মালিকানা ম্যানেজ করার জন্য টিম তৈরি করুন" বিকল্পটি এখন <H3>, <H2> নয়
• তালিকা:

  "টিম" শীর্ষক বিভাগটি এখন <H1>-এর পরিবর্তে <H2>

টিম পৃষ্ঠা তৈরি ও এডিট করা

'টিম তৈরি ও এডিট করুন' পৃষ্ঠায় করা পরিবর্তনগুলি নিচে সংক্ষিপ্তভাবে দেওয়া হল।

• <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 করা হয়েছে
• <table class="team-apps">-এর চারপাশে <div class="team-apps-container"> যোগ করা হয়েছে

SmartDocs

SmartDocs ইন্টারফেসে করা পরিবর্তনগুলি নিচে সংক্ষিপ্তভাবে দেওয়া হল।

• সাইড নেভিগেশন:
  • সাইড নেভিগেশন সম্পূর্ণভাবে angular-material কম্পোনেন্ট দিয়ে আবার লেখা হয়েছে
  • সাইড নেভিগেশনের শিরোনাম এখন <div>-এর পরিবর্তে <H2>
  • নেভিগেশন আইটেম এখন পোর্টাল থিম এডিটরের "সেকেন্ডারি কালার" ব্যবহার না করে পোর্টালের ডিফল্ট টেক্সট কালার ব্যবহার করে
  • সাইড নেভিগেশনে বেছে নেওয়া, ফোকাস করা ও হোভার করা আইটেম এখন পোর্টাল থিম এডিটরের ডার্ক ও লাইট ভেরিয়েশন ব্যবহার করে টেক্সট ও ব্যাকগ্রাউন্ডের জন্য যথাক্রমে "সেকেন্ডারি কালার"
• কন্টেন্ট:
  • "পাথ প্যারামিটার" ও "হেডার প্যারামিটার"-এর মতো অনেক উপশিরোনাম এখন <H2>, <H3> নয়
  • ওভারভিউ পৃষ্ঠায় স্কিমা এন্টিটি এখন <H3>=>, <H2> নয়

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

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

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 বিভাগে, অ্যাপ থেকে কোনও API-তে অ্যাক্সেস চালু বা বন্ধ করতে, ব্যবহারকারীদের যথাক্রমে বা -এ ক্লিক করতে হবে (টগল করার পরিবর্তে)।

প্রযোজ্য হলে, অ্যাপ পৃষ্ঠায় API কীভাবে ম্যানেজ করতে হয় তা বর্ণনা করে এমন যেকোনও পদ্ধতি আপনার পোর্টালে আপডেট করুন। আরও তথ্যের জন্য, আপনার অ্যাপে API ম্যানেজ করা দেখুন।

সমস্যার সমাধান করা হয়েছে

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

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

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