perl Dash Download - perl Dash Source Code Download

اسم

Dash - تطبيقات الويب التحليلية في Perl (Port of Plotly's Dash to Perl)

إصدار

الإصدار 0.11

ملخص

 use Dash;
use aliased ' Dash::Html::Components ' => ' html ' ;
use aliased ' Dash::Core::Components ' => ' dcc ' ;
use aliased ' Dash::Dependencies ' => ' deps ' ;

my $external_stylesheets = [ ' https://codepen.io/chriddyp/pen/bWLwgP.css ' ];

my $app = Dash -> new(
    app_name             => ' Basic Callbacks ' ,
    external_stylesheets => $external_stylesheets
);

$app -> layout(
    html -> Div([
        dcc -> Input( id => ' my-id ' , value => ' initial value ' , type => ' text ' ),
        html -> Div( id => ' my-div ' )
    ])
);

$app -> callback(
    deps -> Output( ' my-div ' , ' children ' ),
    [deps -> Input( ' my-id ' , ' value ' )],
    sub {
        my $input_value = shift ;
        return " You've entered ' $input_value ' " ;
    }
);

$app -> run_server();

use Dash;
use aliased ' Dash::Html::Components ' => ' html ' ;
use aliased ' Dash::Core::Components ' => ' dcc ' ;

my $external_stylesheets = [ ' https://codepen.io/chriddyp/pen/bWLwgP.css ' ];

my $app = Dash -> new(
    app_name             => ' Random chart ' ,
    external_stylesheets => $external_stylesheets
);

my $initial_number_of_values = 20;
$app -> layout(
    html -> Div( children => [
        dcc -> Input( id => ' my-id ' , value => $initial_number_of_values , type => ' number ' ),
        dcc -> Graph( id => ' my-graph ' )
    ])
);

my $serie = [ map { rand (100) } 1 .. $initial_number_of_values ];
$app -> callback(
    Output => { component_id => ' my-graph ' , component_property => ' figure ' },
    Inputs => [{ component_id => ' my-id ' , component_property => ' value ' }],
    callback => sub {
        my $number_of_elements = shift ;
        my $size_of_serie = scalar @$serie ;
        if ( $number_of_elements >= $size_of_serie ) {
            push @$serie , map { rand (100) } $size_of_serie .. $number_of_elements ;
        } else {
            @$serie = @$serie [0 .. $number_of_elements ];
        }
        return { data => [ {
            type => " scatter " ,
            y => $serie
            }]};
    }
);

$app -> run_server();

وصف

هذه الحزمة عبارة عن منفذ DASH's DASH إلى Perl.

Dash يجعل بناء تطبيقات الويب التحليلية سهلة للغاية. لا جافا سكريبت المطلوبة.

إنها طريقة رائعة لوضع واجهة ويب تفاعلية لطيفة لتطبيق تحليل البيانات الخاص بك دون الحاجة إلى إنشاء واجهة JavaScript ودون الاضطرار إلى إعداد الخوادم أو أطر الويب. حالة الاستخدام النموذجية هي أن لديك فقط بيانات جديدة لنموذج ML/AI الخاص بك وتريد استكشاف طرق مختلفة للتدريب أو مجرد تصور نتائج تكوينات المعلمات المختلفة.

الأساسيات

الأجزاء الرئيسية لتطبيق DASH هي:

تَخطِيط
الجزء التصريحي من التطبيق حيث تحدد العرض. يتكون هذا التصميم من مكونات مرتبة في التسلسل الهرمي ، تمامًا مثل HTML. تتوفر هذه المكونات كأجنحة مكون (على سبيل المثال: Dash :: html :: مكونات ، dash :: core :: مكونات ، ...) ويمكن أن تكون عناصر html بسيطة (على سبيل المثال dash :: html :: مكونات :: h1) أو معقدة مثل Dash :: Core :: Components :: Graph Component. في معظم الأوقات ، ستستخدم مكونات DASH مصممة بالفعل وجاهزة للاستخدام.
عمليات الاسترجاعات
هذا هو رمز PERL الذي يتم تنفيذه عندما يتغير بعض المكونات ونتيجة هذا التنفيذ يتم تحديث مكون آخر (أو مكونات). كل رد اتصال يعلن عن مجموعة من المدخلات ومجموعة من المخرجات ومجموعة من المدخلات "الحالة" اختياريا. تُعرف جميع المدخلات والمخرجات والمدخلات "الحالة" باسم تبعيات رد الاتصال. ترتبط كل التبعية ببعض خاصية بعض المكونات ، وبالتالي تحدد المدخلات أنه إذا كانت خاصية مكون يُعلن كإدخال في رد الاتصال ستؤدي إلى ظهور هذا الاتصال ، وسيقوم الإخراج الذي تم إرجاعه بواسطة رد الاتصال بتحديث خاصية المكون المعلن كإخراج.

لذلك لإنشاء تطبيق DASH ، تحتاج فقط إلى إعداد التخطيط والاسترجاعات. سيكون الهيكل العظمي الأساسي:

 my $app = Dash -> new( app_name => ' My Perl Dash App ' ); 
$app -> layout(...);
$app -> callback(...);
$app -> run_server();

في الملخص ، يمكنك أن تتذوق كيفية عمل هذا وأيضًا في مجلد الأمثلة من التوزيع

تَخطِيط

التصميم هو الجزء التعريفي من التطبيق و DOM في تطبيقنا. يمكن أن يكون عنصر الجذر أي مكون ، وبعد الانتهاء من عنصر الجذر ، يكون الباقي "أطفالًا" من مكون الجذر هذا ، وهو أنهم قيمة خاصية الأطفال للمكون الأصل ويمكن أن يكون الأطفال "شيئًا" (نصًا ، مكونًا ، مهما كان يمكن تحويله إلى JSON) أو arrayref من "الأشياء". لذلك يمكن أن تتكون المكونات بقدر ما تريد. على سبيل المثال:

 $app -> layout(html -> Div( children => [
        html -> H1( children => ' Making Perl Dash Apps ' ),
        html -> Img( src => ' https://raw.githubusercontent.com/kraih/perl-raptor/master/example.png ' )
    ]));

عناصر

هذه الحزمة تشحن أجنحة المكونات التالية وهي جاهزة للاستخدام:

مكونات DASH CORE مثل DASH :: CORE :: مكونات. المكونات الرئيسية لتطبيقات الويب التحليلية التفاعلية: النماذج والمخطط
مكونات DASH HTML مثل DASH :: HTML :: مكونات. أساسا عناصر HTML.
dash datatable مثل Dash :: Table

تتمثل الخطة في جعل الحزم أيضًا لـ Dash-Bio و Dash-Daq و Dash-Canvas و Dash-Cytoscape.

باستخدام المكونات

كل مكون لديه فئة خاصة به. على سبيل المثال ، لدى DASH-HTML-Component Div الفصل: DASH :: HTML :: Components :: Div ويمكنك استخدامه بالطريقة القياسية Perl:

 use Dash::Html::Components::Div;
...
$app -> layout(Dash::Html::Components::Div -> new( id => ' my-div ' , children => ' This is a simple div ' ));

ولكن مع كل جناح مكون يمكن أن يكون الكثير من المكونات. لذلك لتخفيف مهمة استيرادها (واحد تلو الآخر هو مملة بعض الشيء) يمكننا استخدام طريقتين:

طرق المصنع

كل جناح مكون لديه طريقة مصنع لكل مكون. واستخدام أساليب المصنع هذه الكلمة الأساسية للأطفال اختياري طالما أن الأطفال هو العنصر الأول. على سبيل المثال Dash :: Html :: Components لديها طريقة المصنع Div لتحميل وإنشاء اندفاعة :: html :: مكونات :: Div المكون:

 use Dash::Html::Components;
...
$app -> layout(Dash::Html::Components -> Div( id => ' my-div ' , children => ' This is a simple div ' ));
# same as
$app -> layout(Dash::Html::Components -> Div( ' This is a simple div ' , id => ' my-div ' );

ولكن من المفترض أن تكون أساليب المصنع مستحقة ، لذا فإن هذا يصبح أقل مطولاً:

 use aliased ' Dash::Html::Components ' => ' html ' ;
...
$app -> layout(html -> Div( id => ' my-div ' , children => ' This is a simple div ' ));
# same as
$app -> layout(html -> Div( ' This is a simple div ' , id => ' my-div ' ));

وظائف

تستخدم العديد من الوحدات النمطية المصدر والأصدقاء لتقليل الكتابة. إذا كنت تحب بهذه الطريقة ، فإن كل مجموعة مكونات تحصل على حزمة وظائف لاستيراد كل هذه الوظائف إلى مساحة الاسم الخاصة بك. يتيح استخدام هذه الوظائف أيضًا استئصال الكلمة الرئيسية للأطفال إذا كان الأطفال هو العنصر الأول.

لذلك على سبيل المثال لـ Dash :: Html :: مكونات هناك حزمة Dash :: Html :: ComponentsFunctions مع وظيفة مصنع واحدة لتحميل وإنشاء المكون بنفس الاسم:

 use Dash::Html::ComponentsFunctions;
...
$app -> layout(Div( id => ' my-div ' , children => ' This is a simple div ' ));
# same as
$app -> layout(Div( ' This is a simple div ' , id => ' my-div ' ));

عمليات الاسترجاعات

عوامل الاسترجاعات هي الجزء التفاعلي من تطبيق الويب. يستمعون إلى التغييرات في خصائص المكونات ويتم إطلاقها بواسطة تلك التغييرات. يمكن لمخرجات عمليات الاسترجاعات تحديث خصائص المكونات الأخرى (أو خصائص مختلفة لنفس المكونات) وربما تطلق عمليات الاسترداد الأخرى. لذا فإن تطبيقك "يتفاعل" مع التغييرات. هذه الخصائص التي تتغير فيها الحريق والخصائص التي يتم تحديثها هي تبعيات رد الاتصال ، فهي "الروابط" بين المكونات وعمليات الاسترجاعات.

يجب أن يكون لكل مكون من المتوقع أن يطلق رد الاتصال خاصية معرف فريدة من نوعها.

من الضروري تحديد رد الاتصال على الأقل:

المدخلات
خاصية المكون (أو خصائص المكونات) التي تطلق رد الاتصال على كل تغيير. قيم هذه الخصائص هي مدخلات للاسترداد
الإخراج
المكون (أو المكونات) الذي يتم تحديث ممتلكاته (أو خصائص)
أتصل مرة أخرى
الرمز الذي يتم تنفيذه

سيكون رد اتصال الحد الأدنى هو:

 $app -> callback(
    Output => { component_id => ' my-div ' , component_property => ' children ' },
    Inputs => [{ component_id => ' my-id ' , component_property => ' value ' }],
    callback => sub {
        my $input_value = shift ;
        return " You've entered ' $input_value ' " ;
    }
);

التبعيات

تبعيات "الارتباط" مكونات وعمليات الاسترجاعات. كل تبعية رد الاتصال لها السمات التالية:

Component_id
قيمة خاصية المعرف للمكون
component_property
اسم العقار

المدخلات

يمكن أن يحتوي رد الاتصال على مدخلات واحدة أو أكثر ، وللمعلن عن كل إدخال عن رد الاتصال ، ستكون قيمة الخاصية معلمة للاستدعاء بنفس الترتيب الذي يتم فيه الإعلان عن تبعيات المدخلات.

المخرجات

يمكن أن يكون للرد على تبعيات أو أكثر من الإخراج. عندما يكون هناك إخراج واحد فقط ، فإن القيمة التي يتم إرجاعها بواسطة رد الاتصال تحديث قيمة خاصية المكون. في الحالة الثانية ، يجب أن يكون إخراج رد الاتصال قائمة في القائمة التي تم إرجاعها واحدة تلو الأخرى إلى المخرجات بنفس الترتيب الذي يتم فيه الإعلان عن تبعيات الإخراج.

ولاية

بصرف النظر عن المدخلات ، قد يحتاج رد الاتصال إلى قيمة خصائص المكونات الأخرى ولكن دون إطلاق رد الاتصال. تبعيات الدولة لهذه الحالة. لذلك بالنسبة لكل تبعية للدولة المعلنة عن رد الاتصال ، فإن القيمة لنظام التشغيل ، ستكون الخاصية معلمة لاستدعاء رد الاتصال في نفس الترتيب ، يتم الإعلان عن تبعيات الدولة ولكن بعد جميع المدخلات.

التبعيات باستخدام الكائنات

يمكن الإعلان عن التبعيات باستخدام مرجع التجزئة فقط ولكن الطريقة المفضلة هي استخدام الفئات وطرق المصنع والوظائف كما هو الحال مع المكونات.

باستخدام الكائنات:

 use Dash::Dependencies::Input;
use Dash::Dependencies::Output;
...
$app -> callback(
    Output => Dash::Dependencies::Output -> new( component_id => ' my-div ' , component_property => ' children ' ),
    Inputs => [Dash::Dependencies::Input -> new( component_id => ' my-id ' , component_property => ' value ' )],
    callback => sub {
        my $input_value = shift ;
        return " You've entered ' $input_value ' " ;
    }
);

يتيح استخدام الكائنات حذف وسيطات الكلمات الرئيسية في طريقة رد الاتصال:

 use Dash::Dependencies::Input;
use Dash::Dependencies::Output;
...
$app -> callback(
    Dash::Dependencies::Output -> new( component_id => ' my-div ' , component_property => ' children ' ),
    [Dash::Dependencies::Input -> new( component_id => ' my-id ' , component_property => ' value ' )],
    sub {
        my $input_value = shift ;
        return " You've entered ' $input_value ' " ;
    }
);

هناك أيضًا طرق للمصنع لاستخدام هذه التبعيات ، والتي تسمح بحذف وسيطات الكلمات الرئيسية لتبعيات:

 use Dash::Dependencies;
...
$app -> callback(
    Dash::Dependencies -> Output( ' my-div ' , ' children ' ),
    [Dash::Dependencies -> Input( component_id => ' my-id ' , component_property => ' value ' )],
    sub {
        my $input_value = shift ;
        return " You've entered ' $input_value ' " ;
    }
);

هذا يمكن أن يكون مستعزًا

 use aliased ' Dash::Dependencies ' => ' deps ' ;
...
$app -> callback(
    deps -> Output( component_id => ' my-div ' , component_property => ' children ' ),
    [deps -> Input( ' my-id ' , ' value ' )],
    sub {
        my $input_value = shift ;
        return " You've entered ' $input_value ' " ;
    }
);

ولكن إذا كنت تفضل استخدام وظائف فقط في مساحة الاسم:

 use Dash::DependenciesFunctions;
...
$app -> callback(
    Output( ' my-div ' , ' children ' ),
    [Input( component_id => ' my-id ' , component_property => ' value ' )],
    sub {
        my $input_value = shift ;
        return " You've entered ' $input_value ' " ;
    }
);

تشغيل التطبيق

الخطوة الأخيرة هي تشغيل التطبيق. فقط اتصل:

 $app->run_server();

وسيبدأ خادمًا على المنفذ 8080 ويفتح متصفحًا لبدء استخدام تطبيقك!

صنع مكونات جديدة

هناك الكثير من المكونات ... لبيثون. لذلك إذا كنت تريد المساهمة ، فسأكون سعيدًا بالمساعدة.

في هذه الأثناء يمكنك بناء المكون الخاص بك. سأقوم بعمل دليل أفضل وباني آلي ، لكن يجب عليك الآن استخدام https://github.com/plotly/dash-component-boilerplate لجميع جزء javaScript (يعتمد على رد الفعل) وبعد ذلك يكون جزء perl سهلًا للغاية (المكونات هي في الغالب javaScript ، أو typscript):

لكل مكون يجب أن يكون فئة Perl وراثة من Dash :: BaseComponent ، مما يؤدي إلى زيادة حجم التجزئة ٪ {} مع الدعائم التي يمتلكها مكون React (Check Dash :: BaseComponent to_json method) ، ومع هذه الطرق:
- DashNamespace
  مساحة اسم المكون
- _js_dist
  تبعيات JavaScript للمكون
- _css_dist
  تبعيات CSS للمكون

اختياريا سيكون لجناح المكون حزمة الوظائف وطرق المصنع لسهولة الاستخدام.

ثم عليك فقط نشر جناح المكون كحزمة بيرل. بالنسبة لأجنحة المكونات الجديدة ، يمكنك استخدام أي اسم حزمة تريده ، ولكن إذا كنت ترغب في استخدام مساحة الاسم :: ، يرجى استخدام Dash :: Components :: لتجنب تصادمات المستقبل مع مزيد من التطوير. إلى جانب ذلك ، سيجعل ذلك أسهل للعثور على مزيد من المكونات.

كما ذكرنا في وقت مبكر ، سأقوم بعمل منشئ آلي ولكن المساهمات أكثر من موضع ترحيب !! في غضون ذلك ، يرجى التحقق من المساهمة.

يعد إنشاء مكون لـ Dash الذي لا يعتمد على رد الفعل أمرًا صعبًا بعض الشيء ، لذا يرجى أولاً الحصول على رد فعل جزء JavaScript على أساس وبعد ذلك ، سيكون دمجه مع Perl أو R أو Python أمرًا سهلاً.

حالة

في هذه اللحظة ، تكون هذه المكتبة تجريبية ولا تزال تحت التطوير النشط وستتغير واجهة برمجة التطبيقات!

الهدف النهائي بالطبع هو دعم كل ما تدعمه إصدارات Python و R.

سيتبع الاستخدام إصدار Python من Dash ، في أقرب وقت ممكن ، بحيث يمكن استخدام Doc Python مع تغييرات بسيطة:

استخدام -> (مشغل السهم) بدلاً من.
الحزمة الرئيسية والفئة للتطبيقات هي Dash
ستستخدم أجنحة المكونات اتفاقية حزمة Perl ، أعني: Dash_html_components ستكون Dash :: Html :: Components
بدلاً من الديكورات ، سنستخدم عمليات الاسترجاعات القديمة العادية
سياق رد الاتصال متاح كمعلمة أخرى من رد الاتصال ولكن بدون جزء الاستجابة
بدلاً من القارورة ، سنستخدم mojolicious (ربما في المستقبل Dancer2)

في الملخص ، يمكنك أن تتذوق كيفية عمل هذا وأيضًا في مجلد الأمثلة على التوزيع أو مباشرة في المستودع. يتم نقل برنامج DASH الكامل إلى Perl في مجلد هذه الأمثلة.