{"id":33760,"date":"2025-11-06T17:41:42","date_gmt":"2025-11-06T14:41:42","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=33760"},"modified":"2025-11-06T17:41:42","modified_gmt":"2025-11-06T14:41:42","slug":"gerekli-araclar-ve-ortam-kurulumu","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/gerekli-araclar-ve-ortam-kurulumu\/","title":{"rendered":"Gerekli Ara\u00e7lar ve Ortam Kurulumu"},"content":{"rendered":"

<\/p>\n

Modern web uygulamalar\u0131 geli\u015ftirirken, kullan\u0131c\u0131 deneyimini ve geli\u015ftirici verimlili\u011fini art\u0131rmak i\u00e7in do\u011fru teknoloji y\u0131\u011f\u0131n\u0131n\u0131 se\u00e7mek kritik \u00f6neme sahiptir. Bu rehberde, dinamik ve g\u00fc\u00e7l\u00fc bir blog uygulamas\u0131 olu\u015fturmak i\u00e7in Vue.js’in reaktif g\u00fcc\u00fcn\u00fc, GraphQL’in esnek veri sorgulama yetene\u011fini ve Apollo Client’\u0131n kapsaml\u0131 durum y\u00f6netimi \u00f6zelliklerini nas\u0131l bir araya getirece\u011finizi ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n

Vue.js, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in a\u015famal\u0131 bir JavaScript \u00e7er\u00e7evesidir. GraphQL, API’ler i\u00e7in bir sorgu dili ve \u00e7al\u0131\u015fma zaman\u0131d\u0131r, istemcinin tam olarak ihtiyac\u0131 olan veriyi istemesine olanak tan\u0131r. Apollo Client ise, GraphQL verilerini y\u00f6netmek ve \u00f6nbelle\u011fe almak i\u00e7in kapsaml\u0131 bir k\u00fct\u00fcphanedir, Vue uygulamalar\u0131n\u0131zla sorunsuz bir \u015fekilde entegre olur.<\/p>\n

Bu kombinasyon, performansl\u0131, \u00f6l\u00e7eklenebilir ve bak\u0131m\u0131 kolay bloglar veya herhangi bir veri odakl\u0131 uygulama olu\u015fturmak i\u00e7in idealdir.<\/p>\n

Gerekli Ara\u00e7lar ve Ortam Kurulumu<\/h2>\n

Ba\u015flamadan \u00f6nce, geli\u015ftirme ortam\u0131m\u0131z\u0131 haz\u0131rlamam\u0131z gerekiyor. A\u015fa\u011f\u0131daki ara\u00e7lara ihtiyac\u0131n\u0131z olacak:<\/p>\n

Node.js ve npm\/yarn:<\/strong> JavaScript \u00e7al\u0131\u015fma zaman\u0131 ve paket y\u00f6neticisi. Node.js’in en son LTS (Uzun S\u00fcreli Destek) s\u00fcr\u00fcm\u00fcn\u00fc resmi web sitesinden<\/a> indirip kurabilirsiniz. npm (Node Package Manager) veya yarn, Node.js ile birlikte gelir.<\/li>\n

Vue CLI:<\/strong> Vue.js projelerini h\u0131zl\u0131 bir \u015fekilde olu\u015fturmak ve y\u00f6netmek i\u00e7in komut sat\u0131r\u0131 aray\u00fcz\u00fc. Terminalinizde a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131rarak kurabilirsiniz:\n
npm install -g @vue\/cli\nveya<\/h2>\nyarn global add @vue\/cli<\/code><\/pre>\n<\/li>\nBir Kod D\u00fczenleyici:<\/strong> Visual Studio Code gibi modern bir kod d\u00fczenleyici, syntax vurgulama ve uzant\u0131larla geli\u015ftirme s\u00fcrecinizi b\u00fcy\u00fck \u00f6l\u00e7\u00fcde kolayla\u015ft\u0131racakt\u0131r.<\/li>\n<\/ul>\nBu ara\u00e7lar\u0131 kurduktan sonra, hem GraphQL sunucumuz hem de Vue istemci uygulamam\u0131z i\u00e7in temel proje yap\u0131lar\u0131n\u0131 olu\u015fturmaya haz\u0131r\u0131z.<\/p>\n GraphQL Sunucusu Kurulumu<\/h2>\nBlog yaz\u0131lar\u0131m\u0131z\u0131 depolayacak ve istemci uygulamam\u0131z\u0131n sorgulayabilece\u011fi bir GraphQL sunucusu olu\u015fturarak ba\u015flayaca\u011f\u0131z. Bu \u00f6rnekte, h\u0131zl\u0131 ve kolay kurulumu nedeniyle apollo-server<\/code> kullanaca\u011f\u0131z.<\/p>\n \nProje Dizini Olu\u015fturma:<\/strong>\nmkdir blog-server\ncd blog-server\nnpm init -y<\/code><\/pre>\n<\/li>\nGerekli Paketleri Kurma:<\/strong>\nnpm install apollo-server graphql<\/code><\/pre>\n<\/li>\nSunucuyu Olu\u015fturma (index.js<\/code>):<\/strong>\nA\u015fa\u011f\u0131daki kod, basit bir blog \u015femas\u0131 ve baz\u0131 sahte verilerle bir GraphQL sunucusu olu\u015fturur. Bu sunucu, blog yaz\u0131lar\u0131n\u0131 sorgulamak i\u00e7in bir API sa\u011flayacakt\u0131r.<\/p>\n \/\/ index.js\nconst { ApolloServer, gql } = require('apollo-server');\n\n\/\/ Sahte Veriler\nconst posts = [\n {\n id: '1',\n title: 'Vue.js ile \u0130lk Blog Yaz\u0131m',\n content: 'Vue.js kullanarak harika bir kullan\u0131c\u0131 aray\u00fcz\u00fc olu\u015fturmak \u00e7ok kolay!',\n author: 'Ali Can',\n },\n {\n id: '2',\n title: 'GraphQL Neden \u00d6nemli?',\n content: 'GraphQL, REST API\\'lere g\u00f6re daha esnek ve verimli veri \u00e7ekme imkan\u0131 sunar.',\n author: 'Ay\u015fe Demir',\n },\n {\n id: '3',\n title: 'Apollo Client ile Durum Y\u00f6netimi',\n content: 'Apollo Client, GraphQL verilerini \u00f6nbelle\u011fe almak ve y\u00f6netmek i\u00e7in g\u00fc\u00e7l\u00fc bir \u00e7\u00f6z\u00fcmd\u00fcr.',\n author: 'Mehmet Y\u0131lmaz',\n },\n];\n\n\/\/ GraphQL \u015eemas\u0131\nconst typeDefs = gql\n type Post {\n id: ID!\n title: String!\n content: String!\n author: String!\n }\n\n type Query {\n posts: [Post]\n post(id: ID!): Post\n }\n<\/code>;\n\n\/\/ \u00c7\u00f6z\u00fcmleyiciler (Resolvers)\nconst resolvers = {\n Query: {\n posts: () => posts,\n post: (parent, { id }) => posts.find(post => post.id === id),\n },\n};\n\n\/\/ Apollo Sunucusunu Ba\u015flatma\nconst server = new ApolloServer({ typeDefs, resolvers });\n\nserver.listen({ port: 4000 }).then(({ url }) => {\n console.log( GraphQL Sunucusu ${url} adresinde haz\u0131r!<\/code>);\n});\n<\/code><\/pre>\n<\/li>\nSunucuyu \u00c7al\u0131\u015ft\u0131rma:<\/strong>\nnode index.js<\/code><\/pre>\nTerminalinizde “GraphQL Sunucusu http:\/\/localhost:4000\/ adresinde haz\u0131r!” mesaj\u0131n\u0131 g\u00f6rmelisiniz. Bu adrese giderek Apollo Studio’yu (\u00f6nceki ad\u0131yla GraphQL Playground) kullanarak sorgular\u0131n\u0131z\u0131 test edebilirsiniz.<\/p>\n<\/li>\n<\/ol>\n Vue Uygulamas\u0131 Kurulumu ve Apollo Client Entegrasyonu<\/h2>\n\u015eimdi istemci taraf\u0131 Vue uygulamam\u0131z\u0131 olu\u015ftural\u0131m ve GraphQL sunucumuzla ileti\u015fim kurmak i\u00e7in Apollo Client’\u0131 entegre edelim.<\/p>\n \nVue Projesi Olu\u015fturma:<\/strong>\nvue create blog-client<\/code><\/pre>\nSoruldu\u011funda “Default (Vue 3)” veya “Manually select features” se\u00e7ene\u011fini se\u00e7ebilirsiniz. Manuel se\u00e7erseniz, Router \u00f6zelli\u011fini dahil etti\u011finizden emin olun.<\/p>\n<\/li>\n Vue Apollo Eklentisini Ekleme:<\/strong>\nVue CLI, Apollo Client’\u0131 Vue uygulamalar\u0131na entegre etmek i\u00e7in harika bir eklentiye sahiptir:<\/p>\n cd blog-client\nvue add apollo<\/code><\/pre>\nBu komut, gerekli paketleri y\u00fckleyecek (vue-apollo<\/code>, graphql<\/code>, apollo-boost<\/code>, graphql-tag<\/code>) ve temel Apollo Client yap\u0131land\u0131rmas\u0131n\u0131 src\/main.js<\/code> veya ayr\u0131 bir src\/apollo.js<\/code> dosyas\u0131na ekleyecektir. Varsay\u0131lan olarak, GraphQL sunucu URL’sini http:\/\/localhost:4000\/graphql<\/code> olarak ayarlayacakt\u0131r, bu da bizim sunucumuzla e\u015fle\u015fiyor.<\/p>\n E\u011fer vue add apollo<\/code> kullanmak istemezseniz, a\u015fa\u011f\u0131daki ad\u0131mlar\u0131 manuel olarak yapabilirsiniz:<\/p>\n npm install vue-apollo graphql apollo-boost graphql-tag<\/code><\/pre>\nVe src\/main.js<\/code> dosyan\u0131z\u0131 g\u00fcncelleyin:<\/p>\n \/\/ src\/main.js (Manuel Kurulum)\nimport { createApp } from 'vue';\nimport App from '.\/App.vue';\nimport router from '.\/router';\n\nimport { ApolloClient, createHttpLink, InMemoryCache } from '@apollo\/client\/core';\nimport { provideApolloClient } from '@vue\/apollo-composable';\n\n\/\/ HTTP ba\u011flant\u0131s\u0131 olu\u015ftur\nconst httpLink = createHttpLink({\n uri: 'http:\/\/localhost:4000\/', \/\/ GraphQL sunucunuzun adresi\n});\n\n\/\/ Apollo Client \u00f6rne\u011fini olu\u015ftur\nconst apolloClient = new ApolloClient({\n link: httpLink,\n cache: new InMemoryCache(),\n});\n\nconst app = createApp(App);\n\napp.use(router);\n\n\/\/ Vue uygulamas\u0131na Apollo Client'\u0131 sa\u011fla\nprovideApolloClient(apolloClient);\n\napp.mount('#app');\n<\/code><\/pre>\nvue add apollo<\/code> kulland\u0131\u011f\u0131n\u0131zda, bu yap\u0131land\u0131rmalar\u0131n \u00e7o\u011fu otomatik olarak halledilir ve genellikle src\/main.js<\/code> dosyan\u0131zda apolloProvider<\/code>‘\u0131 uygulaman\u0131za ba\u011flayan bir kod blo\u011fu g\u00f6r\u00fcrs\u00fcn\u00fcz.<\/p>\n<\/li>\n<\/ol>\n Blog \u0130\u00e7eri\u011fini \u00c7ekme ve G\u00f6r\u00fcnt\u00fcleme<\/h2>\n\u015eimdi blog yaz\u0131lar\u0131m\u0131z\u0131 GraphQL sunucumuzdan \u00e7ekip Vue bile\u015fenlerimizde g\u00f6r\u00fcnt\u00fcleyelim.<\/p>\n T\u00fcm Blog Yaz\u0131lar\u0131n\u0131 Listeleme (PostList.vue<\/code>)<\/h3>\n\u00d6ncelikle t\u00fcm blog yaz\u0131lar\u0131n\u0131 listeleyecek bir bile\u015fen olu\u015ftural\u0131m. src\/views\/Home.vue<\/code> dosyas\u0131n\u0131 d\u00fczenleyebiliriz.<\/p>\n

T\u00fcm Blog Yaz\u0131lar\u0131n\u0131 Listeleme (`PostList.vue<\/code>)<\/h3>\n\u00d6ncelikle t\u00fcm blog yaz\u0131lar\u0131n\u0131 listeleyecek bir bile\u015fen olu\u015ftural\u0131m. src\/views\/Home.vue<\/code> dosyas\u0131n\u0131 d\u00fczenleyebiliriz.<\/p>\n`

\n \n {{ post.title }}\n <\/router-link>\n <\/h3>\n
Yazar: {{ post.author }}<\/p>\n <\/li>\n <\/ul>\n
Hen\u00fcz hi\u00e7 yaz\u0131 bulunmuyor.<\/div>\n <\/div>\n<\/template>\n\n