[{"data":1,"prerenderedAt":13140},["ShallowReactive",2],{"blog-posts":3},[4,821,1542,4130,4938,5488,8223,10455,12467],{"id":5,"title":6,"body":7,"date":794,"description":795,"extension":796,"image":797,"meta":798,"navigation":806,"ogImage":799,"path":807,"readingTime":808,"robots":797,"schemaOrg":797,"seo":809,"sitemap":810,"stem":814,"tags":815,"__hash__":820},"blog\u002Fblog\u002Fgithub-nasil-daha-iyi-hale-getirilir-profil-nasil-hazirlanir-readme-nasil-yazilir.md","Github'ımız Nasıl Daha İyi Hale Getirilir? Profil Nasıl Hazırlanır? README Nasıl Yazılır?",{"type":8,"value":9,"toc":777},"minimark",[10,15,32,38,43,46,66,70,92,98,102,113,122,134,142,150,159,162,168,172,175,240,243,249,261,265,280,299,303,309,354,365,382,388,396,399,476,480,483,489,496,501,521,527,533,539,545,564,568,573,578,584,598,602,630,635,641,647,653,667,671,679,684,690,700,704,714,719,725,731,737,740,763,774],[11,12,14],"h1",{"id":13},"githubımız-nasıl-daha-i̇yi-hale-getirilir-profil-nasıl-hazırlanır-readme-nasılyazılır","Github’ımız Nasıl Daha İyi Hale Getirilir? Profil Nasıl Hazırlanır? README Nasıl Yazılır?",[16,17,18,19,23,24,27,28,31],"p",{},"Herkese merhaba! Bu yazıda, ",[20,21,22],"strong",{},"GitHub\u002FGitLab"," profillerimizi, repolarımızı ve ",[20,25,26],{},"README"," dosyalarımızı nasıl daha etkili ve profesyonel hale getirebileceğimizi ele alacağım. Bunun yanı sıra, neden bu kadar önemli olduklarına dair bilgiler paylaşacağım. ",[20,29,30],{},"GitHub Nedir? \u002F GitLab Nedir?"," gibi temel soruların ötesine geçerek, birçok kişinin gözden kaçırdığı ancak global ölçekte oldukça önemsenen noktalara değineceğim.",[16,33,34],{},[35,36],"img",{"alt":37,"src":37},"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1400\u002F0*c-owjZs79fZcg82o",[39,40,42],"h3",{"id":41},"github-nedir-gitlabnedir","Github Nedir? Gitlab Nedir?",[16,44,45],{},"Bu konulara detaylıca değinmeyeceğim, ancak merak edenler için birkaç kaynağı aşağıya bırakıyorum:",[47,48,49,59],"ul",{},[50,51,52],"li",{},[53,54,58],"a",{"href":55,"rel":56},"https:\u002F\u002Ftugceakin.medium.com\u002Fgit-github-gitlab-nedir-git-komutlar%C4%B1-aa1df62d2637",[57],"nofollow","Git, GitHub, GitLab Nedir? Git Komutları — Tuğçe Akın",[50,60,61],{},[53,62,65],{"href":63,"rel":64},"https:\u002F\u002Fengineering.teknasyon.com\u002Fgit-nedir-github-kullan%C4%B1m%C4%B1-ve-temel-seviye-komutlar-182786c2d218",[57],"Git Nedir? GitHub Kullanımı ve Temel Seviye Komutlar — İrem Ateş",[39,67,69],{"id":68},"github-veya-gitlab-profilimiz-nedenönemli","GitHub veya GitLab Profilimiz Neden Önemli?",[16,71,72,73,76,77,80,81,84,85,80,88,91],{},"Bu sorunun cevabı oldukça basit: ",[20,74,75],{},"Profiliniz, yazılım dünyasındaki dijital CV’nizdir."," Günümüzde, ister kurumsal bir işe başvuruyor olun ister freelance çalışıyor olun, sunduğunuz ",[20,78,79],{},"CV (özgeçmiş)"," veya ",[20,82,83],{},"portföy",", yeteneklerinizi ve deneyimlerinizi sergilemenin en önemli araçlarından biri. Yazılım dünyasında ise, bu portföyün en etkili hali ",[20,86,87],{},"GitHub",[20,89,90],{},"GitLab"," profilinizdir.",[16,93,94,95,97],{},"Dahası, ",[20,96,87],{}," üzerinden iş bulma imkanları, profillerinizin içeriklerini çok daha önemli hale getiriyor. Bu nedenle, sadece profilinizin değil, yönlendirdiğiniz repoların da düzenli, anlaşılır ve profesyonel bir yapıda olması gerekiyor. Profiliniz ve repolarınız, sizi tanıtan ve yeteneklerinizi yansıtan en güçlü araçlardır.",[39,99,101],{"id":100},"peki-bunu-nasıl-yapacağım","Peki bunu nasıl yapacağım?",[16,103,104,105,112],{},"Öncelikle, GitHub profiliniz aşağıdakine benzer bir yapıda ise daha önce profiliniz için bir ",[53,106,109],{"href":107,"rel":108},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FREADME",[57],[20,110,111],{},"README.md"," dosyası, yani kendi kullanıcı adınızla bir repository oluşturulmamış demektir. Şimdi, birlikte kendi kullanıcı adımızla bir repository oluşturalım. :)",[16,114,115,119],{},[35,116],{"alt":117,"src":118},"Varsayılan Github Profile Görünümü","https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1600\u002F1*5JSPEdw3MoS9CATdELYtTw.png",[120,121,117],"em",{},[16,123,124,125,127,128,130,131,133],{},"Normal bir repository oluşturur gibi işlem yapıyoruz. Repository name alanına ",[20,126,87],{}," kullanıcı adımızı yazıyoruz. ",[20,129,87],{},", bu adı algılayarak bize özel bir profil repository’si oluşturacağımızı otomatik olarak tanıyor. Ardından, alt seçeneklerden Add a ",[20,132,26],{}," file seçeneğini işaretleyerek repository’yi oluşturuyoruz.",[16,135,136,140],{},[35,137],{"alt":138,"src":139},"Repository Oluşturma Aşaması","https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1600\u002F1*9jx7cfqIqdPvsLFgva20QA.png",[120,141,138],{},[16,143,144,148],{},[35,145],{"alt":146,"src":147},"Readme Oluşturulmuş Repository Görünümü","https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1600\u002F1*RSWt5LPUIr7meeukzUSDlw.png",[120,149,146],{},[16,151,152,156],{},[35,153],{"alt":154,"src":155}," Readme Oluşturulmuş Profil Görünümü","https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1200\u002F1*G9shh7CqKYH_2tgjE_dtXQ.png",[120,157,158],{},"Readme Oluşturulmuş Profil Görünümü",[16,160,161],{},"Repository’yi oluşturduktan sonra, repository’niz görseldeki gibi (Sol) bir yapıya sahip olacaktır. Profiliniz ise görseldeki gibi (Sağ) bir görünüm kazanacaktır.",[16,163,164,165,167],{},"Artık profil ",[20,166,26],{},"’nizi doldurma ve güzelleştirme zamanı geldi. Peki, bunu nasıl yapacağız? Hemen bir şeyler yaratmak zor olabilir, ancak bunu kolaylaştıracak araçlar mevcut. 😎",[39,169,171],{"id":170},"github-profilimi-nasıl-i̇yi-hale-getiririm-nasıl-doldurabilirim","Github Profilimi Nasıl İyi Hale Getiririm? Nasıl doldurabilirim?",[16,173,174],{},"Aslında bunun için bir çok araç olduğundan yazının yukarısında bahsetmiştim. Bu yüzden endişe edeceğimiz bir durum yok. Hatta kötü olduğunu düşünüyorsanız bile iyi yapacak fikirler için bile websiteler mevcut. Bu araçlara gelecek olursak ;",[176,177,178,209,230],"ol",{},[50,179,180,187,188,193,194,80,201,208],{},[53,181,184],{"href":182,"rel":183},"https:\u002F\u002Frahuldkjain.github.io\u002Fgh-profile-readme-generator\u002F",[57],[20,185,186],{},"Github Profile Readme Generator",": Belki de en basit, kullanımı kolay ve en çok bilinen araçlardan biri olduğunu söyleyebilirim. ",[53,189,192],{"href":190,"rel":191},"https:\u002F\u002Fgithub.com\u002Frahuldkjain",[57],"Rahuldkjain"," tarafından geliştirilen bu güzel açık kaynak proje, seçimlerinizi yaparak ve birkaç temel bilgiyi doldurarak profilinizi oluşturmanızı sağlıyor. Proje, ilk başlarda standart şablonlar üzerinde çalışıyordu, ancak günümüzde ",[53,195,198],{"href":196,"rel":197},"https:\u002F\u002Fmedium.com\u002F",[57],[20,199,200],{},"Medium",[53,202,205],{"href":203,"rel":204},"http:\u002F\u002Fdev.to\u002F",[57],[20,206,207],{},"Dev.to"," yazılarınızı bile otomatik olarak profilinize eklemenizi sağlayan bir eklenti ile birlikte geliyor.",[50,210,211,218,219,80,224,229],{},[53,212,215],{"href":213,"rel":214},"https:\u002F\u002Fprofilinator.rishav.dev\u002F",[57],[20,216,217],{},"Profilinator",": Rishav’ın geliştirdiği bu araç ise basit bir editor aracılıyla yapmış olduğunu stili ve tasarımları değiştirebiliyorsunuz. Örneğin sayfayı 3’e bölmek gibi. Yine burada ",[53,220,222],{"href":196,"rel":221},[57],[20,223,200],{},[53,225,227],{"href":203,"rel":226},[57],[20,228,207],{}," yazılarınızı otomatik olarak ekleyebilirsiniz.",[50,231,232,239],{},[53,233,236],{"href":234,"rel":235},"https:\u002F\u002Fgprm.itsvg.in\u002F",[57],[20,237,238],{},"GPRM",": Rahul’un yaptığından farklı olarak bu aracımızda bazı stillemeler ve özellikleri daha kolay olarak seçerek tercih edebiliyor farklı bir tasarım dili ortaya çıkartabiliyorsunuz.",[16,241,242],{},"Eğer ki araç kullanmak istemiyorum. Stilleri merak ediyorum kendim de ona göre yapacağım derseniz;",[16,244,245],{},[35,246],{"alt":247,"src":248},"Awesome Github Profile","https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1600\u002F1*FxGxbd4Z5wVuzctK1-sbRg.png",[47,250,251],{},[50,252,253,260],{},[53,254,257],{"href":255,"rel":256},"https:\u002F\u002Fzzetao.github.io\u002Fawesome-github-profile\u002F",[57],[20,258,259],{},"Awesome Github Profile",": Burada ise farklı yazılım geliştiricilerin kendi sayfalarını paylaştığı ve stil tarz anlamında farkılıkları görebileceğiniz ve esinlenip kendinize uyarlayabileceğiniz mükemmel bir site.",[39,262,264],{"id":263},"github-repolarımız-nedenönemli","Github Repolarımız Neden Önemli?",[16,266,267,268,271,272,275,276,279],{},"Repolarımız bizim yapmış olduğumuz öğrendiğimiz her teknolojinin, her projenin veya yapmış olduğumuz küçük ",[20,269,270],{},"PoC","(Proof of Concept)’ler barındırması dolayısıyla önem arz ediyor. Çünkü burada yapmış olduğumuz projeler bir konu hakkında bilgimizi, kod yazma kalitemizi, yapısal bilgilerimizi veya en azından o konu ile alakalı aşinalığımızı ispatlar nitelikte olmuş oluyor. Örneğin; Bir mülakatta “",[120,273,274],{},"A Framework’ünü kullanmayı biliyorum","” demeniz ile “",[120,277,278],{},"A Framework’ü ile bir kaç temel projeye sahibim","” demeniz arasında dağlar kadar fark var. En basit haliyle size devamında gelecek sorular genellikle hakim olduğunuz yerlerden olacaktır. Çünkü klasik tabir ile elinizi hamura buladınız.",[16,281,282,283,290,291,298],{},"Bu repoların bir diğer önemi, projelerinizin hangi standartlara uygun olarak geliştirildiğini göstermesidir. Hangi şirkete giderseniz gidin, belirli standartlara uyum sağlamanız beklenecektir. Örneğin, git commit mesajlarınızın anlamlı ve belli bir yapı çerçevesinde olması beklenir. Çoğu açık kaynak projede ",[53,284,287],{"href":285,"rel":286},"https:\u002F\u002Fwww.conventionalcommits.org\u002Fen\u002Fv1.0.0-beta.2\u002F",[57],[20,288,289],{},"Conventional Commits"," yapısı tercih edilir ve siz de commit mesajlarınızı bu standartlara uygun hale getirebilirsiniz. Ayrıca, versiyonlama için ",[53,292,295],{"href":293,"rel":294},"https:\u002F\u002Fsemver.org\u002F",[57],[20,296,297],{},"Semantic Versioning"," gibi bir yapıyı öğrenmek ve uygulamak da oldukça faydalı olacaktır. Bu tür yaklaşımlar, projenize verdiğiniz önemi ve profesyonelliğinizi yansıtır.",[39,300,302],{"id":301},"github-repolarımızın-görünümü-nasıl-i̇yi-yapabiliriz","Github Repolarımızın Görünümü Nasıl İyi Yapabiliriz?",[16,304,305,306,308],{},"Bir projenin iyi bir izlenim bırakması için en önemli unsurlardan biri ",[20,307,26],{}," dosyasıdır. İyi bir README dosyası, projeyi anlamayı ve kullanmayı kolaylaştırır. Aşağıdaki başlıklar, README’nizi daha etkili hale getirmek için bir rehber niteliğindedir:",[47,310,311,321,331,348],{},[50,312,313,316,317,320],{},[20,314,315],{},"Proje Adı",": Projenin kimliğidir ve ilk izlenimi oluşturur. Projenizi tanımlayan kısa ve anlaşılır bir başlık seçin. Örneğin, “",[20,318,319],{},"Hava Durumu Tahmin Uygulamas","ı” gibi.",[50,322,323,326,327,330],{},[20,324,325],{},"Projenin Amac","ı: Projenizin ne işe yaradığını, hangi sorunu çözdüğünü veya hangi ihtiyacı karşıladığını kısa ve öz bir şekilde açıklayın. “",[120,328,329],{},"Bu proje, kullanıcılara gerçek zamanlı hava durumu bilgileri sağlamayı amaçlamaktadır. Basit ve kullanıcı dostu bir arayüzle şehir bazlı tahminlere ulaşabilirsiniz.","”",[50,332,333,336,337],{},[20,334,335],{},"Projenin Özellikleri",": Projenizin temel özelliklerini listeleyin. Kullanıcılar bu bölümde projenizin neler sunduğunu öğrenebilir.",[47,338,339,342,345],{},[50,340,341],{},"Şehir bazlı hava durumu tahmini",[50,343,344],{},"Gerçek zamanlı güncellemeler",[50,346,347],{},"Kullanıcı dostu arayüz",[50,349,350,353],{},[20,351,352],{},"Kurulum Talimatları",": Projenizin nasıl kurulacağını ve çalıştırılacağını adım adım açıklayın. Teknik bilgi seviyesi farklı olan kullanıcılar için basit bir rehber oluşturun.",[355,356,361],"pre",{"className":357,"code":359,"language":360},[358],"language-text","1. Depoyu klonlayın:\n  `git clone \u003Chttps:\u002F\u002Fgithub.com\u002Fkullaniciadi\u002Fproje-adi.git>`\n2. Gerekli bağımlılıkları yükleyin:\n  `npm install`\n3. Uygulamayı başlatın:\n  `npm run dev`\n","text",[362,363,359],"code",{"__ignoreMap":364},"",[47,366,367,376],{},[50,368,369,372,373],{},[20,370,371],{},"Kullanım Kılavuzu",": Projenizin nasıl kullanılacağını açıklayın. Bu bölümde örnek ekran görüntüleri veya komutlar paylaşabilirsiniz. ",[120,374,375],{},"“Ana sayfadan bir şehir seçerek hava durumunu görüntüleyebilirsiniz.”",[50,377,378,381],{},[20,379,380],{},"Katkıda Bulunma",": Projenize nasıl katkıda bulunulabileceğini açıklayın. Kullanıcıların projeye dahil olması için rehberlik sunun.",[355,383,386],{"className":384,"code":385,"language":360},[358],"- 🛠 Bu projeyi fork edin\n- Değişikliklerinizi yapın\n- Bir pull request gönderin\n",[362,387,385],{"__ignoreMap":364},[47,389,390],{},[50,391,392,395],{},[20,393,394],{},"Lisans:"," Projenizin lisansını belirleyin. Bu, kullanıcıların projenizi nasıl kullanabileceğini ve değiştirebileceğini açıklar. Örneğin: “”Bu proje MIT Lisansı ile lisanslanmıştır. Daha fazla bilgi için LICENSE dosyasına bakabilirsiniz.”",[16,397,398],{},"Genel olarak bir README dosyası 7–8 ana başlık altında yapılandırılır, ancak bu başlık sayısı, projenizde vermek istediğiniz detaylara göre değişiklik gösterebilir. Markdown bilginiz olmasa bile, aşağıda paylaştığım birkaç kullanışlı araç sayesinde repolarınızı daha anlaşılır ve estetik hale getirebilirsiniz:",[47,400,401,418,435,455],{},[50,402,403,406,407,414,415,417],{},[20,404,405],{},"Detaylarla uğraşmak istemeyenler için:"," Eğer sadece birkaç tuşlama ile hazır bir yapı oluşturmak istiyorsanız, CLI tabanlı bir araç olan ",[53,408,411],{"href":409,"rel":410},"https:\u002F\u002Fgithub.com\u002Fkefranabg\u002Freadme-md-generator",[57],[20,412,413],{},"Readme MD Generator"," tam size göre! Bu araç, temel bilgileri doldurarak hızlıca bir ",[20,416,26],{}," oluşturmanızı sağlar.",[50,419,420,423,424,431,432,434],{},[20,421,422],{},"Sürükle-bırak yöntemiyle çalışanlar için:"," Eğer daha görsel ve pratik bir çözüm arıyorsanız, ",[53,425,428],{"href":426,"rel":427},"https:\u002F\u002Freadme.so\u002F",[57],[20,429,430],{},"readme.so",", ihtiyacınızı karşılayabilir. Sadece bilgilerinizi güncelleyerek kısa sürede şık bir ",[20,433,26],{}," oluşturabilirsiniz.",[50,436,437,440,441,443,444,451,452,454],{},[20,438,439],{},"Her şeyi kendisi yapmayı sevenler için:"," Eğer “Ben old school’um, her şeyi kendim yaparım, ",[20,442,26],{},"’mi de kendim yazarım” diyorsanız, ",[53,445,448],{"href":446,"rel":447},"https:\u002F\u002Fwww.makeareadme.com\u002F",[57],[20,449,450],{},"makeareadme.com"," sizin için ideal bir kaynak. Burada ",[20,453,26],{}," yazmanın neden önemli olduğunu öğrenebilir ve yazım sürecini destekleyecek bir editör kullanabilirsiniz.",[50,456,457,460,461,464,465,472,473,475],{},[20,458,459],{},"Farklı projelerden ilham almak isteyenler için:"," Eğer “",[120,462,463],{},"Diğer projeler bunu nasıl yapıyor?","” diye merak ediyorsanız, ",[53,466,469],{"href":467,"rel":468},"https:\u002F\u002Fgithub.com\u002Fmatiassingers\u002Fawesome-readme",[57],[20,470,471],{},"Awesome README"," tam da bu ihtiyaca yönelik. NASA’nın OGMA projesi gibi birçok farklı projeden örnek ",[20,474,26],{}," dosyalarını inceleyerek ilham alabilirsiniz.",[39,477,479],{"id":478},"github-repositorylerinizde-sadelik-ve-düzen-nasıl-sağlanır","GitHub Repository’lerinizde Sadelik ve Düzen Nasıl Sağlanır?",[16,481,482],{},"GitHub projelerinizin hem estetik hem de işlevsel açıdan daha düzenli görünmesi, diğer kullanıcıların projeyi anlamasını ve kullanmasını kolaylaştırır. Aşağıda bu süreci adım adım açıklıyorum.",[39,484,486],{"id":485},"_1-repository-detaylarını-düzenleyin",[20,487,488],{},"1. Repository Detaylarını Düzenleyin",[16,490,491,492,495],{},"Görsel 1-2'de olduğu gibi, repository bilgilerinizi düzenlemek için üst kısımdaki ",[20,493,494],{},"“Settings”"," sekmesine giderek detayları doldurabilirsiniz.",[16,497,498],{},[20,499,500],{},"Eylemler:",[47,502,503,509,515],{},[50,504,505,508],{},[20,506,507],{},"Description (Açıklama):"," Kısa bir cümle ile projenizin amacını yazın. (Örn: “Hava Durumu Uygulaması”)",[50,510,511,514],{},[20,512,513],{},"Website:"," Eğer projenize ait bir demo veya dökümantasyon linki varsa buraya ekleyin.",[50,516,517,520],{},[20,518,519],{},"Topics:"," Projenizin kategorilerini (örn: vue3, gpt-4) ekleyerek arama sonuçlarında daha görünür hale getirin.",[16,522,523,526],{},[20,524,525],{},"Neden Önemli?"," Bu bilgiler, proje sayfasını ziyaret eden kullanıcıların proje hakkında hızlıca bilgi edinmesini sağlar. Ayrıca doğru doldurulmuş bir açıklama, arama motorlarında projenizin daha kolay bulunmasına katkı sunar.",[16,528,529],{},[35,530],{"alt":531,"src":532},"Repository Detaylarını Düzenleme Görsel-1","https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1200\u002F1*_rhZjgWjzvdWh8NNsKHY2Q.png",[16,534,535],{},[35,536],{"alt":537,"src":538},"Repository Detaylarını Düzenleme Görsel-2","https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1600\u002F1*mNPb_TxUCso6RTr3rMQcAg.png",[39,540,542],{"id":541},"_2-gereksiz-alanlarıkapatın",[20,543,544],{},"2. Gereksiz Alanları Kapatın",[16,546,547,548,551,552,555,556,559,560,563],{},"Eğer projenizde bir ",[20,549,550],{},"Release",", ",[20,553,554],{},"Package"," ya da ",[20,557,558],{},"Deployment"," kullanımı yoksa, bunları devre dışı bırakabilirsiniz (",[120,561,562],{},"Görsel 1–2",").",[16,565,566],{},[20,567,500],{},[47,569,570],{},[50,571,572],{},"“Edit repository details” menüsünden ilgili kutucukları işaretleyerek ya da kaldırarak gereksiz özellikleri kapatın.",[16,574,575,577],{},[20,576,525],{}," Boş veya kullanılmayan alanlar, repository’nin gereksiz kalabalık görünmesine neden olabilir. Sadece aktif olarak kullanılan özellikleri açık bırakmak, projenize sadelik ve profesyonellik katar.",[39,579,581],{"id":580},"_3-özelleştirme-için-wiki-issues-ve-projectsayarları",[20,582,583],{},"3. Özelleştirme için Wiki, Issues ve Projects Ayarları",[16,585,586,587,551,590,593,594,597],{},"Görsel 3 ve Görsel 4'da gösterildiği gibi, ",[20,588,589],{},"Wiki",[20,591,592],{},"Issues"," ve ",[20,595,596],{},"Projects"," özelliklerini projenizin ihtiyaçlarına göre açıp kapatabilirsiniz.",[16,599,600],{},[20,601,500],{},[47,603,604,614,624],{},[50,605,606,609,610,613],{},[20,607,608],{},"Wiki:"," Eğer proje için dökümantasyon yazmak istiyorsanız açık bırakın. Sadece proje ekibinin düzenlemesine izin vermek için ",[20,611,612],{},"“Restrict editing to collaborators only”"," seçeneğini işaretleyin.",[50,615,616,619,620,623],{},[20,617,618],{},"Issues:"," Eğer projeye katkı sağlanmasını istiyorsanız bu alanı açık bırakın. Ayrıca, düzenli takip için bir ",[20,621,622],{},"Issue Template"," ekleyebilirsiniz.",[50,625,626,629],{},[20,627,628],{},"Projects:"," Projeye özel görevlerinizi ve takvimlerinizi burada yönetmek istiyorsanız açık bırakabilirsiniz.",[16,631,632,634],{},[20,633,525],{}," Bu alanların ihtiyaçlara göre yönetilmesi, repository’nin daha düzenli ve hedef odaklı olmasını sağlar. Kullanılmayan özellikler, gereksiz karmaşaya neden olur.",[16,636,637],{},[35,638],{"alt":639,"src":640},"Görsel-3","https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1600\u002F1*2DYnnUjmiLIGemx84pKItg.png",[16,642,643],{},[35,644],{"alt":645,"src":646},"Görsel-4","https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F2400\u002F1*RamIFeNPXQDfn5Y3JP5KOQ.png",[39,648,650],{"id":649},"_4-doldurulması-gereken-alanları-atlamayın",[20,651,652],{},"4. Doldurulması Gereken Alanları Atlamayın",[16,654,655,656,659,660,551,663,666],{},"Repository’nizin ",[20,657,658],{},"About"," bölümündeki boşluklar veya eksik bilgiler (örneğin ",[120,661,662],{},"Description",[120,664,665],{},"Topics",") repository’nin eksik ve ilgisiz görünmesine yol açabilir.",[16,668,669],{},[20,670,500],{},[47,672,673,676],{},[50,674,675],{},"Tüm gerekli alanları doldurun.",[50,677,678],{},"Projenizle uyumlu bir açıklama ve etiketler kullanarak profesyonel bir görünüm elde edin.",[16,680,681,683],{},[20,682,525],{}," Eksik bilgiler, kullanıcıların proje hakkında bilgi edinmesini zorlaştırır ve repository’nin amatör görünmesine neden olabilir.",[39,685,687],{"id":686},"_5-dil-kullanımı-ve-görsellik",[20,688,689],{},"5. Dil Kullanımı ve Görsellik",[16,691,692,693,696,697,699],{},"Repository’nizde kullanılan programlama dillerini temsil eden ",[20,694,695],{},"Languages"," kısmı, projeyi inceleyen kişilere kod yapınız hakkında bilgi verir. Ayrıca ",[20,698,26],{},"’nizi etkili görsellerle destekleyerek projenizi daha çekici hale getirin.",[16,701,702],{},[20,703,500],{},[47,705,706,711],{},[50,707,708,710],{},[20,709,26],{}," dosyasına proje yapısını ve kullanımını anlatan ekran görüntüleri ekleyin.",[50,712,713],{},"Kod snippet’leriyle örnek kullanım talimatlarını gösterin.",[16,715,716,718],{},[20,717,525],{}," Hem yazılı hem görsel açıklamalar, kullanıcıların projeyi daha hızlı anlamasına yardımcı olur ve katkıda bulunmalarını teşvik eder.",[39,720,722],{"id":721},"_6-sonuç-daha-özgün-ve-sade-bir-repository",[20,723,724],{},"6. Sonuç: Daha Özgün ve Sade Bir Repository",[16,726,727,728,730],{},"Bu adımları uygulayarak, ",[20,729,87],{}," repository’nizi gereksiz detaylardan arındırabilir, daha profesyonel ve kullanıcı dostu bir görünüm kazandırabilirsiniz. Düzenli ve güncel bir proje sayfası, projenizin genel görünümünü ve kalitesini hızlıca değerlendirmek isteyen kullanıcılar için büyük önem taşır. Sadelik ve işlevsellik, hem kullanıcıların ilgisini çeker hem de katkı sağlamak isteyenler için motive edici bir etki yaratır.",[732,733,734],"blockquote",{},[16,735,736],{},"Unutmayın, iyi tasarlanmış bir repository, projenizi anlatmanın ve topluluğun ilgisini çekmenin en etkili yoludur! — ChatGPT",[16,738,739],{},"Bu yazıda, GitHub\u002FGitLab profillerinin ve README dosyalarının önemine odaklanarak, bunları nasıl daha iyi hale getirebileceğinizle ilgili önemli noktaları ve araçları paylaştım.",[16,741,742,762],{},[20,743,744,745,750,751,80,756,761],{},"Sorularınız veya önerileriniz varsa, ",[53,746,749],{"href":747,"rel":748},"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Feralpozcan\u002F",[57],"LinkedIn"," hesabımdan bana ulaşabilirsiniz. Diğer hesaplarıma ise ",[53,752,755],{"href":753,"rel":754},"https:\u002F\u002Fbento.me\u002Feralpozcan",[57],"Bento.me\u002Feralpozcan",[53,757,760],{"href":758,"rel":759},"https:\u002F\u002Feralpozcan.dev\u002F",[57],"eralpozcan.dev"," üzerinden erişebilirsiniz."," 🤖",[16,764,765,766,773],{},"Beni ",[53,767,770],{"href":768,"rel":769},"https:\u002F\u002Fgithub.com\u002Feralpozcan",[57],[20,771,772],{},"Githubdan"," takip etmeyi ve yorumlara Github adreslerinizi bırakmayı unutmayın 🎁",[16,775,776],{},"Bir sonraki yazıda görüşmek üzere! 📩",{"title":364,"searchDepth":778,"depth":778,"links":779},2,[780,782,783,784,785,786,787,788,789,790,791,792,793],{"id":41,"depth":781,"text":42},3,{"id":68,"depth":781,"text":69},{"id":100,"depth":781,"text":101},{"id":170,"depth":781,"text":171},{"id":263,"depth":781,"text":264},{"id":301,"depth":781,"text":302},{"id":478,"depth":781,"text":479},{"id":485,"depth":781,"text":488},{"id":541,"depth":781,"text":544},{"id":580,"depth":781,"text":583},{"id":649,"depth":781,"text":652},{"id":686,"depth":781,"text":689},{"id":721,"depth":781,"text":724},"2024-11-19","Herkese merhaba! Bu yazıda, GitHub\u002FGitLab profillerimizi, repolarımızı ve README dosyalarımızı nasıl daha etkili ve profesyonel hale getirebileceğimizi ele alacağım. Bunun yanı sıra, neden bu kadar önemli olduklarına dair bilgiler paylaşacağım. GitHub Nedir? \u002F GitLab Nedir? gibi temel soruların ötesine geçerek, birçok kişinin gözden kaçırdığı ancak global ölçekte oldukça önemsenen noktalara değineceğim.","md",null,{"card_description":795,"cover":799,"language":800,"links":801},"\u002Fassets\u002Fimages\u002Fblog\u002Fgithub.webp","TR",[802,804],{"medium":803},"https:\u002F\u002Fmedium.com\u002F@eralpozcan\u002Fgithub-nasil-daha-iyi-hale-getirilir-profil-nasil-hazirlanir-readme-nasil-yazilir-ed85fa3f60fb",{"devto":805},"https:\u002F\u002Fdev.to\u002Feralpozcan\u002Fgithubimiz-nasil-daha-iyi-hale-getirilir-profil-nasil-hazirlanir-readme-nasil-yazilir-11ap",true,"\u002Fblog\u002Fgithub-nasil-daha-iyi-hale-getirilir-profil-nasil-hazirlanir-readme-nasil-yazilir","15",{"title":6,"description":795},{"loc":811,"lastmod":794,"changefreq":812,"priority":813},"http:\u002F\u002Feralpozcan.dev\u002Fblog\u002Fgithub-nasil-daha-iyi-hale-getirilir-profil-nasil-hazirlanir-readme-nasil-yazilir","monthly",0.8,"blog\u002Fgithub-nasil-daha-iyi-hale-getirilir-profil-nasil-hazirlanir-readme-nasil-yazilir",[87,90,26,816,817,818,819],"Profil","Geliştirici","Portfolio","Açık Kaynak","Kmk3QX7XGFxeIS6cG26sAg432n6pYOCd8V1DmPbFIt8",{"id":822,"title":823,"body":824,"date":794,"description":1523,"extension":796,"image":797,"meta":1524,"navigation":806,"ogImage":799,"path":1532,"readingTime":808,"robots":797,"schemaOrg":797,"seo":1533,"sitemap":1534,"stem":1536,"tags":1537,"__hash__":1541},"blog\u002Fblog\u002Fhow-to-improve-our-github-how-to-prepare-a-profile-how-to-write-a-readme.md","How to Improve Our GitHub? How to Prepare a Profile? How to Write a README?",{"type":8,"value":825,"toc":1514},[826,829,840,844,850,853,867,873,884,887,894,900,908,919,927,936,944,947,953,959,962,996,999,1004,1015,1021,1028,1062,1068,1075,1119,1125,1142,1148,1159,1165,1218,1224,1227,1233,1240,1245,1263,1268,1271,1277,1279,1285,1287,1293,1308,1312,1321,1325,1328,1334,1345,1349,1372,1376,1379,1387,1395,1401,1407,1411,1419,1423,1426,1432,1438,1442,1450,1454,1457,1463,1466,1469,1474,1483,1504,1511],[11,827,823],{"id":828},"how-to-improve-our-github-how-to-prepare-a-profile-how-to-write-a-readme",[16,830,831,832,835,836,839],{},"Hello everyone! In this article, I will cover how to make our ",[20,833,834],{},"GitHub\u002FGitLab profiles",", repositories, and README files more effective and professional. Additionally, I’ll explain why these elements are so important. Instead of focusing on questions like ",[20,837,838],{},"What is GitHub? \u002F What is GitLab?",", we’ll dive into often-overlooked but globally significant details.",[16,841,842],{},[35,843],{"alt":37,"src":37},[11,845,847],{"id":846},"what-is-github-what-is-gitlab",[20,848,849],{},"What is GitHub? What is GitLab?",[16,851,852],{},"I won’t go into these topics in detail, but for those who are curious, here are some excellent resources to check out:",[47,854,855,861],{},[50,856,857],{},[53,858,860],{"href":55,"rel":859},[57],"What is Git, GitHub, GitLab? Git Commands — Tuğçe Akın",[50,862,863],{},[53,864,866],{"href":63,"rel":865},[57],"What is Git? GitHub Usage and Basic Commands — İrem Ateş",[11,868,870],{"id":869},"why-are-github-or-gitlab-profiles-important",[20,871,872],{},"Why Are GitHub or GitLab Profiles Important?",[16,874,875,876,879,880,883],{},"The answer is straightforward: ",[20,877,878],{},"Your profile is your digital CV in the software world."," Whether you’re applying for a corporate position or working as a freelancer, your CV or portfolio is one of the most critical tools to showcase your skills and experience. In the software industry, the most effective form of this portfolio is your ",[20,881,882],{},"GitHub or GitLab profile",".",[16,885,886],{},"Moreover, GitHub’s ability to connect you with job opportunities globally makes the content of your profile even more crucial. Thus, not only should your profile be well-organized and professional, but the repositories you direct people to should also be structured, clear, and user-friendly. Your profile and repositories are the most powerful tools to represent you and reflect your skills.",[888,889,891],"h2",{"id":890},"so-how-do-you-do-this",[20,892,893],{},"So, How Do You Do This?",[16,895,896,897,899],{},"If your GitHub profile looks similar to the example below, you probably haven’t created a ",[20,898,111],{}," file or a repository with your username. Let’s create a repository using your GitHub username together! 😊",[16,901,902,905],{},[120,903,904],{},"Default GitHub Profile View",[35,906],{"alt":904,"src":907},"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1400\u002F1*5JSPEdw3MoS9CATdELYtTw.png",[16,909,910,911,914,915,918],{},"You can proceed just like creating a normal repository. Enter your ",[20,912,913],{},"GitHub username"," in the repository name field. GitHub will automatically recognize this as a special profile repository. Then, select ",[20,916,917],{},"Add a README file"," and create the repository.",[16,920,921,924],{},[20,922,923],{},"Repository Creation Stage",[35,925],{"alt":923,"src":926},"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1400\u002F1*9jx7cfqIqdPvsLFgva20QA.png",[16,928,929,932],{},[20,930,931],{},"Repository View",[35,933],{"alt":934,"src":935},"Repository View ","https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:4976\u002F1*RSWt5LPUIr7meeukzUSDlw.png",[16,937,938,941],{},[20,939,940],{},"Profile View",[35,942],{"alt":940,"src":943},"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:3828\u002F1*G9shh7CqKYH_2tgjE_dtXQ.png",[16,945,946],{},"After creating the repository, your repository will look like the one on the left in the image, and your profile will resemble the one on the right.",[16,948,949,950,952],{},"Now, it’s time to fill out and enhance your profile ",[20,951,26],{},". But how do you do it? Coming up with something from scratch might seem difficult, but there are tools to make this process easier. 😎",[11,954,956],{"id":955},"how-can-i-improve-my-github-profile",[20,957,958],{},"How Can I Improve My GitHub Profile?",[16,960,961],{},"There are plenty of tools to help with this, so there’s no need to worry. Even if you think your profile doesn’t look great right now, there are websites and ideas to guide you toward improvement. Here are a few tools you can use:",[176,963,964,976,988],{},[50,965,966,972,973,975],{},[53,967,969],{"href":182,"rel":968},[57],[20,970,971],{},"GitHub Profile README Generator",": This is one of the simplest and most well-known tools. Created by ",[20,974,192],{},", this excellent open-source project helps you design your profile by selecting a few options and filling out basic information. Initially, it worked with standard templates, but now it even allows you to integrate your Medium or Dev.to posts automatically.",[50,977,978,983,984,987],{},[53,979,981],{"href":213,"rel":980},[57],[20,982,217],{},": Developed by ",[20,985,986],{},"Rishav",", this tool lets you modify styles and layouts via a simple editor. For example, you can divide your page into three sections. It also supports automatic integration of Medium and Dev.to posts.",[50,989,990,995],{},[53,991,993],{"href":234,"rel":992},[57],[20,994,238],{},": Unlike Rahul’s tool, this one offers easier customization of styles and features, helping you create a unique design language for your profile.",[16,997,998],{},"If you prefer not to use a tool and want to design it yourself:",[16,1000,1001],{},[35,1002],{"alt":1003,"src":1003},"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1400\u002F1*FxGxbd4Z5wVuzctK1-sbRg.png",[47,1005,1006],{},[50,1007,1008,1014],{},[53,1009,1011],{"href":255,"rel":1010},[57],[20,1012,1013],{},"Awesome GitHub Profile",": This platform showcases various developer profiles, allowing you to explore different styles and adapt them to your own.",[11,1016,1018],{"id":1017},"why-are-github-repositories-important",[20,1019,1020],{},"Why Are GitHub Repositories Important?",[16,1022,1023,1024,1027],{},"Repositories play a crucial role in showcasing the technologies, projects, and even small ",[20,1025,1026],{},"Proof of Concept"," (PoC) work you’ve done. They demonstrate your knowledge, coding quality, structural skills, and at least your familiarity with a subject. For instance:",[47,1029,1030,1041,1044,1053],{},[50,1031,1032,1033,1036,1037,1040],{},"In a job interview, saying, “",[120,1034,1035],{},"I know Framework A","” is very different from saying, “",[120,1038,1039],{},"I have several projects using Framework A.","” It shows that you’ve gained hands-on experience.",[50,1042,1043],{},"Repositories also highlight your adherence to standards. Most companies, regardless of their level, have some development standards that you’ll need to follow. For example:",[50,1045,1046,1047,1052],{},"Writing meaningful commit messages following the ",[53,1048,1050],{"href":285,"rel":1049},[57],[20,1051,289],{}," structure.",[50,1054,1055,1056,1061],{},"Using ",[53,1057,1059],{"href":293,"rel":1058},[57],[20,1060,297],{}," for version control.",[11,1063,1065],{"id":1064},"how-can-we-improve-the-look-of-our-github-repositories",[20,1066,1067],{},"How Can We Improve the Look of Our GitHub Repositories?",[16,1069,1070,1071,1074],{},"One of the most important elements for making a good impression with a project is the ",[20,1072,1073],{},"README file",". A well-crafted README makes it easier to understand and use your project. The following headings serve as a guide to making your README more effective:",[47,1076,1077,1087,1096,1113],{},[50,1078,1079,1082,1083,1086],{},[20,1080,1081],{},"Project Name:"," This represents the identity of your project and creates the first impression. Choose a short and clear title that defines your project. For example, “",[20,1084,1085],{},"Weather Forecast Application",".”",[50,1088,1089,1092,1093],{},[20,1090,1091],{},"Project Purpose:"," Briefly explain what your project does, the problem it solves, or the need it fulfills. For instance, ",[120,1094,1095],{},"“This project aims to provide users with real-time weather information. It offers city-based forecasts through a simple and user-friendly interface.”",[50,1097,1098,1101,1102],{},[20,1099,1100],{},"Project Features:"," List the main features of your project. This section helps users understand what your project offers:\n",[47,1103,1104,1107,1110],{},[50,1105,1106],{},"City-based weather forecasts",[50,1108,1109],{},"Real-time updates",[50,1111,1112],{},"User-friendly interface",[50,1114,1115,1118],{},[20,1116,1117],{},"Setup Instructions:"," Provide a step-by-step guide on how to set up and run your project. Create a simple manual suitable for users with varying technical expertise.",[355,1120,1123],{"className":1121,"code":1122,"language":360},[358],"1. Clone the repository:\n  git clone https:\u002F\u002Fgithub.com\u002Fusername\u002Fproject-name.git\n2. Install dependencies:\n  npm install\n3. Run the application:\n  npm run dev\n",[362,1124,1122],{"__ignoreMap":364},[47,1126,1127,1136],{},[50,1128,1129,1132,1133],{},[20,1130,1131],{},"Usage Guide:"," Explain how to use your project. In this section, you can share example screenshots or commands. For instance: ",[120,1134,1135],{},"“You can view the weather by selecting a city from the homepage.”",[50,1137,1138,1141],{},[20,1139,1140],{},"Contributing:"," Explain how users can contribute to your project. Provide a guide to help users get involved in the development.",[355,1143,1146],{"className":1144,"code":1145,"language":360},[358],"- 🛠 Fork the repository.\n- Make changes.\n- Submit a pull request.\n",[362,1147,1145],{"__ignoreMap":364},[47,1149,1150],{},[50,1151,1152,1155,1156],{},[20,1153,1154],{},"License:"," Specify the license for your project. This clarifies how users can use and modify your project. For example: ",[120,1157,1158],{},"“This project is licensed under the MIT License. For more information, please refer to the LICENSE file.”",[16,1160,1161,1162,1164],{},"A typical ",[20,1163,26],{}," file is structured around 7–8 main sections, though the number of sections may vary depending on the level of detail you want to include in your project. Even if you don’t have Markdown knowledge, you can use the following tools to make your repositories more clear and visually appealing:",[47,1166,1167,1179,1191,1206],{},[50,1168,1169,1172,1173,1178],{},[20,1170,1171],{},"For those who want simplicity:"," If you prefer to quickly create a structure with just a few clicks, the CLI-based ",[53,1174,1176],{"href":409,"rel":1175},[57],[20,1177,413],{}," is perfect for you! This tool helps you fill in basic details to generate a README file in no time.",[50,1180,1181,1184,1185,1190],{},[20,1182,1183],{},"For drag-and-drop users:"," If you’re looking for a more visual and practical solution, ",[53,1186,1188],{"href":426,"rel":1187},[57],[20,1189,430],{}," might be exactly what you need. It allows you to update your information and create a sleek README in minutes.",[50,1192,1193,1196,1197,1202,1203,1205],{},[20,1194,1195],{},"For those who like to do it all themselves:"," If you’re more of a “hands-on” person who prefers to write everything from scratch, ",[53,1198,1200],{"href":446,"rel":1199},[57],[20,1201,450],{}," is an ideal resource. It not only explains the importance of a ",[20,1204,26],{}," but also provides an editor to assist in the writing process.",[50,1207,1208,1211,1212,1217],{},[20,1209,1210],{},"For inspiration from other projects:"," If you’re curious about how other developers approach their READMEs, ",[53,1213,1215],{"href":467,"rel":1214},[57],[20,1216,471],{}," is a great place to start. You can explore examples from various projects, including NASA’s OGMA project, and draw inspiration for your own.",[11,1219,1221],{"id":1220},"how-to-ensure-simplicity-and-organization-in-your-github-repositories",[20,1222,1223],{},"How to Ensure Simplicity and Organization in Your GitHub Repositories?",[16,1225,1226],{},"Having a well-organized and aesthetically pleasing GitHub repository not only enhances its visual appeal but also makes it easier for others to understand and use your project. Here’s a step-by-step guide to achieving simplicity and organization in your repositories:",[888,1228,1230],{"id":1229},"_1-edit-repository-details",[20,1231,1232],{},"1. Edit Repository Details",[16,1234,1235,1236,1239],{},"As shown in Images 1–2, you can edit your repository details by navigating to the “",[20,1237,1238],{},"Settings","” tab at the top of the page and filling in the necessary fields.",[16,1241,1242],{},[20,1243,1244],{},"Actions:",[47,1246,1247,1253,1258],{},[50,1248,1249,1252],{},[20,1250,1251],{},"Description:"," Write a short sentence explaining the purpose of your project. (e.g., “Weather Forecast Application”).",[50,1254,1255,1257],{},[20,1256,513],{}," Add a link to your project’s demo or documentation if available.",[50,1259,1260,1262],{},[20,1261,519],{}," Include relevant categories for your project (e.g., vue3, gpt-4) to improve visibility in search results.",[16,1264,1265],{},[20,1266,1267],{},"Why Is This Important?",[16,1269,1270],{},"These details help users visiting your project page quickly understand its purpose. Additionally, a well-crafted description enhances your repository’s discoverability on search engines.",[16,1272,1273],{},[35,1274],{"alt":1275,"src":1276},"Edit Repository Details( Screen 1 )","https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1274\u002F1*_rhZjgWjzvdWh8NNsKHY2Q.png",[16,1278,1275],{},[16,1280,1281],{},[35,1282],{"alt":1283,"src":1284},"Edit Repository Details( Screen 2 )","https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1278\u002F1*mNPb_TxUCso6RTr3rMQcAg.png",[16,1286,1283],{},[888,1288,1290],{"id":1289},"_2-disable-unnecessary-features",[20,1291,1292],{},"2. Disable Unnecessary Features",[16,1294,1295,1296,1299,1300,1303,1304,1307],{},"If your project doesn’t use ",[20,1297,1298],{},"Releases",", ",[20,1301,1302],{},"Packages",", or ",[20,1305,1306],{},"Deployments",", you can disable these features (as shown in Images 1–2).",[16,1309,1310],{},[20,1311,1244],{},[47,1313,1314],{},[50,1315,1316,1317,1320],{},"Go to the ",[20,1318,1319],{},"“Edit repository details”"," menu and check or uncheck the relevant boxes to disable unnecessary features.",[16,1322,1323],{},[20,1324,1267],{},[16,1326,1327],{},"Unused or empty sections can make your repository look cluttered. Keeping only actively used features visible adds simplicity and professionalism to your project.",[888,1329,1331],{"id":1330},"_3-customize-wiki-issues-and-projects-settings",[20,1332,1333],{},"3. Customize Wiki, Issues, and Projects Settings",[16,1335,1336,1337,1299,1339,1341,1342,1344],{},"As shown in Images 3 and 4, you can enable or disable ",[20,1338,589],{},[20,1340,592],{},", and ",[20,1343,596],{}," based on your project’s requirements.",[16,1346,1347],{},[20,1348,1244],{},[47,1350,1351,1359,1367],{},[50,1352,1353,1355,1356,1358],{},[20,1354,608],{}," Keep this open if you need a space for project documentation. Restrict editing to collaborators by enabling the ",[20,1357,612],{}," option.",[50,1360,1361,1363,1364,1366],{},[20,1362,618],{}," Enable this feature to allow contributions and bug tracking. You can also add an ",[20,1365,622],{}," for structured feedback.",[50,1368,1369,1371],{},[20,1370,628],{}," Use this section to manage project-specific tasks and timelines. Enable it if task management within the repository is necessary.",[16,1373,1374],{},[20,1375,1267],{},[16,1377,1378],{},"Managing these features according to your project’s needs keeps the repository organized and focused. Disabling unused features prevents unnecessary clutter and enhances the repository’s usability.",[16,1380,1381,1384],{},[20,1382,1383],{},"Screen - 3",[35,1385],{"alt":1383,"src":1386},"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1400\u002F1*2DYnnUjmiLIGemx84pKItg.png",[16,1388,1389,1392],{},[20,1390,1391],{},"Screen - 4",[35,1393],{"alt":1391,"src":1394},"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1620\u002F1*RamIFeNPXQDfn5Y3JP5KOQ.png",[888,1396,1398],{"id":1397},"_4-fill-in-required-fields",[20,1399,1400],{},"4. Fill in Required Fields",[16,1402,1403,1404,1406],{},"Empty or missing details in your repository’s ",[20,1405,658],{}," section (e.g., Description, Topics) can make the repository appear incomplete and unappealing.",[16,1408,1409],{},[20,1410,1244],{},[47,1412,1413,1416],{},[50,1414,1415],{},"Fill in all required fields.",[50,1417,1418],{},"Use a description and tags that align with your project to achieve a professional appearance.",[16,1420,1421],{},[20,1422,1267],{},[16,1424,1425],{},"Incomplete information makes it harder for users to understand your project and can make the repository seem amateurish.",[888,1427,1429],{"id":1428},"_5-language-usage-and-visuals",[20,1430,1431],{},"5. Language Usage and Visuals",[16,1433,1434,1435,1437],{},"The ",[20,1436,695],{}," section in your repository reflects the programming languages used, giving users insights into your code structure. Additionally, enhancing your README file with effective visuals can make your project more appealing.",[16,1439,1440],{},[20,1441,1244],{},[47,1443,1444,1447],{},[50,1445,1446],{},"Add screenshots or diagrams in the README file to explain the project’s structure and usage.",[50,1448,1449],{},"Include code snippets with usage instructions to provide clear guidance.",[16,1451,1452],{},[20,1453,1267],{},[16,1455,1456],{},"Both textual and visual explanations help users quickly grasp the project and encourage contributions.",[888,1458,1460],{"id":1459},"_6-conclusion-a-more-unique-and-streamlined-repository",[20,1461,1462],{},"6. Conclusion: A More Unique and Streamlined Repository",[16,1464,1465],{},"By following these steps, you can simplify and refine your GitHub repository, making it more professional and user-friendly. A well-organized and up-to-date project page is crucial for users looking to evaluate the quality and relevance of your project. Simplicity and functionality not only attract users but also motivate potential contributors.",[16,1467,1468],{},"A polished repository is the most effective way to showcase your project and engage the community!",[732,1470,1471],{},[16,1472,1473],{},"Remember, a well-designed repository is the most effective way to present your project and capture the community’s interest! — ChatGPT",[16,1475,1476,1477,1479,1480,1482],{},"In this article, I focused on the importance of ",[20,1478,22],{}," profiles and ",[20,1481,26],{}," files, sharing key points and tools to help you improve them.",[16,1484,1485,1486,1491,1492,1497,1498,1503],{},"If you have any questions or suggestions, feel free to reach out to me via my ",[53,1487,1489],{"href":747,"rel":1488},[57],[20,1490,749],{}," profile. You can also find me on ",[53,1493,1495],{"href":753,"rel":1494},[57],[20,1496,755],{}," or ",[53,1499,1501],{"href":758,"rel":1500},[57],[20,1502,760],{},". 🤖",[16,1505,1506,1507,1510],{},"Don’t forget to follow me on ",[53,1508,87],{"href":768,"rel":1509},[57]," and drop your GitHub profiles in the comments 🎁",[16,1512,1513],{},"See you in the next article! 📩",{"title":364,"searchDepth":778,"depth":778,"links":1515},[1516,1517,1518,1519,1520,1521,1522],{"id":890,"depth":778,"text":893},{"id":1229,"depth":778,"text":1232},{"id":1289,"depth":778,"text":1292},{"id":1330,"depth":778,"text":1333},{"id":1397,"depth":778,"text":1400},{"id":1428,"depth":778,"text":1431},{"id":1459,"depth":778,"text":1462},"Hello everyone! In this article, I will cover how to make our GitHub\u002FGitLab profiles, repositories, and README files more effective and professional. Additionally, I’ll explain why these elements are so important. Instead of focusing on questions like What is GitHub? \u002F What is GitLab?, we’ll dive into often-overlooked but globally significant details.",{"card_description":1525,"cover":799,"language":1526,"links":1527},"Hello everyone! In this article, I will cover how to make our GitHub\u002FGitLab profiles, repositories, and README files more effective and professional. Additionally, I'll explain why these elements are so important. Instead of focusing on questions like What is GitHub? \u002F What is GitLab?, we'll dive into often-overlooked but globally significant details.","EN",[1528,1530],{"medium":1529},"https:\u002F\u002Fmedium.com\u002Fhow-to-use\u002Fhow-to-improve-our-github-how-to-prepare-a-profile-how-to-write-a-readme-e8f191311ad8",{"devto":1531},"https:\u002F\u002Fdev.to\u002Feralpozcan\u002Fhow-to-improve-our-github-how-to-prepare-a-profile-how-to-write-a-readme-386h","\u002Fblog\u002Fhow-to-improve-our-github-how-to-prepare-a-profile-how-to-write-a-readme",{"title":823,"description":1523},{"loc":1535,"lastmod":794,"changefreq":812,"priority":813},"http:\u002F\u002Feralpozcan.dev\u002Fblog\u002Fhow-to-improve-our-github-how-to-prepare-a-profile-how-to-write-a-readme","blog\u002Fhow-to-improve-our-github-how-to-prepare-a-profile-how-to-write-a-readme",[87,90,26,1538,1539,818,1540],"Profile","Developer","Open Source","JIQNFA440DdgRnUxc1qsytU1IE-0ezu6cCeJR4IpAHw",{"id":1543,"title":1544,"body":1545,"date":4106,"description":4107,"extension":796,"image":797,"meta":4108,"navigation":806,"ogImage":4110,"path":4116,"readingTime":4117,"robots":797,"schemaOrg":797,"seo":4118,"sitemap":4119,"stem":4121,"tags":4122,"__hash__":4129},"blog\u002Fblog\u002Fhow-to-use-object-recognition-with-tensorflowjs-and-vue-3.md","How to Use Object Recognition with TensorFlow.js and Vue 3?",{"type":8,"value":1546,"toc":4091},[1547,1550,1571,1591,1597,1606,1619,1631,1635,1656,1730,1737,1748,1764,1782,1810,1814,1822,1832,1859,1880,1884,1891,1927,1952,1957,1988,1992,1995,2095,2101,2130,2134,2137,2160,2432,2435,2453,2487,2491,2497,2502,2513,2518,2523,2528,2531,2537,2542,2837,2840,2846,2851,2854,3092,3144,3150,3379,3394,3400,3667,3673,3679,4001,4018,4024,4034,4040,4047,4051,4057,4063,4069,4085,4087],[11,1548,1544],{"id":1549},"how-to-use-object-recognition-with-tensorflowjs-and-vue-3",[16,1551,1552,1553,1556,1557,1560,1561,1564,1565,1570],{},"In recent years, artificial intelligence and its products have become increasingly active and are starting to take their place in our lives, with their numbers steadily rising. We all have the question in mind of how we can use this in our daily lives. In this article, we will create a simple application together using ",[20,1554,1555],{},"TensorFlow.js",", where we will use ",[20,1558,1559],{},"ImageNet"," classes and the ",[20,1562,1563],{},"MobileNet-v2"," model to recognize and add an object\u002Fitem to the cart. This way, we will implement a scenario similar to the basic working principle of ",[53,1566,1569],{"href":1567,"rel":1568},"https:\u002F\u002Fwww.amazon.com\u002Fb?ie=UTF8&node=16008589011",[57],"Amazon Go",". Let’s get started 🚀",[16,1572,1573,1577],{},[35,1574],{"alt":1575,"src":1576},"Photo by Mika Baumeister on Unsplash","https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F12000\u002F0*IjlNV6sdq3EAmX0n",[120,1578,1579,1580,1585,1586],{},"Photo by ",[53,1581,1584],{"href":1582,"rel":1583},"https:\u002F\u002Funsplash.com\u002F@kommumikation?utm_source=medium&utm_medium=referral",[57],"Mika Baumeister"," on ",[53,1587,1590],{"href":1588,"rel":1589},"https:\u002F\u002Funsplash.com?utm_source=medium&utm_medium=referral",[57],"Unsplash",[39,1592,1594],{"id":1593},"what-is-tensorflow-what-is-tensorflowjs",[20,1595,1596],{},"What is TensorFlow? What is TensorFlow.js?",[1598,1599,1601,1605],"div",{"align":1600},"center",[35,1602],{"src":1603,"alt":1604},"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F2400\u002F1*TAiolrEtfiuEq4lMNS6OEA.png","TensorFlow.js Logo Picture"," \n",[16,1607,1608,1611,1612,1614,1615,1618],{},[20,1609,1610],{},"TensorFlow"," is an open-source machine learning and deep learning library developed by Google. Widely supported by a large community, ",[20,1613,1610],{}," is a powerful tool used for artificial intelligence applications and large-scale data processing projects. It is extensively used in both research and industrial projects, featuring a flexible and modular structure with the capability to run on different devices such as ",[120,1616,1617],{},"computers, mobile devices, and IoT"," devices.",[16,1620,1621,1623,1624,1626,1627,1630],{},[20,1622,1555],{}," is the JavaScript version of ",[20,1625,1610],{},", enabling the training and execution of machine learning models in the browser. This makes it a suitable tool for ",[120,1628,1629],{},"web applications and browser-based"," artificial intelligence projects.",[888,1632,1634],{"id":1633},"installations","Installations",[16,1636,1637,1638,1641,1642,1645,1646,1649,1650,1652,1653,1655],{},"Firstly, let’s create our ",[120,1639,1640],{},"Vue 3"," project. You can use either ",[120,1643,1644],{},"Vue CLI"," or ",[120,1647,1648],{},"Vite"," for this. I will prefer ",[120,1651,1648],{}," for the installation here, but you can choose ",[120,1654,1644],{}," for a simplified setup with other tools.",[355,1657,1661],{"className":1658,"code":1659,"language":1660,"meta":364,"style":364},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm create vite@latest tf-js-with-vue -- --template vue\n# yarn\nyarn create vite my-vue-app --template vue\n# If you choice Vue CLI Commands\nnpm create vue@latest\n","bash",[362,1662,1663,1691,1697,1714,1720],{"__ignoreMap":364},[1664,1665,1668,1672,1676,1679,1682,1685,1688],"span",{"class":1666,"line":1667},"line",1,[1664,1669,1671],{"class":1670},"sBMFI","npm",[1664,1673,1675],{"class":1674},"sfazB"," create",[1664,1677,1678],{"class":1674}," vite@latest",[1664,1680,1681],{"class":1674}," tf-js-with-vue",[1664,1683,1684],{"class":1674}," --",[1664,1686,1687],{"class":1674}," --template",[1664,1689,1690],{"class":1674}," vue\n",[1664,1692,1693],{"class":1666,"line":778},[1664,1694,1696],{"class":1695},"sHwdD","# yarn\n",[1664,1698,1699,1702,1704,1707,1710,1712],{"class":1666,"line":781},[1664,1700,1701],{"class":1670},"yarn",[1664,1703,1675],{"class":1674},[1664,1705,1706],{"class":1674}," vite",[1664,1708,1709],{"class":1674}," my-vue-app",[1664,1711,1687],{"class":1674},[1664,1713,1690],{"class":1674},[1664,1715,1717],{"class":1666,"line":1716},4,[1664,1718,1719],{"class":1695},"# If you choice Vue CLI Commands\n",[1664,1721,1723,1725,1727],{"class":1666,"line":1722},5,[1664,1724,1671],{"class":1670},[1664,1726,1675],{"class":1674},[1664,1728,1729],{"class":1674}," vue@latest\n",[39,1731,1733,1734],{"id":1732},"optional-installation","📌 ",[20,1735,1736],{},"Optional Installation",[16,1738,1739,1740,1743,1744,1747],{},"If you want to use a UI or CSS library, I recommend installing it at this stage. In this example project, I used ",[120,1741,1742],{},"TailwindCSS"," and ",[120,1745,1746],{},"DaisyUI",". If you want to follow the same structure:",[47,1749,1750,1757],{},[50,1751,1752],{},[53,1753,1756],{"href":1754,"rel":1755},"https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Fguides\u002Fvite#vue",[57],"TailwindCSS with Vite-Vue",[50,1758,1759],{},[53,1760,1763],{"href":1761,"rel":1762},"https:\u002F\u002Fdaisyui.com\u002Fdocs\u002Finstall\u002F",[57],"DaisyUI Install",[16,1765,1766,1767,1743,1770,1773,1774,1776,1777,883],{},"After completing the installations, go to the project directory and run ",[20,1768,1769],{},"npm install",[20,1771,1772],{},"npm run dev"," to run our empty project. If you don't encounter any issues or errors, you can proceed to add ",[20,1775,1555],{}," to your project by visiting ",[53,1778,1781],{"href":1779,"rel":1780},"https:\u002F\u002Fwww.tensorflow.org\u002Fjs\u002Ftutorials\u002Fsetup",[57],"TensorFlow.js Installation",[355,1783,1785],{"className":1658,"code":1784,"language":1660,"meta":364,"style":364},"npm install @tensorflow\u002Ftfjs\n# yarn\nyarn add @tensorflow\u002Ftfjs\n",[362,1786,1787,1797,1801],{"__ignoreMap":364},[1664,1788,1789,1791,1794],{"class":1666,"line":1667},[1664,1790,1671],{"class":1670},[1664,1792,1793],{"class":1674}," install",[1664,1795,1796],{"class":1674}," @tensorflow\u002Ftfjs\n",[1664,1798,1799],{"class":1666,"line":778},[1664,1800,1696],{"class":1695},[1664,1802,1803,1805,1808],{"class":1666,"line":781},[1664,1804,1701],{"class":1670},[1664,1806,1807],{"class":1674}," add",[1664,1809,1796],{"class":1674},[888,1811,1813],{"id":1812},"how-to-use-tensorflowjs","📌 How to Use TensorFlow.js?",[1815,1816],"iframe",{"src":1817,"width":1818,"height":1818,"style":364,"frameBorder":1819,"className":1820,"allowFullScreen":806},"https:\u002F\u002Fgiphy.com\u002Fembed\u002FMZQkUm97KTI1gI8sUj",480,"0",[1821],"giphy-embed",[16,1823,1824,1825,1827,1828,1831],{},"To use ",[20,1826,1555],{},", create a file named ",[20,1829,1830],{},"tensorflowImageClassifier.js"," under a utils folder. Inside this file, add the following code:",[355,1833,1837],{"className":1834,"code":1835,"language":1836,"meta":364,"style":364},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import * as tf from '@tensorflow\u002Ftfjs';\nlet model\nlet labels\nlet labelsArray\n","javascript",[362,1838,1839,1844,1849,1854],{"__ignoreMap":364},[1664,1840,1841],{"class":1666,"line":1667},[1664,1842,1843],{},"import * as tf from '@tensorflow\u002Ftfjs';\n",[1664,1845,1846],{"class":1666,"line":778},[1664,1847,1848],{},"let model\n",[1664,1850,1851],{"class":1666,"line":781},[1664,1852,1853],{},"let labels\n",[1664,1855,1856],{"class":1666,"line":1716},[1664,1857,1858],{},"let labelsArray\n",[16,1860,1861,1862,1864,1865,1868,1869,551,1872,1875,1876,1879],{},"Here, we imported ",[20,1863,1555],{}," with the alias “",[120,1866,1867],{},"tf","”. We then defined the variables ",[120,1870,1871],{},"model",[120,1873,1874],{},"labels",", and ",[120,1877,1878],{},"labelsArray",", which will contain the organized labels.",[888,1881,1883],{"id":1882},"loading-the-model-and-labels","📌 Loading the Model and Labels",[16,1885,1886,1887,1890],{},"After these definitions, create a function named ",[20,1888,1889],{},"loadModel",". In this function, we will load our model and labels into the project.",[355,1892,1894],{"className":1834,"code":1893,"language":1836,"meta":364,"style":364},"async function loadModel() {\n  model = await tf.loadGraphModel(\"\u003Chttps:\u002F\u002Fwww.kaggle.com\u002Fmodels\u002Fgoogle\u002Fmobilenet-v2\u002Fframeworks\u002FTfJs\u002Fvariations\u002F035-128-classification\u002Fversions\u002F3>\", { fromTFHub: true })\n  labels = await fetch(\"\u003Chttps:\u002F\u002Fstorage.googleapis.com\u002Fdownload.tensorflow.org\u002Fdata\u002FImageNetLabels.txt>\")\n  .then((res) => res.text())\n  labelsArray = labels.split('\\\\n').map(label => label.trim()).filter(label => label !== '');\n}\n",[362,1895,1896,1901,1906,1911,1916,1921],{"__ignoreMap":364},[1664,1897,1898],{"class":1666,"line":1667},[1664,1899,1900],{},"async function loadModel() {\n",[1664,1902,1903],{"class":1666,"line":778},[1664,1904,1905],{},"  model = await tf.loadGraphModel(\"\u003Chttps:\u002F\u002Fwww.kaggle.com\u002Fmodels\u002Fgoogle\u002Fmobilenet-v2\u002Fframeworks\u002FTfJs\u002Fvariations\u002F035-128-classification\u002Fversions\u002F3>\", { fromTFHub: true })\n",[1664,1907,1908],{"class":1666,"line":781},[1664,1909,1910],{},"  labels = await fetch(\"\u003Chttps:\u002F\u002Fstorage.googleapis.com\u002Fdownload.tensorflow.org\u002Fdata\u002FImageNetLabels.txt>\")\n",[1664,1912,1913],{"class":1666,"line":1716},[1664,1914,1915],{},"  .then((res) => res.text())\n",[1664,1917,1918],{"class":1666,"line":1722},[1664,1919,1920],{},"  labelsArray = labels.split('\\\\n').map(label => label.trim()).filter(label => label !== '');\n",[1664,1922,1924],{"class":1666,"line":1923},6,[1664,1925,1926],{},"}\n",[176,1928,1929,1941,1947],{},[50,1930,1931,1932,1935,1936,883],{},"Firstly, we load our model using ",[20,1933,1934],{},"tf.loadGraphModel"," from ",[53,1937,1940],{"href":1938,"rel":1939},"https:\u002F\u002Fwww.kaggle.com\u002Fmodels\u002Fgoogle\u002Fmobilenet-v2\u002Fframeworks\u002FTfJs\u002Fvariations\u002F035-128-classification\u002Fversions\u002F3",[57],"Kaggle-MobileNet-v2 by Google",[50,1942,1943,1944,1946],{},"At this stage, we fetch the labels of the ",[120,1945,1559],{}," data and convert it into a text format.",[50,1948,1949,1950,883],{},"Finally, we transform this text data into an array and assign it to the variable ",[20,1951,1878],{},[16,1953,1954],{},[20,1955,1956],{},"Function Explanations:",[47,1958,1959,1964,1970,1976,1982],{},[50,1960,1961,1963],{},[20,1962,1934],{},": TensorFlow.js model loading function. It loads the model from the specified URL.",[50,1965,1966,1969],{},[20,1967,1968],{},"fetch",": Fetches data from the specified URL.",[50,1971,1972,1975],{},[20,1973,1974],{},"labels.split('\\\\n')",": Splits the labels by new lines and converts them into an array.",[50,1977,1978,1981],{},[20,1979,1980],{},"map(label => label.trim())",": Removes leading and trailing spaces for each label in the array.",[50,1983,1984,1987],{},[20,1985,1986],{},"filter(label => label !== '')",": Filters out empty labels.",[888,1989,1991],{"id":1990},"image-classification-function","📌 Image Classification Function",[16,1993,1994],{},"Now, let’s create the following function to classify an image using the loaded model:",[355,1996,1998],{"className":1834,"code":1997,"language":1836,"meta":364,"style":364},"async function classifyImage(image) {\n  \u002F\u002F 1. Convert Input Image to Tensor and Preprocess\n  const imgTensor = tf.browser.fromPixels(image)  \u002F\u002F Convert the image to a Tensor\n    .resizeNearestNeighbor([128, 128])  \u002F\u002F Resize the image to 128x128 dimensions\n    .toFloat()  \u002F\u002F Convert Tensor values to floating-point numbers\n    .div(tf.scalar(255))  \u002F\u002F Normalization: Scale pixel values from [0, 255] to [0, 1]\n    .expandDims();  \u002F\u002F Expand the Tensor dimension\n\u002F\u002F 2. Classify the Image with the Model\n  const predictions = await model.predict(imgTensor);  \u002F\u002F Classify the image using the model\n  \u002F\u002F 3. Determine and Sort the Top Probability Classes\n  const topPredictions = Array.from(predictions.dataSync())  \u002F\u002F Convert from Tensor to JavaScript array\n    .map((probability, index) => ({ probability, label: labelsArray[index]}))  \u002F\u002F Match probability and label for each class\n    .sort((a, b) => b.probability - a.probability)  \u002F\u002F Sort by probability\n    .slice(0, 3);  \u002F\u002F Select the top three classes with the highest probabilities\n  \u002F\u002F 4. Return the Results\n  return topPredictions;  \u002F\u002F Return an array containing the top probable classes\n}\n",[362,1999,2000,2005,2010,2015,2020,2025,2030,2036,2042,2048,2054,2060,2066,2072,2078,2084,2090],{"__ignoreMap":364},[1664,2001,2002],{"class":1666,"line":1667},[1664,2003,2004],{},"async function classifyImage(image) {\n",[1664,2006,2007],{"class":1666,"line":778},[1664,2008,2009],{},"  \u002F\u002F 1. Convert Input Image to Tensor and Preprocess\n",[1664,2011,2012],{"class":1666,"line":781},[1664,2013,2014],{},"  const imgTensor = tf.browser.fromPixels(image)  \u002F\u002F Convert the image to a Tensor\n",[1664,2016,2017],{"class":1666,"line":1716},[1664,2018,2019],{},"    .resizeNearestNeighbor([128, 128])  \u002F\u002F Resize the image to 128x128 dimensions\n",[1664,2021,2022],{"class":1666,"line":1722},[1664,2023,2024],{},"    .toFloat()  \u002F\u002F Convert Tensor values to floating-point numbers\n",[1664,2026,2027],{"class":1666,"line":1923},[1664,2028,2029],{},"    .div(tf.scalar(255))  \u002F\u002F Normalization: Scale pixel values from [0, 255] to [0, 1]\n",[1664,2031,2033],{"class":1666,"line":2032},7,[1664,2034,2035],{},"    .expandDims();  \u002F\u002F Expand the Tensor dimension\n",[1664,2037,2039],{"class":1666,"line":2038},8,[1664,2040,2041],{},"\u002F\u002F 2. Classify the Image with the Model\n",[1664,2043,2045],{"class":1666,"line":2044},9,[1664,2046,2047],{},"  const predictions = await model.predict(imgTensor);  \u002F\u002F Classify the image using the model\n",[1664,2049,2051],{"class":1666,"line":2050},10,[1664,2052,2053],{},"  \u002F\u002F 3. Determine and Sort the Top Probability Classes\n",[1664,2055,2057],{"class":1666,"line":2056},11,[1664,2058,2059],{},"  const topPredictions = Array.from(predictions.dataSync())  \u002F\u002F Convert from Tensor to JavaScript array\n",[1664,2061,2063],{"class":1666,"line":2062},12,[1664,2064,2065],{},"    .map((probability, index) => ({ probability, label: labelsArray[index]}))  \u002F\u002F Match probability and label for each class\n",[1664,2067,2069],{"class":1666,"line":2068},13,[1664,2070,2071],{},"    .sort((a, b) => b.probability - a.probability)  \u002F\u002F Sort by probability\n",[1664,2073,2075],{"class":1666,"line":2074},14,[1664,2076,2077],{},"    .slice(0, 3);  \u002F\u002F Select the top three classes with the highest probabilities\n",[1664,2079,2081],{"class":1666,"line":2080},15,[1664,2082,2083],{},"  \u002F\u002F 4. Return the Results\n",[1664,2085,2087],{"class":1666,"line":2086},16,[1664,2088,2089],{},"  return topPredictions;  \u002F\u002F Return an array containing the top probable classes\n",[1664,2091,2093],{"class":1666,"line":2092},17,[1664,2094,1926],{},[16,2096,2097,2098,2100],{},"This function takes an image, converts it to the ",[20,2099,1555],{}," tensor format, and applies necessary preprocessing steps. Then, it classifies the image using the model and returns an array containing the top three classes with the highest probabilities.",[176,2102,2103,2112,2115,2124,2127],{},[50,2104,2105,2108,2109,2111],{},[20,2106,2107],{},"tf.browser.fromPixels(image)",": Converts the input image to the ",[20,2110,1555],{}," tensor format.",[50,2113,2114],{},"Applies some preprocessing on the tensor. Resizes the image to 128x128 dimensions, normalizes pixel values, and expands the tensor dimension.",[50,2116,2117,2120,2121,2123],{},[20,2118,2119],{},"model.predict(imgTensor)",": Uses the ",[20,2122,1555],{}," model to classify the preprocessed image and obtains a tensor containing probabilistic results.",[50,2125,2126],{},"Converts the obtained results to a JavaScript array, matches the probability and label for each class, sorts by probability, and selects the top three classes with the highest probabilities.",[50,2128,2129],{},"Finally, the function returns an array containing the labels and probabilities of the top three classes. This array represents the classification results.",[888,2131,2133],{"id":2132},"creating-mockup-data","📌 Creating Mockup Data",[16,2135,2136],{},"Since we have a shopping cart scenario in the project, we need to retrieve the classified items from the database. However, to keep dependencies minimal, we will read our mockup data from a JSON file and return the necessary information.",[47,2138,2139,2150],{},[50,2140,2141,2142,2145,2146,2149],{},"First, create a folder named ",[20,2143,2144],{},"services"," under the ",[20,2147,2148],{},"src"," directory.",[50,2151,2152,2153,2156,2157,2159],{},"Then, create a file named ",[20,2154,2155],{},"data.json"," inside the ",[20,2158,2144],{}," folder and open it. I added four pieces of data as an example based on ImageNet labels, but you can increase this as needed.",[355,2161,2165],{"className":2162,"code":2163,"language":2164,"meta":364,"style":364},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","[\n  {\n    \"id\": \"1a23bc45-678d-90ef-ghij-klmnopqrstuv\",\n    \"name\": \"background\",\n    \"price\": 10.99\n  },\n  {\n    \"id\": \"2b34cd56-789e-01fg-hijk-lmnopqrstuvi\",\n    \"name\": \"tench\",\n    \"price\": 15.99\n  },\n  {\n    \"id\": \"3c45de67-890f-12gh-ijkl-mnopqrstuvij\",\n    \"name\": \"French loaf \",\n    \"price\": 8.99\n  },\n  {\n    \"id\": \"3c45de67-890f-12gh-ijkl-mn423rstuvij\",\n    \"name\": \"bread\",\n    \"price\": 12.99\n  }\n]\n","json",[362,2166,2167,2173,2178,2204,2224,2239,2244,2248,2267,2286,2299,2303,2307,2326,2345,2358,2362,2366,2386,2406,2420,2426],{"__ignoreMap":364},[1664,2168,2169],{"class":1666,"line":1667},[1664,2170,2172],{"class":2171},"sMK4o","[\n",[1664,2174,2175],{"class":1666,"line":778},[1664,2176,2177],{"class":2171},"  {\n",[1664,2179,2180,2183,2187,2190,2193,2196,2199,2201],{"class":1666,"line":781},[1664,2181,2182],{"class":2171},"    \"",[1664,2184,2186],{"class":2185},"spNyl","id",[1664,2188,2189],{"class":2171},"\"",[1664,2191,2192],{"class":2171},":",[1664,2194,2195],{"class":2171}," \"",[1664,2197,2198],{"class":1674},"1a23bc45-678d-90ef-ghij-klmnopqrstuv",[1664,2200,2189],{"class":2171},[1664,2202,2203],{"class":2171},",\n",[1664,2205,2206,2208,2211,2213,2215,2217,2220,2222],{"class":1666,"line":1716},[1664,2207,2182],{"class":2171},[1664,2209,2210],{"class":2185},"name",[1664,2212,2189],{"class":2171},[1664,2214,2192],{"class":2171},[1664,2216,2195],{"class":2171},[1664,2218,2219],{"class":1674},"background",[1664,2221,2189],{"class":2171},[1664,2223,2203],{"class":2171},[1664,2225,2226,2228,2231,2233,2235],{"class":1666,"line":1722},[1664,2227,2182],{"class":2171},[1664,2229,2230],{"class":2185},"price",[1664,2232,2189],{"class":2171},[1664,2234,2192],{"class":2171},[1664,2236,2238],{"class":2237},"sbssI"," 10.99\n",[1664,2240,2241],{"class":1666,"line":1923},[1664,2242,2243],{"class":2171},"  },\n",[1664,2245,2246],{"class":1666,"line":2032},[1664,2247,2177],{"class":2171},[1664,2249,2250,2252,2254,2256,2258,2260,2263,2265],{"class":1666,"line":2038},[1664,2251,2182],{"class":2171},[1664,2253,2186],{"class":2185},[1664,2255,2189],{"class":2171},[1664,2257,2192],{"class":2171},[1664,2259,2195],{"class":2171},[1664,2261,2262],{"class":1674},"2b34cd56-789e-01fg-hijk-lmnopqrstuvi",[1664,2264,2189],{"class":2171},[1664,2266,2203],{"class":2171},[1664,2268,2269,2271,2273,2275,2277,2279,2282,2284],{"class":1666,"line":2044},[1664,2270,2182],{"class":2171},[1664,2272,2210],{"class":2185},[1664,2274,2189],{"class":2171},[1664,2276,2192],{"class":2171},[1664,2278,2195],{"class":2171},[1664,2280,2281],{"class":1674},"tench",[1664,2283,2189],{"class":2171},[1664,2285,2203],{"class":2171},[1664,2287,2288,2290,2292,2294,2296],{"class":1666,"line":2050},[1664,2289,2182],{"class":2171},[1664,2291,2230],{"class":2185},[1664,2293,2189],{"class":2171},[1664,2295,2192],{"class":2171},[1664,2297,2298],{"class":2237}," 15.99\n",[1664,2300,2301],{"class":1666,"line":2056},[1664,2302,2243],{"class":2171},[1664,2304,2305],{"class":1666,"line":2062},[1664,2306,2177],{"class":2171},[1664,2308,2309,2311,2313,2315,2317,2319,2322,2324],{"class":1666,"line":2068},[1664,2310,2182],{"class":2171},[1664,2312,2186],{"class":2185},[1664,2314,2189],{"class":2171},[1664,2316,2192],{"class":2171},[1664,2318,2195],{"class":2171},[1664,2320,2321],{"class":1674},"3c45de67-890f-12gh-ijkl-mnopqrstuvij",[1664,2323,2189],{"class":2171},[1664,2325,2203],{"class":2171},[1664,2327,2328,2330,2332,2334,2336,2338,2341,2343],{"class":1666,"line":2074},[1664,2329,2182],{"class":2171},[1664,2331,2210],{"class":2185},[1664,2333,2189],{"class":2171},[1664,2335,2192],{"class":2171},[1664,2337,2195],{"class":2171},[1664,2339,2340],{"class":1674},"French loaf ",[1664,2342,2189],{"class":2171},[1664,2344,2203],{"class":2171},[1664,2346,2347,2349,2351,2353,2355],{"class":1666,"line":2080},[1664,2348,2182],{"class":2171},[1664,2350,2230],{"class":2185},[1664,2352,2189],{"class":2171},[1664,2354,2192],{"class":2171},[1664,2356,2357],{"class":2237}," 8.99\n",[1664,2359,2360],{"class":1666,"line":2086},[1664,2361,2243],{"class":2171},[1664,2363,2364],{"class":1666,"line":2092},[1664,2365,2177],{"class":2171},[1664,2367,2369,2371,2373,2375,2377,2379,2382,2384],{"class":1666,"line":2368},18,[1664,2370,2182],{"class":2171},[1664,2372,2186],{"class":2185},[1664,2374,2189],{"class":2171},[1664,2376,2192],{"class":2171},[1664,2378,2195],{"class":2171},[1664,2380,2381],{"class":1674},"3c45de67-890f-12gh-ijkl-mn423rstuvij",[1664,2383,2189],{"class":2171},[1664,2385,2203],{"class":2171},[1664,2387,2389,2391,2393,2395,2397,2399,2402,2404],{"class":1666,"line":2388},19,[1664,2390,2182],{"class":2171},[1664,2392,2210],{"class":2185},[1664,2394,2189],{"class":2171},[1664,2396,2192],{"class":2171},[1664,2398,2195],{"class":2171},[1664,2400,2401],{"class":1674},"bread",[1664,2403,2189],{"class":2171},[1664,2405,2203],{"class":2171},[1664,2407,2409,2411,2413,2415,2417],{"class":1666,"line":2408},20,[1664,2410,2182],{"class":2171},[1664,2412,2230],{"class":2185},[1664,2414,2189],{"class":2171},[1664,2416,2192],{"class":2171},[1664,2418,2419],{"class":2237}," 12.99\n",[1664,2421,2423],{"class":1666,"line":2422},21,[1664,2424,2425],{"class":2171},"  }\n",[1664,2427,2429],{"class":1666,"line":2428},22,[1664,2430,2431],{"class":2171},"]\n",[16,2433,2434],{},"After completing this stage, we will create a simple code structure to read our data and return product information based on the result of the classification.",[47,2436,2437,2447],{},[50,2438,2439,2440,2443,2444,883],{},"Create a file named ",[20,2441,2442],{},"productService.js",". Import the mockup data into this file using ",[20,2445,2446],{},"import mockupData from '.\u002Fdata.json'",[50,2448,2449,2450,883],{},"Since we will perform a simple search on our data, create a function named ",[20,2451,2452],{},"searchByName",[355,2454,2456],{"className":1834,"code":2455,"language":1836,"meta":364,"style":364},"import mockupData from '.\u002Fdata.json';\nfunction searchByName(query) {\n  const lowerCaseQuery = query.toLowerCase();\n  return mockupData.filter(item => item.name.toLowerCase().includes(lowerCaseQuery));\n}\nexport { searchByName };\n",[362,2457,2458,2463,2468,2473,2478,2482],{"__ignoreMap":364},[1664,2459,2460],{"class":1666,"line":1667},[1664,2461,2462],{},"import mockupData from '.\u002Fdata.json';\n",[1664,2464,2465],{"class":1666,"line":778},[1664,2466,2467],{},"function searchByName(query) {\n",[1664,2469,2470],{"class":1666,"line":781},[1664,2471,2472],{},"  const lowerCaseQuery = query.toLowerCase();\n",[1664,2474,2475],{"class":1666,"line":1716},[1664,2476,2477],{},"  return mockupData.filter(item => item.name.toLowerCase().includes(lowerCaseQuery));\n",[1664,2479,2480],{"class":1666,"line":1722},[1664,2481,1926],{},[1664,2483,2484],{"class":1666,"line":1923},[1664,2485,2486],{},"export { searchByName };\n",[888,2488,2490],{"id":2489},"vuejs-image-recognition-with-tensorflow","📌 Vue.js Image Recognition with TensorFlow",[16,2492,2493,2494,2496],{},"In the previous stages of the tutorial, we prepared ",[20,2495,1555],{}," and the necessary requirements. Now, let’s move on to the easier part, the Front End. We will create three main components. You can also create them as a single component if you prefer.",[16,2498,2499],{},[20,2500,2501],{},"Components",[47,2503,2504,2507,2510],{},[50,2505,2506],{},"ImageUpload.vue",[50,2508,2509],{},"ResultDisplay.vue",[50,2511,2512],{},"SimpleBasket.vue",[16,2514,2515],{},[20,2516,2517],{},"View",[47,2519,2520],{},[50,2521,2522],{},"HomeView.vue",[16,2524,2525,2526,883],{},"Firstly, we create a component named ",[20,2527,2506],{},[16,2529,2530],{},"We design it with the essential functionalities. Feel free to add extra details or functions. You can also break it down into sub-components for more efficient code 😛",[39,2532,2534],{"id":2533},"design",[20,2535,2536],{},"Design",[1815,2538],{"src":2539,"width":1818,"height":2540,"style":364,"frameBorder":1819,"className":2541,"allowFullScreen":806},"https:\u002F\u002Fgiphy.com\u002Fembed\u002Fzqy40c38GcW2LLmAf8",360,[1821],[355,2543,2547],{"className":2544,"code":2545,"language":2546,"meta":364,"style":364},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv class=\"flex flex-col items-center\">\n    \u003Cdiv class=\"indicator\">\n      \u003Cspan v-if=\"loadingImage\" class=\"indicator-item indicator-center indicator-middle badge badge-primary\">Uploading Image...\u003C\u002Fspan>\n      \u003Cimg :src=\"previewImage\" alt=\"Input Image\" class=\"w-96 h-96 my-2 rounded\" \u002F>\n    \u003C\u002Fdiv>\n    \u003Cinput type=\"file\" accept=\"image\u002F*\" class=\"file-input w-full max-w-xs mb-2\" alt=\"Image Input\" @change=\"handleImageUpload\" \u002F>\n    \u003Cbutton class=\"btn btn-primary w-32\" @click=\"processImage\" :disabled=\"!isImageSelected\">Classify or Recognize\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue",[362,2548,2549,2561,2583,2603,2647,2691,2700,2767,2820,2829],{"__ignoreMap":364},[1664,2550,2551,2554,2558],{"class":1666,"line":1667},[1664,2552,2553],{"class":2171},"\u003C",[1664,2555,2557],{"class":2556},"swJcz","template",[1664,2559,2560],{"class":2171},">\n",[1664,2562,2563,2566,2568,2571,2574,2576,2579,2581],{"class":1666,"line":778},[1664,2564,2565],{"class":2171},"  \u003C",[1664,2567,1598],{"class":2556},[1664,2569,2570],{"class":2185}," class",[1664,2572,2573],{"class":2171},"=",[1664,2575,2189],{"class":2171},[1664,2577,2578],{"class":1674},"flex flex-col items-center",[1664,2580,2189],{"class":2171},[1664,2582,2560],{"class":2171},[1664,2584,2585,2588,2590,2592,2594,2596,2599,2601],{"class":1666,"line":781},[1664,2586,2587],{"class":2171},"    \u003C",[1664,2589,1598],{"class":2556},[1664,2591,2570],{"class":2185},[1664,2593,2573],{"class":2171},[1664,2595,2189],{"class":2171},[1664,2597,2598],{"class":1674},"indicator",[1664,2600,2189],{"class":2171},[1664,2602,2560],{"class":2171},[1664,2604,2605,2608,2610,2613,2615,2617,2620,2622,2624,2626,2628,2631,2633,2636,2640,2643,2645],{"class":1666,"line":1716},[1664,2606,2607],{"class":2171},"      \u003C",[1664,2609,1664],{"class":2556},[1664,2611,2612],{"class":2185}," v-if",[1664,2614,2573],{"class":2171},[1664,2616,2189],{"class":2171},[1664,2618,2619],{"class":1674},"loadingImage",[1664,2621,2189],{"class":2171},[1664,2623,2570],{"class":2185},[1664,2625,2573],{"class":2171},[1664,2627,2189],{"class":2171},[1664,2629,2630],{"class":1674},"indicator-item indicator-center indicator-middle badge badge-primary",[1664,2632,2189],{"class":2171},[1664,2634,2635],{"class":2171},">",[1664,2637,2639],{"class":2638},"sTEyZ","Uploading Image...",[1664,2641,2642],{"class":2171},"\u003C\u002F",[1664,2644,1664],{"class":2556},[1664,2646,2560],{"class":2171},[1664,2648,2649,2651,2653,2656,2658,2660,2663,2665,2668,2670,2672,2675,2677,2679,2681,2683,2686,2688],{"class":1666,"line":1722},[1664,2650,2607],{"class":2171},[1664,2652,35],{"class":2556},[1664,2654,2655],{"class":2185}," :src",[1664,2657,2573],{"class":2171},[1664,2659,2189],{"class":2171},[1664,2661,2662],{"class":1674},"previewImage",[1664,2664,2189],{"class":2171},[1664,2666,2667],{"class":2185}," alt",[1664,2669,2573],{"class":2171},[1664,2671,2189],{"class":2171},[1664,2673,2674],{"class":1674},"Input Image",[1664,2676,2189],{"class":2171},[1664,2678,2570],{"class":2185},[1664,2680,2573],{"class":2171},[1664,2682,2189],{"class":2171},[1664,2684,2685],{"class":1674},"w-96 h-96 my-2 rounded",[1664,2687,2189],{"class":2171},[1664,2689,2690],{"class":2171}," \u002F>\n",[1664,2692,2693,2696,2698],{"class":1666,"line":1923},[1664,2694,2695],{"class":2171},"    \u003C\u002F",[1664,2697,1598],{"class":2556},[1664,2699,2560],{"class":2171},[1664,2701,2702,2704,2707,2710,2712,2714,2717,2719,2722,2724,2726,2729,2731,2733,2735,2737,2740,2742,2744,2746,2748,2751,2753,2756,2758,2760,2763,2765],{"class":1666,"line":2032},[1664,2703,2587],{"class":2171},[1664,2705,2706],{"class":2556},"input",[1664,2708,2709],{"class":2185}," type",[1664,2711,2573],{"class":2171},[1664,2713,2189],{"class":2171},[1664,2715,2716],{"class":1674},"file",[1664,2718,2189],{"class":2171},[1664,2720,2721],{"class":2185}," accept",[1664,2723,2573],{"class":2171},[1664,2725,2189],{"class":2171},[1664,2727,2728],{"class":1674},"image\u002F*",[1664,2730,2189],{"class":2171},[1664,2732,2570],{"class":2185},[1664,2734,2573],{"class":2171},[1664,2736,2189],{"class":2171},[1664,2738,2739],{"class":1674},"file-input w-full max-w-xs mb-2",[1664,2741,2189],{"class":2171},[1664,2743,2667],{"class":2185},[1664,2745,2573],{"class":2171},[1664,2747,2189],{"class":2171},[1664,2749,2750],{"class":1674},"Image Input",[1664,2752,2189],{"class":2171},[1664,2754,2755],{"class":2185}," @change",[1664,2757,2573],{"class":2171},[1664,2759,2189],{"class":2171},[1664,2761,2762],{"class":1674},"handleImageUpload",[1664,2764,2189],{"class":2171},[1664,2766,2690],{"class":2171},[1664,2768,2769,2771,2774,2776,2778,2780,2783,2785,2788,2790,2792,2795,2797,2800,2802,2804,2807,2809,2811,2814,2816,2818],{"class":1666,"line":2038},[1664,2770,2587],{"class":2171},[1664,2772,2773],{"class":2556},"button",[1664,2775,2570],{"class":2185},[1664,2777,2573],{"class":2171},[1664,2779,2189],{"class":2171},[1664,2781,2782],{"class":1674},"btn btn-primary w-32",[1664,2784,2189],{"class":2171},[1664,2786,2787],{"class":2185}," @click",[1664,2789,2573],{"class":2171},[1664,2791,2189],{"class":2171},[1664,2793,2794],{"class":1674},"processImage",[1664,2796,2189],{"class":2171},[1664,2798,2799],{"class":2185}," :disabled",[1664,2801,2573],{"class":2171},[1664,2803,2189],{"class":2171},[1664,2805,2806],{"class":1674},"!isImageSelected",[1664,2808,2189],{"class":2171},[1664,2810,2635],{"class":2171},[1664,2812,2813],{"class":2638},"Classify or Recognize",[1664,2815,2642],{"class":2171},[1664,2817,2773],{"class":2556},[1664,2819,2560],{"class":2171},[1664,2821,2822,2825,2827],{"class":1666,"line":2044},[1664,2823,2824],{"class":2171},"  \u003C\u002F",[1664,2826,1598],{"class":2556},[1664,2828,2560],{"class":2171},[1664,2830,2831,2833,2835],{"class":1666,"line":2050},[1664,2832,2642],{"class":2171},[1664,2834,2557],{"class":2556},[1664,2836,2560],{"class":2171},[16,2838,2839],{},"Here, we will take an image from the user and trigger its classification\u002Frecognition through a button.",[39,2841,2843],{"id":2842},"functions",[20,2844,2845],{},"Functions",[1815,2847],{"src":2848,"width":1818,"height":2849,"frameBorder":1819,"className":2850,"allowFullScreen":806},"https:\u002F\u002Fgiphy.com\u002Fembed\u002F26tn33aiTi1jkl6H6",270,[1821],[16,2852,2853],{},"In this stage, instead of explaining the code step by step, I’ll share the entire code with you and explain its functions.",[355,2855,2857],{"className":1834,"code":2856,"language":1836,"meta":364,"style":364},"import { ref, computed } from 'vue';\n\u002F\u002F Import the classifyImage and loadModel functions from the tensorflowImageClassifier module\nimport { classifyImage, loadModel } from '@\u002Futils\u002FtensorflowImageClassifier';\n\u002F\u002F Create a reactive array to hold image classification results\nconst classificationResults = ref([]);\n\u002F\u002F Create a reactive variable to hold the preview image URL, initially set with a placeholder URL\nconst previewImage = ref(\"\u003Chttps:\u002F\u002Fplacehold.co\u002F600x600>\");\n\u002F\u002F Create a reactive boolean variable to track the loading status of the image\nconst loadingImage = ref(false);\n\u002F\u002F Define custom events to be used within the component using the defineEmits function of Vue.js\nconst emit = defineEmits(['getResult', 'getProducts']);\n\u002F\u002F Create a computed property to check whether the user has selected an image\nconst isImageSelected = computed(() => previewImage.value !== \"\u003Chttps:\u002F\u002Fplacehold.co\u002F600x600>\");\n\u002F\u002F Event handler function triggered when the user selects a file\nconst handleImageUpload = (event) => {\n  const file = event.target.files[0]; \u002F\u002F Get the selected file\n  const image = new Image(); \u002F\u002F Create a new HTML image element\n  const reader = new FileReader(); \u002F\u002F Create a FileReader for file reading operations\n  \u002F\u002F When the file reading process starts\n  reader.onloadstart = () => {\n    previewImage.value = previewImage; \u002F\u002F Set the preview image (this line seems to have no correct function)\n    loadingImage.value = true; \u002F\u002F Set the image loading status to true\n  };\n  \u002F\u002F When the file reading process is completed\n  reader.onloadend = () => {\n    loadingImage.value = false; \u002F\u002F Set the image loading status to false\n    image.src = reader.result; \u002F\u002F Set the source of the image element with the read data\n    previewImage.value = reader.result; \u002F\u002F Set the preview image with the read data\n  };\n  \u002F\u002F Start the reading process by converting the file to base64 format\n  reader.readAsDataURL(file);\n};\n\u002F\u002F Event handler function that initiates image classification\nconst processImage = async () => {\n  if (previewImage.value) { \u002F\u002F If a preview image is available\n    const image = new Image(); \u002F\u002F Create a new HTML image element\n    image.src = previewImage.value; \u002F\u002F Set the source of the image element with the preview image URL\n    await loadModel(); \u002F\u002F Load the TensorFlow model\n    classificationResults.value = await classifyImage(image); \u002F\u002F Classify the image and assign the results to classificationResults\n    emit('getResult', classificationResults.value); \u002F\u002F Trigger the 'getResult' event and pass the results to upper-level components\n    emit('getProducts', classificationResults.value); \u002F\u002F Trigger the 'getProducts' event and pass the results to upper-level components\n  }\n};\n",[362,2858,2859,2864,2869,2874,2879,2884,2889,2894,2899,2904,2909,2914,2919,2924,2929,2934,2939,2944,2949,2954,2959,2964,2969,2975,2981,2987,2993,2999,3005,3010,3016,3022,3028,3034,3040,3046,3052,3058,3064,3070,3076,3082,3087],{"__ignoreMap":364},[1664,2860,2861],{"class":1666,"line":1667},[1664,2862,2863],{},"import { ref, computed } from 'vue';\n",[1664,2865,2866],{"class":1666,"line":778},[1664,2867,2868],{},"\u002F\u002F Import the classifyImage and loadModel functions from the tensorflowImageClassifier module\n",[1664,2870,2871],{"class":1666,"line":781},[1664,2872,2873],{},"import { classifyImage, loadModel } from '@\u002Futils\u002FtensorflowImageClassifier';\n",[1664,2875,2876],{"class":1666,"line":1716},[1664,2877,2878],{},"\u002F\u002F Create a reactive array to hold image classification results\n",[1664,2880,2881],{"class":1666,"line":1722},[1664,2882,2883],{},"const classificationResults = ref([]);\n",[1664,2885,2886],{"class":1666,"line":1923},[1664,2887,2888],{},"\u002F\u002F Create a reactive variable to hold the preview image URL, initially set with a placeholder URL\n",[1664,2890,2891],{"class":1666,"line":2032},[1664,2892,2893],{},"const previewImage = ref(\"\u003Chttps:\u002F\u002Fplacehold.co\u002F600x600>\");\n",[1664,2895,2896],{"class":1666,"line":2038},[1664,2897,2898],{},"\u002F\u002F Create a reactive boolean variable to track the loading status of the image\n",[1664,2900,2901],{"class":1666,"line":2044},[1664,2902,2903],{},"const loadingImage = ref(false);\n",[1664,2905,2906],{"class":1666,"line":2050},[1664,2907,2908],{},"\u002F\u002F Define custom events to be used within the component using the defineEmits function of Vue.js\n",[1664,2910,2911],{"class":1666,"line":2056},[1664,2912,2913],{},"const emit = defineEmits(['getResult', 'getProducts']);\n",[1664,2915,2916],{"class":1666,"line":2062},[1664,2917,2918],{},"\u002F\u002F Create a computed property to check whether the user has selected an image\n",[1664,2920,2921],{"class":1666,"line":2068},[1664,2922,2923],{},"const isImageSelected = computed(() => previewImage.value !== \"\u003Chttps:\u002F\u002Fplacehold.co\u002F600x600>\");\n",[1664,2925,2926],{"class":1666,"line":2074},[1664,2927,2928],{},"\u002F\u002F Event handler function triggered when the user selects a file\n",[1664,2930,2931],{"class":1666,"line":2080},[1664,2932,2933],{},"const handleImageUpload = (event) => {\n",[1664,2935,2936],{"class":1666,"line":2086},[1664,2937,2938],{},"  const file = event.target.files[0]; \u002F\u002F Get the selected file\n",[1664,2940,2941],{"class":1666,"line":2092},[1664,2942,2943],{},"  const image = new Image(); \u002F\u002F Create a new HTML image element\n",[1664,2945,2946],{"class":1666,"line":2368},[1664,2947,2948],{},"  const reader = new FileReader(); \u002F\u002F Create a FileReader for file reading operations\n",[1664,2950,2951],{"class":1666,"line":2388},[1664,2952,2953],{},"  \u002F\u002F When the file reading process starts\n",[1664,2955,2956],{"class":1666,"line":2408},[1664,2957,2958],{},"  reader.onloadstart = () => {\n",[1664,2960,2961],{"class":1666,"line":2422},[1664,2962,2963],{},"    previewImage.value = previewImage; \u002F\u002F Set the preview image (this line seems to have no correct function)\n",[1664,2965,2966],{"class":1666,"line":2428},[1664,2967,2968],{},"    loadingImage.value = true; \u002F\u002F Set the image loading status to true\n",[1664,2970,2972],{"class":1666,"line":2971},23,[1664,2973,2974],{},"  };\n",[1664,2976,2978],{"class":1666,"line":2977},24,[1664,2979,2980],{},"  \u002F\u002F When the file reading process is completed\n",[1664,2982,2984],{"class":1666,"line":2983},25,[1664,2985,2986],{},"  reader.onloadend = () => {\n",[1664,2988,2990],{"class":1666,"line":2989},26,[1664,2991,2992],{},"    loadingImage.value = false; \u002F\u002F Set the image loading status to false\n",[1664,2994,2996],{"class":1666,"line":2995},27,[1664,2997,2998],{},"    image.src = reader.result; \u002F\u002F Set the source of the image element with the read data\n",[1664,3000,3002],{"class":1666,"line":3001},28,[1664,3003,3004],{},"    previewImage.value = reader.result; \u002F\u002F Set the preview image with the read data\n",[1664,3006,3008],{"class":1666,"line":3007},29,[1664,3009,2974],{},[1664,3011,3013],{"class":1666,"line":3012},30,[1664,3014,3015],{},"  \u002F\u002F Start the reading process by converting the file to base64 format\n",[1664,3017,3019],{"class":1666,"line":3018},31,[1664,3020,3021],{},"  reader.readAsDataURL(file);\n",[1664,3023,3025],{"class":1666,"line":3024},32,[1664,3026,3027],{},"};\n",[1664,3029,3031],{"class":1666,"line":3030},33,[1664,3032,3033],{},"\u002F\u002F Event handler function that initiates image classification\n",[1664,3035,3037],{"class":1666,"line":3036},34,[1664,3038,3039],{},"const processImage = async () => {\n",[1664,3041,3043],{"class":1666,"line":3042},35,[1664,3044,3045],{},"  if (previewImage.value) { \u002F\u002F If a preview image is available\n",[1664,3047,3049],{"class":1666,"line":3048},36,[1664,3050,3051],{},"    const image = new Image(); \u002F\u002F Create a new HTML image element\n",[1664,3053,3055],{"class":1666,"line":3054},37,[1664,3056,3057],{},"    image.src = previewImage.value; \u002F\u002F Set the source of the image element with the preview image URL\n",[1664,3059,3061],{"class":1666,"line":3060},38,[1664,3062,3063],{},"    await loadModel(); \u002F\u002F Load the TensorFlow model\n",[1664,3065,3067],{"class":1666,"line":3066},39,[1664,3068,3069],{},"    classificationResults.value = await classifyImage(image); \u002F\u002F Classify the image and assign the results to classificationResults\n",[1664,3071,3073],{"class":1666,"line":3072},40,[1664,3074,3075],{},"    emit('getResult', classificationResults.value); \u002F\u002F Trigger the 'getResult' event and pass the results to upper-level components\n",[1664,3077,3079],{"class":1666,"line":3078},41,[1664,3080,3081],{},"    emit('getProducts', classificationResults.value); \u002F\u002F Trigger the 'getProducts' event and pass the results to upper-level components\n",[1664,3083,3085],{"class":1666,"line":3084},42,[1664,3086,2425],{},[1664,3088,3090],{"class":1666,"line":3089},43,[1664,3091,3027],{},[47,3093,3094,3100,3105,3114,3124,3129],{},[50,3095,3096,3099],{},[20,3097,3098],{},"classificationResults",": An array holding the results of image classification.",[50,3101,3102,3104],{},[20,3103,2662],{},": A string holding the URL of the user-uploaded or selected image for preview. Initially starts with a placeholder URL.",[50,3106,3107,3109,3110,3113],{},[20,3108,2619],{},": A boolean variable indicating the loading status of the image. Initially set to ",[20,3111,3112],{},"false"," and updated within the function.",[50,3115,3116,3119,3120,3123],{},[20,3117,3118],{},"isImageSelected",": A computed property checking whether the user has selected an image, determining the enable\u002Fdisable status of the \"",[120,3121,3122],{},"Classify","\" button. It checks if the preview URL is different from the placeholder.",[50,3125,3126,3128],{},[20,3127,2762],{},": This function is triggered when the user selects a file. It reads the content of the selected file and converts it into an image for preview. It also shows a loading element while the image is being loaded.",[50,3130,3131,3133,3134,3136,3137,1743,3140,3143],{},[20,3132,2794],{},": This function initiates the image classification process. If a preview image is available, it loads a pre-trained model and classifies the image. The results are stored in ",[20,3135,3098],{},", and events (",[120,3138,3139],{},"getResult",[120,3141,3142],{},"getProducts",") are emitted to pass the results to upper-level components.",[16,3145,3146],{},[120,3147,3148],{},[20,3149,2509],{},[355,3151,3153],{"className":2544,"code":3152,"language":2546,"meta":364,"style":364},"\u003Cscript setup>\ndefineProps({\n  labels: Array\n});\n\u003C\u002Fscript>\n\u003Ctemplate>\n  \u003Cdiv class=\"bg-white-800 dark:bg-gray-800 p-4 my-2 rounded shadow-md\">\n    \u003Ch2 class=\"text-2xl text-slate-600 dark:text-slate-400 font-bold mb-4\">Classification Result\u003C\u002Fh2>\n    \u003Cul>\n      \u003Cli v-for=\"(result, index) in labels\" :key=\"index\" class=\"mb-2 p-2 border rounded\">\n        \u003Cspan class=\"font-semibold text-slate-600 dark:text-slate-400\">{{ result.label }}\u003C\u002Fspan> - {{ (result.probability).toFixed(2) }}\n      \u003C\u002Fli>\n    \u003C\u002Ful>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[362,3154,3155,3167,3179,3189,3200,3208,3216,3235,3263,3271,3314,3346,3355,3363,3371],{"__ignoreMap":364},[1664,3156,3157,3159,3162,3165],{"class":1666,"line":1667},[1664,3158,2553],{"class":2171},[1664,3160,3161],{"class":2556},"script",[1664,3163,3164],{"class":2185}," setup",[1664,3166,2560],{"class":2171},[1664,3168,3169,3173,3176],{"class":1666,"line":778},[1664,3170,3172],{"class":3171},"s2Zo4","defineProps",[1664,3174,3175],{"class":2638},"(",[1664,3177,3178],{"class":2171},"{\n",[1664,3180,3181,3184,3186],{"class":1666,"line":781},[1664,3182,3183],{"class":2556},"  labels",[1664,3185,2192],{"class":2171},[1664,3187,3188],{"class":2638}," Array\n",[1664,3190,3191,3194,3197],{"class":1666,"line":1716},[1664,3192,3193],{"class":2171},"}",[1664,3195,3196],{"class":2638},")",[1664,3198,3199],{"class":2171},";\n",[1664,3201,3202,3204,3206],{"class":1666,"line":1722},[1664,3203,2642],{"class":2171},[1664,3205,3161],{"class":2556},[1664,3207,2560],{"class":2171},[1664,3209,3210,3212,3214],{"class":1666,"line":1923},[1664,3211,2553],{"class":2171},[1664,3213,2557],{"class":2556},[1664,3215,2560],{"class":2171},[1664,3217,3218,3220,3222,3224,3226,3228,3231,3233],{"class":1666,"line":2032},[1664,3219,2565],{"class":2171},[1664,3221,1598],{"class":2556},[1664,3223,2570],{"class":2185},[1664,3225,2573],{"class":2171},[1664,3227,2189],{"class":2171},[1664,3229,3230],{"class":1674},"bg-white-800 dark:bg-gray-800 p-4 my-2 rounded shadow-md",[1664,3232,2189],{"class":2171},[1664,3234,2560],{"class":2171},[1664,3236,3237,3239,3241,3243,3245,3247,3250,3252,3254,3257,3259,3261],{"class":1666,"line":2038},[1664,3238,2587],{"class":2171},[1664,3240,888],{"class":2556},[1664,3242,2570],{"class":2185},[1664,3244,2573],{"class":2171},[1664,3246,2189],{"class":2171},[1664,3248,3249],{"class":1674},"text-2xl text-slate-600 dark:text-slate-400 font-bold mb-4",[1664,3251,2189],{"class":2171},[1664,3253,2635],{"class":2171},[1664,3255,3256],{"class":2638},"Classification Result",[1664,3258,2642],{"class":2171},[1664,3260,888],{"class":2556},[1664,3262,2560],{"class":2171},[1664,3264,3265,3267,3269],{"class":1666,"line":2044},[1664,3266,2587],{"class":2171},[1664,3268,47],{"class":2556},[1664,3270,2560],{"class":2171},[1664,3272,3273,3275,3277,3280,3282,3284,3287,3289,3292,3294,3296,3299,3301,3303,3305,3307,3310,3312],{"class":1666,"line":2050},[1664,3274,2607],{"class":2171},[1664,3276,50],{"class":2556},[1664,3278,3279],{"class":2185}," v-for",[1664,3281,2573],{"class":2171},[1664,3283,2189],{"class":2171},[1664,3285,3286],{"class":1674},"(result, index) in labels",[1664,3288,2189],{"class":2171},[1664,3290,3291],{"class":2185}," :key",[1664,3293,2573],{"class":2171},[1664,3295,2189],{"class":2171},[1664,3297,3298],{"class":1674},"index",[1664,3300,2189],{"class":2171},[1664,3302,2570],{"class":2185},[1664,3304,2573],{"class":2171},[1664,3306,2189],{"class":2171},[1664,3308,3309],{"class":1674},"mb-2 p-2 border rounded",[1664,3311,2189],{"class":2171},[1664,3313,2560],{"class":2171},[1664,3315,3316,3319,3321,3323,3325,3327,3330,3332,3334,3337,3339,3341,3343],{"class":1666,"line":2056},[1664,3317,3318],{"class":2171},"        \u003C",[1664,3320,1664],{"class":2556},[1664,3322,2570],{"class":2185},[1664,3324,2573],{"class":2171},[1664,3326,2189],{"class":2171},[1664,3328,3329],{"class":1674},"font-semibold text-slate-600 dark:text-slate-400",[1664,3331,2189],{"class":2171},[1664,3333,2635],{"class":2171},[1664,3335,3336],{"class":2638},"{{ result.label }}",[1664,3338,2642],{"class":2171},[1664,3340,1664],{"class":2556},[1664,3342,2635],{"class":2171},[1664,3344,3345],{"class":2638}," - {{ (result.probability).toFixed(2) }}\n",[1664,3347,3348,3351,3353],{"class":1666,"line":2062},[1664,3349,3350],{"class":2171},"      \u003C\u002F",[1664,3352,50],{"class":2556},[1664,3354,2560],{"class":2171},[1664,3356,3357,3359,3361],{"class":1666,"line":2068},[1664,3358,2695],{"class":2171},[1664,3360,47],{"class":2556},[1664,3362,2560],{"class":2171},[1664,3364,3365,3367,3369],{"class":1666,"line":2074},[1664,3366,2824],{"class":2171},[1664,3368,1598],{"class":2556},[1664,3370,2560],{"class":2171},[1664,3372,3373,3375,3377],{"class":1666,"line":2080},[1664,3374,2642],{"class":2171},[1664,3376,2557],{"class":2556},[1664,3378,2560],{"class":2171},[16,3380,3381,3382,3385,3386,3389,3390,3393],{},"In this component, we will display the top 3 probabilities on the screen. The reason for having 3 probabilities is that in our ",[20,3383,3384],{},"classifyImage"," function, we use ",[20,3387,3388],{},"slice(0,3)"," to take the top 3 probabilities. For example, if it were ",[20,3391,3392],{},"slice(0,5)",", we would see the top 5 probabilities.",[16,3395,3396],{},[120,3397,3398],{},[20,3399,2512],{},[355,3401,3403],{"className":2544,"code":3402,"language":2546,"meta":364,"style":364},"\u003Cscript setup>\ndefineProps({\n  products: Array\n});\n\u003C\u002Fscript>\n\u003Ctemplate>\n  \u003Cdiv class=\"mx-auto bg-white-800 dark:bg-gray-800 rounded p-4 mt-2 shadow-md\">\n    \u003Ch2 class=\"text-xl font-semibold mb-4\">Product Basket\u003C\u002Fh2>\n    \u003Cdiv class=\"flex justify-between items-center border-b pb-4 mb-4\" v-for=\"product in products\" :key=\"product.id\">\n      \u003Cdiv>\n        \u003Ch3 class=\"text-lg text-balance font-medium\">1x {{ product.name }}\u003C\u002Fh3>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"flex items-center\">\n        \u003Cspan class=\"text-slate-600 dark:text-slate-400 font-semibold\">Price: {{ product.price }}\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[362,3404,3405,3415,3423,3432,3440,3448,3456,3475,3503,3544,3552,3580,3588,3607,3635,3643,3651,3659],{"__ignoreMap":364},[1664,3406,3407,3409,3411,3413],{"class":1666,"line":1667},[1664,3408,2553],{"class":2171},[1664,3410,3161],{"class":2556},[1664,3412,3164],{"class":2185},[1664,3414,2560],{"class":2171},[1664,3416,3417,3419,3421],{"class":1666,"line":778},[1664,3418,3172],{"class":3171},[1664,3420,3175],{"class":2638},[1664,3422,3178],{"class":2171},[1664,3424,3425,3428,3430],{"class":1666,"line":781},[1664,3426,3427],{"class":2556},"  products",[1664,3429,2192],{"class":2171},[1664,3431,3188],{"class":2638},[1664,3433,3434,3436,3438],{"class":1666,"line":1716},[1664,3435,3193],{"class":2171},[1664,3437,3196],{"class":2638},[1664,3439,3199],{"class":2171},[1664,3441,3442,3444,3446],{"class":1666,"line":1722},[1664,3443,2642],{"class":2171},[1664,3445,3161],{"class":2556},[1664,3447,2560],{"class":2171},[1664,3449,3450,3452,3454],{"class":1666,"line":1923},[1664,3451,2553],{"class":2171},[1664,3453,2557],{"class":2556},[1664,3455,2560],{"class":2171},[1664,3457,3458,3460,3462,3464,3466,3468,3471,3473],{"class":1666,"line":2032},[1664,3459,2565],{"class":2171},[1664,3461,1598],{"class":2556},[1664,3463,2570],{"class":2185},[1664,3465,2573],{"class":2171},[1664,3467,2189],{"class":2171},[1664,3469,3470],{"class":1674},"mx-auto bg-white-800 dark:bg-gray-800 rounded p-4 mt-2 shadow-md",[1664,3472,2189],{"class":2171},[1664,3474,2560],{"class":2171},[1664,3476,3477,3479,3481,3483,3485,3487,3490,3492,3494,3497,3499,3501],{"class":1666,"line":2038},[1664,3478,2587],{"class":2171},[1664,3480,888],{"class":2556},[1664,3482,2570],{"class":2185},[1664,3484,2573],{"class":2171},[1664,3486,2189],{"class":2171},[1664,3488,3489],{"class":1674},"text-xl font-semibold mb-4",[1664,3491,2189],{"class":2171},[1664,3493,2635],{"class":2171},[1664,3495,3496],{"class":2638},"Product Basket",[1664,3498,2642],{"class":2171},[1664,3500,888],{"class":2556},[1664,3502,2560],{"class":2171},[1664,3504,3505,3507,3509,3511,3513,3515,3518,3520,3522,3524,3526,3529,3531,3533,3535,3537,3540,3542],{"class":1666,"line":2044},[1664,3506,2587],{"class":2171},[1664,3508,1598],{"class":2556},[1664,3510,2570],{"class":2185},[1664,3512,2573],{"class":2171},[1664,3514,2189],{"class":2171},[1664,3516,3517],{"class":1674},"flex justify-between items-center border-b pb-4 mb-4",[1664,3519,2189],{"class":2171},[1664,3521,3279],{"class":2185},[1664,3523,2573],{"class":2171},[1664,3525,2189],{"class":2171},[1664,3527,3528],{"class":1674},"product in products",[1664,3530,2189],{"class":2171},[1664,3532,3291],{"class":2185},[1664,3534,2573],{"class":2171},[1664,3536,2189],{"class":2171},[1664,3538,3539],{"class":1674},"product.id",[1664,3541,2189],{"class":2171},[1664,3543,2560],{"class":2171},[1664,3545,3546,3548,3550],{"class":1666,"line":2050},[1664,3547,2607],{"class":2171},[1664,3549,1598],{"class":2556},[1664,3551,2560],{"class":2171},[1664,3553,3554,3556,3558,3560,3562,3564,3567,3569,3571,3574,3576,3578],{"class":1666,"line":2056},[1664,3555,3318],{"class":2171},[1664,3557,39],{"class":2556},[1664,3559,2570],{"class":2185},[1664,3561,2573],{"class":2171},[1664,3563,2189],{"class":2171},[1664,3565,3566],{"class":1674},"text-lg text-balance font-medium",[1664,3568,2189],{"class":2171},[1664,3570,2635],{"class":2171},[1664,3572,3573],{"class":2638},"1x {{ product.name }}",[1664,3575,2642],{"class":2171},[1664,3577,39],{"class":2556},[1664,3579,2560],{"class":2171},[1664,3581,3582,3584,3586],{"class":1666,"line":2062},[1664,3583,3350],{"class":2171},[1664,3585,1598],{"class":2556},[1664,3587,2560],{"class":2171},[1664,3589,3590,3592,3594,3596,3598,3600,3603,3605],{"class":1666,"line":2068},[1664,3591,2607],{"class":2171},[1664,3593,1598],{"class":2556},[1664,3595,2570],{"class":2185},[1664,3597,2573],{"class":2171},[1664,3599,2189],{"class":2171},[1664,3601,3602],{"class":1674},"flex items-center",[1664,3604,2189],{"class":2171},[1664,3606,2560],{"class":2171},[1664,3608,3609,3611,3613,3615,3617,3619,3622,3624,3626,3629,3631,3633],{"class":1666,"line":2074},[1664,3610,3318],{"class":2171},[1664,3612,1664],{"class":2556},[1664,3614,2570],{"class":2185},[1664,3616,2573],{"class":2171},[1664,3618,2189],{"class":2171},[1664,3620,3621],{"class":1674},"text-slate-600 dark:text-slate-400 font-semibold",[1664,3623,2189],{"class":2171},[1664,3625,2635],{"class":2171},[1664,3627,3628],{"class":2638},"Price: {{ product.price }}",[1664,3630,2642],{"class":2171},[1664,3632,1664],{"class":2556},[1664,3634,2560],{"class":2171},[1664,3636,3637,3639,3641],{"class":1666,"line":2080},[1664,3638,3350],{"class":2171},[1664,3640,1598],{"class":2556},[1664,3642,2560],{"class":2171},[1664,3644,3645,3647,3649],{"class":1666,"line":2086},[1664,3646,2695],{"class":2171},[1664,3648,1598],{"class":2556},[1664,3650,2560],{"class":2171},[1664,3652,3653,3655,3657],{"class":1666,"line":2092},[1664,3654,2824],{"class":2171},[1664,3656,1598],{"class":2556},[1664,3658,2560],{"class":2171},[1664,3660,3661,3663,3665],{"class":1666,"line":2368},[1664,3662,2642],{"class":2171},[1664,3664,2557],{"class":2556},[1664,3666,2560],{"class":2171},[16,3668,3669,3670,3672],{},"In this component, we handle the scenario of finding the product and adding it to the basket after our basic scenario. Here, in our upper layer, which is the ",[20,3671,2522],{}," layer, we find the product, send its information to this component, and display it.",[16,3674,3675],{},[120,3676,3677],{},[20,3678,2522],{},[355,3680,3682],{"className":2544,"code":3681,"language":2546,"meta":364,"style":364},"\u003Cscript setup>\nimport { ref } from 'vue'\nimport ImageUpload from '@\u002Fcomponents\u002FImageUpload.vue'\nimport ResultDisplay from '@\u002Fcomponents\u002FResultDisplay.vue'\nimport SimpleBasket from '@\u002Fcomponents\u002FSimpleBasket.vue'\n\nconst classificationResults = ref([])\nconst products = ref([])\nconst getResult = (result) => {\n  classificationResults.value = result;\n}\nconst getProducts = (result) => {\n  products.value = result\n};\n\u003C\u002Fscript>\n\u003Ctemplate>\n  \u003CImageUpload @getResult=\"getResult\" @getProducts=\"getProducts\" \u002F>\n  \u003CResultDisplay v-if=\"classificationResults.length > 0\" :labels=\"classificationResults\" \u002F>\n  \u003CSimpleBasket v-if=\"classificationResults.length > 0\" :products=\"products\" \u002F>\n\u003C\u002Ftemplate>\n",[362,3683,3684,3694,3720,3737,3753,3769,3774,3789,3802,3826,3844,3848,3867,3880,3884,3892,3900,3931,3962,3993],{"__ignoreMap":364},[1664,3685,3686,3688,3690,3692],{"class":1666,"line":1667},[1664,3687,2553],{"class":2171},[1664,3689,3161],{"class":2556},[1664,3691,3164],{"class":2185},[1664,3693,2560],{"class":2171},[1664,3695,3696,3700,3703,3706,3709,3712,3715,3717],{"class":1666,"line":778},[1664,3697,3699],{"class":3698},"s7zQu","import",[1664,3701,3702],{"class":2171}," {",[1664,3704,3705],{"class":2638}," ref",[1664,3707,3708],{"class":2171}," }",[1664,3710,3711],{"class":3698}," from",[1664,3713,3714],{"class":2171}," '",[1664,3716,2546],{"class":1674},[1664,3718,3719],{"class":2171},"'\n",[1664,3721,3722,3724,3727,3730,3732,3735],{"class":1666,"line":781},[1664,3723,3699],{"class":3698},[1664,3725,3726],{"class":2638}," ImageUpload ",[1664,3728,3729],{"class":3698},"from",[1664,3731,3714],{"class":2171},[1664,3733,3734],{"class":1674},"@\u002Fcomponents\u002FImageUpload.vue",[1664,3736,3719],{"class":2171},[1664,3738,3739,3741,3744,3746,3748,3751],{"class":1666,"line":1716},[1664,3740,3699],{"class":3698},[1664,3742,3743],{"class":2638}," ResultDisplay ",[1664,3745,3729],{"class":3698},[1664,3747,3714],{"class":2171},[1664,3749,3750],{"class":1674},"@\u002Fcomponents\u002FResultDisplay.vue",[1664,3752,3719],{"class":2171},[1664,3754,3755,3757,3760,3762,3764,3767],{"class":1666,"line":1722},[1664,3756,3699],{"class":3698},[1664,3758,3759],{"class":2638}," SimpleBasket ",[1664,3761,3729],{"class":3698},[1664,3763,3714],{"class":2171},[1664,3765,3766],{"class":1674},"@\u002Fcomponents\u002FSimpleBasket.vue",[1664,3768,3719],{"class":2171},[1664,3770,3771],{"class":1666,"line":1923},[1664,3772,3773],{"emptyLinePlaceholder":806},"\n",[1664,3775,3776,3779,3782,3784,3786],{"class":1666,"line":2032},[1664,3777,3778],{"class":2185},"const",[1664,3780,3781],{"class":2638}," classificationResults ",[1664,3783,2573],{"class":2171},[1664,3785,3705],{"class":3171},[1664,3787,3788],{"class":2638},"([])\n",[1664,3790,3791,3793,3796,3798,3800],{"class":1666,"line":2038},[1664,3792,3778],{"class":2185},[1664,3794,3795],{"class":2638}," products ",[1664,3797,2573],{"class":2171},[1664,3799,3705],{"class":3171},[1664,3801,3788],{"class":2638},[1664,3803,3804,3806,3809,3811,3814,3818,3820,3823],{"class":1666,"line":2044},[1664,3805,3778],{"class":2185},[1664,3807,3808],{"class":2638}," getResult ",[1664,3810,2573],{"class":2171},[1664,3812,3813],{"class":2171}," (",[1664,3815,3817],{"class":3816},"sHdIc","result",[1664,3819,3196],{"class":2171},[1664,3821,3822],{"class":2185}," =>",[1664,3824,3825],{"class":2171}," {\n",[1664,3827,3828,3831,3833,3836,3839,3842],{"class":1666,"line":2050},[1664,3829,3830],{"class":2638},"  classificationResults",[1664,3832,883],{"class":2171},[1664,3834,3835],{"class":2638},"value",[1664,3837,3838],{"class":2171}," =",[1664,3840,3841],{"class":2638}," result",[1664,3843,3199],{"class":2171},[1664,3845,3846],{"class":1666,"line":2056},[1664,3847,1926],{"class":2171},[1664,3849,3850,3852,3855,3857,3859,3861,3863,3865],{"class":1666,"line":2062},[1664,3851,3778],{"class":2185},[1664,3853,3854],{"class":2638}," getProducts ",[1664,3856,2573],{"class":2171},[1664,3858,3813],{"class":2171},[1664,3860,3817],{"class":3816},[1664,3862,3196],{"class":2171},[1664,3864,3822],{"class":2185},[1664,3866,3825],{"class":2171},[1664,3868,3869,3871,3873,3875,3877],{"class":1666,"line":2068},[1664,3870,3427],{"class":2638},[1664,3872,883],{"class":2171},[1664,3874,3835],{"class":2638},[1664,3876,3838],{"class":2171},[1664,3878,3879],{"class":2638}," result\n",[1664,3881,3882],{"class":1666,"line":2074},[1664,3883,3027],{"class":2171},[1664,3885,3886,3888,3890],{"class":1666,"line":2080},[1664,3887,2642],{"class":2171},[1664,3889,3161],{"class":2556},[1664,3891,2560],{"class":2171},[1664,3893,3894,3896,3898],{"class":1666,"line":2086},[1664,3895,2553],{"class":2171},[1664,3897,2557],{"class":2556},[1664,3899,2560],{"class":2171},[1664,3901,3902,3904,3907,3910,3912,3914,3916,3918,3921,3923,3925,3927,3929],{"class":1666,"line":2092},[1664,3903,2565],{"class":2171},[1664,3905,3906],{"class":2556},"ImageUpload",[1664,3908,3909],{"class":2185}," @getResult",[1664,3911,2573],{"class":2171},[1664,3913,2189],{"class":2171},[1664,3915,3139],{"class":1674},[1664,3917,2189],{"class":2171},[1664,3919,3920],{"class":2185}," @getProducts",[1664,3922,2573],{"class":2171},[1664,3924,2189],{"class":2171},[1664,3926,3142],{"class":1674},[1664,3928,2189],{"class":2171},[1664,3930,2690],{"class":2171},[1664,3932,3933,3935,3938,3940,3942,3944,3947,3949,3952,3954,3956,3958,3960],{"class":1666,"line":2368},[1664,3934,2565],{"class":2171},[1664,3936,3937],{"class":2556},"ResultDisplay",[1664,3939,2612],{"class":2185},[1664,3941,2573],{"class":2171},[1664,3943,2189],{"class":2171},[1664,3945,3946],{"class":1674},"classificationResults.length > 0",[1664,3948,2189],{"class":2171},[1664,3950,3951],{"class":2185}," :labels",[1664,3953,2573],{"class":2171},[1664,3955,2189],{"class":2171},[1664,3957,3098],{"class":1674},[1664,3959,2189],{"class":2171},[1664,3961,2690],{"class":2171},[1664,3963,3964,3966,3969,3971,3973,3975,3977,3979,3982,3984,3986,3989,3991],{"class":1666,"line":2388},[1664,3965,2565],{"class":2171},[1664,3967,3968],{"class":2556},"SimpleBasket",[1664,3970,2612],{"class":2185},[1664,3972,2573],{"class":2171},[1664,3974,2189],{"class":2171},[1664,3976,3946],{"class":1674},[1664,3978,2189],{"class":2171},[1664,3980,3981],{"class":2185}," :products",[1664,3983,2573],{"class":2171},[1664,3985,2189],{"class":2171},[1664,3987,3988],{"class":1674},"products",[1664,3990,2189],{"class":2171},[1664,3992,2690],{"class":2171},[1664,3994,3995,3997,3999],{"class":1666,"line":2408},[1664,3996,2642],{"class":2171},[1664,3998,2557],{"class":2556},[1664,4000,2560],{"class":2171},[16,4002,4003,4004,4006,4007,4012,4013,883],{},"After calling our components in ",[20,4005,2522],{},", we obtain the appearance in our visualization. If there are any differences or missing parts in your view, you can check ",[53,4008,4011],{"href":4009,"rel":4010},"https:\u002F\u002Fgithub.com\u002FEralpozcan\u002FTF.js-with-Vue3",[57],"TF.js-with-Vue3"," for the repository. Alternatively, you can download it directly to your computer. Or, if you prefer, you can try ",[53,4014,4017],{"href":4015,"rel":4016},"https:\u002F\u002Ftf-js-with-vue3.vercel.app\u002F",[57],"TF.js with Vue3 on Vercel",[16,4019,4020],{},[35,4021],{"alt":4022,"src":4023},"TensorFlow.js Preview","https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F5708\u002F1*CbMt2ztPsdXle7IR5bQU4A.png",[16,4025,4026,4027,4030,4031,4033],{},"Now that we have completed all these stages, let’s move on to testing our project. As an example, I chose one of the images that appear when searching for ",[20,4028,4029],{},"“French Loaf”"," on Google because it is available within the ",[20,4032,1559],{}," labels. We have also defined its classification in our Mockup Data.",[16,4035,4036],{},[35,4037],{"alt":4038,"src":4039},"TensorFlow.js Recognition","https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F5708\u002F1*WACbtVHDdnE6UbNdvnEnlQ.png",[16,4041,4042,4043,4046],{},"After selecting and uploading our image, we press the “",[120,4044,4045],{},"Classify-Recognize","” button. We then display the top 3 predictions with high probabilities and automatically add the item to our basket.",[1815,4048],{"src":4049,"width":1818,"height":1818,"style":364,"frameBorder":1819,"className":4050,"allowFullScreen":806},"https:\u002F\u002Fgiphy.com\u002Fembed\u002F8c3LWBENZHRnP6ixOc",[1821],[16,4052,4053],{},[35,4054],{"alt":4055,"src":4056},"Tensorflow.js Results","https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F5708\u002F1*1uyzTdpJOtoDpOMAflEzOw.png",[16,4058,4059,4060,4062],{},"As we can see, we implemented a simple Object Recognition and Add to Cart scenario using ",[20,4061,1555],{}," in the project. Through this, we explored how we can easily integrate artificial intelligence and tools into our projects or daily scenarios.",[16,4064,4065,4066,4068],{},"In this article, I tried to explain the usage and installation of ",[20,4067,1555],{}," with examples of how it can be beneficial in a simple scenario.",[16,4070,4071,4072,4076,4077,4080,4081,4084],{},"After reading my ",[53,4073,200],{"href":4074,"rel":4075},"https:\u002F\u002Fmedium.com\u002Fhow-to-use\u002Fhow-to-use-object-recognition-with-tensorflow-js-and-vue-3-57dac4a53494",[57]," post, feel free to reach out to me on ",[53,4078,749],{"href":747,"rel":4079},[57]," if you have any questions or suggestions.For my other accounts, you can visit ",[53,4082,755],{"href":753,"rel":4083},[57],"🤖",[16,4086,1513],{},[4088,4089,4090],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":364,"searchDepth":778,"depth":778,"links":4092},[4093,4094,4098,4099,4100,4101,4102],{"id":1593,"depth":781,"text":1596},{"id":1633,"depth":778,"text":1634,"children":4095},[4096],{"id":1732,"depth":781,"text":4097},"📌 Optional Installation",{"id":1812,"depth":778,"text":1813},{"id":1882,"depth":778,"text":1883},{"id":1990,"depth":778,"text":1991},{"id":2132,"depth":778,"text":2133},{"id":2489,"depth":778,"text":2490,"children":4103},[4104,4105],{"id":2533,"depth":781,"text":2536},{"id":2842,"depth":781,"text":2845},"2024-06-31","In recent years, artificial intelligence and its products have become increasingly active and are starting to take their place in our lives, with their numbers steadily rising. We all have the question in mind of how we can use this in our daily lives. In this article, we will create a simple application together using TensorFlow.js, where we will use ImageNet classes and the MobileNet-v2 model to recognize and add an object\u002Fitem to the cart. This way, we will implement a scenario similar to the basic working principle of Amazon Go. Let’s get started 🚀",{"card_description":4109,"cover":4110,"language":4111,"links":4112},"Artificial intelligence is becoming more integrated into daily life, prompting practical use cases. This article shows how to build a simple app with TensorFlow.js and the MobileNet-v2 model to recognize objects and add them to a cart, mimicking Amazon Go. Let's get started 🚀","\u002Fassets\u002Fimages\u002Fblog\u002Ftensorflowjs.webp","en",[4113,4114],{"medium":4074},{"devto":4115},"https:\u002F\u002Fdev.to\u002Feralpozcan\u002Fhow-to-use-object-recognition-with-tensorflowjs-and-vue-3-3glb","\u002Fblog\u002Fhow-to-use-object-recognition-with-tensorflowjs-and-vue-3","18",{"title":1544,"description":4107},{"loc":4120,"lastmod":4106,"changefreq":812,"priority":813},"http:\u002F\u002Feralpozcan.dev\u002Fblog\u002Fhow-to-use-object-recognition-with-tensorflow-js-and-vue-3","blog\u002Fhow-to-use-object-recognition-with-tensorflowjs-and-vue-3",[1555,4123,4124,4125,4126,4127,4128],"Vue.js","Machine Learning","AI","Object Recognition","JavaScript","MobileNet","Uz5EOyD_NrzbYbwkwArUSOvKq2MGIiOI0nGpIjIlh9E",{"id":4131,"title":4132,"body":4133,"date":4919,"description":4140,"extension":796,"image":797,"meta":4920,"navigation":806,"ogImage":4922,"path":4927,"readingTime":4928,"robots":797,"schemaOrg":797,"seo":4929,"sitemap":4930,"stem":4932,"tags":4933,"__hash__":4937},"blog\u002Fblog\u002Fhow-to-use-sentry-with-vue-3.md","How to Use Sentry with Vue 3?",{"type":8,"value":4134,"toc":4911},[4135,4138,4141,4147,4153,4159,4162,4169,4207,4217,4221,4224,4234,4241,4247,4253,4259,4269,4275,4281,4300,4306,4332,4390,4404,4407,4413,4419,4427,4430,4485,4491,4497,4504,4510,4517,4527,4533,4544,4547,4552,4572,4577,4587,4597,4604,4609,4616,4626,4631,4639,4644,4659,4664,4671,4676,4681,4849,4857,4868,4879,4887,4893,4905,4908],[11,4136,4132],{"id":4137},"how-to-use-sentry-with-vue-3",[16,4139,4140],{},"Don’t we often encounter errors and find it difficult to identify them? One of the error and performance monitoring tools is Sentry. In this article, I will explain how to set up Sentry and make improvements with performance monitoring. Are you ready? Let’s get started! 🚀",[888,4142,4144],{"id":4143},"what-is-sentry",[20,4145,4146],{},"What is Sentry?",[16,4148,4149],{},[35,4150],{"alt":4151,"src":4152},"Sentry","https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F2000\u002F1*KPMnUpwtjAJ_97NZO50Lew.png",[16,4154,4155,4156,4158],{},"If we need to provide a general description, ",[20,4157,4151],{}," is an error tracking and reporting platform for many of our applications, and we can even add that it's a performance reporting platform.",[16,4160,4161],{},"Sentry allows developers to monitor application errors in real-time, receive and analyze error reports, and quickly diagnose issues.",[16,4163,4164,4165,4168],{},"The ",[20,4166,4167],{},"key features"," of Sentry include:",[176,4170,4171,4177,4183,4189,4195],{},[50,4172,4173,4176],{},[20,4174,4175],{},"Error Tracking",": Sentry tracks and captures errors in applications. It can detect various types of errors such as exceptions, error messages, errors in the user interface, and more.",[50,4178,4179,4182],{},[20,4180,4181],{},"Real-time Monitoring",": Sentry monitors application errors in real-time and sends notifications promptly. This allows developers to quickly notice mistakes and take action.",[50,4184,4185,4188],{},[20,4186,4187],{},"Error Reporting",": Sentry reports errors in detail. Error reports provide crucial information about when, where, and under what conditions the error occurred. This helps developers diagnose and fix errors.",[50,4190,4191,4194],{},[20,4192,4193],{},"Integrations",": Sentry supports many popular programming languages and various platforms. This allows it to integrate with different types of applications and systems.",[50,4196,4197,4200,4201,4206],{},[20,4198,4199],{},"Performance Monitoring",": Sentry can monitor the performance of applications and detect performance issues. With performance monitoring features, developers can optimize the performance of their applications and enhance the user experience. ",[120,4202,4203],{},[20,4204,4205],{},"We’ll even provide an example in this regard"," 😉",[16,4208,4209],{},[120,4210,4211,4212],{},"Additionally, in addition to the basic explanation provided here, I recommend reading Onur Dayıbaş’s Medium article titled ",[53,4213,4216],{"href":4214,"rel":4215},"https:\u002F\u002Fmedium.com\u002Ffrontend-development-with-js\u002Fsentrydeki-baz%C4%B1-kavramlar-project-env-release-ve-sourcemap-2a041395c43b",[57],"Some Concepts in Sentry",[888,4218,4220],{"id":4219},"installation","Installation",[16,4222,4223],{},"Firstly, I will support the steps we will take here with visuals. Sentry itself will also provide us with sufficient assistance in this regard.",[16,4225,4226,4227,4233],{},"📌 Go to  ",[20,4228,4229],{},[53,4230,4151],{"href":4231,"rel":4232},"https:\u002F\u002Fsentry.io\u002F",[57],"’s website and create an account if you don’t have one, or log in if you already have an account.",[16,4235,4236,4237,4240],{},"📌 If you’re logging in for the first time, you’ll be prompted to create an organization. One of the main reasons for this is to enable collaboration with your team members. In this example, I’ll skip this step by creating an organization named “",[120,4238,4239],{},"Example","”.",[16,4242,4243],{},[35,4244],{"alt":4245,"src":4246},"Create Sentry Organization","https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F2000\u002F1*4f-HuN-NdMT71Tk04eEAeg.jpeg",[16,4248,4249,4250,883],{},"📌 We are presented with a screen where we can choose the platform we want to set up. Here, we select ",[20,4251,4252],{},"Vue",[16,4254,4255],{},[35,4256],{"alt":4257,"src":4258},"Choose Platform","https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F3338\u002F1*LrfmXgglYv3nRt3MrQrMng.jpeg",[16,4260,4261,4262,4265,4266,330],{},"📌 Here, we select the alert frequency. We can adjust this setting later, but for now, we select the option “",[120,4263,4264],{},"Alert me on every new issue.","” Then, we proceed to the next step, where we create our project and choose our team. If you don’t have a team, by default, it will use the name of your organization as the team. If you want to create a different team, you can click on the “+” sign to create one. Finally, we click on “",[120,4267,4268],{},"Create Project.",[16,4270,4271],{},[35,4272],{"alt":4273,"src":4274},"Create Project with alert frequency","https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F3380\u002F1*-L3H4uW2SZgSvkJNrl817w.jpeg",[16,4276,4277,4278,4280],{},"📌 Here, ",[20,4279,4151],{}," provides us with instructions. It automatically adjusts settings based on three main scenarios. Some important points to understand are as follows:",[176,4282,4283,4289,4294],{},[50,4284,4285,4288],{},[20,4286,4287],{},"Error Monitoring",": This is our error monitoring setting. It is selected by default, and we cannot disable it because that’s our primary goal 😉",[50,4290,4291,4293],{},[20,4292,4199],{},": Here, we measure the performance of our page load. If we don’t want this option, we can remove it.",[50,4295,4296,4299],{},[20,4297,4298],{},"Session Replay",": This is actually one of the features we love. It provides a small video snippet showing how errors occurred. However, it is not recommended to collect these data at high rates. It’s sufficient to enable it only for errors.",[16,4301,4302],{},[35,4303],{"alt":4304,"src":4305},"Install Configure","https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F3318\u002F1*70xw3bqMfOfL130UIlSdDw.jpeg",[16,4307,4308,4309,4311,4312,4314,4315,4317,4318,4321,4322,4324,4325,3813,4328,4331],{},"Let’s move on to the installation process. As shown in the screenshot above, we install the ",[20,4310,4151],{}," package in our project using either “",[120,4313,1671],{},"” or “",[120,4316,1701],{},"” depending on our preference. Then, we directly copy the Vue3 sample code and paste it into our “",[120,4319,4320],{},"main.js","” file. Of course, you may have a different “",[120,4323,4320],{},"” file in your project. The important point here is to include the portion starting with ",[362,4326,4327],{},"Sentry.init({])",[120,4329,4330],{},"Don’t forget to import it","). The key settings and their meanings in this configuration are as follows:",[47,4333,4334,4340,4346,4359,4369,4382],{},[50,4335,4336,4339],{},[20,4337,4338],{},"App",":  It is used to specify the application object, which is the application we created with createApp or the application we want to monitor.",[50,4341,4342,4345],{},[20,4343,4344],{},"dns:"," The address of the Sentry server where error reports will be sent. I recommend keeping this address in a secure manner, such as using a .env file. Exposing this address can lead to potential security issues.",[50,4347,4348,4351,4352,1743,4355,4358],{},[20,4349,4350],{},"integrations",": It is used to configure Sentry integrations. In this example, ",[362,4353,4354],{},"Sentry.BrowserTracing",[362,4356,4357],{},"Sentry.Replayintegrations"," are used.",[50,4360,4361,4364,4365,4368],{},[20,4362,4363],{},"tracesSampleRate",": Performance monitoring sample rate. It is expressed as a percentage, and in this example, it is set to ",[20,4366,4367],{},"100%"," It is recommended to lower this rate in real production environments.",[50,4370,4371,4374,4375,4378,4379,4381],{},[20,4372,4373],{},"replaysSessionSampleRate",": Session replay sample rate. It is expressed as a percentage, and in this example, it is set to ",[20,4376,4377],{},"10%",". During development, it can be set ",[20,4380,4367],{}," for better analysis, while in production, a lower sampling rate can be used.",[50,4383,4384,4387,4388],{},[20,4385,4386],{},"replaysOnErrorSampleRate",": Sample rate for sessions with errors. If you are not already sampling sessions, you can set the sampling rate for sessions with errors to ",[20,4389,4367],{},[16,4391,4392,4393,4400,4401,883],{},"For more advanced configuration options that are not shown in the screenshot, you can refer to the ",[53,4394,4397],{"href":4395,"rel":4396},"https:\u002F\u002Fdocs.sentry.io\u002Fplatforms\u002Fjavascript\u002Fguides\u002Fvue\u002Fconfiguration\u002Foptions\u002F?original_referrer=https%3A%2F%2Fvueschool.io%2F&utm_campaign=evergreen-vue-school-course-2022&utm_medium=partner&utm_source=vueschool",[57],[120,4398,4399],{},"Sentry Basic Options"," in the documentation to make detailed adjustments. Essentially, we have completed the basic installation process here. Now, let’s see how we can capture our ",[20,4402,4403],{},"first error",[888,4405,592],{"id":4406},"issues",[16,4408,4409,4410,4412],{},"After completing the installations, ",[20,4411,4151],{}," automatically redirects us to a page like the one below and expects us to send our errors. In fact, we will see or track all the errors here.",[16,4414,4415],{},[35,4416],{"alt":4417,"src":4418},"Sentry Issues Page","https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F3786\u002F1*Kn4dZSqzZFClgWi6WZ7rew.jpeg",[732,4420,4421],{},[16,4422,4423,4424],{},"How can we send this error or different data to Sentry? ",[120,4425,4426],{},"🤔",[16,4428,4429],{},"👩‍💻 We are creating a simple button and function.",[355,4431,4435],{"className":4432,"code":4433,"language":4434,"meta":364,"style":364},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","  \u003Cbutton @click=\"sendSentryData\">Click me\u003C\u002Fbutton>\n\n  function sendSentryData() {\n    Sentry.captureMessage('Button clicked');\n  }\n","js",[362,4436,4437,4446,4450,4458,4481],{"__ignoreMap":364},[1664,4438,4439,4441,4443],{"class":1666,"line":1667},[1664,4440,2565],{"class":2171},[1664,4442,2773],{"class":2556},[1664,4444,4445],{"class":2171}," @click=\"sendSentryData\">Click me\u003C\u002Fbutton>\n",[1664,4447,4448],{"class":1666,"line":778},[1664,4449,3773],{"emptyLinePlaceholder":806},[1664,4451,4452,4455],{"class":1666,"line":781},[1664,4453,4454],{"class":2185},"  function",[1664,4456,4457],{"class":2171}," sendSentryData() {\n",[1664,4459,4460,4463,4465,4468,4470,4473,4476,4478],{"class":1666,"line":1716},[1664,4461,4462],{"class":2638},"    Sentry",[1664,4464,883],{"class":2171},[1664,4466,4467],{"class":3171},"captureMessage",[1664,4469,3175],{"class":2638},[1664,4471,4472],{"class":2171},"'",[1664,4474,4475],{"class":1674},"Button clicked",[1664,4477,4472],{"class":2171},[1664,4479,4480],{"class":2638},");\n",[1664,4482,4483],{"class":1666,"line":1722},[1664,4484,2425],{"class":2171},[16,4486,4487,4488,4490],{},"If you haven’t imported and initialized ",[20,4489,4151],{}," when creating this function, you will receive the error shown in the image below.",[16,4492,4493],{},[35,4494],{"alt":4495,"src":4496},"Sentry ReferenceError","https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F2524\u002F1*vemyluI6ZEEpZ0vCFi1TVA.jpeg",[16,4498,4499],{},[35,4500],{"src":4501,"loading":4502,"alt":4503},"https:\u002F\u002Fmedia.giphy.com\u002Fmedia\u002Fv1.Y2lkPTc5MGI3NjExcWpxbTN3b3Z5aXdiMjBraWNnb3N4OXphYzRmNjF0anZwcHR5eG4xbiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw\u002FJqDeI2yjpSRgdh35oe\u002Fgiphy.gif","lazy","Ta daa Friends Gif",[16,4505,4506],{},[35,4507],{"alt":4508,"src":4509},"Show Reference Error in Issues","https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F3800\u002F1*4BK7hzeNWYzqCm0sEHqTyQ.jpeg",[732,4511,4512],{},[16,4513,4514],{},[20,4515,4516],{},"We encountered our first error! So how did this happen?",[16,4518,4519,4520,4522,4523,4526],{},"Because we encountered a reference error at its core, and since our ",[20,4521,4386],{}," value is set to 100%, Sentry detected it and sent it to us directly. By clicking on its content, we can learn more about the occurrence of the error or get detailed information. However, to keep it brief, I won’t go into that here. We received the error because we hadn’t defined Sentry. To resolve this, we add the code ",[362,4524,4525],{},"import * as Sentry from '@sentry\u002Fvue' "," to our script and click the button again. 🖱️",[16,4528,4529],{},[35,4530],{"alt":4531,"src":4532},"Issueses","https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F3340\u002F1*GnbJRVuMPRMBh2cLLlznxw.jpeg",[16,4534,4535,4536,4539,4540,4543],{},"As you can see, we can also view the message we sent. One important aspect here is that we can see how many times this error occurred and how many users experienced it. The “",[120,4537,4538],{},"Events","” count shows how many times the error occurred, while the “",[120,4541,4542],{},"Users","” count indicates how many different users encountered this issue. By clicking into the error, we can access more detailed information. Essentially, we have successfully performed a basic error and data reporting process. Now, let’s move on to performance analysis.",[888,4545,4199],{"id":4546},"performance-monitoring",[16,4548,4549],{},[35,4550],{"src":4551,"loading":4502},"https:\u002F\u002Fmedia.giphy.com\u002Fmedia\u002Fv1.Y2lkPTc5MGI3NjExNzhibDhtZXYyNjh5ampvY2x4ZjRlYnM1ZG1qMnIydmMyOXZ0M20yNSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw\u002FrM0wxzvwsv5g4\u002Fgiphy.gif",[16,4553,4554,4555,4557,4558,4560,4561,1743,4564,4567,4568,4571],{},"As you know, one of the important aspects for all of us is the page loading speed, in other words, the performance of our project. We mentioned that with ",[20,4556,4151],{},", it is possible to analyze this performance. If we selected the Performance Monitoring option during the installation process, we actually gain some speed in the setup phase. When we return to our “",[120,4559,4320],{},"” file, we will see thee ",[20,4562,4563],{},"BrowserTracing",[20,4565,4566],{},"tranceSampleRate"," values. In BrowserTracing, the adjustments we make involve entering the addresses of our domains. “",[120,4569,4570],{},"localhost","” is set as the default. Additionally, we need to add the address of the deployed application.",[16,4573,4574],{},[35,4575],{"alt":364,"src":4576},"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F2074\u002F1*iAxm524BfUalKzVQgyP5Bg.jpeg",[16,4578,4579,4580,4586],{},"I have added the example “",[53,4581,4584],{"href":4582,"rel":4583},"https:\u002F\u002Fmoviepal.vercel.app",[57],[120,4585,4582],{},"“ as you mentioned. This way, I will be able to measure its performance even in the deployed state.",[16,4588,4589,4590,4592,4593,4596],{},"Another value we have is ",[20,4591,4566],{},", and it is recommended to lower this value in production environments. However, if you are doing local development, it is recommended to set this value to ",[20,4594,4595],{},"1.0",". This way, you will be able to analyze all page reloads.",[732,4598,4599],{},[16,4600,4601],{},[20,4602,4603],{},"How will performance monitoring be beneficial for us? Let’s see it in practice.",[16,4605,4606],{},[35,4607],{"loading":4502,"src":4608},"https:\u002F\u002Fmedia.giphy.com\u002Fmedia\u002Fv1.Y2lkPTc5MGI3NjExODB2d2didDNqYzh0cWl5YWd2ZTFncG1zaW0ycW9ia3VqaXhrY21qeCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw\u002F2IudUHdI075HL02Pkk\u002Fgiphy.gif",[16,4610,4611,4612,4615],{},"In fact, while working on this project, I was monitoring the performance metrics. And then I realized that the page loading was taking longer due to the images. I was using ",[20,4613,4614],{},"UseImage"," for this purpose, thinking it would be effective, but it doesn’t seem to be the case.",[16,4617,4618,4619],{},"📌 I have shared the development examples I made here on ",[53,4620,4623],{"href":4621,"rel":4622},"https:\u002F\u002Fgist.github.com\u002FEralpozcan\u002Fae1f7d40b16b8420d4ab3f0ac6b6b430",[57],[20,4624,4625],{},"Gist",[16,4627,4628],{},[35,4629],{"alt":364,"src":4630},"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F3346\u002F1*YbGalxlbV7SLVzmxpncoZg.jpeg",[16,4632,4633,4634,4638],{},"📌 The first thing I did here was to remove ",[53,4635,4614],{"href":4636,"rel":4637},"https:\u002F\u002Fvueuse.org\u002Fcore\u002FuseImage\u002F",[57]," and use a regular Img tag to observe the situation.",[16,4640,4641],{},[35,4642],{"alt":364,"src":4643},"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F3326\u002F1*FIKgAMgISoZUcwaMtBuhYQ.jpeg",[16,4645,4646,4647,4650,4651,4654,4655,4658],{},"📌 As you can see, there is some improvement in our metrics. Although the ",[120,4648,4649],{},"CLS"," value has increased, other parameters show a decrease of over ",[20,4652,4653],{},"50%",". Next, I enable the lazy loading feature of Swiper and the lazy attribute of the img tag. This leads to a significant decrease in our ",[120,4656,4657],{},"TTFB"," value.",[16,4660,4661],{},[35,4662],{"alt":364,"src":4663},"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F3312\u002F1*3UqIPltOhomjiLorbHV-dg.jpeg",[16,4665,4666,4667,4670],{},"📌 Then, as observed in the images, I notice that ",[120,4668,4669],{},"CSS"," files are being repeatedly imported and loaded within the components. I address this by globally importing them into the root directory of our project. This way, there will be no need to load them repeatedly on this page.",[16,4672,4673],{},[35,4674],{"alt":364,"src":4675},"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F3320\u002F1*4PBTiuyqpEBY7mV_yjWsMQ.jpeg",[732,4677,4678],{},[16,4679,4680],{},"You can find a table below that shows the processes we do in a more comparable way.👇",[4682,4683,4684,4715],"table",{},[4685,4686,4687],"thead",{},[4688,4689,4690,4694,4697,4700,4702,4705,4708,4711,4713],"tr",{},[4691,4692,4693],"th",{},"Process",[4691,4695,4696],{},"Swiper CSS Imported",[4691,4698,4699],{},"Event Duration",[4691,4701,4649],{},[4691,4703,4704],{},"FCP",[4691,4706,4707],{},"FP",[4691,4709,4710],{},"LCP",[4691,4712,4657],{},[4691,4714,4625],{},[4716,4717,4718,4752,4784,4816],"tbody",{},[4688,4719,4720,4726,4729,4732,4735,4738,4740,4743,4746],{},[4721,4722,4723],"td",{},[20,4724,4725],{},"Swiper with UseImage",[4721,4727,4728],{},"Yes",[4721,4730,4731],{},"2.93s",[4721,4733,4734],{},"0.226",[4721,4736,4737],{},"733.4ms",[4721,4739,4737],{},[4721,4741,4742],{},"1.207s",[4721,4744,4745],{},"80.20ms",[4721,4747,4748],{},[53,4749,4725],{"href":4750,"rel":4751},"https:\u002F\u002Fgist.github.com\u002FEralpozcan\u002Fae1f7d40b16b8420d4ab3f0ac6b6b430#file-swiper1useimage-vue",[57],[4688,4753,4754,4759,4761,4764,4767,4770,4772,4775,4778],{},[4721,4755,4756],{},[20,4757,4758],{},"Swiper with Img Tag",[4721,4760,4728],{},[4721,4762,4763],{},"2.67s",[4721,4765,4766],{},"0.392",[4721,4768,4769],{},"383.4ms",[4721,4771,4769],{},[4721,4773,4774],{},"1.157s",[4721,4776,4777],{},"35.60ms",[4721,4779,4780],{},[53,4781,4758],{"href":4782,"rel":4783},"https:\u002F\u002Fgist.github.com\u002FEralpozcan\u002Fae1f7d40b16b8420d4ab3f0ac6b6b430#file-swiper2img-vue",[57],[4688,4785,4786,4791,4793,4796,4799,4802,4804,4807,4810],{},[4721,4787,4788],{},[20,4789,4790],{},"Swiper with Img and Lazy",[4721,4792,4728],{},[4721,4794,4795],{},"2.06s",[4721,4797,4798],{},"0.253",[4721,4800,4801],{},"391ms",[4721,4803,4801],{},[4721,4805,4806],{},"791.5ms",[4721,4808,4809],{},"18.60ms",[4721,4811,4812],{},[53,4813,4790],{"href":4814,"rel":4815},"https:\u002F\u002Fgist.github.com\u002FEralpozcan\u002Fae1f7d40b16b8420d4ab3f0ac6b6b430#file-swiper3imglazy-vue",[57],[4688,4817,4818,4822,4825,4828,4831,4834,4836,4839,4842],{},[4721,4819,4820],{},[20,4821,4790],{},[4721,4823,4824],{},"No",[4721,4826,4827],{},"1.78s",[4721,4829,4830],{},"0.218",[4721,4832,4833],{},"312.9ms",[4721,4835,4833],{},[4721,4837,4838],{},"693.7ms",[4721,4840,4841],{},"8ms",[4721,4843,4844],{},[53,4845,4848],{"href":4846,"rel":4847},"https:\u002F\u002Fgist.github.com\u002FEralpozcan\u002Fae1f7d40b16b8420d4ab3f0ac6b6b430#file-swiper4imglazycss-vue",[57],"Swiper with Img and Lazy without CSS",[16,4850,4851],{},[120,4852,4853,4856],{},[20,4854,4855],{},"Swiper CSS Imported:"," Indicates whether the Swiper CSS is being reloaded within the page. If the value is “No”, it means that it has been imported into the project’s root directory as well.",[732,4858,4859],{},[16,4860,4861,4862,4867],{},"If you feel that your knowledge about abbreviations and metrics is not sufficient, Google ",[53,4863,4866],{"href":4864,"rel":4865},"https:\u002F\u002Fweb.dev\u002Fmetrics\u002F",[57],"web.dev"," can be helpful for you.",[16,4869,4870,4871,4873,4874,4876,4877,883],{},"As has seen, we created a simple example using ",[20,4872,4151],{},"’s ",[120,4875,4199],{}," tool and optimized our code. Of course, there are different optimization methods available, but here we made some basic improvements and significantly increased our page loading speed through ",[20,4878,4151],{},[732,4880,4881],{},[888,4882,4884,883],{"id":4883},"with-these-optimizations-we-were-able-to-increase-our-page-loading-speed-by-approximately-60",[20,4885,4886],{},"With these optimizations, we were able to increase our page loading speed by approximately 60%",[16,4888,4889,4890,4892],{},"In this article, I have tried to explain the usage and installation of ",[20,4891,4151],{}," and how it can be beneficial to us by providing examples.",[16,4894,4071,4895,4899,4900,4904],{},[53,4896,200],{"href":4897,"rel":4898},"https:\u002F\u002Fmedium.com\u002F@eralpozcan\u002Fhow-to-use-sentry-with-vue-3-a8495d482672",[57]," post, feel free to reach out to me on my ",[53,4901,4903],{"href":747,"rel":4902},[57],"Linkedin "," account if you have any questions or suggestions.",[16,4906,4907],{},"See you in my next article! 📩",[4088,4909,4910],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":364,"searchDepth":778,"depth":778,"links":4912},[4913,4914,4915,4916,4917],{"id":4143,"depth":778,"text":4146},{"id":4219,"depth":778,"text":4220},{"id":4406,"depth":778,"text":592},{"id":4546,"depth":778,"text":4199},{"id":4883,"depth":778,"text":4918},"With these optimizations, we were able to increase our page loading speed by approximately 60%.","2023-06-26",{"card_description":4921,"cover":4922,"language":1526,"links":4923},"Don't we often encounter errors and find it difficult to identify them? One of the error and performance monitoring tools is Sentry. In this article, I will explain how to set up Sentry and make improvements with performance monitoring. Are you ready? Let's get started! 🚀","\u002Fassets\u002Fimages\u002Fblog\u002Fsentry.webp",[4924,4925],{"medium":4897},{"devto":4926},"https:\u002F\u002Fdev.to\u002Feralpozcan\u002Fhow-to-use-sentry-with-vue-3-2bi2","\u002Fblog\u002Fhow-to-use-sentry-with-vue-3","9",{"title":4132,"description":4140},{"loc":4931,"lastmod":4919,"changefreq":812,"priority":813},"http:\u002F\u002Feralpozcan.dev\u002Fblog\u002Fhow-to-use-sentry-with-vue-3","blog\u002Fhow-to-use-sentry-with-vue-3",[4151,4123,4287,4934,4935,4127,4936],"Performance","Debugging","Frontend","FLoxBbWRcvJgN9HLAP_YMWbdRgZr_JQMc5kOQHuJIhI",{"id":4939,"title":4940,"body":4941,"date":5474,"description":5475,"extension":796,"image":797,"meta":5476,"navigation":806,"ogImage":797,"path":5479,"readingTime":5480,"robots":797,"schemaOrg":797,"seo":5481,"sitemap":5482,"stem":5483,"tags":5484,"__hash__":5487},"blog\u002Fblog\u002Fnuxt-content-ile-blog-olusturma.md","Nuxt Content ile Modern Blog Oluşturma",{"type":8,"value":4942,"toc":5465},[4943,4946,4949,4953,4956,4988,4992,4995,5009,5016,5090,5094,5101,5160,5164,5170,5420,5424,5427,5431,5454,5457,5462],[11,4944,4940],{"id":4945},"nuxt-content-ile-modern-blog-oluşturma",[16,4947,4948],{},"Nuxt Content, Nuxt.js ekosisteminin güçlü bir parçası olarak, markdown dosyalarını kullanarak kolayca blog ve dokümantasyon siteleri oluşturmanıza olanak tanır. Bu yazıda, Nuxt Content ile nasıl modern bir blog oluşturabileceğinizi adım adım göstereceğim.",[888,4950,4952],{"id":4951},"neden-nuxt-content","Neden Nuxt Content?",[16,4954,4955],{},"Nuxt Content'in sunduğu avantajlar:",[47,4957,4958,4964,4970,4976,4982],{},[50,4959,4960,4963],{},[20,4961,4962],{},"Markdown Desteği",": Yazılarınızı markdown formatında yazabilirsiniz",[50,4965,4966,4969],{},[20,4967,4968],{},"Vue Bileşenleri",": Markdown içinde Vue bileşenlerini kullanabilirsiniz",[50,4971,4972,4975],{},[20,4973,4974],{},"Otomatik Routing",": Dosya yapısına göre otomatik route oluşturur",[50,4977,4978,4981],{},[20,4979,4980],{},"SEO Optimizasyonu",": Built-in SEO özellikleri",[50,4983,4984,4987],{},[20,4985,4986],{},"Syntax Highlighting",": Kod blokları için otomatik syntax highlighting",[888,4989,4991],{"id":4990},"kurulum","Kurulum",[16,4993,4994],{},"Öncelikle Nuxt Content'i projenize ekleyin:",[355,4996,4998],{"className":1658,"code":4997,"language":1660,"meta":364,"style":364},"npm install @nuxt\u002Fcontent\n",[362,4999,5000],{"__ignoreMap":364},[1664,5001,5002,5004,5006],{"class":1666,"line":1667},[1664,5003,1671],{"class":1670},[1664,5005,1793],{"class":1674},[1664,5007,5008],{"class":1674}," @nuxt\u002Fcontent\n",[16,5010,5011,5012,5015],{},"Sonra ",[362,5013,5014],{},"nuxt.config.ts"," dosyanızda modülü aktifleştirin:",[355,5017,5021],{"className":5018,"code":5019,"language":5020,"meta":364,"style":364},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  modules: [\n    '@nuxt\u002Fcontent'\n  ],\n  content: {\n    \u002F\u002F Content konfigürasyonu\n  }\n})\n","typescript",[362,5022,5023,5038,5048,5058,5065,5074,5079,5083],{"__ignoreMap":364},[1664,5024,5025,5028,5031,5034,5036],{"class":1666,"line":1667},[1664,5026,5027],{"class":3698},"export",[1664,5029,5030],{"class":3698}," default",[1664,5032,5033],{"class":3171}," defineNuxtConfig",[1664,5035,3175],{"class":2638},[1664,5037,3178],{"class":2171},[1664,5039,5040,5043,5045],{"class":1666,"line":778},[1664,5041,5042],{"class":2556},"  modules",[1664,5044,2192],{"class":2171},[1664,5046,5047],{"class":2638}," [\n",[1664,5049,5050,5053,5056],{"class":1666,"line":781},[1664,5051,5052],{"class":2171},"    '",[1664,5054,5055],{"class":1674},"@nuxt\u002Fcontent",[1664,5057,3719],{"class":2171},[1664,5059,5060,5063],{"class":1666,"line":1716},[1664,5061,5062],{"class":2638},"  ]",[1664,5064,2203],{"class":2171},[1664,5066,5067,5070,5072],{"class":1666,"line":1722},[1664,5068,5069],{"class":2556},"  content",[1664,5071,2192],{"class":2171},[1664,5073,3825],{"class":2171},[1664,5075,5076],{"class":1666,"line":1923},[1664,5077,5078],{"class":1695},"    \u002F\u002F Content konfigürasyonu\n",[1664,5080,5081],{"class":1666,"line":2032},[1664,5082,2425],{"class":2171},[1664,5084,5085,5087],{"class":1666,"line":2038},[1664,5086,3193],{"class":2171},[1664,5088,5089],{"class":2638},")\n",[888,5091,5093],{"id":5092},"i̇çerik-oluşturma","İçerik Oluşturma",[16,5095,5096,5097,5100],{},"Blog yazılarınızı ",[362,5098,5099],{},"content\u002Fblog\u002F"," klasörü altında oluşturun:",[355,5102,5106],{"className":5103,"code":5104,"language":5105,"meta":364,"style":364},"language-markdown shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","---\ntitle: 'Yazı Başlığı'\ndescription: 'Yazı açıklaması'\ndate: '2024-01-15'\nauthor: 'Yazar Adı'\ntags: ['tag1', 'tag2']\n---\n\n# Yazı İçeriği\n\nBuraya yazınızın içeriğini yazabilirsiniz...\n","markdown",[362,5107,5108,5113,5118,5123,5128,5133,5138,5142,5146,5151,5155],{"__ignoreMap":364},[1664,5109,5110],{"class":1666,"line":1667},[1664,5111,5112],{},"---\n",[1664,5114,5115],{"class":1666,"line":778},[1664,5116,5117],{},"title: 'Yazı Başlığı'\n",[1664,5119,5120],{"class":1666,"line":781},[1664,5121,5122],{},"description: 'Yazı açıklaması'\n",[1664,5124,5125],{"class":1666,"line":1716},[1664,5126,5127],{},"date: '2024-01-15'\n",[1664,5129,5130],{"class":1666,"line":1722},[1664,5131,5132],{},"author: 'Yazar Adı'\n",[1664,5134,5135],{"class":1666,"line":1923},[1664,5136,5137],{},"tags: ['tag1', 'tag2']\n",[1664,5139,5140],{"class":1666,"line":2032},[1664,5141,5112],{},[1664,5143,5144],{"class":1666,"line":2038},[1664,5145,3773],{"emptyLinePlaceholder":806},[1664,5147,5148],{"class":1666,"line":2044},[1664,5149,5150],{},"# Yazı İçeriği\n",[1664,5152,5153],{"class":1666,"line":2050},[1664,5154,3773],{"emptyLinePlaceholder":806},[1664,5156,5157],{"class":1666,"line":2056},[1664,5158,5159],{},"Buraya yazınızın içeriğini yazabilirsiniz...\n",[888,5161,5163],{"id":5162},"sayfa-oluşturma","Sayfa Oluşturma",[16,5165,5166,5167,2192],{},"Blog listesi için ",[362,5168,5169],{},"pages\u002Fblog\u002Findex.vue",[355,5171,5173],{"className":2544,"code":5172,"language":2546,"meta":364,"style":364},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>Blog\u003C\u002Fh1>\n    \u003Carticle v-for=\"article in articles\" :key=\"article._path\">\n      \u003CNuxtLink :to=\"article._path\">\n        \u003Ch2>{{ article.title }}\u003C\u002Fh2>\n        \u003Cp>{{ article.description }}\u003C\u002Fp>\n      \u003C\u002FNuxtLink>\n    \u003C\u002Farticle>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nconst { data: articles } = await queryContent('\u002Fblog')\n  .sort({ date: -1 })\n  .find()\n\u003C\u002Fscript>\n",[362,5174,5175,5183,5191,5208,5239,5259,5276,5293,5301,5309,5317,5325,5329,5339,5374,5402,5412],{"__ignoreMap":364},[1664,5176,5177,5179,5181],{"class":1666,"line":1667},[1664,5178,2553],{"class":2171},[1664,5180,2557],{"class":2556},[1664,5182,2560],{"class":2171},[1664,5184,5185,5187,5189],{"class":1666,"line":778},[1664,5186,2565],{"class":2171},[1664,5188,1598],{"class":2556},[1664,5190,2560],{"class":2171},[1664,5192,5193,5195,5197,5199,5202,5204,5206],{"class":1666,"line":781},[1664,5194,2587],{"class":2171},[1664,5196,11],{"class":2556},[1664,5198,2635],{"class":2171},[1664,5200,5201],{"class":2638},"Blog",[1664,5203,2642],{"class":2171},[1664,5205,11],{"class":2556},[1664,5207,2560],{"class":2171},[1664,5209,5210,5212,5215,5217,5219,5221,5224,5226,5228,5230,5232,5235,5237],{"class":1666,"line":1716},[1664,5211,2587],{"class":2171},[1664,5213,5214],{"class":2556},"article",[1664,5216,3279],{"class":2185},[1664,5218,2573],{"class":2171},[1664,5220,2189],{"class":2171},[1664,5222,5223],{"class":1674},"article in articles",[1664,5225,2189],{"class":2171},[1664,5227,3291],{"class":2185},[1664,5229,2573],{"class":2171},[1664,5231,2189],{"class":2171},[1664,5233,5234],{"class":1674},"article._path",[1664,5236,2189],{"class":2171},[1664,5238,2560],{"class":2171},[1664,5240,5241,5243,5246,5249,5251,5253,5255,5257],{"class":1666,"line":1722},[1664,5242,2607],{"class":2171},[1664,5244,5245],{"class":2556},"NuxtLink",[1664,5247,5248],{"class":2185}," :to",[1664,5250,2573],{"class":2171},[1664,5252,2189],{"class":2171},[1664,5254,5234],{"class":1674},[1664,5256,2189],{"class":2171},[1664,5258,2560],{"class":2171},[1664,5260,5261,5263,5265,5267,5270,5272,5274],{"class":1666,"line":1923},[1664,5262,3318],{"class":2171},[1664,5264,888],{"class":2556},[1664,5266,2635],{"class":2171},[1664,5268,5269],{"class":2638},"{{ article.title }}",[1664,5271,2642],{"class":2171},[1664,5273,888],{"class":2556},[1664,5275,2560],{"class":2171},[1664,5277,5278,5280,5282,5284,5287,5289,5291],{"class":1666,"line":2032},[1664,5279,3318],{"class":2171},[1664,5281,16],{"class":2556},[1664,5283,2635],{"class":2171},[1664,5285,5286],{"class":2638},"{{ article.description }}",[1664,5288,2642],{"class":2171},[1664,5290,16],{"class":2556},[1664,5292,2560],{"class":2171},[1664,5294,5295,5297,5299],{"class":1666,"line":2038},[1664,5296,3350],{"class":2171},[1664,5298,5245],{"class":2556},[1664,5300,2560],{"class":2171},[1664,5302,5303,5305,5307],{"class":1666,"line":2044},[1664,5304,2695],{"class":2171},[1664,5306,5214],{"class":2556},[1664,5308,2560],{"class":2171},[1664,5310,5311,5313,5315],{"class":1666,"line":2050},[1664,5312,2824],{"class":2171},[1664,5314,1598],{"class":2556},[1664,5316,2560],{"class":2171},[1664,5318,5319,5321,5323],{"class":1666,"line":2056},[1664,5320,2642],{"class":2171},[1664,5322,2557],{"class":2556},[1664,5324,2560],{"class":2171},[1664,5326,5327],{"class":1666,"line":2062},[1664,5328,3773],{"emptyLinePlaceholder":806},[1664,5330,5331,5333,5335,5337],{"class":1666,"line":2068},[1664,5332,2553],{"class":2171},[1664,5334,3161],{"class":2556},[1664,5336,3164],{"class":2185},[1664,5338,2560],{"class":2171},[1664,5340,5341,5343,5345,5348,5350,5353,5355,5357,5360,5363,5365,5367,5370,5372],{"class":1666,"line":2074},[1664,5342,3778],{"class":2185},[1664,5344,3702],{"class":2171},[1664,5346,5347],{"class":2556}," data",[1664,5349,2192],{"class":2171},[1664,5351,5352],{"class":2638}," articles ",[1664,5354,3193],{"class":2171},[1664,5356,3838],{"class":2171},[1664,5358,5359],{"class":3698}," await",[1664,5361,5362],{"class":3171}," queryContent",[1664,5364,3175],{"class":2638},[1664,5366,4472],{"class":2171},[1664,5368,5369],{"class":1674},"\u002Fblog",[1664,5371,4472],{"class":2171},[1664,5373,5089],{"class":2638},[1664,5375,5376,5379,5382,5384,5387,5390,5392,5395,5398,5400],{"class":1666,"line":2080},[1664,5377,5378],{"class":2171},"  .",[1664,5380,5381],{"class":3171},"sort",[1664,5383,3175],{"class":2638},[1664,5385,5386],{"class":2171},"{",[1664,5388,5389],{"class":2556}," date",[1664,5391,2192],{"class":2171},[1664,5393,5394],{"class":2171}," -",[1664,5396,5397],{"class":2237},"1",[1664,5399,3708],{"class":2171},[1664,5401,5089],{"class":2638},[1664,5403,5404,5406,5409],{"class":1666,"line":2086},[1664,5405,5378],{"class":2171},[1664,5407,5408],{"class":3171},"find",[1664,5410,5411],{"class":2638},"()\n",[1664,5413,5414,5416,5418],{"class":1666,"line":2092},[1664,5415,2642],{"class":2171},[1664,5417,3161],{"class":2556},[1664,5419,2560],{"class":2171},[888,5421,5423],{"id":5422},"sonuç","Sonuç",[16,5425,5426],{},"Nuxt Content ile blog oluşturmak oldukça basit ve güçlü. Markdown'ın basitliği ile Vue.js'in gücünü birleştirerek harika bloglar oluşturabilirsiniz.",[39,5428,5430],{"id":5429},"faydalı-kaynaklar","Faydalı Kaynaklar",[47,5432,5433,5440,5447],{},[50,5434,5435],{},[53,5436,5439],{"href":5437,"rel":5438},"https:\u002F\u002Fcontent.nuxtjs.org\u002F",[57],"Nuxt Content Dokümantasyonu",[50,5441,5442],{},[53,5443,5446],{"href":5444,"rel":5445},"https:\u002F\u002Fwww.markdownguide.org\u002F",[57],"Markdown Rehberi",[50,5448,5449],{},[53,5450,5453],{"href":5451,"rel":5452},"https:\u002F\u002Fvuejs.org\u002F",[57],"Vue.js Dokümantasyonu",[5455,5456],"hr",{},[16,5458,5459],{},[120,5460,5461],{},"Bu yazı Nuxt Content kullanılarak oluşturulmuştur.",[4088,5463,5464],{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":364,"searchDepth":778,"depth":778,"links":5466},[5467,5468,5469,5470,5471],{"id":4951,"depth":778,"text":4952},{"id":4990,"depth":778,"text":4991},{"id":5092,"depth":778,"text":5093},{"id":5162,"depth":778,"text":5163},{"id":5422,"depth":778,"text":5423,"children":5472},[5473],{"id":5429,"depth":781,"text":5430},"2024-01-15","Nuxt Content kullanarak nasıl modern ve SEO dostu bir blog oluşturabileceğinizi öğrenin",{"author":5477,"cover":5478},"Eralp Özcan","\u002Fassets\u002Fimages\u002Fblog\u002Fnuxt-content-cover.svg","\u002Fblog\u002Fnuxt-content-ile-blog-olusturma","8",{"title":4940,"description":5475},{"loc":5479},"blog\u002Fnuxt-content-ile-blog-olusturma",[5485,4123,5201,5486],"Nuxt.js","JAMstack","1RvneGSUIhMJPvTYYEc3a0i_YE_HKs4ZhTvJ-apPfjc",{"id":5489,"title":5490,"body":5491,"date":8211,"description":8212,"extension":796,"image":797,"meta":8213,"navigation":806,"ogImage":797,"path":8215,"readingTime":8216,"robots":797,"schemaOrg":797,"seo":8217,"sitemap":8218,"stem":8219,"tags":8220,"__hash__":8222},"blog\u002Fblog\u002Ftailwindcss-daisyui-ile-hizli-ui-gelistirme.md","TailwindCSS ve DaisyUI ile Hızlı UI Geliştirme",{"type":8,"value":5492,"toc":8178},[5493,5496,5499,5503,5506,5510,5541,5545,5548,5552,5594,5598,5602,5638,5642,5658,5664,5756,5760,5764,6137,6141,6407,6411,6684,6688,6691,6695,6949,6953,7001,7005,7009,7171,7175,8020,8024,8028,8031,8072,8076,8098,8102,8131,8133,8136,8138,8168,8170,8175],[11,5494,5490],{"id":5495},"tailwindcss-ve-daisyui-ile-hızlı-ui-geliştirme",[16,5497,5498],{},"Modern web geliştirmede hız ve kalite arasındaki dengeyi kurmak her zaman zor olmuştur. TailwindCSS ve DaisyUI kombinasyonu, bu soruna mükemmel bir çözüm sunuyor. Bu yazıda, bu güçlü ikilinin nasıl kullanılacağını ve neden tercih edilmesi gerektiğini ele alacağız.",[888,5500,5502],{"id":5501},"tailwindcss-nedir","TailwindCSS Nedir?",[16,5504,5505],{},"TailwindCSS, utility-first yaklaşımı benimseyen bir CSS framework'üdür. Geleneksel CSS framework'lerinden farklı olarak, önceden tanımlanmış bileşenler yerine küçük utility class'ları sunar.",[39,5507,5509],{"id":5508},"tailwindcssin-avantajları","TailwindCSS'in Avantajları",[47,5511,5512,5518,5524,5529,5535],{},[50,5513,5514,5517],{},[20,5515,5516],{},"Utility-First",": Her CSS özelliği için ayrı class'lar",[50,5519,5520,5523],{},[20,5521,5522],{},"Customizable",": Tamamen özelleştirilebilir design system",[50,5525,5526,5528],{},[20,5527,4934],{},": Kullanılmayan CSS'leri otomatik temizler",[50,5530,5531,5534],{},[20,5532,5533],{},"Responsive",": Mobile-first responsive design",[50,5536,5537,5540],{},[20,5538,5539],{},"Developer Experience",": Harika IntelliSense desteği",[888,5542,5544],{"id":5543},"daisyui-nedir","DaisyUI Nedir?",[16,5546,5547],{},"DaisyUI, TailwindCSS üzerine inşa edilmiş bir component library'sidir. TailwindCSS'in utility class'larını kullanarak önceden tasarlanmış bileşenler sunar.",[39,5549,5551],{"id":5550},"daisyuinin-avantajları","DaisyUI'nin Avantajları",[47,5553,5554,5570,5576,5582,5588],{},[50,5555,5556,5559,5560,551,5563,551,5566,5569],{},[20,5557,5558],{},"Semantic Class Names",": ",[362,5561,5562],{},"btn",[362,5564,5565],{},"card",[362,5567,5568],{},"modal"," gibi anlamlı class'lar",[50,5571,5572,5575],{},[20,5573,5574],{},"Theme Support",": 30+ hazır tema",[50,5577,5578,5581],{},[20,5579,5580],{},"TailwindCSS Uyumlu",": Mevcut TailwindCSS class'larıyla birlikte kullanılabilir",[50,5583,5584,5587],{},[20,5585,5586],{},"Accessibility",": ARIA standartlarına uygun",[50,5589,5590,5593],{},[20,5591,5592],{},"Lightweight",": Sadece 2KB CSS",[888,5595,5597],{"id":5596},"kurulum-ve-konfigürasyon","Kurulum ve Konfigürasyon",[39,5599,5601],{"id":5600},"tailwindcss-kurulumu","TailwindCSS Kurulumu",[355,5603,5605],{"className":1658,"code":5604,"language":1660,"meta":364,"style":364},"npm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n",[362,5606,5607,5625],{"__ignoreMap":364},[1664,5608,5609,5611,5613,5616,5619,5622],{"class":1666,"line":1667},[1664,5610,1671],{"class":1670},[1664,5612,1793],{"class":1674},[1664,5614,5615],{"class":1674}," -D",[1664,5617,5618],{"class":1674}," tailwindcss",[1664,5620,5621],{"class":1674}," postcss",[1664,5623,5624],{"class":1674}," autoprefixer\n",[1664,5626,5627,5630,5632,5635],{"class":1666,"line":778},[1664,5628,5629],{"class":1670},"npx",[1664,5631,5618],{"class":1674},[1664,5633,5634],{"class":1674}," init",[1664,5636,5637],{"class":1674}," -p\n",[39,5639,5641],{"id":5640},"daisyui-ekleme","DaisyUI Ekleme",[355,5643,5645],{"className":1658,"code":5644,"language":1660,"meta":364,"style":364},"npm install -D daisyui@latest\n",[362,5646,5647],{"__ignoreMap":364},[1664,5648,5649,5651,5653,5655],{"class":1666,"line":1667},[1664,5650,1671],{"class":1670},[1664,5652,1793],{"class":1674},[1664,5654,5615],{"class":1674},[1664,5656,5657],{"class":1674}," daisyui@latest\n",[16,5659,5660,5663],{},[362,5661,5662],{},"tailwind.config.js"," dosyanızı güncelleyin:",[355,5665,5667],{"className":1834,"code":5666,"language":1836,"meta":364,"style":364},"module.exports = {\n  content: [\n    \".\u002Fpages\u002F**\u002F*.{js,ts,jsx,tsx,mdx}\",\n    \".\u002Fcomponents\u002F**\u002F*.{js,ts,jsx,tsx,mdx}\",\n    \".\u002Fapp\u002F**\u002F*.{js,ts,jsx,tsx,mdx}\",\n  ],\n  theme: {\n    extend: {},\n  },\n  plugins: [require(\"daisyui\")],\n  daisyui: {\n    themes: [\"light\", \"dark\", \"cupcake\", \"corporate\"],\n    darkTheme: \"dark\",\n    base: true,\n    styled: true,\n    utils: true,\n  },\n}\n",[362,5668,5669,5674,5679,5684,5689,5694,5699,5704,5709,5713,5718,5723,5728,5733,5738,5743,5748,5752],{"__ignoreMap":364},[1664,5670,5671],{"class":1666,"line":1667},[1664,5672,5673],{},"module.exports = {\n",[1664,5675,5676],{"class":1666,"line":778},[1664,5677,5678],{},"  content: [\n",[1664,5680,5681],{"class":1666,"line":781},[1664,5682,5683],{},"    \".\u002Fpages\u002F**\u002F*.{js,ts,jsx,tsx,mdx}\",\n",[1664,5685,5686],{"class":1666,"line":1716},[1664,5687,5688],{},"    \".\u002Fcomponents\u002F**\u002F*.{js,ts,jsx,tsx,mdx}\",\n",[1664,5690,5691],{"class":1666,"line":1722},[1664,5692,5693],{},"    \".\u002Fapp\u002F**\u002F*.{js,ts,jsx,tsx,mdx}\",\n",[1664,5695,5696],{"class":1666,"line":1923},[1664,5697,5698],{},"  ],\n",[1664,5700,5701],{"class":1666,"line":2032},[1664,5702,5703],{},"  theme: {\n",[1664,5705,5706],{"class":1666,"line":2038},[1664,5707,5708],{},"    extend: {},\n",[1664,5710,5711],{"class":1666,"line":2044},[1664,5712,2243],{},[1664,5714,5715],{"class":1666,"line":2050},[1664,5716,5717],{},"  plugins: [require(\"daisyui\")],\n",[1664,5719,5720],{"class":1666,"line":2056},[1664,5721,5722],{},"  daisyui: {\n",[1664,5724,5725],{"class":1666,"line":2062},[1664,5726,5727],{},"    themes: [\"light\", \"dark\", \"cupcake\", \"corporate\"],\n",[1664,5729,5730],{"class":1666,"line":2068},[1664,5731,5732],{},"    darkTheme: \"dark\",\n",[1664,5734,5735],{"class":1666,"line":2074},[1664,5736,5737],{},"    base: true,\n",[1664,5739,5740],{"class":1666,"line":2080},[1664,5741,5742],{},"    styled: true,\n",[1664,5744,5745],{"class":1666,"line":2086},[1664,5746,5747],{},"    utils: true,\n",[1664,5749,5750],{"class":1666,"line":2092},[1664,5751,2243],{},[1664,5753,5754],{"class":1666,"line":2368},[1664,5755,1926],{},[888,5757,5759],{"id":5758},"temel-bileşenler","Temel Bileşenler",[39,5761,5763],{"id":5762},"button-bileşeni","Button Bileşeni",[355,5765,5769],{"className":5766,"code":5767,"language":5768,"meta":364,"style":364},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Temel button -->\n\u003Cbutton class=\"btn\">Button\u003C\u002Fbutton>\n\n\u003C!-- Farklı varyantlar -->\n\u003Cbutton class=\"btn btn-primary\">Primary\u003C\u002Fbutton>\n\u003Cbutton class=\"btn btn-secondary\">Secondary\u003C\u002Fbutton>\n\u003Cbutton class=\"btn btn-accent\">Accent\u003C\u002Fbutton>\n\n\u003C!-- Boyutlar -->\n\u003Cbutton class=\"btn btn-xs\">Extra Small\u003C\u002Fbutton>\n\u003Cbutton class=\"btn btn-sm\">Small\u003C\u002Fbutton>\n\u003Cbutton class=\"btn btn-md\">Medium\u003C\u002Fbutton>\n\u003Cbutton class=\"btn btn-lg\">Large\u003C\u002Fbutton>\n\n\u003C!-- Durumlar -->\n\u003Cbutton class=\"btn btn-outline\">Outline\u003C\u002Fbutton>\n\u003Cbutton class=\"btn btn-ghost\">Ghost\u003C\u002Fbutton>\n\u003Cbutton class=\"btn btn-link\">Link\u003C\u002Fbutton>\n\u003Cbutton class=\"btn btn-disabled\">Disabled\u003C\u002Fbutton>\n","html",[362,5770,5771,5776,5803,5807,5812,5840,5868,5896,5900,5905,5933,5961,5988,6016,6020,6025,6053,6081,6109],{"__ignoreMap":364},[1664,5772,5773],{"class":1666,"line":1667},[1664,5774,5775],{"class":1695},"\u003C!-- Temel button -->\n",[1664,5777,5778,5780,5782,5784,5786,5788,5790,5792,5794,5797,5799,5801],{"class":1666,"line":778},[1664,5779,2553],{"class":2171},[1664,5781,2773],{"class":2556},[1664,5783,2570],{"class":2185},[1664,5785,2573],{"class":2171},[1664,5787,2189],{"class":2171},[1664,5789,5562],{"class":1674},[1664,5791,2189],{"class":2171},[1664,5793,2635],{"class":2171},[1664,5795,5796],{"class":2638},"Button",[1664,5798,2642],{"class":2171},[1664,5800,2773],{"class":2556},[1664,5802,2560],{"class":2171},[1664,5804,5805],{"class":1666,"line":781},[1664,5806,3773],{"emptyLinePlaceholder":806},[1664,5808,5809],{"class":1666,"line":1716},[1664,5810,5811],{"class":1695},"\u003C!-- Farklı varyantlar -->\n",[1664,5813,5814,5816,5818,5820,5822,5824,5827,5829,5831,5834,5836,5838],{"class":1666,"line":1722},[1664,5815,2553],{"class":2171},[1664,5817,2773],{"class":2556},[1664,5819,2570],{"class":2185},[1664,5821,2573],{"class":2171},[1664,5823,2189],{"class":2171},[1664,5825,5826],{"class":1674},"btn btn-primary",[1664,5828,2189],{"class":2171},[1664,5830,2635],{"class":2171},[1664,5832,5833],{"class":2638},"Primary",[1664,5835,2642],{"class":2171},[1664,5837,2773],{"class":2556},[1664,5839,2560],{"class":2171},[1664,5841,5842,5844,5846,5848,5850,5852,5855,5857,5859,5862,5864,5866],{"class":1666,"line":1923},[1664,5843,2553],{"class":2171},[1664,5845,2773],{"class":2556},[1664,5847,2570],{"class":2185},[1664,5849,2573],{"class":2171},[1664,5851,2189],{"class":2171},[1664,5853,5854],{"class":1674},"btn btn-secondary",[1664,5856,2189],{"class":2171},[1664,5858,2635],{"class":2171},[1664,5860,5861],{"class":2638},"Secondary",[1664,5863,2642],{"class":2171},[1664,5865,2773],{"class":2556},[1664,5867,2560],{"class":2171},[1664,5869,5870,5872,5874,5876,5878,5880,5883,5885,5887,5890,5892,5894],{"class":1666,"line":2032},[1664,5871,2553],{"class":2171},[1664,5873,2773],{"class":2556},[1664,5875,2570],{"class":2185},[1664,5877,2573],{"class":2171},[1664,5879,2189],{"class":2171},[1664,5881,5882],{"class":1674},"btn btn-accent",[1664,5884,2189],{"class":2171},[1664,5886,2635],{"class":2171},[1664,5888,5889],{"class":2638},"Accent",[1664,5891,2642],{"class":2171},[1664,5893,2773],{"class":2556},[1664,5895,2560],{"class":2171},[1664,5897,5898],{"class":1666,"line":2038},[1664,5899,3773],{"emptyLinePlaceholder":806},[1664,5901,5902],{"class":1666,"line":2044},[1664,5903,5904],{"class":1695},"\u003C!-- Boyutlar -->\n",[1664,5906,5907,5909,5911,5913,5915,5917,5920,5922,5924,5927,5929,5931],{"class":1666,"line":2050},[1664,5908,2553],{"class":2171},[1664,5910,2773],{"class":2556},[1664,5912,2570],{"class":2185},[1664,5914,2573],{"class":2171},[1664,5916,2189],{"class":2171},[1664,5918,5919],{"class":1674},"btn btn-xs",[1664,5921,2189],{"class":2171},[1664,5923,2635],{"class":2171},[1664,5925,5926],{"class":2638},"Extra Small",[1664,5928,2642],{"class":2171},[1664,5930,2773],{"class":2556},[1664,5932,2560],{"class":2171},[1664,5934,5935,5937,5939,5941,5943,5945,5948,5950,5952,5955,5957,5959],{"class":1666,"line":2056},[1664,5936,2553],{"class":2171},[1664,5938,2773],{"class":2556},[1664,5940,2570],{"class":2185},[1664,5942,2573],{"class":2171},[1664,5944,2189],{"class":2171},[1664,5946,5947],{"class":1674},"btn btn-sm",[1664,5949,2189],{"class":2171},[1664,5951,2635],{"class":2171},[1664,5953,5954],{"class":2638},"Small",[1664,5956,2642],{"class":2171},[1664,5958,2773],{"class":2556},[1664,5960,2560],{"class":2171},[1664,5962,5963,5965,5967,5969,5971,5973,5976,5978,5980,5982,5984,5986],{"class":1666,"line":2062},[1664,5964,2553],{"class":2171},[1664,5966,2773],{"class":2556},[1664,5968,2570],{"class":2185},[1664,5970,2573],{"class":2171},[1664,5972,2189],{"class":2171},[1664,5974,5975],{"class":1674},"btn btn-md",[1664,5977,2189],{"class":2171},[1664,5979,2635],{"class":2171},[1664,5981,200],{"class":2638},[1664,5983,2642],{"class":2171},[1664,5985,2773],{"class":2556},[1664,5987,2560],{"class":2171},[1664,5989,5990,5992,5994,5996,5998,6000,6003,6005,6007,6010,6012,6014],{"class":1666,"line":2068},[1664,5991,2553],{"class":2171},[1664,5993,2773],{"class":2556},[1664,5995,2570],{"class":2185},[1664,5997,2573],{"class":2171},[1664,5999,2189],{"class":2171},[1664,6001,6002],{"class":1674},"btn btn-lg",[1664,6004,2189],{"class":2171},[1664,6006,2635],{"class":2171},[1664,6008,6009],{"class":2638},"Large",[1664,6011,2642],{"class":2171},[1664,6013,2773],{"class":2556},[1664,6015,2560],{"class":2171},[1664,6017,6018],{"class":1666,"line":2074},[1664,6019,3773],{"emptyLinePlaceholder":806},[1664,6021,6022],{"class":1666,"line":2080},[1664,6023,6024],{"class":1695},"\u003C!-- Durumlar -->\n",[1664,6026,6027,6029,6031,6033,6035,6037,6040,6042,6044,6047,6049,6051],{"class":1666,"line":2086},[1664,6028,2553],{"class":2171},[1664,6030,2773],{"class":2556},[1664,6032,2570],{"class":2185},[1664,6034,2573],{"class":2171},[1664,6036,2189],{"class":2171},[1664,6038,6039],{"class":1674},"btn btn-outline",[1664,6041,2189],{"class":2171},[1664,6043,2635],{"class":2171},[1664,6045,6046],{"class":2638},"Outline",[1664,6048,2642],{"class":2171},[1664,6050,2773],{"class":2556},[1664,6052,2560],{"class":2171},[1664,6054,6055,6057,6059,6061,6063,6065,6068,6070,6072,6075,6077,6079],{"class":1666,"line":2092},[1664,6056,2553],{"class":2171},[1664,6058,2773],{"class":2556},[1664,6060,2570],{"class":2185},[1664,6062,2573],{"class":2171},[1664,6064,2189],{"class":2171},[1664,6066,6067],{"class":1674},"btn btn-ghost",[1664,6069,2189],{"class":2171},[1664,6071,2635],{"class":2171},[1664,6073,6074],{"class":2638},"Ghost",[1664,6076,2642],{"class":2171},[1664,6078,2773],{"class":2556},[1664,6080,2560],{"class":2171},[1664,6082,6083,6085,6087,6089,6091,6093,6096,6098,6100,6103,6105,6107],{"class":1666,"line":2368},[1664,6084,2553],{"class":2171},[1664,6086,2773],{"class":2556},[1664,6088,2570],{"class":2185},[1664,6090,2573],{"class":2171},[1664,6092,2189],{"class":2171},[1664,6094,6095],{"class":1674},"btn btn-link",[1664,6097,2189],{"class":2171},[1664,6099,2635],{"class":2171},[1664,6101,6102],{"class":2638},"Link",[1664,6104,2642],{"class":2171},[1664,6106,2773],{"class":2556},[1664,6108,2560],{"class":2171},[1664,6110,6111,6113,6115,6117,6119,6121,6124,6126,6128,6131,6133,6135],{"class":1666,"line":2388},[1664,6112,2553],{"class":2171},[1664,6114,2773],{"class":2556},[1664,6116,2570],{"class":2185},[1664,6118,2573],{"class":2171},[1664,6120,2189],{"class":2171},[1664,6122,6123],{"class":1674},"btn btn-disabled",[1664,6125,2189],{"class":2171},[1664,6127,2635],{"class":2171},[1664,6129,6130],{"class":2638},"Disabled",[1664,6132,2642],{"class":2171},[1664,6134,2773],{"class":2556},[1664,6136,2560],{"class":2171},[39,6138,6140],{"id":6139},"card-bileşeni","Card Bileşeni",[355,6142,6144],{"className":5766,"code":6143,"language":5768,"meta":364,"style":364},"\u003Cdiv class=\"card w-96 bg-base-100 shadow-xl\">\n  \u003Cfigure>\n    \u003Cimg src=\"\u002Fimage.jpg\" alt=\"Shoes\" \u002F>\n  \u003C\u002Ffigure>\n  \u003Cdiv class=\"card-body\">\n    \u003Ch2 class=\"card-title\">\n      Shoes!\n      \u003Cdiv class=\"badge badge-secondary\">NEW\u003C\u002Fdiv>\n    \u003C\u002Fh2>\n    \u003Cp>If a dog chews shoes whose shoes does he choose?\u003C\u002Fp>\n    \u003Cdiv class=\"card-actions justify-end\">\n      \u003Cdiv class=\"badge badge-outline\">Fashion\u003C\u002Fdiv>\n      \u003Cdiv class=\"badge badge-outline\">Products\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[362,6145,6146,6165,6174,6205,6213,6232,6251,6256,6284,6292,6309,6328,6356,6383,6391,6399],{"__ignoreMap":364},[1664,6147,6148,6150,6152,6154,6156,6158,6161,6163],{"class":1666,"line":1667},[1664,6149,2553],{"class":2171},[1664,6151,1598],{"class":2556},[1664,6153,2570],{"class":2185},[1664,6155,2573],{"class":2171},[1664,6157,2189],{"class":2171},[1664,6159,6160],{"class":1674},"card w-96 bg-base-100 shadow-xl",[1664,6162,2189],{"class":2171},[1664,6164,2560],{"class":2171},[1664,6166,6167,6169,6172],{"class":1666,"line":778},[1664,6168,2565],{"class":2171},[1664,6170,6171],{"class":2556},"figure",[1664,6173,2560],{"class":2171},[1664,6175,6176,6178,6180,6183,6185,6187,6190,6192,6194,6196,6198,6201,6203],{"class":1666,"line":781},[1664,6177,2587],{"class":2171},[1664,6179,35],{"class":2556},[1664,6181,6182],{"class":2185}," src",[1664,6184,2573],{"class":2171},[1664,6186,2189],{"class":2171},[1664,6188,6189],{"class":1674},"\u002Fimage.jpg",[1664,6191,2189],{"class":2171},[1664,6193,2667],{"class":2185},[1664,6195,2573],{"class":2171},[1664,6197,2189],{"class":2171},[1664,6199,6200],{"class":1674},"Shoes",[1664,6202,2189],{"class":2171},[1664,6204,2690],{"class":2171},[1664,6206,6207,6209,6211],{"class":1666,"line":1716},[1664,6208,2824],{"class":2171},[1664,6210,6171],{"class":2556},[1664,6212,2560],{"class":2171},[1664,6214,6215,6217,6219,6221,6223,6225,6228,6230],{"class":1666,"line":1722},[1664,6216,2565],{"class":2171},[1664,6218,1598],{"class":2556},[1664,6220,2570],{"class":2185},[1664,6222,2573],{"class":2171},[1664,6224,2189],{"class":2171},[1664,6226,6227],{"class":1674},"card-body",[1664,6229,2189],{"class":2171},[1664,6231,2560],{"class":2171},[1664,6233,6234,6236,6238,6240,6242,6244,6247,6249],{"class":1666,"line":1923},[1664,6235,2587],{"class":2171},[1664,6237,888],{"class":2556},[1664,6239,2570],{"class":2185},[1664,6241,2573],{"class":2171},[1664,6243,2189],{"class":2171},[1664,6245,6246],{"class":1674},"card-title",[1664,6248,2189],{"class":2171},[1664,6250,2560],{"class":2171},[1664,6252,6253],{"class":1666,"line":2032},[1664,6254,6255],{"class":2638},"      Shoes!\n",[1664,6257,6258,6260,6262,6264,6266,6268,6271,6273,6275,6278,6280,6282],{"class":1666,"line":2038},[1664,6259,2607],{"class":2171},[1664,6261,1598],{"class":2556},[1664,6263,2570],{"class":2185},[1664,6265,2573],{"class":2171},[1664,6267,2189],{"class":2171},[1664,6269,6270],{"class":1674},"badge badge-secondary",[1664,6272,2189],{"class":2171},[1664,6274,2635],{"class":2171},[1664,6276,6277],{"class":2638},"NEW",[1664,6279,2642],{"class":2171},[1664,6281,1598],{"class":2556},[1664,6283,2560],{"class":2171},[1664,6285,6286,6288,6290],{"class":1666,"line":2044},[1664,6287,2695],{"class":2171},[1664,6289,888],{"class":2556},[1664,6291,2560],{"class":2171},[1664,6293,6294,6296,6298,6300,6303,6305,6307],{"class":1666,"line":2050},[1664,6295,2587],{"class":2171},[1664,6297,16],{"class":2556},[1664,6299,2635],{"class":2171},[1664,6301,6302],{"class":2638},"If a dog chews shoes whose shoes does he choose?",[1664,6304,2642],{"class":2171},[1664,6306,16],{"class":2556},[1664,6308,2560],{"class":2171},[1664,6310,6311,6313,6315,6317,6319,6321,6324,6326],{"class":1666,"line":2056},[1664,6312,2587],{"class":2171},[1664,6314,1598],{"class":2556},[1664,6316,2570],{"class":2185},[1664,6318,2573],{"class":2171},[1664,6320,2189],{"class":2171},[1664,6322,6323],{"class":1674},"card-actions justify-end",[1664,6325,2189],{"class":2171},[1664,6327,2560],{"class":2171},[1664,6329,6330,6332,6334,6336,6338,6340,6343,6345,6347,6350,6352,6354],{"class":1666,"line":2062},[1664,6331,2607],{"class":2171},[1664,6333,1598],{"class":2556},[1664,6335,2570],{"class":2185},[1664,6337,2573],{"class":2171},[1664,6339,2189],{"class":2171},[1664,6341,6342],{"class":1674},"badge badge-outline",[1664,6344,2189],{"class":2171},[1664,6346,2635],{"class":2171},[1664,6348,6349],{"class":2638},"Fashion",[1664,6351,2642],{"class":2171},[1664,6353,1598],{"class":2556},[1664,6355,2560],{"class":2171},[1664,6357,6358,6360,6362,6364,6366,6368,6370,6372,6374,6377,6379,6381],{"class":1666,"line":2068},[1664,6359,2607],{"class":2171},[1664,6361,1598],{"class":2556},[1664,6363,2570],{"class":2185},[1664,6365,2573],{"class":2171},[1664,6367,2189],{"class":2171},[1664,6369,6342],{"class":1674},[1664,6371,2189],{"class":2171},[1664,6373,2635],{"class":2171},[1664,6375,6376],{"class":2638},"Products",[1664,6378,2642],{"class":2171},[1664,6380,1598],{"class":2556},[1664,6382,2560],{"class":2171},[1664,6384,6385,6387,6389],{"class":1666,"line":2074},[1664,6386,2695],{"class":2171},[1664,6388,1598],{"class":2556},[1664,6390,2560],{"class":2171},[1664,6392,6393,6395,6397],{"class":1666,"line":2080},[1664,6394,2824],{"class":2171},[1664,6396,1598],{"class":2556},[1664,6398,2560],{"class":2171},[1664,6400,6401,6403,6405],{"class":1666,"line":2086},[1664,6402,2642],{"class":2171},[1664,6404,1598],{"class":2556},[1664,6406,2560],{"class":2171},[39,6408,6410],{"id":6409},"modal-bileşeni","Modal Bileşeni",[355,6412,6414],{"className":5766,"code":6413,"language":5768,"meta":364,"style":364},"\u003C!-- Modal trigger -->\n\u003Clabel for=\"my-modal\" class=\"btn\">Open Modal\u003C\u002Flabel>\n\n\u003C!-- Modal -->\n\u003Cinput type=\"checkbox\" id=\"my-modal\" class=\"modal-toggle\" \u002F>\n\u003Cdiv class=\"modal\">\n  \u003Cdiv class=\"modal-box\">\n    \u003Ch3 class=\"font-bold text-lg\">Congratulations!\u003C\u002Fh3>\n    \u003Cp class=\"py-4\">You've been selected for a chance to get one year of subscription to use Wikipedia for free!\u003C\u002Fp>\n    \u003Cdiv class=\"modal-action\">\n      \u003Clabel for=\"my-modal\" class=\"btn\">Yay!\u003C\u002Flabel>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[362,6415,6416,6421,6461,6465,6470,6511,6529,6548,6576,6604,6623,6660,6668,6676],{"__ignoreMap":364},[1664,6417,6418],{"class":1666,"line":1667},[1664,6419,6420],{"class":1695},"\u003C!-- Modal trigger -->\n",[1664,6422,6423,6425,6428,6431,6433,6435,6438,6440,6442,6444,6446,6448,6450,6452,6455,6457,6459],{"class":1666,"line":778},[1664,6424,2553],{"class":2171},[1664,6426,6427],{"class":2556},"label",[1664,6429,6430],{"class":2185}," for",[1664,6432,2573],{"class":2171},[1664,6434,2189],{"class":2171},[1664,6436,6437],{"class":1674},"my-modal",[1664,6439,2189],{"class":2171},[1664,6441,2570],{"class":2185},[1664,6443,2573],{"class":2171},[1664,6445,2189],{"class":2171},[1664,6447,5562],{"class":1674},[1664,6449,2189],{"class":2171},[1664,6451,2635],{"class":2171},[1664,6453,6454],{"class":2638},"Open Modal",[1664,6456,2642],{"class":2171},[1664,6458,6427],{"class":2556},[1664,6460,2560],{"class":2171},[1664,6462,6463],{"class":1666,"line":781},[1664,6464,3773],{"emptyLinePlaceholder":806},[1664,6466,6467],{"class":1666,"line":1716},[1664,6468,6469],{"class":1695},"\u003C!-- Modal -->\n",[1664,6471,6472,6474,6476,6478,6480,6482,6485,6487,6490,6492,6494,6496,6498,6500,6502,6504,6507,6509],{"class":1666,"line":1722},[1664,6473,2553],{"class":2171},[1664,6475,2706],{"class":2556},[1664,6477,2709],{"class":2185},[1664,6479,2573],{"class":2171},[1664,6481,2189],{"class":2171},[1664,6483,6484],{"class":1674},"checkbox",[1664,6486,2189],{"class":2171},[1664,6488,6489],{"class":2185}," id",[1664,6491,2573],{"class":2171},[1664,6493,2189],{"class":2171},[1664,6495,6437],{"class":1674},[1664,6497,2189],{"class":2171},[1664,6499,2570],{"class":2185},[1664,6501,2573],{"class":2171},[1664,6503,2189],{"class":2171},[1664,6505,6506],{"class":1674},"modal-toggle",[1664,6508,2189],{"class":2171},[1664,6510,2690],{"class":2171},[1664,6512,6513,6515,6517,6519,6521,6523,6525,6527],{"class":1666,"line":1923},[1664,6514,2553],{"class":2171},[1664,6516,1598],{"class":2556},[1664,6518,2570],{"class":2185},[1664,6520,2573],{"class":2171},[1664,6522,2189],{"class":2171},[1664,6524,5568],{"class":1674},[1664,6526,2189],{"class":2171},[1664,6528,2560],{"class":2171},[1664,6530,6531,6533,6535,6537,6539,6541,6544,6546],{"class":1666,"line":2032},[1664,6532,2565],{"class":2171},[1664,6534,1598],{"class":2556},[1664,6536,2570],{"class":2185},[1664,6538,2573],{"class":2171},[1664,6540,2189],{"class":2171},[1664,6542,6543],{"class":1674},"modal-box",[1664,6545,2189],{"class":2171},[1664,6547,2560],{"class":2171},[1664,6549,6550,6552,6554,6556,6558,6560,6563,6565,6567,6570,6572,6574],{"class":1666,"line":2038},[1664,6551,2587],{"class":2171},[1664,6553,39],{"class":2556},[1664,6555,2570],{"class":2185},[1664,6557,2573],{"class":2171},[1664,6559,2189],{"class":2171},[1664,6561,6562],{"class":1674},"font-bold text-lg",[1664,6564,2189],{"class":2171},[1664,6566,2635],{"class":2171},[1664,6568,6569],{"class":2638},"Congratulations!",[1664,6571,2642],{"class":2171},[1664,6573,39],{"class":2556},[1664,6575,2560],{"class":2171},[1664,6577,6578,6580,6582,6584,6586,6588,6591,6593,6595,6598,6600,6602],{"class":1666,"line":2044},[1664,6579,2587],{"class":2171},[1664,6581,16],{"class":2556},[1664,6583,2570],{"class":2185},[1664,6585,2573],{"class":2171},[1664,6587,2189],{"class":2171},[1664,6589,6590],{"class":1674},"py-4",[1664,6592,2189],{"class":2171},[1664,6594,2635],{"class":2171},[1664,6596,6597],{"class":2638},"You've been selected for a chance to get one year of subscription to use Wikipedia for free!",[1664,6599,2642],{"class":2171},[1664,6601,16],{"class":2556},[1664,6603,2560],{"class":2171},[1664,6605,6606,6608,6610,6612,6614,6616,6619,6621],{"class":1666,"line":2050},[1664,6607,2587],{"class":2171},[1664,6609,1598],{"class":2556},[1664,6611,2570],{"class":2185},[1664,6613,2573],{"class":2171},[1664,6615,2189],{"class":2171},[1664,6617,6618],{"class":1674},"modal-action",[1664,6620,2189],{"class":2171},[1664,6622,2560],{"class":2171},[1664,6624,6625,6627,6629,6631,6633,6635,6637,6639,6641,6643,6645,6647,6649,6651,6654,6656,6658],{"class":1666,"line":2056},[1664,6626,2607],{"class":2171},[1664,6628,6427],{"class":2556},[1664,6630,6430],{"class":2185},[1664,6632,2573],{"class":2171},[1664,6634,2189],{"class":2171},[1664,6636,6437],{"class":1674},[1664,6638,2189],{"class":2171},[1664,6640,2570],{"class":2185},[1664,6642,2573],{"class":2171},[1664,6644,2189],{"class":2171},[1664,6646,5562],{"class":1674},[1664,6648,2189],{"class":2171},[1664,6650,2635],{"class":2171},[1664,6652,6653],{"class":2638},"Yay!",[1664,6655,2642],{"class":2171},[1664,6657,6427],{"class":2556},[1664,6659,2560],{"class":2171},[1664,6661,6662,6664,6666],{"class":1666,"line":2062},[1664,6663,2695],{"class":2171},[1664,6665,1598],{"class":2556},[1664,6667,2560],{"class":2171},[1664,6669,6670,6672,6674],{"class":1666,"line":2068},[1664,6671,2824],{"class":2171},[1664,6673,1598],{"class":2556},[1664,6675,2560],{"class":2171},[1664,6677,6678,6680,6682],{"class":1666,"line":2074},[1664,6679,2642],{"class":2171},[1664,6681,1598],{"class":2556},[1664,6683,2560],{"class":2171},[888,6685,6687],{"id":6686},"tema-sistemi","Tema Sistemi",[16,6689,6690],{},"DaisyUI'nin en güçlü özelliklerinden biri tema sistemidir:",[39,6692,6694],{"id":6693},"css-variables-ile-tema","CSS Variables ile Tema",[355,6696,6700],{"className":6697,"code":6698,"language":6699,"meta":364,"style":364},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","[data-theme=\"mytheme\"] {\n  --primary: #570df8;\n  --primary-focus: #4506cb;\n  --primary-content: #ffffff;\n  --secondary: #f000b8;\n  --secondary-focus: #bd0091;\n  --secondary-content: #ffffff;\n  --accent: #37cdbe;\n  --accent-focus: #2aa79b;\n  --accent-content: #ffffff;\n  --neutral: #3d4451;\n  --neutral-focus: #2a2e37;\n  --neutral-content: #ffffff;\n  --base-100: #ffffff;\n  --base-200: #f9fafb;\n  --base-300: #d1d5db;\n  --base-content: #1f2937;\n}\n","css",[362,6701,6702,6724,6739,6753,6767,6781,6795,6808,6822,6836,6849,6863,6877,6890,6903,6917,6931,6945],{"__ignoreMap":364},[1664,6703,6704,6707,6710,6712,6714,6717,6719,6722],{"class":1666,"line":1667},[1664,6705,6706],{"class":2171},"[",[1664,6708,6709],{"class":2185},"data-theme",[1664,6711,2573],{"class":2171},[1664,6713,2189],{"class":2171},[1664,6715,6716],{"class":1674},"mytheme",[1664,6718,2189],{"class":2171},[1664,6720,6721],{"class":2171},"]",[1664,6723,3825],{"class":2171},[1664,6725,6726,6729,6731,6734,6737],{"class":1666,"line":778},[1664,6727,6728],{"class":2638},"  --primary",[1664,6730,2192],{"class":2171},[1664,6732,6733],{"class":2171}," #",[1664,6735,6736],{"class":2638},"570df8",[1664,6738,3199],{"class":2171},[1664,6740,6741,6744,6746,6748,6751],{"class":1666,"line":781},[1664,6742,6743],{"class":2638},"  --primary-focus",[1664,6745,2192],{"class":2171},[1664,6747,6733],{"class":2171},[1664,6749,6750],{"class":2638},"4506cb",[1664,6752,3199],{"class":2171},[1664,6754,6755,6758,6760,6762,6765],{"class":1666,"line":1716},[1664,6756,6757],{"class":2638},"  --primary-content",[1664,6759,2192],{"class":2171},[1664,6761,6733],{"class":2171},[1664,6763,6764],{"class":2638},"ffffff",[1664,6766,3199],{"class":2171},[1664,6768,6769,6772,6774,6776,6779],{"class":1666,"line":1722},[1664,6770,6771],{"class":2638},"  --secondary",[1664,6773,2192],{"class":2171},[1664,6775,6733],{"class":2171},[1664,6777,6778],{"class":2638},"f000b8",[1664,6780,3199],{"class":2171},[1664,6782,6783,6786,6788,6790,6793],{"class":1666,"line":1923},[1664,6784,6785],{"class":2638},"  --secondary-focus",[1664,6787,2192],{"class":2171},[1664,6789,6733],{"class":2171},[1664,6791,6792],{"class":2638},"bd0091",[1664,6794,3199],{"class":2171},[1664,6796,6797,6800,6802,6804,6806],{"class":1666,"line":2032},[1664,6798,6799],{"class":2638},"  --secondary-content",[1664,6801,2192],{"class":2171},[1664,6803,6733],{"class":2171},[1664,6805,6764],{"class":2638},[1664,6807,3199],{"class":2171},[1664,6809,6810,6813,6815,6817,6820],{"class":1666,"line":2038},[1664,6811,6812],{"class":2638},"  --accent",[1664,6814,2192],{"class":2171},[1664,6816,6733],{"class":2171},[1664,6818,6819],{"class":2638},"37cdbe",[1664,6821,3199],{"class":2171},[1664,6823,6824,6827,6829,6831,6834],{"class":1666,"line":2044},[1664,6825,6826],{"class":2638},"  --accent-focus",[1664,6828,2192],{"class":2171},[1664,6830,6733],{"class":2171},[1664,6832,6833],{"class":2638},"2aa79b",[1664,6835,3199],{"class":2171},[1664,6837,6838,6841,6843,6845,6847],{"class":1666,"line":2050},[1664,6839,6840],{"class":2638},"  --accent-content",[1664,6842,2192],{"class":2171},[1664,6844,6733],{"class":2171},[1664,6846,6764],{"class":2638},[1664,6848,3199],{"class":2171},[1664,6850,6851,6854,6856,6858,6861],{"class":1666,"line":2056},[1664,6852,6853],{"class":2638},"  --neutral",[1664,6855,2192],{"class":2171},[1664,6857,6733],{"class":2171},[1664,6859,6860],{"class":2638},"3d4451",[1664,6862,3199],{"class":2171},[1664,6864,6865,6868,6870,6872,6875],{"class":1666,"line":2062},[1664,6866,6867],{"class":2638},"  --neutral-focus",[1664,6869,2192],{"class":2171},[1664,6871,6733],{"class":2171},[1664,6873,6874],{"class":2638},"2a2e37",[1664,6876,3199],{"class":2171},[1664,6878,6879,6882,6884,6886,6888],{"class":1666,"line":2068},[1664,6880,6881],{"class":2638},"  --neutral-content",[1664,6883,2192],{"class":2171},[1664,6885,6733],{"class":2171},[1664,6887,6764],{"class":2638},[1664,6889,3199],{"class":2171},[1664,6891,6892,6895,6897,6899,6901],{"class":1666,"line":2074},[1664,6893,6894],{"class":2638},"  --base-100",[1664,6896,2192],{"class":2171},[1664,6898,6733],{"class":2171},[1664,6900,6764],{"class":2638},[1664,6902,3199],{"class":2171},[1664,6904,6905,6908,6910,6912,6915],{"class":1666,"line":2080},[1664,6906,6907],{"class":2638},"  --base-200",[1664,6909,2192],{"class":2171},[1664,6911,6733],{"class":2171},[1664,6913,6914],{"class":2638},"f9fafb",[1664,6916,3199],{"class":2171},[1664,6918,6919,6922,6924,6926,6929],{"class":1666,"line":2086},[1664,6920,6921],{"class":2638},"  --base-300",[1664,6923,2192],{"class":2171},[1664,6925,6733],{"class":2171},[1664,6927,6928],{"class":2638},"d1d5db",[1664,6930,3199],{"class":2171},[1664,6932,6933,6936,6938,6940,6943],{"class":1666,"line":2092},[1664,6934,6935],{"class":2638},"  --base-content",[1664,6937,2192],{"class":2171},[1664,6939,6733],{"class":2171},[1664,6941,6942],{"class":2638},"1f2937",[1664,6944,3199],{"class":2171},[1664,6946,6947],{"class":1666,"line":2368},[1664,6948,1926],{"class":2171},[39,6950,6952],{"id":6951},"javascript-ile-tema-değiştirme","JavaScript ile Tema Değiştirme",[355,6954,6956],{"className":1834,"code":6955,"language":1836,"meta":364,"style":364},"\u002F\u002F Tema değiştirme fonksiyonu\nfunction changeTheme(theme) {\n  document.documentElement.setAttribute('data-theme', theme)\n  localStorage.setItem('theme', theme)\n}\n\n\u002F\u002F Sayfa yüklendiğinde tema ayarlama\nconst savedTheme = localStorage.getItem('theme') || 'light'\nchangeTheme(savedTheme)\n",[362,6957,6958,6963,6968,6973,6978,6982,6986,6991,6996],{"__ignoreMap":364},[1664,6959,6960],{"class":1666,"line":1667},[1664,6961,6962],{},"\u002F\u002F Tema değiştirme fonksiyonu\n",[1664,6964,6965],{"class":1666,"line":778},[1664,6966,6967],{},"function changeTheme(theme) {\n",[1664,6969,6970],{"class":1666,"line":781},[1664,6971,6972],{},"  document.documentElement.setAttribute('data-theme', theme)\n",[1664,6974,6975],{"class":1666,"line":1716},[1664,6976,6977],{},"  localStorage.setItem('theme', theme)\n",[1664,6979,6980],{"class":1666,"line":1722},[1664,6981,1926],{},[1664,6983,6984],{"class":1666,"line":1923},[1664,6985,3773],{"emptyLinePlaceholder":806},[1664,6987,6988],{"class":1666,"line":2032},[1664,6989,6990],{},"\u002F\u002F Sayfa yüklendiğinde tema ayarlama\n",[1664,6992,6993],{"class":1666,"line":2038},[1664,6994,6995],{},"const savedTheme = localStorage.getItem('theme') || 'light'\n",[1664,6997,6998],{"class":1666,"line":2044},[1664,6999,7000],{},"changeTheme(savedTheme)\n",[888,7002,7004],{"id":7003},"vuejs-ile-entegrasyon","Vue.js ile Entegrasyon",[39,7006,7008],{"id":7007},"composable-ile-tema-yönetimi","Composable ile Tema Yönetimi",[355,7010,7012],{"className":1834,"code":7011,"language":1836,"meta":364,"style":364},"\u002F\u002F composables\u002FuseTheme.js\nimport { ref, onMounted } from 'vue'\n\nexport function useTheme() {\n  const currentTheme = ref('light')\n  const themes = [\n    'light', 'dark', 'cupcake', 'bumblebee', \n    'emerald', 'corporate', 'synthwave', 'retro'\n  ]\n  \n  const setTheme = (theme) => {\n    currentTheme.value = theme\n    document.documentElement.setAttribute('data-theme', theme)\n    localStorage.setItem('theme', theme)\n  }\n  \n  const toggleTheme = () => {\n    const newTheme = currentTheme.value === 'light' ? 'dark' : 'light'\n    setTheme(newTheme)\n  }\n  \n  onMounted(() => {\n    const savedTheme = localStorage.getItem('theme') || 'light'\n    setTheme(savedTheme)\n  })\n  \n  return {\n    currentTheme,\n    themes,\n    setTheme,\n    toggleTheme\n  }\n}\n",[362,7013,7014,7019,7024,7028,7033,7038,7043,7048,7053,7058,7063,7068,7073,7078,7083,7087,7091,7096,7101,7106,7110,7114,7119,7124,7129,7134,7138,7143,7148,7153,7158,7163,7167],{"__ignoreMap":364},[1664,7015,7016],{"class":1666,"line":1667},[1664,7017,7018],{},"\u002F\u002F composables\u002FuseTheme.js\n",[1664,7020,7021],{"class":1666,"line":778},[1664,7022,7023],{},"import { ref, onMounted } from 'vue'\n",[1664,7025,7026],{"class":1666,"line":781},[1664,7027,3773],{"emptyLinePlaceholder":806},[1664,7029,7030],{"class":1666,"line":1716},[1664,7031,7032],{},"export function useTheme() {\n",[1664,7034,7035],{"class":1666,"line":1722},[1664,7036,7037],{},"  const currentTheme = ref('light')\n",[1664,7039,7040],{"class":1666,"line":1923},[1664,7041,7042],{},"  const themes = [\n",[1664,7044,7045],{"class":1666,"line":2032},[1664,7046,7047],{},"    'light', 'dark', 'cupcake', 'bumblebee', \n",[1664,7049,7050],{"class":1666,"line":2038},[1664,7051,7052],{},"    'emerald', 'corporate', 'synthwave', 'retro'\n",[1664,7054,7055],{"class":1666,"line":2044},[1664,7056,7057],{},"  ]\n",[1664,7059,7060],{"class":1666,"line":2050},[1664,7061,7062],{},"  \n",[1664,7064,7065],{"class":1666,"line":2056},[1664,7066,7067],{},"  const setTheme = (theme) => {\n",[1664,7069,7070],{"class":1666,"line":2062},[1664,7071,7072],{},"    currentTheme.value = theme\n",[1664,7074,7075],{"class":1666,"line":2068},[1664,7076,7077],{},"    document.documentElement.setAttribute('data-theme', theme)\n",[1664,7079,7080],{"class":1666,"line":2074},[1664,7081,7082],{},"    localStorage.setItem('theme', theme)\n",[1664,7084,7085],{"class":1666,"line":2080},[1664,7086,2425],{},[1664,7088,7089],{"class":1666,"line":2086},[1664,7090,7062],{},[1664,7092,7093],{"class":1666,"line":2092},[1664,7094,7095],{},"  const toggleTheme = () => {\n",[1664,7097,7098],{"class":1666,"line":2368},[1664,7099,7100],{},"    const newTheme = currentTheme.value === 'light' ? 'dark' : 'light'\n",[1664,7102,7103],{"class":1666,"line":2388},[1664,7104,7105],{},"    setTheme(newTheme)\n",[1664,7107,7108],{"class":1666,"line":2408},[1664,7109,2425],{},[1664,7111,7112],{"class":1666,"line":2422},[1664,7113,7062],{},[1664,7115,7116],{"class":1666,"line":2428},[1664,7117,7118],{},"  onMounted(() => {\n",[1664,7120,7121],{"class":1666,"line":2971},[1664,7122,7123],{},"    const savedTheme = localStorage.getItem('theme') || 'light'\n",[1664,7125,7126],{"class":1666,"line":2977},[1664,7127,7128],{},"    setTheme(savedTheme)\n",[1664,7130,7131],{"class":1666,"line":2983},[1664,7132,7133],{},"  })\n",[1664,7135,7136],{"class":1666,"line":2989},[1664,7137,7062],{},[1664,7139,7140],{"class":1666,"line":2995},[1664,7141,7142],{},"  return {\n",[1664,7144,7145],{"class":1666,"line":3001},[1664,7146,7147],{},"    currentTheme,\n",[1664,7149,7150],{"class":1666,"line":3007},[1664,7151,7152],{},"    themes,\n",[1664,7154,7155],{"class":1666,"line":3012},[1664,7156,7157],{},"    setTheme,\n",[1664,7159,7160],{"class":1666,"line":3018},[1664,7161,7162],{},"    toggleTheme\n",[1664,7164,7165],{"class":1666,"line":3024},[1664,7166,2425],{},[1664,7168,7169],{"class":1666,"line":3030},[1664,7170,1926],{},[39,7172,7174],{"id":7173},"vue-bileşeni-örneği","Vue Bileşeni Örneği",[355,7176,7178],{"className":2544,"code":7177,"language":2546,"meta":364,"style":364},"\u003Ctemplate>\n  \u003Cdiv class=\"navbar bg-base-100\">\n    \u003Cdiv class=\"navbar-start\">\n      \u003Cdiv class=\"dropdown\">\n        \u003Clabel tabindex=\"0\" class=\"btn btn-ghost lg:hidden\">\n          \u003Csvg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h8m-8 6h16\">\u003C\u002Fpath>\n          \u003C\u002Fsvg>\n        \u003C\u002Flabel>\n        \u003Cul tabindex=\"0\" class=\"menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52\">\n          \u003Cli>\u003Ca>Item 1\u003C\u002Fa>\u003C\u002Fli>\n          \u003Cli>\u003Ca>Item 2\u003C\u002Fa>\u003C\u002Fli>\n          \u003Cli>\u003Ca>Item 3\u003C\u002Fa>\u003C\u002Fli>\n        \u003C\u002Ful>\n      \u003C\u002Fdiv>\n      \u003Ca class=\"btn btn-ghost normal-case text-xl\">daisyUI\u003C\u002Fa>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"navbar-center hidden lg:flex\">\n      \u003Cul class=\"menu menu-horizontal p-0\">\n        \u003Cli>\u003Ca>Item 1\u003C\u002Fa>\u003C\u002Fli>\n        \u003Cli>\u003Ca>Item 2\u003C\u002Fa>\u003C\u002Fli>\n        \u003Cli>\u003Ca>Item 3\u003C\u002Fa>\u003C\u002Fli>\n      \u003C\u002Ful>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"navbar-end\">\n      \u003Cbutton @click=\"toggleTheme\" class=\"btn btn-ghost\">\n        \u003Csvg v-if=\"currentTheme === 'light'\" class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n          \u003Cpath d=\"M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z\">\u003C\u002Fpath>\n        \u003C\u002Fsvg>\n        \u003Csvg v-else class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n          \u003Cpath fill-rule=\"evenodd\" d=\"M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z\" clip-rule=\"evenodd\">\u003C\u002Fpath>\n        \u003C\u002Fsvg>\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { useTheme } from '@\u002Fcomposables\u002FuseTheme'\n\nconst { currentTheme, toggleTheme } = useTheme()\n\u003C\u002Fscript>\n",[362,7179,7180,7188,7207,7226,7245,7275,7332,7394,7403,7412,7441,7467,7492,7517,7525,7533,7561,7569,7588,7607,7631,7655,7679,7687,7695,7714,7743,7793,7816,7824,7865,7911,7919,7927,7935,7943,7951,7955,7965,7985,7989,8012],{"__ignoreMap":364},[1664,7181,7182,7184,7186],{"class":1666,"line":1667},[1664,7183,2553],{"class":2171},[1664,7185,2557],{"class":2556},[1664,7187,2560],{"class":2171},[1664,7189,7190,7192,7194,7196,7198,7200,7203,7205],{"class":1666,"line":778},[1664,7191,2565],{"class":2171},[1664,7193,1598],{"class":2556},[1664,7195,2570],{"class":2185},[1664,7197,2573],{"class":2171},[1664,7199,2189],{"class":2171},[1664,7201,7202],{"class":1674},"navbar bg-base-100",[1664,7204,2189],{"class":2171},[1664,7206,2560],{"class":2171},[1664,7208,7209,7211,7213,7215,7217,7219,7222,7224],{"class":1666,"line":781},[1664,7210,2587],{"class":2171},[1664,7212,1598],{"class":2556},[1664,7214,2570],{"class":2185},[1664,7216,2573],{"class":2171},[1664,7218,2189],{"class":2171},[1664,7220,7221],{"class":1674},"navbar-start",[1664,7223,2189],{"class":2171},[1664,7225,2560],{"class":2171},[1664,7227,7228,7230,7232,7234,7236,7238,7241,7243],{"class":1666,"line":1716},[1664,7229,2607],{"class":2171},[1664,7231,1598],{"class":2556},[1664,7233,2570],{"class":2185},[1664,7235,2573],{"class":2171},[1664,7237,2189],{"class":2171},[1664,7239,7240],{"class":1674},"dropdown",[1664,7242,2189],{"class":2171},[1664,7244,2560],{"class":2171},[1664,7246,7247,7249,7251,7254,7256,7258,7260,7262,7264,7266,7268,7271,7273],{"class":1666,"line":1722},[1664,7248,3318],{"class":2171},[1664,7250,6427],{"class":2556},[1664,7252,7253],{"class":2185}," tabindex",[1664,7255,2573],{"class":2171},[1664,7257,2189],{"class":2171},[1664,7259,1819],{"class":1674},[1664,7261,2189],{"class":2171},[1664,7263,2570],{"class":2185},[1664,7265,2573],{"class":2171},[1664,7267,2189],{"class":2171},[1664,7269,7270],{"class":1674},"btn btn-ghost lg:hidden",[1664,7272,2189],{"class":2171},[1664,7274,2560],{"class":2171},[1664,7276,7277,7280,7283,7285,7287,7289,7292,7294,7297,7299,7301,7304,7306,7309,7311,7313,7316,7318,7321,7323,7325,7328,7330],{"class":1666,"line":1923},[1664,7278,7279],{"class":2171},"          \u003C",[1664,7281,7282],{"class":2556},"svg",[1664,7284,2570],{"class":2185},[1664,7286,2573],{"class":2171},[1664,7288,2189],{"class":2171},[1664,7290,7291],{"class":1674},"w-5 h-5",[1664,7293,2189],{"class":2171},[1664,7295,7296],{"class":2185}," fill",[1664,7298,2573],{"class":2171},[1664,7300,2189],{"class":2171},[1664,7302,7303],{"class":1674},"none",[1664,7305,2189],{"class":2171},[1664,7307,7308],{"class":2185}," stroke",[1664,7310,2573],{"class":2171},[1664,7312,2189],{"class":2171},[1664,7314,7315],{"class":1674},"currentColor",[1664,7317,2189],{"class":2171},[1664,7319,7320],{"class":2185}," viewBox",[1664,7322,2573],{"class":2171},[1664,7324,2189],{"class":2171},[1664,7326,7327],{"class":1674},"0 0 24 24",[1664,7329,2189],{"class":2171},[1664,7331,2560],{"class":2171},[1664,7333,7334,7337,7340,7343,7345,7347,7350,7352,7355,7357,7359,7361,7363,7366,7368,7370,7373,7375,7378,7380,7382,7385,7387,7390,7392],{"class":1666,"line":2032},[1664,7335,7336],{"class":2171},"            \u003C",[1664,7338,7339],{"class":2556},"path",[1664,7341,7342],{"class":2185}," stroke-linecap",[1664,7344,2573],{"class":2171},[1664,7346,2189],{"class":2171},[1664,7348,7349],{"class":1674},"round",[1664,7351,2189],{"class":2171},[1664,7353,7354],{"class":2185}," stroke-linejoin",[1664,7356,2573],{"class":2171},[1664,7358,2189],{"class":2171},[1664,7360,7349],{"class":1674},[1664,7362,2189],{"class":2171},[1664,7364,7365],{"class":2185}," stroke-width",[1664,7367,2573],{"class":2171},[1664,7369,2189],{"class":2171},[1664,7371,7372],{"class":1674},"2",[1664,7374,2189],{"class":2171},[1664,7376,7377],{"class":2185}," d",[1664,7379,2573],{"class":2171},[1664,7381,2189],{"class":2171},[1664,7383,7384],{"class":1674},"M4 6h16M4 12h8m-8 6h16",[1664,7386,2189],{"class":2171},[1664,7388,7389],{"class":2171},">\u003C\u002F",[1664,7391,7339],{"class":2556},[1664,7393,2560],{"class":2171},[1664,7395,7396,7399,7401],{"class":1666,"line":2038},[1664,7397,7398],{"class":2171},"          \u003C\u002F",[1664,7400,7282],{"class":2556},[1664,7402,2560],{"class":2171},[1664,7404,7405,7408,7410],{"class":1666,"line":2044},[1664,7406,7407],{"class":2171},"        \u003C\u002F",[1664,7409,6427],{"class":2556},[1664,7411,2560],{"class":2171},[1664,7413,7414,7416,7418,7420,7422,7424,7426,7428,7430,7432,7434,7437,7439],{"class":1666,"line":2050},[1664,7415,3318],{"class":2171},[1664,7417,47],{"class":2556},[1664,7419,7253],{"class":2185},[1664,7421,2573],{"class":2171},[1664,7423,2189],{"class":2171},[1664,7425,1819],{"class":1674},[1664,7427,2189],{"class":2171},[1664,7429,2570],{"class":2185},[1664,7431,2573],{"class":2171},[1664,7433,2189],{"class":2171},[1664,7435,7436],{"class":1674},"menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52",[1664,7438,2189],{"class":2171},[1664,7440,2560],{"class":2171},[1664,7442,7443,7445,7447,7450,7452,7454,7457,7459,7461,7463,7465],{"class":1666,"line":2056},[1664,7444,7279],{"class":2171},[1664,7446,50],{"class":2556},[1664,7448,7449],{"class":2171},">\u003C",[1664,7451,53],{"class":2556},[1664,7453,2635],{"class":2171},[1664,7455,7456],{"class":2638},"Item 1",[1664,7458,2642],{"class":2171},[1664,7460,53],{"class":2556},[1664,7462,7389],{"class":2171},[1664,7464,50],{"class":2556},[1664,7466,2560],{"class":2171},[1664,7468,7469,7471,7473,7475,7477,7479,7482,7484,7486,7488,7490],{"class":1666,"line":2062},[1664,7470,7279],{"class":2171},[1664,7472,50],{"class":2556},[1664,7474,7449],{"class":2171},[1664,7476,53],{"class":2556},[1664,7478,2635],{"class":2171},[1664,7480,7481],{"class":2638},"Item 2",[1664,7483,2642],{"class":2171},[1664,7485,53],{"class":2556},[1664,7487,7389],{"class":2171},[1664,7489,50],{"class":2556},[1664,7491,2560],{"class":2171},[1664,7493,7494,7496,7498,7500,7502,7504,7507,7509,7511,7513,7515],{"class":1666,"line":2068},[1664,7495,7279],{"class":2171},[1664,7497,50],{"class":2556},[1664,7499,7449],{"class":2171},[1664,7501,53],{"class":2556},[1664,7503,2635],{"class":2171},[1664,7505,7506],{"class":2638},"Item 3",[1664,7508,2642],{"class":2171},[1664,7510,53],{"class":2556},[1664,7512,7389],{"class":2171},[1664,7514,50],{"class":2556},[1664,7516,2560],{"class":2171},[1664,7518,7519,7521,7523],{"class":1666,"line":2074},[1664,7520,7407],{"class":2171},[1664,7522,47],{"class":2556},[1664,7524,2560],{"class":2171},[1664,7526,7527,7529,7531],{"class":1666,"line":2080},[1664,7528,3350],{"class":2171},[1664,7530,1598],{"class":2556},[1664,7532,2560],{"class":2171},[1664,7534,7535,7537,7539,7541,7543,7545,7548,7550,7552,7555,7557,7559],{"class":1666,"line":2086},[1664,7536,2607],{"class":2171},[1664,7538,53],{"class":2556},[1664,7540,2570],{"class":2185},[1664,7542,2573],{"class":2171},[1664,7544,2189],{"class":2171},[1664,7546,7547],{"class":1674},"btn btn-ghost normal-case text-xl",[1664,7549,2189],{"class":2171},[1664,7551,2635],{"class":2171},[1664,7553,7554],{"class":2638},"daisyUI",[1664,7556,2642],{"class":2171},[1664,7558,53],{"class":2556},[1664,7560,2560],{"class":2171},[1664,7562,7563,7565,7567],{"class":1666,"line":2092},[1664,7564,2695],{"class":2171},[1664,7566,1598],{"class":2556},[1664,7568,2560],{"class":2171},[1664,7570,7571,7573,7575,7577,7579,7581,7584,7586],{"class":1666,"line":2368},[1664,7572,2587],{"class":2171},[1664,7574,1598],{"class":2556},[1664,7576,2570],{"class":2185},[1664,7578,2573],{"class":2171},[1664,7580,2189],{"class":2171},[1664,7582,7583],{"class":1674},"navbar-center hidden lg:flex",[1664,7585,2189],{"class":2171},[1664,7587,2560],{"class":2171},[1664,7589,7590,7592,7594,7596,7598,7600,7603,7605],{"class":1666,"line":2388},[1664,7591,2607],{"class":2171},[1664,7593,47],{"class":2556},[1664,7595,2570],{"class":2185},[1664,7597,2573],{"class":2171},[1664,7599,2189],{"class":2171},[1664,7601,7602],{"class":1674},"menu menu-horizontal p-0",[1664,7604,2189],{"class":2171},[1664,7606,2560],{"class":2171},[1664,7608,7609,7611,7613,7615,7617,7619,7621,7623,7625,7627,7629],{"class":1666,"line":2408},[1664,7610,3318],{"class":2171},[1664,7612,50],{"class":2556},[1664,7614,7449],{"class":2171},[1664,7616,53],{"class":2556},[1664,7618,2635],{"class":2171},[1664,7620,7456],{"class":2638},[1664,7622,2642],{"class":2171},[1664,7624,53],{"class":2556},[1664,7626,7389],{"class":2171},[1664,7628,50],{"class":2556},[1664,7630,2560],{"class":2171},[1664,7632,7633,7635,7637,7639,7641,7643,7645,7647,7649,7651,7653],{"class":1666,"line":2422},[1664,7634,3318],{"class":2171},[1664,7636,50],{"class":2556},[1664,7638,7449],{"class":2171},[1664,7640,53],{"class":2556},[1664,7642,2635],{"class":2171},[1664,7644,7481],{"class":2638},[1664,7646,2642],{"class":2171},[1664,7648,53],{"class":2556},[1664,7650,7389],{"class":2171},[1664,7652,50],{"class":2556},[1664,7654,2560],{"class":2171},[1664,7656,7657,7659,7661,7663,7665,7667,7669,7671,7673,7675,7677],{"class":1666,"line":2428},[1664,7658,3318],{"class":2171},[1664,7660,50],{"class":2556},[1664,7662,7449],{"class":2171},[1664,7664,53],{"class":2556},[1664,7666,2635],{"class":2171},[1664,7668,7506],{"class":2638},[1664,7670,2642],{"class":2171},[1664,7672,53],{"class":2556},[1664,7674,7389],{"class":2171},[1664,7676,50],{"class":2556},[1664,7678,2560],{"class":2171},[1664,7680,7681,7683,7685],{"class":1666,"line":2971},[1664,7682,3350],{"class":2171},[1664,7684,47],{"class":2556},[1664,7686,2560],{"class":2171},[1664,7688,7689,7691,7693],{"class":1666,"line":2977},[1664,7690,2695],{"class":2171},[1664,7692,1598],{"class":2556},[1664,7694,2560],{"class":2171},[1664,7696,7697,7699,7701,7703,7705,7707,7710,7712],{"class":1666,"line":2983},[1664,7698,2587],{"class":2171},[1664,7700,1598],{"class":2556},[1664,7702,2570],{"class":2185},[1664,7704,2573],{"class":2171},[1664,7706,2189],{"class":2171},[1664,7708,7709],{"class":1674},"navbar-end",[1664,7711,2189],{"class":2171},[1664,7713,2560],{"class":2171},[1664,7715,7716,7718,7720,7722,7724,7726,7729,7731,7733,7735,7737,7739,7741],{"class":1666,"line":2989},[1664,7717,2607],{"class":2171},[1664,7719,2773],{"class":2556},[1664,7721,2787],{"class":2185},[1664,7723,2573],{"class":2171},[1664,7725,2189],{"class":2171},[1664,7727,7728],{"class":1674},"toggleTheme",[1664,7730,2189],{"class":2171},[1664,7732,2570],{"class":2185},[1664,7734,2573],{"class":2171},[1664,7736,2189],{"class":2171},[1664,7738,6067],{"class":1674},[1664,7740,2189],{"class":2171},[1664,7742,2560],{"class":2171},[1664,7744,7745,7747,7749,7751,7753,7755,7758,7760,7762,7764,7766,7768,7770,7772,7774,7776,7778,7780,7782,7784,7786,7789,7791],{"class":1666,"line":2995},[1664,7746,3318],{"class":2171},[1664,7748,7282],{"class":2556},[1664,7750,2612],{"class":2185},[1664,7752,2573],{"class":2171},[1664,7754,2189],{"class":2171},[1664,7756,7757],{"class":1674},"currentTheme === 'light'",[1664,7759,2189],{"class":2171},[1664,7761,2570],{"class":2185},[1664,7763,2573],{"class":2171},[1664,7765,2189],{"class":2171},[1664,7767,7291],{"class":1674},[1664,7769,2189],{"class":2171},[1664,7771,7296],{"class":2185},[1664,7773,2573],{"class":2171},[1664,7775,2189],{"class":2171},[1664,7777,7315],{"class":1674},[1664,7779,2189],{"class":2171},[1664,7781,7320],{"class":2185},[1664,7783,2573],{"class":2171},[1664,7785,2189],{"class":2171},[1664,7787,7788],{"class":1674},"0 0 20 20",[1664,7790,2189],{"class":2171},[1664,7792,2560],{"class":2171},[1664,7794,7795,7797,7799,7801,7803,7805,7808,7810,7812,7814],{"class":1666,"line":3001},[1664,7796,7279],{"class":2171},[1664,7798,7339],{"class":2556},[1664,7800,7377],{"class":2185},[1664,7802,2573],{"class":2171},[1664,7804,2189],{"class":2171},[1664,7806,7807],{"class":1674},"M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z",[1664,7809,2189],{"class":2171},[1664,7811,7389],{"class":2171},[1664,7813,7339],{"class":2556},[1664,7815,2560],{"class":2171},[1664,7817,7818,7820,7822],{"class":1666,"line":3007},[1664,7819,7407],{"class":2171},[1664,7821,7282],{"class":2556},[1664,7823,2560],{"class":2171},[1664,7825,7826,7828,7830,7833,7835,7837,7839,7841,7843,7845,7847,7849,7851,7853,7855,7857,7859,7861,7863],{"class":1666,"line":3012},[1664,7827,3318],{"class":2171},[1664,7829,7282],{"class":2556},[1664,7831,7832],{"class":2185}," v-else",[1664,7834,2570],{"class":2185},[1664,7836,2573],{"class":2171},[1664,7838,2189],{"class":2171},[1664,7840,7291],{"class":1674},[1664,7842,2189],{"class":2171},[1664,7844,7296],{"class":2185},[1664,7846,2573],{"class":2171},[1664,7848,2189],{"class":2171},[1664,7850,7315],{"class":1674},[1664,7852,2189],{"class":2171},[1664,7854,7320],{"class":2185},[1664,7856,2573],{"class":2171},[1664,7858,2189],{"class":2171},[1664,7860,7788],{"class":1674},[1664,7862,2189],{"class":2171},[1664,7864,2560],{"class":2171},[1664,7866,7867,7869,7871,7874,7876,7878,7881,7883,7885,7887,7889,7892,7894,7897,7899,7901,7903,7905,7907,7909],{"class":1666,"line":3018},[1664,7868,7279],{"class":2171},[1664,7870,7339],{"class":2556},[1664,7872,7873],{"class":2185}," fill-rule",[1664,7875,2573],{"class":2171},[1664,7877,2189],{"class":2171},[1664,7879,7880],{"class":1674},"evenodd",[1664,7882,2189],{"class":2171},[1664,7884,7377],{"class":2185},[1664,7886,2573],{"class":2171},[1664,7888,2189],{"class":2171},[1664,7890,7891],{"class":1674},"M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z",[1664,7893,2189],{"class":2171},[1664,7895,7896],{"class":2185}," clip-rule",[1664,7898,2573],{"class":2171},[1664,7900,2189],{"class":2171},[1664,7902,7880],{"class":1674},[1664,7904,2189],{"class":2171},[1664,7906,7389],{"class":2171},[1664,7908,7339],{"class":2556},[1664,7910,2560],{"class":2171},[1664,7912,7913,7915,7917],{"class":1666,"line":3024},[1664,7914,7407],{"class":2171},[1664,7916,7282],{"class":2556},[1664,7918,2560],{"class":2171},[1664,7920,7921,7923,7925],{"class":1666,"line":3030},[1664,7922,3350],{"class":2171},[1664,7924,2773],{"class":2556},[1664,7926,2560],{"class":2171},[1664,7928,7929,7931,7933],{"class":1666,"line":3036},[1664,7930,2695],{"class":2171},[1664,7932,1598],{"class":2556},[1664,7934,2560],{"class":2171},[1664,7936,7937,7939,7941],{"class":1666,"line":3042},[1664,7938,2824],{"class":2171},[1664,7940,1598],{"class":2556},[1664,7942,2560],{"class":2171},[1664,7944,7945,7947,7949],{"class":1666,"line":3048},[1664,7946,2642],{"class":2171},[1664,7948,2557],{"class":2556},[1664,7950,2560],{"class":2171},[1664,7952,7953],{"class":1666,"line":3054},[1664,7954,3773],{"emptyLinePlaceholder":806},[1664,7956,7957,7959,7961,7963],{"class":1666,"line":3060},[1664,7958,2553],{"class":2171},[1664,7960,3161],{"class":2556},[1664,7962,3164],{"class":2185},[1664,7964,2560],{"class":2171},[1664,7966,7967,7969,7971,7974,7976,7978,7980,7983],{"class":1666,"line":3066},[1664,7968,3699],{"class":3698},[1664,7970,3702],{"class":2171},[1664,7972,7973],{"class":2638}," useTheme",[1664,7975,3708],{"class":2171},[1664,7977,3711],{"class":3698},[1664,7979,3714],{"class":2171},[1664,7981,7982],{"class":1674},"@\u002Fcomposables\u002FuseTheme",[1664,7984,3719],{"class":2171},[1664,7986,7987],{"class":1666,"line":3072},[1664,7988,3773],{"emptyLinePlaceholder":806},[1664,7990,7991,7993,7995,7998,8001,8004,8006,8008,8010],{"class":1666,"line":3078},[1664,7992,3778],{"class":2185},[1664,7994,3702],{"class":2171},[1664,7996,7997],{"class":2638}," currentTheme",[1664,7999,8000],{"class":2171},",",[1664,8002,8003],{"class":2638}," toggleTheme ",[1664,8005,3193],{"class":2171},[1664,8007,3838],{"class":2171},[1664,8009,7973],{"class":3171},[1664,8011,5411],{"class":2638},[1664,8013,8014,8016,8018],{"class":1666,"line":3084},[1664,8015,2642],{"class":2171},[1664,8017,3161],{"class":2556},[1664,8019,2560],{"class":2171},[888,8021,8023],{"id":8022},"performance-optimizasyonu","Performance Optimizasyonu",[39,8025,8027],{"id":8026},"purgecss-ile-optimizasyon","PurgeCSS ile Optimizasyon",[16,8029,8030],{},"TailwindCSS otomatik olarak kullanılmayan CSS'leri temizler:",[355,8032,8034],{"className":1834,"code":8033,"language":1836,"meta":364,"style":364},"\u002F\u002F tailwind.config.js\nmodule.exports = {\n  content: [\n    '.\u002Fpages\u002F**\u002F*.{js,ts,jsx,tsx}',\n    '.\u002Fcomponents\u002F**\u002F*.{js,ts,jsx,tsx}',\n  ],\n  \u002F\u002F ...\n}\n",[362,8035,8036,8041,8045,8049,8054,8059,8063,8068],{"__ignoreMap":364},[1664,8037,8038],{"class":1666,"line":1667},[1664,8039,8040],{},"\u002F\u002F tailwind.config.js\n",[1664,8042,8043],{"class":1666,"line":778},[1664,8044,5673],{},[1664,8046,8047],{"class":1666,"line":781},[1664,8048,5678],{},[1664,8050,8051],{"class":1666,"line":1716},[1664,8052,8053],{},"    '.\u002Fpages\u002F**\u002F*.{js,ts,jsx,tsx}',\n",[1664,8055,8056],{"class":1666,"line":1722},[1664,8057,8058],{},"    '.\u002Fcomponents\u002F**\u002F*.{js,ts,jsx,tsx}',\n",[1664,8060,8061],{"class":1666,"line":1923},[1664,8062,5698],{},[1664,8064,8065],{"class":1666,"line":2032},[1664,8066,8067],{},"  \u002F\u002F ...\n",[1664,8069,8070],{"class":1666,"line":2038},[1664,8071,1926],{},[39,8073,8075],{"id":8074},"bundle-size-analizi","Bundle Size Analizi",[355,8077,8079],{"className":1658,"code":8078,"language":1660,"meta":364,"style":364},"# Bundle analyzer ile analiz\nnpm install --save-dev @next\u002Fbundle-analyzer\n",[362,8080,8081,8086],{"__ignoreMap":364},[1664,8082,8083],{"class":1666,"line":1667},[1664,8084,8085],{"class":1695},"# Bundle analyzer ile analiz\n",[1664,8087,8088,8090,8092,8095],{"class":1666,"line":778},[1664,8089,1671],{"class":1670},[1664,8091,1793],{"class":1674},[1664,8093,8094],{"class":1674}," --save-dev",[1664,8096,8097],{"class":1674}," @next\u002Fbundle-analyzer\n",[888,8099,8101],{"id":8100},"best-practices","Best Practices",[176,8103,8104,8109,8115,8121,8126],{},[50,8105,8106,8108],{},[20,8107,5558],{},": DaisyUI class'larını TailwindCSS utility'leri ile kombine edin",[50,8110,8111,8114],{},[20,8112,8113],{},"Component Abstraction",": Tekrar eden UI pattern'leri için Vue bileşenleri oluşturun",[50,8116,8117,8120],{},[20,8118,8119],{},"Theme Consistency",": Tutarlı bir design system için tema değişkenlerini kullanın",[50,8122,8123,8125],{},[20,8124,4934],{},": Sadece ihtiyacınız olan bileşenleri import edin",[50,8127,8128,8130],{},[20,8129,5586],{},": ARIA attribute'larını unutmayın",[888,8132,5423],{"id":5422},[16,8134,8135],{},"TailwindCSS ve DaisyUI kombinasyonu, hızlı ve kaliteli UI geliştirme için mükemmel bir çözüm sunar. Utility-first yaklaşımın esnekliği ile hazır bileşenlerin hızını birleştirerek, hem developer experience'ı hem de end-user experience'ı optimize eder.",[39,8137,5430],{"id":5429},[47,8139,8140,8147,8154,8161],{},[50,8141,8142],{},[53,8143,8146],{"href":8144,"rel":8145},"https:\u002F\u002Ftailwindcss.com\u002Fdocs",[57],"TailwindCSS Dokümantasyonu",[50,8148,8149],{},[53,8150,8153],{"href":8151,"rel":8152},"https:\u002F\u002Fdaisyui.com\u002F",[57],"DaisyUI Dokümantasyonu",[50,8155,8156],{},[53,8157,8160],{"href":8158,"rel":8159},"https:\u002F\u002Fplay.tailwindcss.com\u002F",[57],"TailwindCSS Playground",[50,8162,8163],{},[53,8164,8167],{"href":8165,"rel":8166},"https:\u002F\u002Fdaisyui.com\u002Fthemes\u002F",[57],"DaisyUI Themes",[5455,8169],{},[16,8171,8172],{},[120,8173,8174],{},"Bu yazıda TailwindCSS ve DaisyUI'nin güçlü kombinasyonunu ele aldık. Kendi projelerinizde deneyerek bu teknolojilerin avantajlarını keşfedebilirsiniz.",[4088,8176,8177],{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":364,"searchDepth":778,"depth":778,"links":8179},[8180,8183,8186,8190,8195,8199,8203,8207,8208],{"id":5501,"depth":778,"text":5502,"children":8181},[8182],{"id":5508,"depth":781,"text":5509},{"id":5543,"depth":778,"text":5544,"children":8184},[8185],{"id":5550,"depth":781,"text":5551},{"id":5596,"depth":778,"text":5597,"children":8187},[8188,8189],{"id":5600,"depth":781,"text":5601},{"id":5640,"depth":781,"text":5641},{"id":5758,"depth":778,"text":5759,"children":8191},[8192,8193,8194],{"id":5762,"depth":781,"text":5763},{"id":6139,"depth":781,"text":6140},{"id":6409,"depth":781,"text":6410},{"id":6686,"depth":778,"text":6687,"children":8196},[8197,8198],{"id":6693,"depth":781,"text":6694},{"id":6951,"depth":781,"text":6952},{"id":7003,"depth":778,"text":7004,"children":8200},[8201,8202],{"id":7007,"depth":781,"text":7008},{"id":7173,"depth":781,"text":7174},{"id":8022,"depth":778,"text":8023,"children":8204},[8205,8206],{"id":8026,"depth":781,"text":8027},{"id":8074,"depth":781,"text":8075},{"id":8100,"depth":778,"text":8101},{"id":5422,"depth":778,"text":5423,"children":8209},[8210],{"id":5429,"depth":781,"text":5430},"2024-01-05","TailwindCSS ve DaisyUI kombinasyonu ile nasıl hızlı ve güzel arayüzler geliştirebileceğinizi öğrenin",{"author":5477,"cover":8214},"\u002Fassets\u002Fimages\u002Fblog\u002Ftailwind-daisyui-cover.svg","\u002Fblog\u002Ftailwindcss-daisyui-ile-hizli-ui-gelistirme","10",{"title":5490,"description":8212},{"loc":8215},"blog\u002Ftailwindcss-daisyui-ile-hizli-ui-gelistirme",[1742,1746,4669,8221,4936],"UI\u002FUX","basBAUiQTPFTFIQ3aJ128efZ1Y5ADdvGsMSK4AdTx6k",{"id":8224,"title":8225,"body":8226,"date":4106,"description":10441,"extension":796,"image":797,"meta":10442,"navigation":806,"ogImage":4110,"path":10446,"readingTime":4117,"robots":797,"schemaOrg":797,"seo":10447,"sitemap":10448,"stem":10450,"tags":10451,"__hash__":10454},"blog\u002Fblog\u002Ftensorflow-js-ve-vue-3-ile-nesne-sınıflandırma-nasıl-yapılır.md","TensorFlow.js ve Vue 3 ile Nesne Tanımlama Nasıl Yapılır?",{"type":8,"value":8227,"toc":10428},[8228,8231,8247,8252,8257,8261,8282,8296,8302,8320,8370,8377,8386,8398,8401,8412,8436,8440,8443,8451,8471,8480,8484,8490,8518,8542,8547,8577,8581,8584,8672,8678,8704,8708,8711,8733,8969,8972,8989,9017,9021,9027,9031,9039,9043,9047,9050,9053,9059,9062,9312,9315,9321,9324,9327,9530,9581,9584,9590,9799,9802,9808,10062,10065,10071,10351,10366,10371,10378,10383,10389,10392,10397,10403,10409,10423,10426],[11,8229,8225],{"id":8230},"tensorflowjs-ve-vue-3-ile-nesne-tanımlama-nasıl-yapılır",[16,8232,8233,8234,8236,8237,8239,8240,8242,8243,8246],{},"Son yıllarda çok aktif olarak yapay zeka ve bunun ürünleri hayatımızda yer etmeye başladı ve giderek bunların da sayısı artıyor. Hepimizin aklında bunu nasıl hayatımda kullanabilirim sorusu mevcut, bu yazıda sizlerle beraber ",[20,8235,1555],{}," ile ",[20,8238,1559],{}," sınıflarını ve ",[20,8241,1563],{}," modelini kullanarak basit bir obje\u002Fnesne tanıyan ve bunu sepete ekleyen bir uygulama yapacağız. Böylelikle ",[53,8244,1569],{"href":1567,"rel":8245},[57],"’nun temel çalışma prensibinde bir senaryosunu da gerçekleştirmiş olacağız. Hadi başlayalım 🚀",[16,8248,8249],{},[35,8250],{"alt":1575,"src":8251},"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F12000\u002F0*fdwKAdftxesGC5SP",[16,8253,8254],{},[20,8255,8256],{},"TensorFlow Nedir? TensorFlow.js Nedir?",[1598,8258,8259,1605],{"align":1600},[35,8260],{"src":1603,"alt":1604},[16,8262,8263,8265,8266,8268,8269,8271,8272,551,8275,8000,8278,8281],{},[20,8264,1610],{},", Google tarafından geliştirilen ve açık kaynaklı bir makine öğrenimi ve derin öğrenme kütüphanesidir. Geniş bir topluluk tarafından desteklenen ",[20,8267,1610],{},", özellikle yapay zeka uygulamaları ve büyük ölçekli veri işleme projeleri için kullanılan güçlü bir araçtır. Hem araştırma hem de endüstriyel projelerde yaygın olarak kullanılan ",[20,8270,1610],{},", esnek ve modüler bir yapısıyla öne çıkar, farklı cihazlarda ",[120,8273,8274],{},"bilgisayarlar",[120,8276,8277],{},"mobil cihazlar",[120,8279,8280],{},"IoT"," cihazlarında kullanım imkanı sunar.",[16,8283,8284,8286,8287,8289,8290,8295],{},[20,8285,1555],{}," ise ",[20,8288,1610],{},"’un JavaScript sürümüdür ve tarayıcı üzerinde makine öğrenimi modellerinin eğitilmesi ve çalıştırılmasını sağlar. Bu sayede web uygulamalarında, ",[120,8291,8292],{},[20,8293,8294],{},"tarayıcı tabanlı yapay zeka"," projelerinde kullanılabilecek bir araçtır.",[39,8297,8299],{"id":8298},"kurulumlar",[20,8300,8301],{},"Kurulumlar",[16,8303,8304,8305,8307,8308,8310,8311,8313,8314,8316,8317,8319],{},"Öncelikli olarak ",[20,8306,1640],{}," projemizi oluşturalım. 🧐 Bunun için ister ",[120,8309,1644],{}," yada ",[120,8312,1648],{}," kullanabilirsiniz. Ben burada ",[120,8315,1648],{}," kurulumunu tercih edeceğim ancak diğer araçlarında kurulumunu basitleştirmek için ",[120,8318,1644],{}," tercih edebilirsiniz.",[355,8321,8322],{"className":1658,"code":1659,"language":1660,"meta":364,"style":364},[362,8323,8324,8340,8344,8358,8362],{"__ignoreMap":364},[1664,8325,8326,8328,8330,8332,8334,8336,8338],{"class":1666,"line":1667},[1664,8327,1671],{"class":1670},[1664,8329,1675],{"class":1674},[1664,8331,1678],{"class":1674},[1664,8333,1681],{"class":1674},[1664,8335,1684],{"class":1674},[1664,8337,1687],{"class":1674},[1664,8339,1690],{"class":1674},[1664,8341,8342],{"class":1666,"line":778},[1664,8343,1696],{"class":1695},[1664,8345,8346,8348,8350,8352,8354,8356],{"class":1666,"line":781},[1664,8347,1701],{"class":1670},[1664,8349,1675],{"class":1674},[1664,8351,1706],{"class":1674},[1664,8353,1709],{"class":1674},[1664,8355,1687],{"class":1674},[1664,8357,1690],{"class":1674},[1664,8359,8360],{"class":1666,"line":1716},[1664,8361,1719],{"class":1695},[1664,8363,8364,8366,8368],{"class":1666,"line":1722},[1664,8365,1671],{"class":1670},[1664,8367,1675],{"class":1674},[1664,8369,1729],{"class":1674},[39,8371,8373,8374],{"id":8372},"opsiyonel-yükleme","📌",[20,8375,8376],{},"Opsiyonel Yükleme",[16,8378,8379,8380,593,8382,8385],{},"UI yada CSS kütüphanesi kullanmak istiyorsanız bu aşamada kurulumunu yapmanızı öneririm. Bu örnek projede ",[120,8381,1742],{},[120,8383,8384],{},"DaiysiUI"," kullandım eğer sizde aynı yapıdan ilerlemek isterseniz ;",[47,8387,8388,8393],{},[50,8389,8390],{},[53,8391,1756],{"href":1754,"rel":8392},[57],[50,8394,8395],{},[53,8396,1763],{"href":1761,"rel":8397},[57],[16,8399,8400],{},"sayfalarını ziyaret edebilirsiniz.",[16,8402,8403,8404,8408,8409,8411],{},"Kurulumlarımızı tamamladıktan sonra sonra dosya dizinine gidip, npm install ve npm run dev yaparak boş projemizi bir çalıştırıyoruz. Eğer herhangi bir sorun yada hata almadıysanız ",[53,8405,8407],{"href":1779,"rel":8406},[57],"TensorFlow.js Kurulum"," adresine giderek projemize ",[20,8410,1555],{},"'i ekliyoruz.",[355,8413,8414],{"className":1658,"code":1784,"language":1660,"meta":364,"style":364},[362,8415,8416,8424,8428],{"__ignoreMap":364},[1664,8417,8418,8420,8422],{"class":1666,"line":1667},[1664,8419,1671],{"class":1670},[1664,8421,1793],{"class":1674},[1664,8423,1796],{"class":1674},[1664,8425,8426],{"class":1666,"line":778},[1664,8427,1696],{"class":1695},[1664,8429,8430,8432,8434],{"class":1666,"line":781},[1664,8431,1701],{"class":1670},[1664,8433,1807],{"class":1674},[1664,8435,1796],{"class":1674},[888,8437,8439],{"id":8438},"peki-tensorflowjsi-nasıl-kullanacağız","📌 Peki TensorFlow.js’i nasıl kullanacağız?",[1815,8441],{"src":1817,"width":1818,"height":1818,"style":364,"frameBorder":1819,"className":8442,"allowFullScreen":806},[1821],[16,8444,8445,8447,8448,8450],{},[20,8446,1555],{},"’i kullanmak için bir utils klasörünün altında ",[20,8449,1830],{}," adında bir dosya oluşturuyoruz. Dosyamızın içine ;",[355,8452,8453],{"className":1834,"code":1835,"language":1836,"meta":364,"style":364},[362,8454,8455,8459,8463,8467],{"__ignoreMap":364},[1664,8456,8457],{"class":1666,"line":1667},[1664,8458,1843],{},[1664,8460,8461],{"class":1666,"line":778},[1664,8462,1848],{},[1664,8464,8465],{"class":1666,"line":781},[1664,8466,1853],{},[1664,8468,8469],{"class":1666,"line":1716},[1664,8470,1858],{},[16,8472,8473,8474,8476,8477,8479],{},"Burada ",[20,8475,1555],{},"’i “",[120,8478,1867],{},"” takmadıyla import ettik. Ve daha sonrasında kullanılacak olan model, labels ve düzenlenmiş etiketleri içerecek labelsArray’i tanımladık.",[888,8481,8483],{"id":8482},"model-ve-etiketlerin-yüklenmesi","📌 Model ve Etiketlerin Yüklenmesi",[16,8485,8486,8487,8489],{},"Bu tanımlamaları yaptıktan sonra ",[20,8488,1889],{}," adında bir fonksiyon oluşturuyoruz. Burada modelimizi ve labels(etiketler)’ı projeye yükleyeceğiz.",[355,8491,8492],{"className":1834,"code":1893,"language":1836,"meta":364,"style":364},[362,8493,8494,8498,8502,8506,8510,8514],{"__ignoreMap":364},[1664,8495,8496],{"class":1666,"line":1667},[1664,8497,1900],{},[1664,8499,8500],{"class":1666,"line":778},[1664,8501,1905],{},[1664,8503,8504],{"class":1666,"line":781},[1664,8505,1910],{},[1664,8507,8508],{"class":1666,"line":1716},[1664,8509,1915],{},[1664,8511,8512],{"class":1666,"line":1722},[1664,8513,1920],{},[1664,8515,8516],{"class":1666,"line":1923},[1664,8517,1926],{},[176,8519,8520,8530,8536],{},[50,8521,8522,8523,8525,8526,8529],{},"İlk olarak modelimizi ",[20,8524,1934],{}," ile birlikte ",[53,8527,1940],{"href":1938,"rel":8528},[57]," üzerinden modelimizi yüklüyoruz.",[50,8531,8532,8533,8535],{},"Bu aşamada ise ",[20,8534,1559],{}," verisinin etiketlerini çekiyoruz ve bunu bir text formatına çeviriyoruz.",[50,8537,8538,8539,8541],{},"Son olarak ise bu text olarak aldığımız veriyi bir diziye dönüştürüp ",[20,8540,1878],{}," değişkenine atıyoruz.",[16,8543,8544],{},[20,8545,8546],{},"Fonksiyon Açıklamaları",[47,8548,8549,8556,8561,8567,8572],{},[50,8550,8551,5559,8553,8555],{},[20,8552,1934],{},[20,8554,1555],{}," model yükleme işlevidir. Belirtilen URL'den modeli yükler.",[50,8557,8558,8560],{},[20,8559,1968],{},": Belirtilen URL'den veri çeker.",[50,8562,8563,8566],{},[20,8564,8565],{},"labels.split('\\n')",": Etiketleri yeni satırlara göre böler ve bir diziye dönüştürür.",[50,8568,8569,8571],{},[20,8570,1980],{},": Dizi içindeki her etiketin başındaki ve sonundaki boşlukları temizler.",[50,8573,8574,8576],{},[20,8575,1986],{},": Boş etiketleri filtreler.",[888,8578,8580],{"id":8579},"görüntü-sınıflandırma-fonksiyonu","📌Görüntü Sınıflandırma Fonksiyonu",[16,8582,8583],{},"Şimdi, yüklenmiş modeli kullanarak bir görüntüyü sınıflandırmak için aşağıdaki fonksiyonu oluşturuyoruz:",[355,8585,8587],{"className":1834,"code":8586,"language":1836,"meta":364,"style":364},"async function classifyImage(image) {\n  \u002F\u002F 1. Giriş Görüntüsünü Tensor'a Dönüştürme ve Ön İşleme\n  const imgTensor = tf.browser.fromPixels(image)  \u002F\u002F Görüntüyü Tensor'a dönüştürme\n    .resizeNearestNeighbor([128, 128])  \u002F\u002F Görüntüyü 128x128 boyutuna yeniden boyutlandırma\n    .toFloat()  \u002F\u002F Tensor değerlerini ondalık sayıya dönüştürme\n    .div(tf.scalar(255))  \u002F\u002F Normalizasyon: [0, 255] aralığındaki piksel değerlerini [0, 1] aralığına ölçekleme\n    .expandDims();  \u002F\u002F Tensor boyutunu genişletme\n\u002F\u002F 2. Model ile Görüntüyü Sınıflandırma\n  const predictions = await model.predict(imgTensor);  \u002F\u002F Modeli kullanarak sınıflandırma yapma\n  \u002F\u002F 3. En Yüksek Olasılıklı Sınıfları Belirleme ve Sıralama\n  const topPredictions = Array.from(predictions.dataSync())  \u002F\u002F Tensor'dan JavaScript dizisine dönüştürme\n    .map((probability, index) => ({ probability, label: labelsArray[index]}))  \u002F\u002F Her sınıf için olasılığı ve etiketi eşleştirme\n    .sort((a, b) => b.probability - a.probability)  \u002F\u002F Olasılığa göre sıralama\n    .slice(0, 3);  \u002F\u002F En yüksek üç olasılıklı sınıfları seçme\n  \u002F\u002F 4. Sonuçları Döndürme\n  return topPredictions;  \u002F\u002F En yüksek olasılıklı sınıfları içeren diziyi döndürme\n}\n",[362,8588,8589,8593,8598,8603,8608,8613,8618,8623,8628,8633,8638,8643,8648,8653,8658,8663,8668],{"__ignoreMap":364},[1664,8590,8591],{"class":1666,"line":1667},[1664,8592,2004],{},[1664,8594,8595],{"class":1666,"line":778},[1664,8596,8597],{},"  \u002F\u002F 1. Giriş Görüntüsünü Tensor'a Dönüştürme ve Ön İşleme\n",[1664,8599,8600],{"class":1666,"line":781},[1664,8601,8602],{},"  const imgTensor = tf.browser.fromPixels(image)  \u002F\u002F Görüntüyü Tensor'a dönüştürme\n",[1664,8604,8605],{"class":1666,"line":1716},[1664,8606,8607],{},"    .resizeNearestNeighbor([128, 128])  \u002F\u002F Görüntüyü 128x128 boyutuna yeniden boyutlandırma\n",[1664,8609,8610],{"class":1666,"line":1722},[1664,8611,8612],{},"    .toFloat()  \u002F\u002F Tensor değerlerini ondalık sayıya dönüştürme\n",[1664,8614,8615],{"class":1666,"line":1923},[1664,8616,8617],{},"    .div(tf.scalar(255))  \u002F\u002F Normalizasyon: [0, 255] aralığındaki piksel değerlerini [0, 1] aralığına ölçekleme\n",[1664,8619,8620],{"class":1666,"line":2032},[1664,8621,8622],{},"    .expandDims();  \u002F\u002F Tensor boyutunu genişletme\n",[1664,8624,8625],{"class":1666,"line":2038},[1664,8626,8627],{},"\u002F\u002F 2. Model ile Görüntüyü Sınıflandırma\n",[1664,8629,8630],{"class":1666,"line":2044},[1664,8631,8632],{},"  const predictions = await model.predict(imgTensor);  \u002F\u002F Modeli kullanarak sınıflandırma yapma\n",[1664,8634,8635],{"class":1666,"line":2050},[1664,8636,8637],{},"  \u002F\u002F 3. En Yüksek Olasılıklı Sınıfları Belirleme ve Sıralama\n",[1664,8639,8640],{"class":1666,"line":2056},[1664,8641,8642],{},"  const topPredictions = Array.from(predictions.dataSync())  \u002F\u002F Tensor'dan JavaScript dizisine dönüştürme\n",[1664,8644,8645],{"class":1666,"line":2062},[1664,8646,8647],{},"    .map((probability, index) => ({ probability, label: labelsArray[index]}))  \u002F\u002F Her sınıf için olasılığı ve etiketi eşleştirme\n",[1664,8649,8650],{"class":1666,"line":2068},[1664,8651,8652],{},"    .sort((a, b) => b.probability - a.probability)  \u002F\u002F Olasılığa göre sıralama\n",[1664,8654,8655],{"class":1666,"line":2074},[1664,8656,8657],{},"    .slice(0, 3);  \u002F\u002F En yüksek üç olasılıklı sınıfları seçme\n",[1664,8659,8660],{"class":1666,"line":2080},[1664,8661,8662],{},"  \u002F\u002F 4. Sonuçları Döndürme\n",[1664,8664,8665],{"class":1666,"line":2086},[1664,8666,8667],{},"  return topPredictions;  \u002F\u002F En yüksek olasılıklı sınıfları içeren diziyi döndürme\n",[1664,8669,8670],{"class":1666,"line":2092},[1664,8671,1926],{},[16,8673,8674,8675,8677],{},"Bu fonksiyon, bir görüntüyü alır, ",[20,8676,1555],{}," kullanarak tensor formatına çevirir ve gerekli ön işleme adımlarını uygular. Ardından, modeli kullanarak görüntüyü sınıflandırır ve en yüksek olasılıklı üç sınıfı içeren bir dizi döndürür.",[176,8679,8680,8688,8691,8698,8701],{},[50,8681,8682,8684,8685,8687],{},[20,8683,2107],{},": Giriş olarak alınan görüntüyü ",[20,8686,1555],{},"'in tensor formatına çevirir.",[50,8689,8690],{},"Tensor üzerinde bazı ön işlemleri yapar. Görüntüyü 128x128 boyutuna yeniden boyutlandırır, piksel değerlerini normalleştirir ve tensor boyutunu genişletir.",[50,8692,8693,5559,8695,8697],{},[20,8694,2119],{},[20,8696,1555],{}," modelini kullanarak, ön işlenmiş görüntüyü sınıflandırma yapar ve olasılıklı sonuçları içeren bir tensor elde eder.",[50,8699,8700],{},"Elde edilen sonuçları bir JavaScript dizisine dönüştürür, her sınıfın olasılığını ve etiketini eşleştirir, olasılığa göre sıralar ve en yüksek üç olasılıklı sınıfları seçer.",[50,8702,8703],{},"Son olarak fonksiyon, en yüksek olasılıklı üç sınıfın etiketini ve olasılıklarını içeren bir dizi döndürür. Bu dizi, sınıflandırma sonuçlarını temsil eder.",[888,8705,8707],{"id":8706},"mockup-data-oluşturma","📌Mockup Data Oluşturma",[16,8709,8710],{},"Projede bir sepet senaryomuz olduğu için haliyle sınıflandırdığımız öğelerin Database’den çekmemiz gerekiyor ancak bağımlığın artmaması için mockup verimizi bir JSON dosyamızın içinden okuyup gerekli bilgilerini döneceğiz.",[47,8712,8713,8722],{},[50,8714,8715,8716,8718,8719,8721],{},"İlk olarak ",[20,8717,2144],{}," adında bir klasör oluşturuyoruz ",[20,8720,2148],{}," dizinimizin altına.",[50,8723,8724,8725,8727,8728,8732],{},"Daha sonra services klasörümüzün altına ",[20,8726,2155],{}," adında bir dosya oluşturup içini açıyoruz. Burada örnek olarak ",[120,8729,8730],{},[20,8731,1559],{}," etiketlerinde bulunan 4 adet veri ekledim bunu isterseniz arttırabilirsiniz.",[355,8734,8735],{"className":2162,"code":2163,"language":2164,"meta":364,"style":364},[362,8736,8737,8741,8745,8763,8781,8793,8797,8801,8819,8837,8849,8853,8857,8875,8893,8905,8909,8913,8931,8949,8961,8965],{"__ignoreMap":364},[1664,8738,8739],{"class":1666,"line":1667},[1664,8740,2172],{"class":2171},[1664,8742,8743],{"class":1666,"line":778},[1664,8744,2177],{"class":2171},[1664,8746,8747,8749,8751,8753,8755,8757,8759,8761],{"class":1666,"line":781},[1664,8748,2182],{"class":2171},[1664,8750,2186],{"class":2185},[1664,8752,2189],{"class":2171},[1664,8754,2192],{"class":2171},[1664,8756,2195],{"class":2171},[1664,8758,2198],{"class":1674},[1664,8760,2189],{"class":2171},[1664,8762,2203],{"class":2171},[1664,8764,8765,8767,8769,8771,8773,8775,8777,8779],{"class":1666,"line":1716},[1664,8766,2182],{"class":2171},[1664,8768,2210],{"class":2185},[1664,8770,2189],{"class":2171},[1664,8772,2192],{"class":2171},[1664,8774,2195],{"class":2171},[1664,8776,2219],{"class":1674},[1664,8778,2189],{"class":2171},[1664,8780,2203],{"class":2171},[1664,8782,8783,8785,8787,8789,8791],{"class":1666,"line":1722},[1664,8784,2182],{"class":2171},[1664,8786,2230],{"class":2185},[1664,8788,2189],{"class":2171},[1664,8790,2192],{"class":2171},[1664,8792,2238],{"class":2237},[1664,8794,8795],{"class":1666,"line":1923},[1664,8796,2243],{"class":2171},[1664,8798,8799],{"class":1666,"line":2032},[1664,8800,2177],{"class":2171},[1664,8802,8803,8805,8807,8809,8811,8813,8815,8817],{"class":1666,"line":2038},[1664,8804,2182],{"class":2171},[1664,8806,2186],{"class":2185},[1664,8808,2189],{"class":2171},[1664,8810,2192],{"class":2171},[1664,8812,2195],{"class":2171},[1664,8814,2262],{"class":1674},[1664,8816,2189],{"class":2171},[1664,8818,2203],{"class":2171},[1664,8820,8821,8823,8825,8827,8829,8831,8833,8835],{"class":1666,"line":2044},[1664,8822,2182],{"class":2171},[1664,8824,2210],{"class":2185},[1664,8826,2189],{"class":2171},[1664,8828,2192],{"class":2171},[1664,8830,2195],{"class":2171},[1664,8832,2281],{"class":1674},[1664,8834,2189],{"class":2171},[1664,8836,2203],{"class":2171},[1664,8838,8839,8841,8843,8845,8847],{"class":1666,"line":2050},[1664,8840,2182],{"class":2171},[1664,8842,2230],{"class":2185},[1664,8844,2189],{"class":2171},[1664,8846,2192],{"class":2171},[1664,8848,2298],{"class":2237},[1664,8850,8851],{"class":1666,"line":2056},[1664,8852,2243],{"class":2171},[1664,8854,8855],{"class":1666,"line":2062},[1664,8856,2177],{"class":2171},[1664,8858,8859,8861,8863,8865,8867,8869,8871,8873],{"class":1666,"line":2068},[1664,8860,2182],{"class":2171},[1664,8862,2186],{"class":2185},[1664,8864,2189],{"class":2171},[1664,8866,2192],{"class":2171},[1664,8868,2195],{"class":2171},[1664,8870,2321],{"class":1674},[1664,8872,2189],{"class":2171},[1664,8874,2203],{"class":2171},[1664,8876,8877,8879,8881,8883,8885,8887,8889,8891],{"class":1666,"line":2074},[1664,8878,2182],{"class":2171},[1664,8880,2210],{"class":2185},[1664,8882,2189],{"class":2171},[1664,8884,2192],{"class":2171},[1664,8886,2195],{"class":2171},[1664,8888,2340],{"class":1674},[1664,8890,2189],{"class":2171},[1664,8892,2203],{"class":2171},[1664,8894,8895,8897,8899,8901,8903],{"class":1666,"line":2080},[1664,8896,2182],{"class":2171},[1664,8898,2230],{"class":2185},[1664,8900,2189],{"class":2171},[1664,8902,2192],{"class":2171},[1664,8904,2357],{"class":2237},[1664,8906,8907],{"class":1666,"line":2086},[1664,8908,2243],{"class":2171},[1664,8910,8911],{"class":1666,"line":2092},[1664,8912,2177],{"class":2171},[1664,8914,8915,8917,8919,8921,8923,8925,8927,8929],{"class":1666,"line":2368},[1664,8916,2182],{"class":2171},[1664,8918,2186],{"class":2185},[1664,8920,2189],{"class":2171},[1664,8922,2192],{"class":2171},[1664,8924,2195],{"class":2171},[1664,8926,2381],{"class":1674},[1664,8928,2189],{"class":2171},[1664,8930,2203],{"class":2171},[1664,8932,8933,8935,8937,8939,8941,8943,8945,8947],{"class":1666,"line":2388},[1664,8934,2182],{"class":2171},[1664,8936,2210],{"class":2185},[1664,8938,2189],{"class":2171},[1664,8940,2192],{"class":2171},[1664,8942,2195],{"class":2171},[1664,8944,2401],{"class":1674},[1664,8946,2189],{"class":2171},[1664,8948,2203],{"class":2171},[1664,8950,8951,8953,8955,8957,8959],{"class":1666,"line":2408},[1664,8952,2182],{"class":2171},[1664,8954,2230],{"class":2185},[1664,8956,2189],{"class":2171},[1664,8958,2192],{"class":2171},[1664,8960,2419],{"class":2237},[1664,8962,8963],{"class":1666,"line":2422},[1664,8964,2425],{"class":2171},[1664,8966,8967],{"class":1666,"line":2428},[1664,8968,2431],{"class":2171},[16,8970,8971],{},"Bu aşamayı tamamladıktan sonra verilerimizi okuyup içerisinden sınıflandırmamızın sonucuna göre ürün bilgisini dönmesi için basit kod yapımızı oluşturacağız.",[47,8973,8974,8983],{},[50,8975,8976,8978,8979,8982],{},[20,8977,2442],{}," adında bir dosya oluşturuyoruz. Ve bunu içerisine az önce oluşturduğumuz verilerimizi ",[20,8980,8981],{},"import mockupData from '.\u002Fdata.json","’ ile ekliyoruz.",[50,8984,8985,8986,8988],{},"Buradaki verilerimiz de aslında bir basit arama yapacağımız için ",[20,8987,2452],{}," adında bir fonksiyon oluşturuyoruz",[355,8990,8991],{"className":1834,"code":2455,"language":1836,"meta":364,"style":364},[362,8992,8993,8997,9001,9005,9009,9013],{"__ignoreMap":364},[1664,8994,8995],{"class":1666,"line":1667},[1664,8996,2462],{},[1664,8998,8999],{"class":1666,"line":778},[1664,9000,2467],{},[1664,9002,9003],{"class":1666,"line":781},[1664,9004,2472],{},[1664,9006,9007],{"class":1666,"line":1716},[1664,9008,2477],{},[1664,9010,9011],{"class":1666,"line":1722},[1664,9012,1926],{},[1664,9014,9015],{"class":1666,"line":1923},[1664,9016,2486],{},[888,9018,9020],{"id":9019},"vuejs-tensorflow-görüntü-sınıflandırma","📌 Vue.js TensorFlow Görüntü Sınıflandırma",[16,9022,9023,9024,9026],{},"Yazının önceki aşamalarında ",[20,9025,1555],{}," ve gereksinim hazırlıklarını yaptık. Şimdi daha kolay kısmına Front End (Ön Uç) kısmına geçiyoruz. 3 tane ana component oluşturacağız. İsterseniz tek olarakta yapabilirsiniz.",[16,9028,9029],{},[20,9030,2501],{},[47,9032,9033,9035,9037],{},[50,9034,2506],{},[50,9036,2509],{},[50,9038,2512],{},[16,9040,9041],{},[20,9042,2517],{},[47,9044,9045],{},[50,9046,2522],{},[16,9048,9049],{},"Öncelikli olarak ImageUpload.vue isminde bir component oluşturuyoruz.",[16,9051,9052],{},"İçerisine temel olarak işlevleri yerine getirebilecek bir tasarım oluşturuyoruz. Bu kısma ekstra olarak detay yada işlev eklemekte özgürüz. İsterseniz alt komponentlere de parçalayabilir daha efektif kod yazabilirsiniz 😛",[39,9054,9056],{"id":9055},"tasarım",[20,9057,9058],{},"Tasarım",[1815,9060],{"src":2539,"width":1818,"height":2540,"style":364,"frameBorder":1819,"className":9061,"allowFullScreen":806},[1821],[355,9063,9064],{"className":2544,"code":2545,"language":2546,"meta":364,"style":364},[362,9065,9066,9074,9092,9110,9146,9184,9192,9250,9296,9304],{"__ignoreMap":364},[1664,9067,9068,9070,9072],{"class":1666,"line":1667},[1664,9069,2553],{"class":2171},[1664,9071,2557],{"class":2556},[1664,9073,2560],{"class":2171},[1664,9075,9076,9078,9080,9082,9084,9086,9088,9090],{"class":1666,"line":778},[1664,9077,2565],{"class":2171},[1664,9079,1598],{"class":2556},[1664,9081,2570],{"class":2185},[1664,9083,2573],{"class":2171},[1664,9085,2189],{"class":2171},[1664,9087,2578],{"class":1674},[1664,9089,2189],{"class":2171},[1664,9091,2560],{"class":2171},[1664,9093,9094,9096,9098,9100,9102,9104,9106,9108],{"class":1666,"line":781},[1664,9095,2587],{"class":2171},[1664,9097,1598],{"class":2556},[1664,9099,2570],{"class":2185},[1664,9101,2573],{"class":2171},[1664,9103,2189],{"class":2171},[1664,9105,2598],{"class":1674},[1664,9107,2189],{"class":2171},[1664,9109,2560],{"class":2171},[1664,9111,9112,9114,9116,9118,9120,9122,9124,9126,9128,9130,9132,9134,9136,9138,9140,9142,9144],{"class":1666,"line":1716},[1664,9113,2607],{"class":2171},[1664,9115,1664],{"class":2556},[1664,9117,2612],{"class":2185},[1664,9119,2573],{"class":2171},[1664,9121,2189],{"class":2171},[1664,9123,2619],{"class":1674},[1664,9125,2189],{"class":2171},[1664,9127,2570],{"class":2185},[1664,9129,2573],{"class":2171},[1664,9131,2189],{"class":2171},[1664,9133,2630],{"class":1674},[1664,9135,2189],{"class":2171},[1664,9137,2635],{"class":2171},[1664,9139,2639],{"class":2638},[1664,9141,2642],{"class":2171},[1664,9143,1664],{"class":2556},[1664,9145,2560],{"class":2171},[1664,9147,9148,9150,9152,9154,9156,9158,9160,9162,9164,9166,9168,9170,9172,9174,9176,9178,9180,9182],{"class":1666,"line":1722},[1664,9149,2607],{"class":2171},[1664,9151,35],{"class":2556},[1664,9153,2655],{"class":2185},[1664,9155,2573],{"class":2171},[1664,9157,2189],{"class":2171},[1664,9159,2662],{"class":1674},[1664,9161,2189],{"class":2171},[1664,9163,2667],{"class":2185},[1664,9165,2573],{"class":2171},[1664,9167,2189],{"class":2171},[1664,9169,2674],{"class":1674},[1664,9171,2189],{"class":2171},[1664,9173,2570],{"class":2185},[1664,9175,2573],{"class":2171},[1664,9177,2189],{"class":2171},[1664,9179,2685],{"class":1674},[1664,9181,2189],{"class":2171},[1664,9183,2690],{"class":2171},[1664,9185,9186,9188,9190],{"class":1666,"line":1923},[1664,9187,2695],{"class":2171},[1664,9189,1598],{"class":2556},[1664,9191,2560],{"class":2171},[1664,9193,9194,9196,9198,9200,9202,9204,9206,9208,9210,9212,9214,9216,9218,9220,9222,9224,9226,9228,9230,9232,9234,9236,9238,9240,9242,9244,9246,9248],{"class":1666,"line":2032},[1664,9195,2587],{"class":2171},[1664,9197,2706],{"class":2556},[1664,9199,2709],{"class":2185},[1664,9201,2573],{"class":2171},[1664,9203,2189],{"class":2171},[1664,9205,2716],{"class":1674},[1664,9207,2189],{"class":2171},[1664,9209,2721],{"class":2185},[1664,9211,2573],{"class":2171},[1664,9213,2189],{"class":2171},[1664,9215,2728],{"class":1674},[1664,9217,2189],{"class":2171},[1664,9219,2570],{"class":2185},[1664,9221,2573],{"class":2171},[1664,9223,2189],{"class":2171},[1664,9225,2739],{"class":1674},[1664,9227,2189],{"class":2171},[1664,9229,2667],{"class":2185},[1664,9231,2573],{"class":2171},[1664,9233,2189],{"class":2171},[1664,9235,2750],{"class":1674},[1664,9237,2189],{"class":2171},[1664,9239,2755],{"class":2185},[1664,9241,2573],{"class":2171},[1664,9243,2189],{"class":2171},[1664,9245,2762],{"class":1674},[1664,9247,2189],{"class":2171},[1664,9249,2690],{"class":2171},[1664,9251,9252,9254,9256,9258,9260,9262,9264,9266,9268,9270,9272,9274,9276,9278,9280,9282,9284,9286,9288,9290,9292,9294],{"class":1666,"line":2038},[1664,9253,2587],{"class":2171},[1664,9255,2773],{"class":2556},[1664,9257,2570],{"class":2185},[1664,9259,2573],{"class":2171},[1664,9261,2189],{"class":2171},[1664,9263,2782],{"class":1674},[1664,9265,2189],{"class":2171},[1664,9267,2787],{"class":2185},[1664,9269,2573],{"class":2171},[1664,9271,2189],{"class":2171},[1664,9273,2794],{"class":1674},[1664,9275,2189],{"class":2171},[1664,9277,2799],{"class":2185},[1664,9279,2573],{"class":2171},[1664,9281,2189],{"class":2171},[1664,9283,2806],{"class":1674},[1664,9285,2189],{"class":2171},[1664,9287,2635],{"class":2171},[1664,9289,2813],{"class":2638},[1664,9291,2642],{"class":2171},[1664,9293,2773],{"class":2556},[1664,9295,2560],{"class":2171},[1664,9297,9298,9300,9302],{"class":1666,"line":2044},[1664,9299,2824],{"class":2171},[1664,9301,1598],{"class":2556},[1664,9303,2560],{"class":2171},[1664,9305,9306,9308,9310],{"class":1666,"line":2050},[1664,9307,2642],{"class":2171},[1664,9309,2557],{"class":2556},[1664,9311,2560],{"class":2171},[16,9313,9314],{},"Burada dışarıdan bir görsel alacağız. Ve bunu bir buton aracılıyla sınıflandırmasını tetikleyeceğiz.",[39,9316,9318],{"id":9317},"fonksiyonlar",[20,9319,9320],{},"Fonksiyonlar",[1815,9322],{"src":2848,"width":1818,"height":2849,"frameBorder":1819,"className":9323,"allowFullScreen":806},[1821],[16,9325,9326],{},"Bu aşamada tek tek kodu açıklamanın yazıyı uzatacağını düşündüğümden tüm kod kısmını sizlerle paylaşıp işlevlerini açıklayacağım.",[355,9328,9330],{"className":1834,"code":9329,"language":1836,"meta":364,"style":364},"import { ref, computed } from 'vue';\n\u002F\u002F tensorflowImageClassifier modülünden classifyImage ve loadModel fonksiyonlarını içeri aktarır\nimport { classifyImage, loadModel } from '@\u002Futils\u002FtensorflowImageClassifier';\n\u002F\u002F Görüntü sınıflandırma sonuçlarını tutan reaktif bir dizi oluşturur\nconst classificationResults = ref([]);\n\u002F\u002F Görüntü önizleme URL'sini tutan reaktif bir değişken oluşturur, başlangıçta placeholder bir URL ile ayarlanır\nconst previewImage = ref(\"\u003Chttps:\u002F\u002Fplacehold.co\u002F600x600>\");\n\u002F\u002F Görüntünün yüklenme durumunu takip eden reaktif bir boolean değişken oluşturur\nconst loadingImage = ref(false);\n\u002F\u002F Vue.js'in defineEmits fonksiyonu ile bileşen içinde kullanılacak özel olayları tanımlar\nconst emit = defineEmits(['getResult', 'getProducts']);\n\u002F\u002F Kullanıcının bir görüntü seçip seçmediğini kontrol eden hesaplanmış bir özellik oluşturur\nconst isImageSelected = computed(() => previewImage.value !== \"\u003Chttps:\u002F\u002Fplacehold.co\u002F600x600>\");\n\u002F\u002F Kullanıcının bir dosya seçtiğinde tetiklenecek olan olay işleyicisi fonksiyonu\nconst handleImageUpload = (event) => {\n  const file = event.target.files[0]; \u002F\u002F Seçilen dosyayı alır\n  const image = new Image(); \u002F\u002F Yeni bir HTML görüntü öğesi oluşturur\n  const reader = new FileReader(); \u002F\u002F Dosya okuma işlemleri için bir FileReader oluşturur\n\u002F\u002F Dosya okuma işlemi başladığında\n  reader.onloadstart = () => {\n    previewImage.value = previewImage; \u002F\u002F Önizleme görüntüsünü ayarlar (bu satırın doğru bir işlevi yok gibi görünüyor)\n    loadingImage.value = true; \u002F\u002F Görüntü yüklenme durumunu true olarak ayarlar\n  };\n  \u002F\u002F Dosya okuma işlemi tamamlandığında\n  reader.onloadend = () => {\n    loadingImage.value = false; \u002F\u002F Görüntü yüklenme durumunu false olarak ayarlar\n    image.src = reader.result; \u002F\u002F Görüntü öğesinin kaynağını okunan veriyle ayarlar\n    previewImage.value = reader.result; \u002F\u002F Önizleme görüntüsünü okunan veriyle ayarlar\n  };\n  \u002F\u002F Dosyayı base64 formatına dönüştürerek okuma işlemini başlatır\n  reader.readAsDataURL(file);\n};\n\u002F\u002F Görüntü sınıflandırma işlemini başlatan olay işleyicisi fonksiyonu\nconst processImage = async () => {\n  if (previewImage.value) { \u002F\u002F Eğer bir önizleme görüntüsü mevcutsa\n    const image = new Image(); \u002F\u002F Yeni bir HTML görüntü öğesi oluşturur\n    image.src = previewImage.value; \u002F\u002F Görüntü öğesinin kaynağını önizleme görüntüsü URL'si ile ayarlar\n    await loadModel(); \u002F\u002F TensorFlow modelini yükler\n    classificationResults.value = await classifyImage(image); \u002F\u002F Görüntüyü sınıflandırır ve sonuçları classificationResults'a atar\n    emit('getResult', classificationResults.value); \u002F\u002F 'getResult' olayını tetikler ve sonuçları üst düzey bileşenlere iletir\n    emit('getProducts', classificationResults.value); \u002F\u002F 'getProducts' olayını tetikler ve sonuçları üst düzey bileşenlere iletir\n  }\n};\n",[362,9331,9332,9336,9341,9345,9350,9354,9359,9363,9368,9372,9377,9381,9386,9390,9395,9399,9404,9409,9414,9419,9423,9428,9433,9437,9442,9446,9451,9456,9461,9465,9470,9474,9478,9483,9487,9492,9497,9502,9507,9512,9517,9522,9526],{"__ignoreMap":364},[1664,9333,9334],{"class":1666,"line":1667},[1664,9335,2863],{},[1664,9337,9338],{"class":1666,"line":778},[1664,9339,9340],{},"\u002F\u002F tensorflowImageClassifier modülünden classifyImage ve loadModel fonksiyonlarını içeri aktarır\n",[1664,9342,9343],{"class":1666,"line":781},[1664,9344,2873],{},[1664,9346,9347],{"class":1666,"line":1716},[1664,9348,9349],{},"\u002F\u002F Görüntü sınıflandırma sonuçlarını tutan reaktif bir dizi oluşturur\n",[1664,9351,9352],{"class":1666,"line":1722},[1664,9353,2883],{},[1664,9355,9356],{"class":1666,"line":1923},[1664,9357,9358],{},"\u002F\u002F Görüntü önizleme URL'sini tutan reaktif bir değişken oluşturur, başlangıçta placeholder bir URL ile ayarlanır\n",[1664,9360,9361],{"class":1666,"line":2032},[1664,9362,2893],{},[1664,9364,9365],{"class":1666,"line":2038},[1664,9366,9367],{},"\u002F\u002F Görüntünün yüklenme durumunu takip eden reaktif bir boolean değişken oluşturur\n",[1664,9369,9370],{"class":1666,"line":2044},[1664,9371,2903],{},[1664,9373,9374],{"class":1666,"line":2050},[1664,9375,9376],{},"\u002F\u002F Vue.js'in defineEmits fonksiyonu ile bileşen içinde kullanılacak özel olayları tanımlar\n",[1664,9378,9379],{"class":1666,"line":2056},[1664,9380,2913],{},[1664,9382,9383],{"class":1666,"line":2062},[1664,9384,9385],{},"\u002F\u002F Kullanıcının bir görüntü seçip seçmediğini kontrol eden hesaplanmış bir özellik oluşturur\n",[1664,9387,9388],{"class":1666,"line":2068},[1664,9389,2923],{},[1664,9391,9392],{"class":1666,"line":2074},[1664,9393,9394],{},"\u002F\u002F Kullanıcının bir dosya seçtiğinde tetiklenecek olan olay işleyicisi fonksiyonu\n",[1664,9396,9397],{"class":1666,"line":2080},[1664,9398,2933],{},[1664,9400,9401],{"class":1666,"line":2086},[1664,9402,9403],{},"  const file = event.target.files[0]; \u002F\u002F Seçilen dosyayı alır\n",[1664,9405,9406],{"class":1666,"line":2092},[1664,9407,9408],{},"  const image = new Image(); \u002F\u002F Yeni bir HTML görüntü öğesi oluşturur\n",[1664,9410,9411],{"class":1666,"line":2368},[1664,9412,9413],{},"  const reader = new FileReader(); \u002F\u002F Dosya okuma işlemleri için bir FileReader oluşturur\n",[1664,9415,9416],{"class":1666,"line":2388},[1664,9417,9418],{},"\u002F\u002F Dosya okuma işlemi başladığında\n",[1664,9420,9421],{"class":1666,"line":2408},[1664,9422,2958],{},[1664,9424,9425],{"class":1666,"line":2422},[1664,9426,9427],{},"    previewImage.value = previewImage; \u002F\u002F Önizleme görüntüsünü ayarlar (bu satırın doğru bir işlevi yok gibi görünüyor)\n",[1664,9429,9430],{"class":1666,"line":2428},[1664,9431,9432],{},"    loadingImage.value = true; \u002F\u002F Görüntü yüklenme durumunu true olarak ayarlar\n",[1664,9434,9435],{"class":1666,"line":2971},[1664,9436,2974],{},[1664,9438,9439],{"class":1666,"line":2977},[1664,9440,9441],{},"  \u002F\u002F Dosya okuma işlemi tamamlandığında\n",[1664,9443,9444],{"class":1666,"line":2983},[1664,9445,2986],{},[1664,9447,9448],{"class":1666,"line":2989},[1664,9449,9450],{},"    loadingImage.value = false; \u002F\u002F Görüntü yüklenme durumunu false olarak ayarlar\n",[1664,9452,9453],{"class":1666,"line":2995},[1664,9454,9455],{},"    image.src = reader.result; \u002F\u002F Görüntü öğesinin kaynağını okunan veriyle ayarlar\n",[1664,9457,9458],{"class":1666,"line":3001},[1664,9459,9460],{},"    previewImage.value = reader.result; \u002F\u002F Önizleme görüntüsünü okunan veriyle ayarlar\n",[1664,9462,9463],{"class":1666,"line":3007},[1664,9464,2974],{},[1664,9466,9467],{"class":1666,"line":3012},[1664,9468,9469],{},"  \u002F\u002F Dosyayı base64 formatına dönüştürerek okuma işlemini başlatır\n",[1664,9471,9472],{"class":1666,"line":3018},[1664,9473,3021],{},[1664,9475,9476],{"class":1666,"line":3024},[1664,9477,3027],{},[1664,9479,9480],{"class":1666,"line":3030},[1664,9481,9482],{},"\u002F\u002F Görüntü sınıflandırma işlemini başlatan olay işleyicisi fonksiyonu\n",[1664,9484,9485],{"class":1666,"line":3036},[1664,9486,3039],{},[1664,9488,9489],{"class":1666,"line":3042},[1664,9490,9491],{},"  if (previewImage.value) { \u002F\u002F Eğer bir önizleme görüntüsü mevcutsa\n",[1664,9493,9494],{"class":1666,"line":3048},[1664,9495,9496],{},"    const image = new Image(); \u002F\u002F Yeni bir HTML görüntü öğesi oluşturur\n",[1664,9498,9499],{"class":1666,"line":3054},[1664,9500,9501],{},"    image.src = previewImage.value; \u002F\u002F Görüntü öğesinin kaynağını önizleme görüntüsü URL'si ile ayarlar\n",[1664,9503,9504],{"class":1666,"line":3060},[1664,9505,9506],{},"    await loadModel(); \u002F\u002F TensorFlow modelini yükler\n",[1664,9508,9509],{"class":1666,"line":3066},[1664,9510,9511],{},"    classificationResults.value = await classifyImage(image); \u002F\u002F Görüntüyü sınıflandırır ve sonuçları classificationResults'a atar\n",[1664,9513,9514],{"class":1666,"line":3072},[1664,9515,9516],{},"    emit('getResult', classificationResults.value); \u002F\u002F 'getResult' olayını tetikler ve sonuçları üst düzey bileşenlere iletir\n",[1664,9518,9519],{"class":1666,"line":3078},[1664,9520,9521],{},"    emit('getProducts', classificationResults.value); \u002F\u002F 'getProducts' olayını tetikler ve sonuçları üst düzey bileşenlere iletir\n",[1664,9523,9524],{"class":1666,"line":3084},[1664,9525,2425],{},[1664,9527,9528],{"class":1666,"line":3089},[1664,9529,3027],{},[47,9531,9532,9537,9542,9550,9558,9563],{},[50,9533,9534,9536],{},[20,9535,3098],{},": Görüntü sınıflandırma sonuçlarımızı tutan bir dizi.",[50,9538,9539,9541],{},[20,9540,2662],{},": Kullanıcının yüklediği veya seçtiği görüntünün önizleme URL'sini tutan bir dize. Başlangıçta, placeholder bir URL ile başlıyor.",[50,9543,9544,9546,9547,9549],{},[20,9545,2619],{},": Görüntünün yüklenme durumunu tutan bir boolean değeri. Başlangıçta ",[20,9548,3112],{}," olarak ayarlı daha sonra bunu fonksiyon içerisinde durumunu güncelliyoruz.",[50,9551,9552,9554,9555,9557],{},[20,9553,3118],{},", kullanıcının bir görüntü seçip seçmediğini kontrol eden ve bu duruma göre \"",[120,9556,3122],{},"\" butonunun etkin veya etkisiz olmasına karar verecek olan computed fonksiyonumuz. Burada preview URL’sinden farklı bir durum oluşuyorsa durumunu kontrol ediyoruz.",[50,9559,9560,9562],{},[20,9561,2762],{},": Bu fonksiyon, kullanıcının bir dosya seçtiğinde tetiklenir. Seçilen dosyanın içeriğini okur ve önizleme için kullanılabilecek bir görüntüye dönüştürür. Ayrıca, yükleme işlemi sırasında bir yükleniyor öğesini de loadingImage değerini true yaptığımız için gösterir.",[50,9564,9565,9567,9568,9570,9571,9574,9575,9577,9578,9580],{},[20,9566,2794],{},": Bu fonksiyon, sınıflandırma işlemini başlatır. Eğer önizleme için bir görüntü mevcutsa, önceden yüklenmiş bir modeli yükler ve sınıflandırma sonuçlarını ",[20,9569,3098],{}," değişkenine atar. Ayrıca, ",[20,9572,9573],{},"emit"," “",[120,9576,3139],{},"” ve “",[120,9579,3142],{},"” ile sonuçları bir üst View’e iletiyoruz. Burada getProducts bilgisini bir üst katmanda mockup datamız içinden ürünümüzü bulmak için kullanacağız.",[16,9582,9583],{},"Son olarak sonuçları göstereceğimiz ve sepet componentimizi de oluşturuyoruz.",[16,9585,9586],{},[120,9587,9588],{},[20,9589,2509],{},[355,9591,9593],{"className":2544,"code":9592,"language":2546,"meta":364,"style":364},"\u003Cscript setup>\ndefineProps({\n  labels: Array\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"bg-white-800 dark:bg-gray-800 p-4 my-2 rounded shadow-md\">\n    \u003Ch2 class=\"text-2xl text-slate-600 dark:text-slate-400 font-bold mb-4\">Classification Result\u003C\u002Fh2>\n    \u003Cul>\n      \u003Cli v-for=\"(result, index) in labels\" :key=\"index\" class=\"mb-2 p-2 border rounded\">\n        \u003Cspan class=\"font-semibold text-slate-600 dark:text-slate-400\">{{ result.label }}\u003C\u002Fspan> - {{ (result.probability).toFixed(2) }}\n      \u003C\u002Fli>\n    \u003C\u002Ful>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[362,9594,9595,9605,9613,9621,9629,9637,9641,9649,9667,9693,9701,9739,9767,9775,9783,9791],{"__ignoreMap":364},[1664,9596,9597,9599,9601,9603],{"class":1666,"line":1667},[1664,9598,2553],{"class":2171},[1664,9600,3161],{"class":2556},[1664,9602,3164],{"class":2185},[1664,9604,2560],{"class":2171},[1664,9606,9607,9609,9611],{"class":1666,"line":778},[1664,9608,3172],{"class":3171},[1664,9610,3175],{"class":2638},[1664,9612,3178],{"class":2171},[1664,9614,9615,9617,9619],{"class":1666,"line":781},[1664,9616,3183],{"class":2556},[1664,9618,2192],{"class":2171},[1664,9620,3188],{"class":2638},[1664,9622,9623,9625,9627],{"class":1666,"line":1716},[1664,9624,3193],{"class":2171},[1664,9626,3196],{"class":2638},[1664,9628,3199],{"class":2171},[1664,9630,9631,9633,9635],{"class":1666,"line":1722},[1664,9632,2642],{"class":2171},[1664,9634,3161],{"class":2556},[1664,9636,2560],{"class":2171},[1664,9638,9639],{"class":1666,"line":1923},[1664,9640,3773],{"emptyLinePlaceholder":806},[1664,9642,9643,9645,9647],{"class":1666,"line":2032},[1664,9644,2553],{"class":2171},[1664,9646,2557],{"class":2556},[1664,9648,2560],{"class":2171},[1664,9650,9651,9653,9655,9657,9659,9661,9663,9665],{"class":1666,"line":2038},[1664,9652,2565],{"class":2171},[1664,9654,1598],{"class":2556},[1664,9656,2570],{"class":2185},[1664,9658,2573],{"class":2171},[1664,9660,2189],{"class":2171},[1664,9662,3230],{"class":1674},[1664,9664,2189],{"class":2171},[1664,9666,2560],{"class":2171},[1664,9668,9669,9671,9673,9675,9677,9679,9681,9683,9685,9687,9689,9691],{"class":1666,"line":2044},[1664,9670,2587],{"class":2171},[1664,9672,888],{"class":2556},[1664,9674,2570],{"class":2185},[1664,9676,2573],{"class":2171},[1664,9678,2189],{"class":2171},[1664,9680,3249],{"class":1674},[1664,9682,2189],{"class":2171},[1664,9684,2635],{"class":2171},[1664,9686,3256],{"class":2638},[1664,9688,2642],{"class":2171},[1664,9690,888],{"class":2556},[1664,9692,2560],{"class":2171},[1664,9694,9695,9697,9699],{"class":1666,"line":2050},[1664,9696,2587],{"class":2171},[1664,9698,47],{"class":2556},[1664,9700,2560],{"class":2171},[1664,9702,9703,9705,9707,9709,9711,9713,9715,9717,9719,9721,9723,9725,9727,9729,9731,9733,9735,9737],{"class":1666,"line":2056},[1664,9704,2607],{"class":2171},[1664,9706,50],{"class":2556},[1664,9708,3279],{"class":2185},[1664,9710,2573],{"class":2171},[1664,9712,2189],{"class":2171},[1664,9714,3286],{"class":1674},[1664,9716,2189],{"class":2171},[1664,9718,3291],{"class":2185},[1664,9720,2573],{"class":2171},[1664,9722,2189],{"class":2171},[1664,9724,3298],{"class":1674},[1664,9726,2189],{"class":2171},[1664,9728,2570],{"class":2185},[1664,9730,2573],{"class":2171},[1664,9732,2189],{"class":2171},[1664,9734,3309],{"class":1674},[1664,9736,2189],{"class":2171},[1664,9738,2560],{"class":2171},[1664,9740,9741,9743,9745,9747,9749,9751,9753,9755,9757,9759,9761,9763,9765],{"class":1666,"line":2062},[1664,9742,3318],{"class":2171},[1664,9744,1664],{"class":2556},[1664,9746,2570],{"class":2185},[1664,9748,2573],{"class":2171},[1664,9750,2189],{"class":2171},[1664,9752,3329],{"class":1674},[1664,9754,2189],{"class":2171},[1664,9756,2635],{"class":2171},[1664,9758,3336],{"class":2638},[1664,9760,2642],{"class":2171},[1664,9762,1664],{"class":2556},[1664,9764,2635],{"class":2171},[1664,9766,3345],{"class":2638},[1664,9768,9769,9771,9773],{"class":1666,"line":2068},[1664,9770,3350],{"class":2171},[1664,9772,50],{"class":2556},[1664,9774,2560],{"class":2171},[1664,9776,9777,9779,9781],{"class":1666,"line":2074},[1664,9778,2695],{"class":2171},[1664,9780,47],{"class":2556},[1664,9782,2560],{"class":2171},[1664,9784,9785,9787,9789],{"class":1666,"line":2080},[1664,9786,2824],{"class":2171},[1664,9788,1598],{"class":2556},[1664,9790,2560],{"class":2171},[1664,9792,9793,9795,9797],{"class":1666,"line":2086},[1664,9794,2642],{"class":2171},[1664,9796,2557],{"class":2556},[1664,9798,2560],{"class":2171},[16,9800,9801],{},"Componentimiz de yüksek oranlı 3 ihtimallerimizi ekrana göstereceğiz. Burada 3 tane olmasının sebebi classifyImage fonksiyonumuzda slice(0,3) ile en yüksek 3 değeri alıyor olmamızdan kaynaklı. Örnek olarak, slice(0,5) olsaydı en yüksek ilk 5 ihtimali görecektik.",[16,9803,9804],{},[120,9805,9806],{},[20,9807,2512],{},[355,9809,9810],{"className":2544,"code":3402,"language":2546,"meta":364,"style":364},[362,9811,9812,9822,9830,9838,9846,9854,9862,9880,9906,9944,9952,9978,9986,10004,10030,10038,10046,10054],{"__ignoreMap":364},[1664,9813,9814,9816,9818,9820],{"class":1666,"line":1667},[1664,9815,2553],{"class":2171},[1664,9817,3161],{"class":2556},[1664,9819,3164],{"class":2185},[1664,9821,2560],{"class":2171},[1664,9823,9824,9826,9828],{"class":1666,"line":778},[1664,9825,3172],{"class":3171},[1664,9827,3175],{"class":2638},[1664,9829,3178],{"class":2171},[1664,9831,9832,9834,9836],{"class":1666,"line":781},[1664,9833,3427],{"class":2556},[1664,9835,2192],{"class":2171},[1664,9837,3188],{"class":2638},[1664,9839,9840,9842,9844],{"class":1666,"line":1716},[1664,9841,3193],{"class":2171},[1664,9843,3196],{"class":2638},[1664,9845,3199],{"class":2171},[1664,9847,9848,9850,9852],{"class":1666,"line":1722},[1664,9849,2642],{"class":2171},[1664,9851,3161],{"class":2556},[1664,9853,2560],{"class":2171},[1664,9855,9856,9858,9860],{"class":1666,"line":1923},[1664,9857,2553],{"class":2171},[1664,9859,2557],{"class":2556},[1664,9861,2560],{"class":2171},[1664,9863,9864,9866,9868,9870,9872,9874,9876,9878],{"class":1666,"line":2032},[1664,9865,2565],{"class":2171},[1664,9867,1598],{"class":2556},[1664,9869,2570],{"class":2185},[1664,9871,2573],{"class":2171},[1664,9873,2189],{"class":2171},[1664,9875,3470],{"class":1674},[1664,9877,2189],{"class":2171},[1664,9879,2560],{"class":2171},[1664,9881,9882,9884,9886,9888,9890,9892,9894,9896,9898,9900,9902,9904],{"class":1666,"line":2038},[1664,9883,2587],{"class":2171},[1664,9885,888],{"class":2556},[1664,9887,2570],{"class":2185},[1664,9889,2573],{"class":2171},[1664,9891,2189],{"class":2171},[1664,9893,3489],{"class":1674},[1664,9895,2189],{"class":2171},[1664,9897,2635],{"class":2171},[1664,9899,3496],{"class":2638},[1664,9901,2642],{"class":2171},[1664,9903,888],{"class":2556},[1664,9905,2560],{"class":2171},[1664,9907,9908,9910,9912,9914,9916,9918,9920,9922,9924,9926,9928,9930,9932,9934,9936,9938,9940,9942],{"class":1666,"line":2044},[1664,9909,2587],{"class":2171},[1664,9911,1598],{"class":2556},[1664,9913,2570],{"class":2185},[1664,9915,2573],{"class":2171},[1664,9917,2189],{"class":2171},[1664,9919,3517],{"class":1674},[1664,9921,2189],{"class":2171},[1664,9923,3279],{"class":2185},[1664,9925,2573],{"class":2171},[1664,9927,2189],{"class":2171},[1664,9929,3528],{"class":1674},[1664,9931,2189],{"class":2171},[1664,9933,3291],{"class":2185},[1664,9935,2573],{"class":2171},[1664,9937,2189],{"class":2171},[1664,9939,3539],{"class":1674},[1664,9941,2189],{"class":2171},[1664,9943,2560],{"class":2171},[1664,9945,9946,9948,9950],{"class":1666,"line":2050},[1664,9947,2607],{"class":2171},[1664,9949,1598],{"class":2556},[1664,9951,2560],{"class":2171},[1664,9953,9954,9956,9958,9960,9962,9964,9966,9968,9970,9972,9974,9976],{"class":1666,"line":2056},[1664,9955,3318],{"class":2171},[1664,9957,39],{"class":2556},[1664,9959,2570],{"class":2185},[1664,9961,2573],{"class":2171},[1664,9963,2189],{"class":2171},[1664,9965,3566],{"class":1674},[1664,9967,2189],{"class":2171},[1664,9969,2635],{"class":2171},[1664,9971,3573],{"class":2638},[1664,9973,2642],{"class":2171},[1664,9975,39],{"class":2556},[1664,9977,2560],{"class":2171},[1664,9979,9980,9982,9984],{"class":1666,"line":2062},[1664,9981,3350],{"class":2171},[1664,9983,1598],{"class":2556},[1664,9985,2560],{"class":2171},[1664,9987,9988,9990,9992,9994,9996,9998,10000,10002],{"class":1666,"line":2068},[1664,9989,2607],{"class":2171},[1664,9991,1598],{"class":2556},[1664,9993,2570],{"class":2185},[1664,9995,2573],{"class":2171},[1664,9997,2189],{"class":2171},[1664,9999,3602],{"class":1674},[1664,10001,2189],{"class":2171},[1664,10003,2560],{"class":2171},[1664,10005,10006,10008,10010,10012,10014,10016,10018,10020,10022,10024,10026,10028],{"class":1666,"line":2074},[1664,10007,3318],{"class":2171},[1664,10009,1664],{"class":2556},[1664,10011,2570],{"class":2185},[1664,10013,2573],{"class":2171},[1664,10015,2189],{"class":2171},[1664,10017,3621],{"class":1674},[1664,10019,2189],{"class":2171},[1664,10021,2635],{"class":2171},[1664,10023,3628],{"class":2638},[1664,10025,2642],{"class":2171},[1664,10027,1664],{"class":2556},[1664,10029,2560],{"class":2171},[1664,10031,10032,10034,10036],{"class":1666,"line":2080},[1664,10033,3350],{"class":2171},[1664,10035,1598],{"class":2556},[1664,10037,2560],{"class":2171},[1664,10039,10040,10042,10044],{"class":1666,"line":2086},[1664,10041,2695],{"class":2171},[1664,10043,1598],{"class":2556},[1664,10045,2560],{"class":2171},[1664,10047,10048,10050,10052],{"class":1666,"line":2092},[1664,10049,2824],{"class":2171},[1664,10051,1598],{"class":2556},[1664,10053,2560],{"class":2171},[1664,10055,10056,10058,10060],{"class":1666,"line":2368},[1664,10057,2642],{"class":2171},[1664,10059,2557],{"class":2556},[1664,10061,2560],{"class":2171},[16,10063,10064],{},"Bu componentimiz de ise temel senaryomuzun çıkış noktası olan ürünü bulduktan sonra ve bunu sepete eklediğimiz senaryoyu içeriyor. Burada bir üst katmanımız olan HomeView.vue katmanında ürünü bulup bu componentimize bilgilerini gönderip gösterimini yapıyoruz.",[16,10066,10067],{},[120,10068,10069],{},[20,10070,2522],{},[355,10072,10073],{"className":2544,"code":3681,"language":2546,"meta":364,"style":364},[362,10074,10075,10085,10103,10117,10131,10145,10149,10161,10173,10191,10205,10209,10227,10239,10243,10251,10259,10287,10315,10343],{"__ignoreMap":364},[1664,10076,10077,10079,10081,10083],{"class":1666,"line":1667},[1664,10078,2553],{"class":2171},[1664,10080,3161],{"class":2556},[1664,10082,3164],{"class":2185},[1664,10084,2560],{"class":2171},[1664,10086,10087,10089,10091,10093,10095,10097,10099,10101],{"class":1666,"line":778},[1664,10088,3699],{"class":3698},[1664,10090,3702],{"class":2171},[1664,10092,3705],{"class":2638},[1664,10094,3708],{"class":2171},[1664,10096,3711],{"class":3698},[1664,10098,3714],{"class":2171},[1664,10100,2546],{"class":1674},[1664,10102,3719],{"class":2171},[1664,10104,10105,10107,10109,10111,10113,10115],{"class":1666,"line":781},[1664,10106,3699],{"class":3698},[1664,10108,3726],{"class":2638},[1664,10110,3729],{"class":3698},[1664,10112,3714],{"class":2171},[1664,10114,3734],{"class":1674},[1664,10116,3719],{"class":2171},[1664,10118,10119,10121,10123,10125,10127,10129],{"class":1666,"line":1716},[1664,10120,3699],{"class":3698},[1664,10122,3743],{"class":2638},[1664,10124,3729],{"class":3698},[1664,10126,3714],{"class":2171},[1664,10128,3750],{"class":1674},[1664,10130,3719],{"class":2171},[1664,10132,10133,10135,10137,10139,10141,10143],{"class":1666,"line":1722},[1664,10134,3699],{"class":3698},[1664,10136,3759],{"class":2638},[1664,10138,3729],{"class":3698},[1664,10140,3714],{"class":2171},[1664,10142,3766],{"class":1674},[1664,10144,3719],{"class":2171},[1664,10146,10147],{"class":1666,"line":1923},[1664,10148,3773],{"emptyLinePlaceholder":806},[1664,10150,10151,10153,10155,10157,10159],{"class":1666,"line":2032},[1664,10152,3778],{"class":2185},[1664,10154,3781],{"class":2638},[1664,10156,2573],{"class":2171},[1664,10158,3705],{"class":3171},[1664,10160,3788],{"class":2638},[1664,10162,10163,10165,10167,10169,10171],{"class":1666,"line":2038},[1664,10164,3778],{"class":2185},[1664,10166,3795],{"class":2638},[1664,10168,2573],{"class":2171},[1664,10170,3705],{"class":3171},[1664,10172,3788],{"class":2638},[1664,10174,10175,10177,10179,10181,10183,10185,10187,10189],{"class":1666,"line":2044},[1664,10176,3778],{"class":2185},[1664,10178,3808],{"class":2638},[1664,10180,2573],{"class":2171},[1664,10182,3813],{"class":2171},[1664,10184,3817],{"class":3816},[1664,10186,3196],{"class":2171},[1664,10188,3822],{"class":2185},[1664,10190,3825],{"class":2171},[1664,10192,10193,10195,10197,10199,10201,10203],{"class":1666,"line":2050},[1664,10194,3830],{"class":2638},[1664,10196,883],{"class":2171},[1664,10198,3835],{"class":2638},[1664,10200,3838],{"class":2171},[1664,10202,3841],{"class":2638},[1664,10204,3199],{"class":2171},[1664,10206,10207],{"class":1666,"line":2056},[1664,10208,1926],{"class":2171},[1664,10210,10211,10213,10215,10217,10219,10221,10223,10225],{"class":1666,"line":2062},[1664,10212,3778],{"class":2185},[1664,10214,3854],{"class":2638},[1664,10216,2573],{"class":2171},[1664,10218,3813],{"class":2171},[1664,10220,3817],{"class":3816},[1664,10222,3196],{"class":2171},[1664,10224,3822],{"class":2185},[1664,10226,3825],{"class":2171},[1664,10228,10229,10231,10233,10235,10237],{"class":1666,"line":2068},[1664,10230,3427],{"class":2638},[1664,10232,883],{"class":2171},[1664,10234,3835],{"class":2638},[1664,10236,3838],{"class":2171},[1664,10238,3879],{"class":2638},[1664,10240,10241],{"class":1666,"line":2074},[1664,10242,3027],{"class":2171},[1664,10244,10245,10247,10249],{"class":1666,"line":2080},[1664,10246,2642],{"class":2171},[1664,10248,3161],{"class":2556},[1664,10250,2560],{"class":2171},[1664,10252,10253,10255,10257],{"class":1666,"line":2086},[1664,10254,2553],{"class":2171},[1664,10256,2557],{"class":2556},[1664,10258,2560],{"class":2171},[1664,10260,10261,10263,10265,10267,10269,10271,10273,10275,10277,10279,10281,10283,10285],{"class":1666,"line":2092},[1664,10262,2565],{"class":2171},[1664,10264,3906],{"class":2556},[1664,10266,3909],{"class":2185},[1664,10268,2573],{"class":2171},[1664,10270,2189],{"class":2171},[1664,10272,3139],{"class":1674},[1664,10274,2189],{"class":2171},[1664,10276,3920],{"class":2185},[1664,10278,2573],{"class":2171},[1664,10280,2189],{"class":2171},[1664,10282,3142],{"class":1674},[1664,10284,2189],{"class":2171},[1664,10286,2690],{"class":2171},[1664,10288,10289,10291,10293,10295,10297,10299,10301,10303,10305,10307,10309,10311,10313],{"class":1666,"line":2368},[1664,10290,2565],{"class":2171},[1664,10292,3937],{"class":2556},[1664,10294,2612],{"class":2185},[1664,10296,2573],{"class":2171},[1664,10298,2189],{"class":2171},[1664,10300,3946],{"class":1674},[1664,10302,2189],{"class":2171},[1664,10304,3951],{"class":2185},[1664,10306,2573],{"class":2171},[1664,10308,2189],{"class":2171},[1664,10310,3098],{"class":1674},[1664,10312,2189],{"class":2171},[1664,10314,2690],{"class":2171},[1664,10316,10317,10319,10321,10323,10325,10327,10329,10331,10333,10335,10337,10339,10341],{"class":1666,"line":2388},[1664,10318,2565],{"class":2171},[1664,10320,3968],{"class":2556},[1664,10322,2612],{"class":2185},[1664,10324,2573],{"class":2171},[1664,10326,2189],{"class":2171},[1664,10328,3946],{"class":1674},[1664,10330,2189],{"class":2171},[1664,10332,3981],{"class":2185},[1664,10334,2573],{"class":2171},[1664,10336,2189],{"class":2171},[1664,10338,3988],{"class":1674},[1664,10340,2189],{"class":2171},[1664,10342,2690],{"class":2171},[1664,10344,10345,10347,10349],{"class":1666,"line":2408},[1664,10346,2642],{"class":2171},[1664,10348,2557],{"class":2556},[1664,10350,2560],{"class":2171},[16,10352,10353,10354,10356,10357,10360,10361,10365],{},"Ve componentlerimizi ",[20,10355,2522],{},"’de çağırdıktan sonra görselimizde ki görünümü elde ediyoruz. Eğer ki görünümünüz de farkılıklar yada eksik anlatılmış yerler var ise ",[53,10358,4011],{"href":4009,"rel":10359},[57]," repo üzerinden kontrol edebilir. Yada direkt olarak repoyu bilgisayarınıza indirebilirsiniz. Veya isterseniz ",[53,10362,10364],{"href":4015,"rel":10363},[57],"TF.js with Vue3 Vercel"," üzerinden deneyebilirsiniz.",[16,10367,10368],{},[35,10369],{"alt":10370,"src":4023},"TensorFlow.js Sayfa Gösterimi",[16,10372,10373,10374,10377],{},"Tüm bu aşamaları tamamladığımıza göre gelelim projemizi test etmeye. Ben örnek olarak Google’a “",[120,10375,10376],{},"French Loaf","” yazarak çıkan görsellerinden birisini tercih ettim çünkü ImageNet etiketlerinin içerisinde mevcut. Ve Mockup Datamız içerisinde tanımlamasını yaptık.",[16,10379,10380],{},[35,10381],{"alt":10382,"src":4039},"TensorFlow.js Sınıflandıma",[16,10384,10385,10386,10388],{},"Resmimizi seçip yükledikten sonra “",[120,10387,4045],{},"” butonumuza basıyoruz. Ve yüksek oranlı ilk 3 tahminimizi gösteriyoruz ve sepetimize ürünü otomatik olarak ekliyoruz.",[1815,10390],{"src":4049,"width":1818,"height":1818,"style":364,"frameBorder":1819,"className":10391,"allowFullScreen":806},[1821],[16,10393,10394],{},[35,10395],{"alt":10396,"src":4056},"TensorFlow.js Sonuçlar",[16,10398,10399,10400,10402],{},"Gördüğümüz üzere projede ",[20,10401,1555],{}," kullanarak basit bir Nesne Tanımlama ve Sepete ekleme senaryosunu gerçekleştirdik. Ve bu sayede aslında nasıl basit bir şekilde yapay zeka ve araçlarını projelerimize yada günlük senaryolarımıza nasıl ekleyebileceğimizi görmüş olduk.",[16,10404,10405,10406,10408],{},"Bu yazımda ",[20,10407,1555],{}," kullanımı, kurulumunun basit bir senaryo ile nasıl faydalı olacağına dair örnekler yaparak sizlere anlatmaya çalıştım.",[16,10410,10411,10415,10416,10419,10420,4084],{},[53,10412,200],{"href":10413,"rel":10414},"https:\u002F\u002Fmedium.com\u002F@eralpozcan\u002Ftensorflow-js-ve-vue-3-ile-nesne-s%C4%B1n%C4%B1fland%C4%B1rma-nas%C4%B1l-yap%C4%B1l%C4%B1r-999cdcdce9d9",[57]," yazımı okuduktan sonra ",[53,10417,749],{"href":747,"rel":10418},[57]," hesabımdan sorularınız yada önerileriniz var ise ulaşabilirsiniz. Diğer hesaplarım için ise ",[53,10421,755],{"href":753,"rel":10422},[57],[16,10424,10425],{},"Bir sonraki yazımda görüşmek üzere 📩",[4088,10427,4090],{},{"title":364,"searchDepth":778,"depth":778,"links":10429},[10430,10431,10433,10434,10435,10436,10437],{"id":8298,"depth":781,"text":8301},{"id":8372,"depth":781,"text":10432},"📌Opsiyonel Yükleme",{"id":8438,"depth":778,"text":8439},{"id":8482,"depth":778,"text":8483},{"id":8579,"depth":778,"text":8580},{"id":8706,"depth":778,"text":8707},{"id":9019,"depth":778,"text":9020,"children":10438},[10439,10440],{"id":9055,"depth":781,"text":9058},{"id":9317,"depth":781,"text":9320},"Son yıllarda çok aktif olarak yapay zeka ve bunun ürünleri hayatımızda yer etmeye başladı ve giderek bunların da sayısı artıyor. Hepimizin aklında bunu nasıl hayatımda kullanabilirim sorusu mevcut, bu yazıda sizlerle beraber TensorFlow.js ile ImageNet sınıflarını ve MobileNet-v2 modelini kullanarak basit bir obje\u002Fnesne tanıyan ve bunu sepete ekleyen bir uygulama yapacağız. Böylelikle Amazon Go’nun temel çalışma prensibinde bir senaryosunu da gerçekleştirmiş olacağız. Hadi başlayalım 🚀",{"card_description":10443,"cover":4110,"language":4688,"links":10444},"Yapay zeka günlük hayatımıza giderek daha fazla entegre oluyor ve pratik kullanım alanları ortaya çıkıyor. Bu yazıda, TensorFlow.js ve MobileNet-v2 modeli kullanarak nesneleri tanıyan ve sepete ekleyen basit bir uygulama nasıl yapılacağını göstereceğim. Amazon Go'yu taklit eden bir deneyim yaşayalım. Başlıyoruz! 🚀",[10445],{"medium":10413},"\u002Fblog\u002Ftensorflow-js-ve-vue-3-ile-nesne-siniflandirma-nasil-yapilir",{"title":8225,"description":10441},{"loc":10449,"lastmod":4106,"changefreq":812,"priority":813},"http:\u002F\u002Feralpozcan.dev\u002Fblog\u002Ftensorflow-js-ve-vue-3-ile-nesne-sınıflandırma-nasıl-yapılır","blog\u002Ftensorflow-js-ve-vue-3-ile-nesne-sınıflandırma-nasıl-yapılır",[1555,4123,10452,4125,10453,4127,4128],"Makine Öğrenmesi","Nesne Tanıma","F4aVV3fxJSdlvPH6Jbf1DjnIM7wTZykexnsw3oXpMK0",{"id":10456,"title":10457,"body":10458,"date":12455,"description":12456,"extension":796,"image":797,"meta":12457,"navigation":806,"ogImage":797,"path":12459,"readingTime":12460,"robots":797,"schemaOrg":797,"seo":12461,"sitemap":12462,"stem":12463,"tags":12464,"__hash__":12466},"blog\u002Fblog\u002Fvue-js-composition-api-rehberi.md","Vue.js Composition API: Kapsamlı Rehber",{"type":8,"value":10459,"toc":12435},[10460,10463,10466,10470,10473,10477,10503,10507,10511,10518,10750,10754,10761,10935,10939,10943,10949,10992,10998,11051,11055,11060,11102,11107,11167,11171,11178,11261,11265,11268,11351,11354,11435,11439,12357,12359,12395,12397,12400,12402,12425,12427,12432],[11,10461,10457],{"id":10462},"vuejs-composition-api-kapsamlı-rehber",[16,10464,10465],{},"Vue 3 ile birlikte gelen Composition API, Vue.js'de component logic'i organize etmenin yeni ve güçlü bir yolunu sunuyor. Bu yazıda Composition API'nin temellerinden ileri seviye kullanımına kadar her şeyi ele alacağız.",[888,10467,10469],{"id":10468},"composition-api-nedir","Composition API Nedir?",[16,10471,10472],{},"Composition API, Vue bileşenlerinde mantığı organize etmek için function-based bir yaklaşım sunar. Options API'ye alternatif olarak geliştirilmiş ve özellikle büyük projelerde kod tekrarını azaltır ve mantığı daha iyi organize etmeyi sağlar.",[39,10474,10476],{"id":10475},"temel-avantajları","Temel Avantajları",[47,10478,10479,10485,10491,10497],{},[50,10480,10481,10484],{},[20,10482,10483],{},"Daha İyi Logic Reuse",": Mantığı farklı bileşenler arasında kolayca paylaşabilirsiniz",[50,10486,10487,10490],{},[20,10488,10489],{},"TypeScript Desteği",": Daha iyi tip güvenliği",[50,10492,10493,10496],{},[20,10494,10495],{},"Daha Esnek Organizasyon",": İlgili mantığı bir arada tutabilirsiniz",[50,10498,10499,10502],{},[20,10500,10501],{},"Tree-shaking",": Kullanılmayan kodları otomatik olarak temizler",[888,10504,10506],{"id":10505},"temel-kullanım","Temel Kullanım",[39,10508,10510],{"id":10509},"setup-fonksiyonu","setup() Fonksiyonu",[16,10512,10513,10514,10517],{},"Composition API'nin kalbi ",[362,10515,10516],{},"setup()"," fonksiyonudur:",[355,10519,10521],{"className":2544,"code":10520,"language":2546,"meta":364,"style":364},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cp>{{ count }}\u003C\u002Fp>\n    \u003Cbutton @click=\"increment\">Artır\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nimport { ref } from 'vue'\n\nexport default {\n  setup() {\n    const count = ref(0)\n    \n    const increment = () => {\n      count.value++\n    }\n    \n    return {\n      count,\n      increment\n    }\n  }\n}\n\u003C\u002Fscript>\n",[362,10522,10523,10531,10539,10556,10584,10592,10600,10604,10612,10630,10634,10642,10652,10670,10675,10691,10703,10708,10712,10719,10725,10730,10734,10738,10742],{"__ignoreMap":364},[1664,10524,10525,10527,10529],{"class":1666,"line":1667},[1664,10526,2553],{"class":2171},[1664,10528,2557],{"class":2556},[1664,10530,2560],{"class":2171},[1664,10532,10533,10535,10537],{"class":1666,"line":778},[1664,10534,2565],{"class":2171},[1664,10536,1598],{"class":2556},[1664,10538,2560],{"class":2171},[1664,10540,10541,10543,10545,10547,10550,10552,10554],{"class":1666,"line":781},[1664,10542,2587],{"class":2171},[1664,10544,16],{"class":2556},[1664,10546,2635],{"class":2171},[1664,10548,10549],{"class":2638},"{{ count }}",[1664,10551,2642],{"class":2171},[1664,10553,16],{"class":2556},[1664,10555,2560],{"class":2171},[1664,10557,10558,10560,10562,10564,10566,10568,10571,10573,10575,10578,10580,10582],{"class":1666,"line":1716},[1664,10559,2587],{"class":2171},[1664,10561,2773],{"class":2556},[1664,10563,2787],{"class":2185},[1664,10565,2573],{"class":2171},[1664,10567,2189],{"class":2171},[1664,10569,10570],{"class":1674},"increment",[1664,10572,2189],{"class":2171},[1664,10574,2635],{"class":2171},[1664,10576,10577],{"class":2638},"Artır",[1664,10579,2642],{"class":2171},[1664,10581,2773],{"class":2556},[1664,10583,2560],{"class":2171},[1664,10585,10586,10588,10590],{"class":1666,"line":1722},[1664,10587,2824],{"class":2171},[1664,10589,1598],{"class":2556},[1664,10591,2560],{"class":2171},[1664,10593,10594,10596,10598],{"class":1666,"line":1923},[1664,10595,2642],{"class":2171},[1664,10597,2557],{"class":2556},[1664,10599,2560],{"class":2171},[1664,10601,10602],{"class":1666,"line":2032},[1664,10603,3773],{"emptyLinePlaceholder":806},[1664,10605,10606,10608,10610],{"class":1666,"line":2038},[1664,10607,2553],{"class":2171},[1664,10609,3161],{"class":2556},[1664,10611,2560],{"class":2171},[1664,10613,10614,10616,10618,10620,10622,10624,10626,10628],{"class":1666,"line":2044},[1664,10615,3699],{"class":3698},[1664,10617,3702],{"class":2171},[1664,10619,3705],{"class":2638},[1664,10621,3708],{"class":2171},[1664,10623,3711],{"class":3698},[1664,10625,3714],{"class":2171},[1664,10627,2546],{"class":1674},[1664,10629,3719],{"class":2171},[1664,10631,10632],{"class":1666,"line":2050},[1664,10633,3773],{"emptyLinePlaceholder":806},[1664,10635,10636,10638,10640],{"class":1666,"line":2056},[1664,10637,5027],{"class":3698},[1664,10639,5030],{"class":3698},[1664,10641,3825],{"class":2171},[1664,10643,10644,10647,10650],{"class":1666,"line":2062},[1664,10645,10646],{"class":2556},"  setup",[1664,10648,10649],{"class":2171},"()",[1664,10651,3825],{"class":2171},[1664,10653,10654,10657,10660,10662,10664,10666,10668],{"class":1666,"line":2068},[1664,10655,10656],{"class":2185},"    const",[1664,10658,10659],{"class":2638}," count",[1664,10661,3838],{"class":2171},[1664,10663,3705],{"class":3171},[1664,10665,3175],{"class":2556},[1664,10667,1819],{"class":2237},[1664,10669,5089],{"class":2556},[1664,10671,10672],{"class":1666,"line":2074},[1664,10673,10674],{"class":2556},"    \n",[1664,10676,10677,10679,10682,10684,10687,10689],{"class":1666,"line":2080},[1664,10678,10656],{"class":2185},[1664,10680,10681],{"class":2638}," increment",[1664,10683,3838],{"class":2171},[1664,10685,10686],{"class":2171}," ()",[1664,10688,3822],{"class":2185},[1664,10690,3825],{"class":2171},[1664,10692,10693,10696,10698,10700],{"class":1666,"line":2086},[1664,10694,10695],{"class":2638},"      count",[1664,10697,883],{"class":2171},[1664,10699,3835],{"class":2638},[1664,10701,10702],{"class":2171},"++\n",[1664,10704,10705],{"class":1666,"line":2092},[1664,10706,10707],{"class":2171},"    }\n",[1664,10709,10710],{"class":1666,"line":2368},[1664,10711,10674],{"class":2556},[1664,10713,10714,10717],{"class":1666,"line":2388},[1664,10715,10716],{"class":3698},"    return",[1664,10718,3825],{"class":2171},[1664,10720,10721,10723],{"class":1666,"line":2408},[1664,10722,10695],{"class":2638},[1664,10724,2203],{"class":2171},[1664,10726,10727],{"class":1666,"line":2422},[1664,10728,10729],{"class":2638},"      increment\n",[1664,10731,10732],{"class":1666,"line":2428},[1664,10733,10707],{"class":2171},[1664,10735,10736],{"class":1666,"line":2971},[1664,10737,2425],{"class":2171},[1664,10739,10740],{"class":1666,"line":2977},[1664,10741,1926],{"class":2171},[1664,10743,10744,10746,10748],{"class":1666,"line":2983},[1664,10745,2642],{"class":2171},[1664,10747,3161],{"class":2556},[1664,10749,2560],{"class":2171},[39,10751,10753],{"id":10752},"script-setup-syntax","Script Setup Syntax",[16,10755,10756,10757,10760],{},"Daha kısa syntax için ",[362,10758,10759],{},"\u003Cscript setup>"," kullanabilirsiniz:",[355,10762,10764],{"className":2544,"code":10763,"language":2546,"meta":364,"style":364},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cp>{{ count }}\u003C\u002Fp>\n    \u003Cbutton @click=\"increment\">Artır\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst count = ref(0)\n\nconst increment = () => {\n  count.value++\n}\n\u003C\u002Fscript>\n",[362,10765,10766,10774,10782,10798,10824,10832,10840,10844,10854,10872,10876,10893,10897,10912,10923,10927],{"__ignoreMap":364},[1664,10767,10768,10770,10772],{"class":1666,"line":1667},[1664,10769,2553],{"class":2171},[1664,10771,2557],{"class":2556},[1664,10773,2560],{"class":2171},[1664,10775,10776,10778,10780],{"class":1666,"line":778},[1664,10777,2565],{"class":2171},[1664,10779,1598],{"class":2556},[1664,10781,2560],{"class":2171},[1664,10783,10784,10786,10788,10790,10792,10794,10796],{"class":1666,"line":781},[1664,10785,2587],{"class":2171},[1664,10787,16],{"class":2556},[1664,10789,2635],{"class":2171},[1664,10791,10549],{"class":2638},[1664,10793,2642],{"class":2171},[1664,10795,16],{"class":2556},[1664,10797,2560],{"class":2171},[1664,10799,10800,10802,10804,10806,10808,10810,10812,10814,10816,10818,10820,10822],{"class":1666,"line":1716},[1664,10801,2587],{"class":2171},[1664,10803,2773],{"class":2556},[1664,10805,2787],{"class":2185},[1664,10807,2573],{"class":2171},[1664,10809,2189],{"class":2171},[1664,10811,10570],{"class":1674},[1664,10813,2189],{"class":2171},[1664,10815,2635],{"class":2171},[1664,10817,10577],{"class":2638},[1664,10819,2642],{"class":2171},[1664,10821,2773],{"class":2556},[1664,10823,2560],{"class":2171},[1664,10825,10826,10828,10830],{"class":1666,"line":1722},[1664,10827,2824],{"class":2171},[1664,10829,1598],{"class":2556},[1664,10831,2560],{"class":2171},[1664,10833,10834,10836,10838],{"class":1666,"line":1923},[1664,10835,2642],{"class":2171},[1664,10837,2557],{"class":2556},[1664,10839,2560],{"class":2171},[1664,10841,10842],{"class":1666,"line":2032},[1664,10843,3773],{"emptyLinePlaceholder":806},[1664,10845,10846,10848,10850,10852],{"class":1666,"line":2038},[1664,10847,2553],{"class":2171},[1664,10849,3161],{"class":2556},[1664,10851,3164],{"class":2185},[1664,10853,2560],{"class":2171},[1664,10855,10856,10858,10860,10862,10864,10866,10868,10870],{"class":1666,"line":2044},[1664,10857,3699],{"class":3698},[1664,10859,3702],{"class":2171},[1664,10861,3705],{"class":2638},[1664,10863,3708],{"class":2171},[1664,10865,3711],{"class":3698},[1664,10867,3714],{"class":2171},[1664,10869,2546],{"class":1674},[1664,10871,3719],{"class":2171},[1664,10873,10874],{"class":1666,"line":2050},[1664,10875,3773],{"emptyLinePlaceholder":806},[1664,10877,10878,10880,10883,10885,10887,10889,10891],{"class":1666,"line":2056},[1664,10879,3778],{"class":2185},[1664,10881,10882],{"class":2638}," count ",[1664,10884,2573],{"class":2171},[1664,10886,3705],{"class":3171},[1664,10888,3175],{"class":2638},[1664,10890,1819],{"class":2237},[1664,10892,5089],{"class":2638},[1664,10894,10895],{"class":1666,"line":2062},[1664,10896,3773],{"emptyLinePlaceholder":806},[1664,10898,10899,10901,10904,10906,10908,10910],{"class":1666,"line":2068},[1664,10900,3778],{"class":2185},[1664,10902,10903],{"class":2638}," increment ",[1664,10905,2573],{"class":2171},[1664,10907,10686],{"class":2171},[1664,10909,3822],{"class":2185},[1664,10911,3825],{"class":2171},[1664,10913,10914,10917,10919,10921],{"class":1666,"line":2074},[1664,10915,10916],{"class":2638},"  count",[1664,10918,883],{"class":2171},[1664,10920,3835],{"class":2638},[1664,10922,10702],{"class":2171},[1664,10924,10925],{"class":1666,"line":2080},[1664,10926,1926],{"class":2171},[1664,10928,10929,10931,10933],{"class":1666,"line":2086},[1664,10930,2642],{"class":2171},[1664,10932,3161],{"class":2556},[1664,10934,2560],{"class":2171},[888,10936,10938],{"id":10937},"reactivity-fundamentals","Reactivity Fundamentals",[39,10940,10942],{"id":10941},"ref-vs-reactive","ref() vs reactive()",[16,10944,10945,10948],{},[20,10946,10947],{},"ref()"," - Primitive değerler için:",[355,10950,10952],{"className":1834,"code":10951,"language":1836,"meta":364,"style":364},"import { ref } from 'vue'\n\nconst count = ref(0)\nconst message = ref('Merhaba')\n\n\u002F\u002F Değere erişim\nconsole.log(count.value) \u002F\u002F 0\ncount.value = 1\n",[362,10953,10954,10959,10963,10968,10973,10977,10982,10987],{"__ignoreMap":364},[1664,10955,10956],{"class":1666,"line":1667},[1664,10957,10958],{},"import { ref } from 'vue'\n",[1664,10960,10961],{"class":1666,"line":778},[1664,10962,3773],{"emptyLinePlaceholder":806},[1664,10964,10965],{"class":1666,"line":781},[1664,10966,10967],{},"const count = ref(0)\n",[1664,10969,10970],{"class":1666,"line":1716},[1664,10971,10972],{},"const message = ref('Merhaba')\n",[1664,10974,10975],{"class":1666,"line":1722},[1664,10976,3773],{"emptyLinePlaceholder":806},[1664,10978,10979],{"class":1666,"line":1923},[1664,10980,10981],{},"\u002F\u002F Değere erişim\n",[1664,10983,10984],{"class":1666,"line":2032},[1664,10985,10986],{},"console.log(count.value) \u002F\u002F 0\n",[1664,10988,10989],{"class":1666,"line":2038},[1664,10990,10991],{},"count.value = 1\n",[16,10993,10994,10997],{},[20,10995,10996],{},"reactive()"," - Objeler için:",[355,10999,11001],{"className":1834,"code":11000,"language":1836,"meta":364,"style":364},"import { reactive } from 'vue'\n\nconst state = reactive({\n  count: 0,\n  message: 'Merhaba'\n})\n\n\u002F\u002F Doğrudan erişim\nconsole.log(state.count) \u002F\u002F 0\nstate.count = 1\n",[362,11002,11003,11008,11012,11017,11022,11027,11032,11036,11041,11046],{"__ignoreMap":364},[1664,11004,11005],{"class":1666,"line":1667},[1664,11006,11007],{},"import { reactive } from 'vue'\n",[1664,11009,11010],{"class":1666,"line":778},[1664,11011,3773],{"emptyLinePlaceholder":806},[1664,11013,11014],{"class":1666,"line":781},[1664,11015,11016],{},"const state = reactive({\n",[1664,11018,11019],{"class":1666,"line":1716},[1664,11020,11021],{},"  count: 0,\n",[1664,11023,11024],{"class":1666,"line":1722},[1664,11025,11026],{},"  message: 'Merhaba'\n",[1664,11028,11029],{"class":1666,"line":1923},[1664,11030,11031],{},"})\n",[1664,11033,11034],{"class":1666,"line":2032},[1664,11035,3773],{"emptyLinePlaceholder":806},[1664,11037,11038],{"class":1666,"line":2038},[1664,11039,11040],{},"\u002F\u002F Doğrudan erişim\n",[1664,11042,11043],{"class":1666,"line":2044},[1664,11044,11045],{},"console.log(state.count) \u002F\u002F 0\n",[1664,11047,11048],{"class":1666,"line":2050},[1664,11049,11050],{},"state.count = 1\n",[39,11052,11054],{"id":11053},"computed-ve-watch","computed() ve watch()",[16,11056,11057],{},[20,11058,11059],{},"Computed Properties:",[355,11061,11063],{"className":1834,"code":11062,"language":1836,"meta":364,"style":364},"import { ref, computed } from 'vue'\n\nconst firstName = ref('Eralp')\nconst lastName = ref('Özcan')\n\nconst fullName = computed(() => {\n  return `${firstName.value} ${lastName.value}`\n})\n",[362,11064,11065,11070,11074,11079,11084,11088,11093,11098],{"__ignoreMap":364},[1664,11066,11067],{"class":1666,"line":1667},[1664,11068,11069],{},"import { ref, computed } from 'vue'\n",[1664,11071,11072],{"class":1666,"line":778},[1664,11073,3773],{"emptyLinePlaceholder":806},[1664,11075,11076],{"class":1666,"line":781},[1664,11077,11078],{},"const firstName = ref('Eralp')\n",[1664,11080,11081],{"class":1666,"line":1716},[1664,11082,11083],{},"const lastName = ref('Özcan')\n",[1664,11085,11086],{"class":1666,"line":1722},[1664,11087,3773],{"emptyLinePlaceholder":806},[1664,11089,11090],{"class":1666,"line":1923},[1664,11091,11092],{},"const fullName = computed(() => {\n",[1664,11094,11095],{"class":1666,"line":2032},[1664,11096,11097],{},"  return `${firstName.value} ${lastName.value}`\n",[1664,11099,11100],{"class":1666,"line":2038},[1664,11101,11031],{},[16,11103,11104],{},[20,11105,11106],{},"Watchers:",[355,11108,11110],{"className":1834,"code":11109,"language":1836,"meta":364,"style":364},"import { ref, watch } from 'vue'\n\nconst count = ref(0)\n\nwatch(count, (newValue, oldValue) => {\n  console.log(`Count changed from ${oldValue} to ${newValue}`)\n})\n\n\u002F\u002F Immediate watch\nwatch(count, (newValue) => {\n  console.log('Count:', newValue)\n}, { immediate: true })\n",[362,11111,11112,11117,11121,11125,11129,11134,11139,11143,11147,11152,11157,11162],{"__ignoreMap":364},[1664,11113,11114],{"class":1666,"line":1667},[1664,11115,11116],{},"import { ref, watch } from 'vue'\n",[1664,11118,11119],{"class":1666,"line":778},[1664,11120,3773],{"emptyLinePlaceholder":806},[1664,11122,11123],{"class":1666,"line":781},[1664,11124,10967],{},[1664,11126,11127],{"class":1666,"line":1716},[1664,11128,3773],{"emptyLinePlaceholder":806},[1664,11130,11131],{"class":1666,"line":1722},[1664,11132,11133],{},"watch(count, (newValue, oldValue) => {\n",[1664,11135,11136],{"class":1666,"line":1923},[1664,11137,11138],{},"  console.log(`Count changed from ${oldValue} to ${newValue}`)\n",[1664,11140,11141],{"class":1666,"line":2032},[1664,11142,11031],{},[1664,11144,11145],{"class":1666,"line":2038},[1664,11146,3773],{"emptyLinePlaceholder":806},[1664,11148,11149],{"class":1666,"line":2044},[1664,11150,11151],{},"\u002F\u002F Immediate watch\n",[1664,11153,11154],{"class":1666,"line":2050},[1664,11155,11156],{},"watch(count, (newValue) => {\n",[1664,11158,11159],{"class":1666,"line":2056},[1664,11160,11161],{},"  console.log('Count:', newValue)\n",[1664,11163,11164],{"class":1666,"line":2062},[1664,11165,11166],{},"}, { immediate: true })\n",[888,11168,11170],{"id":11169},"lifecycle-hooks","Lifecycle Hooks",[16,11172,11173,11174,11177],{},"Composition API'de lifecycle hook'ları ",[362,11175,11176],{},"on"," prefix'i ile kullanılır:",[355,11179,11181],{"className":1834,"code":11180,"language":1836,"meta":364,"style":364},"import { onMounted, onUpdated, onUnmounted } from 'vue'\n\nexport default {\n  setup() {\n    onMounted(() => {\n      console.log('Component mounted')\n    })\n    \n    onUpdated(() => {\n      console.log('Component updated')\n    })\n    \n    onUnmounted(() => {\n      console.log('Component unmounted')\n    })\n  }\n}\n",[362,11182,11183,11188,11192,11197,11202,11207,11212,11217,11221,11226,11231,11235,11239,11244,11249,11253,11257],{"__ignoreMap":364},[1664,11184,11185],{"class":1666,"line":1667},[1664,11186,11187],{},"import { onMounted, onUpdated, onUnmounted } from 'vue'\n",[1664,11189,11190],{"class":1666,"line":778},[1664,11191,3773],{"emptyLinePlaceholder":806},[1664,11193,11194],{"class":1666,"line":781},[1664,11195,11196],{},"export default {\n",[1664,11198,11199],{"class":1666,"line":1716},[1664,11200,11201],{},"  setup() {\n",[1664,11203,11204],{"class":1666,"line":1722},[1664,11205,11206],{},"    onMounted(() => {\n",[1664,11208,11209],{"class":1666,"line":1923},[1664,11210,11211],{},"      console.log('Component mounted')\n",[1664,11213,11214],{"class":1666,"line":2032},[1664,11215,11216],{},"    })\n",[1664,11218,11219],{"class":1666,"line":2038},[1664,11220,10674],{},[1664,11222,11223],{"class":1666,"line":2044},[1664,11224,11225],{},"    onUpdated(() => {\n",[1664,11227,11228],{"class":1666,"line":2050},[1664,11229,11230],{},"      console.log('Component updated')\n",[1664,11232,11233],{"class":1666,"line":2056},[1664,11234,11216],{},[1664,11236,11237],{"class":1666,"line":2062},[1664,11238,10674],{},[1664,11240,11241],{"class":1666,"line":2068},[1664,11242,11243],{},"    onUnmounted(() => {\n",[1664,11245,11246],{"class":1666,"line":2074},[1664,11247,11248],{},"      console.log('Component unmounted')\n",[1664,11250,11251],{"class":1666,"line":2080},[1664,11252,11216],{},[1664,11254,11255],{"class":1666,"line":2086},[1664,11256,2425],{},[1664,11258,11259],{"class":1666,"line":2092},[1664,11260,1926],{},[888,11262,11264],{"id":11263},"composables-logic-reuse","Composables - Logic Reuse",[16,11266,11267],{},"Composables, mantığı farklı bileşenler arasında paylaşmanın harika bir yoludur:",[355,11269,11271],{"className":1834,"code":11270,"language":1836,"meta":364,"style":364},"\u002F\u002F composables\u002FuseCounter.js\nimport { ref } from 'vue'\n\nexport function useCounter(initialValue = 0) {\n  const count = ref(initialValue)\n  \n  const increment = () => count.value++\n  const decrement = () => count.value--\n  const reset = () => count.value = initialValue\n  \n  return {\n    count,\n    increment,\n    decrement,\n    reset\n  }\n}\n",[362,11272,11273,11278,11282,11286,11291,11296,11300,11305,11310,11315,11319,11323,11328,11333,11338,11343,11347],{"__ignoreMap":364},[1664,11274,11275],{"class":1666,"line":1667},[1664,11276,11277],{},"\u002F\u002F composables\u002FuseCounter.js\n",[1664,11279,11280],{"class":1666,"line":778},[1664,11281,10958],{},[1664,11283,11284],{"class":1666,"line":781},[1664,11285,3773],{"emptyLinePlaceholder":806},[1664,11287,11288],{"class":1666,"line":1716},[1664,11289,11290],{},"export function useCounter(initialValue = 0) {\n",[1664,11292,11293],{"class":1666,"line":1722},[1664,11294,11295],{},"  const count = ref(initialValue)\n",[1664,11297,11298],{"class":1666,"line":1923},[1664,11299,7062],{},[1664,11301,11302],{"class":1666,"line":2032},[1664,11303,11304],{},"  const increment = () => count.value++\n",[1664,11306,11307],{"class":1666,"line":2038},[1664,11308,11309],{},"  const decrement = () => count.value--\n",[1664,11311,11312],{"class":1666,"line":2044},[1664,11313,11314],{},"  const reset = () => count.value = initialValue\n",[1664,11316,11317],{"class":1666,"line":2050},[1664,11318,7062],{},[1664,11320,11321],{"class":1666,"line":2056},[1664,11322,7142],{},[1664,11324,11325],{"class":1666,"line":2062},[1664,11326,11327],{},"    count,\n",[1664,11329,11330],{"class":1666,"line":2068},[1664,11331,11332],{},"    increment,\n",[1664,11334,11335],{"class":1666,"line":2074},[1664,11336,11337],{},"    decrement,\n",[1664,11339,11340],{"class":1666,"line":2080},[1664,11341,11342],{},"    reset\n",[1664,11344,11345],{"class":1666,"line":2086},[1664,11346,2425],{},[1664,11348,11349],{"class":1666,"line":2092},[1664,11350,1926],{},[16,11352,11353],{},"Kullanımı:",[355,11355,11357],{"className":2544,"code":11356,"language":2546,"meta":364,"style":364},"\u003Cscript setup>\nimport { useCounter } from '@\u002Fcomposables\u002FuseCounter'\n\nconst { count, increment, decrement, reset } = useCounter(10)\n\u003C\u002Fscript>\n",[362,11358,11359,11369,11389,11393,11427],{"__ignoreMap":364},[1664,11360,11361,11363,11365,11367],{"class":1666,"line":1667},[1664,11362,2553],{"class":2171},[1664,11364,3161],{"class":2556},[1664,11366,3164],{"class":2185},[1664,11368,2560],{"class":2171},[1664,11370,11371,11373,11375,11378,11380,11382,11384,11387],{"class":1666,"line":778},[1664,11372,3699],{"class":3698},[1664,11374,3702],{"class":2171},[1664,11376,11377],{"class":2638}," useCounter",[1664,11379,3708],{"class":2171},[1664,11381,3711],{"class":3698},[1664,11383,3714],{"class":2171},[1664,11385,11386],{"class":1674},"@\u002Fcomposables\u002FuseCounter",[1664,11388,3719],{"class":2171},[1664,11390,11391],{"class":1666,"line":781},[1664,11392,3773],{"emptyLinePlaceholder":806},[1664,11394,11395,11397,11399,11401,11403,11405,11407,11410,11412,11415,11417,11419,11421,11423,11425],{"class":1666,"line":1716},[1664,11396,3778],{"class":2185},[1664,11398,3702],{"class":2171},[1664,11400,10659],{"class":2638},[1664,11402,8000],{"class":2171},[1664,11404,10681],{"class":2638},[1664,11406,8000],{"class":2171},[1664,11408,11409],{"class":2638}," decrement",[1664,11411,8000],{"class":2171},[1664,11413,11414],{"class":2638}," reset ",[1664,11416,3193],{"class":2171},[1664,11418,3838],{"class":2171},[1664,11420,11377],{"class":3171},[1664,11422,3175],{"class":2638},[1664,11424,8216],{"class":2237},[1664,11426,5089],{"class":2638},[1664,11428,11429,11431,11433],{"class":1666,"line":1722},[1664,11430,2642],{"class":2171},[1664,11432,3161],{"class":2556},[1664,11434,2560],{"class":2171},[888,11436,11438],{"id":11437},"gerçek-dünya-örneği-todo-app","Gerçek Dünya Örneği: Todo App",[355,11440,11442],{"className":2544,"code":11441,"language":2546,"meta":364,"style":364},"\u003Ctemplate>\n  \u003Cdiv class=\"todo-app\">\n    \u003Cinput \n      v-model=\"newTodo\" \n      @keyup.enter=\"addTodo\"\n      placeholder=\"Yeni todo ekle...\"\n    >\n    \n    \u003Cul>\n      \u003Cli \n        v-for=\"todo in filteredTodos\" \n        :key=\"todo.id\"\n        :class=\"{ completed: todo.completed }\"\n      >\n        \u003Cinput \n          type=\"checkbox\" \n          v-model=\"todo.completed\"\n        >\n        \u003Cspan>{{ todo.text }}\u003C\u002Fspan>\n        \u003Cbutton @click=\"removeTodo(todo.id)\">Sil\u003C\u002Fbutton>\n      \u003C\u002Fli>\n    \u003C\u002Ful>\n    \n    \u003Cdiv class=\"filters\">\n      \u003Cbutton \n        v-for=\"filter in filters\" \n        :key=\"filter\"\n        @click=\"currentFilter = filter\"\n        :class=\"{ active: currentFilter === filter }\"\n      >\n        {{ filter }}\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { ref, computed } from 'vue'\n\nconst newTodo = ref('')\nconst todos = ref([])\nconst currentFilter = ref('All')\nconst filters = ['All', 'Active', 'Completed']\n\nconst addTodo = () => {\n  if (newTodo.value.trim()) {\n    todos.value.push({\n      id: Date.now(),\n      text: newTodo.value,\n      completed: false\n    })\n    newTodo.value = ''\n  }\n}\n\nconst removeTodo = (id) => {\n  todos.value = todos.value.filter(todo => todo.id !== id)\n}\n\nconst filteredTodos = computed(() => {\n  switch (currentFilter.value) {\n    case 'Active':\n      return todos.value.filter(todo => !todo.completed)\n    case 'Completed':\n      return todos.value.filter(todo => todo.completed)\n    default:\n      return todos.value\n  }\n})\n\u003C\u002Fscript>\n",[362,11443,11444,11452,11471,11479,11495,11510,11524,11529,11533,11541,11549,11565,11579,11593,11598,11606,11621,11635,11640,11657,11685,11693,11701,11705,11724,11732,11747,11760,11774,11787,11791,11796,11804,11812,11820,11828,11832,11842,11865,11869,11887,11900,11922,11960,11965,11981,12005,12024,12044,12061,12073,12081,12096,12101,12106,12111,12131,12175,12180,12185,12205,12225,12240,12274,12287,12316,12324,12336,12341,12348],{"__ignoreMap":364},[1664,11445,11446,11448,11450],{"class":1666,"line":1667},[1664,11447,2553],{"class":2171},[1664,11449,2557],{"class":2556},[1664,11451,2560],{"class":2171},[1664,11453,11454,11456,11458,11460,11462,11464,11467,11469],{"class":1666,"line":778},[1664,11455,2565],{"class":2171},[1664,11457,1598],{"class":2556},[1664,11459,2570],{"class":2185},[1664,11461,2573],{"class":2171},[1664,11463,2189],{"class":2171},[1664,11465,11466],{"class":1674},"todo-app",[1664,11468,2189],{"class":2171},[1664,11470,2560],{"class":2171},[1664,11472,11473,11475,11477],{"class":1666,"line":781},[1664,11474,2587],{"class":2171},[1664,11476,2706],{"class":2556},[1664,11478,1605],{"class":2171},[1664,11480,11481,11484,11486,11488,11491,11493],{"class":1666,"line":1716},[1664,11482,11483],{"class":2185},"      v-model",[1664,11485,2573],{"class":2171},[1664,11487,2189],{"class":2171},[1664,11489,11490],{"class":1674},"newTodo",[1664,11492,2189],{"class":2171},[1664,11494,1605],{"class":2171},[1664,11496,11497,11500,11502,11504,11507],{"class":1666,"line":1722},[1664,11498,11499],{"class":2185},"      @keyup.enter",[1664,11501,2573],{"class":2171},[1664,11503,2189],{"class":2171},[1664,11505,11506],{"class":1674},"addTodo",[1664,11508,11509],{"class":2171},"\"\n",[1664,11511,11512,11515,11517,11519,11522],{"class":1666,"line":1923},[1664,11513,11514],{"class":2185},"      placeholder",[1664,11516,2573],{"class":2171},[1664,11518,2189],{"class":2171},[1664,11520,11521],{"class":1674},"Yeni todo ekle...",[1664,11523,11509],{"class":2171},[1664,11525,11526],{"class":1666,"line":2032},[1664,11527,11528],{"class":2171},"    >\n",[1664,11530,11531],{"class":1666,"line":2038},[1664,11532,10674],{"class":2638},[1664,11534,11535,11537,11539],{"class":1666,"line":2044},[1664,11536,2587],{"class":2171},[1664,11538,47],{"class":2556},[1664,11540,2560],{"class":2171},[1664,11542,11543,11545,11547],{"class":1666,"line":2050},[1664,11544,2607],{"class":2171},[1664,11546,50],{"class":2556},[1664,11548,1605],{"class":2171},[1664,11550,11551,11554,11556,11558,11561,11563],{"class":1666,"line":2056},[1664,11552,11553],{"class":2185},"        v-for",[1664,11555,2573],{"class":2171},[1664,11557,2189],{"class":2171},[1664,11559,11560],{"class":1674},"todo in filteredTodos",[1664,11562,2189],{"class":2171},[1664,11564,1605],{"class":2171},[1664,11566,11567,11570,11572,11574,11577],{"class":1666,"line":2062},[1664,11568,11569],{"class":2185},"        :key",[1664,11571,2573],{"class":2171},[1664,11573,2189],{"class":2171},[1664,11575,11576],{"class":1674},"todo.id",[1664,11578,11509],{"class":2171},[1664,11580,11581,11584,11586,11588,11591],{"class":1666,"line":2068},[1664,11582,11583],{"class":2185},"        :class",[1664,11585,2573],{"class":2171},[1664,11587,2189],{"class":2171},[1664,11589,11590],{"class":1674},"{ completed: todo.completed }",[1664,11592,11509],{"class":2171},[1664,11594,11595],{"class":1666,"line":2074},[1664,11596,11597],{"class":2171},"      >\n",[1664,11599,11600,11602,11604],{"class":1666,"line":2080},[1664,11601,3318],{"class":2171},[1664,11603,2706],{"class":2556},[1664,11605,1605],{"class":2171},[1664,11607,11608,11611,11613,11615,11617,11619],{"class":1666,"line":2086},[1664,11609,11610],{"class":2185},"          type",[1664,11612,2573],{"class":2171},[1664,11614,2189],{"class":2171},[1664,11616,6484],{"class":1674},[1664,11618,2189],{"class":2171},[1664,11620,1605],{"class":2171},[1664,11622,11623,11626,11628,11630,11633],{"class":1666,"line":2092},[1664,11624,11625],{"class":2185},"          v-model",[1664,11627,2573],{"class":2171},[1664,11629,2189],{"class":2171},[1664,11631,11632],{"class":1674},"todo.completed",[1664,11634,11509],{"class":2171},[1664,11636,11637],{"class":1666,"line":2368},[1664,11638,11639],{"class":2171},"        >\n",[1664,11641,11642,11644,11646,11648,11651,11653,11655],{"class":1666,"line":2388},[1664,11643,3318],{"class":2171},[1664,11645,1664],{"class":2556},[1664,11647,2635],{"class":2171},[1664,11649,11650],{"class":2638},"{{ todo.text }}",[1664,11652,2642],{"class":2171},[1664,11654,1664],{"class":2556},[1664,11656,2560],{"class":2171},[1664,11658,11659,11661,11663,11665,11667,11669,11672,11674,11676,11679,11681,11683],{"class":1666,"line":2408},[1664,11660,3318],{"class":2171},[1664,11662,2773],{"class":2556},[1664,11664,2787],{"class":2185},[1664,11666,2573],{"class":2171},[1664,11668,2189],{"class":2171},[1664,11670,11671],{"class":1674},"removeTodo(todo.id)",[1664,11673,2189],{"class":2171},[1664,11675,2635],{"class":2171},[1664,11677,11678],{"class":2638},"Sil",[1664,11680,2642],{"class":2171},[1664,11682,2773],{"class":2556},[1664,11684,2560],{"class":2171},[1664,11686,11687,11689,11691],{"class":1666,"line":2422},[1664,11688,3350],{"class":2171},[1664,11690,50],{"class":2556},[1664,11692,2560],{"class":2171},[1664,11694,11695,11697,11699],{"class":1666,"line":2428},[1664,11696,2695],{"class":2171},[1664,11698,47],{"class":2556},[1664,11700,2560],{"class":2171},[1664,11702,11703],{"class":1666,"line":2971},[1664,11704,10674],{"class":2638},[1664,11706,11707,11709,11711,11713,11715,11717,11720,11722],{"class":1666,"line":2977},[1664,11708,2587],{"class":2171},[1664,11710,1598],{"class":2556},[1664,11712,2570],{"class":2185},[1664,11714,2573],{"class":2171},[1664,11716,2189],{"class":2171},[1664,11718,11719],{"class":1674},"filters",[1664,11721,2189],{"class":2171},[1664,11723,2560],{"class":2171},[1664,11725,11726,11728,11730],{"class":1666,"line":2983},[1664,11727,2607],{"class":2171},[1664,11729,2773],{"class":2556},[1664,11731,1605],{"class":2171},[1664,11733,11734,11736,11738,11740,11743,11745],{"class":1666,"line":2989},[1664,11735,11553],{"class":2185},[1664,11737,2573],{"class":2171},[1664,11739,2189],{"class":2171},[1664,11741,11742],{"class":1674},"filter in filters",[1664,11744,2189],{"class":2171},[1664,11746,1605],{"class":2171},[1664,11748,11749,11751,11753,11755,11758],{"class":1666,"line":2995},[1664,11750,11569],{"class":2185},[1664,11752,2573],{"class":2171},[1664,11754,2189],{"class":2171},[1664,11756,11757],{"class":1674},"filter",[1664,11759,11509],{"class":2171},[1664,11761,11762,11765,11767,11769,11772],{"class":1666,"line":3001},[1664,11763,11764],{"class":2185},"        @click",[1664,11766,2573],{"class":2171},[1664,11768,2189],{"class":2171},[1664,11770,11771],{"class":1674},"currentFilter = filter",[1664,11773,11509],{"class":2171},[1664,11775,11776,11778,11780,11782,11785],{"class":1666,"line":3007},[1664,11777,11583],{"class":2185},[1664,11779,2573],{"class":2171},[1664,11781,2189],{"class":2171},[1664,11783,11784],{"class":1674},"{ active: currentFilter === filter }",[1664,11786,11509],{"class":2171},[1664,11788,11789],{"class":1666,"line":3012},[1664,11790,11597],{"class":2171},[1664,11792,11793],{"class":1666,"line":3018},[1664,11794,11795],{"class":2638},"        {{ filter }}\n",[1664,11797,11798,11800,11802],{"class":1666,"line":3024},[1664,11799,3350],{"class":2171},[1664,11801,2773],{"class":2556},[1664,11803,2560],{"class":2171},[1664,11805,11806,11808,11810],{"class":1666,"line":3030},[1664,11807,2695],{"class":2171},[1664,11809,1598],{"class":2556},[1664,11811,2560],{"class":2171},[1664,11813,11814,11816,11818],{"class":1666,"line":3036},[1664,11815,2824],{"class":2171},[1664,11817,1598],{"class":2556},[1664,11819,2560],{"class":2171},[1664,11821,11822,11824,11826],{"class":1666,"line":3042},[1664,11823,2642],{"class":2171},[1664,11825,2557],{"class":2556},[1664,11827,2560],{"class":2171},[1664,11829,11830],{"class":1666,"line":3048},[1664,11831,3773],{"emptyLinePlaceholder":806},[1664,11833,11834,11836,11838,11840],{"class":1666,"line":3054},[1664,11835,2553],{"class":2171},[1664,11837,3161],{"class":2556},[1664,11839,3164],{"class":2185},[1664,11841,2560],{"class":2171},[1664,11843,11844,11846,11848,11850,11852,11855,11857,11859,11861,11863],{"class":1666,"line":3060},[1664,11845,3699],{"class":3698},[1664,11847,3702],{"class":2171},[1664,11849,3705],{"class":2638},[1664,11851,8000],{"class":2171},[1664,11853,11854],{"class":2638}," computed",[1664,11856,3708],{"class":2171},[1664,11858,3711],{"class":3698},[1664,11860,3714],{"class":2171},[1664,11862,2546],{"class":1674},[1664,11864,3719],{"class":2171},[1664,11866,11867],{"class":1666,"line":3066},[1664,11868,3773],{"emptyLinePlaceholder":806},[1664,11870,11871,11873,11876,11878,11880,11882,11885],{"class":1666,"line":3072},[1664,11872,3778],{"class":2185},[1664,11874,11875],{"class":2638}," newTodo ",[1664,11877,2573],{"class":2171},[1664,11879,3705],{"class":3171},[1664,11881,3175],{"class":2638},[1664,11883,11884],{"class":2171},"''",[1664,11886,5089],{"class":2638},[1664,11888,11889,11891,11894,11896,11898],{"class":1666,"line":3078},[1664,11890,3778],{"class":2185},[1664,11892,11893],{"class":2638}," todos ",[1664,11895,2573],{"class":2171},[1664,11897,3705],{"class":3171},[1664,11899,3788],{"class":2638},[1664,11901,11902,11904,11907,11909,11911,11913,11915,11918,11920],{"class":1666,"line":3084},[1664,11903,3778],{"class":2185},[1664,11905,11906],{"class":2638}," currentFilter ",[1664,11908,2573],{"class":2171},[1664,11910,3705],{"class":3171},[1664,11912,3175],{"class":2638},[1664,11914,4472],{"class":2171},[1664,11916,11917],{"class":1674},"All",[1664,11919,4472],{"class":2171},[1664,11921,5089],{"class":2638},[1664,11923,11924,11926,11929,11931,11934,11936,11938,11940,11942,11944,11947,11949,11951,11953,11956,11958],{"class":1666,"line":3089},[1664,11925,3778],{"class":2185},[1664,11927,11928],{"class":2638}," filters ",[1664,11930,2573],{"class":2171},[1664,11932,11933],{"class":2638}," [",[1664,11935,4472],{"class":2171},[1664,11937,11917],{"class":1674},[1664,11939,4472],{"class":2171},[1664,11941,8000],{"class":2171},[1664,11943,3714],{"class":2171},[1664,11945,11946],{"class":1674},"Active",[1664,11948,4472],{"class":2171},[1664,11950,8000],{"class":2171},[1664,11952,3714],{"class":2171},[1664,11954,11955],{"class":1674},"Completed",[1664,11957,4472],{"class":2171},[1664,11959,2431],{"class":2638},[1664,11961,11963],{"class":1666,"line":11962},44,[1664,11964,3773],{"emptyLinePlaceholder":806},[1664,11966,11968,11970,11973,11975,11977,11979],{"class":1666,"line":11967},45,[1664,11969,3778],{"class":2185},[1664,11971,11972],{"class":2638}," addTodo ",[1664,11974,2573],{"class":2171},[1664,11976,10686],{"class":2171},[1664,11978,3822],{"class":2185},[1664,11980,3825],{"class":2171},[1664,11982,11984,11987,11989,11991,11993,11995,11997,12000,12003],{"class":1666,"line":11983},46,[1664,11985,11986],{"class":3698},"  if",[1664,11988,3813],{"class":2556},[1664,11990,11490],{"class":2638},[1664,11992,883],{"class":2171},[1664,11994,3835],{"class":2638},[1664,11996,883],{"class":2171},[1664,11998,11999],{"class":3171},"trim",[1664,12001,12002],{"class":2556},"()) ",[1664,12004,3178],{"class":2171},[1664,12006,12008,12011,12013,12015,12017,12020,12022],{"class":1666,"line":12007},47,[1664,12009,12010],{"class":2638},"    todos",[1664,12012,883],{"class":2171},[1664,12014,3835],{"class":2638},[1664,12016,883],{"class":2171},[1664,12018,12019],{"class":3171},"push",[1664,12021,3175],{"class":2556},[1664,12023,3178],{"class":2171},[1664,12025,12027,12030,12032,12035,12037,12040,12042],{"class":1666,"line":12026},48,[1664,12028,12029],{"class":2556},"      id",[1664,12031,2192],{"class":2171},[1664,12033,12034],{"class":2638}," Date",[1664,12036,883],{"class":2171},[1664,12038,12039],{"class":3171},"now",[1664,12041,10649],{"class":2556},[1664,12043,2203],{"class":2171},[1664,12045,12047,12050,12052,12055,12057,12059],{"class":1666,"line":12046},49,[1664,12048,12049],{"class":2556},"      text",[1664,12051,2192],{"class":2171},[1664,12053,12054],{"class":2638}," newTodo",[1664,12056,883],{"class":2171},[1664,12058,3835],{"class":2638},[1664,12060,2203],{"class":2171},[1664,12062,12064,12067,12069],{"class":1666,"line":12063},50,[1664,12065,12066],{"class":2556},"      completed",[1664,12068,2192],{"class":2171},[1664,12070,12072],{"class":12071},"sfNiH"," false\n",[1664,12074,12076,12079],{"class":1666,"line":12075},51,[1664,12077,12078],{"class":2171},"    }",[1664,12080,5089],{"class":2556},[1664,12082,12084,12087,12089,12091,12093],{"class":1666,"line":12083},52,[1664,12085,12086],{"class":2638},"    newTodo",[1664,12088,883],{"class":2171},[1664,12090,3835],{"class":2638},[1664,12092,3838],{"class":2171},[1664,12094,12095],{"class":2171}," ''\n",[1664,12097,12099],{"class":1666,"line":12098},53,[1664,12100,2425],{"class":2171},[1664,12102,12104],{"class":1666,"line":12103},54,[1664,12105,1926],{"class":2171},[1664,12107,12109],{"class":1666,"line":12108},55,[1664,12110,3773],{"emptyLinePlaceholder":806},[1664,12112,12114,12116,12119,12121,12123,12125,12127,12129],{"class":1666,"line":12113},56,[1664,12115,3778],{"class":2185},[1664,12117,12118],{"class":2638}," removeTodo ",[1664,12120,2573],{"class":2171},[1664,12122,3813],{"class":2171},[1664,12124,2186],{"class":3816},[1664,12126,3196],{"class":2171},[1664,12128,3822],{"class":2185},[1664,12130,3825],{"class":2171},[1664,12132,12134,12137,12139,12141,12143,12146,12148,12150,12152,12154,12156,12159,12161,12164,12166,12168,12171,12173],{"class":1666,"line":12133},57,[1664,12135,12136],{"class":2638},"  todos",[1664,12138,883],{"class":2171},[1664,12140,3835],{"class":2638},[1664,12142,3838],{"class":2171},[1664,12144,12145],{"class":2638}," todos",[1664,12147,883],{"class":2171},[1664,12149,3835],{"class":2638},[1664,12151,883],{"class":2171},[1664,12153,11757],{"class":3171},[1664,12155,3175],{"class":2556},[1664,12157,12158],{"class":3816},"todo",[1664,12160,3822],{"class":2185},[1664,12162,12163],{"class":2638}," todo",[1664,12165,883],{"class":2171},[1664,12167,2186],{"class":2638},[1664,12169,12170],{"class":2171}," !==",[1664,12172,6489],{"class":2638},[1664,12174,5089],{"class":2556},[1664,12176,12178],{"class":1666,"line":12177},58,[1664,12179,1926],{"class":2171},[1664,12181,12183],{"class":1666,"line":12182},59,[1664,12184,3773],{"emptyLinePlaceholder":806},[1664,12186,12188,12190,12193,12195,12197,12199,12201,12203],{"class":1666,"line":12187},60,[1664,12189,3778],{"class":2185},[1664,12191,12192],{"class":2638}," filteredTodos ",[1664,12194,2573],{"class":2171},[1664,12196,11854],{"class":3171},[1664,12198,3175],{"class":2638},[1664,12200,10649],{"class":2171},[1664,12202,3822],{"class":2185},[1664,12204,3825],{"class":2171},[1664,12206,12208,12211,12213,12216,12218,12220,12223],{"class":1666,"line":12207},61,[1664,12209,12210],{"class":3698},"  switch",[1664,12212,3813],{"class":2556},[1664,12214,12215],{"class":2638},"currentFilter",[1664,12217,883],{"class":2171},[1664,12219,3835],{"class":2638},[1664,12221,12222],{"class":2556},") ",[1664,12224,3178],{"class":2171},[1664,12226,12228,12231,12233,12235,12237],{"class":1666,"line":12227},62,[1664,12229,12230],{"class":3698},"    case",[1664,12232,3714],{"class":2171},[1664,12234,11946],{"class":1674},[1664,12236,4472],{"class":2171},[1664,12238,12239],{"class":2171},":\n",[1664,12241,12243,12246,12248,12250,12252,12254,12256,12258,12260,12262,12265,12267,12269,12272],{"class":1666,"line":12242},63,[1664,12244,12245],{"class":3698},"      return",[1664,12247,12145],{"class":2638},[1664,12249,883],{"class":2171},[1664,12251,3835],{"class":2638},[1664,12253,883],{"class":2171},[1664,12255,11757],{"class":3171},[1664,12257,3175],{"class":2556},[1664,12259,12158],{"class":3816},[1664,12261,3822],{"class":2185},[1664,12263,12264],{"class":2171}," !",[1664,12266,12158],{"class":2638},[1664,12268,883],{"class":2171},[1664,12270,12271],{"class":2638},"completed",[1664,12273,5089],{"class":2556},[1664,12275,12277,12279,12281,12283,12285],{"class":1666,"line":12276},64,[1664,12278,12230],{"class":3698},[1664,12280,3714],{"class":2171},[1664,12282,11955],{"class":1674},[1664,12284,4472],{"class":2171},[1664,12286,12239],{"class":2171},[1664,12288,12290,12292,12294,12296,12298,12300,12302,12304,12306,12308,12310,12312,12314],{"class":1666,"line":12289},65,[1664,12291,12245],{"class":3698},[1664,12293,12145],{"class":2638},[1664,12295,883],{"class":2171},[1664,12297,3835],{"class":2638},[1664,12299,883],{"class":2171},[1664,12301,11757],{"class":3171},[1664,12303,3175],{"class":2556},[1664,12305,12158],{"class":3816},[1664,12307,3822],{"class":2185},[1664,12309,12163],{"class":2638},[1664,12311,883],{"class":2171},[1664,12313,12271],{"class":2638},[1664,12315,5089],{"class":2556},[1664,12317,12319,12322],{"class":1666,"line":12318},66,[1664,12320,12321],{"class":3698},"    default",[1664,12323,12239],{"class":2171},[1664,12325,12327,12329,12331,12333],{"class":1666,"line":12326},67,[1664,12328,12245],{"class":3698},[1664,12330,12145],{"class":2638},[1664,12332,883],{"class":2171},[1664,12334,12335],{"class":2638},"value\n",[1664,12337,12339],{"class":1666,"line":12338},68,[1664,12340,2425],{"class":2171},[1664,12342,12344,12346],{"class":1666,"line":12343},69,[1664,12345,3193],{"class":2171},[1664,12347,5089],{"class":2638},[1664,12349,12351,12353,12355],{"class":1666,"line":12350},70,[1664,12352,2642],{"class":2171},[1664,12354,3161],{"class":2556},[1664,12356,2560],{"class":2171},[888,12358,8101],{"id":8100},[176,12360,12361,12367,12373,12379,12385],{},[50,12362,12363,12366],{},[20,12364,12365],{},"Mantığı Gruplandırın",": İlgili state ve fonksiyonları bir arada tutun",[50,12368,12369,12372],{},[20,12370,12371],{},"Composables Kullanın",": Tekrar eden mantığı composable'lara çıkarın",[50,12374,12375,12378],{},[20,12376,12377],{},"TypeScript Kullanın",": Daha iyi developer experience için",[50,12380,12381,12384],{},[20,12382,12383],{},"Destructuring",": Return edilen değerleri destructure edin",[50,12386,12387,12390,12391,12394],{},[20,12388,12389],{},"Naming Convention",": Composable'lar için ",[362,12392,12393],{},"use"," prefix'i kullanın",[888,12396,5423],{"id":5422},[16,12398,12399],{},"Composition API, Vue.js'de component logic'i organize etmenin güçlü ve esnek bir yolunu sunar. Özellikle büyük projelerde kod tekrarını azaltır ve maintainability'yi artırır.",[39,12401,5430],{"id":5429},[47,12403,12404,12411,12418],{},[50,12405,12406],{},[53,12407,12410],{"href":12408,"rel":12409},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fextras\u002Fcomposition-api-faq.html",[57],"Vue 3 Composition API Dokümantasyonu",[50,12412,12413],{},[53,12414,12417],{"href":12415,"rel":12416},"https:\u002F\u002Fvueuse.org\u002F",[57],"VueUse - Composition Utilities",[50,12419,12420],{},[53,12421,12424],{"href":12422,"rel":12423},"https:\u002F\u002Fv3-migration.vuejs.org\u002F",[57],"Vue 3 Migration Guide",[5455,12426],{},[16,12428,12429],{},[120,12430,12431],{},"Bu yazıda Composition API'nin temellerini ve pratik kullanımını ele aldık. Sorularınız için benimle iletişime geçebilirsiniz.",[4088,12433,12434],{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":364,"searchDepth":778,"depth":778,"links":12436},[12437,12440,12444,12448,12449,12450,12451,12452],{"id":10468,"depth":778,"text":10469,"children":12438},[12439],{"id":10475,"depth":781,"text":10476},{"id":10505,"depth":778,"text":10506,"children":12441},[12442,12443],{"id":10509,"depth":781,"text":10510},{"id":10752,"depth":781,"text":10753},{"id":10937,"depth":778,"text":10938,"children":12445},[12446,12447],{"id":10941,"depth":781,"text":10942},{"id":11053,"depth":781,"text":11054},{"id":11169,"depth":778,"text":11170},{"id":11263,"depth":778,"text":11264},{"id":11437,"depth":778,"text":11438},{"id":8100,"depth":778,"text":8101},{"id":5422,"depth":778,"text":5423,"children":12453},[12454],{"id":5429,"depth":781,"text":5430},"2024-01-10","Vue 3 ile gelen Composition API özelliklerini detaylı olarak inceleyelim ve nasıl kullanacağımızı öğrenelim",{"author":5477,"cover":12458},"\u002Fassets\u002Fimages\u002Fblog\u002Fvue-composition-api-cover.svg","\u002Fblog\u002Fvue-js-composition-api-rehberi","12",{"title":10457,"description":12456},{"loc":12459},"blog\u002Fvue-js-composition-api-rehberi",[4123,12465,4127,4936],"Composition API","8ULwVrunheTI2gdIJktUcNn5qNtBio9NPfzAEkEx3ok",{"id":12468,"title":12469,"body":12470,"date":4919,"description":12477,"extension":796,"image":797,"meta":13128,"navigation":806,"ogImage":4922,"path":13132,"readingTime":4928,"robots":797,"schemaOrg":797,"seo":13133,"sitemap":13134,"stem":13136,"tags":13137,"__hash__":13139},"blog\u002Fblog\u002Fvue3-ile-sentry-nasil-kullanilir.md","Vue3 ile Sentry Nasıl Kullanılır?",{"type":8,"value":12471,"toc":13121},[12472,12475,12478,12484,12488,12494,12497,12504,12541,12551,12555,12558,12566,12572,12576,12582,12586,12601,12605,12611,12628,12632,12658,12710,12725,12729,12735,12739,12746,12749,12773,12779,12783,12787,12791,12798,12807,12811,12820,12824,12828,12847,12851,12860,12873,12880,12884,12890,12899,12903,12910,12914,12927,12931,12937,12941,12946,13066,13073,13082,13091,13099,13106,13116,13118],[11,12473,12469],{"id":12474},"vue3-ile-sentry-nasıl-kullanılır",[16,12476,12477],{},"Sıklıkla hatalar ile karşılaşıyoruz ve bunları bulmak bir o kadar da zor olmuyor mu? Hata ve Performans İzleme araçlarından bir tanesi de Sentry. Bu yazıda, Sentry’nin nasıl kurulacağını ve performans izlemesiyle nasıl iyileştirmeler yapabileceğimizi anlatacağım. Hazırsan başlıyoruz! 🚀",[888,12479,12481],{"id":12480},"sentry-nedir",[20,12482,12483],{},"Sentry Nedir?",[16,12485,12486],{},[35,12487],{"alt":4151,"src":4152},[16,12489,12490,12491,12493],{},"Aslında genel bir tanımlama yapmak gerekirse; ",[20,12492,4151],{}," bir çok uygulamamız için bir hata izleme ve hata raporlama platformu, hatta buna performans raporlaması platformu olduğunu da ekleyebiliriz.",[16,12495,12496],{},"Sentry, geliştiricilere, gerçek zamanlı olarak uygulama hatalarını izlemelerini, hata raporlarını alıp analiz etmelerini ve sorunları hızla teşhis etmelerini sağlar.",[16,12498,12499,12500,12503],{},"Sentry’nin ",[20,12501,12502],{},"temel özellikleri"," arasında aşağıdakiler bulunur:",[176,12505,12506,12512,12518,12524,12530],{},[50,12507,12508,12511],{},[20,12509,12510],{},"Hata İzleme",": Sentry, uygulamalardaki hataları izler ve yakalar. İstisnalar, hata mesajleri, kullanıcı arayüzündeki hatalar gibi çeşitli hata türlerini tespit edebilir.",[50,12513,12514,12517],{},[20,12515,12516],{},"Gerçek Zamanlı İzleme",": Sentry, uygulamalardaki hataları gerçek zamanlı olarak izler ve hızlı bir şekilde bildirim gönderir. Bu sayede geliştiriciler, hataları anında fark edebilir ve müdahale edebilir.",[50,12519,12520,12523],{},[20,12521,12522],{},"Hata Raporlama",": Sentry, hataları ayrıntılı bir şekilde raporlar. Hata raporları, hatanın ne zaman, nerede ve hangi koşullar altında meydana geldiğine dair önemli bilgiler içerir. Bu, geliştiricilerin hataları teşhis etmelerine ve düzeltmelerine yardımcı olur.",[50,12525,12526,12529],{},[20,12527,12528],{},"Entegrasyonlar",": Sentry, birçok popüler programlama dilini ve çeşitli platformları destekler. Bu sayede farklı türdeki uygulamalar ve sistemlerle entegre çalışabilir.",[50,12531,12532,12535,12536,4206],{},[20,12533,12534],{},"Performans İzleme",": Sentry, uygulamaların performansını izleyebilir ve yavaşlık sorunlarını tespit edebilir. Performans izleme özellikleri sayesinde geliştiriciler, uygulamalarının performansını optimize edebilir ve kullanıcı deneyimini artırabilir. ",[120,12537,12538],{},[20,12539,12540],{},"Bu konuda da bir örnek yapmış olacağız",[16,12542,12543],{},[120,12544,12545,12546,12550],{},"Ayrıca burada ki temel anlatıma ek olarak Onur Dayıbaş’ın ",[53,12547,12549],{"href":4214,"rel":12548},[57],"Sentry’deki Bazı Kavramlar"," medium yazısını da okumanızı tavsiye ediyorum.",[888,12552,12554],{"id":12553},"kurulum-installation","Kurulum (Installation)",[16,12556,12557],{},"Öncelikle burada yapacağımız işlemleri görseller ile destekleyeceğim. Zaten Sentry yeterince bu konuda bize yardımcı oluyor olacak.",[16,12559,1733,12560,12565],{},[20,12561,12562],{},[53,12563,4151],{"href":4231,"rel":12564},[57],"’nin sitesine gidip hesap oluşturuyor veya hesabımız var ise giriş yapıyoruz.",[16,12567,12568,12569,12571],{},"📌 Eğer ilk defa giriş yapıyorsanız sizden bir organizasyon oluşturmanızı istiyor. Bunun temel sebeplerinden birisi diğer takım arkadaşlarınız ile de birlikte çalışabilmeniz için istiyor. Bu örnekte “",[120,12570,4239],{},"” yaparak bu aşamayı geçiyorum.",[16,12573,12574],{},[35,12575],{"alt":4245,"src":4246},[16,12577,12578,12579,12581],{},"📌 Kurmak istediğimiz platformu seçeceğimiz ekran karşılıyor bizi. Burada ",[20,12580,4252],{},"’yü seçiyoruz.",[16,12583,12584],{},[35,12585],{"alt":4257,"src":4258},[16,12587,12588,12589,12592,12593,12596,12597,12600],{},"📌 Burada alarm (",[120,12590,12591],{},"alert",") sıklığını seçiyoruz. Daha sonra bu alanı ayarlamamız mümkün şimdilik “",[120,12594,12595],{},"Alert me on every new issue","” seçeneğini seçip bir sonraki aşamamız olan proje adımızı oluşturup ve takımımızı seçiyoruz. Bir takım yok ise varsayılan olarak organizasyonuzun adın da bir takım geliyor. Farklı bir takım kurmak isterseniz “+” ya tıklayıp yaratabilirsiniz. “",[120,12598,12599],{},"Create Project","” diyoruz.",[16,12602,12603],{},[35,12604],{"alt":4273,"src":4274},[16,12606,12607,12608,12610],{},"📌 Burada bizim için yönergeleri ",[20,12609,4151],{}," veriyor. Burada 3 temel duruma göre otomatik ayarlamaları bizim için yapıyor. Anlamak için önemli noktalar ise şöyle;",[176,12612,12613,12618,12623],{},[50,12614,12615,12617],{},[20,12616,4287],{},": Hata izleme ayarımız. Bu ayar varsayılan olarak seçili geliyor ve kapatamıyoruz. Çünkü temel amacımız zaten o 😉",[50,12619,12620,12622],{},[20,12621,4199],{},": Burada sayfa yüklemelerimizin perfomansını ölçüyoruz. İstemiyorsak buradan bu seçeneği kaldırıyoruz.",[50,12624,12625,12627],{},[20,12626,4298],{},": Burası da aslında çok sevdiğimiz yerlerden birisi hataların nasıl karşılaşıldığını ufak bir video kesiti ile görebildiğimiz bir video sunuyor. Ancak tabi ki çok yüksek oranlarda bu verileri toplamanız önerilmiyor. Sadece hatalar için yapmanız yeterli diyebilirim.",[16,12629,12630],{},[35,12631],{"alt":4304,"src":4305},[16,12633,12634,12635,12637,12638,12640,12641,12643,12644,12646,12647,12649,12650,12653,12654,12657],{},"Gelelim kurulum aşamasına, aslında yukarıda görselde gösterdiği gibi “",[120,12636,1671],{},"” yada “",[120,12639,1701],{},"” kullanımıza göre projemize ",[20,12642,4151],{}," paketimizi kuruyoruz. Daha sonrasında Vue3 örnek kodunu direkt kopyalayıp. “",[120,12645,4320],{},"” dosyamıza yapıştırıyoruz. Burası için tabi ki sizin için farklı bir “",[120,12648,4320],{},"” dosyanız olabilir. Burada önemli noktalar ",[362,12651,12652],{}," Sentry.init({])"," ile başlayan yeri almamız yeterli (",[120,12655,12656],{},"Tabi ki import etmeyi unutmayın","). Buradaki ayarlamaların önemli noktaları ve anlamları ise şöyle;",[47,12659,12660,12665,12670,12681,12690,12702],{},[50,12661,12662,12664],{},[20,12663,4338],{},": Uygulama nesnemiz yani createApp ile oluşturduğumuz veya izlemek istediğimiz uygulamayı belirtmek için kullanılır.",[50,12666,12667,12669],{},[20,12668,4344],{}," Hata raportlarının gönderileceği Sentry sunucusunun adresi. Bu adresi .env gibi bir şekilde tutmanızı öneriyorum. Kötü amaçlı farklı veriler görüp sorun yaşayabilirsiniz.",[50,12671,12672,12674,12675,593,12677,12680],{},[20,12673,4350],{},": Sentry entegrasyonlarını yapılandırmak için kullanılır. Bu örnekte, ",[362,12676,4354],{},[362,12678,12679],{},"Sentry.Replay"," entegrasyonları kullanılır.",[50,12682,12683,12685,12686,12689],{},[20,12684,4363],{},": Performans izleme örneklem oranı. Yüzde cinsinden ifade edilir ve bu örnekte ",[20,12687,12688],{},"%100"," olarak ayarlanmıştır. Gerçek üretim ortamlarında düşürülmesi önerilir.",[50,12691,12692,12694,12695,12698,12699,12701],{},[20,12693,4373],{},": Oturum kaydı örneklem oranı. Yüzde cinsinden ifade edilir ve bu örnekte ",[20,12696,12697],{},"%10"," olarak ayarlanmıştır. Geliştirme aşamasında ",[20,12700,12688],{}," olarak ayarlanıp, üretim ortamında daha düşük bir oranda örnekleme yapılabilir.",[50,12703,12704,12706,12707,12709],{},[20,12705,4386],{},": Hata oluşan oturumların örnekleme oranı. Eğer zaten oturum örnekleme yapmıyorsanız, hata içeren oturumların örnekleme oranını ",[20,12708,12688],{}," olarak ayarlayabilirsiniz.",[16,12711,12712,12713,12718,12719,12724],{},"Görselde gözükmeyen ancak daha detaylı ayarlamalar yapmak istiyorsanız. ",[53,12714,12716],{"href":4395,"rel":12715},[57],[120,12717,4399],{},"’a tıklayarak detaylı farklı ayarlamalar yapmanızda mümkün. Temel kurulum işlemlerini aslında burada tamamlamış olduk. Şimdi artık ",[120,12720,12721],{},[20,12722,12723],{},"ilk hatamızı"," nasıl alacağımıza bakalım.",[888,12726,12728],{"id":12727},"hatalar-issues","Hatalar (Issues)",[16,12730,12731,12732,12734],{},"Kurulumları tamamladıktan sonra ",[20,12733,4151],{}," bizi otomatik olarak aşağıdaki gibi bir sayfaya yönlendiriyor ve bizden hatalarımızı göndermemizi bekliyor. Aslında tüm hataları burada göreceğiz yada izleyeceğiz.",[16,12736,12737],{},[35,12738],{"alt":4417,"src":4418},[732,12740,12741],{},[16,12742,12743,12744],{},"Peki bu hatayı yada farklı dataları nasıl buraya göndereceğiz?",[120,12745,4426],{},[16,12747,12748],{},"👩‍💻 Basit bir button ve fonksiyon oluşturuyoruz.",[355,12750,12752],{"className":1834,"code":12751,"language":1836,"meta":364,"style":364},"\u003Cbutton @click=\"sendSentryData\">Click me\u003C\u002Fbutton>\nfunction sendSentryData() {\n    Sentry.captureMessage('Button clicked');\n}\n",[362,12753,12754,12759,12764,12769],{"__ignoreMap":364},[1664,12755,12756],{"class":1666,"line":1667},[1664,12757,12758],{},"\u003Cbutton @click=\"sendSentryData\">Click me\u003C\u002Fbutton>\n",[1664,12760,12761],{"class":1666,"line":778},[1664,12762,12763],{},"function sendSentryData() {\n",[1664,12765,12766],{"class":1666,"line":781},[1664,12767,12768],{},"    Sentry.captureMessage('Button clicked');\n",[1664,12770,12771],{"class":1666,"line":1716},[1664,12772,1926],{},[16,12774,12775,12776,12778],{},"Eğer bu fonksiyonu oluşturduğumuzda ",[20,12777,4151],{},"’yi import etmemiş ve tanımlamamışsanız. Aşağıda ki görselde ki hatayı alacaksınız.",[16,12780,12781],{},[35,12782],{"alt":4495,"src":4496},[16,12784,12785],{},[35,12786],{"src":4501,"loading":4502,"alt":4503},[16,12788,12789],{},[35,12790],{"alt":4508,"src":4509},[732,12792,12793],{},[16,12794,12795],{},[20,12796,12797],{},"İlk hatamızı aldık!! Peki bu nasıl oldu?",[16,12799,12800,12801,12803,12804,12806],{},"Çünkü en temelinde bir referans hatası aldığımız ve ",[20,12802,4386],{}," değerimiz %100 olduğu için Sentry bunu algılayarak bize direkt olarak gönderdi. İçeriğine tıklayarak hata’nın oluşumunun tekrarını yada detaylı bilgileri öğrenebiliriz, konuyu fazla uzatacağını düşündüğüm için buraya girmiyorum. Hatamız Sentry’yi tanımlamadığımız için almıştık. Bunun için ",[362,12805,4525],{}," kodunu ekleyerek tanımlamamızı yapıyoruz. Ve butonumuza tekrar tıklıyoruz. 🖱️",[16,12808,12809],{},[35,12810],{"alt":4531,"src":4532},[16,12812,12813,12814,12816,12817,12819],{},"Gördüğünüz üzere göndermiş olduğumuz mesajı da görebiliyoruz. Burada ki önemli noktalardan birisi de bu hataya kaç kez kaç kişinin yaşadığını görebiliyor oluşumuz. ",[120,12815,4538],{}," sayısı bu hatanın kaç kez yaşandığını, ",[120,12818,4542],{},"’da ise kaç farklı kullanıcının bu durumu yaşadığını görüyoruz. Burada hataların içerisine girerek detaylı bilgiler öğrenmemiz mümkün. Temel anlamda basit bir hata ve veri gönderme işlemini gerçekleştirmiş olduk. Sıra Performans analizini görmekte.",[888,12821,12823],{"id":12822},"performans-i̇zleme-performance-monitoring","Performans İzleme (Performance Monitoring)",[16,12825,12826],{},[35,12827],{"src":4551,"loading":4502},[16,12829,12830,12831,12835,12836,12838,12839,593,12841,12843,12844,12846],{},"Bildiğin üzere hepimiz için önemli olan şeylerden birisi de sayfa yükleme hızlarımız yani projemizin gösterdiği performans. ",[120,12832,12833],{},[20,12834,4151],{}," ile bunu analiz etmemizin mümkün olduğundan bahsetmiştik. Kurulum aşamasında Performance Monitoring seçeneğini seçtiysek aslında kurulum aşamasında biraz hız kazanıyoruz. “",[120,12837,4320],{},"” dosyamıza geri döndüğümüzde ",[20,12840,4563],{},[20,12842,4566],{}," değerlerini göreceğiz. BrowserTracing’ de yapacağımız ayarlamalar aslında domainimizin adreslerini girmek. ",[120,12845,4570],{}," varsayılan olarak geliyor. Bunun yanında deploy ettiğimiz adresi de eklememiz gerekiyor.",[16,12848,12849],{},[35,12850],{"alt":364,"src":4576},[16,12852,12853,12854,12859],{},"Ben örnekleride yapacağım olan “",[53,12855,12857],{"href":4582,"rel":12856},[57],[120,12858,4582],{},"”ı ekledim. Böylece deploy edilmiş halde de performansını ölçüyor olacağım.",[16,12861,12862,12863,12865,12866,12869,12870,12872],{},"Bir diğer değerimiz ise ",[20,12864,4566],{}," bu değerin prod. ortamlarında ",[120,12867,12868],{},"düşürülmesini"," öneriyorlar. Tabi ki bir local geliştirme yapıyorsanız bu değerin ",[20,12871,4595],{}," olması öneriliyor. Böylece tüm sayfa yenilemelerinizi analiz etmiş olacaksınız.",[732,12874,12875],{},[16,12876,12877],{},[20,12878,12879],{},"Peki bu Perfomance ne işimize yarayacak? Gelin uygulamalı olarak görelim.",[16,12881,12882],{},[35,12883],{"loading":4502,"src":4608},[16,12885,12886,12887,12889],{},"Aslında bu projede geliştirmeler yaparken performans eğrilerini kontrol ediyordum. Ve sonra aslında sayfanın yüklenmesinin resimlerden ötürü uzun sürdüğünü fark ettim. Bu konu hakkında ",[20,12888,4614],{},"’ı kullanıyordum efektif olacağını düşünüyordum ancak öyle olmamış gözüküyor.",[16,12891,12892,12893,12898],{},"📌 Buradaki yaptığım geliştirme örneklerini ",[53,12894,12896],{"href":4621,"rel":12895},[57],[20,12897,4625],{}," üzerinden paylaştım.",[16,12900,12901],{},[35,12902],{"alt":364,"src":4630},[16,12904,12905,12906,12909],{},"📌 Burada ilk yaptığım işlem ",[53,12907,4614],{"href":4636,"rel":12908},[57],"’ı kaldırıp düz Img tagı kullanarak durumu izledim.",[16,12911,12912],{},[35,12913],{"alt":364,"src":4643},[16,12915,12916,12917,12919,12920,12923,12924,12926],{},"📌 Görüldüğü üzere değerlerimizde biraz bir düzelme oluyor ",[120,12918,4649],{}," değeri yükselmiş olsa da diğer parametrelerde ",[20,12921,12922],{},"%50","’yi geçen bir düşme söz konusu. Daha sonra Swiper’ın lazy ve img tag’ının lazy özelliklerini kullanıma açıyorum. Ve ",[120,12925,4657],{}," değerimizde ciddi bir düşme söz konusu oluyor.",[16,12928,12929],{},[35,12930],{"alt":364,"src":4663},[16,12932,12933,12934,12936],{},"📌 Daha sonra yine görsellerde gördüğümüz gibi ",[120,12935,4669],{},"’lerin component içerisinde tekrar tekrar import edilip yüklendiğini fark ediyorum. Ve bunu projemizin ana dizinine global olarak import ediyorum. Böylelikle bu sayfada tekrar tekrar yüklenmesine gerek kalmayacak.",[16,12938,12939],{},[35,12940],{"alt":364,"src":4675},[732,12942,12943],{},[16,12944,12945],{},"Yaptığımız süreçlerin daha karşılaştırılabilir bir şekilde gösterildiği bir tabloyu aşağıda bulabilirsiniz.👇",[4682,12947,12948,12970],{},[4685,12949,12950],{},[4688,12951,12952,12954,12956,12958,12960,12962,12964,12966,12968],{},[4691,12953,4693],{},[4691,12955,4696],{},[4691,12957,4699],{},[4691,12959,4649],{},[4691,12961,4704],{},[4691,12963,4707],{},[4691,12965,4710],{},[4691,12967,4657],{},[4691,12969,4625],{},[4716,12971,12972,12995,13018,13042],{},[4688,12973,12974,12976,12978,12980,12982,12984,12986,12988,12990],{},[4721,12975,4725],{},[4721,12977,4728],{},[4721,12979,4731],{},[4721,12981,4734],{},[4721,12983,4737],{},[4721,12985,4737],{},[4721,12987,4742],{},[4721,12989,4745],{},[4721,12991,12992],{},[53,12993,4725],{"href":4750,"rel":12994},[57],[4688,12996,12997,12999,13001,13003,13005,13007,13009,13011,13013],{},[4721,12998,4758],{},[4721,13000,4728],{},[4721,13002,4763],{},[4721,13004,4766],{},[4721,13006,4769],{},[4721,13008,4769],{},[4721,13010,4774],{},[4721,13012,4777],{},[4721,13014,13015],{},[53,13016,4758],{"href":4782,"rel":13017},[57],[4688,13019,13020,13022,13024,13026,13029,13031,13033,13035,13037],{},[4721,13021,4790],{},[4721,13023,4728],{},[4721,13025,4795],{},[4721,13027,13028],{},"0.253ms",[4721,13030,4801],{},[4721,13032,4801],{},[4721,13034,4806],{},[4721,13036,4809],{},[4721,13038,13039],{},[53,13040,4790],{"href":4814,"rel":13041},[57],[4688,13043,13044,13046,13048,13050,13053,13055,13057,13059,13061],{},[4721,13045,4790],{},[4721,13047,4824],{},[4721,13049,4827],{},[4721,13051,13052],{},"0.218ms",[4721,13054,4833],{},[4721,13056,4833],{},[4721,13058,4838],{},[4721,13060,4841],{},[4721,13062,13063],{},[53,13064,4848],{"href":4846,"rel":13065},[57],[16,13067,13068],{},[120,13069,13070,13072],{},[20,13071,4855],{}," Swiper CSS’lerinin sayfa içerisinde tekrar çağırılıp çağrılmadığını gösterir. Eğer değer “No” ise projenin ana dizinin de çağırılmıştır.",[732,13074,13075],{},[16,13076,13077,13078,13081],{},"Kısaltmalar ve metrikler hakkında bilginizin yeterli olmadığını düşünüyorsanız. Google ",[53,13079,4866],{"href":4864,"rel":13080},[57]," sizin için faydalı olabilir.",[16,13083,13084,13085,13087,13088,13090],{},"Görüldüğü üzere, ",[20,13086,4151],{},"’nin sağladığı Performans İzleme aracını kullanarak basit bir örnek oluşturduk ve kodumuzu daha optimize hale getirdik. Elbette farklı optimizasyon yöntemleri bulunmaktadır, ancak burada yaptığımız bazı basit düzeltmeler ve ",[20,13089,4151],{}," aracılığıyla sayfa yükleme hızımızı önemli ölçüde artırdık.",[732,13092,13093],{},[888,13094,13096],{"id":13095},"bu-iyileştirmelerle-sayfa-yükleme-hızımızı-yaklaşık-olarak-60-oranında-artırmış-olduk",[20,13097,13098],{},"Bu iyileştirmelerle sayfa yükleme hızımızı yaklaşık olarak %60 oranında artırmış olduk.",[16,13100,10405,13101,13105],{},[120,13102,13103],{},[20,13104,4151],{},"’nin kullanımı ve kurulumunun nasıl yapılacağına bize nasıl faydalı olacağına dair örnekler yaparak sizlere anlatmaya çalıştım.",[16,13107,13108,10415,13112,13115],{},[53,13109,200],{"href":13110,"rel":13111},"https:\u002F\u002Fmedium.com\u002F@eralpozcan\u002Fvue3-ile-sentry-nasil-kullanilir-6e56dc18623d",[57],[53,13113,4903],{"href":747,"rel":13114},[57],"hesabımdan sorularınız yada önerileriniz var ise ulaşabilirsiniz.",[16,13117,10425],{},[4088,13119,13120],{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":364,"searchDepth":778,"depth":778,"links":13122},[13123,13124,13125,13126,13127],{"id":12480,"depth":778,"text":12483},{"id":12553,"depth":778,"text":12554},{"id":12727,"depth":778,"text":12728},{"id":12822,"depth":778,"text":12823},{"id":13095,"depth":778,"text":13098},{"card_description":13129,"cover":4922,"language":800,"links":13130},"Sıklıkla hatalar ile karşılaşıyoruz ve bunları bulmak bir o kadar da zor olmuyor mu? Hata ve Performans İzleme araçlarından bir tanesi de Sentry. Bu yazıda, Sentry'nin nasıl kurulacağını ve performans izlemesiyle nasıl iyileştirmeler yapabileceğimizi anlatacağım. Hazırsan başlıyoruz! 🚀",[13131],{"medium":13110},"\u002Fblog\u002Fvue3-ile-sentry-nasil-kullanilir",{"title":12469,"description":12477},{"loc":13135,"lastmod":4919,"changefreq":812,"priority":813},"http:\u002F\u002Feralpozcan.dev\u002Fblog\u002Fvue3-ile-sentry-nasil-kullanilir","blog\u002Fvue3-ile-sentry-nasil-kullanilir",[4151,4123,12510,13138,4935,4127,4936],"Performans","2VDngm_Uxk69v1bjkt8jisOBXL8OFgENyo4FpXwY6Lg",1778079426552]