Хувцасны шүүгээ зохион байгуулагч: 13 алхам

2024 Зохиолч: John Day | [email protected]. Хамгийн сүүлд өөрчлөгдсөн: 2024-01-30 11:03

Хувцас худалдаж авах, эсвэл ямар нэгэн зүйл зээлүүлэхийг үргэлж хүсдэг байсан ч гэсэн хааяа ч хамаагүй шүүгээ рүүгээ орж, үүнтэй төстэй зүйл байгаа эсэхийг харахыг хүсдэг.

Энэ бол нэг цэгийн үйлчилгээ бөгөөд бусад зорилгоор ашиглах боломжтой. Миний хувцасны шүүгээ зохион байгуулагч нь Google Sheets -ийг SQL мэдээллийн сан, өгөгдөл боловсруулах Google скриптүүд, энэ мэдээллийн онлайн порталд зориулсан Google WebApp -ийн хослол юм. Эцсийн хэрэглэгч бүх зүйлийг харж, тодорхой зүйлийг шүүж, зээл авсан гэж тэмдэглэж, угаалгын газраа удирдаж, ээждээ жил бүр Христийн Мэндэлсний Баярын үеэр ижил цамц худалдаж авахыг зогсоох боломжтой*.

(*Баталгаа байхгүй. Ээжүүд хүссэн зүйлээ танд хэрэгтэй байсан ч хамаагүй худалдаж авна)

Дээрх зураг дээрх вэбсайтын дизайныг хурдан харвал танил болсон загварыг таньж болно. Хувцасны шүүгээ зохион байгуулагч нь энгийн хувцасны вэбсайт шиг хийгдсэн байдаг. Дээд талын хэлтэсүүд болон хажуугийн шүүлтүүрүүдээр эвдэрсэн энэхүү интерфэйс нь энгийн хэрэглэгчдэд функцтэй танилцах боломжийг олгодог. БА ашиглахад хялбар.

Алхам 1: Өөрийнхөө хуулбарыг тохируулах

Энэ төслийн өөрийн хуулбарыг бүтээхээс эхэлье.

Google Драйв

Дээрх линк дээр дарж энэ аппликешны миний одоогийн хувилбар руу аваачна уу.

Та энэ фолдерт 3 зүйлийг харах болно: Google Form, Google Sheet, Folder.

Google Sheet дээр хулганы баруун товчийг дараад хуулбар хийх дээр дарна уу.

Энэ хуулбарын байршлыг өөрийн Драйвт тохируулна уу.

Энэ документыг хуулсны дараа Google Маягтыг таны Google Хүснэгтийг зөөсөн хавтсанд автоматаар үүсгэх болно.

Фолдер үүсгэхийн тулд (энэ нь зургуудын байршуулалтыг цуглуулахад шаардлагатай болно) хуулж авсан Google маягтыг дарахад фолдерын байршлыг сэргээх хүсэлт гарч ирэх болно.

Та одоо энэ баримт бичгийн хуулбарыг өөртөө боловсруулж ашиглах боломжтой боллоо!

Алхам 2: Google маягтын тойм

Та энэ аппликешны өөрийн хувилбартай болсон тул эргэн тойрноо харцгаая.

Таны Google Маягтыг олон төрлийн зүйлийг хүлээн авахаар тохируулсан болно. Гэсэн хэдий ч цамц, өмд, даашинз, гутал бүгд өөр өөр хэмжээтэй байдаг. Тиймээс энэ маягтын өөр хэсгийг таны оруулсан файлын хэлтэс дээр үндэслэн бөглөх болно. Миний (Эрэгтэй өгүүллийн) загварт би 5 өөр хэмжээтэй ангилал үүсгэсэн. (Эмэгтэйчүүдийн нийтлэлийн талаар энд дарна уу, өөр олон зүйл байгаа).

Хэмжээ бүрдүүлэх хэсэг бүрийн дор би цуглуулах параметр бүрийн хувьд өвөрмөц гарчиг үүсгэсэн. Бид мэдээллийн санд "Хэмжээ" нэртэй олон баганатай байхыг хүсэхгүй байна, эсвэл ийм хэмжээтэй хувцас ямар төрөлд хамаарахыг бид тодорхойлох боломжгүй болно.

Хэсэг бүрийн төгсгөлд хэрэглэгчийг энэ маягтын эцсийн хэсэгт оруулна: Байршил. Би хувьдаа Хими цэвэрлэгч, угаалгын газар, тэдний оронд байгаа эсвэл найздаа зээлүүлэхийг зөвшөөрсөн зүйлсийг тодорхойлохын тулд Байршлыг нэмэхээр шийдсэн. Энэ нь надад эмх цэгцтэй байх боломжийг олгож, хаа нэгтээ хувцас дутсан юм шиг санагдахгүй байна.

Би анхнаасаа хэлсэнчлэн энэ төслийг сая өөр хэлбэрээр өргөжүүлж болно. Та үүнийг бараа материал, илүү нарийвчлалтай зохион байгуулалтын хэрэгсэл эсвэл хувцас хатуу зээл авах зорилгоор ашиглаж болно. Таны нэмж болох талбар, хэсгүүд төгсгөлгүй тул миний хэлбэрт байгаа зүйлээр хязгаарлагдах хэрэггүй. (Эмэгтэйчүүдийн нийтлэлийг энд дарж үзнэ үү)

Та өөрийн хэдэн зүйлийг байршуулахаасаа өмнө зохих ёсоор ирүүлэхийн тулд дараагийн алхам руу орцгооё.

Алхам 3: Google скриптүүд: (Server Code.gs) Эхлээд өгөгдөл ба кодыг харна уу

Google Хүснэгтийн баримт бичиг дээр дарахад та олон тооны өгөгдлийн баганыг (мөн жагсаалтад үлдээсэн зарим мөрүүдийг) харах болно. Маягт илгээх явцад зарим хэсгийг алгасдаг бөгөөд энэ нь зарим баганад байхгүй байгаа мэдээллээс харагдаж байна. Гэхдээ эдгээр зүйлсийн засварыг илүү сайн хянахын тулд ID, Default Location, Who, Updated зэрэг нэмэлт багануудыг нэмж оруулсан болно.

Энэхүү мэдээллийн санг дайран өнгөрөхдөө өвөрмөц танигчийг зөвшөөрөхийн тулд та маягтыг илгээхэд ID талбар бий болно. Энэ талбарыг бий болгохын тулд бид Tools> Script Editor дээр дарж скрипт засварлагчийг үзэх болно.

Скрипт засварлагч нээлттэй байгаа үед та энэ шинэ цонхны хажуугийн хэсэгт 8 баримт бичиг байгааг анзаарах болно. Эдгээр баримт бичиг нь арын процесс, урд талын дэлгэц, урд талын функцийг хянахад тусалдаг. Бид тус бүр рүү орох болно (хэрэв та тойрч байвал), гэхдээ яг одоо Серверийн код дээр дарна уу.

Server Code.gs файлд олон функц байдаг:

onSubmit (e), onOpen (), doGet (), үүнд (fileName), openApplication (), openLaundryApp (), changeValueOnSubmit (e), setIDOnSubmit (e) орно.

onSubmit (e) - Энэ функцийг Google Form илгээх үед ажиллуулах анхны функц болгон тохируулах болно. Та энэ функц дотор өөр функцүүдийг байрлуулж олон янзын процесс явагдах боломжтой болно.

onOpen (e) - Google Хүснэгт нээгдэх үед энэ функцийг дууддаг. Энэ нь програмын линк, үзэгдэлд хурдан хандах боломжийг олгодог цэсийн шинэ сонголтыг бөглөнө.

doGet ()- Энэ функцийг Вэб апп хаягийн дуудлагад дууддаг. Хэрэглэгч нийтлэгдсэн Вэб Апп руу нэвтэрч ороход энэ код нь тухайн хуудсанд юу харуулахыг хэлж өгнө. Энэ тохиолдолд энэ нь Application.html баримт бичиг юм.

include (fileName) - Энэ функц нь HTML хуудасны дотор бусад документыг уншиж, агуулгыг нь өөр хуудсан дотор зохих HTML формат руу оруулах зорилгоор ашигладаг. Бид үүнийг CSS.html болон JS.html файлууддаа ашигладаг.

openApplication () ба openLaundryApp () - Эдгээр функцууд нь хэрэглэгч Google Sheet хэрэгслийн мөрөнд нэмсэн цэсийн товчлуур дээр дарахад ажиллах кодыг агуулдаг.

changeValueOnSubmit (e) ба setIDOnSubmit (e)- Эдгээр нь бидний одоо авч үзэх функцууд юм. Тэд маягтыг анх илгээхдээ анхдагч утгатай тодорхой талбаруудыг шинэчлэх үүрэгтэй.

Алхам 4: OnFormSubmit -ийг идэвхжүүлэх

ChangeValueOnSubmit (e) ба setIDOnSubmit (e) гэсэн эдгээр хоёр функцийг маягт оруулах хэрэглэгчийн үйлдэлтэй холбох шаардлагатай. Үүнийг хийхийн тулд бид Trigger -ийг идэвхжүүлэх хэрэгтэй.

Бид засварлах> Одоогийн төслийн триггерүүд дээр дарж идэвхжүүлэгчийг идэвхжүүлнэ. Энэ нь Google Developer Hub -ийг нээнэ.

Гох самбарын баруун доод буланд Триггер нэмэх товч байна. Энд дар.

Одоо бид маягтыг илгээх үед ажиллуулах функцийг тохируулах болно. Манай тохиолдолд би onSubmit () функцын дотор байрлуулсан олон функцтэй байдаг (changeValueOnSubmit (e) ба setIDOnSubmit (e)), тиймээс би зөвхөн 1 триггерийг тохируулах ёстой. Тиймээс бид onSubmit () -ийг сонгож, энэ өдөөгчийг Form илгээх дээр ажиллуулахаар тохируулах болно.

Бидэнд Google Sheet -ийг өвөрмөц танигчаар бөглөх, анхдагч утгыг тохируулах ажлын маягт байна.

Та одоо Google Form ашиглан өөрийн зүйлээ байршуулах боломжтой. (Демо утгууд аль хэдийн орсон байгаа тул үүнийг үргэлжлүүлэх шаардлагагүй). Одоо бид хэрэглэгчийн интерфейс рүү орох болно.

Алхам 5: Хэрэглэгчийн интерфэйсийг тохируулах

ТАВТАЙ! Бид эцэст нь таны хүссэн хэсэг болох Хэрэглэгчийн интерфэйсэд хүрлээ !!!!

Анх харахад энд юу ч алга. Бид хараахан дуудлага хийгээгүй байна. Хуудсыг илүү хурдан ачаалахын тулд би таны бүх зүйлийг агуулсан эхний хуудсыг дарах ёсгүй бөгөөд үзэхийг хүссэн зүйлээ хурдан дарах боломжийг олгосон. Ийм учраас үндсэн агуулгын талбарт ямар ч зүйл байхгүй, хажуугийн хэсэгт шүүлтүүр байхгүй байна. Бүгд дээр дарж мэдээллийн санд юу байгааг харцгаая.

Бид одоо мэдээллийн сан дахь бүх зүйлээ үндсэн агуулгын талбарт ачаалж байна. Та зураг, ID дугаар, өнгө, хэмжээ, байршлыг харах болно. Байршлын талбарыг яг энд шинэчлэх боломжтой! Хэрэв та зээл авахаар шийдсэн бол энэ сонголтыг сонгож, шүүгээ, хувцасны шүүгээ, угаалгын газар байрлуулж болно.

Манай хажуугийн самбар дээр шинэ асуулгад орсон хувцас бүрийн хувьд боломжтой бүх талбар байдаг. Энэ хажуугийн самбар дээр 20 өөр хэмжээтэй тохируулгатай байхыг төсөөлөөд үз дээ, энэ нь тийм ч үр дүнтэй биш байх болно, тиймээс Дагалдах хэрэгсэл дээр дарж хайлтаа нарийсгая.

Одоо бид Дагалдах хэрэгслүүдийг ачаалж дууссаны дараа хажуугийн самбарыг харна уу. Энэ нь энэ асуулгын бүх зүйлд хамаарах параметрүүд тул үүнийг зөвхөн 3 талбарт тохируулсан болно. Би өнгөөр нь ангилах гэж байна. Өнгө дээр дарснаар доош унах хайрцаг гарч ирнэ. Энд би хүссэн өнгөөрөө бичээд дараа нь сонгож болно, эсвэл хэрэв би сонголтоо шууд харвал үүнийг дарна уу. Энэ жагсаалд би Улаан сонгосон. Энэ хажуугийн доод хэсэгт байрлах Шүүлтүүрийг дарна уу, үндсэн агуулга нь улаан өнгийг өнгө параметр болгон тохируулсан зүйлсийг харуулах болно.

Өмнө нь би энэ мэдээллийн сан нь зээлээр болон угаалгад байгаа зүйлсээ удирдахад тусалдаг гэж хэлсэн. Үүнийг бага зэрэг хялбар болгохын тулд энэ үндсэн хуудсан дээрх унах байршил бүрийг гараар дарахын оронд би Угаалгын горимыг үүсгэсэн. Google Sheet хуудас руу буцаж очоод Апп харах хэсэгт угаалгын горимыг харах болно. Энэ сонголт нь зөвхөн Угаалгын газрын байршилтай зүйлсийг харуулдаг жижиг загварыг татах болно. Би одоо эдгээр бүх зүйлийг Default гэж тэмдэглэх боломжтой бөгөөд энэ нь тэдгээрийг ихэвчлэн хадгалдаг байршилд нь буцааж байрлуулах болно.

Алхам 7: Төсөл дууссан

БАЯРЛАЛАА

Зүгээр л өөрийн мэдээллийн хэрэгслийг удирдах мэдээллийн сантай болохыг хүсч буй хүмүүст онлайнаар зохион байгуулагчдаа тавтай морилно уу. Энэхүү програмын ард байгаа кодыг сонирхож буй хүмүүст зориулав. Намайг задлахад наашаа байгаарай.

*Та мэдээллийн баазад дор хаяж нэг өөрийн зүйл оруулсны дараа тестийн зүйлийг устгах эрхтэй. (Хэрэв та үлдвэл би дараа тайлбарлах болно).

Алхам 8: Алхам 1: Арын код (Server Code.gs)

Өмнө нь бид Server Code.gs файлыг нээсэн бөгөөд би функц бүрийг хурдан буулгаж өгсөн бөгөөд тэдний зорилго нь таны дөнгөж тохируулсан зүйл бүрт үйлчлэх явдал байсан боловч одоо бид эдгээр функц, хэрэгслүүдийг задлах болно. Энэ кодыг амжилттай болгохын тулд.

1) Хүснэгт дайрах:

var ss = SpreadsheetApp.getActiveS spreadsheet (); var sheet = ss.getSheetByName ("Form Responses 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; var max = 15; var min = 5; CellValue = CellValue + Math.round ((Math.random ()* (хамгийн их - мин) + мин)); e.source.getActiveSheet ().getRange (range.getLastRow (), ColA).setValue (CellValue); changeValueOnSubmit (e);

• Хэрэглэгч өөртөө дор хаяж нэг утга оруулах хүртэл демо утгыг хүснэгтэд үлдээхийг би өмнө нь хүсч байсан. Энэ нь Auto ID үүсгэгч нь бөглөхдөө өгөгдлийн сан дахь хамгийн сүүлийн утгад тулгуурладагтай холбоотой юм.
• Би сүүлийн 2 -оос сүүлчийн мөрийг авчирдаг, учир нь сүүлийн мөр бол бидний шинэ утга, ID -ийн 1 -р багана юм.
• Дараа нь би санамсаргүй байдлаар 5 -аас 15 хүртэлх тоог гаргаж, хамгийн сүүлийн утга руу нэмнэ. *
• Эцэст нь би энэ утгыг сүүлчийн эгнээний ID баганад байрлуулна.
• Дараа нь бид changeValueOnSubmit (e) функцийг дуудна.

* Ирээдүйд шошго хийх, Google Home-ийг нэгтгэхийн тулд 5-15-г сонгосон бөгөөд ингэснээр дугаар нь өлгүүр, хувцасны хаяг, баркодод төөрөгдөл үүсгэхгүй байх болно.

3) URL -ийн утгыг өөрчлөх:

var DataChange = e.namedValues ["Item Picture"]; var DefaultLocation = e.namedValues ["Та энэ хувцасны нийтлэлийг хаана хадгалдаг вэ?"]; var ColD = ColumnID _ ("Item Picture") +1; var ColLoc = ColumnID _ ("Анхдагч байршил")+1; DataChange = DataChange.toString (). солих ("нээлттэй?", "uc? export = харах &"); e.source.getActiveSheet ().getRange (e.range.rowStart, ColD).setValue (DataChange); e.source.getActiveSheet ().getRange (e.range.rowStart, ColLoc).setValue (DefaultLocation);

• Google Маягтаар зураг оруулахдаа Google Хүснэгтэд оруулсан URL нь бодит баримт бичгийн линк болно. Бидний хувьд, бид HTML хуудас үүсгэж байхдаа линкийг зүгээр л дүрс болгохыг хүсч байна.
• "Нээлттэй?" URL -ийн "uc? export = view &" гэсэн хэсгийг бид оронд нь зургийн холбоос үүсгэсэн.
• Бид энэ шинэ утгыг одоо байгаа Item Picture линкийн байршилд дахин байрлуулах болно.
• Мөн би тухайн зүйлийн "Анхдагч байршил" ба "Одоогийн байршил" -ыг мэдээллийн санд ижил зүйл болгож тохируулж байна. Энэ нь миний Угаалгын горимыг ашиглахыг оролдоход туслах болно.

• Бид үүнийг дараагийн хуудсанд оруулах болно, гэхдээ энэ бол миний үүсгэсэн ColumnID_ () функцийг бидний анхны харц юм.

  Энэ функц нь баганын нэрийг ашиглан баганын бүхэл тоонд хөрвүүлэхэд ашигладаг бөгөөд энэ нь нэр биш баганын дугаар шаарддаг хүрээний дуудлага хийхэд тустай байдаг

4) SpreadsheetApp.getUI ()

• Хоёрдахь зурган дээр та Google Sheet дээр Toolbar цэсийн нэмэлтийг үүсгэхэд ашиглаж байсан SpreadsheetApp.getUI () -ийг ашиглаж болно.
• . GetUI () функц нь угаалгын горимд ашигладаг вэбсайтын интерфэйсийг хурдан холбох линкийг ашигладаг.

5) HTMLService

• Энэ кодонд хоёр төрлийн HTMLServices ашиглагддаг: Template болон HTMLOutput
• Загвар нь кодыг HTML кодын дотор оруулах боломжийг олгодог тул хуудсыг дуудах үед серверээс ирж буй мэдээллийг бөглөх боломжтой болно.
• HTML Гаралт нь энгийн HTML хуудсыг харуулдаг.
• Бидэнд олон HTML файл үүсгэж, тэдгээрийг нэг загвартай HTML файлд нэгтгэх боломжийг олгодог () арга байдаг бөгөөд энэ нь файлын агуулгыг мөр биш HTML форматаар буцааж өгдөг.

Би Google Апп дотор эх код, функцийг хэрхэн тайлбарлах талаар танилцуулах үүднээс Google App Scripts Documentation гэх мэт бичиг баримтыг хавсаргасан болно.

Алхам 9: Алхам 2: Арын код 2-р хэсэг (Server Calls.gs)

Одоо бид Server Calls.gs хаягийг орууллаа. Эдгээр функцуудыг голчлон HTML JavaScript -д ашигладаг тул Server Code.gs дээр байрладаг арын хэсэгт ашиглагддаг кодоос тусгаарлагдсан болно.

Зураг 1) Глобал хувьсагчид:

Зураг 2) зүйлийг татаж авах:

Зураг 3) fetchItemsQry

Зураг 4) Шүүлтүүрийн зүйлс

Зураг 5) fetchFiltersWithQry

Зураг 6) ColumnID ба CacheCalls

Эдгээр тус бүрээр ярих зүйл маш их байна. Кодыг задалж, юу болж байгааг тайлбарлахын тулд надад арай илүү бичих зай хэрэгтэй байсан. ServerCalls.gs кодын задаргааны баримт бичгийг хавсаргав

Энэ баримт бичиг нь Google App Script -ийн баримт бичиг шиг тохируулагдсан бөгөөд үүнтэй төстэй объектуудын холбоосыг хүртэл хийдэг.

Алхам 10: Алхам 3: HTML код (Application.html)

HTML код нь Instructable -ийн харилцах цонхонд маш их сэтгэл дундуур байдаг. Тиймээс дээрх зургуудыг дагана уу.

1) Application.html хуудасны толгой хэсэгт бид гарчиг үүсгээд CSS.html хуудсыг ачаалахыг хүснэ үү.

*Загварчилсан HTML хуудас учраас бид Server Code.gs -д байгаа өмнө дурдсан include (pageName) аргыг ашиглан одоогийн дэлгэцийг үймүүлэхгүйгээр энэ баримт бичигт илүү их код нэмж болно.

Толгойн гол хайрцгийг мөн энэ зурган дээрээс олж болно. Та толгойгоо энд өөрчилж "[Таны нэр] -ийн хувцасны шүүгээ" эсвэл энэ хуудсыг танихыг хүссэн бусад зүйлээ оруулах боломжтой.

2) Толгойн доор яг манай дээд навигацийн самбар байна.

Энэхүү навигацийн мөрөнд манай Google Хүснэгтийн нийтлэлийн хуудсан дээр жагсаасан бүх төрлийн нийтлэл багтсан болно.

Эдгээр зүйлсийн массивыг авахын тулд доторх функцийг дууддаг. Дараа нь эдгээр сонголт бүрийг цэсийн товчлуур болгон оруулахын тулд гогцоо ажиллуулж, үйлдлийн кодоор бөглөсөн тул хэрэглэгч цэсийн товчлуур дээр дарахад холбогдох зүйлс биеийн хэсэгт гарч ирнэ.

3) Үндсэн хэсэг.

Энэ хэсэгт 4 хэсэг байдаг. Текст гаралт, хажуугийн шүүлтүүр, үндсэн биеийн зураг, JS орно.

Текстийн гаралт нь хэрэглэгчийн сонгосон цэсийн сонголтыг дурдахын оронд яг одоо ямар төрлийн зүйл хайж байгааг хурдан харах боломжийг олгодог.

Хажуугийн самбарын шүүлтүүр нь хэрэглэгчийн сонгосон зүйлийн төрөлд боломжтой олон шүүлтүүрийг агуулдаг. Эдгээр шүүлтүүрүүд нь энэ ангилалд хамаарах бүх сонголтуудыг тусгасан бөгөөд хичнээн зүйл тухайн ангилалд багтдаг. Энэ хажуугийн самбарыг JavaScript кодоор дүүргэсэн болно (үүнийг дараа хэлэлцэх болно).

Үндсэн хэсэг нь одоогоор хоосон байна, гэхдээ шүүлтүүрүүдийн нэгэн адил хэрэглэгчийн ангилал, JavaScript код энэ талбарыг дүүргэсний дараа тухайн зүйлийн ID, Өнгө, Хэмжээ, Байршлын талаархи дэлгэрэнгүй мэдээллийг агуулсан хайрцгаар дүүрэх болно.

Эцэст нь (JS) багтдаг бөгөөд үүнийг дараагийн алхам дээр авч үзье.

Алхам 11: Алхам 4: JavaScript код (JS.html)

Хэрэв та Серверийн кодыг хүнд хэсэг гэж бодож байсан бол үүнийг ачаалаарай.

Энд бид HTML болон SeverCode -ийг хэрэглэгчийн харилцан үйлчлэлтэй хослуулдаг. Товшсон аливаа зүйлийг зохих өгөгдлийг олж авахын тулд энд боловсруулж, унших боломжтой хэлбэрээр буцааж өгөх ёстой. Тиймээс анхны дуудлагуудаа авч үзье.

Скрипт дууддаг: Би энэ төсөлд 3 өөр номын сан ашиглаж байна; jquery, bootstrap, тусгай bootstrap сонгосон нэмэлт. Эдгээр номын сан нь объектуудыг форматлах, HTML код доторх элементүүдийг хялбархан дуудах боломжийг олгодог.

Миний дараагийн чухал JavaScript мөр бол доор байна:

$ (баримт бичиг).keypress (функц (үйл явдал) {if (event.which == '13') {event.preventDefault (); }});

Энд би ямар ч хэлбэрийг идэвхжүүлэхийн тулд enter түлхүүрийг идэвхгүй болгож байна. Энэ тохиолдолд Google Вэб аппликейшнд зөвхөн нэг хуудасны хаягийг өгдөг. Оруулах товчлуур нь HTML хаягаар өгөгдөл нэмж, хэрэглэгчийг дахин чиглүүлэхийг оролдох болно. Үүнийг идэвхгүй болгосноор та JavaScript кодоо бүх ажлыг хийхийг зөвшөөрдөг.

removeFilters функц () {google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure). ServerRemoveFilters (); }

updateDBlocation функц (id, утга) {google.script.run.withSuccessHandler (allGood).withFailureHandler (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 +"

");} функц FailDBUpdate (алдаа) {$ ("#мессеж-хайрцаг "). html ("

Та байршлыг өөрчлөх эрхгүй байна. АЛДАА: " + error.message +"

"); $ (". байршил сонгоно "). prop ('идэвхгүй', 'идэвхгүй');}

Би байршлын функцийг ажиллуулахад амжилтанд хүрэхийн тулд маш энгийн консолын бүртгэлийг үүсгэсэн бөгөөд үүнийг allGood () гэж харж болно.

Алдаа засах үед эдгээр хоёр функц нь jQuery дуудлага ашиглан "мессежийн хайрцаг" ID бүхий HTML обьектийг ашиглан хэрэглэгч харах боломжтой алдааны мессежийг гаргадаг.

Одоо хүнд хэцүү ажил руугаа орцгооё

Алхам 12: Алхам 5: JavaScript код дарах үйлдэл (JS.html)

Дээд цэсний мөрөнд өгүүллийн төрөл тус бүрийн сонголт байдаг. Тэдний товчлуур дээр ажилладаг функц нь:

filterType функц (нийтлэл, id) {$ ("ul.navbar-nav li.active"). removeClass ("идэвхтэй"); $ ("#currentArticle"). html ("// HTML ЭНД ЭНД");

updateSideBar = үнэн;

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 кодыг Arrays хэлбэрээр нэмж оруулснаар кодыг задалж, itemData -ийг хаана оруулахыг унших, харахад хялбар болно.

Зүйл бүрийн гогцоонд би Default, timestamp, picture URL гэх мэт тайлбараас харахыг хүсэхгүй байгаа талбаруудыг устгаж байна. Зургийн URL -г тайлбараас хасдаг, учир нь үүнийг хаяг руу href болгон нэмж оруулсан болно. Энэ мэдээллийг цуглуулсны дараа jQuery.append () функцийг ашиглан үндсэн байгууллага руу илгээдэг.

Бүх зүйлийг хуудсан дээр нэмсний дараа энэ зүйлийн асуултыг 2 -р зурагт үзүүлсэн шиг шүүлтүүрийн сонголтуудыг эрэмбэлэх, буцаахын тулд Серверийн код руу дахин илгээнэ.

ЗУРАГ 2 (SideBar -ийг шинэчилж байна)

UpdateItems () функцтэй маш төстэй, бидэнд HTML кодын массивууд болон бүх шүүлтүүрийн сонголтуудын давталт байна. Зөвхөн мэдэгдэхүйц өөрчлөлт бол jQuery.selectpicker ('refresh') юм. Энэ функц нь бидний сүүлчийн алхамд оруулсан скрипт номын сангаас гардаг. Энэ нь програмистад энгийн HTML сонгож бичих боломжийг олгодог бөгөөд номын сан үүнийг хайх боломжтой функц болон CSS кодыг багтаасан байдлаар шинэчлэх боломжийг олгодог.

ЗУРАГ 3 (хажуугийн самбараар шүүж байна)

Эцэст нь бидэнд updateFilter (formData) функц байна. Энэ нь хажуугийн самбараас маягтыг илгээх үед ашиглагддаг. Бид jQuery функцийг ашиглаж эхэлдэг.serializeArray () энэ нь бидний тохиолдолд тодорхойлсон элементийн HTML кодыг маягтаар уншиж, сервер рүү илгээх мөр дэх утгыг буцаана. Мөн бид 1 -р зураг дээрх үйл явцыг дахин эхлүүлж байна.

Алхам 13: Төгсгөл …. Эцэст нь

За энд байна. Онлайнаар хувцасны шүүгээ хийх, эсвэл өөрийн төслийг өргөжүүлэхийн тулд миний Google Скриптэд бий болсон функцийг ашиглахад туслах бүрэн, нарийвчилсан тайлбар.

Энэ бол энэ төслийг кодлох аялал байсан (мөн энэ зааварчилгаагаар дамжуулан баримтжуулсан болно), гэхдээ энэ үйл явц надад таалагдсан бөгөөд танд бүтээгдэхүүн таалагдах болно гэж найдаж байна. Майкл Жордан "Тааз бол дээвэр" гэж хэлсэн шиг тохируулга хийсэн хэн нэгнээс хариу сонсох дуртай бөгөөд энэ аппликешнд хязгаар байхгүй гэдгийг би хүлээн зөвшөөрч байна.