﻿
{"id":14201,"date":"2020-03-15T21:39:28","date_gmt":"2020-03-15T21:39:28","guid":{"rendered":"https:\/\/www.gencayyildiz.com\/blog\/?p=14201"},"modified":"2020-03-15T21:41:06","modified_gmt":"2020-03-15T21:41:06","slug":"qrcode-nedir-qrcode-js-ve-qrcoder-kutuphanelerini-kullanarak-qrcode-olusturma","status":"publish","type":"post","link":"https:\/\/www.gencayyildiz.com\/blog\/qrcode-nedir-qrcode-js-ve-qrcoder-kutuphanelerini-kullanarak-qrcode-olusturma\/","title":{"rendered":"QrCode Nedir? QRCode.js ve QRCoder K\u00fct\u00fcphanelerini Kullanarak QrCode Olu\u015fturma"},"content":{"rendered":"<div id=\"fb-root\"><\/div>\n<p>Merhaba,<\/p>\n<p>\u00c7a\u011f\u0131m\u0131z\u0131n gere\u011fi en \u00f6nemli unsur &#8216;bilgi&#8217;&#8230; Dolay\u0131s\u0131yla hayat\u0131m\u0131z bilgi merkezli bir yakla\u015f\u0131mla \u015fekillenmekte ve bu y\u00fczden g\u00fcnl\u00fck ya\u015fant\u0131m\u0131zda belirli ihtiya\u00e7lar ortaya \u00e7\u0131kmaktad\u0131r. Bu ihtiya\u00e7lardan en \u00f6nemli ve hassasiyet gerektireni, bilginin bir yerden ba\u015fka bir yere ta\u015f\u0131nmas\u0131 ve transfer edilmesidir. Bilginin transfer s\u00fcrecinde hedef odakl\u0131 bir disiplin ile birlikte g\u00fcvenlik fakt\u00f6rlerininde \u00f6nemi g\u00f6z ard\u0131 edilemeyecek derecede kritik arz etselerde biz bu i\u00e7eri\u011fimizde -bilginin transfer- s\u00fcreci odal\u0131 bir teknolojiyle ilgilenece\u011fiz. Bu teknoloji QrCode teknolojisidir.<\/p>\n<h3>QrCode Nedir?<\/h3>\n<blockquote style=\"color:purple;\"><p>Pratik anlamda bilginin ta\u015f\u0131nmas\u0131n\u0131n en kolay yolu&#8230;<\/p><\/blockquote>\n<p>\u0130smini Quick Response(QR) kelimelerinin ba\u015f harflerinden alan bu teknoloji ilk olarak otomotiv sanayi sekt\u00f6r\u00fcnde kullan\u0131lmak amac\u0131yla geli\u015ftirilmi\u015ftir ve genellikle mobil cihazlar\u0131n kameralar\u0131ndan okutulabilen ve g\u00f6rsel olarak kodlanm\u0131\u015f(yahut g\u00f6rsele g\u00f6m\u00fclm\u00fc\u015fte diyebiliriz) veriyi eylemi ger\u00e7ekle\u015ftiren cihaza transfer eden bir teknolojidir. Yap\u0131sal olarak a\u015fa\u011f\u0131dakine benzer niteliklerde bir kare koddan olu\u015fmaktad\u0131r;<\/p>\n<p><a href=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2020\/03\/QrCode-Nedir-QRCode.js-ve-QRCoder-K\u00fct\u00fcphanelerini-Kullanarak-QrCode-Olu\u015fturma.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2020\/03\/QrCode-Nedir-QRCode.js-ve-QRCoder-K\u00fct\u00fcphanelerini-Kullanarak-QrCode-Olu\u015fturma.jpg\" alt=\"QrCode Nedir QRCode.js ve QRCoder K\u00fct\u00fcphanelerini Kullanarak QrCode Olu\u015fturma\" width=\"330\" height=\"330\" class=\"alignnone size-full wp-image-14204\" srcset=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2020\/03\/QrCode-Nedir-QRCode.js-ve-QRCoder-K\u00fct\u00fcphanelerini-Kullanarak-QrCode-Olu\u015fturma.jpg 330w, https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2020\/03\/QrCode-Nedir-QRCode.js-ve-QRCoder-K\u00fct\u00fcphanelerini-Kullanarak-QrCode-Olu\u015fturma-300x300.jpg 300w, https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2020\/03\/QrCode-Nedir-QRCode.js-ve-QRCoder-K\u00fct\u00fcphanelerini-Kullanarak-QrCode-Olu\u015fturma-150x150.jpg 150w, https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2020\/03\/QrCode-Nedir-QRCode.js-ve-QRCoder-K\u00fct\u00fcphanelerini-Kullanarak-QrCode-Olu\u015fturma-160x160.jpg 160w, https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2020\/03\/QrCode-Nedir-QRCode.js-ve-QRCoder-K\u00fct\u00fcphanelerini-Kullanarak-QrCode-Olu\u015fturma-320x320.jpg 320w\" sizes=\"auto, (max-width: 330px) 100vw, 330px\" \/><\/a><br \/>\nSan\u0131r\u0131m g\u00fcnl\u00fck hayat\u0131m\u0131za azar azar temas eden bu kare koda \u00e7ok yabanc\u0131 olmasa gerek \ud83d\ude42 <\/p>\n<p><strong>Peki bu kodu kendi projelerimize \u00f6zel nas\u0131l olu\u015fturabiliriz?<\/strong><br \/>\nQrCode&#8217;u kendi projelerimizde kullanabilmek i\u00e7in JavaScript temelli QRCode.js k\u00fct\u00fcphanesini yahut .NET ortam\u0131nda QRCoder k\u00fct\u00fcpnanesini kullanabiliriz. Bu i\u00e7eri\u011fimizde her iki k\u00fct\u00fcphane ile bir QrCode&#8217;un nas\u0131l olu\u015fturuldu\u011funu inceleyece\u011fiz.<\/p>\n<h4 style=\"color:brown\">QRCode.js \u0130le JavaScript Ortam\u0131nda QrCode Olu\u015fturma<\/h4>\n<p>QrCode \u00fcretebilmek i\u00e7in tasarlanm\u0131\u015f haz\u0131r JavaScript k\u00fct\u00fcphanesidir. <a href=\"https:\/\/davidshimjs.github.io\/qrcodejs\/\" rel=\"noopener noreferrer\" target=\"_blank\">Buradaki<\/a> adresten indirilebilir. Kullan\u0131m\u0131 ise a\u015fa\u011f\u0131daki gibi olduk\u00e7a basit ve pratiktir;<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;script src=&quot;qrcode.min.js&quot;&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n    &lt;div id=&quot;qrcode&quot;&gt;&lt;\/div&gt;\r\n    &lt;script type=&quot;text\/javascript&quot;&gt;\r\n        new QRCode(document.getElementById(&quot;qrcode&quot;), {\r\n            text: 'barkoda cevrilecek veriyi buraya yaz\u0131n\u0131z.',\r\n            width: 250,\r\n            height: 250,\r\n            colorDark: 'red',\r\n            colorLight: 'white',\r\n            correctLevel: QRCode.CorrectLevel.H\r\n        });\r\n    &lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><a href=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2020\/03\/QrCode-Nedir-QRCode.js-ve-QRCoder-K\u00fct\u00fcphanelerini-Kullanarak-QrCode-Olu\u015fturma-1.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2020\/03\/QrCode-Nedir-QRCode.js-ve-QRCoder-K\u00fct\u00fcphanelerini-Kullanarak-QrCode-Olu\u015fturma-1.jpg\" alt=\"QrCode Nedir QRCode.js ve QRCoder K\u00fct\u00fcphanelerini Kullanarak QrCode Olu\u015fturma\" width=\"261\" height=\"257\" class=\"alignnone size-full wp-image-14218\" \/><\/a><br \/>\nG\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere \u00fcretilecek barkodun renk, boyut vs. gibi \u00f6zellikleri ayarlanabilmekte ve h\u0131zl\u0131ca sayfaya g\u00f6m\u00fclebilmektedir.<\/p>\n<h4 style=\"color:brown\">QRCoder \u0130le Asp.NET Core Ortam\u0131nda QrCode Olu\u015fturma<\/h4>\n<p>QRCoder ise QrCode \u00fcretebilmemizi sa\u011flayan C# ile yaz\u0131lm\u0131\u015f basit bir k\u00fct\u00fcphanedir. <a href=\"https:\/\/www.nuget.org\/packages\/QRCoder\/\" rel=\"noopener noreferrer\" target=\"_blank\">\u015euradaki<\/a> adresten indirilip .NET \u00e7at\u0131s\u0131 alt\u0131ndaki Asp.NET\/Core Web API\/MVC vs. t\u00fcm uygulamalara dahil edilebilir. Biz i\u00e7eri\u011fimizde Asp.NET Core Web API mimarisinde QrCode olu\u015fturmay\u0131 \u00f6rneklendirece\u011fiz.<\/p>\n<p>\u0130lgili k\u00fct\u00fcphaneyi uygulamaya indirdikten sonra &#8220;QrCode(Controllers).cs&#8221; isimli controller s\u0131n\u0131f\u0131 i\u00e7erisinde a\u015fa\u011f\u0131daki \u00e7al\u0131\u015fmay\u0131 yapman\u0131z yeterlidir;<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n    &#x5B;ApiController]\r\n    &#x5B;Route(&quot;api\/&#x5B;controller]&quot;)]\r\n    public class QrCodeController : ControllerBase\r\n    {\r\n        public IActionResult QrCodeGenerator(string text)\r\n        {\r\n            QRCodeGenerator qRCodeGenerator = new QRCodeGenerator();\r\n            QRCodeData qrCodeData = qRCodeGenerator.CreateQrCode(text, QRCodeGenerator.ECCLevel.Q);\r\n            QRCode qrCode = new QRCode(qrCodeData);\r\n            Bitmap qrCodeImage = qrCode.GetGraphic(10, Color.Orange, Color.White, true);\r\n            using (MemoryStream stream = new MemoryStream())\r\n            {\r\n                qrCodeImage.Save(stream, ImageFormat.Png);\r\n                var bitmapBytes = stream.ToArray();\r\n                return File(bitmapBytes, &quot;image\/jpeg&quot;);\r\n            }\r\n        }\r\n    }\r\n<\/pre>\n<p>\u0130lgili kaynak kodun 10. sat\u0131r\u0131ndaki &#8216;GetGraphic&#8217; metodundan a\u015fa\u011f\u0131daki olas\u0131 hatay\u0131 al\u0131rsan\u0131z e\u011fer &#8216;System.Drawing.Common&#8217; k\u00fct\u00fcphanesini uygulamaya y\u00fcklemeniz yeterlidir.<br \/>\n<a href=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2020\/03\/QrCode-Nedir-QRCode.js-ve-QRCoder-K\u00fct\u00fcphanelerini-Kullanarak-QrCode-Olu\u015fturma-2.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2020\/03\/QrCode-Nedir-QRCode.js-ve-QRCoder-K\u00fct\u00fcphanelerini-Kullanarak-QrCode-Olu\u015fturma-2.jpg\" alt=\"QrCode Nedir QRCode.js ve QRCoder K\u00fct\u00fcphanelerini Kullanarak QrCode Olu\u015fturma\" width=\"440\" height=\"171\" class=\"alignnone size-full wp-image-14224\" srcset=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2020\/03\/QrCode-Nedir-QRCode.js-ve-QRCoder-K\u00fct\u00fcphanelerini-Kullanarak-QrCode-Olu\u015fturma-2.jpg 440w, https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2020\/03\/QrCode-Nedir-QRCode.js-ve-QRCoder-K\u00fct\u00fcphanelerini-Kullanarak-QrCode-Olu\u015fturma-2-300x117.jpg 300w\" sizes=\"auto, (max-width: 440px) 100vw, 440px\" \/><\/a><\/p>\n<p>Hata mesaj\u0131;<\/p>\n<p style=\"text-align:center;color:red;\">\nAssembly &#8216;QRCoder&#8217; with identity &#8216;QRCoder, Version=1.3.6.0, Culture=neutral, PublicKeyToken=null&#8217; uses &#8216;System.Drawing.Common, Version=4.0.0.1, Culture=neutral, PublicKeyToken=cc7b13ffcd2ddd51&#8217; which has a higher version than referenced assembly &#8216;System.Drawing.Common&#8217; with identity &#8216;System.Drawing.Common, Version=4.0.0.0, Culture=neutral, PublicKeyToken=cc7b13ffcd2ddd51&#8217;\n<\/p>\n<p>Hata g\u00f6rseli;<br \/>\n<a href=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2020\/03\/QrCode-Nedir-QRCode.js-ve-QRCoder-K\u00fct\u00fcphanelerini-Kullanarak-QrCode-Olu\u015fturma-3.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2020\/03\/QrCode-Nedir-QRCode.js-ve-QRCoder-K\u00fct\u00fcphanelerini-Kullanarak-QrCode-Olu\u015fturma-3.jpg\" alt=\"QrCode Nedir QRCode.js ve QRCoder K\u00fct\u00fcphanelerini Kullanarak QrCode Olu\u015fturma\" width=\"654\" height=\"136\" class=\"alignnone size-full wp-image-14225\" srcset=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2020\/03\/QrCode-Nedir-QRCode.js-ve-QRCoder-K\u00fct\u00fcphanelerini-Kullanarak-QrCode-Olu\u015fturma-3.jpg 654w, https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2020\/03\/QrCode-Nedir-QRCode.js-ve-QRCoder-K\u00fct\u00fcphanelerini-Kullanarak-QrCode-Olu\u015fturma-3-300x62.jpg 300w\" sizes=\"auto, (max-width: 654px) 100vw, 654px\" \/><\/a><\/p>\n<p>Velhas\u0131l yukar\u0131daki i\u015flemin \u00e7\u0131kt\u0131s\u0131 a\u015fa\u011f\u0131daki gibi olacakt\u0131r;<br \/>\n<a href=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2020\/03\/QrCode-Nedir-QRCode.js-ve-QRCoder-K\u00fct\u00fcphanelerini-Kullanarak-QrCode-Olu\u015fturma-4.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2020\/03\/QrCode-Nedir-QRCode.js-ve-QRCoder-K\u00fct\u00fcphanelerini-Kullanarak-QrCode-Olu\u015fturma-4.jpg\" alt=\"QrCode Nedir QRCode.js ve QRCoder K\u00fct\u00fcphanelerini Kullanarak QrCode Olu\u015fturma\" width=\"509\" height=\"438\" class=\"alignnone size-full wp-image-14230\" srcset=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2020\/03\/QrCode-Nedir-QRCode.js-ve-QRCoder-K\u00fct\u00fcphanelerini-Kullanarak-QrCode-Olu\u015fturma-4.jpg 509w, https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2020\/03\/QrCode-Nedir-QRCode.js-ve-QRCoder-K\u00fct\u00fcphanelerini-Kullanarak-QrCode-Olu\u015fturma-4-300x258.jpg 300w\" sizes=\"auto, (max-width: 509px) 100vw, 509px\" \/><\/a><\/p>\n<p>B\u00f6ylece birden fazla k\u00fct\u00fcphane ile ayn\u0131 i\u015flemin yani QrCode barkodunun nas\u0131l olu\u015fturuldu\u011funu incelemi\u015f olduk. Sonraki i\u00e7eriklerimizde farkl\u0131 platformlarda bu barkodlar\u0131n nas\u0131l okundu\u011funa dair i\u00e7erikler kaleme alaca\u011f\u0131z. O halde ilgili i\u00e7eriklerde g\u00f6r\u00fc\u015fmek \u00fczere&#8230;<\/p>\n<p>\u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle&#8230;<br \/>\n\u0130yi \u00e7al\u0131\u015fmalar&#8230;<\/p>\n<p>Not : \u00d6rnek \u00e7al\u0131\u015fmalar\u0131 indirmek i\u00e7in <a href=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2020\/03\/QrCodeProject.zip\">buraya<\/a> t\u0131klay\u0131n\u0131z.<\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>Merhaba, \u00c7a\u011f\u0131m\u0131z\u0131n gere\u011fi en \u00f6nemli unsur &#8216;bilgi&#8217;&#8230; Dolay\u0131s\u0131yla hayat\u0131m\u0131z bilgi merkezli bir yakla\u015f\u0131mla \u015fekillenmekte ve bu y\u00fczden g\u00fcnl\u00fck ya\u015fant\u0131m\u0131zda belirli ihtiya\u00e7lar ortaya \u00e7\u0131kmaktad\u0131r. Bu ihtiya\u00e7lardan en \u00f6nemli ve hassasiyet gerektireni, bilginin bir yerden ba\u015fka&#46;&#46;&#46;<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":1,"featured_media":3014,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2739,3102,3103,18],"tags":[3265,3267,3266,3268,3270,3269,3271,3264],"class_list":["post-14201","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-net-core","category-asp-net-core","category-asp-net-core-3-1","category-javascript","tag-qrcode","tag-qrcode-nasil-olusturulur","tag-qrcode-nedir","tag-qrcode-js","tag-qrcode-js-kutuphanesiyle-qrcode-olusturma","tag-qrcoder","tag-qrcoder-kutuphanesiyle-qrcode-olusturma","tag-quick-response"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/14201","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=14201"}],"version-history":[{"count":26,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/14201\/revisions"}],"predecessor-version":[{"id":14234,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/14201\/revisions\/14234"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/3014"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=14201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=14201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=14201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}