---
title: Giriş
description: Headless tema geliştirmeye başlamak için ilk temanızı oluşturun ve klasör yapısını tanıyın.
---

<Callout type="warn" title="Eski altyapı">
Bu sayfa, ikas Studio öncesindeki headless tema altyapısını anlatır. Yeni temalar için [ikas Studio](https://builders.ikas.com/docs/ikas-studio) dokümantasyonunu kullanın.
</Callout>

Temalar, ikas mağazalarının temel yapı taşıdır. Bir mağazanın nasıl göründüğünü ve nasıl çalıştığını tema belirler; kısacası tema, ikas satıcılarının tüm e-ticaret deneyiminin kalbidir.

Bir theme geliştiricisi olarak işiniz oldukça basittir: theme editörü üzerinden özelleştirilebilen React component'leri yazarsınız. Sayfanın tamamını kodlamazsınız; bunun yerine satıcıların istedikleri sayfada kullanabilecekleri yapboz parçaları üretirsiniz.

ikas temaları [Next.js](https://nextjs.org/), [TypeScript](https://www.typescriptlang.org/) ve [MobX](https://mobx.js.org/getting-started.html) üzerine kuruludur. Yine de component yazmaya başlamak için Next.js ve MobX konusunda derin bilgiye ihtiyacınız yoktur. ikas storefront kütüphaneleri ağır işlerin tamamını üstlenir ve yalnızca arayüz koduna odaklanmanızı sağlar. Tema geliştirme sürecinde zamanınızın büyük kısmı CSS yazmakla geçer.

<Callout type="info" title="Geri bildirim ve destek">
Geri bildirimlerinizi ve hata bildirimlerinizi [GitHub sayfamıza](https://github.com/ikascom/create-ikas-theme/issues) ya da [Discord sunucumuza](https://discord.gg/cpFgQtVSc4) iletebilirsiniz.
</Callout>

## Partner paneli

Tema geliştirmeye başlamadan önce [Partner panelinden](https://builders.ikas.com/docs/ikas-partner/partner-panel-overview) bir ikas partner hesabı oluşturmanız ve şu adımları tamamlamanız gerekir:

- [Bir geliştirme mağazası oluşturun](https://builders.ikas.com/docs/ikas-partner/partner-stores#creating-a-development-store).
- [Bir theme oluşturun](https://builders.ikas.com/docs/headless-theme/partner-themes#creating-a-theme) ve [theme config](https://builders.ikas.com/docs/headless-theme/partner-themes#theme-configuration) bilgilerinizi alın.

## İlk temanızı oluşturma [#creating-your-first-theme]

Bir terminal açıp aşağıdaki komutu çalıştırın. Adımları takip ettiğinizde tema şablonu bilgisayarınızda oluşturulur.

```bash
npx create-ikas-theme@latest
```

Theme config bilgilerinizi kopyalayıp **config.json** dosyanıza yapıştırın. Ardından temanızın klasörüne geçip projeyi çalıştırabilirsiniz:

```bash
cd your-theme
yarn install
yarn dev
```

Temanıza artık [http://localhost:3333](http://localhost:3333) adresinden erişebilirsiniz.

<Callout type="warn" title="Paket yöneticisi">
Şu an yalnızca **yarn** paket yöneticisi desteklenmektedir. Bağımlılıkları yüklemek ve temanızı çalıştırmak için **yarn** kullanın.
</Callout>

Theme editörüne geçmeden önce klasör yapısını inceleyelim.

## Tema klasör yapısı

ikas temaları [Next.js](https://nextjs.org/) üzerine kurulu olduğu için klasör yapısı klasik bir Next.js projesiyle aynıdır.

- `components` klasörü, component'lerinizi yazacağınız yerdir. `components/__generated__` klasörü otomatik oluşturulan dosyaları içerir ve bu dosyalar elle değiştirilemez.
- `pages` klasörü de otomatik oluşturulur ve içindeki dosyaları değiştiremezsiniz. Bir sayfa dosyası ekler ya da düzenlerseniz temanızı yüklediğinizde bu değişikliklerin üzerine yazılır. Bu klasörde yalnızca [pages/_app.tsx](https://nextjs.org/docs/advanced-features/custom-app) ve [pages/_document.tsx](https://nextjs.org/docs/advanced-features/custom-document) dosyalarını düzenleyebilirsiniz. Bu dosyalarda CSS kütüphanelerini kurabilir, global import'larınızı ekleyebilirsiniz. Kendi kodunuzu eklerken mevcut tema şablonu kodunu silmemeye dikkat edin.
- `store` klasörü, gerektiğinde component'leriniz arasında global state paylaşmak için kendi MobX store'larınızı oluşturacağınız yerdir.
- `theme.json` de otomatik oluşturulan bir dosyadır ve tüm component tanımlarınızı içerir. Bu dosyanın içeriğini elle değiştirmeyin.
- `config.json`, temanızın ve test mağazanızın kimlik bilgilerini içerir. [Theme config](https://builders.ikas.com/docs/headless-theme/partner-themes#theme-configuration) ekranında size verilen bilgileri bu dosyaya yapıştırırsınız.
- `next.config.js`, ihtiyaçlarımıza göre bazı varsayılan ayarlarla oluşturduğumuz Next.js yapılandırma dosyasıdır. Örneğin çeviri dosyalarınızı test etmek gibi bazı durumlarda bu dosyayı değiştirmeniz gerekebilir; ayrıntılar [Çeviriler](https://builders.ikas.com/docs/headless-theme/translations) sayfasında anlatılır.

```text title="Klasör yapısı"
.next
node_modules
public
src
typings
.babelrc
.env
.gitignore
config.json
next-env.d.ts
next.config.js
package.json
prettierrc.js
README.md
tsconfig.json
yarn.lock
```