ดาวน์โหลด perl Dash - perl Dash Source Source Download

ชื่อ

DASH - แอพพลิเคชั่นเว็บวิเคราะห์ใน Perl (พอร์ตของพล็อตของ 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();

คำอธิบาย

แพ็คเกจนี้เป็นพอร์ตของพล็อตของ Perl

Dash ทำให้การสร้างเว็บแอปพลิเคชันวิเคราะห์ง่ายมาก ไม่จำเป็นต้องใช้ JavaScript

เป็นวิธีที่ยอดเยี่ยมในการใส่เว็บอินเตอร์เฟสแบบโต้ตอบที่ดีในแอปพลิเคชันการวิเคราะห์ข้อมูลของคุณโดยไม่ต้องสร้างอินเตอร์เฟส JavaScript และไม่ต้องติดตั้งเซิร์ฟเวอร์หรือเฟรมเวิร์กเว็บ กรณีการใช้งานทั่วไปคือคุณมีข้อมูลใหม่สำหรับโมเดล ML/AI ของคุณและคุณต้องการสำรวจวิธีการฝึกอบรมที่แตกต่างกันหรือเพียงแค่เห็นภาพผลลัพธ์ของการกำหนดค่าพารามิเตอร์ที่แตกต่างกัน

พื้นฐาน

ส่วนหลักของแอพ Dash คือ:

เค้าโครง
ส่วนที่ประกาศของแอพที่คุณระบุมุมมอง เค้าโครงนี้ประกอบด้วยส่วนประกอบที่จัดเรียงในลำดับชั้นเช่น HTML ส่วนประกอบนี้มีให้บริการเป็นห้องสวีทส่วนประกอบ (ตัวอย่างเช่น: dash :: html :: ส่วนประกอบ, dash :: core :: ส่วนประกอบ, ... ) และพวกเขาสามารถเป็นองค์ประกอบ HTML ที่เรียบง่าย (ตัวอย่างเช่น dash :: html :: ส่วนประกอบ :: h1) หรือซับซ้อนตามที่คุณต้องการ เวลาส่วนใหญ่ที่คุณจะใช้ส่วนประกอบ DASH ที่สร้างขึ้นแล้วและพร้อมใช้งานแล้ว
การโทรกลับ
นี่คือรหัส Perl ที่ได้รับการดำเนินการเมื่อมีการเปลี่ยนแปลงส่วนประกอบบางอย่างและผลลัพธ์ของการดำเนินการนี้ส่วนประกอบอื่น (หรือส่วนประกอบ) ได้รับการอัปเดต การโทรกลับทุกครั้งจะประกาศชุดอินพุตชุดเอาต์พุตและเลือกชุดของอินพุต "สถานะ" อินพุตทั้งหมดเอาต์พุตและอินพุต "สถานะ" เรียกว่าการพึ่งพาการโทรกลับ การพึ่งพาทุกครั้งเกี่ยวข้องกับคุณสมบัติบางอย่างของส่วนประกอบดังนั้นอินพุตจะพิจารณาว่าหากคุณสมบัติของส่วนประกอบที่ประกาศว่าเป็นอินพุตในการโทรกลับจะทริกเกอร์การโทรกลับนั้นและเอาต์พุตที่ส่งคืนโดยการเรียกกลับจะอัปเดตคุณสมบัติของส่วนประกอบที่ประกาศว่าเป็นเอาต์พุต

ดังนั้นในการสร้างแอพ Dash คุณเพียงแค่ตั้งค่าเค้าโครงและการโทรกลับ โครงกระดูกพื้นฐานจะเป็น:

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

ในบทสรุปคุณจะได้รับรสชาติของวิธีการทำงานและในโฟลเดอร์ตัวอย่างของการกระจาย

เค้าโครง

เลย์เอาต์เป็นส่วนที่ประกาศของแอพและ DOM ของแอพของเรา องค์ประกอบรูทสามารถเป็นองค์ประกอบใด ๆ และหลังจากองค์ประกอบรูทถูกทำส่วนที่เหลือคือ "เด็ก" ขององค์ประกอบรูทนี้นั่นคือคุณค่าของคุณสมบัติของเด็ก ๆ ขององค์ประกอบหลักและเด็ก ๆ สามารถเป็นหนึ่ง "สิ่ง" (ข้อความองค์ประกอบไม่ว่าตราบเท่าที่สามารถเปลี่ยนเป็น JSON) หรืออาร์เรย์ ดังนั้นส่วนประกอบสามารถแต่งได้มากเท่าที่คุณต้องการ ตัวอย่างเช่น:

 $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 HTML เป็น Dash :: HTML :: ส่วนประกอบ โดยทั่วไปองค์ประกอบ HTML
dash dataTable เป็น dash :: ตาราง

แผนคือการสร้างแพ็คเกจสำหรับ 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 :: ส่วนประกอบมีวิธีการโรงงาน div เพื่อโหลดและสร้าง dash :: 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 ' ));

ฟังก์ชั่น

โมดูลจำนวนมากใช้ผู้ส่งออกและเพื่อนเพื่อลดการพิมพ์ หากคุณชอบวิธีนี้ทุกชุดจะได้รับแพ็คเกจฟังก์ชั่นเพื่อนำเข้าฟังก์ชั่นทั้งหมดนี้ไปยังเนมสเปซของคุณ การใช้ฟังก์ชั่นนี้ยังช่วยให้คำหลัก ommiting เด็กถ้าเด็กเป็นองค์ประกอบแรก

ตัวอย่างเช่น 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 ' ));

การโทรกลับ

การโทรกลับเป็นส่วนที่ตอบโต้ของเว็บแอป พวกเขาฟังการเปลี่ยนแปลงคุณสมบัติของส่วนประกอบและถูกไล่ออกจากการเปลี่ยนแปลงเหล่านั้น เอาต์พุตของการโทรกลับสามารถอัปเดตคุณสมบัติสำหรับส่วนประกอบอื่น ๆ (หรือคุณสมบัติที่แตกต่างกันสำหรับส่วนประกอบเดียวกัน) และอาจยิงการโทรกลับอื่น ๆ ดังนั้นแอพของคุณคือ "ตอบสนอง" ต่อการเปลี่ยนแปลง คุณสมบัติเหล่านี้ที่การเปลี่ยนแปลงของไฟและคุณสมบัติที่ได้รับการปรับปรุงคือการพึ่งพาการโทรกลับพวกเขาคือ "ลิงก์" ระหว่างส่วนประกอบและการโทรกลับ

ทุกองค์ประกอบที่คาดว่าจะยิงการโทรกลับจะต้องมีคุณสมบัติ ID ที่ไม่ซ้ำกัน

เพื่อกำหนดการโทรกลับเป็นสิ่งจำเป็นอย่างน้อย:

อินพุต
คุณสมบัติส่วนประกอบ (หรือคุณสมบัติส่วนประกอบ) ซึ่งยิงการโทรกลับในทุกการเปลี่ยนแปลง ค่าของคุณสมบัตินี้คืออินพุตสำหรับการโทรกลับ
เอาท์พุท
ส่วนประกอบ (หรือส่วนประกอบ) ที่มีคุณสมบัติ (หรือคุณสมบัติ) ได้รับการอัปเดต
การโทรกลับ
รหัสที่ถูกดำเนินการ

การโทรกลับขั้นต่ำคือ:

 $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
ค่าของคุณสมบัติ 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 และเปิดเบราว์เซอร์เพื่อเริ่มใช้แอพของคุณ!

สร้างส่วนประกอบใหม่

มีส่วนประกอบมากมาย ... สำหรับ Python ดังนั้นหากคุณต้องการมีส่วนร่วมฉันจะยินดีที่จะช่วยเหลือ

ในขณะเดียวกันคุณสามารถสร้างองค์ประกอบของคุณเอง ฉันจะทำคู่มือที่ดีกว่าและเป็นตัวสร้างอัตโนมัติ แต่ตอนนี้คุณควรใช้ https://github.com/plotly/dash-component-boilerplate สำหรับชิ้นส่วน JavaScript ทั้งหมด

สำหรับทุกองค์ประกอบจะต้องเป็นคลาส Perl ที่สืบทอดมาจาก dash :: basecomponent การโอเวอร์โหลด hash dereferencing %{} ด้วยอุปกรณ์ประกอบฉากที่ส่วนประกอบของปฏิกิริยามี (ตรวจสอบ Dash :: basecomponent to_json วิธี) และด้วยวิธีนี้: ด้วยวิธีนี้: ด้วยวิธีนี้: ด้วยวิธีนี้: ด้วยวิธีนี้:
- แผงควบคุม
  เนมสเปซของส่วนประกอบ
- _js_dist
  การพึ่งพา JavaScript สำหรับส่วนประกอบ
- _css_dist
  การพึ่งพา CSS สำหรับส่วนประกอบ

เป็นทางเลือกชุดคอมโพเนนต์จะมีแพ็คเกจฟังก์ชั่นและวิธีการโรงงานเพื่อความสะดวกในการใช้งาน

จากนั้นคุณเพียงแค่ต้องเผยแพร่ชุด Component เป็นแพ็คเกจ Perl สำหรับห้องสวีทส่วนประกอบใหม่คุณสามารถใช้ชื่อแพ็คเกจที่คุณต้องการได้ แต่ถ้าคุณต้องการใช้ Dash :: Namespace โปรดใช้ Dash :: Components :: เพื่อหลีกเลี่ยงการชนในอนาคตด้วยการพัฒนาต่อไป นอกจากนี้จะทำให้การค้นหาส่วนประกอบมากขึ้นได้ง่ายขึ้น

ดังที่ได้กล่าวไว้ก่อนเวลาฉันจะสร้างตัวสร้างอัตโนมัติ แต่การมีส่วนร่วมเป็นมากกว่าการต้อนรับ !! ในระหว่างนี้โปรดตรวจสอบการบริจาค

การทำส่วนประกอบสำหรับเส้นประที่ไม่ได้ตอบสนองนั้นเป็นเรื่องยากนิดหน่อยดังนั้นโปรดให้ก่อนที่จะได้รับการตอบสนองของชิ้นส่วน JavaScript และหลังจากนั้นการรวมเข้ากับ Perl, R หรือ Python จะเป็นเรื่องง่าย

สถานะ

ในขณะนี้ห้องสมุดนี้เป็นการทดลองและยังอยู่ระหว่างการพัฒนาที่ใช้งานอยู่และ API กำลังจะเปลี่ยนแปลง!

เป้าหมายสูงสุดของหลักสูตรคือการสนับสนุนทุกสิ่งที่รุ่น Python และ R รองรับ

การใช้งานจะเป็นไปตาม Dash รุ่น Python ใกล้ที่สุดเท่าที่จะเป็นไปได้ดังนั้น Python Doc สามารถใช้กับการเปลี่ยนแปลงเล็กน้อย:

ใช้ -> (ตัวดำเนินการลูกศร) แทน
แพ็คเกจหลักและคลาสสำหรับแอพคือเส้นประ
ห้องสวีทส่วนประกอบจะใช้การประชุมแพ็คเกจ Perl ฉันหมายถึง: dash_html_components จะเป็น dash :: html :: ส่วนประกอบ
แทนที่จะเป็นนักตกแต่งเราจะใช้การโทรกลับเก่าธรรมดา
บริบทการโทรกลับเป็นพารามิเตอร์สุดท้ายของการโทรกลับ แต่ไม่มีส่วนตอบกลับ
แทนที่จะเป็น Flask เราจะใช้ Mojolicious (อาจจะเป็นในอนาคต Dancer2)

ในบทสรุปคุณจะได้รับรสชาติของวิธีการทำงานและในโฟลเดอร์ตัวอย่างของการกระจายหรือโดยตรงในที่เก็บ บทช่วยสอนแบบ Dash เต็มรูปแบบถูกส่งไปยัง Perl ในโฟลเดอร์ตัวอย่างเหล่านั้น

ชิ้นส่วนที่หายไป

ตอนนี้มีชิ้นส่วนมากมายหายไป:

คำนำหน้า
โหมดการดีบักและการโหลดซ้ำร้อน
การกำหนดค่า Dash (ตัวแปรสภาพแวดล้อมที่รองรับ)
การตรวจสอบการพึ่งพาการโทรกลับ
ฟังก์ชั่น clientside
รองรับคุณสมบัติส่วนประกอบข้อมูล-* และ Aria-*
การสร้างเค้าโครงแบบไดนามิก

และอีกมากมาย แต่คุณสามารถใช้มันได้ในตอนนี้เพื่อสร้างแอพที่ยอดเยี่ยม! (ถ้าคุณต้องการแรงบันดาลใจบางอย่าง ... เพียงตรวจสอบ https://dash-gallery.plotly.host/portal/)

ความปลอดภัย

คำเตือน : โมดูลนี้ไม่ได้ทดสอบเพื่อความปลอดภัยดังนั้นทดสอบตัวเองว่าคุณกำลังจะเรียกใช้เซิร์ฟเวอร์แอพในเซิร์ฟเวอร์ที่หันหน้าเข้าหาสาธารณะ

คำเตือน

นี่คือโมดูล Perl อย่างไม่เป็นทางการ ขณะนี้ฉันยังไม่ได้มีส่วนร่วมในทางใดทางหนึ่งด้วยการวางแผน แต่ฉันคิดว่า Dash เป็นห้องสมุดที่ยอดเยี่ยมและฉันต้องการใช้กับ Perl

ถ้าคุณชอบ Dash โปรดพิจารณาสนับสนุนการซื้อบริการระดับมืออาชีพ: Dash Enterprise