কোডস্যান্ডবক্স ব্যবহার করে হ্যাকারআর্থে কীভাবে ফ্রন্ট-এন্ড সাবমিশন তৈরি করবেন

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

কোডস্যান্ডবক্স একটি অনলাইন আইডিই যেখানে আপনি নির্ভরতা নিয়ে চিন্তা না করেই ফ্রন্ট-এন্ড অ্যাপ্লিকেশনগুলি তৈরি এবং স্থাপন করতে পারেন।

কোডস্যান্ডবক্সের সুবিধা হ'ল প্রতিবার আপনার অ্যাপ্লিকেশনটি বানাতে, চালাতে বা পরীক্ষা করতে চাইলে আপনাকে এনপিএম কমান্ডগুলি চালানোর দরকার নেই।

কোডস্যান্ডবক্স কীভাবে কাজ করে তা দেখতে, সমাপ্ত প্রতিক্রিয়া অনুসন্ধান অ্যাপ্লিকেশনটি পরীক্ষা করতে এখানে ক্লিক করুন।

সম্পূর্ণ প্রকল্প (কোড এবং ওয়েবসাইট পাশাপাশি) নীচে এম্বেড করা হয়েছে। নীচের কোডটি সম্পাদনা করতে স্যান্ডবক্সে ওপেন ক্লিক করুন এবং ওয়েবসাইটটি নিয়ে খেলুন।

আমি স্ক্র্যাচ থেকে কীভাবে প্রতিক্রিয়া অনুসন্ধান অ্যাপটি তৈরি করেছি

  1. প্রথমে কোডস্যান্ডবক্সে একটি অ্যাকাউন্ট তৈরি করুন এবং সাইন ইন ক্লিক করুন।

দ্রষ্টব্য: আপনি আপনার গিটহাব অ্যাকাউন্টটি ব্যবহার করার পরামর্শ দেওয়া হচ্ছে।

2. তৈরি স্যান্ডবক্স ক্লিক করুন এবং তারপরে, প্রতিক্রিয়া ক্লিক করুন। এটি তৈরি করবে-প্রতিক্রিয়া-অ্যাপ্লিকেশন।

আপনি একটি স্যান্ডবক্স তৈরি করেছেন।

৩. আমরা থিমিলিডিবি থেকে নিম্নলিখিত এপিআইগুলি ব্যবহার করতে যাচ্ছি, যেখানে আমাদের অনুসন্ধান ক্যোয়ারীর মাধ্যমে আরবিবিটা প্রতিস্থাপন করা হয়েছে।

https://www.themealdb.com/api/json/v1/1/search.php?s=Arrabiata
https://www.themealdb.com/api/json/v1/1/random.php

৪. স্টাইল শিট ব্যবহার করে ওয়েবসাইটের বর্ণ এবং বর্ণ সংজ্ঞা দিন। আমাদের এসসিআর ফোল্ডারে নিম্নলিখিত কোডটি এসসিআর / স্টাইলস সিএসএসে প্রতিস্থাপন করুন / যুক্ত করুন ie

h1
রঙ: # 0000ff;
মার্জিন-শীর্ষ: 60px;
মার্জিন-নীচে: 0 পিএক্স;
}
h2
রঙ: # ff0000;
মার্জিন-শীর্ষ: 0 পিক্স;
মার্জিন-নীচে: 0 পিএক্স;
}
ডিভি {
পাঠ্য-সারিবদ্ধ: কেন্দ্র;
প্রস্থ: 100%;
মার্জিন: 0 অটো;
}
ইনপুট {
প্রস্থ: 80%;
মার্জিন: 10px;
প্যাডিং: 18px 10px;
সীমানা-ব্যাসার্ধ: 1000px;
সীমানা: 1px কঠিন # 0000ff;
বাক্স-ছায়া: 1px 0.5px # 888888;
হরফ-আকার: 18px;
}
বোতাম
প্যাডিং: 12px 10px;
প্রস্থ: 30%;
পটভূমির রঙ: # 0000ff;
রঙ: # fffff;
কার্সার: পয়েন্টার;
হরফ-আকার: 18px;
সীমানা-ব্যাসার্ধ: 1000px;
পাঠ্য-সারিবদ্ধ: কেন্দ্র;
}
বোতাম: হোভার {
পটভূমি রঙ: লাল; / * সবুজ * /
সাদা রং;
}

এখানে, আমরা নিম্নলিখিতগুলি সংজ্ঞায়িত করেছি:

  • শিরোনাম 1 এবং শিরোলেখ 2 (এইচ 1 এবং এইচ 2)
  • বোতাম এবং তার হোভার সম্পত্তি
  • বিভাগ এবং ইনপুট (ডিভ, ইনপুট) যা আমাদের অনুসন্ধান বারে ব্যবহৃত হবে।

৫. এসআরসি-র সাথে অ্যাপ.জেএস এর সামগ্রীগুলি প্রতিস্থাপন করুন

আমদানি প্রতিক্রিয়া, "প্রতিক্রিয়া" থেকে {উপাদান};
আমদানি করুন "./styles.css";
শ্রেণি অ্যাপ্লিকেশনটি উপাদানগুলি প্রসারিত করে {
state = {};
রেন্ডার () {
প্রত্যাবর্তন খাবার সন্ধান অ্যাপে স্বাগতম Welcome ;
}
}
এক্সপোর্ট ডিফল্ট অ্যাপ্লিকেশন;

App.js হল এমন ফাইল যা আমরা আমাদের মূল ফাংশন / কোডটি তৈরি করি।

অ্যাপ্লিকেশনটি এখন এটির মতো দেখাচ্ছে।

State. রাষ্ট্রের ভেরিয়েবলগুলি সংজ্ঞায়িত করুন

অনুসন্ধানভ্যালু: "", খাবার: [], এলোমেলো: 

অর্থ্যাৎ প্রতিস্থাপন = = {}; সঙ্গে

state = {searchValue: "", খাবার: [], এলোমেলো: []};

অ্যাপ ক্লাসে।

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

7. ইউআরএল থেকে এপিআই আনতে সমস্ত ফাংশন সংজ্ঞায়িত করুন

হ্যান্ডেলঅনচেঞ্জ = ইভেন্ট =>
this.setState ({সার্চভ্যালু: ইভেন্ট.তারেটেজ.ভ্যালু});
};
হ্যান্ডেল অনুসন্ধান = () =>
this.makeApiCall (this.state.searchValue);
};
হ্যান্ডেলর্যান্ডম = () =>
this.makeRandomApiCall ();
};

ক। উপরে বর্ণিত কোডটি অনুলিপি করুন এবং এটিকে রাষ্ট্রের চলকের নীচে এবং অ্যাপ্লিকেশন শ্রেণিতে রেন্ডার ফাংশনের উপরে পেস্ট করুন।

খ। এটি পৃথক ফাংশনে আমাদের এপিআইগুলিকে কল করবে।

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

ঘ। নীচের কোডটি হ্যান্ডেলর্যান্ডমের নীচে এবং অ্যাপ্লিকেশনগুলিতে অ্যাপ ক্লাসে রেন্ডার ফাংশনের উপরে যুক্ত করুন

MakeApiCall = SearchInput =>
var সন্ধান ইউআরএল = `https://www.themealdb.com/api/json/v1/1/search.php?s=$ {অনুসন্ধানআউটপুট}`;
আনা (searchUrl)
.থন (প্রতিক্রিয়া => {
রিটার্ন রেসপন্স.জসন ();
})
.থন (জসনডাটা =>
console.log (jsonData.meals);
this.setState ({খাবার: jsonData.meals});
this.setState ({এলোমেলো: []});
});
};
MakeRandomApiCall = () =>
var randomUrl = "https://www.themealdb.com/api/json/v1/1/random.php";
আনা (randomUrl)
.থন (প্রতিক্রিয়া => {
রিটার্ন রেসপন্স.জসন ();
})
.থন (জসনডাটা =>
console.log (jsonData.meals);
this.setState ({এলোমেলো: jsonData.meals});
this.setState ({খাবার: []});
});
};

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

ঙ। মেকএপিক্যাল কল করেছে যে এপিআই ইউআরএল ফলাফলটি জসনডাটা হিসাবে আনে এবং এটি খাবারের রাজ্যে পরিবর্তনশীল stores

চ। MakeRandomApiCall এলোমেলো API টি ইউআরএল কল করে, পুনরায় jsonData হিসাবে ফলাফল এনে এলোমেলো স্টেটের ভেরিয়েবলে সংরক্ষণ করে।

৮. কোডটি পার্স করুন এবং এটি আমাদের পৃষ্ঠায় প্রদর্শন করুন।

প্রতিস্থাপন করা

প্রত্যাবর্তন খাবার সন্ধান অ্যাপে স্বাগতম Welcome ;

সঙ্গে

ফিরে (

খাবার অনুসন্ধান অ্যাপ্লিকেশন

নাম = "পাঠ্য"
টাইপ = "পাঠ্য"
স্থানধারক = "অনুসন্ধান"
onChange = {ইভেন্ট => this.handleOnChange (ইভেন্ট)}
মান = {this.state.searchValue}
/>
);

এসআরসি ফোল্ডারে অ্যাপ্লিকেশন ক্লাসে অ্যাপ ক্লাসে আমাদের রেন্ডার ফাংশনে।

এটি আমাদের শিরোনামকে রেন্ডার করে, অনুসন্ধান বারটিকে দৃশ্যমান করে তোলে, এমন বোতামগুলি সরবরাহ করে যা এখনও কাজ করে না।

  • একটি শিরোনাম তৈরি করে

  • এটি অনুসন্ধানের নাম দিয়ে একটি অনুসন্ধান বাক্স তৈরি করে
  • অনক্লিক একটি অনক্লিক ইভেন্ট সংযুক্ত করে এবং হ্যান্ডেল অনুসন্ধান এবং হ্যান্ডেলর্যান্ডম ফাংশনগুলিকে যথাক্রমে কল করে

আমাদের ওয়েবসাইটটি এখন এটির মতো দেখাচ্ছে।

9. জসনকে পার্স করুন এবং রাজ্য ভেরিয়েবলগুলিতে সঞ্চিত এপিআইয়ের ফলাফল প্রদর্শন করুন।

পুনরায় রিটার্নের মধ্যে নিম্নলিখিত কোডটি অনুলিপি করুন বিদ্যমান কোড পরে।

{this.state.randommeal? (
{this.state.randommeal.map ((খাবার, সূচক) => (

{Meal.strMeal}

{Meal.strArea}

খাবার-থাম্বনেল
))}
): (

)}
{this.state.meals? (
{this.state.meals.map ((খাবার, সূচক) => (

{Meal.strMeal}

{Meal.strArea}

খাবার-থাম্বনেল
))}
): (

সেই খাবারটি ডাটাবেসে নেই। অন্য একটি অনুসন্ধান করার চেষ্টা করুন
খাবার

)}

এটি পৃষ্ঠায় সঞ্চিত আমাদের পরিবর্তনশীল রেন্ডার করবে।

আমাদের চূড়ান্ত App.js ফাইলটি দেখতে এমন দেখাচ্ছে

আমদানি প্রতিক্রিয়া, "প্রতিক্রিয়া" থেকে {উপাদান};
আমদানি করুন "./styles.css";
শ্রেণি অ্যাপ্লিকেশনটি উপাদানগুলি প্রসারিত করে {
state = {searchValue: "", খাবার: [], এলোমেলো: []};
হ্যান্ডেলঅনচেঞ্জ = ইভেন্ট =>
this.setState ({সার্চভ্যালু: ইভেন্ট.তারেটেজ.ভ্যালু});
};
হ্যান্ডেল অনুসন্ধান = () =>
this.makeApiCall (this.state.searchValue);
};
হ্যান্ডেলর্যান্ডম = () =>
this.makeRandomApiCall ();
};
MakeApiCall = SearchInput =>
var সন্ধান ইউআরএল = `https://www.themealdb.com/api/json/v1/1/search.php?s=$ {অনুসন্ধানআউটপুট}`;
আনা (searchUrl)
.থন (প্রতিক্রিয়া => {
রিটার্ন রেসপন্স.জসন ();
})
.থন (জসনডাটা =>
console.log (jsonData.meals);
this.setState ({খাবার: jsonData.meals});
this.setState ({এলোমেলো: []});
});
};
MakeRandomApiCall = () =>
var randomUrl = "https://www.themealdb.com/api/json/v1/1/random.php";
আনা (randomUrl)
.থন (প্রতিক্রিয়া => {
রিটার্ন রেসপন্স.জসন ();
})
.থন (জসনডাটা =>
console.log (jsonData.meals);
this.setState ({এলোমেলো: jsonData.meals});
this.setState ({খাবার: []});
});
};
রেন্ডার () {
ফিরে (

খাবার অনুসন্ধান অ্যাপ্লিকেশন

নাম = "পাঠ্য"
টাইপ = "পাঠ্য"
স্থানধারক = "অনুসন্ধান"
onChange = {ইভেন্ট => this.handleOnChange (ইভেন্ট)}
মান = {this.state.searchValue}
/>
{this.state.randommeal? (
{this.state.randommeal.map ((খাবার, সূচক) => (

{Meal.strMeal}

{Meal.strArea}

খাবার-থাম্বনেল
))}
): (

)}
{this.state.meals? (
{this.state.meals.map ((খাবার, সূচক) => (

{Meal.strMeal}

{Meal.strArea}

খাবার-থাম্বনেল
))}
): (

সেই খাবারটি ডাটাবেসে নেই। অন্য একটি অনুসন্ধান করার চেষ্টা করুন
খাবার

)}
);
}
}
এক্সপোর্ট ডিফল্ট অ্যাপ্লিকেশন;

ভাল খবর! এটি আমাদের চূড়ান্ত কার্যকারী ওয়েবসাইট। আপনি কেক বা গরুর মাংসের জন্য অনুসন্ধান করতে পারেন বা কোনও এলোমেলো ডিশ তৈরি করতে পারেন।

আপনি এখন এই প্রকল্পটি কাঁটাচামচ করতে পারেন বা এটি আপনার নিজস্ব স্যান্ডবক্স হিসাবে সংরক্ষণ করতে পারেন।

প্রস্তাবনা: আপনার সাইডবারের গিটহাব বোতামে ক্লিক করা উচিত, আপনার গিটহাব অ্যাকাউন্টে সাইন ইন করতে হবে এবং একটি গিটহাব সংগ্রহশালা তৈরি করা উচিত।

আপনার সমাধান হ্যাকারার্থে জমা দেওয়ার সময় আপনার আদর্শভাবে গিটহাব রেপো লিঙ্ক এবং কোডস্যান্ডবক্স সম্পাদক URL ভাগ করা উচিত।

এখানে আমার গিটহাব রেপো লিঙ্কটি https://github.com/hegdenaveen1/Meal- অনুসন্ধান- অ্যাপ্লিকেশন

আপনার ভাগ করে ক্লিক করে সম্পাদক URL টি ভাগ করা উচিত।

এখানে আমার সম্পাদক ইউআরএল https://codesandbox.io/s/meal-search-app-bxelw?foutsize=14&hidenavication=1&theme=dark

এটি নিশ্চিত করবে:

ধন্যবাদ!