מארגן ארון בגדים: 13 שלבים

2024 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2024-01-30 09:15

בין אם מדובר בקניית בגדים ובין אם תמיד מתבקשים לשאול פריט כלשהו, יש פעמים שהייתם רוצים להציץ בארון שלכם מכל מקום ולראות אם יש לכם משהו דומה. ארגונית המלתחות עושה בדיוק את זה ועוד!

זוהי חנות חד פעמית והיא רחבה למטרות רבות אחרות. ארגונית המלתחה שלי היא שילוב של Google Sheets כמאגר נתונים של SQL, סקריפטים של Google לטיפול בנתונים ו- Google WebApp לפורטל מקוון לנתונים אלה. משתמש הקצה יכול לראות את כל הפריטים, לסנן למשהו ספציפי, לסמן פריטים שהושאלו, לנהל את הכביסה שלו ולמנוע מאמא לקנות לך את אותה חולצה לחג המולד מדי שנה*.

(*אין אחריות. אמהות יקנו מה שהן רוצות אם אתה צריך את זה או לא)

במבט חטוף על עיצוב האתר בתמונה למעלה, אפשר לזהות פריסה מוכרת. ארגון המלתחות מוגדר כמו כל אתר הלבשה רגיל. ממשק זה מחולק על ידי מחלקות למעלה ומסננים המסופקים בצד, ומביא היכרות עם פונקציונליות למשתמש המזדמן. וזה פשוט לשימוש.

שלב 1: הגדרת עותק משלך

נתחיל ביצירת עותק משלך של הפרויקט הזה.

גוגל דרייב

לחץ על הקישור שלמעלה כדי להעביר אותך לגרסה הנוכחית של יישום זה.

תראה 3 פריטים בתיקיה זו: טופס Google, גיליון Google ותיקייה.

לחץ באמצעות לחצן העכבר הימני על גיליון Google ולחץ על צור העתק.

הגדר את המיקום של עותק זה ל- Drive שלך.

לאחר העתקת מסמך זה, טופס Google ייווצר אוטומטית באותה תיקייה שהעברת את גיליון Google.

כדי ליצור את התיקייה (זה נחוץ לאיסוף העלאות של תמונות הפריט), לחץ על טופס Google שהועתק ותופיע הודעה המבקשת ממך לשחזר את מיקום התיקיה להעלות.

כעת יש לך עותק של מסמך זה לעבודה בעצמך!

שלב 2: סקירה כללית של טופס Google

עכשיו שיש לך גרסה משלך של יישום זה, בואו נסתכל מסביב.

טופס Google שלך מוגדר לקבל סוגים רבים ושונים של פריטים. אולם חולצות, מכנסיים, שמלות ונעליים כולן מגבלות גודל שונות. לכן חלק אחר בטופס זה ימולא בהתאם למחלקה שבה אתה מגיש את הפריט שלך. בתבנית שלי (מאמר זכר) יצרתי 5 קטגוריות גודל שונות. (למאמרי נשים לחץ כאן, יש עוד רבים).

תחת כל קטע גודל, הקמתי כותרת ייחודית לכל פרמטר שאאסוף. איננו רוצים שיהיו מספר עמודות במסד הנתונים שלנו בשם "גודל", אחרת לא נוכל לקבוע לאיזה סוג בגדים מידה זו מתאימה.

בסוף כל קטע, המשתמש מופנה לחלק האחרון של טופס זה: מיקום. אני אישית בחרתי להוסיף את מיקום כדי לקבוע פריטים במנקים היבשים, בכביסה, במקומם או בפריטים בהם נתתי לחבר ללוות. זה מאפשר לי להתארגן ולעולם לא להרגיש שחסר לי בגד איפשהו.

כפי שציינתי מההתחלה, ניתן להרחיב את הפרויקט הזה במיליון דרכים שונות. אתה יכול להשתמש בו למלאי, כלי ארגון מדויק יותר או להלוואת בגדים למהדרין. השדות והקטעים שאתה יכול להוסיף הם אינסופיים אז אל תרגיש מוגבל למה שיש לי בצורה. (למאמרי הנשים לחץ כאן)

לפני שתעלה כמה פריטים משלך, נעבור לשלב הבא כדי להבטיח הגשה נכונה.

שלב 3: סקריפטים של Google: (קוד קוד שרת) מבט ראשון בנתונים ובקוד

לחיצה על מסמך Google Sheets תראה עמודות רבות של נתונים (וכמה שורות שנותרו להדגמה). במהלך שליחת הטפסים מדלגים על חלקים מסוימים, זה ניכר מהנתונים החסרים בחלק מהעמודות. אך נוספו עמודות נוספות כגון מזהה, מיקום ברירת מחדל, מי ועדכון כדי לעקוב טוב יותר אחר עריכות הפריטים האלה.

שדה מזהה נוצר כששלחת את הטופס כדי לאפשר מזהה ייחודי בעת מעבר במסד הנתונים הזה. כדי ליצור שדה זה, נסתכל על עורך הסקריפט על ידי לחיצה על כלים> עורך סקריפט.

כאשר עורך הסקריפט פתוח, תבחין ב -8 מסמכים בסרגל הצד של חלון חדש זה. מסמכים אלה עוזרים לשלוט בתהליך הקצה, בתצוגות חזיתיות ובפונקציונליות חזיתית. נקפוץ לכל אחד מהם (אם תישאר שם) אך כעת לחץ על קוד שרת.

בקובץ Server Code.gs ישנן פונקציות רבות:

onSubmit (e), onOpen (), doGet (), include (fileName), openApplication (), openLaundryApp (), changeValueOnSubmit (e), setIDOnSubmit (e)

onSubmit (e) - פונקציה זו תוגדר כפונקציה הראשונה להפעלה כאשר שליחת טופס של Google. אתה יכול למקם פונקציות אחרות בתוך פונקציה זו כדי לאפשר תהליכים רבים ושונים לקרות.

onOpen (e) - פונקציה זו נקראת בעת פתיחת Google Sheets. הוא מאכלס אפשרות תפריט חדשה כדי לאפשר גישה מהירה לקישורי היישומים ולתצוגות.

doGet ()- פונקציה זו נקראת בשיחת כתובת Web App. כאשר משתמש עובר לאפליקציית האינטרנט שפורסמה קוד זה יגיד לדף זה מה להציג. במקרה זה, זהו המסמך Application.html.

include (fileName) - פונקציה זו משמשת בתוך דפי HTML כדי לקרוא מסמכים אחרים ולהכניס את תוכנם לפורמט HTML תקין בתוך דף אחר. אנו משתמשים בו לקבצי CSS.html ו- JS.html שלנו.

openApplication () ו- openLaundryApp () - פונקציות אלה מכילות את הקוד להפעלה כאשר משתמש לוחץ על לחצני התפריט שנוספו לסרגל הכלים של Google Sheet.

changeValueOnSubmit (e) ו- setIDOnSubmit (e)- אלה הפונקציות שנבחן לעת עתה. הם אחראים לעדכון שדות מסוימים עם ערכי ברירת מחדל בעת שליחת הטופס בתחילה.

שלב 4: הפעלת OnFormSubmit

שתי הפונקציות האלה, changeValueOnSubmit (e) ו- setIDOnSubmit (e), צריכות להיות מחוברות לפעולת המשתמש של שליחת טופס. לשם כך עלינו להפעיל טריגר.

אנו מפעילים את ההדק על ידי לחיצה על עריכה> הטריגרים של הפרויקט הנוכחי. פעולה זו פותחת את מרכז המפתחים של Google.

בפינה הימנית התחתונה של לוח המחוונים של ההדק נמצא כפתור הוסף טריגר. לחץ כאן.

כעת נקים את הפונקציה להפעלה בעת שליחת טופס. במקרה שלנו יש לי מספר פונקציות (changeValueOnSubmit (e) ו- setIDOnSubmit (e)) שהכנסתי בתוך הפונקציה onSubmit () כך שאני צריך רק להגדיר טריגר אחד. לכן אנו בוחרים ב- onSubmit () ונקבע את הטריגר הזה להפעלה על שליחת טופס.

כעת יש לנו טופס עבודה שיאכלס גיליון Google עם מזהים ייחודיים ויגדיר ערכי ברירת מחדל.

כעת תוכל להעלות פריטים משלך באמצעות טופס Google. (זה לא הכרחי כדי להמשיך מכיוון שיש כבר ערכי הדגמה). כעת נצלול לממשק המשתמש.

שלב 5: הגדרת ממשק המשתמש

ברוך הבא! סוף סוף הגענו לחלק שבא לך, ממשק המשתמש !!!!

במבט ראשון, אין כאן כלום. עדיין לא התקשרנו. כדי לטעון את הדף מהר יותר החלטתי לא להציק לדף הראשון עם כל הפריטים שלך ולאפשר לך ללחוץ על מה שאתה רוצה לראות מהר יותר. מכיוון שזה המצב אין פריטים בשדה התוכן הראשי ואין מסננים בסרגל הצד. בואו ללחוץ על הכל כדי לראות מה יש במאגר הנתונים שלנו.

כעת העמסנו כל פריט במסד הנתונים שלנו לשדה התוכן הראשי. תראה תמונות, מספרי זהות, צבע, גדלים ומיקומים. ניתן לעדכן את שדה המיקום כאן! אם תחליט להלוות את הפריט תוכל לבחור באפשרות זו, תוכל למקם אותו בארון שלך, בשידה או בכביסה.

ובסרגל הצד שלנו יש לנו כל שדה אפשרי עבור כל פריט לבוש בשאילתה החדשה שלנו. תארו לעצמכם שיש 20 אפשרויות גודל שונות בסרגל הצד הזה, זה לא יהיה יעיל במיוחד, אז בואו לצמצם את החיפוש שלנו על ידי לחיצה על אביזרים.

עכשיו לאחר שטענו אביזרים, תסתכל על סרגל הצד. הוא הסתגל ל -3 שדות בלבד, מכיוון שאלו הפרמטרים החלים על כל פריט בשאילתה זו. אני הולך לעשות סוג לפי צבע. בלחיצה על הצבע מופיעה תיבה נפתחת. כאן אני יכול להקליד את הצבע שאני רוצה ולאחר מכן לבחור אותו, או שאם אראה את האפשרות שלי מיד אני פשוט לוחץ עליה. בחרתי אדום להפגנה זו. לחץ על החל מסנן בתחתית סרגל הצד הזה והתוכן הראשי ירענן ויציג לך את הפריטים שהצבע האדום נקבע כפרמטר הצבע שלהם.

הזכרתי בעבר מאגר מידע זה עוזר לי לנהל את הפריטים שלי בהשאלה ובכביסה שלי. כדי להקל מעט, במקום ללחוץ ידנית על כל מיקום נפתח בדף הראשי הזה יצרתי את מצב הכביסה. חזור לדף גיליון Google ותחת תצוגת האפליקציות תראה את מצב הכביסה. אפשרות זו תעלה מודל קטן יותר המציג רק פריטים עם מיקום הכביסה. כעת אני יכול לסמן את כל הפריטים האלה כברירת מחדל, מה שיחזיר אותם למיקומם שבהם הם מאוחסנים בדרך כלל.

שלב 7: הפרויקט הושלם

מזל טוב

לאלו מכם שרק רוצים מסד נתונים עובד לניהול הפריטים שלכם, ברוכים הבאים למארגן המקוון שלכם. לאלו המוחות הסקרנים המתעניינים בקוד שמאחורי יישום זה. הישאר שם בזמן שאני מפרק אותו.

*אתה רשאי למחוק את פריטי הבדיקה לאחר שתזין לפחות אחד מהפריטים שלך למאגר הנתונים. (אסביר מאוחר יותר אם תישאר שם).

שלב 8: שלב 1: קוד ה- Back-End (קוד שרת.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; var max = 15; var min = 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) שינוי ערך כתובת האתר:

var DataChange = e.namedValues ["תמונת פריט"]; var DefaultLocation = e.namedValues ["היכן אתה שומר פריט לבוש זה?"]; var ColD = ColumnID _ ("תמונת פריט") +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 Sheets היא קישור למסמך בפועל. במקרה שלנו, כפי שאנו יוצרים דף HTML אנו רוצים שהקישור יהיה רק התמונה.
• על ידי שינוי ה"פתוח? " חלק מכתובת האתר ל "uc? export = view &" יצרנו במקום זאת קישור לתמונה.
• שוב נציב ערך חדש זה במיקום הקישור הנוכחי של פריט תמונה.
• אני גם מגדיר את "מיקום ברירת המחדל" ו"מיקום הנוכחי "של הפריט לאותו דבר במסד הנתונים. זה יעזור בעת ניסיון להשתמש במצב הכביסה שלי.

• נצלול לתוכו בעמוד הבא אך זהו מבט ראשון בפונקציה ColumnID_ () שיצרתי.

  פונקציה זו משתמשת בשמות עמודה כדי לתרגם אותה למספר שלם של העמודות, מה שעוזר לשיחות טווח הדורשות מספר עמודה ולא שם

4) SpreadsheetApp.getUI ()

• בתמונה השנייה אתה יכול לראות את השימוש ב- SpreadsheetApp.getUI () כפי שהוא שימש ליצירת תוספת לתפריט סרגל הכלים בגיליון Google.
• הפונקציה.getUI () מסייעת גם ביצירת קופץ מודאלי המשמש למצב כביסה וכקישור מהיר לממשק האתר.

5) שירות HTML

• ישנם שני סוגים של HTMLServices המשמשים את הקוד הזה: תבנית ו- HTMLOutput
• התבנית מאפשרת להכניס קוד בתוך קוד ה- HTML כך שניתן לאכלס מידע המגיע משרת בעת קריאת הדף.
• פלט HTML מציג דפי HTML פשוטים.
• יש לנו גם את שיטת כולל () המאפשרת לנו ליצור קבצי HTML מרובים ולשלב אותם בקובץ HTML אחד עם תבנית על ידי החזרת תוכן הקובץ בפורמט HTML ולא במחרוזת.

צירפתי מסמך שהוקם כמו תיעוד סקריפטים של Google App כדי להביא היכרות עם האופן שבו קוד המקור והפונקציונליות מוסברים בתוך Google Apps.

שלב 9: שלב 2: קוד הגבול חלק 2 (שיחות שרת. Gs)

כעת נכנסנו ל- Server Calls.gs. פונקציות אלה משמשות בעיקר ב- JavaScript JavaScript, כך שהן הופרדו מקוד המשמש בעיקר בחלק האחורי הממוקם ב- Server Code.gs.

תמונה 1) משתנים גלובליים:

תמונה 2) להביא פריטים:

תמונה 3) fetchItemsQry

תמונה 4) filterItems

תמונה 5) fetchFiltersWithQry

תמונה 6) ColumnID ו- CacheCalls

יש כל כך הרבה על מה לדבר עם כל אחד מאלה. וכדי לפרק את הקוד ולהסביר מה קורה הייתי צריך קצת יותר שטח הקלדה. מצורף מסמך לפירוט הקוד של ServerCalls.gs

מסמך זה מוגדר כמו תיעוד סקריפטים של Google App ואף יוצר קישורים לאובייקטים דומים.

שלב 10: שלב 3: קוד HTML (Application.html)

קוד HTML הופך מאוד לא מרוצה בתוך תיבת הדו -שיח של הוראה. אז אנא עקוב אחר התמונות למעלה.

1) בכותרת הדף Application.html אנו קובעים כותרת וקוראים לדף CSS.html שלנו להיות נטען.

*בהיותנו דף HTML בתבנית, אנו יכולים להוסיף עוד קוד למסמך זה מבלי להעמיס את המסך הנוכחי על ידי שימוש בשיטת ה- include (pageName) שהוזכרה לעיל שנמצאה ב- Server Code.gs

תיבת הכותרת הראשית נמצאת גם בתמונה זו. תוכל לשנות את הכותרת כאן ולהזין ארון הבגדים של

2) ממש מתחת לכותרת נמצא סרגל הניווט העליון שלנו.

סרגל ניווט זה כולל את כל סוגי המאמרים המופיעים בגיליון המאמרים בתוך גליונות Google שלנו.

נקראת פונקציה מוטבעת לאחזר מערך של פריטים אלה. לאחר מכן מופעלת לולאה שתכלול כל אחת מהאפשרויות הללו ככפתור תפריט, להשלים עם קוד פעולה, כך שכאשר משתמש לוחץ על כפתור התפריט, הפריטים המתאימים יופיעו באזור הגוף.

3) הגוף העיקרי.

ישנם 4 מנות לחלק זה. פלט טקסט, מסנן סרגל הצד, תמונות הגוף העיקריות ו- JS כולל.

פלט הטקסט מאפשר למשתמש לראות תצוגת טקסט מהירה לאיזה סוג פריטים הוא מסתכל כרגע במקום להתייחס לאפשרות התפריט שבחר.

מסנן סרגל הצד מכיל את המסנן הרבים הזמינים לסוג הפריט שהמשתמש בחר. מסננים אלה משקפים את כל האפשרויות הזמינות לקטגוריה זו, כמו גם כמה פריטים נכללים בערך זה. סרגל צד זה מאוכלס בקוד JavaScript (עליו יידון בהמשך).

הגוף הראשי כרגע ריק, אך בדיוק כמו המסננים הוא יתמלא בתיבות פריטים המפרטים את מזהה הפריט, הצבע, הגודל והמיקום עם תמונה כלולה לאחר שהמשתמש יבחר קטגוריה וקוד ה- JavaScript יאכלס אזור זה.

לבסוף כולל (JS), בואו נסתכל על זה בשלב הבא.

שלב 11: שלב 4: קוד JavaScript (JS.html)

אם חשבת שקוד השרת הוא קטע כבד קבל עומס מזה.

כאן אנו משלבים את ה- HTML וה- SeverCode שלנו עם אינטראקציות של משתמשים. יש לעבד כאן כל פריט שנלחץ עליו כדי לקבל את הנתונים הנכונים ולהחזיר אותם בפורמט קריא. אז בואו נסתכל על השיחות הראשונות שלנו:

התסריט קורא: אני משתמש ב -3 ספריות שונות לפרויקט זה; jquery, bootstrap ותוסף מיוחד לבחירת bootstrap. ספריות אלה מאפשרות עיצוב של אובייקטים ושיחות קלות יותר לרכיבים בתוך קוד ה- HTML.

השורה החשובה הבאה שלי ב- JavaScript נמצאת להלן:

$ (מסמך).keypress (function (אירוע) {if (event.which == '13') {event.preventDefault (); }});

כאן אני משבית את מקש ה- enter מפעיל כל אחת מהצורות. כמו במקרה זה מוקצה ל- Google Web Apps רק כתובת של דף אחד. לחיצה על Enter תוסיף נתונים לכתובת ה- HTML ותנסה להפנות את המשתמש. על ידי השבתת פעולה זו, אתה מאפשר לקוד ה- JavaScript שלך לבצע את כל העבודה.

פונקציה removeFilters () {google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure). ServerRemoveFilters (); }

function updateDBlocation (id, value) {google.script.run.withSuccessHandler (allGood).withFailureHandler (FailDBUpdate).updateLocation (מזהה, ערך); }

להלן שתי פונקציות המבצעות שיחות לקובץ Server Code.gs. השורה:

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

יש בו חלק רב של עבודה אך השלד מושרש מ- "google.script.run" המספר לדף ה- HTML שהפונקציה הבאה נמצאת בשרת.

• החלק האחרון של הקוד הזה הוא הפונקציה להריץ. בדוגמה זו ServerRemoveFilter ()
• על ידי הוספת withSuccessHandler () דף ה- HTML יודע כעת מה לעשות עם הנתונים המוחזרים, וזאת כדי להפעיל את הפונקציה עם סוגריים.
• אותו דבר לגבי withFailureHandler ()

כעת, לאחר ששברנו את שיחת קוד השרת, הבה נציץ במה שקורה כאשר שיחות השרת האלה מצליחות ונכשלות.

function allGood (e) {console.log ("הצלחה בשרת"); } פונקציה onFailure (שגיאה) {$ ("#message-box"). html ("

לא ניתן להביא פריטי לבוש כרגע. שגיאה: " + error.message +"

");} function FailDBUpdate (שגיאה) {$ ("#message-box "). html ("

אין לך גישה לשנות את המיקום. שגיאה: " + error.message +"

"); $ (". מיקום-בוחר "). prop ('מושבת', 'מושבת');}

יצרתי יומן קונסולות פשוט מאוד כדי להצביע על הצלחה בעת הפעלת פונקציית המיקום שתוכל לראות בה כ- allGood ().

בעת טיפול בשגיאות, שתי הפונקציות הללו פולטות את הודעת השגיאה שבה המשתמש יכול לראות באמצעות קריאת jQuery לאובייקט HTML עם מזהה "תיבת הודעות".

עכשיו בואו ניגש לעבודה המחורבנת

שלב 12: שלב 5: פעולות לחיצה על קוד JavaScript (JS.html)

בשורת התפריטים העליונה יש אפשרויות לכל סוג מאמר. הפונקציה שהם מפעילים בלחיצה היא:

function filterType (article, id) {$ ("ul.navbar-nav li.active"). removeClass ("פעיל"); $ ("#currentArticle"). html ("// HTML CODE HERE");

updateSideBar = true;

google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure).fetchItems ("מאמרים", מאמר); var newSelect = "#type-"+id; $ (newSelect).addClass ("פעיל"); $ ("#myNavbar"). removeClass ("in"); }

אנו יכולים לראות בקוד זה יש לנו google.script.run אשר מתקשר לשרת כדי לאחזר מידע. פונקציית ההצלחה של שיחה זו היא updateItems ().

תמונה 1 (עם קוד ה- HTML הכבד בתוך הפונקציה הזו קשה להעתיק את הקוד אך ורק מבלי להופיע בלגן בתיבה זו)

בקוד updateItems (), קורים לנו הרבה דברים. שוב עלינו לעבור דרך האובייקט שהוחזר אלינו ולהוסיף כל פריט לדף הגוף הראשי שלנו.

קוד ה- HTML מתווסף כמערכים כדי לפרק את הקוד ולהקל על הקריאה ולראות היכן מוכנס itemData.

בלולאה של כל פריט, אני מסיר שדות שאני לא רוצה לראות בתיאור כגון ברירת מחדל, חותמת זמן וכתובת URL לתמונה. אני מסיר את כתובת האתר של התמונה מהתיאור מכיוון שהיא מתווספת כ- href לתג במקום. לאחר איסוף המידע הזה הוא נשלח לגוף הראשי באמצעות הפונקציה jQuery.append ().

לאחר שנוספו כל הפריטים לדף, שאילתת הפריטים הזו נשלחת שוב לקוד השרת כדי למיין ולהחזיר את אפשרויות הסינון כפי שניתן לראות בתמונה 2.

תמונה 2 (עדכון סרגל הצד)

בדומה מאוד לפונקציית updateItems (), יש לנו שוב מערכים של קוד HTML ולולאה לכל אפשרויות המסנן. השינוי הבולט היחיד הוא jQuery.selectpicker ('רענון'). פונקציה זו מגיעה מספריית התסריט שכללנו בשלב האחרון. הוא מאפשר למתכנת לכתוב HTML פשוט לבחור ולתת לספרייה לעדכן אותו כך שיכלול פונקציה שניתן לחפש וכן את קוד ה- CSS.

תמונה 3 (סינון באמצעות סרגל הצד)

לבסוף יש לנו את הפונקציה updateFilter (formData). זה משמש בעת שליחת טופס מהסרגל הצדדי. אנו מתחילים להשתמש בפונקציה jQuery.serializeArray () זה קורא את קוד ה- HTML של האלמנט שהוגדר במקרה שלנו טופס, ומחזיר את הערכים במחרוזת שיישלחו לשרת. ואנחנו מתחילים את התהליך מתמונה 1 מחדש.

שלב 13: הסוף ….בסוף

ובכן יש לך את זה; הסבר מלא ויסודי שיעזור לך להקים מלתחה מקוונת משלך, או לנצל את הפונקציונליות שנוצרה ב- Google Scripts שלי כדי להרחיב את הפרויקט שלך.

זה היה מסע קידוד הפרויקט הזה (ותיעוד באמצעות הוראה זו) אך נהניתי מהתהליך ומקווה שתיהנו מהמוצר. אשמח לשמוע ממי שמבצע התאמות כפי שמייקל ג'ורדן אומר "התקרה היא הגג" ואני מסכים שליישום זה אין גבולות.