ออแกไนเซอร์ตู้เสื้อผ้า: 13 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:05

ไม่ว่าจะเป็นการซื้อเสื้อผ้าหรือถูกขอยืมสิ่งของใดๆ ก็ตาม มีหลายครั้งที่คุณอยากให้คุณแอบดูตู้เสื้อผ้าของคุณจากทุกที่เพื่อดูว่าคุณมีของที่คล้ายกันหรือไม่ ออแกไนเซอร์ตู้เสื้อผ้าทำอย่างนั้นและอีกมากมาย!

นี่คือร้านค้าครบวงจรและกว้างขวางสำหรับวัตถุประสงค์อื่น ๆ มากมาย My Wardrobe Organizer คือการรวมกันของ Google ชีตเป็นฐานข้อมูล SQL, Google Scripts สำหรับจัดการข้อมูล และ Google WebApp สำหรับพอร์ทัลออนไลน์สำหรับข้อมูลนี้ ผู้ใช้ปลายทางสามารถดูรายการทั้งหมด กรองเฉพาะบางรายการ ทำเครื่องหมายรายการว่ายืมตัว จัดการซักรีดของพวกเขา และห้ามคุณแม่ไม่ให้ซื้อเสื้อตัวเดียวกันให้คุณในวันคริสต์มาสทุกปี*

(*ไม่มีประกัน คุณแม่จะซื้อของตามต้องการ ไม่ว่าจะจำเป็นหรือไม่ก็ตาม)

เมื่อมองแวบเดียวที่การออกแบบเว็บไซต์ในภาพด้านบน บางคนอาจรู้จักเลย์เอาต์ที่คุ้นเคย ออแกไนเซอร์ตู้เสื้อผ้าถูกตั้งค่าเหมือนเว็บไซต์เครื่องแต่งกายทั่วไป แยกตามแผนกต่างๆ ด้านบนและตัวกรองที่ด้านข้าง อินเทอร์เฟซนี้ทำให้ผู้ใช้ทั่วไปคุ้นเคยกับฟังก์ชันการทำงาน และใช้งานง่าย

ขั้นตอนที่ 1: การตั้งค่าสำเนาของคุณเอง

เริ่มต้นด้วยการสร้างสำเนาโครงการนี้ของคุณเอง

Google ไดรฟ์

คลิกลิงก์ด้านบนเพื่อนำคุณไปยังเวอร์ชันปัจจุบันของแอปพลิเคชันนี้

คุณจะเห็น 3 รายการในโฟลเดอร์นี้: Google Form, Google ชีต และโฟลเดอร์

คลิกขวาที่ Google ชีตแล้วคลิกสร้างสำเนา

ตั้งค่าตำแหน่งของสำเนานี้เป็นไดรฟ์ของคุณเอง

หลังจากคัดลอกเอกสารนี้แล้ว Google ฟอร์มจะถูกสร้างขึ้นโดยอัตโนมัติในโฟลเดอร์เดียวกับที่คุณย้าย Google ชีต

ในการสร้างโฟลเดอร์ (ซึ่งจำเป็นสำหรับการรวบรวมการอัปโหลดรูปภาพของรายการ) ให้คลิก Google Form ที่คัดลอกมาและจะมีข้อความแจ้งให้คุณกู้คืนตำแหน่งโฟลเดอร์สำหรับการอัปโหลด

ตอนนี้คุณมีสำเนาของเอกสารนี้สำหรับตัวคุณเองแล้ว!

ขั้นตอนที่ 2: ภาพรวมของ Google ฟอร์ม

ตอนนี้คุณมีเวอร์ชันของแอปพลิเคชันนี้แล้ว มาดูรอบๆ กันดีกว่า

Google Form ของคุณได้รับการตั้งค่าให้ยอมรับรายการประเภทต่างๆ มากมาย อย่างไรก็ตาม เสื้อ กางเกง ชุดเดรส และรองเท้าล้วนมีข้อจำกัดด้านขนาดที่แตกต่างกัน ดังนั้นส่วนอื่นของแบบฟอร์มนี้จะถูกกรอกตามแผนกที่คุณยื่นรายการของคุณภายใต้ ในเทมเพลต (บทความสำหรับผู้ชาย) ของฉัน ฉันได้สร้างหมวดหมู่การปรับขนาดที่แตกต่างกัน 5 หมวดหมู่ (สำหรับบทความผู้หญิงคลิกที่นี่มีอีกมากมาย)

ใต้ส่วนการปรับขนาดแต่ละส่วน ฉันได้กำหนดชื่อเฉพาะสำหรับแต่ละพารามิเตอร์ที่ฉันจะรวบรวม เราไม่ต้องการให้มีหลายคอลัมน์ในฐานข้อมูลของเราที่มีชื่อ "ขนาด" มิฉะนั้นเราจะไม่สามารถระบุประเภทของเสื้อผ้าที่ใช้กับขนาดได้

ที่ส่วนท้ายของแต่ละส่วน ผู้ใช้จะถูกนำไปยังส่วนสุดท้ายของแบบฟอร์มนี้: ที่ตั้ง โดยส่วนตัวแล้วฉันเลือกที่จะเพิ่มตำแหน่งเพื่อกำหนดรายการที่ซักแห้ง ในซักรีด ในสถานที่ของพวกเขา หรือรายการเหล่านั้นที่ฉันให้เพื่อนยืม สิ่งนี้ทำให้ฉันมีระเบียบและไม่รู้สึกเหมือนขาดเสื้อผ้าที่ไหนสักแห่ง

ดังที่ได้กล่าวไว้ตั้งแต่ต้น โครงการนี้สามารถขยายได้หลายล้านวิธี คุณสามารถใช้มันสำหรับสินค้าคงคลัง เครื่องมือจัดระเบียบที่แม่นยำยิ่งขึ้น หรือสำหรับการยืมเสื้อผ้าอย่างเคร่งครัด ฟิลด์และส่วนที่คุณสามารถเพิ่มได้นั้นไม่มีที่สิ้นสุด ดังนั้นอย่ารู้สึกว่าถูกจำกัดเฉพาะสิ่งที่อยู่ในแบบฟอร์มของฉัน (สำหรับบทความของผู้หญิงคลิกที่นี่)

ก่อนที่คุณจะอัปโหลดรายการของคุณเอง ให้ไปยังขั้นตอนถัดไปเพื่อให้แน่ใจว่าการส่งที่ถูกต้อง

ขั้นตอนที่ 3: Google Scripts: (Server Code.gs) ดูข้อมูลและโค้ดก่อน

เมื่อคลิกเข้าไปในเอกสาร Google ชีต คุณจะเห็นคอลัมน์ข้อมูลจำนวนมาก (และบางแถวที่เหลือสำหรับการสาธิต) ในระหว่างการส่งแบบฟอร์ม จะมีการข้ามบางส่วน ซึ่งจะเห็นได้จากข้อมูลที่ขาดหายไปในบางคอลัมน์ แต่มีการเพิ่มคอลัมน์เพิ่มเติม เช่น ID, ตำแหน่งเริ่มต้น, ใคร และที่อัปเดต เพื่อติดตามการแก้ไขรายการเหล่านี้ได้ดียิ่งขึ้น

ฟิลด์ ID ถูกสร้างขึ้นเมื่อคุณส่งแบบฟอร์มเพื่ออนุญาตให้ใช้ตัวระบุเฉพาะเมื่อสำรวจฐานข้อมูลนี้ ในการสร้างฟิลด์นี้ เราจะดูที่ Script Editor โดยคลิกที่ Tools>Script Editor

เมื่อเปิด Script Editor คุณจะสังเกตเห็นเอกสาร 8 ฉบับในแถบด้านข้างของหน้าต่างใหม่นี้ เอกสารเหล่านี้ช่วยควบคุมกระบวนการส่วนหลัง การแสดงผลส่วนหน้า และฟังก์ชันส่วนหน้า เราจะกระโดดเข้าไปในแต่ละอัน (ถ้าคุณติดอยู่) แต่ตอนนี้คลิกที่รหัสเซิร์ฟเวอร์

ในไฟล์ Server Code.gs มีฟังก์ชันมากมาย:

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

onSubmit(e) - ฟังก์ชันนี้จะได้รับการกำหนดค่าเป็นฟังก์ชันแรกที่จะทำงานเมื่อส่งแบบฟอร์ม Google คุณสามารถวางฟังก์ชันอื่นๆ ภายในฟังก์ชันนี้เพื่อให้กระบวนการต่างๆ เกิดขึ้นได้

onOpen (e) - ฟังก์ชันนี้ถูกเรียกเมื่อเปิด Google ชีต มันเติมตัวเลือกเมนูใหม่เพื่อให้สามารถเข้าถึงลิงค์และมุมมองแอปพลิเคชันได้อย่างรวดเร็ว

doGet()- ฟังก์ชันนี้ถูกเรียกในการเรียกที่อยู่เว็บแอป เมื่อผู้ใช้เรียกดู Web App ที่เผยแพร่ รหัสนี้จะบอกให้หน้าเว็บนั้นแสดงอะไร ในกรณีนี้คือเอกสาร Application.html

รวม (ชื่อไฟล์) - ฟังก์ชันนี้ใช้ภายในหน้า HTML เพื่ออ่านเอกสารอื่นและแทรกเนื้อหาลงในรูปแบบ HTML ที่เหมาะสมภายในหน้าอื่น เราใช้สำหรับไฟล์ CSS.html และ JS.html ของเรา

openApplication() และ openLaundryApp() - ฟังก์ชันเหล่านี้มีโค้ดที่จะเรียกใช้เมื่อผู้ใช้คลิกที่ปุ่มเมนูที่เพิ่มลงในแถบเครื่องมือ Google ชีต

changeValueOnSubmit(e) และ setIDOnSubmit(e)- นี่คือฟังก์ชันที่เราจะพิจารณาในตอนนี้ พวกเขามีหน้าที่รับผิดชอบในการอัปเดตฟิลด์บางฟิลด์ด้วยค่าเริ่มต้นเมื่อส่งแบบฟอร์มในครั้งแรก

ขั้นตอนที่ 4: เปิดใช้งาน OnFormSubmit

ฟังก์ชันทั้งสองนี้ changeValueOnSubmit(e) และ setIDOnSubmit(e) จำเป็นต้องเชื่อมต่อกับการดำเนินการของผู้ใช้ในการส่งแบบฟอร์ม ในการทำเช่นนั้น เราจำเป็นต้องเปิดใช้งานทริกเกอร์

เราเปิดใช้งานทริกเกอร์โดยคลิก แก้ไข > ทริกเกอร์ของโปรเจ็กต์ปัจจุบัน ซึ่งจะเปิด Google Developer Hub

ที่มุมขวาล่างของแดชบอร์ดทริกเกอร์คือปุ่ม เพิ่มทริกเกอร์ คลิกที่นี่.

ตอนนี้เราจะตั้งค่าฟังก์ชันให้ทำงานเมื่อมีการส่งแบบฟอร์ม ในกรณีของเรา ฉันมีหลายฟังก์ชัน (changeValueOnSubmit(e) และ setIDOnSubmit(e)) ที่ฉันใส่ไว้ในฟังก์ชัน onSubmit() ดังนั้นฉันจึงต้องตั้งค่าทริกเกอร์ 1 รายการเท่านั้น ดังนั้นเราจะเลือก onSubmit() และตั้งค่าทริกเกอร์นี้ให้ทำงาน On form send

ขณะนี้ เรามีแบบฟอร์มการทำงานที่จะเติมข้อมูลใน Google ชีตด้วยตัวระบุที่ไม่ซ้ำกันและตั้งค่าเริ่มต้น

ตอนนี้คุณสามารถอัปโหลดรายการของคุณเองโดยใช้ Google ฟอร์ม (ไม่จำเป็นต้องทำต่อเนื่องจากมีค่าสาธิตอยู่แล้ว) ตอนนี้เราจะดำดิ่งสู่ส่วนต่อประสานผู้ใช้

ขั้นตอนที่ 5: การตั้งค่าส่วนต่อประสานผู้ใช้

ยินดีต้อนรับ! ในที่สุดเราก็มาถึงส่วนที่คุณเข้ามาแล้ว ส่วนต่อประสานผู้ใช้!!!!

เมื่อดูครั้งแรก ไม่มีอะไรที่นี่ เรายังไม่ได้โทรเลย เพื่อให้โหลดหน้าได้เร็วขึ้น ฉันตัดสินใจที่จะไม่รบกวนหน้าแรกด้วยรายการทั้งหมดของคุณ และอนุญาตให้คุณคลิกสิ่งที่คุณต้องการดูเร็วขึ้น เนื่องจากเป็นกรณีนี้จึงไม่มีรายการในฟิลด์เนื้อหาหลักและไม่มีตัวกรองในแถบด้านข้าง คลิกที่ทั้งหมดเพื่อดูว่ามีอะไรอยู่ในฐานข้อมูลของเรา

ตอนนี้เราได้โหลดทุกรายการในฐานข้อมูลของเราลงในช่องเนื้อหาหลักแล้ว คุณจะเห็นรูปภาพ หมายเลขประจำตัวประชาชน สี ขนาด และสถานที่ ฟิลด์ตำแหน่งสามารถอัปเดตได้ที่นี่! หากคุณตัดสินใจที่จะยืมสิ่งของ คุณสามารถเลือกตัวเลือกนั้นได้ คุณสามารถวางไว้ในตู้เสื้อผ้า โต๊ะเครื่องแป้ง หรือซักรีดของคุณ

และในแถบด้านข้างของเรา เรามีทุกช่องที่เป็นไปได้สำหรับเสื้อผ้าทุกชิ้นในการค้นหาใหม่ของเรา ลองนึกภาพว่ามีตัวเลือกการปรับขนาด 20 แบบในแถบด้านข้างนี้ อาจไม่ได้ผลนัก ดังนั้น เรามาจำกัดการค้นหาของเราให้แคบลงด้วยการคลิก อุปกรณ์เสริม

ตอนนี้เราได้โหลดอุปกรณ์เสริมแล้ว ให้ดูที่แถบด้านข้าง ได้ปรับให้เหลือเพียง 3 ฟิลด์ เนื่องจากเป็นพารามิเตอร์ที่ใช้กับทุกรายการในแบบสอบถามนี้ ฉันจะทำการจัดเรียงตามสี เมื่อคลิกที่สี กล่องดรอปดาวน์จะปรากฏขึ้น ที่นี่ฉันสามารถพิมพ์สีที่ต้องการแล้วเลือกสี หรือหากฉันเห็นตัวเลือกของฉันในทันที ฉันจะคลิกมัน ฉันเลือกสีแดงสำหรับการสาธิตนี้ คลิก ใช้ตัวกรอง ที่ด้านล่างของแถบด้านข้างนี้ และเนื้อหาหลักจะรีเฟรชโดยแสดงรายการที่มีการตั้งค่าสีแดงเป็นพารามิเตอร์สี

ก่อนหน้านี้ฉันพูดถึงฐานข้อมูลนี้ช่วยให้ฉันจัดการรายการยืมและซักผ้า เพื่อให้ง่ายขึ้นเล็กน้อย แทนที่จะคลิกทุกๆ ตำแหน่งดรอปดาวน์ในหน้าหลักนี้ด้วยตนเอง ฉันได้สร้างโหมดซักรีด กลับไปที่หน้า Google ชีตและภายใต้ App View คุณจะเห็นโหมดซักรีด ตัวเลือกนี้จะดึงกิริยาที่เล็กกว่าซึ่งแสดงเฉพาะรายการที่มีตำแหน่งของซักรีด ตอนนี้ฉันสามารถทำเครื่องหมายรายการเหล่านี้เป็นค่าเริ่มต้นได้ ซึ่งจะวางกลับเข้าไปในตำแหน่งที่ปกติจะจัดเก็บไว้

ขั้นตอนที่ 7: โครงการเสร็จสมบูรณ์

ยินดีด้วย

สำหรับบรรดาของคุณที่ต้องการฐานข้อมูลการทำงานเพื่อจัดการรายการของคุณ ยินดีต้อนรับสู่ Online Organizer ของคุณ สำหรับผู้อยากรู้อยากเห็นที่สนใจโค้ดเบื้องหลังแอปพลิเคชันนี้ ติดอยู่รอบ ๆ ขณะที่ฉันทำลายมันลง

*คุณมีอิสระที่จะลบรายการทดสอบหลังจากที่คุณป้อนรายการของคุณเองอย่างน้อยหนึ่งรายการลงในฐานข้อมูล (ฉันจะอธิบายในภายหลังถ้าคุณติดอยู่)

ขั้นตอนที่ 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) การกำหนด ID:

var LastID =range.getCell(rowNum-1, 1);var CellValue = Number(LastID.getValue());var ColA = 1; วาร์สูงสุด =15; วาร์ นาที=5; CellValue = CellValue+ Math.round((Math.random()* (สูงสุด - นาที) + นาที)); e.source.getActiveSheet().getRange(range.getLastRow(), ColA).setValue(CellValue); changeValueOnSubmit(จ);

• ก่อนหน้านี้ฉันขอให้ทิ้งค่าสาธิตไว้ในตารางจนกว่าผู้ใช้จะส่งค่าสำหรับตัวเองอย่างน้อยหนึ่งค่า เนื่องจากตัวสร้าง Auto ID อาศัยค่าสุดท้ายในฐานข้อมูลเพื่อเติม
• ฉันดึงแถวที่ 2 ถึงแถวสุดท้ายเนื่องจากแถวสุดท้ายเป็นค่าใหม่ของเรา และคอลัมน์ที่ 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_("รูปภาพรายการ") +1; var ColLoc = ColumnID_("ตำแหน่งเริ่มต้น"+1;DataChange = DataChange.toString().replace("open?", "uc?export=view&"); e.source.getActiveSheet().getRange(e.range.rowStart, ColD).setValue(DataChange); e.source.getActiveSheet().getRange(e.range.rowStart, ColLoc).setValue(สถานที่ตั้งเริ่มต้น);

• เมื่อส่งรูปภาพผ่าน Google ฟอร์ม URL ที่แทรกลงใน Google ชีตจะเป็นลิงก์ไปยังเอกสารจริง ในกรณีของเรา ในขณะที่เรากำลังสร้างหน้า HTML เราต้องการให้ลิงก์เป็นเพียงรูปภาพเท่านั้น
• โดยเปลี่ยน “เปิด?” ส่วนของ URL ไปที่ "uc?export=view&" เราได้สร้างลิงก์ไปยังรูปภาพแทน
• เราจะวางค่าใหม่นี้อีกครั้งในตำแหน่งของลิงก์รูปภาพรายการปัจจุบัน
• ฉันกำลังตั้งค่า "ตำแหน่งเริ่มต้น" และ "ตำแหน่งปัจจุบัน" ของรายการให้เป็นสิ่งเดียวกันในฐานข้อมูล สิ่งนี้จะช่วยได้เมื่อพยายามใช้โหมดซักรีดของฉัน

• เราจะเจาะลึกลงไปในหน้าถัดไป แต่นี่เป็นครั้งแรกที่เราได้เห็นฟังก์ชัน ColumnID_() ที่ฉันสร้างขึ้น

  ฟังก์ชันนี้ใช้ชื่อคอลัมน์เพื่อแปลเป็นจำนวนเต็มของคอลัมน์ ซึ่งมีประโยชน์สำหรับการเรียกช่วงที่ต้องการหมายเลขคอลัมน์มากกว่าชื่อ

4) SpreadsheetApp.getUI()

• ในภาพที่สอง คุณจะเห็นการใช้ SpreadsheetApp.getUI() เหมือนกับที่ใช้ในการสร้างเมนูแถบเครื่องมือเพิ่มเติมใน Google ชีต
• ฟังก์ชัน.getUI() ยังช่วยสร้างป๊อปอัปโมดอลซึ่งใช้สำหรับโหมดซักรีดและเป็นลิงก์ด่วนไปยังอินเทอร์เฟซเว็บไซต์

5) HTMLService

• HTMLServices มีสองประเภทที่ใช้ในโค้ดนี้: เทมเพลตและ HTMLOutput
• เทมเพลตอนุญาตให้แทรกโค้ดภายในโค้ด HTML เพื่อให้สามารถเติมข้อมูลที่มาจากเซิร์ฟเวอร์ได้เมื่อมีการเรียกเพจ
• เอาต์พุต HTML แสดงหน้า HTML อย่างง่าย
• เรายังมีเมธอด include() ซึ่งช่วยให้เราสร้างไฟล์ HTML ได้หลายไฟล์และรวมไฟล์เหล่านี้ไว้ในไฟล์ HTML เทมเพลตเดียวโดยส่งคืนเนื้อหาของไฟล์ในรูปแบบ HTML แทนที่จะเป็นสตริง

ฉันได้แนบเอกสารที่ตั้งค่าไว้ เช่น เอกสาร Google App Scripts เพื่อให้คุ้นเคยกับวิธีการอธิบายซอร์สโค้ดและฟังก์ชันการทำงานภายใน Google Apps

ขั้นตอนที่ 9: ขั้นตอนที่ 2: รหัสส่วนหลังส่วนที่ 2 (เซิร์ฟเวอร์ 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 แบบเทมเพลต เราสามารถเพิ่มโค้ดเพิ่มเติมให้กับเอกสารนี้โดยไม่ทำให้หน้าจอปัจจุบันรกโดยใช้วิธีการ include(pageName) ที่กล่าวถึงก่อนหน้านี้ที่พบใน Server Code.gs

กล่องส่วนหัวหลักยังพบในภาพนี้ คุณสามารถเปลี่ยนส่วนหัวได้ที่นี่และป้อน "[Your Name]'s Wardrobe" หรืออะไรก็ได้ที่คุณต้องการให้รู้จักกับหน้านี้

2) ด้านล่างส่วนหัวคือแถบนำทางด้านบนของเรา

แถบนำทางนี้รวมบทความทุกประเภทตามที่ระบุไว้ในแผ่นบทความภายใน Google ชีตของเรา

ฟังก์ชันอินไลน์ถูกเรียกเพื่อดึงอาร์เรย์ของรายการเหล่านี้ จากนั้นจะมีการรันลูปเพื่อรวมแต่ละตัวเลือกเหล่านี้เป็นปุ่มเมนู พร้อมด้วยโค้ดการทำงาน ดังนั้นเมื่อผู้ใช้คลิกที่ปุ่มเมนู รายการที่เกี่ยวข้องจะปรากฏในพื้นที่เนื้อหา

3) เนื้อหาหลัก

ส่วนนี้มี 4 ส่วน เอาต์พุตข้อความ ตัวกรองแถบด้านข้าง รูปภาพเนื้อหาหลัก และ JS รวมอยู่ด้วย

เอาต์พุตข้อความอนุญาตให้ผู้ใช้ดูมุมมองข้อความด่วนสำหรับประเภทรายการที่พวกเขากำลังดูอยู่ แทนที่จะอ้างอิงถึงตัวเลือกเมนูที่พวกเขาเลือก

ตัวกรองแถบด้านข้างประกอบด้วยตัวกรองจำนวนมากที่พร้อมใช้งานสำหรับประเภทของรายการที่ผู้ใช้เลือก ตัวกรองเหล่านี้สะท้อนถึงตัวเลือกทั้งหมดที่มีสำหรับหมวดหมู่นี้ รวมถึงจำนวนรายการที่อยู่ในค่าหมวดหมู่นั้น แถบด้านข้างนี้เต็มไปด้วยโค้ด JavaScript (ซึ่งจะกล่าวถึงต่อไป)

ขณะนี้เนื้อหาหลักว่างเปล่า แต่เหมือนกับตัวกรองที่เติมกล่องรายการที่มีรายละเอียด ID, สี, ขนาดและที่ตั้งของรายการด้วยรูปภาพที่รวมอยู่เมื่อผู้ใช้เลือกหมวดหมู่และรหัส JavaScript เติมพื้นที่นี้

สุดท้าย include(JS) มาดูสิ่งนี้ในขั้นตอนต่อไป

ขั้นตอนที่ 11: ขั้นตอนที่ 4: รหัส JavaScript (JS.html)

หากคุณคิดว่ารหัสเซิร์ฟเวอร์เป็นส่วนหนัก ให้โหลดสิ่งนี้

ที่นี่เรารวม HTML และ SeverCode ของเราเข้ากับการโต้ตอบกับผู้ใช้ รายการใดๆ ที่คลิกต้องได้รับการประมวลผลที่นี่เพื่อรับข้อมูลที่ถูกต้องและส่งคืนในรูปแบบที่อ่านได้ มาดูการโทรครั้งแรกของเรากัน:

สคริปต์เรียก: ฉันใช้ 3 ไลบรารีที่แตกต่างกันสำหรับโครงการนี้ jquery, bootstrap และโปรแกรมเสริมการเลือกบูตสแตรปพิเศษ ไลบรารีเหล่านี้อนุญาตให้จัดรูปแบบของอ็อบเจ็กต์และเรียกองค์ประกอบภายในโค้ด HTML ได้ง่ายขึ้น

JavaScript บรรทัดสำคัญถัดไปของฉันอยู่ด้านล่าง:

$(เอกสาร).ปุ่มกด(ฟังก์ชั่น (เหตุการณ์) { if (event.which == '13') { event.preventDefault(); } });

ที่นี่ฉันกำลังปิดการใช้งานคีย์ Enter จากการเรียกฟอร์มใด ๆ ในกรณีนี้ Google Web Apps ถูกกำหนดที่อยู่เพจเดียวเท่านั้น การกด Enter จะเพิ่มข้อมูลไปยังที่อยู่ HTML และพยายามเปลี่ยนเส้นทางผู้ใช้ การปิดใช้งานนี้แสดงว่าคุณอนุญาตให้โค้ด JavaScript ทำงานทั้งหมดได้

ฟังก์ชัน removeFilters(){ google.script.run.withSuccessHandler(updateItems).withFailureHandler(onFailure). ServerRemoveFilters(); }

ฟังก์ชัน 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.withSuccessHandler(updateItems).withFailureHandler(onFailure). ServerRemoveFilters();

มีส่วนการทำงานหลายอย่าง แต่โครงกระดูกนั้นถูกรูทจาก " google.script.run" ซึ่งบอกหน้า HTML ว่าฟังก์ชันต่อไปนี้อยู่บนเซิร์ฟเวอร์

• บิตสุดท้ายของโค้ดนี้คือฟังก์ชันที่จะรัน ในตัวอย่างนี้ ServerRemoveFilter()
• ด้วยการเพิ่ม withSuccessHandler() ตอนนี้หน้า HTML รู้ว่าต้องทำอย่างไรกับข้อมูลที่ส่งคืน และนี่คือการเรียกใช้ฟังก์ชันด้วยวงเล็บ
• เช่นเดียวกับ withFailureHandler()

ตอนนี้เราได้แยกย่อยการเรียกรหัสเซิร์ฟเวอร์แล้ว มาดูกันว่าเกิดอะไรขึ้นเมื่อการเรียกเซิร์ฟเวอร์เหล่านี้สำเร็จและล้มเหลวกัน

ฟังก์ชั่น allGood(e){ console.log("Success on server"); } ฟังก์ชั่น onFailure(ข้อผิดพลาด){ $("#message-box").html("

ไม่สามารถดึงรายการเสื้อผ้าได้ในขณะนี้ ข้อผิดพลาด: " + error.message +"

"); } ฟังก์ชัน FailDBUpdate(ข้อผิดพลาด){ $("#message-box").html("

คุณไม่มีสิทธิ์เข้าถึงเพื่อแก้ไขตำแหน่ง ข้อผิดพลาด: " + error.message +"

"); $(".location-selects").prop('disabled', 'disabled'); }

ฉันสร้างบันทึกคอนโซลที่ง่ายมากเพื่อแสดงความสำเร็จเมื่อมีการเรียกใช้ฟังก์ชันตำแหน่งซึ่งคุณสามารถเห็นเป็น allGood()

เมื่อจัดการกับข้อผิดพลาด ทั้งสองฟังก์ชันจะแสดงข้อความแสดงข้อผิดพลาดที่ผู้ใช้สามารถดูได้โดยใช้การเรียก jQuery ไปยังวัตถุ HTML ด้วย ID ของ "กล่องข้อความ"

มาลุยงานกันต่อ

ขั้นตอนที่ 12: ขั้นตอนที่ 5: การดำเนินการคลิกโค้ด JavaScript (JS.html)

แถบเมนูด้านบนมีตัวเลือกสำหรับบทความแต่ละประเภท ฟังก์ชั่นที่พวกเขาเรียกใช้เมื่อคลิกคือ:

ฟังก์ชัน filterType(บทความ, id){ $("ul.navbar-nav li.active").removeClass("active"); $("#currentArticle").html(" //HTML CODE ที่นี่");

updateSideBar = จริง;

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 ถูกเพิ่มเป็น Array เพื่อแยกโค้ดและทำให้อ่านง่ายขึ้นและดูว่ามีการแทรก itemData ไว้ที่ใด

ในลูปของแต่ละรายการ ฉันกำลังลบฟิลด์ที่ฉันไม่ต้องการเห็นในคำอธิบาย เช่น ค่าเริ่มต้น การประทับเวลา และ URL รูปภาพ ฉันลบ URL รูปภาพออกจากคำอธิบายเพราะถูกเพิ่มเป็น href ให้กับแท็กแทน เมื่อข้อมูลนี้ประกอบขึ้นแล้ว จะถูกส่งไปยังเนื้อหาหลักโดยใช้ฟังก์ชัน jQuery.append()

หลังจากเพิ่มรายการทั้งหมดลงในหน้าแล้ว แบบสอบถามของรายการนี้จะถูกส่งไปยังรหัสเซิร์ฟเวอร์อีกครั้งเพื่อจัดเรียงและส่งคืนตัวเลือกตัวกรองดังที่แสดงในรูปที่ 2

ภาพที่ 2 (กำลังอัปเดตแถบด้านข้าง)

คล้ายกันมากกับฟังก์ชัน updateItems() เรามีอาร์เรย์ของโค้ด HTML และลูปสำหรับตัวเลือกตัวกรองทั้งหมดอีกครั้ง การเปลี่ยนแปลงที่เห็นได้ชัดเจนเพียงอย่างเดียวคือ jQuery.selectpicker('refresh') ฟังก์ชันนี้มาจากไลบรารีสคริปต์ที่เรารวมไว้ในขั้นตอนสุดท้าย ช่วยให้โปรแกรมเมอร์เขียน HTML แบบเลือกอย่างง่าย และให้ไลบรารีอัปเดตเพื่อรวมฟังก์ชันที่ค้นหาได้เช่นเดียวกับโค้ด CSS

ภาพที่ 3 (กรองด้วยแถบด้านข้าง)

สุดท้าย เรามีฟังก์ชัน updateFilter(formData) ใช้เมื่อส่งแบบฟอร์มจากแถบด้านข้าง เราเริ่มต้นด้วยการใช้ฟังก์ชัน jQuery.serializeArray() ซึ่งจะอ่านโค้ด HTML ขององค์ประกอบที่กำหนดไว้ในกรณีของเราในรูปแบบ และส่งกลับค่าในสตริงที่จะส่งไปยังเซิร์ฟเวอร์ และเราเริ่มกระบวนการจากภาพที่ 1 อีกครั้ง

ขั้นตอนที่ 13: จุดจบ….ในที่สุด

คุณมีมัน; คำอธิบายโดยละเอียดและครบถ้วนเพื่อช่วยคุณสร้างตู้เสื้อผ้าออนไลน์ของคุณเอง หรือใช้ฟังก์ชันที่สร้างขึ้นใน Google Scripts ของฉันเพื่อขยายโครงการของคุณเอง

เป็นการเดินทางที่เขียนโค้ดโปรเจ็กต์นี้ (และจัดทำเอกสารผ่านคำแนะนำนี้) แต่ฉันสนุกกับกระบวนการนี้และหวังว่าคุณจะสนุกกับผลิตภัณฑ์ ฉันชอบที่จะได้ยินตอบกลับจากใครก็ตามที่ทำการปรับเปลี่ยนตามที่ Michael Jordan กล่าวว่า "เพดานคือหลังคา" และฉันยอมรับว่าแอปพลิเคชันนี้ไม่มีข้อ จำกัด