Orodha ya maudhui:

Mratibu wa WARDROBE: Hatua 13
Mratibu wa WARDROBE: Hatua 13

Video: Mratibu wa WARDROBE: Hatua 13

Video: Mratibu wa WARDROBE: Hatua 13
Video: Шок!!! ДУШИ МЕРТВЕЦОВ В ЗАТОЧЕНИИ У ДЕМОНА В ЭТОМ СТРАШНОМ ДОМЕ / HERE ARE THE SOULS OF THE DEAD 2024, Julai
Anonim
Mratibu wa WARDROBE
Mratibu wa WARDROBE

Iwe unanunua nguo au unaulizwa kukopa kitu chochote, kuna nyakati unatamani uweze kutazama chumbani kwako kutoka mahali popote ili uone ikiwa una kitu kama hicho.

Hii ni duka moja la kusimama na ni pana kwa madhumuni mengine mengi. Mratibu wangu wa WARDROBE ni mchanganyiko wa Karatasi za Google kama hifadhidata ya SQL, Hati za Google za kushughulikia data, na Google WebApp kwa bandari mkondoni ya data hii. Mtumiaji wa mwisho anaweza kuona vitu vyote, kuchuja kwa kitu maalum, weka alama vitu kuwa imetolewa kwa mkopo, dhibiti nguo zao, na uzuie mama kukununulia shati moja kwa Krismasi kila mwaka *.

(* Hakuna Dhamana. Akina mama watanunua kile wanachotaka ikiwa unahitaji au la)

Kuchukua mtazamo wa haraka katika muundo wa wavuti kwenye picha hapo juu, mtu anaweza kutambua mpangilio uliozoeleka. Mratibu wa WARDROBE amewekwa kama tovuti yoyote ya mavazi ya kawaida. Imevunjwa na idara juu na vichungi vilivyotolewa kando, kiolesura hiki huleta ujulikanao na utendaji kwa mtumiaji wa kawaida. NA ni rahisi kutumia.

Hatua ya 1: Kuweka Nakala yako mwenyewe

Kuanzisha Nakala yako mwenyewe
Kuanzisha Nakala yako mwenyewe

Wacha tuanze kwa kuunda nakala yako ya mradi huu.

Hifadhi ya Google

Bonyeza kwenye Kiunga hapo juu ili kukupeleka kwenye toleo langu la sasa la programu hii.

Utaona vitu 3 kwenye folda hii: Fomu ya Google, Laha ya Google, na Folda.

Bonyeza kulia kwenye Karatasi ya Google na ubonyeze Tengeneza Nakala.

Weka Mahali pa nakala hii kwenye Hifadhi yako mwenyewe.

Baada ya kunakili hati hii, Fomu ya Google itatengenezwa kiatomati kwenye folda ile ile uliyohamisha Karatasi ya Google.

Ili kuunda Folda (hii ni muhimu kukusanya upakiaji wa picha za kipengee), bofya Fomu ya Google iliyonakiliwa na haraka itaonekana ikikuuliza urejeshe eneo la folda kwa upakiaji.

Sasa unayo nakala ya hati hii ya kujifanyia kazi!

Hatua ya 2: Muhtasari wa Fomu ya Google

Muhtasari wa Fomu ya Google
Muhtasari wa Fomu ya Google
Muhtasari wa Fomu ya Google
Muhtasari wa Fomu ya Google
Muhtasari wa Fomu ya Google
Muhtasari wa Fomu ya Google
Muhtasari wa Fomu ya Google
Muhtasari wa Fomu ya Google

Sasa kwa kuwa una toleo lako la programu tumizi, wacha tuangalie kote.

Fomu yako ya Google imewekwa ili kukubali aina nyingi za vitu. Walakini mashati, suruali, nguo, na viatu vyote vina mapungufu tofauti ya ukubwa. Kwa hivyo sehemu tofauti ya fomu hii itajazwa kulingana na idara unayoweka kipengee chako chini. Katika templeti yangu (ya Nakala ya Kiume) nimeunda vikundi 5 vya ukubwa tofauti. (Kwa Nakala za Wanawake, bonyeza hapa, kuna mengi zaidi).

Chini ya kila sehemu ya ukubwa, nilianzisha jina la kipekee kwa kila parameta nitakayokuwa nikikusanya. Hatutaki kuwa na nguzo nyingi kwenye hifadhidata yetu na jina "Ukubwa" au hatutaweza kuamua ni aina gani ya nguo ambazo saizi hiyo inatumika.

Mwisho wa kila sehemu, mtumiaji huelekezwa kwa sehemu ya mwisho ya fomu hii: Mahali. Mimi mwenyewe nilichagua kuongeza Mahali kuamua vitu kwenye Visafishaji Kavu, katika kufulia, mahali pao au vitu vile ambavyo nimemruhusu rafiki akope. Hii inaniruhusu kujipanga na kamwe sihisi kama ninakosa kipande cha nguo mahali pengine.

Kama nilivyosema tangu mwanzo, mradi huu unaweza kupanuliwa kwa milioni milioni kwa njia tofauti. Unaweza kuitumia kwa hesabu, zana sahihi zaidi ya shirika, au kwa kukopa nguo kabisa. Mashamba na sehemu unazoweza kuongeza hazina mwisho kwa hivyo usijisikie mdogo kwa kile kilicho katika fomu yangu. (Kwa Nakala za Wanawake bonyeza hapa)

Kabla ya kupakia vitu vyako kadhaa wacha tuendelee na hatua inayofuata ili kuhakikisha uwasilishaji sahihi.

Hatua ya 3: Hati za Google: (Server Code.gs) Kwanza Tazama Takwimu na Nambari

Hati za Google: (Server Code.gs) Kwanza Tazama Takwimu na Nambari
Hati za Google: (Server Code.gs) Kwanza Tazama Takwimu na Nambari
Hati za Google: (Server Code.gs) Angalia kwanza Takwimu na Nambari
Hati za Google: (Server Code.gs) Angalia kwanza Takwimu na Nambari

Kubofya kwenye hati ya Majedwali ya Google, utaona nguzo nyingi za data (na safu zingine, zimesalia kwa maandamano). Wakati wa uwasilishaji wa fomu sehemu zingine zimerukwa, hii ni dhahiri kutoka kwa data iliyokosekana kwenye safu zingine. Lakini safu wima za ziada kama vile kitambulisho, Mahali Chaguo-msingi, Nani, na Sasisho zimeongezwa ili kufuatilia vizuri mabadiliko ya vitu hivi.

Sehemu ya kitambulisho imeundwa wakati ulipowasilisha fomu kuruhusu kitambulisho cha kipekee unapopita database hii. Ili kuunda uwanja huu, tutaangalia Mhariri wa Hati kwa kubonyeza Zana> Kihariri cha Hati.

Ukiwa na Mhariri wa Hati wazi, utaona hati 8 kwenye mwambao wa dirisha hili jipya. Nyaraka hizi husaidia kudhibiti mchakato wa mwisho-mwisho, maonyesho ya mwisho-mwisho, na utendaji wa mbele-mwisho. Tutaruka ndani ya kila moja (ikiwa unashikilia) lakini hivi sasa bonyeza Nambari ya Seva.

Katika faili ya Code Code.gs kuna kazi nyingi:

onSubmit (e), onOpen (), doGet (), ni pamoja na (fileName), OpenApplication (), openLaundryApp (), changeValueOnSubmit (e), setIDOnSubmit (e)

onSubmit (e) - Kazi hii itasanidiwa kama kazi ya kwanza kuendeshwa wakati Fomu ya Google inawasilisha. Unaweza kuweka kazi zingine ndani ya kazi hii ili kuruhusu michakato anuwai kutokea.

onOpen (e) - Kazi hii inaitwa wakati Google Sheets inafunguliwa. Inajaza chaguo mpya ya menyu kuruhusu ufikiaji wa haraka kwa viungo na maoni ya programu.

doGet () - Kazi hii inaitwa kwenye simu ya anwani ya App App. Mtumiaji anapovinjari kwa Programu ya Wavuti iliyochapishwa nambari hii itamwambia ukurasa huo nini cha kuonyesha. Katika kesi hii, ni hati Maombi.html.

pamoja na (fileName) - Kazi hii hutumiwa ndani ya kurasa za HTML kusoma hati nyingine na kuingiza yaliyomo kwenye muundo sahihi wa HTML ndani ya ukurasa mwingine. Tunatumia kwa faili zetu za CSS.html na JS.html.

openApplication () na openLaundryApp () - Kazi hizi zina nambari ya kuendesha wakati mtumiaji anabofya kwenye vifungo vya menyu vilivyoongezwa kwenye upau wa zana wa Google Sheet.

changeValueOnSubmit (e) na setIDOnSubmit (e) - Hizi ndizo kazi ambazo tutachunguza kwa sasa. Wao ni wajibu wa kusasisha sehemu fulani na maadili chaguo-msingi wakati fomu imewasilishwa mwanzoni.

Hatua ya 4: Kuwezesha OnFormSubmit

Kuwezesha OnFormSubmit
Kuwezesha OnFormSubmit
Kuwezesha OnFormSubmit
Kuwezesha OnFormSubmit
Kuwezesha OnFormSubmit
Kuwezesha OnFormSubmit

Kazi hizi mbili, changeValueOnSubmit (e) na setIDOnSubmit (e), zinahitaji kushikamana na hatua ya mtumiaji ya kuwasilisha fomu. Ili kufanya hivyo tunahitaji kuwezesha Kuchochea.

Tunawezesha kichocheo kwa kubofya Hariri> Vichochezi vya mradi wa sasa. Hii inafungua Kitovu cha Msanidi Programu wa Google.

Kwenye kona ya chini ya mkono wa kulia wa dashibodi ya kichocheo kuna kitufe Ongeza kichocheo. Bonyeza hapa.

Sasa tutaanzisha kazi ya kukimbia wakati fomu imewasilishwa. Kwa upande wetu nina kazi nyingi (changeValueOnSubmit (e) na setIDOnSubmit (e)) ambazo nimeweka ndani ya kazi ya onSubmit () kwa hivyo inabidi tu kuanzisha kichocheo 1. Kwa hivyo tutachagua kwenyeSubmit () na kuweka kichocheo hiki kuendesha fomu ya kuwasilisha.

Sasa tuna fomu ya kufanya kazi ambayo itajaza Karatasi ya Google na vitambulisho vya kipekee na kuweka maadili chaguo-msingi.

Sasa unaweza kupakia vitu vyako mwenyewe ukitumia Fomu ya Google. (Hii sio lazima kuendelea kwani tayari kuna nambari za onyesho ndani). Sasa tutaingia kwenye kiolesura cha mtumiaji.

Hatua ya 5: Kuweka Kiolesura cha Mtumiaji

Kuweka Kiolesura cha Mtumiaji
Kuweka Kiolesura cha Mtumiaji
Kuweka Kiolesura cha Mtumiaji
Kuweka Kiolesura cha Mtumiaji
Kuweka Kiolesura cha Mtumiaji
Kuweka Kiolesura cha Mtumiaji

KARIBU! Hatimaye tumefika sehemu uliyokuja, Kiolesura cha Mtumiaji !!!!

Kwa kutazama kwanza, hakuna kitu hapa. Bado hatujapiga simu yoyote. Ili kupakia ukurasa kwa kasi niliamua kutosumbua ukurasa wa kwanza na vitu vyako WOTE na kukuruhusu kubonyeza kile unataka kuona haraka. Kwa kuwa hii ndio kesi hakuna vitu kwenye uwanja kuu wa yaliyomo na hakuna vichungi kwenye pembeni. Wacha bonyeza Bonyeza ili uone kilicho kwenye hifadhidata yetu.

Sasa tumepakia kila kitu kwenye hifadhidata yetu kwenye uwanja kuu wa yaliyomo. Utaona picha, nambari za kitambulisho, rangi, saizi, na maeneo. Sehemu ya eneo inaweza kusasishwa hapa hapa! Ukiamua kukopesha bidhaa hiyo unaweza kuchagua chaguo hilo, unaweza kuiweka kwenye kabati lako, mfanyakazi, au kufulia.

Na katika mwambao wetu wa kando tuna kila uwanja unaowezekana kwa kila kitu cha nguo kwenye swala letu jipya. Hebu fikiria kuwa na chaguzi 20 za ukubwa tofauti kwenye mwamba huu, haitakuwa nzuri sana, kwa hivyo wacha tupate utaftaji wetu kwa kubofya Vifaa.

Sasa kwa kuwa tumepakia Vifaa, angalia mwambaaupande. Imebadilishwa kuwa uwanja 3 tu, kwani hizi ni vigezo vinavyotumika kwa kila kitu kwenye swala hili. Nitaenda kufanya aina kwa rangi. Kwa kubonyeza rangi, sanduku la kushuka linaonekana. Hapa ninaweza kuchapa rangi ninayotaka na kisha kuichagua, au ikiwa nitaona chaguo langu mara moja nitabonyeza tu. Nilichagua Nyekundu kwa maandamano haya. Bonyeza Tumia Kichujio chini ya mwamba huu na yaliyomo kuu yatakuburudisha kukuonyesha vitu ambavyo vimewekwa rangi Nyekundu kama kigezo cha rangi.

Hapo awali nilitaja hifadhidata hii inanisaidia kudhibiti vitu vyangu kwa mkopo na katika kufulia kwangu. Ili kurahisisha kidogo, badala ya kubofya kwa mikono kila eneo la kushuka kwenye ukurasa huu kuu niliunda Njia ya kufulia. Rudi kwenye ukurasa wa Laha ya Google na chini ya Mwonekano wa Programu utaona Njia ya kufulia. Chaguo hili litavuta modeli ndogo ambayo inaonyesha vitu tu na eneo la Kufulia. Ninaweza sasa kuweka alama ya vitu hivi kama Chaguo-msingi ambayo itawaweka tena katika maeneo yao ambayo kawaida huhifadhiwa.

Hatua ya 7: Mradi Umekamilika

Mradi Umekamilika!
Mradi Umekamilika!

HONGERA

Kwa wale ambao wanataka tu hifadhidata inayofanya kazi kusimamia vitu vyako, karibu kwa mratibu wako mkondoni. Kwa wale akili zenye hamu ya kupenda nambari iliyo nyuma ya programu hii. Shika karibu wakati ninaivunja.

* Uko huru kufuta vitu vya kujaribu BAADA ya kuingiza angalau moja ya vitu vyako kwenye hifadhidata. (Nitaelezea baadaye ikiwa unakaa karibu).

Hatua ya 8: Hatua ya 1: Nambari ya Mwisho ya Nyuma (Server Code.gs)

Hatua ya 1: Nambari ya Mwisho ya Nyuma (Server Code.gs)
Hatua ya 1: Nambari ya Mwisho ya Nyuma (Server Code.gs)
Hatua ya 1: Nambari ya Mwisho ya Nyuma (Server Code.gs)
Hatua ya 1: Nambari ya Mwisho ya Nyuma (Server Code.gs)

Hapo awali tulifungua faili ya Server Code.gs na nikatoa kazi haraka kwa kila kazi kwani kusudi lao lilikuwa kutumikia kila kitu ulichoweka tu lakini sasa tutawavunja baadhi ya utendaji na uitisho ulioitwa kufanikisha nambari hii.

1) Kupitia meza:

var ss = SpreadsheetApp.getActiveSpreadsheet (); var sheet = ss.getSheetByName ("Majibu ya Fomu 1"); safu ya var = karatasi.getRange (1, 1, karatasi.getMaxRows ()); var safuNum = masafa. GunduaLastRow ();

  • Nambari hii ni msingi wa kupita kwenye Laha ya Google. Ninaita karatasi kwa jina badala ya nambari ili ikiwa shuka zitafutwa au kupangwa upya na kazi bado zinaweza kufanya kazi vizuri.
  • Katika nambari hii ninakusanya Range tu kwa data zote zilizo kwenye jedwali.

2) Kukabidhi kitambulisho:

var LastID = safu.getCell (safuNum-1, 1); var CellValue = Nambari (LastID.getValue ()); var max = 15; var min = 5; CellValue = CellValue + Math.round ((Math.random () * (max - min) + min)); e.source.getActiveSheet ().getRange (range.getLastRow (), ColA).setValue (CellValue); mabadilikoValueOnSubmit (e);

  • Hapo awali niliuliza kwamba nambari za onyesho ziachwe mezani hadi mtumiaji atakapowasilisha angalau nambari moja kwao. Hii ni kwa sababu jenereta ya Kitambulisho Auto hutegemea dhamana ya mwisho kwenye hifadhidata ili kujazwa.
  • Ninachukua safu ya pili ya mwisho hadi ya mwisho kwa sababu safu ya mwisho ni thamani yetu mpya na safu ya 1 ya thamani ya kitambulisho.
  • Halafu mimi hutengeneza nambari kati ya 5 na 15 na kuiongeza kwa thamani ya mwisho. *
  • Mwishowe ninaweka thamani hii kwenye safu ya kitambulisho cha safu ya mwisho.
  • Ifuatayo tunaita kazi ya changeValueOnSubmit (e).

* Nilichagua 5-15 kuruhusu uwekaji alama wa siku zijazo na ujumuishaji wa Google Home ili nambari zisikaribie vya kutosha kusababisha mkanganyiko kwenye hanger au vitambulisho vya nguo au alama za baikodi.

3) Kubadilisha Thamani ya URL:

var DataChange = e.namedValues ["Picha ya Bidhaa"]; var DefaultLocation = e.namedValues ["Unaweka wapi kifungu hiki cha nguo?"]; var ColD = ColumnID _ ("Picha ya Bidhaa") +1; var ColLoc = ColumnID _ ("Mahali pa Default") + 1; DataChange = DataChange.toString (). badala ("open?", "uc? export = view &"); e.source.getActiveSheet ().getRange (e.range.rowStart, ColD).setValue (DataChange); e.source.getActiveSheet ().getRange (e.range.rowStart, ColLoc).setValue (DefaultLocation);

  • Wakati wa kuwasilisha picha kupitia Fomu ya Google URL iliyoingizwa kwenye Majedwali ya Google ni kiunga cha hati halisi. Kwa upande wetu, tunapounda ukurasa wa HTML tunataka kiunga kiwe picha tu.
  • Kwa kubadilisha "wazi?" sehemu ya URL kwa "uc? export = view &" tumeunda kiunga cha picha badala yake.
  • Tutaweka tena dhamana hii mpya katika eneo la kiunga cha sasa cha Picha ya Bidhaa.
  • Ninaweka pia "Mahali Chaguo-msingi" na "Mahali pa Sasa" ya bidhaa kuwa kitu kimoja kwenye hifadhidata. Hii itakuwa inasaidia wakati wa kujaribu kutumia Njia yangu ya kufulia.
  • Tutazama ndani kwenye ukurasa unaofuata lakini huu ndio mtazamo wetu wa kwanza kwenye kazi ya ColumnID_ () niliyoiunda.

    Kazi hii hutumia Majina ya safu wima kutafsiri kuwa nambari kamili ya safu ambayo inasaidia kwa upigaji simu ambao unahitaji nambari ya safu badala ya jina

4) LahajedwaliApp.getUI ()

  • Katika picha ya pili unaweza kuona matumizi ya SpreadsheetApp.getUI () kama ilivyokuwa ikitengeneza nyongeza ya Menyu ya Zana kwenye Jedwali la Google.
  • Kazi ya.getUI () pia husaidia kuunda dukizo la kawaida ambalo hutumiwa kwa hali ya kufulia na kama kiunga cha haraka cha kiolesura cha wavuti.

5) Huduma ya HTML

  • Kuna aina mbili za Huduma za HTML zinazotumiwa katika nambari hii: Kiolezo na HTMLOutput
  • Kiolezo kinaruhusu msimbo kuingizwa ndani ya nambari ya HTML ili habari kutoka kwa seva iweze kuwa na watu wakati ukurasa unaitwa.
  • Pato la HTML linaonyesha kurasa rahisi za HTML.
  • Pia tuna njia ya kujumuisha () ambayo inatuwezesha kuunda faili nyingi za HTML na kuzichanganya kwenye faili moja ya templeti ya HTML kwa kurudisha yaliyomo kwenye faili katika muundo wa HTML badala ya kamba.

Nimeambatanisha hati iliyowekwa kama Hati za Hati za Google App ili kuleta ujulikanaji wa jinsi nambari ya chanzo na utendaji vinaelezewa ndani ya Programu za Google.

Hatua ya 9: Hatua ya 2: Nambari ya Mwisho ya Mwisho Sehemu ya 2 (Simu za Seva.gs)

Hatua ya 2: Nambari ya Mwisho ya Mwisho Sehemu ya 2 (Simu za Seva.gs)
Hatua ya 2: Nambari ya Mwisho ya Mwisho Sehemu ya 2 (Simu za Seva.gs)
Hatua ya 2: Nambari ya Mwisho ya Mwisho Sehemu ya 2 (Simu za Seva.gs)
Hatua ya 2: Nambari ya Mwisho ya Mwisho Sehemu ya 2 (Simu za Seva.gs)
Hatua ya 2: Nambari ya Mwisho ya Mwisho Sehemu ya 2 (Simu za Seva.gs)
Hatua ya 2: Nambari ya Mwisho ya Mwisho Sehemu ya 2 (Simu za Seva.gs)

Sasa tumeingia Simu za Seva.gs. Kazi hizi hutumiwa haswa katika HTML JavaScript kwa hivyo zimetengwa kutoka kwa nambari ambayo hutumiwa haswa katika mwisho wa nyuma ambayo iko kwenye Server Code.gs.

Picha 1) Viwango vya Ulimwenguni:

Picha 2) kuleta vitu:

Picha 3) fetchItemsQry

Picha 4) VichungiVyombo

Picha 5) fetchFiltersWithQry

Picha ya 6) ColumnID, na CacheCalls

Kuna mengi ya kuzungumza juu ya kila moja ya haya. Na ili kuvunja nambari na kuelezea kinachoendelea nilihitaji nafasi zaidi ya kuandika. Imeambatanishwa ni hati ya kuvunjika kwa msimbo wa ServerCalls.gs

Hati hii imewekwa kama Hati za Hati za Google App na hata hufanya viungo kwa vitu sawa.

Hatua ya 10: Hatua ya 3: Msimbo wa HTML (Application.html)

Hatua ya 3: Nambari ya HTML (Application.html)
Hatua ya 3: Nambari ya HTML (Application.html)
Hatua ya 3: Nambari ya HTML (Application.html)
Hatua ya 3: Nambari ya HTML (Application.html)
Hatua ya 3: Nambari ya HTML (Application.html)
Hatua ya 3: Nambari ya HTML (Application.html)

Nambari ya HTML haifurahi sana ndani ya kisanduku cha mazungumzo kinachoweza kufundishwa. Kwa hivyo tafadhali fuata picha zilizo hapo juu.

1) Katika kichwa cha ukurasa wa Application.html tunaanzisha kichwa na tunaita ukurasa wetu wa CSS.html kupakiwa.

* Kwa kuwa ukurasa wa HTML ulio na templeti, tunaweza kuongeza nambari zaidi kwenye hati hii bila kung'ang'ania skrini ya sasa kwa kutumia njia iliyotajwa hapo awali ni pamoja na (ukurasaName) inayopatikana kwenye Server Code.gs

Sanduku kuu la kichwa pia linapatikana kwenye picha hii. Unaweza kubadilisha kichwa hapa na ingiza "WARDROBE [Jina Lako]" au chochote kingine ungependa kutambua ukurasa huu kama.

2) Chini tu ya kichwa ni mwamba wetu wa juu wa urambazaji.

Upau huu wa urambazaji unajumuisha aina zote za nakala zilizoorodheshwa kwenye karatasi ya Nakala ndani ya Majedwali ya Google.

Kazi ya ndani inaitwa kuchukua safu ya vitu hivi. Kisha kitanzi kinaendeshwa kujumuisha kila chaguzi kama kitufe cha menyu, kamili na nambari ya kitendo kwa hivyo mtumiaji anapobofya kitufe cha menyu, vitu husika vitaonekana katika eneo la mwili.

3) Mwili kuu.

Kuna sehemu 4 kwa sehemu hii. Utoaji wa maandishi, kichujio cha mwambaaupande, picha kuu za mwili, na JS inajumuisha.

Utoaji wa maandishi unaruhusu mtumiaji kuona mwonekano wa maandishi haraka kwa aina gani ya vitu ambavyo wanaangalia sasa badala ya kutaja chaguo la menyu waliyochagua.

Kichujio cha pembeni kina kichujio nyingi zinazopatikana kwa aina ya kitu ambacho mtumiaji amechagua. Vichungi hivi vinaonyesha chaguzi zote zinazopatikana kwa kategoria hii na vile vile vitu vingapi vinaanguka chini ya thamani ya kategoria. Ukingo huu umejaa msimbo wa JavaScript (ambao utajadiliwa baadaye).

Mwili kuu kwa sasa hauna kitu, lakini kama vichujio vitajazwa na masanduku ya vitu yaliyo na kitambulisho cha Rangi, Rangi, Ukubwa, na Mahali na picha iliyojumuishwa mara tu mtumiaji anachagua kitengo na Nambari ya JavaScript inajaza eneo hili.

Mwishowe ni pamoja na (JS), wacha tuangalie hii kwenye hatua inayofuata.

Hatua ya 11: Hatua ya 4: Msimbo wa JavaScript (JS.html)

Hatua ya 4: Msimbo wa JavaScript (JS.html)
Hatua ya 4: Msimbo wa JavaScript (JS.html)

Ikiwa unafikiria Nambari ya Seva ilikuwa sehemu nzito pata mzigo wa hii.

Hapa tunachanganya HTML yetu na SeverCode na mwingiliano wa watumiaji. Bidhaa yoyote ambayo imebofya lazima ishughulikiwe hapa kupata data sahihi na kuirudisha katika muundo unaosomeka. Wacha tuangalie simu zetu za kwanza:

Hati inaita: Ninatumia maktaba 3 tofauti kwa mradi huu; jQuery, bootstrap, na nyongeza maalum ya kuchagua bootstrap. Maktaba hizi huruhusu uumbizaji wa vitu na simu rahisi kwa vitu ndani ya nambari ya HTML.

Mstari wangu muhimu wa JavaScript uko chini:

$ (hati)

kazi (tukio) {if (event.which == '13') {event.preventDefault (); }}));

Hapa ninazima kitufe cha kuingiza kutoka kwa kusababisha aina yoyote ya fomu. Kama katika kesi hii Google Web Apps hupewa anwani yao ya ukurasa mmoja tu. Vyombo vya habari vya kuingiza vinaongeza data kwenye anwani ya HTML na kujaribu kuelekeza mtumiaji. Kwa kuzima hii, unaruhusu msimbo wako wa JavaScript kufanya kazi yote.

kazi removeFilters () {google.script.run.withSuccessHandler (updateItems) withFailureHandler (onFailure). ServerRemoveFilters (); }

sasisha kaziDlocation (id, value) {google.script.run.withSuccessHandler (allGood).withFailureHandler (FailDBUpdate).updateLocation (id, value); }

Hapa kuna kazi mbili ambazo zinapiga simu kwenye faili ya Code Code.gs. Mstari:

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

ina sehemu nyingi za kufanya kazi lakini mifupa imetokana na "google.script.run" ambayo inaambia ukurasa wa HTML kazi ifuatayo iko kwenye seva.

  • Kidogo cha mwisho cha nambari hii ni kazi ya kuendesha. Katika mfano huu ServerRemoveFilter ()
  • Kwa kuongeza withSuccessHandler () ukurasa wa HTML sasa unajua nini cha kufanya na data ambayo imerejeshwa, na hii ni kuendesha kazi na mabano.
  • Hiyo inatumika kwa withFailureHandler ()

Sasa kwa kuwa tumevunja simu ya Msimbo wa Seva, wacha tuangalie kwa haraka kile kinachotokea wakati simu hizi za seva zinafanikiwa na hazifaulu.

fanya kaziGood (e) {console.log ("Mafanikio kwenye seva"); } kazi onFailure (makosa) {$ ("# message-box"). html ("

Imeshindwa Kupata Vitu vya Mavazi kwa wakati huu. KOSA: "+ kosa.message +"

");} kazi FailDBUpdate (kosa) {$ (" # sanduku la ujumbe "). html ("

Huna ufikiaji wa kurekebisha eneo. KOSA: "+ kosa.message +"

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

Niliunda logi rahisi sana ya kiashiria kuashiria mafanikio wakati kazi ya eneo inaendeshwa ambayo unaweza kuona kama allGood ().

Wakati wa kushughulikia makosa, kazi hizi mbili hutoa ujumbe wa kosa ambapo mtumiaji anaweza kuona kwa kutumia simu ya jQuery kwa kitu cha HTML na kitambulisho cha "sanduku la ujumbe".

Sasa wacha tuangalie kazi ya ujanja

Hatua ya 12: Hatua ya 5: Vitendo vya Msimbo wa Bonyeza JavaScript (JS.html)

Hatua ya 5: Vitendo vya Msimbo wa Bonyeza JavaScript (JS.html)
Hatua ya 5: Vitendo vya Msimbo wa Bonyeza JavaScript (JS.html)
Hatua ya 5: Vitendo vya Msimbo wa Bonyeza JavaScript (JS.html)
Hatua ya 5: Vitendo vya Msimbo wa Bonyeza JavaScript (JS.html)
Hatua ya 5: Vitendo vya Msimbo wa Bonyeza JavaScript (JS.html)
Hatua ya 5: Vitendo vya Msimbo wa Bonyeza JavaScript (JS.html)

Upau wa menyu ya juu una chaguzi kwa kila aina ya nakala. Kazi wanayoendesha bonyeza ni:

kazi filterType (makala, id) {$ ("ul.navbar-nav li.active").ondoaClass ("active"); $ ("# currentArticle"). html ("// HTML CODE HAPA");

sasishaSideBar = kweli;

google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure).fetchTheems ("Nakala", kifungu); var newSelect = "# aina -" + id; $ (newSelect).ddClass ("hai"); $ ("# myNavbar"). ondoaClass ("in"); }

Tunaweza kuona katika nambari hii tuna google.script.run ambayo inaita kwa Seva kupata habari. Kazi ya kufanikiwa kwa simu hii ni sasisho la vipengee ().

PICHA 1 (na msimbo mzito wa HTML ndani ya kazi hii ni ngumu kunakili nambari hiyo, bila kuonekana kuwa fujo kwenye kisanduku hiki)

Katika nambari ya sasisho ya Items (), tuna mambo mengi yanayotokea. Kwa mara nyingine lazima tuvuke kupitia kitu ambacho kilirudishwa kwetu na kuongeza kila kitu kwenye ukurasa wetu kuu wa mwili.

Nambari ya HTML imeongezwa kama Arrays za kuvunja nambari na iwe rahisi kusoma na kuona mahali bidhaa inapoingizwa.

Katika kitanzi cha kila kitu, ninaondoa sehemu ambazo sitaki kuziona katika maelezo kama vile Chaguo-msingi, muhuri wa muda, na URL ya picha. Ninaondoa URL ya picha kutoka kwa maelezo kwa sababu inaongezwa kama href kwa tepe badala yake. Mara baada ya habari hii kukusanywa hutumwa kwa mwili kuu kwa kutumia jQuery.append () kazi.

Baada ya vitu vyote kuongezwa kwenye ukurasa, swala hili la vitu hutumwa kwa Msimbo wa Seva tena ili kupanga na kurudisha chaguzi za kichujio kama inavyoonekana kwenye Picha 2.

PICHA 2 (kusasisha SideBar)

Sawa sana na kazi ya sasisho (), kwa mara nyingine tena tuna safu ya nambari ya HTML na kitanzi cha chaguzi zote za kichungi. Mabadiliko tu yanayoonekana ni jQuery.selectpicker ('refresh'). Kazi hii inatoka kwa maktaba ya hati tuliyojumuisha katika hatua ya mwisho. Inamruhusu programu kuandika HTML rahisi ya kuchagua na wacha maktaba isasishe ili ijumuishe kazi inayoweza kutafutwa pamoja na nambari ya CSS.

PICHA 3 (kuchuja na pembeni)

Mwishowe tuna kazi ya sasishoFilter (formData). Hii hutumiwa wakati fomu imewasilishwa kutoka kwa mwambao wa pembeni. Tunaanza kwa kutumia kazi ya jQuery.serializeArray () hii inasoma nambari ya HTML ya kipengee kilichofafanuliwa kwa fomu yetu, na kurudisha maadili kwenye kamba kutumwa kwa seva. Na tunaanza mchakato kutoka Picha 1 tena.

Hatua ya 13: Mwisho… mwishowe

Mwisho… mwishowe
Mwisho… mwishowe
Mwisho… mwishowe
Mwisho… mwishowe

Kweli hapo unayo; maelezo kamili na kamili kukusaidia kuanzisha WARDROBE yako mwenyewe mkondoni, au kutumia utendakazi ulioundwa kwenye Maandiko yangu ya Google kupanua mradi wako mwenyewe.

Imekuwa safari ya kuweka alama mradi huu (na kuweka kumbukumbu kupitia hii inayoweza kufundishwa) lakini nimefurahia mchakato huo na natumahi utafurahiya bidhaa hiyo. Ningependa kusikia kutoka kwa mtu yeyote anayefanya marekebisho kama Michael Jordan anasema "Dari ni paa" na ninakubali kuwa programu hii haina mipaka.

Ilipendekeza: