পোশাক সংগঠক: 13 টি ধাপ

2024 লেখক: John Day | [email protected]. সর্বশেষ পরিবর্তিত: 2024-01-30 08:00

কাপড়ের জন্য কেনাকাটা হোক বা সর্বদা যেকোনো জিনিস bণ নিতে বলা হোক, এমন কিছু সময় আছে যখন আপনি ইচ্ছা করেন যে আপনি আপনার পায়খানা থেকে কোথাও উঁকি দিতে পারেন আপনার একই রকম কিছু আছে কিনা তা দেখার জন্য।

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

(*কোন গ্যারান্টি নেই

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

ধাপ 1: আপনার নিজের কপি সেট আপ

এই প্রকল্পের আপনার নিজের কপি তৈরি করে শুরু করা যাক।

গুগল ড্রাইভ

এই অ্যাপ্লিকেশনটির আমার বর্তমান সংস্করণে আপনাকে নিতে উপরের লিঙ্কে ক্লিক করুন।

আপনি এই ফোল্ডারে 3 টি আইটেম দেখতে পাবেন: একটি গুগল ফর্ম, একটি গুগল শীট এবং একটি ফোল্ডার।

গুগল শীটে ডান ক্লিক করুন এবং একটি কপি তৈরি করুন ক্লিক করুন।

এই কপির অবস্থান আপনার নিজের ড্রাইভে সেট করুন।

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

ফোল্ডার তৈরি করতে (আইটেমের ছবি আপলোড সংগ্রহের জন্য এটি প্রয়োজনীয়), কপি করা গুগল ফর্মটি ক্লিক করুন এবং একটি প্রম্পট আপনাকে আপলোডের জন্য ফোল্ডারের অবস্থান পুনরুদ্ধার করতে বলবে।

আপনার নিজের জন্য কাজ করার জন্য এখন আপনার কাছে এই নথির একটি অনুলিপি রয়েছে!

ধাপ 2: গুগল ফর্ম ওভারভিউ

এখন যেহেতু আপনার কাছে এই অ্যাপ্লিকেশনটির নিজস্ব সংস্করণ রয়েছে, আসুন চারপাশে একবার দেখে নেওয়া যাক।

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

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

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

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

আপনার নিজের কিছু আইটেম আপলোড করার আগে যথাযথ জমা দেওয়ার জন্য পরবর্তী ধাপে এগিয়ে যাওয়া যাক।

ধাপ 3: গুগল স্ক্রিপ্ট: (সার্ভার কোড.জিএস) প্রথমে ডেটা এবং কোড দেখুন

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

এই ডাটাবেসটি অতিক্রম করার সময় আপনি একটি অনন্য শনাক্তকারীর অনুমতি দেওয়ার জন্য ফর্ম জমা দেওয়ার সময় একটি আইডি ক্ষেত্র তৈরি করা হয়েছে। এই ক্ষেত্রটি তৈরি করতে, আমরা টুলস> স্ক্রিপ্ট এডিটর -এ ক্লিক করে স্ক্রিপ্ট এডিটরটি দেখে নেব।

স্ক্রিপ্ট এডিটর ওপেন হওয়ার সাথে সাথে আপনি এই নতুন উইন্ডোর সাইডবারে documents টি ডকুমেন্ট দেখতে পাবেন। এই নথিগুলি ব্যাক-এন্ড প্রক্রিয়া, ফ্রন্ট-এন্ড ডিসপ্লে এবং ফ্রন্ট-এন্ড কার্যকারিতা নিয়ন্ত্রণ করতে সহায়তা করে। আমরা প্রতিটিতে ঝাঁপ দেব (যদি আপনি চারপাশে থাকেন) তবে এখনই সার্ভার কোডে ক্লিক করুন।

সার্ভার Code.gs ফাইলে অনেকগুলি ফাংশন রয়েছে:

onSubmit (e), onOpen (), doGet (), অন্তর্ভুক্ত (fileName), openApplication (), openLaundryApp (), changeValueOnSubmit (e), setIDOnSubmit (e)

onSubmit (e) - গুগল ফর্ম জমা দিলে এই ফাংশনটি প্রথম ফাংশন হিসেবে কনফিগার করা হবে। আপনি এই ফাংশনের ভিতরে অন্যান্য ফাংশন স্থাপন করতে পারেন যাতে অনেকগুলি ভিন্ন প্রক্রিয়া ঘটতে পারে।

onOpen (e) - এই ফাংশনটিকে বলা হয় যখন গুগল শীট খোলা হয়। অ্যাপ্লিকেশন লিঙ্ক এবং ভিউতে দ্রুত অ্যাক্সেসের অনুমতি দেওয়ার জন্য এটি একটি নতুন মেনু বিকল্প তৈরি করে।

doGet ()- এই ফাংশনটি ওয়েব অ্যাপ অ্যাড্রেস কলে বলা হয়। যখন কোনো ব্যবহারকারী প্রকাশিত ওয়েব অ্যাপ ব্রাউজ করে তখন এই কোডটি সেই পৃষ্ঠাটিকে কী প্রদর্শন করতে হবে তা বলবে। এই ক্ষেত্রে, এটি ডকুমেন্ট Application.html।

অন্তর্ভুক্ত করুন (ফাইলের নাম) - এই ফাংশনটি এইচটিএমএল পেইজের ভিতরে অন্য ডকুমেন্ট পড়ার জন্য এবং তাদের বিষয়বস্তু অন্য পৃষ্ঠার মধ্যে একটি সঠিক এইচটিএমএল ফরম্যাটে toোকানোর জন্য ব্যবহার করা হয়। আমরা এটি আমাদের CSS.html এবং JS.html ফাইলের জন্য ব্যবহার করি।

openApplication () এবং openLaundryApp () - এই ফাংশনগুলোতে কোড থাকে যখন ব্যবহারকারী Google Sheet টুলবারে যোগ করা মেনু বোতামে ক্লিক করে।

changeValueOnSubmit (e) এবং setIDOnSubmit (e)- এগুলি হল এই ফাংশন যা আমরা এখন দেখব। প্রাথমিকভাবে ফর্ম জমা দেওয়ার সময় ডিফল্ট মান সহ কিছু ক্ষেত্র আপডেট করার জন্য তারা দায়ী।

ধাপ 4: OnFormSubmit সক্ষম করা

এই দুটি ফাংশন, changeValueOnSubmit (e) এবং setIDOnSubmit (e), একটি ফর্ম জমা দেওয়ার ব্যবহারকারীর কর্মের সাথে সংযুক্ত হওয়া প্রয়োজন। এটি করার জন্য আমাদের একটি ট্রিগার সক্ষম করতে হবে।

আমরা সম্পাদনা> বর্তমান প্রকল্পের ট্রিগার ক্লিক করে ট্রিগার সক্ষম করি। এটি গুগল ডেভেলপার হাব খোলে।

ট্রিগার ড্যাশবোর্ডের নিচের ডানদিকে কোণায় একটি ট্রিগার যোগ করুন বোতাম রয়েছে। এখানে ক্লিক করুন.

একটি ফর্ম জমা দিলে আমরা এখন চালানোর জন্য ফাংশন সেট আপ করব। আমাদের ক্ষেত্রে আমার একাধিক ফাংশন আছে অতএব আমরা onSubmit () নির্বাচন করব এবং এই ট্রিগারটি অন ফর্ম সাবমিট চালানোর জন্য সেট করব।

আমাদের এখন একটি কার্যকরী ফর্ম রয়েছে যা অনন্য শনাক্তকারী সহ একটি গুগল শীট তৈরি করবে এবং ডিফল্ট মান নির্ধারণ করবে।

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

ধাপ 5: ইউজার ইন্টারফেস সেট আপ করা

স্বাগত! আমরা অবশেষে যে অংশে এসেছি, ইউজার ইন্টারফেসে পৌঁছে গেছি !!!!

প্রথম দেখায়, এখানে কিছুই নেই। আমরা এখনো কোন কল করিনি। পৃষ্ঠাটি দ্রুত লোড করার জন্য আমি সিদ্ধান্ত নিয়েছি যে আপনার সমস্ত আইটেমগুলির সাথে প্রথম পৃষ্ঠাটি প্লেগ করবেন না এবং আপনি যা দ্রুত দেখতে চান তা ক্লিক করার অনুমতি দিন। যেহেতু এই ক্ষেত্রে মূল বিষয়বস্তু ক্ষেত্রে কোন আইটেম নেই এবং সাইডবারে কোন ফিল্টার নেই। আমাদের ডাটাবেসে কি আছে তা দেখতে All এ ক্লিক করুন।

আমরা এখন আমাদের ডাটাবেসের প্রতিটি আইটেমকে মূল বিষয়বস্তুর ক্ষেত্রে লোড করেছি। আপনি ছবি, আইডি নম্বর, রঙ, মাপ এবং অবস্থান দেখতে পাবেন। অবস্থানের ক্ষেত্রটি এখানেই আপডেট করা যায়! যদি আপনি আইটেমটি loanণ দেওয়ার সিদ্ধান্ত নেন তবে আপনি সেই বিকল্পটি নির্বাচন করতে পারেন, আপনি এটি আপনার পায়খানা, ড্রেসার বা লন্ড্রিতে রাখতে পারেন।

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

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

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

ধাপ 7: প্রকল্প সম্পন্ন

অভিনন্দন

আপনারা যারা আপনার আইটেমগুলি পরিচালনা করার জন্য একটি কার্যকরী ডাটাবেস চান, আপনার অনলাইন সংগঠককে স্বাগতম। এই কৌতূহলী মনের জন্য যারা এই অ্যাপ্লিকেশনের পিছনে কোডে আগ্রহী। আমি এটা ভেঙ্গে হিসাবে চারপাশে লাঠি।

*ডাটাবেসে আপনার নিজের আইটেমগুলির মধ্যে অন্তত একটি প্রবেশ করার পরে আপনি পরীক্ষার আইটেমগুলি মুছে ফেলার জন্য স্বাধীন। (যদি আপনি পাশে থাকেন তবে আমি পরে ব্যাখ্যা করব)

ধাপ 8: ধাপ 1: ব্যাক-এন্ড কোড (সার্ভার কোড.gs)

এর আগে আমরা সার্ভার Code.gs ফাইলটি খুলেছিলাম এবং আমি প্রতিটি ফাংশনকে একটি দ্রুত রান ডাউন দিয়েছিলাম কারণ তাদের উদ্দেশ্য ছিল আপনার সেট করা প্রতিটি আইটেম পরিবেশন করা কিন্তু এখন আমরা সেগুলিকে কিছু কার্যকারিতা এবং ইউটিলিটি নামিয়ে দেব এই কোডটি সফল করতে।

1) টেবিল ট্র্যাভারসিং:

var ss = SpreadsheetApp.getActiveSreadsheet (); var sheet = ss.getSheetByName ("Form Responses 1"); var পরিসীমা = sheet.getRange (1, 1, sheet.getMaxRows ()); var rowNum = range.getLastRow ();

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

2) একটি আইডি বরাদ্দ করা:

var LastID = range.getCell (rowNum-1, 1); var CellValue = Number (LastID.getValue ()); var ColA = 1; var সর্বোচ্চ = 15; var min = 5; CellValue = CellValue + Math.round ((Math.random ()* (max - min) + min)); e.source.getActiveSheet ().getRange (range.getLastRow (), ColA).setValue (CellValue); changeValueOnSubmit (e);

• আমি আগে জিজ্ঞাসা করেছি যে ডেমো মানগুলি টেবিলে রেখে দেওয়া হবে যতক্ষণ না ব্যবহারকারী তাদের জন্য অন্তত একটি মান জমা দেয়। এর কারণ হল অটো আইডি জেনারেটর জনসংখ্যার জন্য ডাটাবেসের শেষ মানের উপর নির্ভর করে।
• আমি শেষ ২ য় থেকে শেষ সারি এনেছি কারণ শেষ সারিটি হল আমাদের নতুন মান এবং আইডি মানের জন্য ১ ম কলাম।
• আমি তারপর এলোমেলোভাবে 5 থেকে 15 এর মধ্যে একটি সংখ্যা উৎপন্ন করি এবং শেষ মানটিতে যোগ করি। *
• অবশেষে আমি এই মানটি শেষ সারির আইডি কলামে রাখি।
• পরবর্তী আমরা changeValueOnSubmit (e) ফাংশনকে কল করি।

* আমি ভবিষ্যতে লেবেলিং এবং গুগল হোম ইন্টিগ্রেশন করার অনুমতি দেওয়ার জন্য 5-15 বেছে নিয়েছি যাতে নম্বরগুলি হ্যাঙ্গার বা পোশাকের ট্যাগ বা বারকোডগুলিতে বিভ্রান্তি সৃষ্টি করতে যথেষ্ট ঘনিষ্ঠ হবে না।

3) ইউআরএল মান পরিবর্তন করা:

var DataChange = e.namedValues ["Item Picture"]; var DefaultLocation = e.namedValues ["আপনি পোশাকের এই প্রবন্ধটি কোথায় রাখছেন?"]; var ColD = ColumnID _ ("আইটেম ছবি") +1; var ColLoc = ColumnID _ ("Default Location")+1; DataChange = DataChange.toString ()। প্রতিস্থাপন ("open?", "uc? export = view &"); e.source.getActiveSheet ().getRange (e.range.rowStart, ColD).setValue (DataChange); e.source.getActiveSheet ().getRange (e.range.rowStart, ColLoc).setValue (DefaultLocation);

• গুগল ফর্মের মাধ্যমে একটি ফটো জমা দেওয়ার সময় গুগল শীটে ইউআরএল ertedোকানো হল প্রকৃত নথির একটি লিঙ্ক। আমাদের ক্ষেত্রে, যেহেতু আমরা একটি HTML পৃষ্ঠা তৈরি করছি আমরা চাই যে লিঙ্কটি কেবলমাত্র চিত্র।
• "খোলা" পরিবর্তন করে? URL এর কিছু অংশ "uc? export = view &" এর পরিবর্তে আমরা ছবির একটি লিঙ্ক তৈরি করেছি।
• আমরা আবার এই নতুন মানটিকে বর্তমান আইটেম পিকচার লিঙ্কের অবস্থানে রাখব।
• আমি ডাটাবেসে একই জিনিসের "ডিফল্ট লোকেশন" এবং "বর্তমান অবস্থান" সেট করছি। আমার লন্ড্রি মোড ব্যবহার করার সময় এটি সাহায্য করবে।

• আমরা পরবর্তী পৃষ্ঠায় এটিতে ডুব দেব কিন্তু এটি আমার তৈরি করা ColumnID_ () ফাংশনে আমাদের প্রথম নজরে।

  এই ফাংশনটি কলামের নাম ব্যবহার করে এটিকে কলাম পূর্ণসংখ্যায় অনুবাদ করে যা রেঞ্জ কলিংয়ের জন্য সহায়ক যার জন্য নামের পরিবর্তে একটি কলাম নম্বর প্রয়োজন।

4) স্প্রেডশীট App.getUI ()

• দ্বিতীয় ছবিতে আপনি SpreadsheetApp.getUI () এর ব্যবহার দেখতে পারেন যেমনটি গুগল শীটে টুলবার মেনু সংযোজন তৈরি করতে ব্যবহৃত হয়েছিল।
• . GetUI () ফাংশন একটি মোডাল পপআপ তৈরি করতে সাহায্য করে যা লন্ড্রি মোডের জন্য এবং ওয়েবসাইট ইন্টারফেসের দ্রুত লিঙ্ক হিসাবে ব্যবহৃত হয়।

5) এইচটিএমএল সার্ভিস

• এই কোডে দুই ধরনের HTML সার্ভিস ব্যবহার করা হয়: টেমপ্লেট এবং HTML আউটপুট
• টেমপ্লেট এইচটিএমএল কোডের ভিতরে কোড forোকানোর অনুমতি দেয় যাতে পৃষ্ঠা কল করা হলে সার্ভার থেকে আসা তথ্য পপুলেট করা যায়।
• এইচটিএমএল আউটপুট সহজ এইচটিএমএল পৃষ্ঠা প্রদর্শন করে।
• আমাদের অন্তর্ভুক্ত () পদ্ধতি রয়েছে যা আমাদের একাধিক HTML ফাইল তৈরি করতে এবং একটি স্ট্রিংয়ের পরিবর্তে HTML ফর্ম্যাটে ফাইলের বিষয়বস্তু ফেরত দিয়ে একটি টেমপ্লেটেড HTML ফাইলে একত্রিত করতে দেয়।

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

ধাপ 9: ধাপ 2: ব্যাক-এন্ড কোড পার্ট 2 (সার্ভার কলস.জিএস)

এখন আমরা সার্ভার Calls.gs এ প্রবেশ করেছি। এই ফাংশনগুলি প্রাথমিকভাবে এইচটিএমএল জাভাস্ক্রিপ্টে ব্যবহৃত হয় তাই সেগুলি কোড থেকে আলাদা করা হয়েছে যা প্রাথমিকভাবে সার্ভার Code.gs এ অবস্থিত ব্যাক এন্ডে ব্যবহৃত হয়।

ছবি 1) গ্লোবাল ভেরিয়েবল:

ছবি 2) আইটেম আনা হচ্ছে:

ছবি 3) fetchItemsQry

ছবি 4) ফিল্টার আইটেম

ছবি 5) fetchFiltersWithQry

ছবি 6) কলাম আইডি, এবং ক্যাশে কলস

এই প্রত্যেকের সাথে কথা বলার জন্য অনেক কিছু আছে। এবং কোডটি ভেঙে দেওয়ার জন্য এবং কী চলছে তা ব্যাখ্যা করার জন্য আমার আরও কিছু টাইপ করার জায়গা দরকার। ServerCalls.gs এর কোড ভাঙ্গার জন্য একটি নথি সংযুক্ত করা হয়েছে

এই দস্তাবেজটি গুগল অ্যাপ স্ক্রিপ্ট ডকুমেন্টেশনের মতো সেট আপ করা হয়েছে এবং এমনকি অনুরূপ বস্তুর লিঙ্কও তৈরি করে।

ধাপ 10: ধাপ 3: HTML কোড (Application.html)

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

1) Application.html পৃষ্ঠার শিরোনামে আমরা একটি শিরোনাম স্থাপন করি এবং আমাদের CSS.html পৃষ্ঠাটি লোড হওয়ার জন্য কল করি।

*একটি টেমপ্লেটেড এইচটিএমএল পেজ হওয়ায় আমরা সার্ভার কোড.গসে পূর্বে উল্লিখিত অন্তর্ভুক্ত (পেজ নেম) পদ্ধতি ব্যবহার করে বর্তমান স্ক্রিনকে বিশৃঙ্খলা না করে এই ডকুমেন্টে আরও কোড যুক্ত করতে পারি।

এই ছবিতে প্রধান হেডার বক্সও পাওয়া যায়। আপনি এখানে শিরোলেখটি পরিবর্তন করতে পারেন এবং "[আপনার নাম] এর পোশাক" বা অন্য যেটি আপনি এই পৃষ্ঠাটিকে স্বীকৃতি দিতে চান তা লিখতে পারেন।

2) হেডারের ঠিক নিচে আমাদের শীর্ষ ন্যাভিগেশন বার।

এই নেভিগেশন বারে আমাদের গুগল শীটের ভিতরে আর্টিকেল শীটে তালিকাভুক্ত সমস্ত প্রকার নিবন্ধ অন্তর্ভুক্ত রয়েছে।

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

3) প্রধান শরীর।

এই অংশে 4 টি অংশ রয়েছে। একটি টেক্সট আউটপুট, সাইডবার ফিল্টার, প্রধান বডি ইমেজ এবং জেএস অন্তর্ভুক্ত।

টেক্সট আউটপুট ব্যবহারকারীকে তাদের নির্বাচিত মেনু বিকল্পের উল্লেখ না করে বর্তমানে কোন ধরনের আইটেম দেখছে তার জন্য দ্রুত পাঠ্য দেখার অনুমতি দেয়।

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

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

অবশেষে অন্তর্ভুক্ত (জেএস), আসুন পরবর্তী ধাপে এটি একবার দেখে নেওয়া যাক।

ধাপ 11: ধাপ 4: জাভাস্ক্রিপ্ট কোড (JS.html)

আপনি যদি মনে করেন সার্ভার কোডটি একটি ভারী বিভাগ ছিল তবে এর একটি লোড পান।

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

স্ক্রিপ্টটি কল করে: আমি এই প্রকল্পের জন্য 3 টি ভিন্ন লাইব্রেরি ব্যবহার করছি; jquery, বুটস্ট্র্যাপ, এবং একটি বিশেষ বুটস্ট্র্যাপ-নির্বাচন অ্যাড-অন। এই লাইব্রেরিগুলি এইচটিএমএল কোডের মধ্যে উপাদানগুলিকে বিন্যাস এবং সহজে কল করার অনুমতি দেয়।

জাভাস্ক্রিপ্টের আমার পরবর্তী গুরুত্বপূর্ণ লাইন নিচে দেওয়া হল:

$ (ডকুমেন্ট).keypress (ফাংশন (ইভেন্ট) {যদি (event.which == '13') {event.preventDefault (); }});

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

ফাংশন removeFilters () {google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure). ServerRemoveFilters (); }

ফাংশন updateDBlocation (id, value) {google.script.run.withSuccessHandler (allGood).withFailureHandler (FailDBUpdate).updateLocation (id, value); }

এখানে দুটি ফাংশন যা সার্ভার Code.gs ফাইলে কল করছে। লাইন:

google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure). ServerRemoveFilters ();

এটিতে অনেকগুলি কার্যকরী অংশ রয়েছে কিন্তু কঙ্কালটি "google.script.run" থেকে উদ্ভূত যা HTML পৃষ্ঠাকে নিম্নলিখিত ফাংশনটি সার্ভারে রয়েছে তা বলে।

• এই কোডের শেষ বিটটি হল রান করার ফাংশন। এই উদাহরণে ServerRemoveFilter ()
• একটি withSuccessHandler () যোগ করে HTML পৃষ্ঠা এখন জানে যে ডেটা ফেরত দেওয়া হয়েছে, এবং এটি হল বন্ধনী দিয়ে ফাংশনটি চালানো।
• একই সঙ্গে প্রযোজ্য withFailureHandler ()

এখন যেহেতু আমরা সার্ভার কোড কলটি ভেঙে ফেলেছি, আসুন এই সার্ভার কল সফল এবং ব্যর্থ হলে কী ঘটে তা একবার দেখে নেওয়া যাক।

ফাংশন allGood (e) {console.log ("সার্ভারে সাফল্য"); } ফাংশন অন ফেইলুর (ত্রুটি) {$ ("#বার্তা-বাক্স")। html ("

এই সময়ে পোশাক আইটেম আনতে অক্ষম ত্রুটি: " + error.message +"

");} ফাংশন FailDBUpdate (ত্রুটি) {$ ("#বার্তা-বাক্স ")। html ("

আপনার অবস্থান পরিবর্তন করার অ্যাক্সেস নেই। ত্রুটি: " + error.message +"

"); $ ("। অবস্থান-নির্বাচন ")। প্রপ ('অক্ষম', 'অক্ষম');}

লোকেশন ফাংশন চালানো হলে সাফল্য বোঝাতে আমি একটি খুব সহজ কনসোল লগ তৈরি করেছি যা আপনি allGood () হিসাবে দেখতে পারেন।

ত্রুটিগুলি পরিচালনা করার সময়, এই দুটি ফাংশন ত্রুটি বার্তাটি আউটপুট করে যেখানে ব্যবহারকারী "মেসেজ-বক্স" এর একটি আইডি সহ HTML বস্তুর একটি jQuery কল ব্যবহার করে দেখতে পারেন।

এবার আসুন কটাক্ষের কাজে নেমে পড়ি

ধাপ 12: ধাপ 5: জাভাস্ক্রিপ্ট কোড-ক্লিক অ্যাকশন (JS.html)

উপরের মেনু বারে প্রতিটি নিবন্ধের জন্য বিকল্প রয়েছে। তারা যে ফাংশনটি ক্লিক করে চালায় তা হল:

function filterType (article, id) {$ ("ul.navbar-nav li.active")। RemoveClass ("active"); $ ("#currentArticle")। html ("// HTML কোড এখানে");

updateSideBar = সত্য;

google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure).fetchItems ("নিবন্ধ", নিবন্ধ); var newSelect = "#type-"+id; $ (newSelect).addClass ("সক্রিয়"); $ ("#myNavbar")। RemoveClass ("in"); }

আমরা এই কোডে দেখতে পাচ্ছি আমাদের একটি google.script.run আছে যা সার্ভারকে তথ্য পুনরুদ্ধারের জন্য কল করে। এই কলটির সাফল্য ফাংশন হল updateItems ()।

ছবি 1 (এই ফাংশনের মধ্যে ভারী এইচটিএমএল কোডের সাথে এই বাক্সে জগাখিচুড়ি না দেখিয়ে কোডটি কঠোরভাবে অনুলিপি করা কঠিন)

UpdateItems () কোডে, আমাদের অনেক কিছু ঘটছে। আবার আমাদের অবজেক্ট দিয়ে ফিরে যেতে হবে যা আমাদের কাছে ফেরত দেওয়া হয়েছে এবং প্রতিটি আইটেমকে আমাদের মূল বডি পৃষ্ঠায় যুক্ত করতে হবে।

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

প্রতিটি আইটেমের লুপে, আমি এমন ক্ষেত্রগুলি সরিয়ে দিচ্ছি যা আমি বর্ণনায় দেখতে চাই না যেমন ডিফল্ট, টাইমস্ট্যাম্প এবং ছবির URL। আমি বর্ণনা থেকে ছবির ইউআরএল অপসারণ করি কারণ এটি পরিবর্তে একটি ট্যাগে href হিসাবে যোগ করা হচ্ছে। একবার এই তথ্য একত্রিত করা হলে এটি jQuery.append () ফাংশন ব্যবহার করে মূল সংস্থায় পাঠানো হয়।

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

ছবি 2 (সাইডবার আপডেট করা)

UpdateItems () ফাংশনের অনুরূপ, আমাদের আবার HTML কোডের অ্যারে এবং সমস্ত ফিল্টার অপশনের জন্য একটি লুপ রয়েছে। শুধুমাত্র লক্ষণীয় পরিবর্তন হল jQuery.selectpicker ('রিফ্রেশ')। এই ফাংশনটি স্ক্রিপ্ট লাইব্রেরি থেকে এসেছে যা আমরা শেষ ধাপে অন্তর্ভুক্ত করেছি। এটি প্রোগ্রামারকে একটি সহজ নির্বাচিত এইচটিএমএল লেখার অনুমতি দেয় এবং লাইব্রেরিকে এটি অনুসন্ধানযোগ্য ফাংশন এবং সিএসএস কোড অন্তর্ভুক্ত করার জন্য আপডেট করতে দেয়।

ছবি 3 (সাইডবার দিয়ে ফিল্টার করা)

অবশেষে আমাদের আছে updateFilter (formData) ফাংশন। এটি ব্যবহার করা হয় যখন সাইডবার থেকে একটি ফর্ম জমা দেওয়া হয়। আমরা jQuery ফাংশন ব্যবহার করে শুরু করি এবং আমরা আবার ছবি 1 থেকে প্রক্রিয়া শুরু করি।

ধাপ 13: শেষ … শেষ পর্যন্ত

আচ্ছা আপনার কাছে আছে; আপনার নিজের অনলাইন ওয়ারড্রোব সেট আপ করতে সাহায্য করার জন্য একটি সম্পূর্ণ এবং পুঙ্খানুপুঙ্খ ব্যাখ্যা, অথবা আপনার নিজস্ব প্রকল্প প্রসারিত করতে আমার গুগল স্ক্রিপ্টগুলিতে তৈরি কার্যকারিতা ব্যবহার করুন।

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