{"id":243,"date":"2020-11-09T11:20:54","date_gmt":"2020-11-09T08:20:54","guid":{"rendered":"http:\/\/www.etemkeskin.com\/?p=243"},"modified":"2020-11-09T11:20:57","modified_gmt":"2020-11-09T08:20:57","slug":"dash-plotly-veri-gorsellestirme-araci-django-da-nasil-kullanilir-2","status":"publish","type":"post","link":"https:\/\/www.etemkeskin.com\/index.php\/tr\/2020\/11\/09\/dash-plotly-veri-gorsellestirme-araci-django-da-nasil-kullanilir-2\/","title":{"rendered":"DASH  PLOTLY VER\u0130 G\u00d6RSELLE\u015eT\u0130RME ARACI DJANGO\u2019 DA NASIL KULLANILIR?"},"content":{"rendered":"\n<p>Dash,  veri g\u00f6rselle\u015ftirmeleri yaparak web uygulamalar\u0131 olu\u015fturmak i\u00e7in geli\u015ftirilmi\u015f bir web framworkd\u00fcr. <strong>Flask, Plotly.js, ve React.js<\/strong>&nbsp;k\u00fct\u00fcphaneleri \u00fczerine kurulu olarak geli\u015ftirilmi\u015ftir.  Bu web framework&#8217; \u00fcn g\u00fcc\u00fcn\u00fc Django projelerinde de kullanmak isteyebiliriz. Bunun nas\u0131l yap\u0131laca\u011f\u0131n\u0131 bu yaz\u0131m\u0131zda anlataca\u011f\u0131m.<\/p>\n\n\n\n<p>Dash&#8217; i Django projelerinde kullanmak i\u00e7in geli\u015ftirilmi\u015f <strong>django_plotly_dash<\/strong> paketini kullanaca\u011f\u0131z.<\/p>\n\n\n\n<h3>1. Kurulum<\/h3>\n\n\n\n<p>Django projemizde Dash&#8217;i kullanmak i\u00e7in ilk \u00f6nce<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>pip install django_plotly_dash<\/code><\/pre>\n\n\n\n<p>ile python paketimizi indiriyoruz.<\/p>\n\n\n\n<p>Daha sonra projemize eklemek i\u00e7in Django projesinde&nbsp;<strong>settings.py<\/strong> dosyas\u0131nda<strong> INSTALLED_APPS<\/strong> in alt\u0131na a\u015fa\u011f\u0131daki sat\u0131r\u0131 ekliyoruz.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>INSTALLED_APPS = &#91;\n    ...\n    'django_plotly_dash.apps.DjangoPlotlyDashConfig',\n    ...\n    ]<\/code><\/pre>\n\n\n\n<p>Ayr\u0131ca <strong>settings.py<\/strong>&nbsp;dosyas\u0131na a\u015fa\u011f\u0131daki sat\u0131r\u0131 ekliyoruz.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>X_FRAME_OPTIONS = 'SAMEORIGIN'<\/code><\/pre>\n\n\n\n<p>Projemizin ana <strong>urls.py<\/strong> dosyas\u0131nda a\u015fa\u011f\u0131daki kod sat\u0131r\u0131n\u0131 ekliyoruz.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"287\" height=\"221\" src=\"http:\/\/www.etemkeskin.com\/wp-content\/uploads\/2020\/11\/image.png\" alt=\"\" class=\"wp-image-217\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>...\n    path('django_plotly_dash\/', include('django_plotly_dash.urls')),\n]<\/code><\/pre>\n\n\n\n<p>Bu kod sat\u0131r\u0131n\u0131n <strong>urls.py<\/strong>&#8216; de yap\u0131s\u0131 \u015fu \u015fekilde olur.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"596\" height=\"401\" src=\"http:\/\/www.etemkeskin.com\/wp-content\/uploads\/2020\/11\/image-2.png\" alt=\"\" class=\"wp-image-219\"\/><\/figure>\n\n\n\n<p>Kurulumun son a\u015famas\u0131nda migration yaparak veri taban\u0131m\u0131z\u0131 g\u00fcncelliyoruz. Bunun i\u00e7in terminalde <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>python manage.py migrate <\/code><\/pre>\n\n\n\n<p>i \u00e7al\u0131\u015ft\u0131r\u0131yoruz.<\/p>\n\n\n\n<h3>2 . \u0130lk Uygulaman\u0131n \u00c7al\u0131\u015ft\u0131r\u0131lmas\u0131<\/h3>\n\n\n\n<p>Dash uygulamalar\u0131m\u0131z\u0131 toplayaca\u011f\u0131m\u0131z <strong>dashreporting<\/strong> ad\u0131nda djangoda uygulamam\u0131z\u0131 olu\u015fturuyoruz.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>python manage.py startapp dashreporting<\/code><\/pre>\n\n\n\n<p>Uygulamam\u0131z\u0131 <strong>settings.py&#8217;<\/strong> de <strong>INSTALLED_APPS<\/strong> <strong>dashreporting<\/strong> uygulamam\u0131z\u0131 kaydediyoruz.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"458\" height=\"305\" src=\"http:\/\/www.etemkeskin.com\/wp-content\/uploads\/2020\/11\/image-3.png\" alt=\"\" class=\"wp-image-220\"\/><\/figure>\n\n\n\n<p>Dash app&#8217; lerimizi bir klas\u00f6rde toplamak i\u00e7in  dashreporting klas\u00f6r\u00fcn\u00fcn alt\u0131nda <strong>dash_apps<\/strong> isminde bir klas\u00f6r olu\u015fturuyoruz. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"262\" height=\"564\" src=\"http:\/\/www.etemkeskin.com\/wp-content\/uploads\/2020\/11\/image-4.png\" alt=\"\" class=\"wp-image-221\"\/><\/figure>\n\n\n\n<p>Ayr\u0131ca <strong>dashreporting <\/strong>uygulamas\u0131nda <strong>urls.py <\/strong>olu\u015fturuyoruz. urls.py&#8217; dosyas\u0131na  app&#8217; lerimizi import etmemiz gerekiyor.  urls.py&#8217; de pathleri tan\u0131mlay\u0131p hangi view fonksiyonlar\u0131n\u0131n \u00e7al\u0131\u015faca\u011f\u0131n\u0131 tan\u0131ml\u0131yoruz.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"847\" height=\"277\" src=\"http:\/\/www.etemkeskin.com\/wp-content\/uploads\/2020\/11\/image-5.png\" alt=\"\" class=\"wp-image-223\"\/><\/figure>\n\n\n\n<p>dashreporting uygulamam\u0131zda \u00e7al\u0131\u015facak view fonksiyonlar\u0131n\u0131 belirliyoruz.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"503\" height=\"253\" src=\"http:\/\/www.etemkeskin.com\/wp-content\/uploads\/2020\/11\/image-6.png\" alt=\"\" class=\"wp-image-224\"\/><\/figure>\n\n\n\n<p>dash_apps klas\u00f6r\u00fcnde app1.py dosyas\u0131 olu\u015fturarak ilk dash uygulamam\u0131z\u0131 olu\u015fturuyoruz.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"767\" height=\"680\" src=\"http:\/\/www.etemkeskin.com\/wp-content\/uploads\/2020\/11\/image-7.png\" alt=\"\" class=\"wp-image-225\"\/><\/figure>\n\n\n\n<p>Dash uygulamal\u0131nda dash appini olu\u015ftururken kullan\u0131lan dash. Dash() yerine DjangoDash(&#8216;SimpleExample&#8217;) kullan\u0131yoruz. Ayr\u0131ca templatte kullanaca\u011f\u0131m\u0131z appin ismini parametre olarak veriyoruz. Burada &#8216;SimpleExample&#8217; olarak belirledik.<\/p>\n\n\n\n<p>En son templatimizde dash raporumuzu render etmek kald\u0131. Bunun i\u00e7inde templatimizdea\u015fa\u011f\u0131daki template taglerini ekliyoruz.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{%load plotly_dash%}\n{%plotly_app name=\"SimpleExample\"%}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"971\" height=\"685\" src=\"http:\/\/www.etemkeskin.com\/wp-content\/uploads\/2020\/11\/image-8.png\" alt=\"\" class=\"wp-image-226\"\/><\/figure>\n\n\n\n<p>A\u015fa\u011f\u0131da internet taray\u0131c\u0131m\u0131zda olu\u015facak sayfada Dash tablomuz.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1398\" height=\"586\" src=\"http:\/\/www.etemkeskin.com\/wp-content\/uploads\/2020\/11\/image-9.png\" alt=\"\" class=\"wp-image-228\"\/><\/figure>\n\n\n\n<h4>KAYNAKLAR<\/h4>\n\n\n\n<ol><li>https:\/\/django-plotly-dash.readthedocs.io\/en\/latest\/index.html<\/li><\/ol>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dash, veri g\u00f6rselle\u015ftirmeleri yaparak web uygulamalar\u0131 olu\u015fturmak i\u00e7in geli\u015ftirilmi\u015f bir web framworkd\u00fcr. Flask, Plotly.js, ve React.js&nbsp;k\u00fct\u00fcphaneleri \u00fczerine kurulu olarak geli\u015ftirilmi\u015ftir. Bu web framework&#8217; \u00fcn g\u00fcc\u00fcn\u00fc Django projelerinde de kullanmak isteyebiliriz. Bunun nas\u0131l yap\u0131laca\u011f\u0131n\u0131 bu yaz\u0131m\u0131zda anlataca\u011f\u0131m. Dash&#8217; i Django projelerinde kullanmak i\u00e7in geli\u015ftirilmi\u015f django_plotly_dash paketini kullanaca\u011f\u0131z. 1. Kurulum Django projemizde Dash&#8217;i kullanmak i\u00e7in ilk \u00f6nce [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[32,18,26],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>DASH PLOTLY VER\u0130 G\u00d6RSELLE\u015eT\u0130RME ARACI DJANGO\u2019 DA NASIL KULLANILIR? - blog website<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2020\/11\/09\/dash-plotly-veri-gorsellestirme-araci-django-da-nasil-kullanilir-2\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"DASH PLOTLY VER\u0130 G\u00d6RSELLE\u015eT\u0130RME ARACI DJANGO\u2019 DA NASIL KULLANILIR? - blog website\" \/>\n<meta property=\"og:description\" content=\"Dash, veri g\u00f6rselle\u015ftirmeleri yaparak web uygulamalar\u0131 olu\u015fturmak i\u00e7in geli\u015ftirilmi\u015f bir web framworkd\u00fcr. Flask, Plotly.js, ve React.js&nbsp;k\u00fct\u00fcphaneleri \u00fczerine kurulu olarak geli\u015ftirilmi\u015ftir. Bu web framework&#8217; \u00fcn g\u00fcc\u00fcn\u00fc Django projelerinde de kullanmak isteyebiliriz. Bunun nas\u0131l yap\u0131laca\u011f\u0131n\u0131 bu yaz\u0131m\u0131zda anlataca\u011f\u0131m. Dash&#8217; i Django projelerinde kullanmak i\u00e7in geli\u015ftirilmi\u015f django_plotly_dash paketini kullanaca\u011f\u0131z. 1. Kurulum Django projemizde Dash&#8217;i kullanmak i\u00e7in ilk \u00f6nce [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2020\/11\/09\/dash-plotly-veri-gorsellestirme-araci-django-da-nasil-kullanilir-2\/\" \/>\n<meta property=\"og:site_name\" content=\"blog website\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-09T08:20:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-09T08:20:57+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.etemkeskin.com\/wp-content\/uploads\/2020\/11\/image.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.etemkeskin.com\/#website\",\"url\":\"https:\/\/www.etemkeskin.com\/\",\"name\":\"blog website\",\"description\":\"Etem KESK\\u0130N\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.etemkeskin.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"tr\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2020\/11\/09\/dash-plotly-veri-gorsellestirme-araci-django-da-nasil-kullanilir-2\/#primaryimage\",\"inLanguage\":\"tr\",\"url\":\"http:\/\/www.etemkeskin.com\/wp-content\/uploads\/2020\/11\/image.png\",\"contentUrl\":\"http:\/\/www.etemkeskin.com\/wp-content\/uploads\/2020\/11\/image.png\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2020\/11\/09\/dash-plotly-veri-gorsellestirme-araci-django-da-nasil-kullanilir-2\/#webpage\",\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2020\/11\/09\/dash-plotly-veri-gorsellestirme-araci-django-da-nasil-kullanilir-2\/\",\"name\":\"DASH PLOTLY VER\\u0130 G\\u00d6RSELLE\\u015eT\\u0130RME ARACI DJANGO\\u2019 DA NASIL KULLANILIR? - blog website\",\"isPartOf\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2020\/11\/09\/dash-plotly-veri-gorsellestirme-araci-django-da-nasil-kullanilir-2\/#primaryimage\"},\"datePublished\":\"2020-11-09T08:20:54+00:00\",\"dateModified\":\"2020-11-09T08:20:57+00:00\",\"author\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2020\/11\/09\/dash-plotly-veri-gorsellestirme-araci-django-da-nasil-kullanilir-2\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2020\/11\/09\/dash-plotly-veri-gorsellestirme-araci-django-da-nasil-kullanilir-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2020\/11\/09\/dash-plotly-veri-gorsellestirme-araci-django-da-nasil-kullanilir-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Ana sayfa\",\"item\":\"https:\/\/www.etemkeskin.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"DASH PLOTLY VER\\u0130 G\\u00d6RSELLE\\u015eT\\u0130RME ARACI DJANGO\\u2019 DA NASIL KULLANILIR?\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\",\"name\":\"etemkeskin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.etemkeskin.com\/#personlogo\",\"inLanguage\":\"tr\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6af0148b790691ed24ae245fb3dc773b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6af0148b790691ed24ae245fb3dc773b?s=96&d=mm&r=g\",\"caption\":\"etemkeskin\"},\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/author\/etemkeskinyahoo-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/243"}],"collection":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/comments?post=243"}],"version-history":[{"count":1,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/243\/revisions"}],"predecessor-version":[{"id":244,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/243\/revisions\/244"}],"wp:attachment":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/media?parent=243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/categories?post=243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/tags?post=243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}