Bu sayfa, Cloud Translation API ile çevrilmiştir.

Özel şablon oluşturun

Firebase Studio, bir dil veya çerçeveyle hızlı bir şekilde çalışmaya başlamak için ihtiyacınız olan tüm dosyaları, sistem paketlerini (ör. derleyiciler) ve uzantıları içeren çok çeşitli yerleşik şablonlar sunar.

Ayrıca, GitHub'da barındırılan topluluk şablonlarını kullanarak Firebase Studio çalışma alanı da başlatabilirsiniz. Şablondan yeni bir çalışma alanı başlatma hakkında daha fazla bilgi için Firebase Studio çalışma alanı oluşturma başlıklı makaleyi inceleyin.

Çoğu kullanıcı yerleşik şablonları kullanır veya projeleri Git'ten içe aktarır. Ancak daha ileri düzey kullanım alanları için kendi şablonlarınızı oluşturabilirsiniz:

Kendi çerçevenizi, kitaplığınızı veya hizmetinizi oluşturuyorsanız kullanıcılarınızın tarayıcıdan hiç ayrılmadan, bulut tabanlı bir sanal makinenin tüm gücüyle teknolojinizi hızlı bir şekilde kullanmaya başlamasına olanak tanıyabilirsiniz.
Projeleriniz için tercih ettiğiniz bir teknoloji yığını varsa özel şablon kullanarak yeni projelere başlama sürecinizi basitleştirebilirsiniz.
Başkalarına eğitim veriyorsanız (ör. eğitim veya codelab aracılığıyla), codelab'inizin başlangıç noktasını özel bir şablon olarak önceden yapılandırarak öğrencileriniz için ilk adımların bazılarını kaldırabilirsiniz.

Özel şablonunuzu oluşturup test ettikten sonra web sitenize, Git deposu README dosyasına, paket ayrıntıları sayfasına (ör. NPM'de) veya kullanıcılarınızın teknolojinizi kullanmaya başlamasını beklediğiniz başka bir yere yerleştirmek için şablonun bağlantısını oluşturabilirsiniz.

Ön koşullar

Başlamadan önce:

idx/dev.nix dosyasını kullanarak ortamınızı nasıl özelleştireceğinizi öğrenin.
Nix diliyle ilgili temel bilgileri öğrenin ve referansı elinizin altında bulundurun.

Şablon dosya yapısı

Firebase Studio şablonu, herkese açık bir Git deposudur (veya depodaki bir klasör ya da dal) ve en az iki dosya içerir:

idx-template.json, şablonun meta verilerini (kullanıcı tarafından görülebilen adı, açıklaması ve kullanıcıların şablonu yapılandırmak için kullanabileceği parametreler dahil) içerir. Örneğin, kullanıcılarınızın çeşitli programlama dilleri veya örnek kullanım alanları arasından seçim yapmasına izin verebilirsiniz. Firebase Studio, kullanıcılar şablonunuzdan yeni bir çalışma alanı oluşturmayı seçtiğinde gösterilen kullanıcı arayüzünü hazırlamak için bu bilgileri kullanır.
idx-template.nix, Nix dilinde yazılmış bir dosyadır. Bu dosya, aşağıdakileri yapan bir Bash kabuk komut dosyası (Nix işlevine sarılmış) içerir:
1. Yeni çalışma alanı için çalışma dizinini oluşturur.
2. .idx/dev.nix dosyası oluşturarak ortamını ayarlar. Bu komut dosyasında flutter create veya npm init gibi bir proje iskeleti oluşturma aracını ya da Go, Python, Node.js veya başka bir dilde yazılmış özel bir komut dosyasını da çalıştırabileceğinizi unutmayın.
  
  Bu dosya, Firebase Studio şablonu yüklediğinde kullanıcı tarafından belirtilen parametrelerle yürütülür.

Şablonu oluşturmak için idx-template.nix'da kullanılmak üzere bu iki dosyanın yanı sıra başka dosyalar da eklenebilir. Örneğin, son .idx/dev.nix dosyasını veya hatta tüm iskele dosyalarını doğrudan depoya ekleyebilirsiniz.

Başlangıç şablonu oluşturma

Şablon oluşturma sürecini hızlandırmak için aşağıdaki yöntemlerden birini kullanarak daha fazla özelleştirebileceğiniz bir Firebase Studio şablonu oluşturmanızı öneririz:

Herkese açık GitHub depolarını şablona dönüştürme
Şablonunuz için temel olarak resmi veya topluluk şablonu kullanma

Temel bir örnek: Herhangi bir herkese açık GitHub deposunu şablona dönüştürme

idx-template.json ve idx-template.nix tanımlama ayrıntılarına girmeden önce, aşağıdaki özellikleri içeren temel bir örnek şablonu incelemek faydalı olacaktır:

Kullanıcı tarafından yapılandırılabilen parametreler içermez.
Şablon deponuzdaki tüm dosyaları (iki idx-template dosyası hariç) kullanıcının çalışma alanına kopyalar. Ortamı tanımlayan bir dev.nix dosyası içeren bir .idx alt klasörü zaten olmalıdır.

Aşağıdaki dosyaları herkese açık bir GitHub deposuna (veya alt klasöre ya da dala) eklerseniz bu depo Firebase Studioşablona dönüştürülür.

`idx-template.json`

{
  "name": "Hello world",
  "description": "A template for a CLI program that prints 'hello world'",
  "icon": "https://www.gstatic.com/images/branding/productlogos/studio/v1/192px.svg",
  "params": []
}

`idx-template.nix`

# No user-configurable parameters
{ pkgs, ... }: {
  # Shell script that produces the final environment
  bootstrap = ''
    # Copy the folder containing the `idx-template` files to the final
    # project folder for the new workspace. ${./.} inserts the directory
    # of the checked-out Git folder containing this template.
    cp -rf ${./.} "$out"

    # Set some permissions
    chmod -R +w "$out"

    # Remove the template files themselves and any connection to the template's
    # Git repository
    rm -rf "$out/.git" "$out/idx-template".{nix,json}
  '';
}

Şablonunuzu özelleştirmek için yapabileceğiniz ek değişiklikler hakkında bilgi edinmek üzere Şablonunuzu özelleştirme başlıklı makaleyi inceleyin.

Resmi veya topluluk şablonunu kullanarak özel şablon oluşturma

Firebase Studio ekibi, Firebase Studio şablonları için iki depo tutar:

Resmi şablonlar: Bunlar, yeni bir uygulama oluştururken doğrudan Firebase Studio kontrol panelinden seçtiğiniz şablonlardır.
Topluluk şablonları: Bu şablonlar, açık kaynak topluluğunun katkılarına olanak tanır. Topluluk şablonunu kullanmak için Topluluk şablonları Git deposunu klonlayın. Kullanmak istediğiniz şablonun tam bağlantısını kullanabilirsiniz.

İpucu: Yeni şablonlar ekleyerek veya mevcut şablonları güncelleyerek topluluğa katkıda bulunmak için çekme isteği gönderin.

Mevcut bir şablonu temel alarak özel şablon oluşturmak için:

Özel şablonunuzun temelini oluşturacak şablona karar verin ve projeyi klonlayın.
idx-template.json, idx-template.nix ve .idx/dev.nix simgelerini gerektiği gibi özelleştirin. Şablonunuzu özelleştirme ile başlayın.
Değişiklikleri deponuza aktarın.
Şablonunuzu yayınlamak ve test etmek için Şablonunuz için yeni bir çalışma alanı oluşturma başlıklı makaledeki adımları uygulayın. İç içe yerleştirilmiş bir depo kullanıyorsanız URL'nizde doğrudan bu depoya bağlantı verin. Örneğin, "Vanilla Vite" topluluk şablonunu kullanıyorsanız aşağıdaki URL'yi kullanarak yeni bir çalışma alanı sağlayıp test edersiniz:
```
https://studio.firebase.google.com/new?template=https://github.com/firebase-studio/community-templates/tree/main/vite-vanilla
```

Şablonunuzu özelleştirmek için yapabileceğiniz ek değişiklikler hakkında bilgi edinmek üzere Şablonunuzu özelleştirme başlıklı makaleyi inceleyin.

Şablonunuzu özelleştirme

Üzerine eklemeler yapabileceğiniz temel bir şablon oluşturduğunuza göre, idx-template.json, idx-template.nix ve .idx/dev.nix dosyalarını gereksinimlerinize uygun şekilde düzenleyebilirsiniz. Ek yapılandırmaları özelleştirmek isteyebilirsiniz:

bootstrap komut dosyanıza sistem paketleri ekleyin.
Kullanıcı tarafından yapılandırılabilen parametreler ekleme
Varsayılan olarak hangi dosyaların açılacağını seçme
Varsayılan bir çalışma alanı simgesi seçme

`bootstrap` komut dosyanızda ek sistem paketleri kullanma

Temel örnekte, dosyaları doğru yere kopyalamak için yalnızca temel POSIX komutları kullanılır. Şablonunuzun bootstrap komut dosyası, git, node, python3 gibi ek ikili dosyaların yüklenmesini gerektirebilir.

packages dosyanızda idx-template.nix belirterek, dev.nix dosyasındaki packages öğesine ekleme yaparak ek sistem paketleriyle çalışma alanını özelleştirdiğiniz gibi, önyükleme komut dosyanızda ek sistem paketleri kullanılabilir hale getirebilirsiniz.

node, npx ve npm gibi ikili dosyaları içeren pkgs.nodejs ekleme örneğini aşağıda görebilirsiniz:

# idx-template.nix
{pkgs}: {
  packages = [
    # Enable "node", "npm" and "npx" in the bootstrap script below.
    # Note, this is NOT the list of packages available to the workspace once
    # it's created. Those go in .idx/dev.nix
    pkgs.nodejs
  ];

  bootstrap = ''
    mkdir "$out"
    # We can now use "npm"
    npm init --yes my-boot-strap@latest "$out"
  ''
}

Kullanıcı tarafından yapılandırılabilen parametreler ekleme

Kullanıcıların yeni projelerinin başlangıç noktasını özelleştirmesine izin vermek için birden fazla şablon veya parametre içeren tek bir şablon oluşturabilirsiniz. Farklı başlangıç noktalarınız yalnızca bir CLI aracına iletilen farklı değerlerse (ör. --language=js ile --language=ts) bu seçenek idealdir.

Parametre eklemek için:

Parametrenizi params nesnesinde açıklayın. idx-template.json meta veri dosyanızın Firebase Studio, bu dosyadaki bilgileri kullanarak şablonunuzun kullanıcılarına gösterilen kullanıcı arayüzünü (ör. onay kutuları, açılır listeler ve metin alanları) hazırlar.
idx-template.nix bootstrap'inizi, kullanıcı şablonu oluştururken seçtiği değerleri kullanacak şekilde güncelleyin.

Parametrenizi `idx-template.json` içinde açıklayın.

Aşağıda, seçenek sayısına bağlı olarak açılır menü veya radyo düğmesi grubu olarak gösterilen bir enum parametresinin eklenmesiyle ilgili bir örnek verilmiştir: Firebase Studio

{
  "name": "Hello world",
  "description": "A hello world app",
  "params": [
    {
      "id": "language",
      "name": "Programming Language",
      "type": "enum",
      "default": "ts",
      "options": {
        "js": "JavaScript",
        "ts": "TypeScript"
      },
      "required": true
    }
  ]
}

İki değer (JavaScript ve TypeScript) olduğundan kullanıcı arayüzü, iki seçenek için bir radyo düğmesi grubu oluşturur ve ts veya js değerini idx-template.nix komut dosyasına iletir.

Her parametre nesnesinde aşağıdaki özellikler bulunur:

MÜLK	TÜR	AÇIKLAMA
id	`string`	Parametrenin benzersiz kimliği (değişken adına benzer).
ad	`string`	Bu parametrenin görünen adı.
tür	`string`	Bu parametre için kullanılacak kullanıcı arayüzü bileşenini ve bootstrap komut dosyasına iletilecek veri türünü belirtir. Geçerli değerler: `"enum"`: Açılır liste veya radyo düğmesi grubu gösterir ve bootstrap'e `string` değerini iletir. `"boolean"` - Onay kutusu ve kartlar `true` veya `false` gösterilir. `"text"` - Bir metin alanı gösterir ve `string` iletir.
seçenekler	`object`	`enum` parametreleri için bu, kullanıcılara gösterilecek seçenekleri ifade eder. Örneğin, seçenekler `{"js": "JavaScript", ...}` ise seçenek olarak "JavaScript" gösterilir ve seçildiğinde bu parametrenin değeri `js` olur.
varsayılan	`string` veya `boolean`	Kullanıcı arayüzünde ilk değeri ayarlar. `enum` parametreleri için bu, `options` içindeki anahtarlardan biri olmalıdır. `boolean` parametreleri için bu değer `true` veya `false` olmalıdır.
gerekli	`boolean`	Bu parametrenin zorunlu olduğunu gösterir.

`idx-template.nix` içinde parametre değerlerini kullanma

params nesnesini idx-template.json dosyanızda tanımladıktan sonra, kullanıcının seçtiği parametre değerlerine göre bootstrap komut dosyasını özelleştirmeye başlayabilirsiniz.

Önceki bölümdeki örnekten yola çıkarak, olası değerleri ts veya js olan bir enum olan language kimlikli tek bir parametreniz varsa bunu şu şekilde kullanabilirsiniz:

# idx-template.nix
# Accept additional arguments to this template corresponding to template
# parameter IDs, including default values (language=ts by default in this example).
{ pkgs, language ? "ts", ... }: {
  packages = [
    pkgs.nodejs
  ];

  bootstrap = ''
    # We use Nix string interpolation to pass the user's chosen programming
    # language to our script.
    npm init --yes my-boot-strap@latest "$out" -- --lang=${language}
  ''
}

Diğer bir yaygın yöntem ise içeriği, bir dizenin değerine bağlı olarak koşullu olarak dahil etmektir. Önceki örneği yazmanın bir başka yolu:

npm init --yes my-boot-strap@latest "$out" -- \
    ${if language == "ts" then "--lang=ts" else "--lang=js" }

Varsayılan olarak hangi dosyaların açılacağını seçme

Şablonunuzla yeni çalışma alanları oluşturulduğunda hangi dosyaların düzenleme için açılacağını özelleştirmeniz önerilir. Örneğin, şablonunuz temel bir web sitesi içinse ana HTML, JavaScript ve CSS dosyalarını açmak isteyebilirsiniz.

Hangi dosyaların varsayılan olarak açılacağını özelleştirmek için .idx/dev.nix dosyanızı (idx-template.nix dosyanızı değil!) onCreate çalışma alanı kancası içerecek şekilde güncelleyin. Bu kancada openFiles özelliği bulunmalıdır. Örneğin:

# .idx/dev.nix
{pkgs}: {
  ...
  idx = {
    # Workspace lifecycle hooks
    workspace = {
      # Runs when a workspace is first created with this `dev.nix` file
      onCreate = {
        # Open editors for the following files by default, if they exist.
        # The last file in the list will be focused.
        default.openFiles = [
          "src/index.css"
          "src/index.js"
          "src/index.html"
        ];
        # Include other scripts here, as needed, for example:
        # installDependencies = "npm install";
      };
      # To run something each time the workspace is (re)started, use the `onStart` hook
    };
    # Enable previews and customize configuration
    previews = { ... };
  };
}

Varsayılan bir çalışma alanı simgesi seçme

Şablonunuzla oluşturulan çalışma alanları için varsayılan simgeyi, icon.png adlı bir PNG dosyasını .idx dizinindeki dev.nix dosyasının yanına yerleştirerek seçebilirsiniz.

Şablonunuzu yeni bir çalışma alanında test etme

Şablonunuzu uçtan uca test etmenin en basit yolu, şablonla yeni bir çalışma alanı oluşturmaktır. Aşağıdaki bağlantıyı ziyaret edin ve örnek yerine şablonunuzun GitHub deposu URL'sini girin:

https://idx.google.com/new?template=https://github.com/my-org/my-repo

İsteğe bağlı olarak bir dal ve alt klasör ekleyebilirsiniz. Aşağıdakilerin tümü, herkese açık oldukları sürece geçerlidir:

https://github.com/my-org/my-repo/
https://github.com/my-org/my-repo/tree/main/path/to/myidxtemplate
https://github.com/my-org/my-repo/tree/branch
https://github.com/my-org/my-repo/tree/branch/path/to/myidxtemplate

Bu URL'yi, yeni şablonunuzu kullanabilmeleri için diğer kullanıcılarla da paylaşabilirsiniz veya "Firebase Studio'de aç" düğmenizden bağlantı verebilirsiniz.

Şablonunuzun beklendiği gibi çalıştığını onayladıktan sonra şablonu bir GitHub deposunda yayınlayın ve test için çalışma alanı oluştururken kullandığınız bağlantıyı paylaşın.

Kullanıcıların şablonunuzu bulmasını daha da kolaylaştırmak için web sitenize veya depodaki README dosyasına "Open in Firebase Studio" düğmesi ekleyin.