کمد لباس: 13 مرحله

2024 نویسنده: John Day | [email protected]. آخرین اصلاح شده: 2024-01-30 08:55

چه خرید لباس باشد و چه همیشه از شما خواسته شود که اقلامی را وام بگیرید ، مواقعی وجود دارد که آرزو می کنید از هر جایی به کمد خود نگاه کنید تا ببینید آیا چیزی مشابه دارید یا خیر. سازمان دهنده کمد لباس این کار را انجام می دهد و بیشتر!

این یک فروشگاه یک طرفه است و برای بسیاری از اهداف دیگر گسترده است. My Wardrobe Organizer ترکیبی از Google Sheets به عنوان پایگاه داده SQL ، Google Scripts برای مدیریت داده ها و Google WebApp برای یک درگاه آنلاین به این داده ها است. کاربر نهایی می تواند همه موارد را ببیند ، برای چیزی خاص فیلتر کند ، اقلام را به عنوان قرض علامت گذاری کند ، لباس های خود را مدیریت کند و مادر را از خرید پیراهن مشابه برای کریسمس برای شما منع کند*.

(*بدون ضمانت. مادران آنچه را که می خواهند خریداری می کنند ، چه به آن نیاز داشته باشید یا نه)

با نگاهی گذرا به طراحی وب سایت در تصویر بالا ، ممکن است یک طرح آشنا را تشخیص دهید. Wardrobe Organizer مانند هر وب سایت پوشاک معمولی راه اندازی شده است. این رابط به تفکیک بخش ها و فیلترهای ارائه شده در کنار ، آشنایی با عملکرد را برای کاربر معمولی به ارمغان می آورد. و استفاده از آن ساده است.

مرحله 1: تنظیم کپی شخصی خود

بیایید با ایجاد کپی شخصی خود از این پروژه شروع کنیم.

درایو گوگل

روی پیوند بالا کلیک کنید تا شما را به نسخه فعلی این برنامه ببرم.

3 مورد را در این پوشه مشاهده خواهید کرد: یک فرم Google ، یک کاربرگ Google و یک پوشه.

روی Google Sheet راست کلیک کرده و روی Make A Copy کلیک کنید.

مکان این نسخه را روی Drive خود تنظیم کنید.

پس از کپی این سند ، فرم Google به طور خودکار در همان پوشه ای که Google Sheet را منتقل کرده اید ایجاد می شود.

برای ایجاد پوشه (این مورد برای جمع آوری بارگذاری تصاویر مورد مورد نیاز است) ، روی فرم Google کپی شده کلیک کنید و پیامی ظاهر می شود که از شما می خواهد محل پوشه بارگذاری شده را بازیابی کنید.

شما در حال حاضر یک نسخه از این سند را دارید که برای خودتان کار کنید!

مرحله 2: مرور کلی فرم Google

اکنون که نسخه اختصاصی این برنامه را دارید ، اجازه دهید نگاهی به اطراف بیندازیم.

فرم Google شما طوری تنظیم شده است که انواع مختلفی از اقلام را بپذیرد. با این حال پیراهن ها ، شلوارها ، لباس ها و کفش ها دارای محدودیت های سایز متفاوت هستند. بنابراین بخش متفاوتی از این فرم بر اساس دپارتمانی که مورد خود را در آن ثبت کرده اید پر می شود. در قالب (مقاله مردان) من 5 دسته بندی اندازه مختلف ایجاد کرده ام. (برای مقالات زنان ، اینجا را کلیک کنید ، بسیاری دیگر وجود دارد).

در هر بخش اندازه ، یک عنوان منحصر به فرد برای هر پارامتری که جمع آوری خواهم کرد ، ایجاد کردم. ما نمی خواهیم ستون های متعددی با نام "اندازه" در پایگاه داده خود داشته باشیم ، در غیر این صورت نمی توانیم تعیین کنیم که این اندازه برای چه نوع لباسی کاربرد دارد.

در پایان هر بخش ، کاربر به قسمت نهایی این فرم هدایت می شود: مکان. من شخصاً برای تعیین اقلام در خشکشویی ها ، در لباسشویی ، در محل آنها یا مواردی که به آنها اجازه داده ام وام بگیرم ، مکان را اضافه کردم. این به من این امکان را می دهد که سازماندهی شده باشم و هرگز احساس نکنم که یک تکه لباس را در جایی از دست داده ام.

همانطور که از ابتدا اشاره کردم ، این پروژه را می توان به میلیون ها روش مختلف گسترش داد. می توانید از آن برای موجودی ، یک ابزار سازماندهی دقیق تر ، یا برای امانت دقیق لباس استفاده کنید. زمینه ها و بخشهایی که می توانید اضافه کنید بی پایان هستند ، بنابراین محدود به آنچه در فرم من است احساس نکنید. (برای مقالات زنان اینجا را کلیک کنید)

قبل از بارگذاری چند مورد از موارد خود ، بیایید به مرحله بعدی برویم تا از ارسال مناسب اطمینان حاصل کنیم.

مرحله 3: اسکریپت های Google: (Server Code.gs) ابتدا به داده ها و کد نگاه کنید

با کلیک روی سند Google Sheets ، ستون های زیادی از داده ها را مشاهده خواهید کرد (و برخی از سطرها ، که برای نمایش باقی مانده اند). در هنگام ارسال فرم ، برخی از بخشها حذف می شوند ، این از داده های مفقود شده در برخی از ستون ها مشهود است. اما ستون های دیگری مانند ID ، Default Location ، Who و Updated برای ردیابی بهتر ویرایش این موارد اضافه شده است.

هنگامی که فرم را ارسال کردید ، یک فیلد شناسه ایجاد شده است تا هنگام مرور این پایگاه داده ، شناسه منحصر به فردی را مجاز کنید. برای ایجاد این زمینه ، ما با کلیک روی ابزارها> ویرایشگر اسکریپت به ویرایشگر اسکریپت نگاهی می اندازیم.

با باز کردن ویرایشگر اسکریپت ، 8 سند را در نوار کناری این پنجره جدید مشاهده خواهید کرد. این اسناد به کنترل فرایند back-end ، نمایشگرهای front-end و قابلیت های front-end کمک می کند. ما وارد هر کدام می شویم (اگر شما در اطراف) ، اما در حال حاضر بر روی کد سرور کلیک کنید.

در فایل سرور Code.gs توابع زیادی وجود دارد:

onSubmit (e) ، onOpen () ، doGet () ، شامل (نام فایل) ، openApplication () ، openLaundryApp () ، changeValueOnSubmit (e) ، setIDOnSubmit (e)

onSubmit (e) - این عملکرد به عنوان اولین عملکردی که هنگام ارسال فرم Google اجرا می شود پیکربندی می شود. شما می توانید توابع دیگری را درون این تابع قرار دهید تا امکان انجام بسیاری از فرایندها وجود داشته باشد.

onOpen (e) - این عملکرد هنگام باز شدن برگه های Google فراخوانی می شود. این گزینه منوی جدیدی را برای دسترسی سریع به پیوندها و نماهای برنامه ایجاد می کند.

doGet ()- این عملکرد در فراخوانی آدرس وب برنامه فراخوانی می شود. هنگامی که کاربر برنامه وب منتشر شده را مرور می کند ، این کد به آن صفحه می گوید که چه چیزی را نمایش دهد. در این مورد ، سند Application.html است.

include (نام فایل) - این تابع در داخل صفحات HTML برای خواندن سایر اسناد و درج محتویات آنها در قالب HTML مناسب در یک صفحه دیگر استفاده می شود. ما از آن برای فایل های CSS.html و JS.html خود استفاده می کنیم.

openApplication () و openLaundryApp () - این توابع حاوی کدی هستند که هنگام کلیک کاربر روی دکمه های منو اضافه شده به نوار ابزار Google Sheet اجرا می شود.

changeValueOnSubmit (e) و setIDOnSubmit (e)- اینها توابعی هستند که ما در حال حاضر آنها را بررسی خواهیم کرد. آنها مسئول به روزرسانی فیلدهای خاص با مقادیر پیش فرض هنگام ارسال فرم در ابتدا هستند.

مرحله 4: فعال کردن OnFormSubmit

این دو عملکرد ، changeValueOnSubmit (e) و setIDOnSubmit (e) ، باید به عملکرد کاربر در ارسال یک فرم متصل شوند. برای این کار باید Trigger را فعال کنیم.

ما با کلیک روی Edit> triggers فعلی پروژه ، ماشه را فعال می کنیم. با این کار Google Developer Hub باز می شود.

در گوشه سمت راست پایین داشبورد ماشه یک دکمه افزودن ماشه وجود دارد. اینجا کلیک کنید.

اکنون عملکردی را تنظیم می کنیم که هنگام ارسال فرم اجرا شود. در مورد ما ، من چندین تابع (changeValueOnSubmit (e) و setIDOnSubmit (e)) دارم که داخل یک تابع onSubmit () قرار داده ام ، بنابراین فقط باید 1 ماشه راه اندازی کنم. بنابراین ما onSubmit () را انتخاب می کنیم و این ماشه را برای اجرای On form submit تنظیم می کنیم.

ما در حال حاضر یک فرم کار داریم که یک برگه Google با شناسه های منحصر به فرد پر کرده و مقادیر پیش فرض را تعیین می کند.

اکنون می توانید موارد خود را با استفاده از فرم Google بارگذاری کنید. (این کار برای ادامه لازم نیست زیرا مقادیر نمایشی در آن وجود دارد). اکنون وارد رابط کاربری می شویم.

مرحله 5: تنظیم رابط کاربری

خوش آمدی! ما سرانجام به قسمتی که شما برای آن آمده بودید ، به رابط کاربری رسیدیم !!!!

در نگاه اول ، اینجا چیزی وجود ندارد. ما هنوز هیچ تماسی نگرفته ایم برای بارگیری سریعتر صفحه ، تصمیم گرفتم صفحه اول را با همه موارد خود آزار ندهم و به شما اجازه می دهم آنچه را که می خواهید سریعتر ببینید سریعتر کلیک کنید. از آنجا که این مورد وجود دارد ، هیچ موردی در قسمت محتوای اصلی و هیچ فیلتری در نوار کناری وجود ندارد. بیایید روی All کلیک کنیم تا ببینیم چه چیزی در پایگاه داده ما وجود دارد.

اکنون همه موارد موجود در پایگاه داده خود را در قسمت محتوای اصلی بارگذاری کرده ایم. تصاویر ، شماره شناسه ، رنگ ، اندازه و مکان ها را مشاهده خواهید کرد. قسمت مکان را می توانید همین جا به روز کنید! اگر تصمیم دارید اقلامی را به امانت بگذارید ، می توانید آن گزینه را انتخاب کنید ، می توانید آن را در کمد ، کمد یا لباسشویی خود قرار دهید.

و در نوار کناری ما هر قسمت ممکن برای هر پوشاک را در جستجوی جدید خود داریم. فقط تصور کنید که 20 گزینه اندازه مختلف در این نوار کناری وجود داشته باشد ، بسیار م effectiveثر نخواهد بود ، بنابراین بیایید جستجوی خود را با کلیک روی Accessories محدود کنیم.

حالا که لوازم جانبی را بارگذاری کردیم ، به نوار کناری نگاه کنید. فقط در 3 زمینه تنظیم شده است ، زیرا این پارامترها برای هر مورد در این پرس و جو اعمال می شود. من می خواهم یک نوع را بر اساس رنگ انجام دهم. با کلیک روی رنگ ، یک کادر کشویی ظاهر می شود. در اینجا من می توانم رنگ مورد نظر خود را تایپ کرده و سپس آن را انتخاب کنم ، یا اگر گزینه خود را بلافاصله دیدم ، فقط روی آن کلیک می کنم. من قرمز را برای این تظاهرات انتخاب کردم. روی اعمال فیلتر در پایین این نوار کناری کلیک کنید و محتوای اصلی با مواردی که رنگ قرمز را به عنوان پارامتر رنگ خود تنظیم کرده اند به شما نشان داده می شود.

قبلاً اشاره کردم که این پایگاه داده به من کمک می کند تا اقلام خود را به صورت قرضی و در لباسشویی مدیریت کنم. برای سهولت کار ، به جای کلیک دستی بر روی هر مکان کشویی در این صفحه اصلی ، حالت لباسشویی را ایجاد کردم. به صفحه Google Sheet برگردید و در زیر App View حالت Laundry Mode را مشاهده خواهید کرد. این گزینه یک مودال کوچکتر را نشان می دهد که فقط مواردی را با محل لباسشویی نشان می دهد. اکنون می توانم همه این موارد را به عنوان پیش فرض علامت گذاری کنم که آنها را در مکانهایی که معمولاً در آنها ذخیره شده است ، قرار می دهد.

مرحله 7: پروژه به پایان رسید

مبارک باد

برای کسانی از شما که فقط می خواهند یک پایگاه داده فعال برای مدیریت موارد شما باشند ، به Organizer Online خود خوش آمدید. برای آن دسته از افراد کنجکاو که به کد پشت این برنامه علاقه مند هستند. همانطور که من آن را خراب می کنم بچسبید.

*شما می توانید موارد تست را پس از وارد کردن حداقل یکی از موارد خود در پایگاه داده حذف کنید. (بعداً اگر سر و کار داشته باشید توضیح می دهم).

مرحله 8: مرحله 1: کد Back-End (سرور Code.gs)

پیشتر ما فایل Code.gs سرور را باز کردیم و من هر یک از توابع را به سرعت توضیح دادم ، زیرا هدف آنها ارائه هر یک از مواردی بود که شما تازه تنظیم کرده اید ، اما اکنون ما برخی از عملکردها و امکانات مفید آنها را تجزیه می کنیم. برای موفقیت این کد

1) پیمایش جدول:

var ss = SpreadsheetApp.getActiveS spreadsheet () ؛ var sheet = ss.getSheetByName ("پاسخ فرم 1") ؛ var range = sheet.getRange (1 ، 1 ، sheet.getMaxRows ()) ؛ var rowNum = range.getLastRow ()؛

• این کد مبنایی برای مرور یک کاربرگ Google است. من برگه را با نام و نه شماره صدا می زنم تا در صورت حذف یا مرتب سازی مجدد ورق ها همچنان بتوان به درستی عمل کرد.
• در این کد من فقط محدوده را برای همه داده های جدول جمع آوری می کنم.

2) اختصاص شناسه:

var LastID = range.getCell (rowNum-1، 1) ؛ var CellValue = شماره (LastID.getValue ()) ؛ var ColA = 1 ؛ var max = 15؛ var min = 5؛ CellValue = CellValue + Math.round ((Math.random ()* (حداکثر - دقیقه) + دقیقه)) ؛ e.source.getActiveSheet ().getRange (range.getLastRow () ، ColA).setValue (CellValue) ؛ changeValueOnSubmit (e) ؛

• قبلاً درخواست کرده بودم که مقادیر نمایشی در جدول باقی بماند تا زمانی که کاربر حداقل یک مقدار برای خود ارسال کرده باشد. این به این دلیل است که مولد خودکار ID به آخرین مقدار موجود در پایگاه داده تکمیل می کند.
• من آخرین ردیف دوم تا آخر را می آورم زیرا آخرین ردیف مقدار جدید ما و ستون 1 برای مقدار ID است.
• سپس به طور تصادفی عددی بین 5 تا 15 ایجاد می کنم و آن را به آخرین مقدار اضافه می کنم. *
• در نهایت این مقدار را در ستون ID ردیف آخر قرار می دهم.
• سپس تابع changeValueOnSubmit (e) را فرا می خوانیم.

* من 5-15 را برای برچسب زنی و ادغام Google Home انتخاب کردم تا اعداد آنقدر نزدیک نباشند که باعث ایجاد سردرگمی در چوب لباسی یا برچسب لباس یا بارکد شود.

3) تغییر مقدار URL:

var DataChange = e.namedValues ["Item Picture"]؛ var DefaultLocation = e.namedValues ["این پوشاک را کجا نگهداری می کنید؟"]؛ var ColD = ColumnID _ ("Item Picture") +1؛ var ColLoc = ColumnID _ ("محل پیش فرض")+1 ؛ DataChange = DataChange.toString (). جایگزین ("باز شود؟" ، "uc؟ export = view &")؛ e.source.getActiveSheet ().getRange (e.range.rowStart، ColD).setValue (DataChange) ؛ e.source.getActiveSheet ().getRange (e.range.rowStart، ColLoc).setValue (DefaultLocation) ؛

• هنگام ارسال عکس از طریق فرم Google ، نشانی اینترنتی درج شده در کاربرگ Google یک پیوند به سند واقعی است. در مورد ما ، هنگام ایجاد یک صفحه HTML ، می خواهیم پیوند فقط یک تصویر باشد.
• با تغییر "باز؟" بخشی از URL به "uc؟ export = view &" ما به جای آن پیوندی به تصویر ایجاد کرده ایم.
• ما دوباره این مقدار جدید را در محل پیوند Item Picture فعلی قرار می دهیم.
• من همچنین "مکان پیش فرض" و "مکان فعلی" مورد را در پایگاه داده یکسان تنظیم می کنم. این در هنگام استفاده از حالت لباسشویی من کمک کننده خواهد بود.

• در صفحه بعد به آن می پردازیم ، اما این اولین نگاه ما به تابع ColumnID_ () است که ایجاد کردم.

  این تابع از نام ستون برای ترجمه آن به عدد صحیح ستون استفاده می کند که برای فراخوانی محدوده مفید است و به جای ستون به شماره ستون نیاز دارد

4) SpreadsheetApp.getUI ()

• در تصویر دوم می توانید از SpreadsheetApp.getUI () استفاده کنید که برای ایجاد یک منوی نوار ابزار به برگه Google استفاده می شد.
• تابع.getUI () همچنین به ایجاد یک پنجره مودال که برای حالت لباسشویی و به عنوان پیوند سریع به رابط وب سایت استفاده می شود ، کمک می کند.

5) سرویس HTMLService

• دو نوع سرویس HTML در این کد استفاده می شود: Template و HTMLOutput
• قالب اجازه می دهد تا کد در داخل کد HTML قرار داده شود تا اطلاعاتی که از سرور دریافت می شود هنگام فراخوانی صفحه پر شود.
• خروجی HTML صفحات ساده HTML را نمایش می دهد.
• ما همچنین دارای روش include () هستیم که به ما امکان می دهد چندین فایل HTML ایجاد کرده و آنها را با برگرداندن محتویات فایل در قالب HTML به جای رشته ، در یک قالب HTML قالب بندی شده ترکیب کنیم.

من سندی را تنظیم کرده ام که مانند Google App Scripts Documentation برای آشنایی با نحوه توضیح کد منبع و عملکرد در Google Apps است.

مرحله 9: مرحله 2: کد پشتی بخش 2 (سرور Calls.gs)

اکنون سرور Calls.gs را وارد کرده ایم. این توابع عمدتا در جاوا اسکریپت HTML استفاده می شوند ، بنابراین از کدی که عمدتا در قسمت پشتی که در Server Code.gs قرار دارد جدا شده است.

تصویر 1) متغیرهای جهانی:

تصویر 2) واکشی موارد:

تصویر 3) fetchItemsQry

تصویر 4) موارد فیلتر

تصویر 5) fetchFiltersWithQry

تصویر 6) ColumnID و CacheCalls

با هر کدام از این موارد بسیار می توان در مورد آن صحبت کرد. و برای شکستن کد و توضیح آنچه در حال رخ دادن است ، به فضای تایپ کمی بیشتری نیاز داشتم. پیوست یک سند برای تجزیه و تحلیل کد ServerCalls.gs است

این سند مانند Google App Scripts Documentation تنظیم شده است و حتی به اشیاء مشابه پیوند می دهد.

مرحله 10: مرحله 3: کد HTML (Application.html)

کد HTML در کادر محاوره ای Instructable بسیار ناراضی است. بنابراین لطفاً تصاویر بالا را دنبال کنید.

1) در سرصفحه Application.html یک عنوان ایجاد می کنیم و با صفحه CSS.html خود تماس می گیریم تا بارگذاری شود.

*به عنوان یک صفحه HTML قالب بندی شده ، می توانیم کد بیشتری را به این سند بدون به هم ریختن صفحه فعلی با استفاده از روش شامل (pageName) که در Server Code.gs ذکر شده است اضافه کنیم.

جعبه سربرگ اصلی نیز در این تصویر یافت می شود. می توانید سرصفحه را در اینجا تغییر دهید و "کمد لباس نام شما" یا هر چیز دیگری را که می خواهید این صفحه به عنوان آن شناخته شود وارد کنید.

2) درست زیر سربرگ نوار ناوبری بالا ما قرار دارد.

این نوار پیمایش شامل همه انواع مقاله هایی است که در برگه مقاله در برگه های Google ما ذکر شده است.

یک تابع درون خطی برای واکشی مجموعه ای از این موارد فراخوانی می شود. سپس یک حلقه اجرا می شود تا هر یک از این گزینه ها را به عنوان یک دکمه منو ، همراه با یک کد اقدام ، اجرا کند ، بنابراین هنگامی که کاربر روی دکمه منو کلیک می کند ، موارد مربوطه در قسمت بدن ظاهر می شود.

3) بدنه اصلی.

این قسمت 4 قسمت دارد. خروجی متن ، فیلتر نوار کناری ، تصاویر اصلی و JS شامل می شود.

خروجی متن به کاربر این امکان را می دهد تا به جای مراجعه به گزینه منویی که انتخاب کرده است ، نمای متنی سریع برای نوع اقلامی را که در حال حاضر به آنها نگاه می کند ، مشاهده کند.

فیلتر نوار کناری شامل تعداد زیادی فیلتر موجود برای نوع موردی است که کاربر انتخاب کرده است. این فیلترها همه گزینه های موجود برای این دسته را نشان می دهد و همچنین تعداد اقلام تحت آن مقوله را نشان می دهد. این نوار کناری دارای کد جاوا اسکریپت است (که در ادامه بحث خواهد شد).

بدنه اصلی در حال حاضر خالی است ، اما درست مانند فیلترها ، با جعبه های موردی که در آن شناسه مورد ، رنگ ، اندازه و محل سکونت مشخص شده است ، همراه با یک تصویر که کاربر یک دسته را انتخاب می کند و کد جاوا اسکریپت این منطقه را پر می کند ، پر می شود.

در نهایت شامل (JS) ، بیایید در مرحله بعد به این موضوع نگاهی بیندازیم.

مرحله 11: مرحله 4: کد جاوا اسکریپت (JS.html)

اگر فکر می کردید کد سرور بخش سنگینی است ، مقدار زیادی از آن را دریافت کنید.

در اینجا ما HTML و SeverCode خود را با تعاملات کاربر ترکیب می کنیم. هر موردی که روی آن کلیک می شود باید در اینجا پردازش شود تا داده های مناسب را دریافت کرده و آنها را در یک قالب قابل خواندن برگرداند. بنابراین اجازه دهید نگاهی به اولین تماس های خود بیندازیم:

اسکریپت فراخوانی می کند: من از 3 کتابخانه مختلف برای این پروژه استفاده می کنم. jquery ، bootstrap و یک افزودنی ویژه برای انتخاب bootstrap. این کتابخانه ها امکان قالب بندی اشیاء و تماس راحت تر با عناصر درون کد HTML را فراهم می کنند.

خط مهم بعدی جاوا اسکریپت من در زیر است:

$ (سند).keypress (تابع (رویداد) {if (event.which == '13') {event.preventDefault ()؛ }})؛

در اینجا من کلید enter را از راه اندازی هر یک از فرم ها غیرفعال می کنم. همانطور که در این مورد به Google Web Apps فقط یک صفحه آدرس اختصاص داده می شود. مطبوعات enter داده ها را به آدرس HTML اضافه می کند و سعی می کند کاربر را تغییر مسیر دهد. با غیرفعال کردن این کار ، به کد جاوا اسکریپت خود اجازه می دهید تا همه کارها را انجام دهد.

تابع removeFilters () {google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure). ServerRemoveFilters ()؛ }

تابع updateDBlocation (شناسه ، مقدار) {google.script.run.withSuccessHandler (allGood).withFailureHandler (FailDBUpdate).updateLocation (شناسه ، مقدار) ؛ }

در اینجا دو عملکرد وجود دارد که با فایل Server.gs تماس می گیرند. خط:

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

بخشهای زیادی از آن وجود دارد ، اما اسکلت از "google.script.run" ریشه دارد که به صفحه HTML می گوید عملکرد زیر روی سرور است.

• آخرین بیت این کد عملکردی است که باید اجرا شود. در این مثال ServerRemoveFilter ()
• با افزودن () withSuccessHandler () صفحه HTML می داند که با داده های برگشتی چه باید بکند و این کار این است که تابع را با پرانتز اجرا کند.
• همین امر برای () withFailureHandler صدق می کند

اکنون که تماس سرور کد را تجزیه کرده ایم ، اجازه دهید نگاهی گذرا به آنچه در صورت موفقیت و شکست این تماس سرور رخ می دهد بیندازیم.

تابع allGood (e) {console.log ("موفقیت در سرور") ؛ } تابع onFailure (خطا) {$ ("#message-box"). html ("

در حال حاضر نمی توان اقلام لباس را واکشی کرد. ERROR: " + error.message +"

")؛} تابع FailDBU به روز رسانی (خطا) {$ ("#message-box "). html ("

شما برای تغییر مکان دسترسی ندارید. ERROR: " + error.message +"

")؛ $ (". location-selects)). prop ("غیر فعال" ، "غیر فعال")؛}

من یک log کنسول بسیار ساده ایجاد کردم تا بتواند در صورت اجرای تابع موقعیت ، موفقیت را نشان دهد که می توانید آن را به عنوان allGood () مشاهده کنید.

هنگام مدیریت خطاها ، این دو عملکرد پیام خطایی را که کاربر می تواند با استفاده از یک تماس jQuery با شیء HTML با شناسه "message-box" مشاهده کند ، نمایش می دهد.

حالا بیایید به کار سنگین بپردازیم

مرحله 12: مرحله 5: JavaScript Code-Click Actions (JS.html)

نوار منوی بالا گزینه هایی برای هر نوع مقاله دارد. عملکردی که روی کلیک اجرا می کنند این است:

تابع filterType (مقاله ، شناسه) {$ ("ul.navbar-nav li.active"). removeClass ("فعال") ؛ $ ("#currentArticle"). html ("// کد HTML در اینجا")؛

updateSideBar = true؛

google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure).fetchItems ("مقالات" ، مقاله) ؛ var newSelect = "#type-"+id؛ $ (newSelect).addClass ("فعال") ؛ $ ("#myNavbar"). removeClass ("در")؛ }

ما می توانیم در این کد یک google.script.run را مشاهده کنیم که برای بازیابی اطلاعات با سرور تماس می گیرد. عملکرد موفقیت آمیز این تماس updateItems () است.

تصویر 1 (با کد HTML سنگین درون این عملکرد ، کپی کردن دقیق کد بدون ظاهر شدن آشفتگی در این کادر دشوار است)

در کد updateItems () ، موارد زیادی در حال رخ دادن است. یکبار دیگر باید از طریق Object که به ما بازگردانده شده ، پیمایش کنیم و هر مورد را به صفحه اصلی بدن خود اضافه کنیم.

کد HTML به عنوان Arrays اضافه می شود تا کد را تجزیه کرده و خواندن و دیدن محل قرارگیری itemData را آسان تر کند.

در حلقه هر مورد ، من فیلدهایی را حذف می کنم که نمی خواهم در توضیحات مانند Default ، timestamp و URL تصویر مشاهده کنم. آدرس تصویر را از توضیحات حذف می کنم زیرا در عوض به عنوان href به برچسب اضافه می شود. پس از جمع آوری این اطلاعات ، با استفاده از تابع jQuery.append () به بدنه اصلی ارسال می شود.

پس از افزودن همه موارد به صفحه ، این پرس و جو از موارد دوباره به کد سرور ارسال می شود تا گزینه های فیلتر را همانطور که در تصویر 2 نشان داده شده مرتب کرده و برگرداند.

تصویر 2 (به روز رسانی نوار کناری)

بسیار شبیه به تابع updateItems () ، ما بار دیگر آرایه هایی از کد HTML و یک حلقه برای همه گزینه های فیلتر داریم. تنها تغییر قابل توجه jQuery.selectpicker ('تازه کردن') است. این تابع از کتابخانه اسکریپت هایی که در مرحله آخر گنجانده ایم می آید. این به برنامه نویس اجازه می دهد تا یک HTML ساده انتخابی بنویسد و اجازه دهد کتابخانه آن را به روز کند تا عملکرد جستجو و همچنین کد CSS را شامل شود.

تصویر 3 (فیلتر کردن با نوار کناری)

در نهایت ما تابع updateFilter (formData) را داریم. این زمانی استفاده می شود که یک فرم از نوار کناری ارسال شود. ما با استفاده از یک تابع jQuery شروع می کنیم. و ما فرآیند را از تصویر 1 دوباره شروع می کنیم.

مرحله 13: پایان….در نهایت

خوب شما آن را دارید ؛ یک توضیح کامل و کامل برای کمک به شما در راه اندازی کمد آنلاین خود ، یا استفاده از قابلیت های ایجاد شده در Google Scripts برای توسعه پروژه خود.

این یک سفر برنامه نویسی این پروژه (و مستندسازی از طریق این دستورالعمل) بوده است ، اما من از این روند لذت بردم و امیدوارم از محصول لذت ببرید. من دوست دارم از کسی که تنظیماتی می کند بشنوم که مایکل جردن می گوید "سقف سقف است" و من موافقم که این برنامه هیچ محدودیتی ندارد.