የልብስ ማጠቢያ አደራጅ: 13 ደረጃዎች

2024 ደራሲ ደራሲ: John Day | [email protected]. ለመጨረሻ ጊዜ የተሻሻለው: 2024-01-30 07:31

ለልብስ መግዛትን ወይም ማንኛውንም ንጥል ለመበደር ሁል ጊዜም ተመሳሳይ ነገር እንዳለዎት ለማየት ከማንኛውም ቦታ ወደ ቁም ሣጥንዎ እንዲገቡ የሚፈልጓቸው ጊዜያት አሉ።

ይህ የአንድ ማቆሚያ ሱቅ ነው እና ለሌሎች ብዙ ዓላማዎች ሰፊ ነው። የእኔ የ wardrobe አደራጅ የ Google ሉሆች እንደ የ SQL ዳታቤዝ ፣ ውሂቡን ለማስተናገድ የ Google ስክሪፕቶች እና ለዚህ ውሂብ የመስመር ላይ መግቢያ ጉግል ዌብአፕ ጥምረት ነው። የመጨረሻው ተጠቃሚ ሁሉንም ዕቃዎች ማየት ፣ ለተለየ ነገር ማጣራት ፣ ዕቃዎችን በብድር ላይ ምልክት ማድረግ ፣ የልብስ ማጠቢያ ማደራጀት እና እማዬ በየዓመቱ ለገና ተመሳሳይ ሸሚዝ እንዳይገዛልዎት ማቆም ይችላል*።

(*ምንም ዋስትና የለም። እናቶች ቢፈልጉትም ባይፈልጉም የፈለጉትን ይገዛሉ)

ከላይ በምስሉ ላይ ባለው የድርጣቢያ ንድፍ ላይ ፈጣን እይታ በመመልከት አንድ ሰው የታወቀውን አቀማመጥ ሊያውቅ ይችላል። የ wardrobe አደራጅ እንደ ማንኛውም ተራ የልብስ ድርጣቢያ ተዘጋጅቷል። በዲፓርትመንቶች ወደላይ እና በጎን በኩል በሚሰጡ ማጣሪያዎች ተሰብሯል ፣ ይህ በይነገጽ ለተለመዱት ተጠቃሚ ተግባራዊነትን መተዋወቅን ያመጣል። እና ለመጠቀም ቀላል ነው።

ደረጃ 1 የራስዎን ቅጂ ማዘጋጀት

የዚህን ፕሮጀክት የራስዎን ቅጂ በመፍጠር እንጀምር።

ጉግል Drive

ወደዚህ የአሁኑ ትግበራ ስሪት ለመውሰድ ከላይ ባለው አገናኝ ላይ ጠቅ ያድርጉ።

በዚህ አቃፊ ውስጥ 3 ንጥሎችን ያያሉ -የጉግል ቅጽ ፣ የጉግል ሉህ እና አቃፊ።

በ Google ሉህ ላይ በቀኝ ጠቅ ያድርጉ እና ጠቅ ያድርጉ ቅጂ ያድርጉ።

የዚህን ቅጂ ሥፍራ በራስዎ Drive ላይ ያቀናብሩ።

ይህን ሰነድ ከገለበጡ በኋላ የጉግል ቅጹ የጉግል ሉህን በወሰዱበት ተመሳሳይ አቃፊ ውስጥ በራስ -ሰር ይፈጠራል።

አቃፊውን ለመፍጠር (ይህ የእቃዎቹ ስዕሎች ሰቀላዎችን ለመሰብሰብ አስፈላጊ ነው) ፣ የተቀዳውን የ Google ቅጽ ጠቅ ያድርጉ እና ለሰቀላዎች የአቃፊ ቦታን ወደነበረበት እንዲመልሱ የሚጠይቅ ጥያቄ ይመጣል።

አሁን ለራስዎ ለመስራት የዚህ ሰነድ ቅጂ አለዎት!

ደረጃ 2 የጉግል ቅጽ አጠቃላይ እይታ

አሁን የዚህ መተግበሪያ የራስዎ ስሪት ስላሎት ፣ ዙሪያውን እንመልከታቸው።

የእርስዎ የ Google ቅጽ ብዙ የተለያዩ ዓይነቶችን ለመቀበል የተቀናበረ ነው። ሆኖም ሸሚዞች ፣ ሱሪዎች ፣ አለባበሶች እና ጫማዎች ሁሉም የተለያዩ የመጠን ገደቦች አሏቸው። ስለዚህ ንጥልዎን በሚያስገቡበት ክፍል ላይ በመመስረት የዚህ ቅጽ የተለየ ክፍል ይሞላል። በእኔ (የወንድ ጽሑፍ) አብነት ውስጥ 5 የተለያዩ የመጠን ምድቦችን ፈጥረዋል። (ለሴቶች መጣጥፎች ፣ እዚህ ጠቅ ያድርጉ ፣ ብዙ አሉ)።

በእያንዳንዱ የመጠን ክፍል ስር ፣ እኔ የምሰበስበውን ለእያንዳንዱ ግቤት ልዩ ርዕስ አቋቋምኩ። እኛ “መጠን” በሚለው የውሂብ ጎታችን ውስጥ ብዙ ዓምዶች እንዲኖሩን አንፈልግም ወይም መጠኑ ምን ዓይነት ልብስ እንደሚመለከት መወሰን አንችልም።

በእያንዳንዱ ክፍል መጨረሻ ላይ ተጠቃሚው ወደዚህ ቅጽ የመጨረሻ ክፍል ይመራል - ቦታ። እኔ በደረቅ ማጽጃዎች ፣ በልብስ ማጠቢያ ፣ በቦታቸው ወይም ጓደኛዬ እንዲበደር ባደረግኳቸው ዕቃዎች ላይ እቃዎችን ለመወሰን እኔ በግሌ አካባቢን መረጥኩ። ይህ የተደራጀ እንድሆን እና አንድም ቦታ አንድ ልብስ እንደጎደለኝ ሆኖ እንዳይሰማኝ ይፈቅድልኛል።

ከመጀመሪያው እንደጠቀስኩት ይህ ፕሮጀክት በሚሊዮኖች በተለያየ መንገድ ሊስፋፋ ይችላል። ለዕቃ ቆጠራ ፣ ይበልጥ ትክክለኛ ለሆነ የድርጅት መሣሪያ ወይም ለልብስ በጥብቅ ለመበደር ሊጠቀሙበት ይችላሉ። ሊያክሏቸው የሚችሏቸው መስኮች እና ክፍሎች ማለቂያ የሌላቸው ናቸው ፣ ስለዚህ በእኔ ቅጽ ውስጥ ውስን እንዳይመስሉ። (ለሴቶች መጣጥፎች እዚህ ጠቅ ያድርጉ)

ጥቂት የእራስዎን ዕቃዎች ለመስቀል ከመሄድዎ በፊት ተገቢውን ተገዢነት ለማረጋገጥ ወደ ቀጣዩ ደረጃ እንሂድ።

ደረጃ 3 - የጉግል ስክሪፕቶች ((የአገልጋይ ኮድ.gs)) በመጀመሪያ ውሂቡን እና ኮዱን ይመልከቱ

ወደ ጉግል ሉሆች ሰነድ ጠቅ በማድረግ ብዙ የውሂብ ዓምዶችን (እና አንዳንድ ረድፎች ፣ ለማሳየት ቀርተዋል) ያያሉ። በቅጽ ማስረከብ ወቅት አንዳንድ ክፍሎች ተዘልለዋል ፣ ይህ በአንዳንድ ዓምዶች ውስጥ ከጎደለው ውሂብ በግልጽ ይታያል። ነገር ግን የእነዚህ ንጥሎች አርትዖቶችን በተሻለ ሁኔታ ለመከታተል እንደ መታወቂያ ፣ ነባሪ ሥፍራ ፣ ማን እና የተዘመኑ ያሉ ተጨማሪ አምዶች ታክለዋል።

ይህንን የውሂብ ጎታ በሚዘዋወሩበት ጊዜ ልዩ መለያ እንዲኖርዎት ቅጹን በሚያስገቡበት ጊዜ የመታወቂያ መስክ ተፈጥሯል። ይህንን መስክ ለመፍጠር በመሣሪያዎች> ስክሪፕት አርታኢ ላይ ጠቅ በማድረግ የስክሪፕት አርታኢውን እንመለከታለን።

የስክሪፕት አርታኢ ክፍት ሆኖ በዚህ አዲስ መስኮት የጎን አሞሌ ውስጥ 8 ሰነዶችን ያስተውላሉ። እነዚህ ሰነዶች የኋላ-መጨረሻ ሂደትን ፣ የፊት-መጨረሻ ማሳያዎችን እና የፊት-መጨረሻ ተግባርን ለመቆጣጠር ይረዳሉ። ወደ እያንዳንዳችን ዘልለን እንገባለን (ዙሪያውን ከጣበቁ) ግን አሁን በአገልጋይ ኮድ ላይ ጠቅ ያድርጉ።

በአገልጋይ Code.gs ፋይል ውስጥ ብዙ ተግባራት አሉ-

onSubmit (e) ፣ onOpen () ፣ doGet () ፣ (የፋይል ስም) ፣ ክፍት ትግበራ () ፣ openLaundryApp () ፣ ለውጥValueOnSubmit (ሠ) ፣ setIDOnSubmit (ሠ)

onSubmit (ሠ) - ይህ ተግባር የጉግል ቅጽ ሲያስገባ እንዲሠራ የመጀመሪያው ተግባር ሆኖ ይዋቀራል። ብዙ የተለያዩ ሂደቶች እንዲከሰቱ በዚህ ተግባር ውስጥ ሌሎች ተግባሮችን ማስቀመጥ ይችላሉ።

onOpen (ሠ) - ይህ ተግባር Google ሉሆች ሲከፈት ይባላል። ወደ የመተግበሪያ አገናኞች እና እይታዎች በፍጥነት መድረስን ለመፍቀድ አዲስ የምናሌ አማራጭን ያበዛል።

doGet ()- ይህ ተግባር በድር መተግበሪያ አድራሻ ጥሪ ላይ ተጠርቷል። አንድ ተጠቃሚ ወደታተመው የድር መተግበሪያ ሲቃኝ ይህ ኮድ ለዚያ ገጽ ምን እንደሚታይ ይነግረዋል። በዚህ ሁኔታ ፣ እሱ የሰነድ ትግበራ ነው። html።

ያካትታሉ (ፋይል ስም) - ይህ ተግባር በሌላ ሰነድ ውስጥ ለማንበብ እና ይዘቶቻቸውን በሌላ ኤችቲኤምኤል ቅርጸት ውስጥ ለማስገባት በኤችቲኤምኤል ገጾች ውስጥ ጥቅም ላይ ይውላል። እኛ ለ CSS.html እና ለ JS.html ፋይሎቻችን እንጠቀምበታለን።

openApplication () እና openLaundryApp () - እነዚህ ተግባራት አንድ ተጠቃሚ በ Google ሉህ መሣሪያ አሞሌ ላይ በተጨመረው የማውጫ አዝራሮች ላይ ጠቅ ሲያደርግ የሚሄድበትን ኮድ ይይዛሉ።

ለውጥValueOnSubmit (ሠ) እና setIDOnSubmit (ሠ)- እነዚህ አሁን የምንመለከታቸው ተግባራት ናቸው። ቅጹ መጀመሪያ ሲቀርብ የተወሰኑ መስኮች በነባሪ እሴቶች የማዘመን ኃላፊነት አለባቸው።

ደረጃ 4 OnFormSubmit ን ማንቃት

እነዚህ ሁለት ተግባራት ፣ ለውጥValueOnSubmit (ሠ) እና setIDOnSubmit (ሠ) ፣ ቅጽ ከማስገባት የተጠቃሚ እርምጃ ጋር መገናኘት አለባቸው። ይህንን ለማድረግ ቀስቅሴ ማንቃት አለብን።

አርትዕ> የአሁኑ ፕሮጀክት ቀስቅሴዎችን ጠቅ በማድረግ ቀስቅሴውን እናነቃለን። ይህ የ Google ገንቢ ማዕከልን ይከፍታል።

በመቀስቀሻ ዳሽቦርዱ ታችኛው ቀኝ ጥግ ላይ አንድ አዝራር አለ ቀስቅሴ ያክሉ። እዚህ ጠቅ ያድርጉ.

አንድ ቅጽ ሲቀርብ እንዲሠራ አሁን ተግባሩን እናዘጋጃለን። በእኛ ሁኔታ እኔ በ onSubmit () ተግባር ውስጥ ያስቀመጥኳቸው በርካታ ተግባራት (changeValueOnSubmit (ሠ) እና setIDOnSubmit (ሠ) አሉኝ ስለዚህ እኔ 1 ቀስቃሽ ማቀናበር አለብኝ። ስለዚህ እኛ አስገባ () ን እንመርጣለን እና ይህንን ማስነሻ በቅጹ ላይ ለማስረከብ እናስቀምጠዋለን።

አሁን የጉግል ሉህን በልዩ ለifዎች የሚሞላ እና ነባሪ እሴቶችን የሚያስቀምጥ የሥራ ቅጽ አለን።

የ Google ቅጹን በመጠቀም አሁን የእራስዎን እቃዎች መስቀል ይችላሉ። (ቀድሞውኑ የማሳያ እሴቶች በ ውስጥ ስለሆኑ ለመቀጠል ይህ አስፈላጊ አይደለም)። አሁን ወደ የተጠቃሚ በይነገጽ እንገባለን።

ደረጃ 5 - የተጠቃሚ በይነገጽን ማቀናበር

እንኳን ደህና መጣህ! በመጨረሻ የመጣበትን ክፍል ፣ የተጠቃሚ በይነገጽ ላይ ደርሰናል !!!!

በመጀመሪያ እይታ ፣ እዚህ ምንም የለም። እስካሁን ምንም ጥሪ አላደረግንም። ገጹን በበለጠ ፍጥነት ለመጫን የመጀመሪያውን ገጽ በሁሉም ዕቃዎችዎ ላለመጉዳት እና በፍጥነት ለማየት የሚፈልጉትን ጠቅ እንዲያደርጉ ለማድረግ ወሰንኩ። ይህ ስለሆነ በዋናው የይዘት መስክ ውስጥ ምንም ንጥሎች የሉም እና በጎን አሞሌው ውስጥ ማጣሪያዎች የሉም። በእኛ የውሂብ ጎታ ውስጥ ያለውን ለማየት ሁሉንም ጠቅ እናድርግ።

አሁን በእኛ የውሂብ ጎታ ውስጥ እያንዳንዱን ንጥል ወደ ዋናው የይዘት መስክ ጭነናል። ስዕሎችን ፣ የመታወቂያ ቁጥሮችን ፣ ቀለምን ፣ መጠኖችን እና ቦታዎችን ያያሉ። የአከባቢው መስክ እዚህ ሊዘመን ይችላል! ያንን አማራጭ መምረጥ የሚችለውን እቃ ለማበደር ከወሰኑ ፣ በመደርደሪያዎ ፣ በአለባበስዎ ወይም በልብስ ማጠቢያዎ ውስጥ ማስቀመጥ ይችላሉ።

እና በእኛ የጎን አሞሌ ውስጥ በአዲሱ መጠይቃችን ውስጥ ለእያንዳንዱ የልብስ ዕቃዎች እያንዳንዱ የሚቻል መስክ አለን። በዚህ የጎን አሞሌ ላይ 20 የተለያዩ የመጠን አማራጮችን ይኑርዎት ፣ በጣም ውጤታማ አይሆንም ፣ ስለዚህ መለዋወጫዎችን ጠቅ በማድረግ ፍለጋችንን እናጥብ።

አሁን መለዋወጫዎችን ከጫንን ፣ የጎን አሞሌውን ይመልከቱ። በዚህ መጠይቅ ውስጥ ለእያንዳንዱ ንጥል የሚተገበሩ መለኪያዎች በመሆናቸው በ 3 መስኮች ብቻ ተስተካክሏል። እኔ በቀለም አንድ ዓይነት አደርጋለሁ። ቀለምን ጠቅ በማድረግ የተቆልቋይ ሳጥን ይታያል። እዚህ እኔ የፈለኩትን ቀለም መተየብ እና ከዚያ መምረጥ እችላለሁ ፣ ወይም የእኔን አማራጭ ወዲያውኑ ካየሁ ጠቅ አደርጋለሁ። ለዚህ ማሳያ ቀይ ቀለምን መርጫለሁ። በዚህ የጎን አሞሌ ታችኛው ክፍል ላይ ማጣሪያ ተግብርን ጠቅ ያድርጉ እና ዋናው ይዘት ቀይ ቀለም ያላቸውን እንደ ቀለም ግቤታቸው ያሉትን ንጥሎች በማሳየት ያድሳል።

ቀደም ሲል ይህንን የውሂብ ጎታ እቃዎቼን በብድር እና በልብስ ማጠቢያዬ ውስጥ እንዳስተዳድር ይረዳኛል። ትንሽ ቀለል ለማድረግ ፣ በዚህ ዋና ገጽ ውስጥ እያንዳንዱን ተቆልቋይ ቦታ በእጅ ከመጫን ይልቅ የልብስ ማጠቢያ ሁነታን ፈጠርኩ። ወደ ጉግል ሉህ ገጽ ይመለሱ እና በመተግበሪያ እይታ ስር የልብስ ማጠቢያ ሁነታን ያያሉ። ይህ አማራጭ የልብስ ማጠቢያ ቦታ ያላቸውን ዕቃዎች ብቻ የሚያሳይ አነስተኛ ሞዳልን ያወጣል። እኔ አሁን እነዚህን ሁሉ ዕቃዎች እንደ ነባሪ ምልክት ማድረግ እችላለሁ ፣ ይህም በመደበኛነት በተከማቹበት ቦታቸው ውስጥ ያስቀምጣቸዋል።

ደረጃ 7: ፕሮጀክቱ ተጠናቀቀ

እንኳን ደስ አለዎት

ዕቃዎችዎን ለማስተዳደር የሚሰራ የውሂብ ጎታ ለሚፈልጉ ፣ ወደ የመስመር ላይ አደራጅዎ እንኳን በደህና መጡ። ከዚህ መተግበሪያ በስተጀርባ ያለውን ኮድ ለሚፈልጉት የማወቅ ጉጉት ያላቸው አእምሮዎች። ስፈርሰው ዙሪያውን አጥብቀው ይያዙ።

*ቢያንስ አንድ የእራስዎ ንጥሎች ወደ የመረጃ ቋቱ ውስጥ ከገቡ በኋላ የሙከራ እቃዎችን ለመሰረዝ ነፃ ነዎት። (ቆይተው ከቆዩ በኋላ አብራራለሁ)።

ደረጃ 8: ደረጃ 1-የኋላ-መጨረሻ ኮድ (የአገልጋይ ኮድ.gs)

ቀደም ሲል እኛ የአገልጋይ Code.gs ፋይልን ከፍተናል እና ዓላማቸው እርስዎ ያዋቀሯቸውን እያንዳንዱን ዕቃዎች ለማገልገል ስለሆነ እያንዳንዱን ተግባራት በፍጥነት ወደ ታች ሰጠሁ ግን አሁን እኛ የተጠሩትን አንዳንድ ተግባራት እና መገልገያዎች እናፈርሳቸዋለን። ይህንን ኮድ ስኬታማ ለማድረግ።

1) ጠረጴዛን ማቋረጥ;

var ss = SpreadsheetApp.getActiveS spreadsheet () ፤ var sheet = ss.getSheetByName ("ቅጽ ምላሾች 1"); var ክልል = sheet.getRange (1, 1, sheet.getMaxRows ()); var rowNum = range.getLastRow ();

• ይህ ኮድ የጉግል ሉህ ለማለፍ መሠረት ነው። ሉሆች ከተሰረዙ ወይም በስራ እንደገና ከተስተካከሉ አሁንም በትክክል እንዲሠሩ ለማድረግ ከቁጥር ይልቅ ወረቀቱን በስም እጠራለሁ።
• በዚህ ኮድ ውስጥ በሰንጠረ in ውስጥ ላሉት መረጃዎች ሁሉ ወሰን ብቻ እሰበስባለሁ።

2) መታወቂያ መመደብ;

var LastID = range.getCell (rowNum-1, 1); var CellValue = ቁጥር (LastID.getValue ()); var ColA = 1; var max = 15; var ደቂቃ = 5; CellValue = CellValue + Math.round ((Math.random ()* (ከፍተኛ - ደቂቃ) + ደቂቃ)); e.source.getActiveSheet ().getRange (range.getLastRow (), ColA).setValue (CellValue); ለውጥValueOnSubmit (ሠ);

• ተጠቃሚው ቢያንስ አንድ እሴት ለራሱ እስኪያቀርብ ድረስ የማሳያ እሴቶቹ በሰንጠረ in ውስጥ እንዲቀመጡ ከዚህ በፊት ጠይቄ ነበር። ይህ የሆነበት ምክንያት የራስ መታወቂያ ጀነሬተር ለመሙላት በውሂብ ጎታ ውስጥ ባለው የመጨረሻ እሴት ላይ ስለሚመረኮዝ ነው።
• የመጨረሻውን 2 ኛ እስከ መጨረሻው ረድፍ አመጣለሁ ምክንያቱም የመጨረሻው ረድፍ አዲሱ ዋጋችን እና ለመታወቂያ እሴት 1 ኛ አምድ ነው።
• ከዚያ በ 5 እና በ 15 መካከል ቁጥርን በዘፈቀደ አመንጭቼ ወደ መጨረሻው እሴት እጨምራለሁ። *
• በመጨረሻ ይህንን ረድፍ በመጨረሻው ረድፍ የመታወቂያ አምድ ውስጥ አስቀምጣለሁ።
• በመቀጠል የለውጥ ቫልዩኦን አስገባ (ሠ) ተግባር ብለን እንጠራዋለን።

* ቁጥሮቹ በተንጠለጠሉበት ወይም በአለባበስ መለያዎች ወይም ባርኮድ ላይ ግራ መጋባት እንዳይፈጥሩ የወደፊቱን መሰየሚያ እና የ Google መነሻ ውህደትን ለመፍቀድ 5-15 መርጫለሁ።

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 ሉሆች የገባው ዩአርኤል ወደ ትክክለኛው ሰነድ አገናኝ ነው። በእኛ ሁኔታ ፣ የኤችቲኤምኤል ገጽን እየፈጠርን አገናኙ ምስሉ ብቻ እንዲሆን እንፈልጋለን።
• "ክፍት?" የዩአርኤሉ ክፍል ወደ «uc? export = view &» በምትኩ ወደ ምስሉ አገናኝ ፈጥረናል።
• ይህንን አዲስ እሴት አሁን ባለው የንጥል ስዕል አገናኝ ቦታ ላይ እናስቀምጠዋለን።
• እኔ ደግሞ የእቃውን “ነባሪ ሥፍራ” እና “የአሁኑ ሥፍራ” በመረጃ ቋቱ ውስጥ ወደ ተመሳሳይ ነገር እያቀናበርኩ ነው። የእኔ የልብስ ማጠቢያ ሁነታን ለመጠቀም ሲሞክር ይህ ይረዳል።

• በሚቀጥለው ገጽ ውስጥ እንገባለን ነገር ግን ይህ እኔ በፈጠርኩት የ ColumnID_ () ተግባር ላይ የመጀመሪያ እይታችን ነው።

  ይህ ተግባር ከስም ይልቅ የአምድ ቁጥርን ለሚፈልግ የ Range ጥሪ የሚረዳውን ወደ ዓምድ ኢንቲጀር ለመተርጎም የአምድ ስሞችን ይጠቀማል።

4) የተመን ሉህ App.getUI ()

• በሁለተኛው ምስል ውስጥ የጉግል ሉህ የመሣሪያ አሞሌ ምናሌን ለመጨመር እንደነበረው የተመን ሉህApp.getUI () ን መጠቀም ይችላሉ።
• የ.getUI () ተግባር እንዲሁ ለልብስ ማጠቢያ ሞድ እና ለድር ጣቢያ በይነገጽ እንደ ፈጣን አገናኝ የሚያገለግል ሞዳል ብቅ -ባይ ለመፍጠር ይረዳል።

5) ኤችቲኤምኤል አገልግሎት

• በዚህ ኮድ ውስጥ ሁለት ዓይነት የኤችቲኤምኤል አገልግሎቶች አሉ - አብነት እና ኤችቲኤምኤል ውፅዓት
• ገጹ በሚጠራበት ጊዜ ከአገልጋይ የሚመጣ መረጃ እንዲሞላ አብነት በኤችቲኤምኤል ኮድ ውስጥ ኮድ እንዲገባ ይፈቅዳል።
• የኤችቲኤምኤል ውፅዓት ቀላል የኤችቲኤምኤል ገጾችን ያሳያል።
• እኛ ደግሞ ብዙ (ኤችቲኤምኤል) ፋይሎችን ለመፍጠር እና በአንድ ሕብረቁምፊ የኤችቲኤምኤል ፋይል ውስጥ ከአንድ ሕብረቁምፊ ይልቅ የፋይሉን ይዘቶች ወደ ኤችቲኤምኤል ቅርጸት በመመለስ እንድናዋህድ የሚፈቅድልን () ዘዴ አለን።

በ Google መተግበሪያዎች ውስጥ የምንጭ ኮድ እና ተግባር እንዴት እንደሚብራራ ለመተዋወቅ እንደ Google መተግበሪያ እስክሪፕቶች ሰነድ የተዋቀረ ሰነድ አያይዣለሁ።

ደረጃ 9: ደረጃ 2-የኋላ-መጨረሻ ኮድ ክፍል 2 (የአገልጋይ Calls.gs)

አሁን ወደ የአገልጋይ ጥሪዎች.gs ገብተናል። እነዚህ ተግባራት በዋነኝነት በኤችቲኤምኤል ጃቫስክሪፕት ውስጥ ያገለግላሉ ስለሆነም በዋነኝነት በአገልጋይ Code.gs ውስጥ ከሚገኙት በስተጀርባ ጥቅም ላይ ከዋለው ኮድ ተለይተዋል።

ምስል 1) ዓለም አቀፍ ተለዋዋጮች

ምስል 2) እቃዎችን ማምጣት

ምስል 3) ዕቃዎችን ይቅረቡ

ስዕል 4) የማጣሪያ ዕቃዎች

ስዕል 5) ማጣሪያዎችን በዊችክሪች

ምስል 6) ColumnID ፣ እና መሸጎጫ ጥሪዎች

ከእያንዳንዳቸው ጋር ብዙ ማውራት አለ። እና ኮዱን ለማፍረስ እና ምን እየሆነ እንዳለ ለማብራራት ትንሽ ተጨማሪ የትየባ ቦታ ያስፈልገኝ ነበር። ለ ServerCalls.gs ኮድ መበላሸት ሰነድ ተያይachedል

ይህ ሰነድ እንደ Google የመተግበሪያ እስክሪፕቶች ሰነድ ተዘጋጅቷል እና እንዲያውም ወደ ተመሳሳይ ነገሮች አገናኞችን ያደርጋል።

ደረጃ 10: ደረጃ 3 የኤችቲኤምኤል ኮድ (Application.html)

የኤችቲኤምኤል ኮድ በአንድ አስተማሪ የመገናኛ ሳጥን ውስጥ በጣም ደስተኛ አይደለም። ስለዚህ እባክዎን ከላይ ያሉትን ስዕሎች ይከተሉ።

1) በመተግበሪያ.html ገጽ ራስጌ ውስጥ አንድ ርዕስ እንመሰርታለን እና የእኛን የ CSS.html ገጽ ለመጫን እንጠራዋለን።

*የተፈተነ የኤችቲኤምኤል ገጽ በመሆን ፣ በአገልጋይ ኮድ.gs ውስጥ የተካተተውን (የገጽ ስም) ዘዴን በመጠቀም የአሁኑን ማያ ገጽ ሳንጨናነቅ በዚህ ሰነድ ላይ ተጨማሪ ኮድ ማከል እንችላለን።

ዋናው የራስጌ ሳጥን እንዲሁ በዚህ ሥዕል ውስጥ ይገኛል። ራስጌውን እዚህ መለወጥ እና የ

2) ከርዕሱ በታች የእኛ የላይኛው የአሰሳ አሞሌ ነው።

ይህ የአሰሳ አሞሌ በእኛ የ Google ሉሆች ውስጥ ባለው የአንቀጽ ሉህ ላይ እንደተዘረዘሩት ሁሉንም የጽሑፎች ዓይነቶች ያካትታል።

የእነዚህ ንጥሎች ድርድር ለማምጣት የመስመር ውስጥ ተግባር ተጠርቷል። ከዚያ እያንዳንዱን አማራጮች እንደ ምናሌ ቁልፍ ለማካተት አንድ ሉፕ ይካሄዳል ፣ በድርጊት ኮድ ይሙሉ ፣ ስለዚህ አንድ ተጠቃሚ በማውጫ አዝራሩ ላይ ጠቅ ሲያደርግ ፣ የሚመለከታቸው ንጥሎች በአካል አካባቢ ውስጥ ይታያሉ።

3) ዋናው አካል።

ለዚህ ክፍል 4 ክፍሎች አሉ። የጽሑፍ ውፅዓት ፣ የጎን አሞሌ ማጣሪያ ፣ ዋና የሰውነት ምስሎች እና JS ን ያጠቃልላል።

የጽሑፍ ውፅዓት ተጠቃሚው የመረጣቸውን የማውጫ አማራጭ ከመጥቀስ ይልቅ በአሁኑ ጊዜ ምን ዓይነት ንጥሎችን እንደሚመለከቱ ፈጣን የጽሑፍ እይታ እንዲመለከት ያስችለዋል።

የጎን አሞሌ ማጣሪያ አንድ ተጠቃሚ ለመረጠው ንጥል ዓይነት ብዙ ማጣሪያን ይ containsል። እነዚህ ማጣሪያዎች ለዚህ ምድብ ያሉትን ሁሉንም አማራጮች እንዲሁም ምን ያህል ዕቃዎች በዚያ ምድብ እሴት ስር እንደሚወድቁ ያንፀባርቃሉ። ይህ የጎን አሞሌ በጃቫስክሪፕት ኮድ ተሞልቷል (በሚቀጥለው ውይይት ይደረጋል)።

ዋናው አካል በአሁኑ ጊዜ ባዶ ነው ፣ ግን ልክ እንደ ማጣሪያዎች ተጠቃሚው አንድ ምድብ ሲመርጥ እና የጃቫስክሪፕት ኮድ ይህንን አካባቢ ከሞላ በኋላ የእቃውን መታወቂያ ፣ ቀለም ፣ መጠን እና አካባቢን በምስል በሚገልጹ ንጥሎች ሳጥኖች ይሞላል።

በመጨረሻ ያጠቃልላል (ጄኤስ) ፣ በሚቀጥለው ደረጃ ይህንን እንይ።

ደረጃ 11: ደረጃ 4 የጃቫስክሪፕት ኮድ (JS.html)

የአገልጋዩ ኮድ ከባድ ክፍል ነው ብለው ካሰቡ የዚህን ጭነት ያግኙ።

እዚህ የእኛን ኤችቲኤምኤል እና ሴቨር ኮዴን ከተጠቃሚ መስተጋብሮች ጋር እናዋሃዳለን። ጠቅ የተደረገ ማንኛውም ንጥል ትክክለኛውን ውሂብ ለማግኘት እና ሊነበብ በሚችል ቅርጸት ለመመለስ እዚህ መከናወን አለበት። ስለዚህ የመጀመሪያ ጥሪዎቻችንን እንመልከት።

ስክሪፕቱ ይደውላል -ለዚህ ፕሮጀክት 3 የተለያዩ ቤተ -መጻህፍት እጠቀማለሁ ፤ jquery ፣ bootstrap እና ልዩ bootstrap-select add-on። እነዚህ ቤተመፃህፍት የነገሮችን ቅርጸት እና በኤችቲኤምኤል ኮድ ውስጥ ላሉት አካላት ቀላል ጥሪዎችን ለማድረግ ይፈቅዳሉ።

ቀጣዩ የእኔ አስፈላጊ የጃቫስክሪፕት መስመር ከዚህ በታች ነው

$ (ሰነድ).keypress (ተግባር (ክስተት) {ከሆነ (ክስተት። የትኛው == '13') {event.preventDefault (); }});

እዚህ ማንኛውንም ቅጾች እንዳይቀሰቅሱ የመግቢያ ቁልፍን አሰናክያለሁ። በዚህ ሁኔታ እንደነበረው የ Google ድር መተግበሪያዎች የአንድ ገጽ አድራሻቸውን ብቻ ይመደባሉ። የመግቢያ ፕሬስ በኤችቲኤምኤል አድራሻ ላይ ውሂብን ይጨምራል እና ተጠቃሚውን ለማዞር ይሞክራል። ይህንን በማሰናከል የጃቫስክሪፕት ኮድዎ ሁሉንም ሥራ እንዲያከናውን ይፈቅዳሉ።

ተግባር removeFilters () {google.script.run.withSuccessHandler (updateItems)። withFailureHandler (onFailure). ServerRemoveFilters (); }

ተግባር updateDBlocation (መታወቂያ ፣ እሴት) {google.script.run.withSuccessHandler (allGood).withFailureHandler (FailDBUpdate).updateLocation (መታወቂያ ፣ እሴት) ፤ }

ወደ አገልጋይ Code.gs ፋይል ጥሪዎችን የሚያደርጉ ሁለት ተግባራት እዚህ አሉ። መስመሩ:

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

በእሱ ውስጥ ብዙ የሥራ ክፍል አለው ፣ ግን አፅሙ ከ ‹google.script.run› ስር ለኤችቲኤምኤል ገጹ የሚነግረው የሚከተለው ተግባር በአገልጋዩ ላይ ነው።

• የዚህ ኮድ የመጨረሻው ቢት የማስኬድ ተግባር ነው። በዚህ ምሳሌ ServerRemoveFilter ()
• በ ‹SuccessHandler ›) የኤችቲኤምኤል ገጽ አሁን ከተመለሰው ውሂብ ጋር ምን ማድረግ እንዳለበት ያውቃል ፣ እና ይህ ተግባሩን በቅንፍ ማካሄድ ነው።
• ተመሳሳይ በ ‹FailureHandler› () ላይ ይሠራል

አሁን የአገልጋይ ኮድ ጥሪን ስለሰበርን ፣ እነዚህ የአገልጋይ ጥሪ ሲሳካ እና ሲሳካ ምን እንደሚሆን በፍጥነት እንይ።

ተግባር allGood (ሠ) {console.log (“በአገልጋይ ላይ ስኬት”); } በ Failure (ስህተት) ላይ ተግባር ($) ("#መልዕክት-ሳጥን")። html ("

በዚህ ጊዜ የልብስ እቃዎችን ማምጣት አልተቻለም። ስህተት: " + ስህተት. መልዕክት" +

");} ተግባር FailDBUpdate (ስህተት) {$ ("#መልዕክት-ሳጥን ")። html ("

ቦታውን ለመቀየር መዳረሻ የለዎትም። ስህተት: " + ስህተት. መልዕክት" +

"); $ (". አካባቢ-ይመርጣል ")።

እንደ ሁሉም ጥሩ () አድርገው ማየት የሚችሉት የአከባቢው ተግባር ሲሠራ ስኬትን ለማመልከት በጣም ቀላል የኮንሶል ምዝግብ ማስታወሻ ፈጠርኩ።

ስህተቶቹን በሚይዙበት ጊዜ እነዚህ ሁለት ተግባራት “የመልእክት ሳጥን” መታወቂያ ባለው የኤችቲኤምኤል ነገር jQuery ጥሪን በመጠቀም ተጠቃሚው ሊያይበት የሚችለውን የስህተት መልእክት ያወጣሉ።

አሁን ወደ ጨካኝ ሥራ እንውረድ

ደረጃ 12: ደረጃ 5 የጃቫስክሪፕት ኮድ-ጠቅ ያድርጉ እርምጃዎች (JS.html)

የላይኛው ምናሌ አሞሌ ለእያንዳንዱ የጽሑፍ ዓይነት አማራጮች አሉት። ጠቅ በማድረግ የሚሰሩበት ተግባር -

የተግባር ማጣሪያ ዓይነት (ጽሑፍ ፣ መታወቂያ) {$ ("ul.navbar-nav li.active")። removeClass ("ንቁ"); $ ("#currentArticle"). html ("// HTML CODE HERE");

updateSideBar = እውነት;

google.script. var newSelect = "#type-"+id; $ (newSelect).addClass ("ንቁ"); $ ("#myNavbar"). ClassClass ን ("ውስጥ"); }

በዚህ ኮድ ውስጥ መረጃን ለማግኘት ወደ አገልጋዩ የሚጠራ google.script.run አለን። የዚህ ጥሪ የስኬት ተግባር updateItems () ነው።

ሥዕል 1 (በዚህ ተግባር ውስጥ ካለው ከባድ የኤችቲኤምኤል ኮድ ጋር በዚህ ሳጥን ውስጥ ብጥብጥ ሳይታይበት ኮዱን በጥብቅ ለመገልበጥ አስቸጋሪ ነው)

በ updateItems () ኮድ ውስጥ ፣ ብዙ የሚከሰቱ ነገሮች አሉን። እንደገና ወደ እኛ በተመለሰው ነገር በኩል ማለፍ እና እያንዳንዱን ንጥል ወደ ዋናው የሰውነት ገጻችን ማከል አለብን።

የኤችቲኤምኤል ኮድ እንደ ድርድር ኮዱን ለመስበር እና ንባብ ውሂብ የት እንደሚገባ ለማየት እና ለማንበብ ቀላል ለማድረግ ታክሏል።

በእያንዲንደ ንጥል ሉፕ ውስጥ እኔ እንደ ነባሪ ፣ የጊዜ ማህተም እና የስዕል ዩአርኤል ባሉ መግለጫው ውስጥ ማየት የማልፈልጋቸውን መስኮች አስወግዳለሁ። በምትኩ ወደ መለያው href በመታከሉ ምክንያት የስዕሉን ዩአርኤልን ከመግለጫው አስወግዳለሁ። አንዴ ይህ መረጃ ከተሰበሰበ በኋላ የ jQuery.append () ተግባርን በመጠቀም ወደ ዋናው አካል ይላካል።

ሁሉም ዕቃዎች ወደ ገጹ ከተጨመሩ በኋላ ፣ ይህ የነገሮች መጠይቅ በምስል 2 ላይ እንደሚታየው የማጣሪያ አማራጮችን ለመደርደር እና ለመመለስ እንደገና ወደ አገልጋዩ ኮድ ይላካል።

ሥዕል 2 (የጎን አሞሌን ማዘመን)

ከ updateItems () ተግባር ጋር በጣም ተመሳሳይ ፣ እኛ እንደገና የኤችቲኤምኤል ድርድር እና ለሁሉም የማጣሪያ አማራጮች አንድ ዙር አለን። የሚታየው ለውጥ ብቻ jQuery.selectpicker ('refresh') ነው። ይህ ተግባር የሚመጣው በመጨረሻው ደረጃ ከገባነው የስክሪፕት ቤተ -መጽሐፍት ነው። ለፕሮግራም አድራጊው አንድ ቀላል የተመረጠ ኤችቲኤምኤል እንዲጽፍ እና ቤተ -መጽሐፍት ተፈላጊውን ተግባር እንዲሁም የሲኤስኤስ ኮድ እንዲያካትት እንዲያዘምን ያስችለዋል።

ሥዕል 3 (ከጎን አሞሌ ጋር ማጣራት)

በመጨረሻ እኛ የዝማኔ ማጣሪያ (formData) ተግባር አለን። ይህ ቅጽ ከጎን አሞሌ ሲቀርብ ጥቅም ላይ ይውላል። እኛ የ jQuery ተግባርን በመጠቀም እንጀምራለን ።serializeArray () ይህ በእኛ ሁኔታ ውስጥ የተገለጸውን የኤችቲኤምኤል ኮድ ያነባል እና ወደ አገልጋዩ ለመላክ በአንድ ሕብረቁምፊ ውስጥ ያሉትን እሴቶች ይመልሳል። እና ሂደቱን ከምስል 1 እንደገና እንጀምራለን።

ደረጃ 13 መጨረሻው…. በመጨረሻ

ደህና እዚያ አለዎት; የራስዎን የመስመር ላይ ቁምሳጥን ለማቀናበር ወይም የራስዎን ፕሮጀክት ለማስፋፋት በእኔ የጉግል ስክሪፕቶች ውስጥ የተፈጠረውን ተግባር እንዲጠቀሙ ለማገዝ የተሟላ እና የተሟላ ማብራሪያ።

ይህንን ፕሮጀክት ኮድ (እና በዚህ አስተማሪ በኩል መመዝገብ) ጉዞ ነበር ፣ ግን ሂደቱን አስደስቶኛል እና እርስዎ ምርቱን እንደሚደሰቱ ተስፋ አደርጋለሁ። ሚካኤል ዮርዳኖስ “ጣሪያው ጣሪያ ነው” እና እኔ ይህ መተግበሪያ ወሰን እንደሌለው እስማማለሁ ብሎ ማስተካከያዎችን ከሚያደርግ ከማንኛውም ሰው ቢሰማ ደስ ይለኛል።