منظم خزانة الملابس: 13 خطوة

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:39

سواء كنت تتسوق لشراء ملابس أو يُطلب منك دائمًا استعارة أي عنصر ، فهناك أوقات تتمنى أن تتمكن من إلقاء نظرة على خزانتك من أي مكان لترى ما إذا كان لديك شيء مشابه.

هذا متجر شامل وواسع للعديد من الأغراض الأخرى. My Wardrobe Organizer عبارة عن مزيج من جداول بيانات Google كقاعدة بيانات SQL و Google Scripts للتعامل مع البيانات و Google WebApp لبوابة عبر الإنترنت لهذه البيانات. يمكن للمستخدم النهائي رؤية جميع العناصر ، والتصفية لشيء معين ، ووضع علامة على العناصر على أنها معارة ، وإدارة غسيلهم ، ومنع أمي من شرائك نفس القميص لعيد الميلاد كل عام *.

(* لا يوجد ضمان. ستشتري الأمهات ما يريدون سواء احتجت إليه أم لا)

بإلقاء نظرة سريعة على تصميم موقع الويب في الصورة أعلاه ، قد يتعرف المرء على تخطيط مألوف. تم إعداد منظم خزانة الملابس مثل أي موقع ويب ملابس عادي. هذه الواجهة مقسمة من قبل الإدارات في الأعلى والفلاتر المتوفرة على الجانب ، وتجلب للمستخدم الإلمام بالوظائف. وهو سهل الاستخدام.

الخطوة 1: إعداد نسختك الخاصة

لنبدأ بإنشاء نسختك الخاصة من هذا المشروع.

جوجل درايف

انقر فوق الرابط أعلاه ليأخذك إلى الإصدار الحالي الخاص بي من هذا التطبيق.

سترى 3 عناصر في هذا المجلد: نموذج Google وجدول بيانات Google ومجلد.

انقر بزر الماوس الأيمن على ورقة Google وانقر على إنشاء نسخة.

قم بتعيين موقع هذه النسخة على محرك الأقراص الخاص بك.

بعد نسخ هذا المستند ، سيتم إنشاء نموذج Google تلقائيًا في نفس المجلد الذي نقلت فيه جدول بيانات Google.

لإنشاء المجلد (هذا ضروري لتجميع تحميلات صور العنصر) ، انقر فوق نموذج Google المنسوخ وستظهر مطالبة تطلب منك استعادة موقع المجلد للتحميلات.

لديك الآن نسخة من هذا المستند للعمل عليها بنفسك!

الخطوة 2: نظرة عامة على نموذج Google

الآن بعد أن أصبح لديك نسختك الخاصة من هذا التطبيق ، دعنا نلقي نظرة حولك.

تم إعداد نموذج Google الخاص بك لقبول العديد من أنواع العناصر المختلفة. ومع ذلك ، فإن للقمصان والسراويل والفساتين والأحذية قيودًا مختلفة في الحجم. لذلك سيتم ملء قسم مختلف من هذا النموذج بناءً على القسم الذي تقدم فيه العنصر الخاص بك. في نموذج (ذكر مقال) الخاص بي ، قمت بإنشاء 5 فئات مختلفة للحجم. (لمقالات النساء ، انقر هنا ، وهناك المزيد).

تحت كل قسم تغيير الحجم ، قمت بإنشاء عنوان فريد لكل معلمة سأقوم بجمعها. لا نريد أن يكون لدينا أعمدة متعددة في قاعدة بياناتنا تحمل الاسم "الحجم" وإلا فلن نتمكن من تحديد نوع الملابس الذي ينطبق عليه هذا الحجم.

في نهاية كل قسم ، يتم توجيه المستخدم إلى الجزء الأخير من هذا النموذج: الموقع. أنا شخصياً اخترت إضافة الموقع لتحديد العناصر الموجودة في Dry Cleaners أو في الغسيل أو في مكانها أو تلك العناصر التي سمحت لأحد الأصدقاء باستعارةها. هذا يسمح لي أن أكون منظمًا ولا أشعر أبدًا أنني أفتقد قطعة من الملابس في مكان ما.

كما ذكرت من البداية ، يمكن توسيع هذا المشروع بمليون طريقة مختلفة. يمكنك استخدامه للمخزون ، أو كأداة تنظيمية أكثر دقة ، أو لاستعارة الملابس بدقة. الحقول والأقسام التي يمكنك إضافتها لا حصر لها ، لذا لا تشعر أنك مقيد بما هو موجود في النموذج الخاص بي. (لمقالات المرأة اضغط هنا)

قبل أن تبدأ في تحميل بعض العناصر الخاصة بك ، دعنا ننتقل إلى الخطوة التالية لضمان الإرسال المناسب.

الخطوة 3: Google Scripts: (Server Code.gs) انظر أولاً إلى البيانات والرمز

بالنقر فوق مستند Google Sheets ، سترى العديد من أعمدة البيانات (وبعض الصفوف ، تُترك للشرح). أثناء تقديم النموذج يتم تخطي بعض الأقسام ، وهذا واضح من البيانات المفقودة في بعض الأعمدة. ولكن تمت إضافة أعمدة إضافية مثل المعرف والموقع الافتراضي ومن و محدث لتتبع تعديلات هذه العناصر بشكل أفضل.

تم إنشاء حقل المعرف عند إرسال النموذج للسماح بمعرف فريد عند اجتياز قاعدة البيانات هذه. لإنشاء هذا الحقل ، سنلقي نظرة على محرر النص البرمجي بالنقر فوق أدوات> محرر البرنامج النصي.

مع فتح محرر البرنامج النصي ، ستلاحظ 8 مستندات في الشريط الجانبي لهذه النافذة الجديدة. تساعد هذه المستندات في التحكم في عملية الواجهة الخلفية ، وشاشات الواجهة الأمامية ، ووظائف الواجهة الأمامية. سننتقل إلى كل واحد (إذا تابعت) ولكن انقر الآن على رمز الخادم.

يوجد في ملف Server Code.gs العديد من الوظائف:

onSubmit (e)، onOpen ()، doGet ()، include (fileName)، openApplication ()، openLa LaundryApp ()، changeValueOnSubmit (e)، setIDOnSubmit (e)

onSubmit (e) - سيتم تكوين هذه الوظيفة كأول وظيفة يتم تشغيلها عند إرسال نموذج Google. يمكنك وضع وظائف أخرى داخل هذه الوظيفة للسماح بحدوث العديد من العمليات المختلفة.

onOpen (e) - يتم استدعاء هذه الوظيفة عند فتح جداول بيانات Google. يقوم بملء خيار قائمة جديد للسماح بالوصول السريع إلى روابط التطبيق وطرق العرض.

doGet () - تسمى هذه الوظيفة باستدعاء عنوان تطبيق الويب. عندما يتصفح المستخدم إلى تطبيق الويب المنشور ، سيخبر هذا الرمز تلك الصفحة بما يجب عرضه. في هذه الحالة ، يكون هو المستند Application.html.

include (fileName) - تُستخدم هذه الوظيفة داخل صفحات HTML لقراءة المستندات الأخرى وإدراج محتوياتها في تنسيق HTML مناسب داخل صفحة أخرى. نحن نستخدمه لملفات CSS.html و JS.html الخاصة بنا.

openApplication () و openLaonderyApp () - تحتوي هذه الوظائف على رمز يتم تشغيله عندما ينقر المستخدم على أزرار القائمة المضافة إلى شريط أدوات Google Sheet.

changeValueOnSubmit (e) و setIDOnSubmit (e) - هذه هي الوظائف التي سننظر فيها الآن. هم مسؤولون عن تحديث حقول معينة بالقيم الافتراضية عندما يتم إرسال النموذج في البداية.

الخطوة 4: تمكين OnFormSubmit

يجب توصيل هاتين الوظيفتين ، changeValueOnSubmit (e) و setIDOnSubmit (e) ، بإجراء المستخدم الخاص بإرسال نموذج. للقيام بذلك نحتاج إلى تمكين Trigger.

نقوم بتمكين المشغل بالنقر فوق تحرير> مشغلات المشروع الحالي. هذا يفتح Google Developer Hub.

في الركن الأيمن السفلي من لوحة تحكم المشغل يوجد زر إضافة مشغل. انقر هنا.

سنقوم الآن بإعداد الوظيفة للتشغيل عند إرسال النموذج. في حالتنا ، لدي وظائف متعددة (changeValueOnSubmit (e) و setIDOnSubmit (e)) أضعها داخل دالة onSubmit () لذا لا يتعين علي سوى إعداد مشغل واحد. لذلك سنختار onSubmit () ونضبط هذا المشغل للتشغيل عند إرسال النموذج.

لدينا الآن نموذج عمل يملأ جدول بيانات Google بمعرفات فريدة ويضع القيم الافتراضية.

يمكنك الآن تحميل العناصر الخاصة بك باستخدام نموذج Google. (هذا ليس ضروريًا للاستمرار حيث توجد بالفعل قيم تجريبية في). سنغوص الآن في واجهة المستخدم.

الخطوة الخامسة: إعداد واجهة المستخدم

أهلا بك! لقد وصلنا أخيرًا إلى الجزء الذي أتيت من أجله ، واجهة المستخدم !!!!

من النظرة الأولى ، لا يوجد شيء هنا. لم نجري أي مكالمات حتى الآن. لتحميل الصفحة بشكل أسرع ، قررت عدم إصابة الصفحة الأولى بكل عناصرك والسماح لك بالنقر فوق ما تريد رؤيته بشكل أسرع. نظرًا لأن هذه هي الحالة ، فلا توجد عناصر في حقل المحتوى الرئيسي ولا توجد عوامل تصفية في الشريط الجانبي. دعنا نضغط على الكل لنرى ما هو موجود في قاعدة البيانات الخاصة بنا.

لقد قمنا الآن بتحميل كل عنصر في قاعدة البيانات الخاصة بنا في حقل المحتوى الرئيسي. سترى الصور وأرقام الهوية والألوان والأحجام والمواقع. يمكن تحديث حقل الموقع هنا! إذا قررت إقراض العنصر ، يمكنك تحديد هذا الخيار ، يمكنك وضعه في خزانتك أو خزانة الملابس أو الغسيل.

وفي الشريط الجانبي لدينا ، لدينا كل حقل ممكن لكل عنصر ملابس في استعلامنا الجديد. فقط تخيل أن لديك 20 خيارًا مختلفًا للحجم على هذا الشريط الجانبي ، فلن يكون فعالًا للغاية ، لذلك دعنا نضييق نطاق البحث عن طريق النقر فوق الملحقات.

الآن بعد أن قمنا بتحميل الملحقات ، ألق نظرة على الشريط الجانبي. تم تعديله إلى 3 حقول فقط ، لأن هذه هي المعلمات التي تنطبق على كل عنصر في هذا الاستعلام. سأقوم بالفرز حسب اللون. بالنقر فوق اللون ، يظهر مربع منسدل. هنا يمكنني إما كتابة اللون الذي أريده ثم تحديده ، أو إذا رأيت خياري على الفور ، فسوف أقوم بالنقر فوقه. لقد اخترت Red لهذا العرض التوضيحي. انقر فوق تطبيق عامل التصفية في الجزء السفلي من هذا الشريط الجانبي وسيتم تحديث المحتوى الرئيسي لتظهر لك العناصر التي تم تعيين اللون الأحمر لها كمعامل لون خاص بها.

لقد ذكرت سابقًا أن قاعدة البيانات هذه تساعدني في إدارة العناصر الخاصة بي على سبيل الإعارة وفي مغسلتي. لتسهيل الأمر قليلاً ، بدلاً من النقر يدويًا على كل موقع من مواقع القائمة المنسدلة في هذه الصفحة الرئيسية ، قمت بإنشاء وضع الغسيل. ارجع إلى صفحة Google Sheet وضمن عرض التطبيق سترى وضع الغسيل. سيؤدي هذا الخيار إلى سحب نموذج أصغر يعرض فقط العناصر التي تحتوي على موقع الغسيل. يمكنني الآن وضع علامة على كل هذه العناصر على أنها افتراضية مما سيعيدها إلى مواقعها التي يتم تخزينها فيها عادةً.

الخطوة 7: اكتمل المشروع

تهاني

لأولئك منكم الذين يريدون فقط قاعدة بيانات عاملة لإدارة العناصر الخاصة بك ، مرحبًا بكم في المنظم عبر الإنترنت. لأولئك المهتمين بالفضول في الكود وراء هذا التطبيق. التزم حولها بينما أقوم بتفكيكها.

* أنت حر في حذف عناصر الاختبار بعد إدخال عنصر واحد على الأقل من العناصر الخاصة بك في قاعدة البيانات. (سأشرح لاحقًا إذا استمررت في ذلك).

الخطوة 8: الخطوة 1: رمز النهاية الخلفية (Server Code.gs)

في وقت سابق ، فتحنا ملف Server Code.gs وأعطيت عرضًا سريعًا لكل وظيفة من الوظائف حيث كان الغرض منها هو خدمة كل عنصر من العناصر التي أعددتها للتو ، لكننا سنقوم الآن بتفصيل بعض الوظائف والأدوات المساعدة التي تسمى لإنجاح هذا الرمز.

1) عبور الجدول:

var ss = SpreadsheetApp.getActiveSpreadsheet () ؛ 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 = Number (LastID.getValue ())؛ var ColA = 1 ؛ فار ماكس = 15 ؛ فار مين = 5 ؛ CellValue = CellValue + Math.round ((Math.random () * (max - min) + min)) ؛ e.source.getActiveSheet ().getRange (range.getLastRow ()، ColA).setValue (CellValue) ؛ changeValueOnSubmit (هـ) ؛

• لقد طلبت سابقًا ترك القيم التجريبية في الجدول حتى يقدم المستخدم قيمة واحدة على الأقل لنفسه. هذا لأن منشئ المعرف التلقائي يعتمد على القيمة الأخيرة في قاعدة البيانات للتعبئة.
• أحضر الصف الثاني إلى الأخير لأن الصف الأخير هو القيمة الجديدة والعمود الأول لقيمة المعرف.
• ثم أقوم بشكل عشوائي بإنشاء رقم بين 5 و 15 وإضافته إلى القيمة الأخيرة. *
• أخيرًا ، أضع هذه القيمة في عمود المعرف للصف الأخير.
• بعد ذلك نسمي الدالة changeValueOnSubmit (e).

* اخترت 5-15 للسماح بوضع العلامات في المستقبل وتكامل Google Home حتى لا تكون الأرقام قريبة بما يكفي لإحداث ارتباك على الشماعات أو علامات الملابس أو الرموز الشريطية.

3) تغيير قيمة URL:

var DataChange = e.itledValues ["Item Picture"]؛ var DefaultLocation = e.itledValues ["أين تحتفظ بهذه المقالة الخاصة بالملابس؟"]؛ var ColD = ColumnID _ ("صورة العنصر") +1 ؛ var ColLoc = ColumnID _ ("الموقع الافتراضي") + 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) ؛

• عند إرسال صورة من خلال نموذج Google ، فإن عنوان URL المدرج في جداول بيانات Google هو رابط للمستند الفعلي. في حالتنا ، نظرًا لأننا نقوم بإنشاء صفحة HTML ، نريد أن يكون الرابط هو الصورة فقط.
• عن طريق تغيير "فتح؟" جزء من عنوان URL لـ "uc؟ export = view &" أنشأنا رابطًا للصورة بدلاً من ذلك.
• سنضع هذه القيمة الجديدة مرة أخرى في موقع ارتباط صورة العنصر الحالي.
• أقوم أيضًا بتعيين "الموقع الافتراضي" و "الموقع الحالي" للعنصر على نفس الشيء في قاعدة البيانات. سيساعد هذا عند محاولة استخدام وضع الغسيل الخاص بي.

• سوف نتعمق فيه في الصفحة التالية ولكن هذه أول نظرة لنا على وظيفة ColumnID_ () التي أنشأتها.

  تستخدم هذه الوظيفة Column Names لترجمتها إلى عدد صحيح للعمود وهو أمر مفيد لاستدعاء النطاق الذي يتطلب رقم عمود بدلاً من الاسم

4) SpreadsheetApp.getUI ()

• في الصورة الثانية ، يمكنك مشاهدة استخدام SpreadsheetApp.getUI () كما تم استخدامه لإنشاء قائمة شريط الأدوات بالإضافة إلى ورقة Google.
• تساعد وظيفة.getUI () أيضًا في إنشاء نافذة منبثقة مشروطة تُستخدم في وضع الغسيل وكرابط سريع لواجهة موقع الويب.

5) خدمة HTML

• هناك نوعان من خدمات HTML المستخدمة في هذا الرمز: Template و HTMLOutput
• يسمح القالب بإدراج التعليمات البرمجية داخل كود HTML بحيث يمكن ملء المعلومات الواردة من الخادم عند استدعاء الصفحة.
• يعرض إخراج HTML صفحات HTML بسيطة.
• لدينا أيضًا طريقة include () التي تتيح لنا إنشاء ملفات HTML متعددة ودمجها في ملف HTML واحد مُقَوَّل عن طريق إرجاع محتويات الملف بتنسيق HTML بدلاً من سلسلة.

لقد أرفقت مستندًا تم إعداده مثل وثائق البرامج النصية لتطبيق Google لإضفاء الإلمام بكيفية شرح شفرة المصدر والوظائف داخل تطبيقات Google.

الخطوة 9: الخطوة 2: الجزء 2 من رمز النهاية الخلفية (Server Calls.gs)

الآن قمنا بإدخال Server Calls.gs. تُستخدم هذه الوظائف بشكل أساسي في HTML JavaScript لذا تم فصلها عن التعليمات البرمجية المستخدمة بشكل أساسي في النهاية الخلفية الموجودة في Server Code.gs.

الصورة 1) المتغيرات العالمية:

الصورة 2) جلب العناصر:

الصورة 3) fetchItemsQry

الصورة 4) مرشح العناصر

الصورة 5) fetchFiltersWithQry

الصورة 6) ColumnID و CacheCalls

هناك الكثير لنتحدث عنه مع كل من هؤلاء. ومن أجل تقسيم الكود وشرح ما يجري ، كنت بحاجة إلى مساحة أكبر قليلاً في الكتابة. مرفق وثيقة لتقسيم رمز ServerCalls.gs

تم إعداد هذا المستند مثل وثائق Google App Scripts وحتى إنشاء روابط إلى كائنات مماثلة.

الخطوة 10: الخطوة 3: كود HTML (Application.html)

تصبح تعليمات HTML البرمجية غير سعيدة للغاية في مربع حوار Instructable. لذا يرجى متابعة الصور أعلاه.

1) في رأس صفحة Application.html ، أنشأنا عنوانًا وندعو صفحة CSS.html ليتم تحميلها.

* لكوننا صفحة HTML مقولبة ، يمكننا إضافة المزيد من التعليمات البرمجية إلى هذا المستند دون تشويش الشاشة الحالية باستخدام طريقة التضمين (اسم الصفحة) المذكورة سابقًا والموجودة في Server Code.gs

تم العثور على مربع العنوان الرئيسي في هذه الصورة أيضًا. يمكنك تغيير العنوان هنا وإدخال "خزانة ملابس [اسمك]" أو أي شيء آخر تريد التعرف على هذه الصفحة على أنها.

2) أسفل العنوان يوجد شريط التنقل العلوي الخاص بنا.

يتضمن شريط التنقل هذا جميع أنواع المقالات كما هو مدرج في ورقة المقالات داخل أوراق Google الخاصة بنا.

يتم استدعاء دالة مضمنة لجلب مجموعة من هذه العناصر. ثم يتم تشغيل حلقة لتضمين كل خيار من هذه الخيارات كزر قائمة ، مع استكمال رمز الإجراء ، لذلك عندما ينقر المستخدم على زر القائمة ، ستظهر العناصر المعنية في منطقة الجسم.

3) الجسم الرئيسي.

هناك 4 أجزاء لهذا الجزء. يتضمن إخراج نص ، ومرشح الشريط الجانبي ، وصور الجسم الرئيسية ، و JS.

يسمح إخراج النص للمستخدم برؤية عرض نصي سريع لنوع العناصر التي يبحث عنها حاليًا بدلاً من الرجوع إلى خيار القائمة الذي حدده.

يحتوي مرشح الشريط الجانبي على العديد من عوامل التصفية المتاحة لنوع العنصر الذي حدده المستخدم. تعكس هذه المرشحات جميع الخيارات المتاحة لهذه الفئة بالإضافة إلى عدد العناصر التي تندرج تحت قيمة هذه الفئة. يتم ملء هذا الشريط الجانبي برمز JavaScript (والذي سيتم مناقشته لاحقًا).

الجسم الرئيسي فارغ حاليًا ، ولكن تمامًا مثل المرشحات ، سيتم ملؤه بمربعات العناصر التي توضح بالتفصيل معرف العنصر ، واللون ، والحجم ، والموقع مع صورة مضمنة بمجرد أن يحدد المستخدم فئة ويملأ كود JavaScript هذه المنطقة.

أخيرًا يتضمن (JS) ، دعنا نلقي نظرة على هذا في الخطوة التالية.

الخطوة 11: الخطوة 4: كود JavaScript (JS.html)

إذا كنت تعتقد أن رمز الخادم كان قسمًا ثقيلًا ، فاحصل على حمولة من هذا.

هنا نقوم بدمج HTML و SeverCode مع تفاعلات المستخدم. يجب معالجة أي عنصر يتم النقر عليه هنا للحصول على البيانات المناسبة وإعادتها بتنسيق يمكن قراءته. لذلك دعونا نلقي نظرة على مكالماتنا الأولى:

يستدعي البرنامج النصي: أنا أستخدم 3 مكتبات مختلفة لهذا المشروع ؛ jquery و bootstrap و bootstrap-select add-on الخاص. تسمح هذه المكتبات بتنسيق الكائنات واستدعاءات أسهل للعناصر داخل كود HTML.

سطري المهم التالي من JavaScript هو أدناه:

$ (مستند).keypress (function (event) {if (event.which == '13') {event.preventDefault () ؛ }}) ؛

هنا أقوم بتعطيل مفتاح الإدخال من تشغيل أي من النماذج. كما هو الحال في هذه الحالة ، يتم تعيين عنوان صفحة واحدة فقط لتطبيقات Google. ستضيف مطبعة إدخال البيانات إلى عنوان HTML وتحاول إعادة توجيه المستخدم. من خلال تعطيل هذا ، فإنك تسمح لشيفرة JavaScript الخاصة بك بالقيام بكل العمل.

function removeFilters () {google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure). ServerRemoveFilters () ؛ }

function updateDBlocation (id، value) {google.script.run.withSuccessHandler (allGood).withFailureHandler (FailDBUpdate).updateLocation (id، value)؛ }

فيما يلي وظيفتان تقومان بإجراء مكالمات إلى ملف Server Code.gs. الخط:

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

يحتوي على العديد من أجزاء العمل ولكن الهيكل العظمي متجذر من "google.script.run" الذي يخبر صفحة HTML بأن الوظيفة التالية موجودة على الخادم.

• آخر جزء من هذا الرمز هو الوظيفة المراد تشغيلها. في هذا المثال ServerRemoveFilter ()
• بإضافة withSuccessHandler () ، تعرف صفحة HTML الآن ما يجب فعله بالبيانات التي يتم إرجاعها ، وهذا لتشغيل الوظيفة مع الأقواس.
• الأمر نفسه ينطبق على withFailureHandler ()

الآن بعد أن قمنا بتقسيم استدعاء كود الخادم ، دعنا نلقي نظرة سريعة على ما يحدث عندما تنجح مكالمة الخادم هذه وتفشل.

function allGood (e) {console.log ("Success on server")؛ } دالة onFailure (خطأ) {$ ("# message-box"). html ("

تعذر جلب عناصر الملابس في الوقت الحالي. الخطأ: "+ error.message +"

") ؛} الوظيفة FailDBUpdate (خطأ) {$ (" # message-box "). html ("

ليس لديك حق الوصول لتعديل الموقع. الخطأ: "+ error.message +"

") ؛ $ (". تحديد الموقع "). prop (" معطل "،" معطل ") ؛}

لقد قمت بإنشاء سجل وحدة تحكم بسيط للغاية للدلالة على النجاح عند تشغيل وظيفة الموقع والتي يمكنك رؤيتها على أنها allGood ().

عند معالجة الأخطاء ، تقوم هاتان الوظيفتان بإخراج رسالة الخطأ حيث يمكن للمستخدم رؤيتها باستخدام استدعاء jQuery لكائن HTML بمعرف "message-box".

الآن دعنا نبدأ العمل الشاق

الخطوة 12: الخطوة 5: إجراءات JavaScript Code-Click (JS.html)

يحتوي شريط القائمة العلوي على خيارات لكل نوع مقال. الوظيفة التي يتم تشغيلها عند النقر هي:

دالة filterType (مقالة ، معرف) {$ ("ul.navbar-nav li.active"). removeClass ("active") ؛ $ ("# currentArticle"). html ("// HTML CODE HERE")؛

updateSideBar = صحيح ،

google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure).fetchItems ("Articles"، article)؛ var newSelect = "#type -" + id ؛ $ (newSelect).addClass ("نشط")؛ $ ("# myNavbar"). removeClass ("in")؛ }

يمكننا أن نرى في هذا الرمز لدينا google.script.run الذي يستدعي الخادم لاسترداد المعلومات. وظيفة النجاح لهذه المكالمة هي updateItems ().

الصورة 1 (مع رمز HTML الثقيل ضمن هذه الوظيفة يصعب نسخ الكود بدقة ، دون ظهور فوضى في هذا المربع)

في كود updateItems () ، لدينا الكثير من الأشياء التي تحدث. مرة أخرى ، يجب علينا اجتياز الكائن الذي تم إرجاعه إلينا وإضافة كل عنصر إلى صفحة الجسم الرئيسية لدينا.

تتم إضافة كود HTML كمصفوفات لتقسيم الكود وتسهيل قراءته ومعرفة مكان إدراج itemData.

في حلقة كل عنصر ، أقوم بإزالة الحقول التي لا أرغب في رؤيتها في الوصف مثل الافتراضي والطابع الزمني وعنوان URL للصورة. أقوم بإزالة عنوان URL للصورة من الوصف لأنه تتم إضافته باعتباره href إلى علامة بدلاً من ذلك. بمجرد تجميع هذه المعلومات ، يتم إرسالها إلى الجسم الرئيسي باستخدام وظيفة jQuery.append ().

بعد إضافة جميع العناصر إلى الصفحة ، يتم إرسال هذا الاستعلام عن العناصر إلى رمز الخادم مرة أخرى لفرز خيارات التصفية وإرجاعها كما هو موضح في الصورة 2.

الصورة 2 (تحديث الشريط الجانبي)

تشبه إلى حد بعيد وظيفة updateItems () ، لدينا مرة أخرى مصفوفات من كود HTML وحلقة لجميع خيارات التصفية. التغيير الوحيد الملحوظ هو jQuery.selectpicker ("تحديث"). تأتي هذه الوظيفة من مكتبة البرامج النصية التي قمنا بتضمينها في الخطوة الأخيرة. يسمح للمبرمج بكتابة HTML محدد بسيط والسماح للمكتبة بتحديثه لتشمل وظيفة قابلة للبحث بالإضافة إلى كود CSS.

الصورة 3 (التصفية باستخدام الشريط الجانبي)

أخيرًا لدينا وظيفة updateFilter (formData). يستخدم هذا عند إرسال نموذج من الشريط الجانبي. نبدأ باستخدام دالة jQuery.serializeArray () يقرأ هذا رمز HTML للعنصر المحدد في حالتنا نموذجًا ، ويعيد القيم في سلسلة ليتم إرسالها إلى الخادم. ونبدأ العملية من الصورة 1 من جديد.

الخطوة 13: النهاية…

حسنًا ، ها أنت ذا ؛ شرح كامل وشامل لمساعدتك في إعداد خزانة الملابس الخاصة بك على الإنترنت ، أو الاستفادة من الوظائف التي تم إنشاؤها في Google Scripts لتوسيع مشروعك الخاص.

لقد كانت رحلة ترميز هذا المشروع (والتوثيق من خلال هذا Instructable) لكنني استمتعت بالعملية وآمل أن تستمتع بالمنتج. أود أن أسمع ردودًا من أي شخص يقوم بإجراء تعديلات كما يقول مايكل جوردان "السقف هو السقف" وأوافق على أن هذا التطبيق ليس له حدود.