გარდერობის ორგანიზატორი: 13 ნაბიჯი

2024 ავტორი: John Day | [email protected]. ბოლოს შეცვლილი: 2024-01-30 10:18

იქნება ეს ტანსაცმლის საყიდლები ან ყოველთვის სთხოვენ რაიმე ნივთის სესხებას, არის დრო, როდესაც გისურვებთ, რომ შეხედოთ თქვენს კარადას ნებისმიერი ადგილიდან, რათა ნახოთ, გაქვთ თუ არა რაიმე მსგავსი. გარდერობის ორგანიზატორი აკეთებს ამას და უფრო მეტს!

ეს არის ერთჯერადი მაღაზია და გაფართოვებულია მრავალი სხვა მიზნისთვის. ჩემი საგარდერობო ორგანიზატორი არის Google Sheets- ის, როგორც SQL მონაცემთა ბაზის, Google Scripts მონაცემების დამუშავებისთვის და Google WebApp ამ მონაცემების ონლაინ პორტალის ერთობლიობა. საბოლოო მომხმარებელს შეუძლია ნახოს ყველა ელემენტი, გაფილტროს რაიმე კონკრეტული, შენიშნოს ნივთები, როგორც სესხი, მართოს თავისი სამრეცხაო და შეაჩეროს დედა, რომ არ გიყიდოს ერთი და იგივე მაისური საშობაოდ ყოველწლიურად*.

(*გარანტია არ არის. დედები ყიდულობენ იმას, რაც სურთ, გჭირდება თუ არა)

თუ გადავხედავთ ვებ – გვერდის დიზაინს ზემოთ მოცემულ სურათზე, შეიძლება ნაცნობი განლაგება ამოიცნოთ. გარდერობის ორგანიზატორი შექმნილია როგორც ნებისმიერი ჩვეულებრივი ტანსაცმლის ვებსაიტი. დანაწევრებული დეპარტამენტებით და ფილტრებით გათვალისწინებული გვერდით, ეს ინტერფეისი ჩვეულებრივი მომხმარებლისთვის ფუნქციონალურობის გაცნობაა. და მისი გამოყენება მარტივია.

ნაბიჯი 1: შექმენით თქვენი საკუთარი ასლი

დავიწყოთ ამ პროექტის საკუთარი ასლის შექმნით.

გუგლ დრაივი

დააწკაპუნეთ ზემოთ მოცემულ ბმულზე, რათა მიგიყვანოთ ამ პროგრამის ჩემს ახლანდელ ვერსიაზე.

ამ საქაღალდეში ნახავთ 3 ერთეულს: Google ფორმა, Google Sheet და საქაღალდე.

მარჯვენა ღილაკით დააწკაპუნეთ Google Sheet– ზე და დააწკაპუნეთ ასლის შექმნაზე.

დააყენეთ ამ ასლის მდებარეობა თქვენს საკუთარ Drive- ზე.

ამ დოკუმენტის კოპირების შემდეგ, Google ფორმა ავტომატურად გენერირდება იმავე საქაღალდეში, სადაც თქვენ გადაიტანეთ Google Sheet.

საქაღალდის შესაქმნელად (ეს აუცილებელია ერთეულის სურათების ატვირთვის შესაგროვებლად), დააწკაპუნეთ გადაწერილ Google ფორმაზე და გამოჩნდება მოთხოვნა, რომ აღადგინოთ საქაღალდის მდებარეობა ატვირთვისთვის.

ახლა თქვენ გაქვთ ამ დოკუმენტის ასლი, რომ თავად იმუშაოთ!

ნაბიჯი 2: Google ფორმის მიმოხილვა

ახლა, როდესაც თქვენ გაქვთ ამ პროგრამის საკუთარი ვერსია, მოდით მიმოვიხილოთ გარშემო.

თქვენი Google ფორმა დაყენებულია მრავალი სხვადასხვა სახის ერთეულის მისაღებად. თუმცა პერანგებს, შარვლებს, კაბებსა და ფეხსაცმელს აქვს განსხვავებული ზომის შეზღუდვები. ამრიგად, ამ ფორმის სხვა განყოფილება შევსებული იქნება იმ განყოფილების საფუძველზე, რომელზეც თქვენ შეიტანთ თქვენს ნივთს. ჩემს (მამაკაცის სტატიის) შაბლონში მე შევქმენი 5 განსხვავებული ზომის კატეგორია. (ქალთა სტატიებისთვის, დააწკაპუნეთ აქ, კიდევ ბევრია).

თითოეული ზომის განყოფილების ქვეშ, მე შევქმენი უნიკალური სათაური თითოეული პარამეტრისთვის, რომელსაც ვაგროვებ. ჩვენ არ გვსურს ჩვენს მონაცემთა ბაზაში გვქონდეს რამოდენიმე სვეტი სახელწოდებით "ზომა" ან ჩვენ ვერ შევძლებთ განვსაზღვროთ, რომელი ტიპის ტანსაცმელს ეხება ეს ზომა.

თითოეული განყოფილების ბოლოს, მომხმარებელი მიმართულია ამ ფორმის ბოლო ნაწილზე: მდებარეობა. მე პირადად ავირჩიე ადგილმდებარეობის დამატება ქიმწმენდაებში ნივთების დასადგენად, სამრეცხაოში, მათ ადგილას ან იმ ნივთებზე, რომლებშიც მეგობარს სესხის აღების უფლება მივეცი. ეს მაძლევს საშუალებას ვიყო მოწესრიგებული და არასოდეს ვიგრძნო რომ სადმე ტანსაცმლის ნაჭერი მენატრება.

როგორც თავიდანვე აღვნიშნე, ეს პროექტი მილიონობით სხვადასხვა გზით შეიძლება გაფართოვდეს. თქვენ შეგიძლიათ გამოიყენოთ იგი ინვენტარისთვის, უფრო ზუსტი ორგანიზაციის ინსტრუმენტისთვის, ან ტანსაცმლის მკაცრად სესხებისთვის. ველები და სექციები, რომელთა დამატებაც შეგიძლიათ გაუთავებელია, ასე რომ ნუ იგრძნობთ თავს შეზღუდულად იმით, რაც ჩემს ფორმაშია. (ქალთა სტატიებისთვის დააწკაპუნეთ აქ)

სანამ ატვირთავთ რამდენიმე საკუთარ ნივთს, მოდით გადავიდეთ შემდეგ საფეხურზე, რათა უზრუნველვყოთ სათანადო წარდგენა.

ნაბიჯი 3: Google Scripts: (Server Code.gs) პირველი გადახედეთ მონაცემებს და კოდს

თუ დააწკაპუნებთ Google Sheets დოკუმენტზე, ნახავთ მონაცემების ბევრ სვეტს (და რამდენიმე სტრიქონს, რომელიც დარჩა დემონსტრაციისთვის). ფორმის წარდგენისას ზოგიერთი განყოფილება გამოტოვებულია, ეს აშკარაა ზოგიერთ სვეტში დაკარგული მონაცემებიდან. მაგრამ დამატებითი სვეტები, როგორიცაა ID, ნაგულისხმევი მდებარეობა, ვინ და განახლებული დაემატა ამ ნივთების რედაქტირების უკეთ თვალყურის დევნებისთვის.

პირადობის მოწმობის ველი შეიქმნა, როდესაც თქვენ შეიტანეთ ფორმა, რომლითაც უნიკალური იდენტიფიკატორი იქნება შესაძლებელი ამ მონაცემთა ბაზის გადახედვისას. ამ ველის შესაქმნელად ჩვენ შევხედავთ სკრიპტის რედაქტორს ინსტრუმენტებზე> სკრიპტის რედაქტორზე დაწკაპუნებით.

სკრიპტის რედაქტორის გახსნით, თქვენ შეამჩნევთ 8 დოკუმენტს ამ ახალი ფანჯრის გვერდითა ზოლში. ეს დოკუმენტები ხელს უწყობს უკანა პროცესის, წინა დისპლეის და წინა ფუნქციის კონტროლს. ჩვენ გადავდივართ თითოეულ მათგანზე (თუკი დავრჩებით), მაგრამ ახლავე დააწკაპუნეთ სერვერის კოდზე.

სერვერის Code.gs ფაილში ბევრი ფუნქციაა:

onSubmit (e), onOpen (), doGet (), მოიცავს (ფაილის სახელი), openApplication (), openLaundryApp (), changeValueOnSubmit (e), setIDOnSubmit (e)

onSubmit (e) - ეს ფუნქცია იქნება კონფიგურირებული, როგორც პირველი ფუნქცია, რომელიც გააქტიურდება Google ფორმის გაგზავნისას. თქვენ შეგიძლიათ განათავსოთ სხვა ფუნქციები ამ ფუნქციის შიგნით, რათა მოხდეს მრავალი განსხვავებული პროცესი.

onOpen (e) - ამ ფუნქციას ეწოდება Google Sheets- ის გახსნისას. ის ავსებს მენიუს ახალ ვარიანტს, რომელიც საშუალებას აძლევს სწრაფ წვდომას განაცხადის ბმულებსა და ხედებზე.

doGet ()- ეს ფუნქცია იძახება ვებ აპლიკაციის მისამართის ზარზე. როდესაც მომხმარებელი ათვალიერებს გამოქვეყნებულ ვებ პროგრამას, ეს კოდი ეტყვის იმ გვერდს, თუ რა უნდა აჩვენოს. ამ შემთხვევაში, ეს არის დოკუმენტი Application.html.

მოიცავს (ფაილის სახელი) - ეს ფუნქცია გამოიყენება HTML გვერდების შიგნით სხვა დოკუმენტის წასაკითხად და მათი შინაარსის ჩასასმელად შესაბამის HTML ფორმატში სხვა გვერდზე. ჩვენ ვიყენებთ მას ჩვენი CSS.html და JS.html ფაილებისთვის.

openApplication () და openLaundryApp () - ეს ფუნქციები შეიცავს კოდს გასაშვებად, როდესაც მომხმარებელი დააჭერს Google Sheet ინსტრუმენტთა პანელზე დამატებულ მენიუს ღილაკებს.

changeValueOnSubmit (e) და setIDOnSubmit (e)- ეს ის ფუნქციებია, რომლებსაც ჩვენ ახლა განვიხილავთ. ისინი პასუხისმგებელნი არიან გარკვეული ველების განახლებაზე ნაგულისხმევი მნიშვნელობებით, როდესაც ფორმა თავდაპირველად არის წარმოდგენილი.

ნაბიჯი 4: ჩართეთ OnFormSubmit

ეს ორი ფუნქცია, changeValueOnSubmit (e) და setIDOnSubmit (e), უნდა იყოს დაკავშირებული მომხმარებლის გაგზავნის ფორმასთან. ამისათვის ჩვენ უნდა ჩართოთ Trigger.

ჩვენ ვააქტიურებთ ტრიგერს დაწკაპუნებით რედაქტირება> მიმდინარე პროექტის გამომწვევები. ეს ხსნის Google Developer Hub- ს.

ტრიგერის დაფის ქვედა მარჯვენა კუთხეში არის ღილაკი ტრიგერის დამატება. Დააკლიკე აქ.

ჩვენ ახლა შევქმნით ფუნქციას, რომ გაუშვას ფორმა წარდგენისას. ჩვენს შემთხვევაში მე მაქვს მრავალი ფუნქცია (changeValueOnSubmit (e) და setIDOnSubmit (e)), რომელიც მე ჩავსვი onSubmit () ფუნქციის შიგნით, ასე რომ მე მხოლოდ 1 გამომწვევი უნდა დავაყენო. ამიტომ ჩვენ შევარჩევთ onSubmit () - ს და დავაყენებთ ამ ტრიგერს, რომ გაუშვას On submit submit.

ჩვენ ახლა გვაქვს სამუშაო ფორმა, რომელიც შეავსებს Google Sheet- ს უნიკალური იდენტიფიკატორებით და დააყენებს ნაგულისხმევ მნიშვნელობებს.

ახლა თქვენ შეგიძლიათ ატვირთოთ თქვენი საკუთარი ნივთები Google ფორმის გამოყენებით. (ეს არ არის აუცილებელი გასაგრძელებლად, რადგან მასში უკვე არის დემო ღირებულებები). ჩვენ ახლა შევეხებით მომხმარებლის ინტერფეისს.

ნაბიჯი 5: მომხმარებლის ინტერფეისის დაყენება

კეთილი იყოს თქვენი მობრძანება! ჩვენ საბოლოოდ მივაღწიეთ იმ ნაწილს, რომლისთვისაც მოხვედით, მომხმარებლის ინტერფეისი !!!!

ერთი შეხედვით, აქ არაფერია. ჩვენ ჯერ არ განგვიცხადებია. გვერდის უფრო სწრაფად ჩატვირთვისას მე გადავწყვიტე, რომ არ დამეზიანებინა პირველი გვერდი თქვენი ყველა ელემენტით და მოგცეთ უფლება დააწკაპუნოთ იმაზე, რისი ნახვაც გსურთ უფრო სწრაფად. ვინაიდან ეს ასეა, არ არსებობს ელემენტები შინაარსის მთავარ ველში და არც ფილტრები გვერდითა ზოლში. მოდით დააწკაპუნეთ ყველა რომ ნახოთ რა არის ჩვენს მონაცემთა ბაზაში.

ჩვენ ახლა ჩავტვირთეთ ჩვენი მონაცემთა ბაზის ყველა ელემენტი მთავარ შინაარსის ველში. თქვენ ნახავთ სურათებს, პირადობის მოწმობის ნომრებს, ფერს, ზომებსა და ადგილებს. მდებარეობის ველი შეიძლება განახლდეს აქ! თუ გადაწყვეტთ ნივთის სესხის აღებას, შეგიძლიათ აირჩიოთ ეს ვარიანტი, შეგიძლიათ განათავსოთ იგი თქვენს კარადაში, კარადაში ან სამრეცხაოში.

და ჩვენს გვერდით ზოლში ჩვენ გვაქვს ყველა შესაძლო ველი ტანსაცმლის ყველა ნივთისთვის ჩვენს ახალ შეკითხვაში. წარმოიდგინეთ, რომ ამ გვერდითა ზოლზე გვაქვს 20 განსხვავებული ზომის ვარიანტი, ეს არ იქნება ძალიან ეფექტური, ასე რომ შევიწოვოთ ჩვენი ძებნა აქსესუარების დაწკაპუნებით.

ახლა, როდესაც ჩვენ ჩავტვირთეთ აქსესუარები, გადახედეთ გვერდით ზოლს. ის მორგებულია მხოლოდ 3 ველზე, რადგან ეს არის პარამეტრები, რომლებიც ვრცელდება ამ შეკითხვის ყველა პუნქტზე. ვაპირებ გავაკეთო დალაგება ფერის მიხედვით. ფერის დაჭერით გამოჩნდება ჩამოსაშლელი ყუთი. აქ შემიძლია ან ჩავწერო სასურველი ფერი და შემდეგ შევარჩიო იგი, ან თუ ვხედავ ჩემს ვარიანტს მაშინვე უბრალოდ დავაწკაპუნებ. მე შევარჩიე წითელი ამ დემონსტრაციისთვის. დააწკაპუნეთ ფილტრის გამოყენება ამ გვერდითი ხაზის ბოლოში და ძირითადი შინაარსი განახლდება და გაჩვენებთ იმ ელემენტებს, რომლებსაც აქვთ წითელი პარამეტრი, როგორც მათი ფერის პარამეტრი.

მე ადრე აღვნიშნე, რომ ეს მონაცემთა ბაზა მეხმარება ჩემი ნივთების მართვაში სესხით და სამრეცხაოში. ცოტათი გასაადვილებლად, ამ მთავარ გვერდზე ყველა ჩამოსაშლელ ადგილას ხელით დაჭერის ნაცვლად, მე შევქმენი სამრეცხაო რეჟიმი. დაბრუნდით Google Sheet გვერდზე და App View– ში ნახავთ სამრეცხაო რეჟიმს. ეს ვარიანტი გამოაქვს პატარა მოდალს, რომელიც აჩვენებს მხოლოდ ნივთებს სამრეცხაოს მდებარეობით. ახლა შემიძლია აღვნიშნო ყველა ეს ელემენტი ნაგულისხმევად, რომელიც დააბრუნებს მათ იმ ადგილას, სადაც ისინი ჩვეულებრივ ინახება.

ნაბიჯი 7: პროექტი დასრულებულია

ᲒᲘᲚᲝᲪᲐᲕ

მათთვის, ვისაც უბრალოდ სურს სამუშაო მონაცემთა ბაზა თქვენი ნივთების სამართავად, კეთილი იყოს თქვენი მობრძანება ონლაინ ორგანიზატორი. მათთვის, ვინც დაინტერესებულია ამ პროგრამის მიღმა არსებული კოდით. გამყარებაში როგორც მე დაარღვიოს იგი.

*თქვენ თავისუფლად შეგიძლიათ წაშალოთ სატესტო ერთეულები მას შემდეგ, რაც შეიტანთ მონაცემთა ბაზაში მინიმუმ ერთ საკუთარ ნივთს. (მოგვიანებით აგიხსნით, თუკი შემოხვალთ).

ნაბიჯი 8: ნაბიჯი 1: Back-End Code (Server 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 Sheet– ის თვალიერების საფუძველი. მე ვუწოდებ ფურცელს სახელით და არა ნომრით, ასე რომ თუ ფურცლები წაიშლება ან გადააკეთებს ფუნქციებს, მაინც შეძლებს სწორად მუშაობას.
• ამ კოდში მე ვაგროვებ მხოლოდ დიაპაზონს ცხრილის ყველა მონაცემისთვის.

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 ()* (max - min) + min)); e.source.getActiveSheet ().getRange (range.getLastRow (), ColA).setValue (CellValue); changeValueOnSubmit (e);

• მე ადრე ვთხოვე, რომ დემო ღირებულებები დაეტოვებინა ცხრილში, სანამ მომხმარებელი არ შეიტანს მინიმუმ ერთ მნიშვნელობას საკუთარი თავისთვის. ეს იმიტომ ხდება, რომ Auto ID გენერატორი ეყრდნობა მონაცემთა ბაზის ბოლო მნიშვნელობას შესავსებად.
• მე ვიღებ ბოლო მე -2 ბოლო სტრიქონს, რადგან ბოლო სტრიქონი არის ჩვენი ახალი მნიშვნელობა და პირველი სვეტი ID ღირებულებისთვის.
• შემდეგ მე შემთხვევით ვქმნი რიცხვს 5 -დან 15 -მდე და ვამატებ ბოლო მნიშვნელობას. *
• საბოლოოდ ამ მნიშვნელობას ვათავსებ ბოლო სტრიქონის ID სვეტში.
• შემდეგი ჩვენ მოვუწოდებთ changeValueOnSubmit (e) ფუნქციას.

* მე ავირჩიე 5-15, რათა შემდგომში დავუშვათ მარკირება და Google Home ინტეგრაცია, რათა რიცხვები არ იყოს იმდენად ახლოს, რომ საკიდებზე ან ტანსაცმლის ტეგებზე ან შტრიხკოდებზე დაბნეულობა გამოიწვიოს.

3) იცვლება URL მნიშვნელობა:

var DataChange = e.namedValues ["ერთეულის სურათი"]; var DefaultLocation = e.namedValues ["სად ინახავთ ტანსაცმლის ამ სტატიას?"]; var ColD = ColumnID _ ("ერთეულის სურათი") +1; var ColLoc = ColumnID _ ("ნაგულისხმევი ადგილმდებარეობა")+1; DataChange = DataChange.toString (). ჩაანაცვლებს ("გახსნა?", "uc? ექსპორტი = ნახვა &"); e.source.getActiveSheet ().getRange (e.range.rowStart, ColD).setValue (DataChange); e.source.getActiveSheet ().getRange (e.range.rowStart, ColLoc).setValue (DefaultLocation);

• Google ფორმით ფოტოს გაგზავნისას Google Sheets- ში ჩასმული URL არის რეალური დოკუმენტის ბმული. ჩვენს შემთხვევაში, როდესაც ჩვენ ვქმნით HTML გვერდს, ჩვენ გვინდა, რომ ბმული იყოს მხოლოდ სურათი.
• შეცვლით "ღია?" URL- ის ნაწილი "uc? export = view &" ჩვენ ნაცვლად შევქმენით სურათის ბმული.
• ჩვენ კვლავ მოვათავსებთ ამ ახალ მნიშვნელობას ამჟამინდელი საქონლის სურათის ბმულის ადგილას.
• მე ასევე ვაყენებ ერთეულის "ნაგულისხმევ მდებარეობას" და "ამჟამინდელ მდებარეობას" მონაცემთა ბაზაში ერთსა და იმავეს. ეს დამხმარე იქნება ჩემი სამრეცხაო რეჟიმის გამოყენების მცდელობისას.

• ჩვენ ჩავუღრმავდებით მას შემდეგ გვერდზე, მაგრამ ეს არის ჩვენი პირველი შეხედულება ჩემს მიერ შექმნილ ColumnID_ () ფუნქციაზე.

  ეს ფუნქცია იყენებს სვეტის სახელებს, რომ გადათარგმნოს იგი სვეტის რიცხვში, რაც სასარგებლოა დიაპაზონის გამოძახებისთვის, რომელიც მოითხოვს სვეტის ნომერს და არა სახელს

4) SpreadsheetApp.getUI ()

• მეორე სურათზე თქვენ შეგიძლიათ ნახოთ SpreadsheetApp.getUI () გამოყენება, როგორც ეს გამოიყენებოდა Google Sheet– ის ინსტრუმენტთა პანელის მენიუს შესაქმნელად.
• . GetUI () ფუნქცია ასევე ეხმარება შექმნას მოდალური ფანჯარა, რომელიც გამოიყენება სამრეცხაო რეჟიმში და როგორც სწრაფი ბმული ვებსაიტის ინტერფეისთან.

5) HTMLService

• ამ კოდში გამოიყენება ორი სახის HTML სერვისი: შაბლონი და HTMLOutput
• შაბლონი იძლევა კოდის ჩასმას HTML კოდის შიგნით, ასე რომ სერვერისგან მიღებული ინფორმაცია შეიძლება შეივსოს გვერდის გამოძახებისას.
• HTML გამომავალი აჩვენებს მარტივ HTML გვერდებს.
• ჩვენ ასევე გვაქვს () მეთოდი, რომელიც საშუალებას გვაძლევს შევქმნათ მრავალი HTML ფაილი და გავაერთიანოთ ისინი ერთ შაბლონურ HTML ფაილში, ფაილის შინაარსის დაბრუნებით HTML ფორმატში და არა სტრიქონით.

მე დავურთე ისეთი დოკუმენტი, როგორიც არის Google App Scripts Documentation, რათა გავეცნოთ იმას, თუ როგორ არის განმარტებული წყაროს კოდი და ფუნქციონირება Google Apps– ში.

ნაბიჯი 9: ნაბიჯი 2: უკანა კოდი მეორე ნაწილი (სერვერი Calls.gs)

ახლა ჩვენ შევიყვანეთ სერვერის Calls.gs. ეს ფუნქციები გამოიყენება ძირითადად HTML JavaScript– ში, ამიტომ ისინი გამოყოფილია კოდისგან, რომელიც ძირითადად გამოიყენება უკანა ნაწილში, რომელიც მდებარეობს სერვერის Code.gs– ში.

სურათი 1) გლობალური ცვლადები:

სურათი 2) ნივთების მოტანა:

სურათი 3) fetchItemsQry

სურათი 4) filterItems

სურათი 5) fetchWithQry

სურათი 6) ColumnID და CacheCalls

თითოეულ მათგანთან იმდენი სალაპარაკოა. კოდის დაშლის მიზნით და იმის ახსნის რა ხდება, დამჭირდა ცოტა მეტი აკრეფის ადგილი. მიმაგრებულია სერვერი Calls.gs კოდის დაზიანების დოკუმენტი

ეს დოკუმენტი შექმნილია როგორც Google App Scripts Documentation და ბმულებს კიდეც მსგავს ობიექტებს.

ნაბიჯი 10: ნაბიჯი 3: HTML კოდი (Application.html)

HTML კოდი ძალიან უკმაყოფილოა Instructable– ის დიალოგურ ფანჯარაში. ამიტომ გთხოვთ მიჰყევით ზემოთ მოცემულ სურათებს.

1) Application.html გვერდის სათაურში ჩვენ ვადგენთ სათაურს და მოვუწოდებთ ჩვენს CSS.html გვერდს ჩატვირთვაზე.

*როგორც შაბლონური HTML გვერდი, ჩვენ შეგვიძლია დავამატოთ მეტი კოდი ამ დოკუმენტს მიმდინარე ეკრანის გადატვირთვის გარეშე, ადრე ნახსენები მოიცავს (pageName) მეთოდს, რომელიც გვხვდება სერვერის Code.gs

მთავარი სათაურის ყუთი ასევე ნაპოვნია ამ სურათზე. თქვენ შეგიძლიათ შეცვალოთ სათაური აქ და შეიყვანოთ "[შენი სახელის] გარდერობი" ან სხვა რამ, რისი აღიარებაც გსურთ ამ გვერდისთვის.

2) სათაურის ქვემოთ არის ჩვენი ზედა ნავიგაციის ზოლი.

ეს სანავიგაციო ზოლი შეიცავს სტატიების ყველა ტიპს, როგორც ჩამოთვლილია სტატიების ფურცელზე ჩვენი Google Sheets- ის შიგნით.

შემომავალი ფუნქცია ეწოდება ამ ერთეულების მასივის მოსაყვანად. შემდეგ ხდება მარყუჟის ჩართვა თითოეული ამ ვარიანტის სახით, როგორც მენიუს ღილაკი, მოქმედების კოდით, ასე რომ, როდესაც მომხმარებელი დააწკაპუნებს მენიუს ღილაკზე, შესაბამისი ელემენტები გამოჩნდება სხეულის ზონაში.

3) ძირითადი სხეული.

ამ ნაწილში არის 4 ნაწილი. ტექსტის გამომუშავება, გვერდითი ფილტრი, ძირითადი ნაწილის სურათები და JS მოიცავს.

ტექსტის გამომავალი საშუალებას აძლევს მომხმარებელს დაინახოს ტექსტის სწრაფი ხედი, თუ რა ტიპის ერთეულებს უყურებს ისინი ნაცვლად მათ მიერ არჩეული მენიუს ვარიანტის მითითებისა.

გვერდითი ფილტრი შეიცავს მრავალ ფილტრს, რომელიც ხელმისაწვდომია მომხმარებლის მიერ შერჩეული ერთეულის ტიპისათვის. ეს ფილტრები ასახავს ამ კატეგორიის ყველა ვარიანტს, ასევე რამდენ ერთეულს მიეკუთვნება ამ კატეგორიის ღირებულება. ეს გვერდითი ზოლი სავსეა JavaScript კოდით (რომელიც შემდგომ იქნება განხილული).

მთავარი სხეული ამჟამად ცარიელია, მაგრამ ფილტრების მსგავსად იგი ივსება ერთეულის ყუთებით, სადაც აღწერილია საქონლის ID, ფერი, ზომა და მდებარეობა გამოსახულებით, მას შემდეგ რაც მომხმარებელი აირჩევს კატეგორიას და JavaScript კოდი შეავსებს ამ არეს.

საბოლოოდ მოიცავს (JS), მოდით შევხედოთ ამას შემდეგ საფეხურზე.

ნაბიჯი 11: ნაბიჯი 4: JavaScript კოდი (JS.html)

თუ ფიქრობდით, რომ სერვერის კოდი მძიმე განყოფილება იყო, მიიღეთ ეს.

აქ ჩვენ ვაერთიანებთ ჩვენს HTML და SeverCode მომხმარებლის ურთიერთქმედებას. ნებისმიერი ელემენტი, რომელზეც დააწკაპუნებთ, აქ უნდა დამუშავდეს, რომ მიიღოთ შესაბამისი მონაცემები და დააბრუნოთ იგი წაკითხული ფორმატით. მოდით შევხედოთ ჩვენს პირველ ზარებს:

სკრიპტი მოუწოდებს: მე ვიყენებ 3 სხვადასხვა ბიბლიოთეკას ამ პროექტისათვის; jquery, bootstrap და სპეციალური bootstrap- შერჩევის დანამატი. ეს ბიბლიოთეკები შესაძლებელს ხდის ობიექტების ფორმატირებას და HTML კოდში შემავალ ელემენტებზე უფრო მარტივ ზარებს.

ჩემი შემდეგი მნიშვნელოვანი ხაზი JavaScript არის ქვემოთ:

$ (დოკუმენტი).keypress (ფუნქცია (მოვლენა) {if (event.which == '13') {event.preventDefault (); }});

აქ მე გამორთავს შესვლის ღილაკს ნებისმიერი ფორმის გააქტიურებისგან. როგორც ამ შემთხვევაში, Google ვებ აპებს ენიჭებათ მხოლოდ ერთი გვერდის მისამართი. შესვლის პრესა დაამატებს მონაცემებს HTML მისამართს და შეეცდება მომხმარებლის გადამისამართება. ამის გამორთვით თქვენ აძლევთ უფლებას თქვენს JavaScript კოდს შეასრულოს ყველა სამუშაო.

ფუნქცია removeFilters () {google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure). ServerRemoveFilters (); }

ფუნქცია updateDBlocation (id, მნიშვნელობა) {google.script.run.withSuccessHandler (allGood).wightFailureHandler (FailDBUpdate).updateLocation (id, მნიშვნელობა); }

აქ არის ორი ფუნქცია, რომლებიც ზარებს სერვერის Code.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.message +"

");} ფუნქცია FailDBU განახლება (შეცდომა) {$ ("#message-box "). html ("

თქვენ არ გაქვთ წვდომა მდებარეობის შეცვლაზე. შეცდომა: " + error.message +"

"); $ (". ადგილმდებარეობა ირჩევს "). prop (" გამორთული "," გამორთული ");}

მე შევქმენი ძალიან მარტივი კონსოლის ჟურნალი, რათა აღვნიშნო წარმატება, როდესაც მდებარეობის ფუნქცია გაშვებულია, რომელსაც ხედავთ როგორც allGood ().

შეცდომების დამუშავებისას ეს ორი ფუნქცია გამოუშვებს შეცდომის შეტყობინებას, სადაც მომხმარებელს შეუძლია დაინახოს jQuery ზარის გამოყენებით HTML ობიექტზე "შეტყობინების ყუთის" ID- ით.

ახლა მოდით გადავიდეთ რთულ სამუშაოზე

ნაბიჯი 12: ნაბიჯი 5: JavaScript Code-Click Actions (JS.html)

ზედა მენიუს ზოლს აქვს თითოეული სტატიის ტიპის პარამეტრები. ფუნქცია, რომელსაც ისინი აწარმოებენ დაჭერით არის:

ფუნქცია filterType (სტატია, id) {$ ("ul.navbar-nav li.active"). removeClass ("აქტიური"); $ ("#currentArticle"). html ("// HTML კოდი აქ");

updateSideBar = ჭეშმარიტი;

google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure).fetchItems ("სტატიები", სტატია); var newSelect = "#ტიპი-"+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 სკრიპტებში შექმნილი ფუნქციონირება თქვენი საკუთარი პროექტის გასაფართოებლად.

ეს იყო მოგზაურობა ამ პროექტის კოდირებით (და დოკუმენტირება ამ ინსტრუქციის საშუალებით), მაგრამ მე მომეწონა ეს პროცესი და ვიმედოვნებ, რომ თქვენ ისიამოვნებთ პროდუქტით. სიამოვნებით მოვისმენ ვინმეს, ვინც შეასწორებს, როგორც მაიკლ ჯორდანი ამბობს "ჭერი არის სახურავი" და ვეთანხმები, რომ ამ პროგრამას არ აქვს შეზღუდვები.