Modern web geli\u015ftirme d\u00fcnyas\u0131nda, h\u0131zl\u0131 y\u00fcklenen, g\u00fcvenli ve \u00f6l\u00e7eklenebilir web siteleri olu\u015fturmak b\u00fcy\u00fck \u00f6nem ta\u015f\u0131maktad\u0131r. Bu hedeflere ula\u015fmak i\u00e7in Gatsby gibi statik site olu\u015fturucular (SSG) ve Airtable gibi esnek, API odakl\u0131 i\u00e7erik y\u00f6netim sistemleri (CMS) veya veri taban\u0131 \u00e7\u00f6z\u00fcmleri m\u00fckemmel bir ikili olu\u015fturur. Bu rehberde, Airtable’\u0131 bir i\u00e7erik kayna\u011f\u0131 olarak kullanarak Gatsby ile nas\u0131l dinamik web siteleri olu\u015fturaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n
Airtable, geleneksel bir elektronik tablo aray\u00fcz\u00fcn\u00fcn basitli\u011fini, g\u00fc\u00e7l\u00fc bir ili\u015fkisel veri taban\u0131n\u0131n esnekli\u011fiyle birle\u015ftiren hibrit bir ara\u00e7t\u0131r. Verilerinizi d\u00fczenleyebilir, farkl\u0131 alan tipleriyle (metin, say\u0131, resim, tarih, \u00e7oktan se\u00e7meli vb.) zenginle\u015ftirebilir ve g\u00fc\u00e7l\u00fc bir API arac\u0131l\u0131\u011f\u0131yla bu verilere kolayca eri\u015febilirsiniz. Bu \u00f6zellikler, Airtable’\u0131 bir headless CMS, \u00fcr\u00fcn katalo\u011fu, proje y\u00f6netim arac\u0131 veya basit bir blog i\u00e7in ideal bir veri depolama \u00e7\u00f6z\u00fcm\u00fc haline getirir.<\/p>\n
Gatsby ise React tabanl\u0131, y\u00fcksek performansl\u0131 bir statik site olu\u015fturucudur. Geli\u015ftirme s\u00fcrecinde GraphQL kullanarak farkl\u0131 veri kaynaklar\u0131ndan (API’ler, Markdown dosyalar\u0131, CMS’ler) veri \u00e7ekebilir ve bu verileri \u00f6nceden derlenmi\u015f, optimize edilmi\u015f statik HTML, CSS ve JavaScript dosyalar\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. Sonu\u00e7 olarak, siteleriniz inan\u0131lmaz derecede h\u0131zl\u0131 y\u00fcklenir, g\u00fcvenlidir ve d\u00fc\u015f\u00fck bar\u0131nd\u0131rma maliyetlerine sahiptir.<\/p>\n
Bu iki teknolojinin birle\u015fimi, i\u00e7erik y\u00f6neticilerinin Airtable’\u0131n kullan\u0131c\u0131 dostu aray\u00fcz\u00fcnde i\u00e7eriklerini kolayca y\u00f6netirken, geli\u015ftiricilerin Gatsby’nin g\u00fcc\u00fcyle h\u0131zl\u0131, SEO dostu ve modern web deneyimleri sunmas\u0131na olanak tan\u0131r.<\/p>\n
Airtable verilerinizi Gatsby uygulaman\u0131zda kullanmaya ba\u015flamadan \u00f6nce, hem yerel geli\u015ftirme ortam\u0131n\u0131z\u0131 hem de Airtable base’inizi haz\u0131rlaman\u0131z gerekir.<\/p>\n
\u0130lk olarak, Gatsby komut sat\u0131r\u0131 aray\u00fcz\u00fcn\u00fc (CLI) k\u00fcresel olarak y\u00fcklemeniz gerekir:<\/p>\n
npm install -g gatsby-cli<\/code><\/pre>\nArd\u0131ndan, yeni bir Gatsby projesi olu\u015fturun ve proje dizinine gidin:<\/p>\n
gatsby new my-airtable-gatsby-app\ncd my-airtable-gatsby-app<\/code><\/pre>\nBu komutlar, temel bir Gatsby projesi yap\u0131s\u0131n\u0131 olu\u015fturacakt\u0131r.<\/p>\n
Airtable Hesab\u0131 ve Base Olu\u015fturma<\/h4>\n
1. Airtable Hesab\u0131 Olu\u015fturma:<\/strong> E\u011fer bir Airtable hesab\u0131n\u0131z yoksa, Airtable web sitesinden \u00fccretsiz bir hesap olu\u015fturun.
\n2. Yeni Bir Base Olu\u015fturma:<\/strong> Hesab\u0131n\u0131za giri\u015f yapt\u0131ktan sonra, “Add a base” veya “Yeni bir base ekle” se\u00e7ene\u011fiyle yeni bir base olu\u015fturun. \u00d6rne\u011fin, “Gatsby \u00dcr\u00fcn Katalo\u011fu” ad\u0131nda bir base olu\u015fturabilirsiniz.
\n3. Tablo ve Alanlar Olu\u015fturma:<\/strong> Base’inizin i\u00e7inde, verilerinizi tutacak bir tablo olu\u015fturun. Varsay\u0131lan olarak “Table 1” ad\u0131nda bir tablo bulunur, ad\u0131n\u0131 “\u00dcr\u00fcnler” olarak de\u011fi\u015ftirebilirsiniz. Ard\u0131ndan, \u00fcr\u00fcnleriniz i\u00e7in gerekli alanlar\u0131 (fields) tan\u0131mlay\u0131n. \u00d6rne\u011fin:
\n * Ba\u015fl\u0131k<\/code> (Single line text)
\n * A\u00e7\u0131klama<\/code> (Long text)
\n * Fiyat<\/code> (Number, Currency format)
\n * Stok Durumu<\/code> (Single select, se\u00e7enekler: “Stokta”, “T\u00fckendi”)
\n * Resim<\/code> (Attachment)
\n * Yay\u0131n Tarihi<\/code> (Date)<\/p>\n Bu alanlar\u0131 olu\u015fturduktan sonra, birka\u00e7 \u00f6rnek \u00fcr\u00fcn verisi ekleyin. \u00d6zellikle Resim<\/code> alan\u0131 i\u00e7in dosya y\u00fcklemeyi unutmay\u0131n.<\/p>\nAirtable API Anahtar\u0131 ve Base ID Alma<\/h4>\n
Gatsby uygulaman\u0131z\u0131n Airtable verilerine eri\u015febilmesi i\u00e7in API anahtar\u0131n\u0131za ve base ID’nize ihtiyac\u0131n\u0131z olacak.<\/p>\n
1. API Anahtar\u0131:<\/strong> Airtable hesab\u0131n\u0131za giri\u015f yap\u0131n, sa\u011f \u00fcst k\u00f6\u015fedeki profil foto\u011fraf\u0131n\u0131za t\u0131klay\u0131n ve “Account” (Hesap) se\u00e7ene\u011fine gidin. Sol men\u00fcde “API” sekmesini bulacaks\u0131n\u0131z. Burada “YOUR API KEY” etiketli anahtar\u0131n\u0131z\u0131 g\u00f6receksiniz. Bu anahtar\u0131 kopyalay\u0131n.
\n \u00d6NEML\u0130 G\u00dcVENL\u0130K NOTU:<\/strong> Bu anahtar \u00f6zeldir ve asla genel bir depoda (GitHub gibi) a\u00e7\u0131k\u00e7a yay\u0131mlanmamal\u0131d\u0131r. Ortam de\u011fi\u015fkenleri kullanarak g\u00fcvenli\u011fini sa\u011flayaca\u011f\u0131z.
\n2. Base ID:<\/strong> Base ID’nizi bulman\u0131n en kolay yolu, Airtable API belgelerine gitmektir. https:\/\/airtable.com\/api<\/code> adresine gidin. Burada t\u00fcm base’lerinizin listesini g\u00f6receksiniz. \u0130lgili base’inize t\u0131klad\u0131\u011f\u0131n\u0131zda, dok\u00fcmantasyon sayfas\u0131n\u0131n URL’sinde appXXXXXXXXX<\/code> format\u0131nda bir Base ID g\u00f6receksiniz. \u00d6rne\u011fin: https:\/\/airtable.com\/appXXXXXXXXX\/api\/docs<\/code>. Bu ID’yi kopyalay\u0131n.<\/p>\nGatsby ile Airtable Entegrasyonu<\/h3>\n
Art\u0131k Airtable verilerimiz haz\u0131r ve API anahtarlar\u0131m\u0131z mevcut. \u015eimdi Gatsby uygulamam\u0131z\u0131 Airtable’dan veri \u00e7ekmek \u00fczere yap\u0131land\u0131ral\u0131m.<\/p>\n
Gatsby Kaynak Eklentisi Kurulumu<\/h4>\n
Gatsby, farkl\u0131 veri kaynaklar\u0131ndan veri \u00e7ekmek i\u00e7in “kaynak eklentileri” (source plugins) kullan\u0131r. Airtable i\u00e7in gatsby-source-airtable<\/code> eklentisini kullanaca\u011f\u0131z.<\/p>\nProje dizininizde bu eklentiyi ve ortam de\u011fi\u015fkenlerini y\u00f6netmek i\u00e7in dotenv<\/code> paketini y\u00fckleyin:<\/p>\nnpm install gatsby-source-airtable dotenv<\/code><\/pre>\nOrtam De\u011fi\u015fkenlerini Yap\u0131land\u0131rma (.env<\/code>)<\/h4>\nAPI anahtar\u0131n\u0131z\u0131 ve base ID’nizi do\u011frudan kodunuza yazmak yerine, ortam de\u011fi\u015fkenleri kullanmak en iyi pratiktir. Projenizin k\u00f6k dizininde .env<\/code> ad\u0131nda bir dosya olu\u015fturun ve i\u00e7ine a\u015fa\u011f\u0131daki sat\u0131rlar\u0131 ekleyin (kendi anahtar ve ID’nizle de\u011fi\u015ftirerek):<\/p>\nAIRTABLE_API_KEY=YOUR_AIRTABLE_API_KEY\nAIRTABLE_BASE_ID=YOUR_AIRTABLE_BASE_ID<\/code><\/pre>\nArd\u0131ndan, bu .env<\/code> dosyas\u0131n\u0131n git deposuna y\u00fcklenmesini engellemek i\u00e7in .gitignore<\/code> dosyan\u0131za a\u015fa\u011f\u0131daki sat\u0131r\u0131 ekleyin:<\/p>\n.env<\/code><\/pre>\ngatsby-config.js<\/code> Yap\u0131land\u0131rmas\u0131<\/h4>\nGatsby uygulaman\u0131z\u0131n ana yap\u0131land\u0131rma dosyas\u0131 olan gatsby-config.js<\/code> dosyas\u0131n\u0131 a\u00e7\u0131n. dotenv<\/code> paketini dosyan\u0131n en \u00fcst\u00fcnde \u00e7a\u011f\u0131rarak ortam de\u011fi\u015fkenlerinizi y\u00fckleyin ve gatsby-source-airtable<\/code> eklentisini plugins<\/code> dizisine ekleyin:<\/p>\nrequire('dotenv').config({\n path: .env.${process.env.NODE_ENV}<\/code>, \/\/ Ortam de\u011fi\u015fkenlerini y\u00fcklemek i\u00e7in path belirtme\n});\n\nmodule.exports = {\n siteMetadata: {\n title: Gatsby Airtable \u00d6rne\u011fi<\/code>,\n description: Airtable'dan veri \u00e7eken bir Gatsby uygulamas\u0131.<\/code>,\n author: @gatsbyjs<\/code>,\n },\n plugins: [\n gatsby-plugin-react-helmet<\/code>,\n {\n resolve: gatsby-source-filesystem<\/code>,\n options: {\n name: images<\/code>,\n path: ${__dirname}\/src\/images<\/code>,\n },\n },\n gatsby-transformer-sharp<\/code>,\n gatsby-plugin-sharp<\/code>,\n {\n resolve: gatsby-plugin-manifest<\/code>,\n options: {\n name: gatsby-starter-default<\/code>,\n short_name: starter<\/code>,\n start_url: \/<\/code>,\n background_color: #663399<\/code>,\n theme_color: #663399<\/code>,\n display: minimal-ui<\/code>,\n icon: src\/images\/gatsby-icon.png<\/code>, \/\/ Bu yolu kendi ikonunuzla de\u011fi\u015ftirin\n },\n },\n \/\/ Airtable kaynak eklentisi\n {\n resolve: 'gatsby-source-airtable',\n options: {\n apiKey: process.env.AIRTABLE_API_KEY, \/\/ .env dosyas\u0131ndan API anahtar\u0131\n baseId: process.env.AIRTABLE_BASE_ID, \/\/ .env dosyas\u0131ndan Base ID\n tables: [\n {\n baseId: process.env.AIRTABLE_BASE_ID,\n tableName: '\u00dcr\u00fcnler', \/\/ Airtable'daki tablo ad\u0131n\u0131z\n \/\/ tableView: 'Grid view', \/\/ \u0130ste\u011fe ba\u011fl\u0131: Belirli bir g\u00f6r\u00fcn\u00fcmden veri \u00e7ekmek isterseniz\n \/\/ queryName: 'products', \/\/ \u0130ste\u011fe ba\u011fl\u0131: GraphQL sorgular\u0131nda kullanmak i\u00e7in bir isim\n \/\/ mapping: { Resim: fileNode<\/code> }, \/\/ \u0130ste\u011fe ba\u011fl\u0131: Resim alanlar\u0131n\u0131 Gatsby'nin dosya d\u00fc\u011f\u00fcmlerine d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in\n },\n \/\/ E\u011fer birden fazla tabloya sahipseniz, buraya ekleyebilirsiniz:\n \/\/ {\n \/\/ baseId: process.env.AIRTABLE_BASE_ID,\n \/\/ tableName: 'Blog Yaz\u0131lar\u0131',\n \/\/ \/\/ ... di\u011fer se\u00e7enekler\n \/\/ },\n ],\n },\n },\n \/\/ Bu eklentiyi en sona ekleyin\n gatsby-plugin-offline<\/code>,\n ],\n};<\/code><\/pre>\nYukar\u0131daki yap\u0131land\u0131rmada, tables<\/code> dizisi i\u00e7ine Airtable base’inizdeki her bir tablo i\u00e7in bir nesne eklemeniz gerekir. tableName<\/code> \u00f6zelli\u011fini kendi tablo ad\u0131n\u0131zla de\u011fi\u015ftirmeyi unutmay\u0131n (“\u00dcr\u00fcnler” \u00f6rne\u011fimizde).<\/p>\nYap\u0131land\u0131rma dosyas\u0131n\u0131 kaydettikten sonra, geli\u015ftirme sunucunuzu yeniden ba\u015flatman\u0131z gerekir:<\/p>\n
gatsby develop<\/code><\/pre>\nVeri \u00c7ekme ve GraphQL<\/h4>\n
Gatsby geli\u015ftirme sunucusu \u00e7al\u0131\u015f\u0131rken, taray\u0131c\u0131n\u0131zda http:\/\/localhost:8000\/___graphql<\/code> adresine giderek GraphQL aray\u00fcz\u00fcn\u00fc a\u00e7\u0131n. Burada, Airtable’dan \u00e7ekilen verileri ke\u015ffedebilirsiniz.<\/p>\nSol taraftaki “Explorer” b\u00f6l\u00fcm\u00fcnde, allAirtable<\/code> veya airtable<\/code> gibi se\u00e7enekler g\u00f6receksiniz. allAirtable<\/code>‘a t\u0131klay\u0131n, ard\u0131ndan nodes<\/code> ve data<\/code> alt\u0131ndaki alanlar\u0131n\u0131z\u0131 se\u00e7in. \u00d6rne\u011fin:<\/p>\nquery MyAirtableProducts {\n allAirtable(filter: {table: {eq: \"\u00dcr\u00fcnler\"}}) {\n nodes {\n id\n data {\n Ba\u015fl\u0131k\n A\u00e7\u0131klama\n Fiyat\n Resim {\n url\n filename\n }\n Stok_Durumu\n Yay\u0131n_Tarihi\n }\n }\n }\n}<\/code><\/pre>\nYukar\u0131daki sorguyu \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zda, Airtable’daki “\u00dcr\u00fcnler” tablonuzdan \u00e7ekilen verileri JSON format\u0131nda g\u00f6receksiniz. Alan adlar\u0131n\u0131n GraphQL’de genellikle k\u00fc\u00e7\u00fck harfle ba\u015flad\u0131\u011f\u0131na veya bo\u015fluklar\u0131n _<\/code> ile de\u011fi\u015ftirildi\u011fine dikkat edin (\u00f6rne\u011fin “Stok Durumu” -> Stok_Durumu<\/code>). Resim alan\u0131, bir dizi nesne olarak gelir ve url<\/code> \u00f6zelli\u011fini kullanarak resim linkine eri\u015febilirsiniz.<\/p>\nVerileri Gatsby Uygulamas\u0131nda G\u00f6r\u00fcnt\u00fcleme<\/h3>\n
Art\u0131k GraphQL ile Airtable verilerine eri\u015febildi\u011fimize g\u00f6re, bu verileri Gatsby sayfalar\u0131n\u0131zda veya bile\u015fenlerinizde g\u00f6r\u00fcnt\u00fcleyebiliriz.<\/p>\n
Sayfa Bile\u015feni Olu\u015fturma ve Verileri G\u00f6r\u00fcnt\u00fcleme<\/h4>\n
src\/pages\/index.js<\/code> dosyas\u0131n\u0131 a\u00e7\u0131n ve i\u00e7eri\u011fini a\u015fa\u011f\u0131daki gibi g\u00fcncelleyin veya src\/pages\/urunler.js<\/code> ad\u0131nda yeni bir dosya olu\u015fturun:<\/p>\nimport React from 'react';\nimport { graphql } from 'gatsby';\n\nconst UrunlerSayfasi = ({ data }) => {\n const urunler = data.allAirtable.nodes;\n\n return (\n \n \n Airtable'dan \u00e7ekilen \u00fcr\u00fcnler:<\/p>\n
\n {urunler.map(urun => (\n \n {urun.data.Ba\u015fl\u0131k}<\/h3>\n {urun.data.Resim && urun.data.Resim.length > 0 && (\n
{urun.data.A\u00e7\u0131klama}<\/p>\n
Fiyat:<\/strong> {urun.data.Fiyat} TL<\/p>\n Stok Durumu:<\/strong> {urun.data.Stok_Durumu}<\/span><\/p>\n Yay\u0131n Tarihi: {new Date(urun.data.Yay\u0131n_Tarihi).toLocaleDateString('tr-TR')}<\/small>\n <\/div>\n ))}\n <\/div>\n <\/div>\n );\n};\n\nexport const query = graphql\n query AirtableUrunlerQuery {\n allAirtable(filter: { table: { eq: \"\u00dcr\u00fcnler\" } }, sort: { fields: data___Yay\u0131n_Tarihi, order: DESC }) {\n nodes {\n id\n data {\n Ba\u015fl\u0131k\n A\u00e7\u0131klama\n Fiyat\n Resim {\n url\n filename\n thumbnails {\n large {\n url\n }\n }\n }\n Stok_Durumu\n Yay\u0131n_Tarihi\n }\n }\n }\n }\n<\/code>;\n\nexport default UrunlerSayfasi;<\/code><\/pre>\nBu kodda:<\/p>\n
1. graphql<\/code> etiketli bir sorgu tan\u0131ml\u0131yoruz. Bu sorgu, allAirtable<\/code> d\u00fc\u011f\u00fcm\u00fcnden “\u00dcr\u00fcnler” tablosundaki t\u00fcm verileri \u00e7eker. sort<\/code> parametresiyle verileri yay\u0131n tarihine g\u00f6re s\u0131ral\u0131yoruz.
\n2. Sorgu sonu\u00e7lar\u0131, sayfa bile\u015fenimize data<\/code> prop’u olarak otomatik olarak iletilir.
\n3. data.allAirtable.nodes<\/code> dizisini kullanarak \u00fcr\u00fcnler \u00fczerinde d\u00f6ng\u00fc yap\u0131yoruz.
\n4. Her \u00fcr\u00fcn\u00fcn verilerine urun.data.Ba\u015fl\u0131k<\/code>, urun.data.A\u00e7\u0131klama<\/code> gibi alan adlar\u0131yla eri\u015fiyoruz.
\n5. Resim<\/code> alan\u0131 bir dizi nesne d\u00f6nd\u00fcrd\u00fc\u011f\u00fc i\u00e7in, urun.data.Resim[0].url<\/code> ile ilk resmin URL’sine eri\u015fiyoruz.
\n6. Stok_Durumu<\/code> gibi alanlar\u0131 ko\u015fullu olarak renklendirmek gibi basit stil uygulamalar\u0131 ekliyoruz.
\n7. Tarih alanlar\u0131n\u0131 toLocaleDateString<\/code> ile okunabilir bir formata d\u00f6n\u00fc\u015ft\u00fcr\u00fcyoruz.<\/p>\nDosyay\u0131 kaydedin ve http:\/\/localhost:8000\/<\/code> (veya http:\/\/localhost:8000\/urunler<\/code> e\u011fer urunler.js<\/code> olarak kaydettiyseniz) adresini ziyaret edin. Airtable’dan \u00e7ekti\u011finiz \u00fcr\u00fcnlerin Gatsby uygulaman\u0131zda g\u00f6r\u00fcnt\u00fclendi\u011fini g\u00f6receksiniz!<\/p>\nDinamik Sayfalar Olu\u015fturma (\u0130ste\u011fe Ba\u011fl\u0131)<\/h4>\n
E\u011fer her \u00fcr\u00fcn i\u00e7in ayr\u0131 bir sayfa olu\u015fturmak isterseniz, bu durumda gatsby-node.js<\/code> dosyas\u0131n\u0131 kullanman\u0131z gerekir. Bu dosya, Gatsby’nin build a\u015famas\u0131nda Node.js ortam\u0131nda \u00e7al\u0131\u015f\u0131r ve createPages<\/code> API’sini kullanarak programatik olarak sayfalar olu\u015fturman\u0131za olanak tan\u0131r.<\/p>\n\u00d6rne\u011fin, her \u00fcr\u00fcn i\u00e7in \/urunler\/urun-adi<\/code> \u015feklinde bir URL olu\u015fturabilirsiniz:<\/p>\n\/\/ gatsby-node.js\nconst path = require('path');\n\nexports.createPages = async ({ graphql, actions }) => {\n const { createPage } = actions;\n const productTemplate = path.resolve('.\/src\/templates\/product-detail.js');\n\n const result = await graphql(\n query {\n allAirtable(filter: { table: { eq: \"\u00dcr\u00fcnler\" } }) {\n nodes {\n id\n data {\n Ba\u015fl\u0131k\n }\n }\n }\n }\n <\/code>);\n\n if (result.errors) {\n throw result.errors;\n }\n\n const products = result.data.allAirtable.nodes;\n\n products.forEach(product => {\n createPage({\n path: \/urunler\/${product.data.Ba\u015fl\u0131k.toLowerCase().replace(\/ \/g, '-')}\/<\/code>,\n component: productTemplate,\n context: {\n id: product.id, \/\/ Sayfaya ge\u00e7ilecek veri\n },\n });\n });\n};<\/code><\/pre>\nArd\u0131ndan, src\/templates\/product-detail.js<\/code> ad\u0131nda bir \u015fablon dosyas\u0131 olu\u015fturarak belirli bir \u00fcr\u00fcn\u00fcn detaylar\u0131n\u0131 g\u00f6r\u00fcnt\u00fcleyebilirsiniz. Bu \u015fablon, context<\/code> olarak iletilen id<\/code> de\u011ferini kullanarak ilgili \u00fcr\u00fcn\u00fcn detaylar\u0131n\u0131 GraphQL ile \u00e7eker.<\/p>\nSonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n
Airtable ve Gatsby’nin birle\u015fimi, i\u00e7erik y\u00f6netimi esnekli\u011fi ile y\u00fcksek performansl\u0131, statik web siteleri olu\u015fturma yetene\u011fini bir araya getirerek g\u00fc\u00e7l\u00fc bir \u00e7\u00f6z\u00fcm sunar. Bu rehberde \u00f6\u011frendi\u011finiz ad\u0131mlarla, kendi Airtable destekli Gatsby projelerinizi olu\u015fturmaya haz\u0131rs\u0131n\u0131z. \u0130ster basit bir blog, ister kapsaml\u0131 bir \u00fcr\u00fcn katalo\u011fu veya bir proje y\u00f6netim paneli olsun, bu ikili size h\u0131zl\u0131 ve \u00f6l\u00e7eklenebilir bir temel sa\u011flayacakt\u0131r.<\/p>\n
S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h4>\n1. Airtable’dan sadece belirli verileri nas\u0131l \u00e7ekerim?<\/h3>\n
GraphQL sorgular\u0131n\u0131zda filter<\/code> arg\u00fcman\u0131n\u0131 kullanabilirsiniz. \u00d6rne\u011fin, sadece stokta olan \u00fcr\u00fcnleri \u00e7ekmek i\u00e7in:
\nallAirtable(filter: { table: { eq: \"\u00dcr\u00fcnler\" }, data: { Stok_Durumu: { eq: \"Stokta\" } } }) { ... }<\/code>
\nGraphQL aray\u00fcz\u00fcnde (\/___graphql<\/code>) Explorer’\u0131 kullanarak filtreleme se\u00e7eneklerini ke\u015ffedebilirsiniz.<\/p>\n2. Airtable’daki bir alan\u0131n ad\u0131 de\u011fi\u015firse ne olur?<\/h3>\n
Airtable’daki bir alan\u0131n ad\u0131n\u0131 de\u011fi\u015ftirdi\u011finizde, Gatsby’nin GraphQL \u015femas\u0131 bu de\u011fi\u015fikli\u011fi otomatik olarak alg\u0131lamayabilir. Geli\u015ftirme sunucunuzu (gatsby develop<\/code>) yeniden ba\u015flatman\u0131z veya gatsby clean<\/code> komutunu \u00e7al\u0131\u015ft\u0131r\u0131p ard\u0131ndan gatsby develop<\/code> ile \u00f6nbelle\u011fi temizleyip \u015femay\u0131 yeniden olu\u015fturman\u0131z gerekebilir. GraphQL aray\u00fcz\u00fcnde yeni alan ad\u0131n\u0131 kontrol edin.<\/p>\n3. Airtable’daki resimleri nas\u0131l optimize ederim?<\/h3>\n
gatsby-source-airtable<\/code> eklentisi mapping<\/code> se\u00e7ene\u011fi ile Airtable’daki Attachment<\/code> (ek) alanlar\u0131n\u0131 Gatsby’nin dosya d\u00fc\u011f\u00fcmlerine d\u00f6n\u00fc\u015ft\u00fcrmenize olanak tan\u0131r. Daha sonra gatsby-plugin-image<\/code> ve gatsby-plugin-sharp<\/code> gibi eklentilerle resimleri otomatik olarak optimize edebilir, farkl\u0131 boyutlarda olu\u015fturabilir ve tembel y\u00fckleme (lazy loading) gibi \u00f6zelliklerden faydalanabilirsiniz. Bu, daha geli\u015fmi\u015f bir konudur ve ayr\u0131 bir rehber gerektirebilir.<\/p>\n4. Gatsby \u00fczerinden Airtable’a veri yazabilir miyim?<\/h3>\n
Gatsby, bir statik site olu\u015fturucu oldu\u011fu i\u00e7in, build a\u015famas\u0131nda Airtable’dan sadece veri okur. \u00c7al\u0131\u015fma zaman\u0131nda (runtime) Airtable’a veri yazmak i\u00e7in, do\u011frudan Airtable API’sini kullanarak (\u00f6rne\u011fin bir React bile\u015feninden) veya bir sunucusuz fonksiyon (serverless function) arac\u0131l\u0131\u011f\u0131yla HTTP POST istekleri g\u00f6ndermeniz gerekir. Bu, Gatsby’nin birincil kapsam\u0131n\u0131n d\u0131\u015f\u0131ndad\u0131r ve genellikle bir form g\u00f6nderme veya kullan\u0131c\u0131 etkile\u015fimi gibi durumlar i\u00e7in kullan\u0131l\u0131r.<\/p>\n
5. Uygulamam\u0131 da\u011f\u0131t\u0131rken nelere dikkat etmeliyim?<\/h3>\n
Uygulaman\u0131z\u0131 da\u011f\u0131t\u0131rken (\u00f6rne\u011fin Netlify, Vercel gibi platformlara), ortam de\u011fi\u015fkenlerinizin do\u011fru \u015fekilde ayarland\u0131\u011f\u0131ndan emin olmal\u0131s\u0131n\u0131z. Da\u011f\u0131t\u0131m platformlar\u0131n\u0131n ortam de\u011fi\u015fkenlerini ayarlama b\u00f6l\u00fcmlerini kullanarak AIRTABLE_API_KEY<\/code> ve AIRTABLE_BASE_ID<\/code> de\u011ferlerini girmeniz gerekecektir. Bu, build a\u015famas\u0131nda Gatsby’nin Airtable verilerine eri\u015fmesini sa\u011flar.<\/p>\n<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Airtable’\u0131 Gatsby ile Kullanmak: Kapsaml\u0131 Bir Teknik Rehber\nModern web geli\u015ftirme d\u00fcnyas\u0131nda, h\u0131zl\u0131 y\u00fcklenen, g\u00fcvenli ve \u00f6l\u00e7eklenebilir","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1342],"tags":[],"class_list":{"0":"post-32067","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-ai","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n
Airtable'\u0131 Gatsby ile Kullanmak: Kapsaml\u0131 Bir Teknik Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/airtablei-gatsby-ile-kullanmak-kapsamli-bir-teknik-rehber\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Airtable'\u0131 Gatsby ile Kullanmak: Kapsaml\u0131 Bir Teknik Rehber\" \/>\n<meta property=\"og:description\" content=\"Airtable'\u0131 Gatsby ile Kullanmak: Kapsaml\u0131 Bir Teknik Rehber Modern web geli\u015ftirme d\u00fcnyas\u0131nda, h\u0131zl\u0131 y\u00fcklenen, g\u00fcvenli ve \u00f6l\u00e7eklenebilir\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/airtablei-gatsby-ile-kullanmak-kapsamli-bir-teknik-rehber\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-17T06:42:20+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/airtablei-gatsby-ile-kullanmak-kapsamli-bir-teknik-rehber\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/airtablei-gatsby-ile-kullanmak-kapsamli-bir-teknik-rehber\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Airtable’\u0131 Gatsby ile Kullanmak: Kapsaml\u0131 Bir Teknik Rehber\",\"datePublished\":\"2025-10-17T06:42:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/airtablei-gatsby-ile-kullanmak-kapsamli-bir-teknik-rehber\/\"},\"wordCount\":1733,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"AI\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/airtablei-gatsby-ile-kullanmak-kapsamli-bir-teknik-rehber\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/airtablei-gatsby-ile-kullanmak-kapsamli-bir-teknik-rehber\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/airtablei-gatsby-ile-kullanmak-kapsamli-bir-teknik-rehber\/\",\"name\":\"Airtable'\u0131 Gatsby ile Kullanmak: Kapsaml\u0131 Bir Teknik Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-17T06:42:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/airtablei-gatsby-ile-kullanmak-kapsamli-bir-teknik-rehber\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/airtablei-gatsby-ile-kullanmak-kapsamli-bir-teknik-rehber\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/airtablei-gatsby-ile-kullanmak-kapsamli-bir-teknik-rehber\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Airtable’\u0131 Gatsby ile Kullanmak: Kapsaml\u0131 Bir Teknik Rehber\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Airtable'\u0131 Gatsby ile Kullanmak: Kapsaml\u0131 Bir Teknik Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/airtablei-gatsby-ile-kullanmak-kapsamli-bir-teknik-rehber\/","og_locale":"tr_TR","og_type":"article","og_title":"Airtable'\u0131 Gatsby ile Kullanmak: Kapsaml\u0131 Bir Teknik Rehber","og_description":"Airtable'\u0131 Gatsby ile Kullanmak: Kapsaml\u0131 Bir Teknik Rehber Modern web geli\u015ftirme d\u00fcnyas\u0131nda, h\u0131zl\u0131 y\u00fcklenen, g\u00fcvenli ve \u00f6l\u00e7eklenebilir","og_url":"https:\/\/fatihsoysal.com\/blog\/airtablei-gatsby-ile-kullanmak-kapsamli-bir-teknik-rehber\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-17T06:42:20+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"11 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/airtablei-gatsby-ile-kullanmak-kapsamli-bir-teknik-rehber\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/airtablei-gatsby-ile-kullanmak-kapsamli-bir-teknik-rehber\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Airtable’\u0131 Gatsby ile Kullanmak: Kapsaml\u0131 Bir Teknik Rehber","datePublished":"2025-10-17T06:42:20+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/airtablei-gatsby-ile-kullanmak-kapsamli-bir-teknik-rehber\/"},"wordCount":1733,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["AI"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/airtablei-gatsby-ile-kullanmak-kapsamli-bir-teknik-rehber\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/airtablei-gatsby-ile-kullanmak-kapsamli-bir-teknik-rehber\/","url":"https:\/\/fatihsoysal.com\/blog\/airtablei-gatsby-ile-kullanmak-kapsamli-bir-teknik-rehber\/","name":"Airtable'\u0131 Gatsby ile Kullanmak: Kapsaml\u0131 Bir Teknik Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-17T06:42:20+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/airtablei-gatsby-ile-kullanmak-kapsamli-bir-teknik-rehber\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/airtablei-gatsby-ile-kullanmak-kapsamli-bir-teknik-rehber\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/airtablei-gatsby-ile-kullanmak-kapsamli-bir-teknik-rehber\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Airtable’\u0131 Gatsby ile Kullanmak: Kapsaml\u0131 Bir Teknik Rehber"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32067","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=32067"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32067\/revisions"}],"predecessor-version":[{"id":32068,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32067\/revisions\/32068"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=32067"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=32067"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=32067"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}