👩🏿 💹 🙍🏼 सभी अवसरों के लिए अपना डैशबोर्ड कैसे प्राप्त करें? 👌🏼 🤘🏽 🧜🏽

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

डैशबोर्ड की आवश्यकता क्यों है?

Google Translate के अनुसार, डैशबोर्ड एक डैशबोर्ड है। दरअसल, उन डैशबोर्ड्स पर, जिनके बारे में लेख में चर्चा की गई है, आप जल्दी से विभिन्न मापदंडों में बदलाव की निगरानी कर सकते हैं - जैसे कि किसी हवाई जहाज के इंस्ट्रूमेंट पैनल पर। केवल एक हवाई जहाज के बजाय हमारे पास सशर्त स्टार्ट-अप होगा, और ऊंचाई, रोल और तापमान ओवरबोर्ड के बजाय - ऑनलाइन आगंतुकों की संख्या, सेवा के विभिन्न घटकों की स्थिति और सर्वर लोड।

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

डैशबोर्ड कैसे बनाएं?

हम Shopify के बॉल्स में विकसित मुक्त डैशिंग फ्रेमवर्क का उपयोग करके हमारे डैशबोर्ड का निर्माण करेंगे। एम्बेडेड आर्किटेक्चर का तात्पर्य है कि डैशबोर्ड में निम्न शामिल हैं:

"हाथ" से, अर्थात्, एक धरनेवाला, जो किसी दिए गए अंतराल पर आवश्यक डेटा एकत्र करता है;
"ब्रेन", वह है, एक पार्सर जो वास्तविक समय में इस डेटा को संसाधित करता है;
"एमफ्रेम" - एक फ्रंट-एंड, जिसके लिए ये डेटा एक सुंदर और स्पष्ट तरीके से प्रदर्शित होते हैं।

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

हर कोई अशोक के अनुसार

हेरोकू मुफ्त में डैशिंग की मेजबानी के लिए एक आदर्श मंच है।

ऐसा करने के लिए, हरोकू मुख्य पृष्ठ पर, साइन अप बटन पर क्लिक करें, दिखाई देने वाले पृष्ठ पर ईमेल दर्ज करें, प्राप्त पत्र में पुष्टि लिंक पर क्लिक करें, एक पासवर्ड बनाएं और सहेजें पर क्लिक करें। हो गया! अब हमारे पास क्लाउड में एक छोटा लेकिन गर्वित कोने है जहां आप जल्दी से सुरुचिपूर्ण वेब एप्लिकेशन बना सकते हैं।

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

wget -qO- https://toolbelt.heroku.com/install-ubuntu.sh | sh

यदि Windows या OS X, अपनी साइट से exe या pkg डाउनलोड करें और इंस्टॉल करें।

दूसरे, अगर हम अचानक चीजों को गड़बड़ करते हैं, और यह जानने के लिए कि हमें किसी और चीज को बर्बाद कर देना है, तो हमें अपने स्थान पर जल्दी से लौटने के लिए एक संस्करण नियंत्रण प्रणाली की आवश्यकता होगी। हेरोकू निर्माता इन उद्देश्यों के लिए गिट की सलाह देते हैं। चलो मना नहीं करते - गिट वास्तव में अच्छा है। इसे स्थापित करना आसान है:

 sudo apt-get install git

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

डैशिंग स्थापित करें

आरंभ करने के लिए, हरोकू में लॉग इन करें। ऐसा करने के लिए, कमांड लाइन खोलें, लिखें:

 heroku login

पंजीकरण के दौरान निर्दिष्ट ईमेल और पासवर्ड यहां दर्ज करें। भविष्य के भंडार के लिए एक फ़ोल्डर बनाएं और उस पर जाएं।

 mkdir dashing cd dashing

क्लोनिंग डैशिंग गिट रिपॉजिटरी:

 git clone https://github.com/Shopify/dashing.git

अब आपको एप्लिकेशन इंस्टॉल करना होगा, एक नई Git रिपॉजिटरी को इनिशियलाइज़ करना होगा और वह सब कुछ करना होगा जो हम अभी इसमें क्लोन करते हैं:

 bundle install git init git add . git commit -m "My beautiful dashboard"

Heroku में एक आवेदन बनाएँ

 heroku apps:create xakepdashboard

यह अब xakepdashboard.herokuapp.com

पर उपलब्ध है, लेकिन इसमें कुछ भी नहीं है। लेकिन heroku

यूटीलिटी ने एक अलग heroku

रिपॉजिटरी heroku

बनाई। हम अपने आवेदन को वहां कॉपी करते हैं।

 git push heroku master

यदि यह मौजूद होने के बावजूद Gemfile.lock फ़ाइल के अभाव में कंसोल शपथ लेता है, तो .ignignore फ़ाइल खोलें

 gedit .gitignore

और वहां से लाइन ./Gemfile.lock

उसके बाद, धक्का सफल होगा, जिसके बाद स्थापना स्वचालित रूप से शुरू हो जाएगी। आह, स्मार्ट कारों की यह खूबसूरत उम्र! जब इंस्टॉलेशन प्रगति पर है, तो आप कॉफी पी सकते हैं और अपने सहयोगियों को मेल कर सकते हैं कि 20 मिनट में कॉर्पोरेट डेटा को देखने के लिए एक अविश्वसनीय सौंदर्य और दृश्य सेवा तैयार हो जाएगी।

पहला डैशबोर्ड

चूंकि रूबी में डैशिंग लिखा गया है, इसलिए आपका पहला डैशबोर्ड बनाना आसान होगा। उचित मणि स्थापित करें (सुनिश्चित करें कि रूबी 1.9+ सिस्टम पर स्थापित है):

 $ gem install dashing

अगला, हम एक नई परियोजना बनाते हैं:

 $ dashing new sweet_dashboard_project

Sweet_dashboard_project निर्देशिका और जवाहरात गिरोह पर जाएं:

 $ bundle

अब आप सर्वर शुरू कर सकते हैं:

 $ dashing start

यदि सब कुछ जैसा कि यह होना चाहिए, तब 3030 वें पोर्ट पर एक वेब सर्वर शुरू हुआ (डैशिंग सिनात्रा पर आधारित है), इसलिए आप अपने ब्राउज़र में स्थानीयहोस्ट: 3030 को सुरक्षित रूप से खोल सकते हैं।

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

वैसे, यहां एक उदाहरण है कि आप डैशबोर्ड पर प्रदर्शित होने वाले डेटा को कैसे प्रभावित कर सकते हैं। कंसोल में टाइप करने का प्रयास करें:

 curl -d '{ "auth<em>token": "YOUR</em>AUTH_TOKEN", "text": "     " }' \http://127.0.0.1:3030/widgets/welcome

और एक विजेट में पाठ बदल जाएगा। हम इस बारे में आगे बात करेंगे।

ढाँचा ढाँचा

सबसे पहले आपको आवेदन की सरल संरचना को समझना होगा:

एसेट्स - इस फ़ोल्डर में चित्र, फ़ॉन्ट, js / कॉफ़ीस्क्रिप्ट लाइब्रेरी शामिल हैं।
डैशबोर्ड - प्रत्येक डैशबोर्ड की अपनी एरब-फाइल होती है, जो विजेट के स्थान और मापदंडों का वर्णन करती है।
नौकरियां - डेटा एकत्र करने के लिए स्क्रिप्ट (उदाहरण के लिए, बाहरी सेवाओं के एपीआई को कॉल करना)।
लीब - वैकल्पिक रूबी सहायक फ़ाइलों की आवश्यकता हो सकती है।
सार्वजनिक - स्थैतिक डैशबोर्ड फ़ाइलें (अब यहाँ फेविकॉन या कस्टम 404 वें पृष्ठ हैं)।
विजेट - अपने स्वयं के विजेट के लिए सभी HTML / सीएसएस / कॉफी-कोड।

नीचे एक सरल डैशबोर्ड का उदाहरण दिया गया है जिसमें दो विजेट हैं:

 <% content_for(:title) { "Xakep dashboard" } %> <div class="gridster"> <ul> <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"> <div data-id="karma" data-view="Number" data-title="Karma" style="background-color:#96bf48;"></div> </li> <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"> <div data-id="valuation" data-view="Number" data-title="Current Valuation" data-prefix="$"></div> </li> </ul> </div>

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

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

डेटा को कैसे अपडेट करें

विजेट्स में डेटा ट्रांसफर करना बहुत सरल है। आपको केवल उस विजेट को निर्दिष्ट करना होगा जिसे आप उपयोग करना चाहते हैं (इसके विजेट-आईडी का उपयोग करके), और इसे JSON के रूप में डेटा पास करें। ऐसा करने के दो तरीके हैं।

समयबद्ध कार्य (नौकरियां)

डैशिंग में एक विशेष शेड्यूलर अंतर्निहित है जो जॉब्स फ़ोल्डर में स्थित जॉब स्क्रिप्ट्स को बनाता है और वांछित आवृत्ति के साथ उन में निर्दिष्ट कार्यों को करता है। अपनी नौकरी फ़ाइल बनाने के लिए, job नमूना_job का उपयोग करें।

 SCHEDULER.every '1m', :first_in => 0 do |job| send_event('karma', { current: rand(1000) }) end

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

जब आप डेटाबेस से कुछ डेटा एकत्र करने या तीसरे पक्ष के एपीआई (ट्विटर से डेटा एकत्रीकरण को लागू करना) कहते हैं, तो कार्य बहुत उपयोगी होते हैं।

एपीआई

एक और तरीका है HTTP के माध्यम से सीधे डेटा को अपडेट करना:

 curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "current": 100 }' http://localhost:3030/widgets/karma

सुरक्षा उद्देश्यों के लिए, एक टोकन का उपयोग किया जाता है (यह config.ru में लिखा गया है)। हमने पहले से ही ऐसे अनुरोध का एक उदाहरण देखा था जब हमने डैशबोर्ड में टेक्स्ट फ़ील्ड के मूल्य को अपडेट किया था, जिसे डैशिंग डिफ़ॉल्ट रूप से बनाता है।

मेरा कार्यालय डैशबोर्ड

डैशिन के चारों ओर एक बड़ा समुदाय बनना शुरू हो रहा है, विशेष पृष्ठों पर github.com/Shopify/dashing/wiki/Additional-Widgets और dashing.challengepost.com बहुत सारे तैयार किए गए विजेट एकत्र किए गए हैं।

मैं तुरंत अपने कार्यालय के लिए एक डैशबोर्ड एकत्र करने में सक्षम था। मैं क्या करना चाहता था? यह रिलीज के लिए नीचे (या पुनरावृत्ति के अंत तक, अगर एजाइल का उपयोग किया जाता है) तक गिना जाना चाहिए। साइट पर वर्तमान में आगंतुकों की संख्या की निगरानी करना भी आवश्यक है (हम Google Analytics से डेटा लेंगे)। इसके साथ ही, साइट पर लोड को मॉनिटर करने के लिए अच्छा होगा कि समय को समझने के लिए क्या और कहाँ का अनुकूलन करना है और साइट पर आगंतुकों की लहर के तहत अचानक गिरने से रोकने के लिए क्या उपाय करना है या डीडीओएस हमले। और अंत में, हम सोशल नेटवर्क पर हमारे बारे में जो कुछ लिखा है उसका पालन करेंगे: ट्विटर से नवीनतम संदेशों को हमारी सेवा के नाम से प्रदर्शित करें।

अंत में, मैंने विगेट्स के निम्नलिखित सेट को एक साथ रखा:

उलटी गिनती उलटी गिनती विजेट ।
आगंतुकों की निगरानी करना। Google Analytics विजेट।
सर्वर लोड। विजेट लोड करें ।
ट्रैफिक लाइट के रूप में परियोजना की स्थिति। हम अपनी परियोजना के लिए जीथब स्टेटस विजेट को फिर से लिखते हैं ।
ट्विटर। ट्विटर खोज विजेट।

टीवी पर कैसे प्रदर्शित करें?

बेशक, कंप्यूटर पर एक डैशबोर्ड उपयोगी होगा (आप इसे एक शुरुआत पृष्ठ के रूप में स्थापित कर सकते हैं), लेकिन फिर भी, परंपरागत रूप से, इस सभी सौंदर्य की छवि टीवी पर प्रदर्शित होती है। यहां तक कि आधुनिक टीवी पर भी एक ब्राउज़र है, लेकिन मैं ईमानदारी से मानता हूं कि मेरे पास ऐसा नहीं है, इसलिए मैंने इस कॉन्फ़िगरेशन की कोशिश नहीं की।

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

मैं संक्षेप में बताता हूं। श्रम लागत - एक दिन। प्रोग्रामिंग लगभग अनावश्यक है। आवश्यक लोहा - रास्पबेरी पी, एक टुकड़ा। परिणाम कार्यालय में सबसे अच्छा डैशबोर्ड है, जिसे हर कोई अब सुधारना चाहता है। ब्यूटी!

दबंगई नहीं चली। और क्या?

यह स्पष्ट है कि डैशिंग ढाँचा परिवर्तित नहीं हुआ। गिटहब पर एक त्वरित खोज ने कुछ और दिलचस्प घटनाक्रम दिए जिनका उपयोग किया जा सकता है।

टीम डैशबोर्ड । डैशबोर्ड बनाने के लिए एक महान रूपरेखा डैशिंग के साथ कार्यक्षमता में तर्क कर सकती है। टीम डैशबोर्ड मुख्य रूप से तकनीकी टीमों के लिए है। तो, पहले से ही बॉक्स के बाहर मॉनिटरिंग सिस्टम एरबिट, न्यू रिलेक, पीएसडीआई, सीआई (कंटीन्यूअस इंटीग्रेशन) जेनकिंस, ट्रैविस सीआई सिस्टम के लिए तैयार मॉड्यूल हैं। ग्राफ के रूप में किसी भी डेटा को दर्शाने के लिए मॉड्यूल हैं (ग्रेफाइट और गंगालिया का उपयोग किया जाता है), डिजिटल डेटा प्रदर्शित करने के लिए एक विजेट और समय के साथ उनके परिवर्तन, और इसी तरह।
Grafana । आंकड़ों के साथ एक समृद्ध कार्यात्मक पैनल (और एक ग्राफ संपादक भी)। ग्रेफाइट के लिए एक सुंदर प्रतिस्थापन के रूप में की पेशकश की।
लिनक्स डैश PHP में लिखे लिनक्स मशीन की रिमोट मॉनिटरिंग के लिए सुविधाजनक और सरल वेब डैशबोर्ड। यह अपटाइम, रैम लोडिंग, फ्री डिस्क स्पेस, कनेक्टेड यूजर्स, इंस्टॉल्ड सॉफ्टवेयर, रनिंग प्रॉसेस और बहुत कुछ दिखाता है।
रिपोर्ट दैनिक गतिविधि के बारे में विभिन्न प्रकार के डेटा की कल्पना करने के लिए व्यक्तिगत डैशबोर्ड: रनकीपर की खेल गतिविधि से गिटहब पर कमिट्स की संख्या तक।
व्यक्तिगत डैशबोर्ड और एपीआई । एक और व्यक्तिगत डैशबोर्ड, जिसे लागू करना सरल है।
sDashboard । डैशबोर्ड बनाने के लिए जेएस ढांचे में लिखा गया है। वास्तव में, यह jQuery के लिए एक प्लगइन है, जिससे आप विभिन्न डेटा और घटनाओं की कल्पना कर सकते हैं।
पानी का छींटा । Node.js. पर एशियाई डेवलपर्स द्वारा लिखा गया एक पूर्ण डैशबोर्ड ढांचा

सबसे पहले हैकर पत्रिका में 04/2014 से प्रकाशित।

जारी करने के लिए जारी करें

हैकर की सदस्यता लें

सभी अवसरों के लिए अपना डैशबोर्ड कैसे प्राप्त करें?