রিঅ্যাক্ট রেফ ফরওয়ার্ডিং প্যাটার্নস: কম্পোনেন্ট এপিআই ডিজাইনে দক্ষতা অর্জন

রিঅ্যাক্টে রেফ ফরওয়ার্ডিং (Ref forwarding) একটি শক্তিশালী কৌশল যা আপনাকে একটি কম্পোনেন্টের মধ্য দিয়ে তার কোনো একটি চাইল্ড কম্পোনেন্টে স্বয়ংক্রিয়ভাবে একটি রেফ (ref) পাস করতে দেয়। এটি প্যারেন্ট কম্পোনেন্টদেরকে তাদের চাইল্ড কম্পোনেন্টের নির্দিষ্ট DOM এলিমেন্ট বা কম্পোনেন্ট ইনস্ট্যান্সের সাথে সরাসরি ইন্টারঅ্যাক্ট করার সুযোগ দেয়, এমনকি যদি সেই চাইল্ড কম্পোনেন্টগুলি অনেক গভীরে নেস্টেড থাকে। নমনীয়, পুনঃব্যবহারযোগ্য এবং রক্ষণাবেক্ষণযোগ্য কম্পোনেন্ট এপিআই তৈরির জন্য রেফ ফরওয়ার্ডিং বোঝা এবং কার্যকরভাবে ব্যবহার করা অত্যন্ত গুরুত্বপূর্ণ।

কম্পোনেন্ট এপিআই ডিজাইনের জন্য রেফ ফরওয়ার্ডিং কেন গুরুত্বপূর্ণ

রিঅ্যাক্ট কম্পোনেন্ট ডিজাইন করার সময়, বিশেষ করে যেগুলি পুনঃব্যবহারের জন্য তৈরি করা হয়, অন্য ডেভেলপাররা কীভাবে সেগুলির সাথে ইন্টারঅ্যাক্ট করবে তা বিবেচনা করা গুরুত্বপূর্ণ। একটি ভালভাবে ডিজাইন করা কম্পোনেন্ট এপিআই হলো:

• স্বজ্ঞাত (Intuitive): বোঝা এবং ব্যবহার করা সহজ।
• নমনীয় (Flexible): বড় ধরনের পরিবর্তন ছাড়াই বিভিন্ন ব্যবহারের ক্ষেত্রে মানিয়ে নিতে পারে।
• রক্ষণাবেক্ষণযোগ্য (Maintainable): একটি কম্পোনেন্টের অভ্যন্তরীণ বাস্তবায়নে পরিবর্তন আনলেও বাইরের কোড যা এটি ব্যবহার করে তা যেন নষ্ট না হয়।

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

React.forwardRef-এর মূল বিষয়

রিঅ্যাক্টে রেফ ফরওয়ার্ডিংয়ের মূল ভিত্তি হলো React.forwardRef হায়ার-অর্ডার কম্পোনেন্ট (HOC)। এই ফাংশনটি একটি রেন্ডারিং ফাংশনকে আর্গুমেন্ট হিসেবে নেয় এবং একটি নতুন রিঅ্যাক্ট কম্পোনেন্ট রিটার্ন করে যা একটি ref প্রপ গ্রহণ করতে পারে।

এখানে একটি সহজ উদাহরণ দেওয়া হলো:

            import React, { forwardRef } from 'react';

const MyInput = forwardRef((props, ref) => {
  return ;
});

export default MyInput;

            

              
                Copy
              
            
          

এই উদাহরণে, `MyInput` একটি ফাংশনাল কম্পোনেন্ট যা `forwardRef` ব্যবহার করে। `MyInput`-এ পাস করা `ref` প্রপটি সরাসরি `input` এলিমেন্টে অ্যাসাইন করা হয়। এটি একটি প্যারেন্ট কম্পোনেন্টকে ইনপুট ফিল্ডের আসল DOM নোডের একটি রেফারেন্স পেতে সাহায্য করে।

ফরওয়ার্ড করা রেফ ব্যবহার করা

এখানে দেখানো হলো আপনি কীভাবে `MyInput` কম্পোনেন্টটি একটি প্যারেন্ট কম্পোনেন্টে ব্যবহার করতে পারেন:

            import React, { useRef, useEffect } from 'react';
import MyInput from './MyInput';

const ParentComponent = () => {
  const inputRef = useRef(null);

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return (
    

      
    
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

এই উদাহরণে, `ParentComponent` `useRef` ব্যবহার করে একটি রেফ তৈরি করে এবং এটি `MyInput` কম্পোনেন্টে পাস করে। এরপর `useEffect` হুকটি কম্পোনেন্ট মাউন্ট হওয়ার সময় ইনপুট ফিল্ডে ফোকাস করার জন্য রেফটি ব্যবহার করে। এটি দেখায় যে কীভাবে একটি প্যারেন্ট কম্পোনেন্ট রেফ ফরওয়ার্ডিং ব্যবহার করে তার চাইল্ড কম্পোনেন্টের মধ্যে থাকা DOM এলিমেন্টকে সরাসরি নিয়ন্ত্রণ করতে পারে।

কম্পোনেন্ট এপিআই ডিজাইনের জন্য সাধারণ রেফ ফরওয়ার্ডিং প্যাটার্ন

এখন, আসুন কিছু সাধারণ এবং দরকারী রেফ ফরওয়ার্ডিং প্যাটার্নগুলি দেখি যা আপনার কম্পোনেন্ট এপিআই ডিজাইনকে উল্লেখযোগ্যভাবে উন্নত করতে পারে।

১. DOM এলিমেন্টে রেফ ফরওয়ার্ড করা

উপরের মূল উদাহরণে যেমন দেখানো হয়েছে, DOM এলিমেন্টে রেফ ফরওয়ার্ড করা একটি মৌলিক প্যাটার্ন। এটি প্যারেন্ট কম্পোনেন্টকে আপনার কম্পোনেন্টের মধ্যে নির্দিষ্ট DOM নোডগুলি অ্যাক্সেস এবং নিয়ন্ত্রণ করার সুযোগ দেয়। এটি বিশেষত নিম্নলিখিত ক্ষেত্রে দরকারী:

• ফোকাস ম্যানেজমেন্ট: একটি ইনপুট ফিল্ড বা অন্য কোনো ইন্টারেক্টিভ এলিমেন্টে ফোকাস সেট করা।
• এলিমেন্টের মাপ পরিমাপ করা: একটি এলিমেন্টের প্রস্থ বা উচ্চতা জানা।
• এলিমেন্টের প্রপার্টি অ্যাক্সেস করা: এলিমেন্টের অ্যাট্রিবিউট পড়া বা পরিবর্তন করা।

উদাহরণ: একটি কাস্টমাইজযোগ্য বাটন কম্পোনেন্ট

এমন একটি বাটন কম্পোনেন্টের কথা ভাবুন যা ব্যবহারকারীদের তার চেহারা কাস্টমাইজ করতে দেয়।

            import React, { forwardRef } from 'react';

const CustomButton = forwardRef((props, ref) => {
  const { children, ...rest } = props;
  return (
    
      {children}
    
  );
});

export default CustomButton;

            

              
                Copy
              
            
          

একটি প্যারেন্ট কম্পোনেন্ট এখন বাটন এলিমেন্টের একটি রেফারেন্স পেতে পারে এবং প্রোগ্রাম্যাটিকভাবে ক্লিক করা বা এর স্টাইল পরিবর্তন করার মতো কাজ করতে পারে।

২. চাইল্ড কম্পোনেন্টে রেফ ফরওয়ার্ড করা

রেফ ফরওয়ার্ডিং শুধু DOM এলিমেন্টের মধ্যেই সীমাবদ্ধ নয়। আপনি অন্যান্য রিঅ্যাক্ট কম্পোনেন্টেও রেফ ফরওয়ার্ড করতে পারেন। এটি প্যারেন্ট কম্পোনেন্টকে চাইল্ড কম্পোনেন্টের ইনস্ট্যান্স মেথড বা প্রপার্টি অ্যাক্সেস করার সুযোগ দেয়।

উদাহরণ: একটি নিয়ন্ত্রিত ইনপুট কম্পোনেন্ট

ভাবুন আপনার একটি কাস্টম ইনপুট কম্পোনেন্ট আছে যা তার নিজের স্টেট পরিচালনা করে। আপনি হয়তো প্রোগ্রাম্যাটিকভাবে ইনপুটের ভ্যালু খালি করার জন্য একটি মেথড প্রকাশ করতে চান।

            import React, { useState, forwardRef, useImperativeHandle } from 'react';

const ControlledInput = forwardRef((props, ref) => {
  const [value, setValue] = useState('');

  const clearInput = () => {
    setValue('');
  };

  useImperativeHandle(ref, () => ({
    clear: clearInput,
  }));

  return (
     setValue(e.target.value)}
    />
  );
});

export default ControlledInput;

            

              
                Copy
              
            
          

এই উদাহরণে, `useImperativeHandle` ব্যবহার করে `clear` মেথডটি প্যারেন্ট কম্পোনেন্টের কাছে প্রকাশ করা হয়েছে। প্যারেন্ট তখন এই মেথডটি কল করে ইনপুটের ভ্যালু খালি করতে পারে।

            import React, { useRef } from 'react';
import ControlledInput from './ControlledInput';

const ParentComponent = () => {
  const inputRef = useRef(null);

  const handleClearClick = () => {
    if (inputRef.current) {
      inputRef.current.clear();
    }
  };

  return (
    

      
      Clear
    
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

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

৩. জটিল কম্পোনেন্টের জন্য রেফ একত্রিত করা

আরও জটিল কম্পোনেন্টে, আপনার কম্পোনেন্টের মধ্যে বিভিন্ন এলিমেন্ট বা কম্পোনেন্টে একাধিক রেফ ফরওয়ার্ড করার প্রয়োজন হতে পারে। এটি একটি কাস্টম ফাংশন ব্যবহার করে রেফ একত্রিত করার মাধ্যমে অর্জন করা যেতে পারে।

উদাহরণ: একাধিক ফোকাসযোগ্য এলিমেন্টসহ একটি কম্পোজিট কম্পোনেন্ট

ধরুন আপনার একটি কম্পোনেন্ট আছে যেখানে একটি ইনপুট ফিল্ড এবং একটি বাটন উভয়ই রয়েছে। আপনি প্যারেন্ট কম্পোনেন্টকে ইনপুট ফিল্ড বা বাটন যেকোনো একটিতে ফোকাস করার অনুমতি দিতে চান।

            import React, { useRef, forwardRef, useEffect } from 'react';

const CompositeComponent = forwardRef((props, ref) => {
  const inputRef = useRef(null);
  const buttonRef = useRef(null);

  useEffect(() => {
    if (typeof ref === 'function') {
      ref({
        input: inputRef.current,
        button: buttonRef.current,
      });
    } else if (ref && typeof ref === 'object') {
      ref.current = {
        input: inputRef.current,
        button: buttonRef.current,
      };
    }
  }, [ref]);

  return (
    

      
      Click Me
    
  );
});

export default CompositeComponent;

            

              
                Copy
              
            
          

এই উদাহরণে, `CompositeComponent` দুটি অভ্যন্তরীণ রেফ, `inputRef` এবং `buttonRef` ব্যবহার করে। `useEffect` হুকটি এই রেফগুলিকে একটি অবজেক্টে একত্রিত করে এবং ফরওয়ার্ড করা রেফটিতে অ্যাসাইন করে। এটি প্যারেন্ট কম্পোনেন্টকে ইনপুট ফিল্ড এবং বাটন উভয়ই অ্যাক্সেস করার অনুমতি দেয়।

            import React, { useRef } from 'react';
import CompositeComponent from './CompositeComponent';

const ParentComponent = () => {
  const compositeRef = useRef(null);

  const handleFocusInput = () => {
    if (compositeRef.current && compositeRef.current.input) {
      compositeRef.current.input.focus();
    }
  };

  const handleFocusButton = () => {
    if (compositeRef.current && compositeRef.current.button) {
      compositeRef.current.button.focus();
    }
  };

  return (
    

      
      Focus Input
      Focus Button
    
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

এই প্যাটার্নটি উপযোগী যখন আপনাকে একটি জটিল কম্পোনেন্টের মধ্যে একাধিক এলিমেন্ট বা কম্পোনেন্ট প্যারেন্ট কম্পোনেন্টের কাছে প্রকাশ করতে হবে।

৪. শর্তসাপেক্ষ রেফ ফরওয়ার্ডিং

কখনও কখনও, আপনি হয়তো শুধুমাত্র নির্দিষ্ট শর্তে একটি রেফ ফরওয়ার্ড করতে চাইতে পারেন। এটি উপযোগী যখন আপনি একটি ডিফল্ট আচরণ প্রদান করতে চান কিন্তু প্যারেন্ট কম্পোনেন্টকে এটি ওভাররাইড করার অনুমতি দিতে চান।

উদাহরণ: একটি ঐচ্ছিক ইনপুট ফিল্ডসহ কম্পোনেন্ট

ধরুন আপনার একটি কম্পোনেন্ট আছে যা শুধুমাত্র একটি নির্দিষ্ট প্রপ সেট করা থাকলে একটি ইনপুট ফিল্ড রেন্ডার করে। আপনি শুধুমাত্র তখনই রেফ ফরওয়ার্ড করতে চান যখন ইনপুট ফিল্ডটি আসলে রেন্ডার করা হয়।

            import React, { forwardRef } from 'react';

const ConditionalInput = forwardRef((props, ref) => {
  const { showInput, ...rest } = props;

  if (showInput) {
    return ;
  } else {
    return 
No input field
;
  }
});

export default ConditionalInput;

            

              
                Copy
              
            
          

এই উদাহরণে, রেফটি শুধুমাত্র `input` এলিমেন্টে ফরওয়ার্ড করা হয় যদি `showInput` প্রপটি `true` হয়। অন্যথায়, রেফটি উপেক্ষা করা হয়।

৫. হায়ার-অর্ডার কম্পোনেন্টস (HOCs) এর সাথে রেফ ফরওয়ার্ডিং

হায়ার-অর্ডার কম্পোনেন্টস (HOCs) ব্যবহার করার সময়, এটি নিশ্চিত করা গুরুত্বপূর্ণ যে রেফগুলি র‍্যাপ করা কম্পোনেন্টে সঠিকভাবে ফরওয়ার্ড করা হয়েছে। আপনি যদি রেফগুলি সঠিকভাবে হ্যান্ডেল না করেন, তাহলে প্যারেন্ট কম্পোনেন্ট হয়তো আন্ডারলাইং কম্পোনেন্টটি অ্যাক্সেস করতে পারবে না।

উদাহরণ: একটি বর্ডার যোগ করার জন্য একটি সহজ HOC

            import React, { forwardRef } from 'react';

const withBorder = (WrappedComponent) => {
  const WithBorder = forwardRef((props, ref) => {
    return (
      

        
      
    );
  });

  WithBorder.displayName = `withBorder(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;

  return WithBorder;
};

export default withBorder;

            

              
                Copy
              
            
          

এই উদাহরণে, `withBorder` HOC টি `forwardRef` ব্যবহার করে নিশ্চিত করে যে রেফটি র‍্যাপ করা কম্পোনেন্টে পাস হয়েছে। ডিবাগিং সহজ করার জন্য `displayName` প্রপার্টিও সেট করা হয়েছে।

গুরুত্বপূর্ণ নোট: HOC এবং রেফ ফরওয়ার্ডিংয়ের সাথে ক্লাস কম্পোনেন্ট ব্যবহার করার সময়, রেফটি ক্লাস কম্পোনেন্টে একটি সাধারণ প্রপ হিসাবে পাস হবে। আপনাকে এটি `this.props.ref` ব্যবহার করে অ্যাক্সেস করতে হবে।

রেফ ফরওয়ার্ডিংয়ের জন্য সেরা অনুশীলন

আপনি যাতে রেফ ফরওয়ার্ডিং কার্যকরভাবে ব্যবহার করছেন তা নিশ্চিত করতে, নিম্নলিখিত সেরা অনুশীলনগুলি বিবেচনা করুন:

• যেসব কম্পোনেন্টে রেফ ফরওয়ার্ড করার প্রয়োজন, সেগুলোর জন্য `React.forwardRef` ব্যবহার করুন। এটি রিঅ্যাক্টে রেফ ফরওয়ার্ডিং সক্ষম করার স্ট্যান্ডার্ড উপায়।
• আপনার কম্পোনেন্ট এপিআই পরিষ্কারভাবে ডকুমেন্ট করুন। ব্যাখ্যা করুন কোন এলিমেন্ট বা কম্পোনেন্টগুলি রেফের মাধ্যমে অ্যাক্সেস করা যেতে পারে এবং কীভাবে সেগুলি ব্যবহার করতে হবে।
• পারফরম্যান্সের বিষয়ে সচেতন থাকুন। অপ্রয়োজনীয় রেফ ফরওয়ার্ডিং এড়িয়ে চলুন, কারণ এটি ওভারহেড যোগ করতে পারে।
• একটি সীমিত সেট অফ মেথড বা প্রপার্টি প্রকাশ করার জন্য `useImperativeHandle` ব্যবহার করুন। এটি আপনাকে নিয়ন্ত্রণ করতে দেয় যে প্যারেন্ট কম্পোনেন্ট কী অ্যাক্সেস করতে পারবে।
• রেফ ফরওয়ার্ডিংয়ের অতিরিক্ত ব্যবহার এড়িয়ে চলুন। অনেক ক্ষেত্রে, কম্পোনেন্টগুলির মধ্যে যোগাযোগের জন্য প্রপস ব্যবহার করা ভাল।

অ্যাক্সেসিবিলিটি সংক্রান্ত বিবেচনা

রেফ ফরওয়ার্ডিং ব্যবহার করার সময়, অ্যাক্সেসিবিলিটি বিবেচনা করা গুরুত্বপূর্ণ। নিশ্চিত করুন যে আপনার কম্পোনেন্টগুলি প্রতিবন্ধী ব্যবহারকারীদের জন্য অ্যাক্সেসযোগ্য থাকে, এমনকি যখন DOM এলিমেন্টগুলি ম্যানিপুলেট করার জন্য রেফ ব্যবহার করা হয়। এখানে কয়েকটি টিপস দেওয়া হলো:

• অর্থপূর্ণ তথ্য প্রদানের জন্য ARIA অ্যাট্রিবিউট ব্যবহার করুন। এটি সহায়ক প্রযুক্তিগুলিকে আপনার কম্পোনেন্টের উদ্দেশ্য বুঝতে সাহায্য করে।
• সঠিকভাবে ফোকাস পরিচালনা করুন। নিশ্চিত করুন যে ফোকাস সর্বদা দৃশ্যমান এবং অনুমানযোগ্য।
• সহায়ক প্রযুক্তি দিয়ে আপনার কম্পোনেন্টগুলি পরীক্ষা করুন। অ্যাক্সেসিবিলিটি সমস্যাগুলি সনাক্ত এবং সমাধান করার এটিই সেরা উপায়।

আন্তর্জাতিকীকরণ এবং স্থানীয়করণ

বিশ্বব্যাপী দর্শকদের জন্য কম্পোনেন্ট এপিআই ডিজাইন করার সময়, আন্তর্জাতিকীকরণ (i18n) এবং স্থানীয়করণ (l10n) বিবেচনা করুন। নিশ্চিত করুন যে আপনার কম্পোনেন্টগুলি সহজেই বিভিন্ন ভাষায় অনুবাদ করা যায় এবং বিভিন্ন সাংস্কৃতিক প্রেক্ষাপটে মানিয়ে নেওয়া যায়। এখানে কয়েকটি টিপস দেওয়া হলো:

• i18n এবং l10n এর জন্য একটি লাইব্রেরি ব্যবহার করুন। অনেক চমৎকার লাইব্রেরি উপলব্ধ আছে, যেমন `react-intl` এবং `i18next`।
• সমস্ত টেক্সট বাইরে রাখুন। আপনার কম্পোনেন্টে টেক্সট স্ট্রিং হার্ডকোড করবেন না।
• বিভিন্ন তারিখ এবং সংখ্যা ফরম্যাট সমর্থন করুন। ব্যবহারকারীর লোকেল অনুযায়ী আপনার কম্পোনেন্টগুলিকে মানিয়ে নিন।
• ডান-থেকে-বামে (RTL) লেআউট বিবেচনা করুন। কিছু ভাষা, যেমন আরবি এবং হিব্রু, ডান থেকে বামে লেখা হয়।

সারা বিশ্ব থেকে উদাহরণ

আসুন দেখি বিশ্বের বিভিন্ন প্রেক্ষাপটে রেফ ফরওয়ার্ডিং কীভাবে ব্যবহার করা যেতে পারে তার কিছু উদাহরণ:

• ই-কমার্স অ্যাপ্লিকেশনগুলিতে: ব্যবহারকারী যখন সার্চ পেজে নেভিগেট করে তখন সার্চ ইনপুট ফিল্ডে ফোকাস করার জন্য রেফ ফরওয়ার্ডিং ব্যবহার করা যেতে পারে, যা বিশ্বব্যাপী ক্রেতাদের ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।
• ডেটা ভিজ্যুয়ালাইজেশন লাইব্রেরিতে: চার্ট এবং গ্রাফের আন্ডারলাইং DOM এলিমেন্টগুলি অ্যাক্সেস করার জন্য রেফ ফরওয়ার্ডিং ব্যবহার করা যেতে পারে, যা ডেভেলপারদের আঞ্চলিক ডেটা স্ট্যান্ডার্ডের উপর ভিত্তি করে তাদের চেহারা এবং আচরণ কাস্টমাইজ করতে দেয়।
• ফর্ম লাইব্রেরিতে: ইনপুট ফিল্ডগুলির উপর প্রোগ্রাম্যাটিক নিয়ন্ত্রণ প্রদানের জন্য রেফ ফরওয়ার্ডিং ব্যবহার করা যেতে পারে, যেমন সেগুলি ক্লিয়ার করা বা ভ্যালিডেট করা, যা বিশেষত সেই অ্যাপ্লিকেশনগুলিতে দরকারী যেগুলিকে বিভিন্ন দেশের বিভিন্ন ডেটা গোপনীয়তা প্রবিধান মেনে চলতে হয়।

উপসংহার

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

রেফ ফরওয়ার্ডিং এবং অন্যান্য উন্নত রিঅ্যাক্ট কৌশলগুলিতে দক্ষতা অর্জন করে, আপনি একজন আরও কার্যকর এবং মূল্যবান রিঅ্যাক্ট ডেভেলপার হতে পারেন। সারা বিশ্বের ব্যবহারকারীদের আনন্দ দেয় এমন আশ্চর্যজনক ইউজার ইন্টারফেস তৈরি করতে আপনার দক্ষতা অন্বেষণ, পরীক্ষা এবং পরিমার্জন করতে থাকুন।