हमने कार्यालय में दोपहर के भोजन के क्रम में सुधार किया (सर्वर तक पहुंच के बिना)

सभी को नमस्कार।

मैं एक ऑफिस में काम करता हूँ। सॉफ्टवेयर डेवलपर। और कभी-कभी मैं खाती हूं। हाँ, हर दिन। नियोक्ता हमें लंच की आपूर्ति करता है - कर्मचारी कल के लिए दोपहर के भोजन का आदेश देते हैं, और कल को लंच का आपूर्तिकर्ता कर्मचारियों को जो आदेश देता है उसे लाता है। क्या आदेश दिया गया था और क्या लाया गया था यह हमेशा मेल नहीं खाता है, लेकिन यह मामला नहीं है। दोपहर के भोजन के आदेश पृष्ठ पर दोपहर का भोजन दिया जाता है। लेकिन ...

लेकिन पहले, लंच ऑर्डर पेज कैसे बनता है, इसके बारे में: सप्लायर एक सप्ताह के लिए मूल्य सूची के साथ एक एक्सएलएस फ़ाइल भेजता है।


आपूर्तिकर्ता द्वारा भेजी गई उदाहरण मूल्य सूची

रात्रिभोज के लिए जिम्मेदार व्यक्ति हमारी कंपनी के धनुष में किसी व्यक्ति द्वारा विकसित उपयोगिता के माध्यम से पर्स करता है, इसे एक ऐसे रूप में अनुवाद करता है जिसे हमारा कॉर्पोरेट पोर्टल प्रदर्शित कर सकता है। और वह इसे प्रदर्शित करता है ...


आदेशित रात्रिभोज के साथ स्क्रीनशॉट


लंच ऑर्डर करने वाले पेज का स्क्रीनशॉट

पदों को असुविधाजनक रूप से श्रेणियों में विभाजित किया जाता है। नाम और रचना के बारे में जानकारी पूर्ण पाठ में है और इसे नेविगेट करना मुश्किल है।

मैं यह समझना चाहता हूं कि ऑर्डर करना बेहतर नहीं है, और आप क्या कोशिश कर सकते हैं, क्योंकि अन्य इसे पसंद करते हैं। यही है, मुझे एक रेटिंग चाहिए। मैं टेलीग्राम पर भी अपना आदेश प्राप्त करना चाहता हूं ताकि मुझे यह याद न रहे कि मैंने भोजन कक्ष में क्या आदेश दिया था।

तो लक्ष्य स्पष्ट हैं। मुझे तुरंत कहना चाहिए: मेरे सहयोगी और मेरे द्वारा लिया गया रास्ता सबसे सही और तर्कसंगत है। फिर भी: यह वास्तुकला / सुरक्षा / समर्थन / गलती सहिष्णुता के मामले में एक पूर्ण खेल है। लेकिन जो हो गया है वह बड़ा हो गया है।

हमारे पास सर्वर तक पहुंच नहीं है, इसलिए आप उपयोगकर्ता स्क्रिप्ट के साथ केवल पृष्ठ की उपस्थिति बदल सकते हैं। लेकिन रेटिंग के बारे में क्या? डेटाबेस तक पहुंच भी नहीं है। खैर, हमें टेलीग्राम के साथ ऑर्डर प्रोसेसिंग, रेटिंग और इंटरैक्शन के लिए एक सर्वर की आवश्यकता है। यह भूमिका NodeJS सर्वर द्वारा ली गई थी।

सर्वर साइड

मैं सर्वर का ख्याल रखूंगा, और एक सहकर्मी उपयोगकर्ता की स्क्रिप्ट का ध्यान रखेगा जो पृष्ठ पर कार्यक्षमता जोड़ता है। हम नोडज सर्वर लेते हैं, एक्सप्रेस कनेक्ट करते हैं, MySQL जोड़ते हैं। शीर्ष पर सीक्वेलाइज लगाएं । और हम टेलीग्राम के साथ नोड-टेलीग्राम-बॉट-एपी के साथ बातचीत करेंगे:

//    const app = express(); // ... //   //    app.get("/dinners/user_menu", dinner.getUserMenu); //      app.get("/dinners/r/:id", dinner.getPersonalRatings); //   app.post("/dinners/r/:id", dinner.setRating); //      Telegram app.post("/dinners/resend/:id", dinner.resendMessage); //      app.post("/dinners/order", dinner.order); //  ,      app.post("/dinners/days", dinner.setDinnerDays); 

संक्षेप में कार्यक्षमता के बारे में:
पथ / रात्रिभोज / user_menu उपयोगकर्ता स्क्रिप्ट लौटाता है:

 res.sendFile(__dirname + '/public_html/user_script.js'); 

यह उन सहयोगियों को विचलित न करने के लिए किया जाता है जो स्क्रिप्ट के नए संस्करण को स्थापित करके इसका उपयोग करते हैं। सही किया - इसे सर्वर पर फेंक दिया - सभी ने अपडेट किया।

हां, मुझे पता है कि सुरक्षा के दृष्टिकोण से यह खराब है, लेकिन कार्यक्षमता स्वयं महत्वपूर्ण नहीं है और हम उस सर्वर पर विचार करेंगे, जिस पर स्क्रिप्ट काफी सुरक्षित है।

इसके अलावा, पथ / रात्रिभोज / आर /: आईडी के साथ, आप सभी पदों के लिए एक रेटिंग प्राप्त कर सकते हैं और रेटिंग को बचा सकते हैं, अर्थात, व्यंजनों के लिए वोट करें।

पथ / रात्रिभोज / पुनः भेजें /: आईडी टेलीग्राम पर एक संदेश भेजने के लिए कार्य करता है। संदेश का पाठ क्लाइंट पर उत्पन्न होता है, केवल टेलीग्राम के साथ सर्वर पर बातचीत होती है:

 const parseMode: TelegramBot.SendMessageOptions = {parse_mode: "HTML"}; await this.bot.sendMessage(telegramId, htmlMessage, {...options, ...parseMode}); 

उसके बाद, बॉट ऑर्डर के साथ एक संदेश भेजता है।



अगला, पथ / रात्रिभोज / आदेश के साथ , आदेश सहेजा जाता है। चूंकि मूल ऑर्डर अनुरोध निर्धारित करना मुश्किल है ("सेव" बटन पर क्लिक करने के बाद, ऑर्डर पुष्टिकरण बटन के साथ एक अलर्ट दिखाई देता है), ऑर्डर पेज लोड होने पर ऑर्डर के साथ सर्वर को एक अनुरोध भेजा जाता है (और साइट पर पूरे ऑर्डर सिस्टम को 2 पेजों में विभाजित किया जाता है - ऑर्डर पेज और मेनू पेज - एक विशिष्ट दिन के लिए व्यंजनों का चयन - अर्थात, ऑर्डर का गठन)। आदेश पृष्ठ में प्रवेश करने पर हर बार अनुरोध भेजने के लिए यह बेतहाशा तर्कसंगत नहीं है, लेकिन स्नैप के लिए कोई बेहतर विकल्प नहीं था।

अंत में, / रात्रिभोज / दिन का पथ उन दिनों को निर्धारित करता है, जिस पर दोपहर के भोजन का आदेश दिया जाता है। कार्यक्षमता का यह हिस्सा एक अपूर्ण आदेश के बारे में अनुस्मारक के सही संचालन के लिए प्रकट हुआ है - आपको यह जानना होगा कि आदेश का अगला दिन क्या है (सप्ताह के मध्य में सप्ताहांत और छुट्टियां हैं)। उत्पादन कैलेंडर के कार्यान्वयन को लेने के बजाय, मैं केवल आदेश पृष्ठ पर तारीखों को पार्स करता हूं, जहां काम करने वाले और गैर-कार्य दिवस पहले से ही चिह्नित हैं (आप गैर-कार्य दिवस के लिए आदेश नहीं दे सकते हैं)। पोर्टल पर गैर-कार्य दिवसों को आईहोलिड क्लास के साथ चिह्नित किया गया है:

 //     const trToday = $(".dinner_today")[0]; const tbodyAllDays = $(trToday).parent(); const dinnerDays = []; $(tbodyAllDays).children().each(async function() { if ($(this).hasClass("isHoliday")) { return; } const itemMenuDate = $(this).find("> td:first-child").text().substring(0, 10); dinnerDays.push(itemMenuDate); // ... }); await sendRequest("POST", `https://****/dinners/days/`, {days: dinnerDays}); 

अरे हाँ, लेने के लिए jquery का उपयोग करें। पेज ट्री में तल्लीन करना बहुत सुविधाजनक है।

टेलीग्राम बॉट

पूरे ऐड-ऑन का एक और हिस्सा टेलीग्राम बॉट है।


ऐसी कार्यक्षमता के साथ

आईडी प्राप्त करना एक ऐसी पहचान प्रणाली है। टेलीग्राम में userId के साथ एक विशिष्ट स्क्रिप्ट पर एक उपयोगकर्ता स्क्रिप्ट को जोड़ने के लिए।

आज के लिए आदेश देखें, आदेशों की सूची देखें (अंतिम 5), एक अनुस्मारक सेट करें।
लंच स्वचालित रूप से हर दिन एक ही समय पर आपूर्तिकर्ता को भेजा जाता है, इसलिए एक निश्चित समय से पहले ऑर्डर देना महत्वपूर्ण है, कहते हैं, 13:00।

उसके बाद, ऑर्डर करने की क्षमता अवरुद्ध हो जाती है।

अनुस्मारक:


बॉट एक अनुस्मारक समय चुनने का अवसर प्रदान करता है: 9, 10 या 11 घंटे।

इसके अलावा, यदि एक अनुस्मारक के बाद आपने आदेश नहीं दिया है, तो हर अगले 10 मिनट में बॉट आपको ऑर्डर याद दिलाएगा, जब तक आप इसे ऑर्डर नहीं करते, या जब तक कि ऑर्डर अवरुद्ध नहीं हो जाता।

यह क्रोन कार्य ( नोड-शेड्यूल का उपयोग करके) किया जाता है:

 schedule.scheduleJob('*/10 9-13 * * 1-5', async function() { // ... }); 

ग्राहक भाग। मेन्यू

मैं दोहराता हूं कि आपूर्तिकर्ता द्वारा भेजे गए मेनू आइटम के पाठ के साथ संयोजन में वर्तमान इंटरफ़ेस बस भयानक है (स्क्रीन 2 देखें)। और एक बिंदु पर, आप नीरस ठोस और थोड़ा उपयोगी पाठ के टन में कुछ भी देखना बंद कर देते हैं।

इंटरनेट के माध्यम से खोज करने के बाद जो हमें मदद कर सकता है, हम कस्टम ग्रीसीमोकी स्क्रिप्ट के लिए एक बहुत अच्छा प्लगइन भर आए, और उन्होंने इसका उपयोग करने का फैसला किया।

सबसे पहले, हम एक उपयोगकर्ता स्क्रिप्ट बनाते हैं और कॉर्पोरेट पोर्टल और सर्वर के साथ संवाद करने का अधिकार देते हैं, जिस पर रेटिंग और अनुरोध भेजने की क्षमता को बोल्ट किया जाता है।

 // @include http://****.int/* // @include http://****/* // @grant GM.xmlHttpRequest 

साथ ही, लंच पेज को संशोधित करने के लिए, हमने jQuery का उपयोग किया, इसे // @require से जोड़कर

अब लंच पेज को फावड़ा देना शुरू करते हैं। पृष्ठ के HTML कोड को देखने के बाद, हम दोपहर के भोजन के टेबल की पहचान करते हैं, हमें तालिका मिलती है और इसे संशोधित करते हैं।

 const table = $(".dinner__innerData"); const categoryList = []; //      $(table).find(“tbody tr td:nth-child(2})”).each(function () { const text = $(this).text(); //           if (!categoryList.find(name => name === text)) { $(this).parent().before("<tr><th colspan='6'>" + text + "</th><th style='display:none'></th><th style='display:none'></th><th style='display:none'>0</th><th style='display:none'><span class='dish__amount'>0</span></th></tr>"); categoryList.push(text); } }); //      $(table).find(“thead th:nth-child(2)”).remove(); $(table).find("tbody tr td:nth-child(2)”).remove(); //     $(table).find(“tbody tr td:nth-child(2)”).after("<td></td>"); $(table).find(“thead th:nth-child(2)”).after("<th class='ui-state-default'></th>"); 

मैं यह नोट करना चाहता हूं कि लंच फॉर्मेशन पेज पर, ऑर्डर राशि की गणना करते समय, यह टेबल की सभी पंक्तियों पर विचार किया जाता है, ऑर्डर किए गए आइटम की संख्या को कीमत से गुणा किया जाता है। इन कारणों से, यदि आप श्रेणी के नाम के साथ एक पंक्ति जोड़ते हैं, तो सब कुछ टूट जाएगा ... मुझे इस पंक्ति के लिए शून्य मात्रा और राशि के साथ छिपे हुए कॉलम में प्रवेश करना था।

अब पाठ को साफ करने और डिश की रेटिंग पर जानकारी जोड़ने के लिए आगे बढ़ते हैं। सबसे पहले, कुछ सहायक कार्य करता है। रेटिंग में पकवान को ग्राम के रूप में किसी भी कचरा, बिना किसी विराम चिह्न और रिक्त स्थान के नाम से पहचाना जाता है। यही है, एक डिश जिसका नाम है "चिकन शोरबा अंडे के साथ (चिकन शोरबा, गाजर, प्याज, अंडे, साग)। 100 ग्राम में: प्रोटीन-3.43; वसा, 2.86; कार्बोहाइड्रेट 1,0; en.value-43.39kcal (200gr) "की पहचान" गुलदस्ता दही "के रूप में की जाती है। यह इस तथ्य के कारण है कि आपूर्तिकर्ता अतिरिक्त स्थानों, संकेतों और कुछ और में रेंग सकता है। जैसा कि अभ्यास से पता चला है, यह 90% मामलों में पकवान की सटीक पहचान करने के लिए पर्याप्त था, और हमने एक पूर्ण-पाठ खोज में परेशान नहीं करने और दर्ज करने का फैसला किया।

 /** *         * @param items   * @param tdText    * @return   */ function findByName(items, tdText) { tdText = clearTrash(tdText, true, true, true); return items.find(({clear_name}) => { return clear_name.trim().toLowerCase() === tdText; }); } /** *     * @param text  * @param clearDescr       * @param clearGrams    * @return    */ function clearTrash(text, clearDescr, clearGrams, clearSymbols) { //   ,       } 

और यह एक रेटिंग का गठन है:

 const table = $(".dinner__innerData"); const nameTd = $(table).find(“tr td:nth-child(2)”); for (let index = 0; index <= nameTd.length; index++) { const tdText = $(nameTd[index]).text(); //     const item = findByName(items, tdText); if (item) { let ratingTd = $(nameTd[index]).parent().find(“td:nth-child(2)”)[0]; //           let ratingText = "<i></i> " + parseFloat(item.avgrating).toFixed(1) + " (: " + item.orders + ", : " + item.ratingsCount + ")"; ratingText = item.persrating ? `<b><i></i> ${parseFloat(item.persrating).toFixed(1)} (: ${item.perscount})</b><br>` + ratingText : ratingText; //   $(ratingTd).css({ // getColorRating       background: getColorRating(item.avgrating) }).html(ratingText); } //           //   ,      const grams = getGrams(tdText); //     $(nameTd[index]).html(clearTrash(tdText, false, true, false)); //      ,       $(nameTd[index]).append("<br/><span></span>") .find("span") .append(grams) .css({"font-size": 10}); } 

और वही हुआ।


सहमत, बहुत अच्छे और अधिक सुविधाजनक?

ग्राहक भाग। वोट

अगला, आइए, ऑर्डर किए गए व्यंजनों के लिए वोट करने की क्षमता को जोड़ने के लिए आगे बढ़ें, साथ ही टेलीग्राम के लिए एक संदेश भेजें।


एक स्क्रिप्ट के बिना आदेश के साथ पृष्ठ

आदेशित व्यंजनों के पृष्ठ पर, रेटिंग जोड़ें:

 async function addRatingForm() { const table = $(".dinner__innerData"); const nameTd = $(table).find("tr td:nth-child(1)"); //   for (let index = 0; index <= nameTd.length; index++) { const tdText = $(nameTd[index]).text(); $(nameTd[index]).html(clearTrash(tdText, false, true, false)); } //       Telegram $(table).append("<tfoot><tr><th colspan='6' class='rating-buttons btn-group margT0' style='display: table-cell;'></tr></tfoot>"); $(".rating-buttons").prepend(`<input type="submit" value="" class="btn_primary rating-button">`); $(".rating-buttons").prepend(`<input type="submit" value=" Telegram" class="btn_primary send-button">`); //      await diableButtonByDate(); //      for (let index = 0; index <= table.length; index++) { $(table[index]).find("tbody tr td:nth-child(4)").after("<td class='ratingInputTd'><input id='horizontal-spinner' class='ui-spinner-input' style='width:20px;'></td>"); $(table[index]).find("thead th:nth-child(4)").after("<th class='ui-state-default'></th>"); } $(".ui-spinner-input").spinner({ max: 10, min: 1 }); //   $(".rating-button").click(sendRating); $(".send-button").click(sendTelegram); } /** *      ,    */ async function diableButtonByDate() { //             . //              const buttons = $(".rating-button"); for (let index = 0; index <= buttons.length; index++) { const button = $(buttons[index]); const date = button.parent().parent().parent().parent().parent().parent().find("> td:nth-child(1)").text().substring(0, 10); if (await GM.getValue(date)) { button.attr({disabled: "disabled"}); } } } /** *  */ async function sendRating(event) { event.preventDefault(); const items = []; //         $(this).parent().parent().parent().parent().find("tr").each(function () { const tdList = $(this).find("td"); const ratingInput = $(tdList[4]).find("input"); if (!ratingInput.length) { return; } items.push({ count: $(tdList[2]).text(), price: $(tdList[1]).text(), name: $(tdList[0]).text(), rating: ratingInput.val(), }); }); await sendRequest("POST", `https://****/dinners/r/${telegramId}`, items); const menuDate = $(this).parent().parent().parent().parent().parent().parent().find("> td:nth-child(1)").text().substring(0, 10); await GM.setValue(menuDate, true); location.reload(); } 

और यहाँ वही है जो हमें आउटपुट में मिला है:



हां - कोड भयानक है। हाँ - अनुकूलित नहीं है। और हाँ - कुछ जगहों पर अतार्किक। लेकिन खर्च किया गया समय न्यूनतम था, और कार्यक्षमता और सुविधा में काफी वृद्धि हुई।

लक्ष्य अपने और मेरे साथियों के लिए रात के खाने को अधिक सुखद बनाना था, और यह लक्ष्य, मेरी राय में, हासिल किया गया था।