الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

Kitto هو إطار عمل لمساعدتك في إنشاء لوحات معلومات مكتوبة بلغة Elixir / React.

تجريبي

  • نموذج لوحة القيادة
  • لوحة القيادة الإكسير
  • لوحة تحكم الوظائف
  • لوحة معلومات 1080 (محسنة لشاشات 1080) (المصدر)

يمكن العثور على مصدر لوحات المعلومات التجريبية على: kittoframework/demo.

للبدء في إنشاء الخاصة بك، اقرأ أدناه.

سمات

  • الوظائف هي عمليات خاضعة للإشراف تعمل بشكل متزامن
  • يتم ترميز الأدوات في مكتبة React الشهيرة
  • يستخدم سلسلة أدوات الأصول الحديثة، Webpack
  • يسمح بتدفق SSE إلى العديد من العملاء بشكل متزامن مع انخفاض مساحة الذاكرة/وحدة المعالجة المركزية
  • سهولة النشر باستخدام صور Docker المتوفرة أو Heroku (الدليل) أو Distillery (الدليل)
  • يمكن أن تخدم الأصول في الإنتاج
  • يحتفظ بإحصائيات حول الوظائف المحددة ويأتي مزودًا بلوحة تحكم لمراقبتها (عرض توضيحي)
  • يمكن تطبيق عمليات التراجع الأسية على الوظائف الفاشلة
  • يعيد تحميل التعليمات البرمجية عند التغيير في التطوير

تثبيت

قم بتثبيت أحدث الأرشيف 

mix archive.install https://github.com/kittoframework/archives/raw/master/kitto_new-0.9.2.ez

متطلبات

  • Elixir : >= 1.3
  • Erlang/OTP : >= 19

أصول

  • Node : 14.15.1
  • npm : 6.14.9

قد يعمل عن غير قصد في إصدارات أخرى غير تلك المذكورة أعلاه، ولكن لن يتم اختباره بشكل كامل (راجع .travis.yml للتعرف على مصفوفة البناء المحددة).

يمكنك أيضًا استخدام صورة Docker الرسمية.

يرجى فتح مشكلة لطلب الدعم لمنصة معينة.

إنشاء لوحة القيادة 

mix kitto.new < project_name >

تطوير

تثبيت التبعيات 

mix deps.get && npm install

ابدأ تشغيل خادم Kitto (يراقب أيضًا تغييرات الأصول) 

mix kitto.server

جرب نموذج لوحة المعلومات على: http://localhost:4000/dashboards/sample

للحصول على خيارات التكوين واستكشاف الأخطاء وإصلاحها تأكد من استشارة wiki.

شبكة لوحة القيادة

Kitto قادر على خدمة لوحات معلومات متعددة. يتم تقديم كل واحد منهم من خلال مسار النموذج التالي /dashboards/<dashboard_name> .

تتكون لوحة المعلومات من شبكة Gridster التي تحتوي على عناصر واجهة المستخدم React.

ستجد نموذجًا للوحة معلومات ضمن dashboards/sample .

سيضع المقتطف أدناه أداة Text بسيطة في لوحة التحكم. 

 < li data-row =" 1 " data-col =" 1 " data-sizex =" 2 " data-sizey =" 1 " >
  < div class =" widget-welcome "
       data-widget =" Text "
       data-source =" text "
       data-title =" Hello "
       data-text =" This is your shiny new dashboard. "
       data-moreinfo =" Protip: You can drag the widgets around! " > </ div >
</ li >

أهم سمات البيانات هنا هي

  • data-widget لتحديد القطعة التي سيتم استخدامها. انظر: الحاجيات
  • data-source يحدد مصدر البيانات لملء عنصر واجهة المستخدم. انظر: الوظائف

سمات البيانات الأخرى هي خيارات يتم تمريرها كدعائم إلى عنصر واجهة مستخدم React.

وظائف

من خلال إنشاء لوحة معلومات جديدة باستخدام mix kitto.new <project_name> يمكنك الحصول على بعض نماذج المهام في الدليل jobs/ .

يتم تنظيم ملف الوظيفة على النحو التالي: 

 # File jobs/random.exs
use Kitto.Job.DSL

job :random , every: :second do
  broadcast! :random , % { value: :rand . uniform * 100 |> Float . round }
end

سيؤدي ما ورد أعلاه إلى إنشاء عملية خاضعة للإشراف والتي ستصدر حدثًا مرسلاً من الخادم باسم random كل ثانية.

يمكن للوظائف أيضًا تشغيل الأوامر على الخادم. يتم بث البيانات باستخدام الأوامر بالصيغة {exit_code: integer, stdout: String.t} . على سبيل المثال، ستقوم المهمة التالية ببث حدث kitto_last_commit مع نتائج عبارة curl : 

 job :kitto_last_commit ,
    every: { 5 , :minutes } ,
    command: "curl https://api.github.com/repos/kittoframework/kitto/commits ? page = 1 & per_page = 1"

يمكنك تعيين مهمة للبدء في وقت لاحق باستخدام خيار first_at : 

 # Delay the first run by 2 minutes
job :random , every: :second , first_at: { 2 , :minutes } do
  broadcast! :random , % { value: :rand . uniform * 100 |> Float . round }
end

الحاجيات

الأدوات موجودة في widgets/ يتم تجميعها باستخدام Webpack ويتم تحميلها تلقائيًا في لوحات المعلومات. يتم إعادة بناء الأصول عند التغيير في التطوير، ولكن يجب تجميعها للإنتاج. راجع webpack.config.js للحصول على خيارات البناء.

مثال لعنصر واجهة المستخدم ( widgets/text/text.js ) 

 import React from 'react' ;
import Widget from '../../assets/javascripts/widget' ;

import './text.scss' ;

Widget . mount ( class Text extends Widget {
  render ( ) {
    return (
      < div className = { this . props . className } >
        < h1 className = "title" > { this . props . title } < / h1 >
        < h3 > { this . state . text || this . props . text } < / h3 >
        < p className = "more-info" > { this . props . moreinfo } < / p >
      < / div >
    ) ;
  }
} ) ;

يتم تحديث كل عنصر واجهة مستخدم ببيانات من مصدر واحد محدد باستخدام سمة data-source .

النشر

أدلة النشر

تقطير | عامل ميناء | هيروكو | systemd

تجميع المشروع 

MIX_ENV=prod mix compile

تجميع الأصول للإنتاج 

npm run build

ابدأ الخادم 

MIX_ENV=prod mix kitto.server

باستخدام عامل الميناء

من خلال بناء لوحة معلومات جديدة باستخدام: 

mix kitto.new

يمكنك أيضًا الحصول على Dockerfile .

قم ببناء صورة تتضمن الكود الخاص بك، جاهزة للنشر. 

docker build . -t my-awesome-dashboard

تفرخ حاوية للصورة 

docker run -i -p 127.0.0.1:4000:4000 -t my-awesome-dashboard

هيروكو

يرجى قراءة التعليمات التفصيلية في الويكي.

الترقية

يرجى قراءة دليل الترقية في الويكي.

المساهمة

تشغيل الاختبارات 

mix test

قم بتشغيل لينتر 

mix credo

يدعم

هل لديك سؤال؟

  • تحقق من الويكي أولا
  • انظر Elixirforum/Kitto
  • افتح قضية
  • اسأل في gitter.im/kittoframework

إلهام

إنه مستوحى بشكل كبير من Shopify/محطما. ❤️

حول الاسم

الطريق إلى Erlang / Elixir يبدأ من Kitto.

رخصة

حقوق الطبع والنشر (ج) 2017 لديميتريس زورباس، ترخيص معهد ماساتشوستس للتكنولوجيا. راجع LICENSE.txt لمزيد من التفاصيل.

الشعار بواسطة فانجيليس تزورتزيس (جيثب / الموقع).

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل