Firebase Studio'yu kullanmaya başlama

1. Genel Bakış

Bu codelab'de, Firebase Studio'daki Uygulama Prototipi Oluşturma aracısını kullanarak yeni bir dil öğrenmenize yardımcı olacak bir uygulama oluşturma alıştırması yapacaksınız. Ardından uygulamayı iyileştirip geliştirir ve isteğe bağlı olarak Firebase App Hosting'de yayınlarsınız.

Neler öğreneceksiniz?

• Firebase Studio'da istem oluşturmayla ilgili en iyi uygulamalar
• İşlev eklemek ve hataları düzeltmek için bir uygulamayı yineleme
• Firebase App Hosting'e uygulama yayınlama ve uygulamayı başkalarıyla paylaşma
• Uygulama Barındırma Uygulamasına genel bakış paneli aracılığıyla önemli metrikleri izleme

Gerekenler

• Google Chrome gibi istediğiniz bir tarayıcı
• Firebase projenizin oluşturulması ve yönetilmesi için bir Google Hesabı

2. Uygulama Prototipleme aracısını kullanarak uygulamanızı oluşturma

Uygulama Prototipleme aracısı, uygulamanızı oluşturmak için Firebase'de Gemini'ı kullanır. Aynı istemleri kullansanız bile sonucunuz bu codelab'de yer alanla tam olarak aynı görünmeyebilir veya aynı şekilde çalışmayabilir. Takılırsanız bu codelab'in çeşitli kontrol noktalarında laboratuvara devam edebilmek için çalışma alanınıza ekleyebileceğiniz bir dizi dosya sağladık.

1. Google Hesabınıza giriş yapın ve Firebase Studio'yu açın.
2. Yapay zeka ile uygulama prototipi oluşturun alanına, oluşturmak istediğiniz uygulamanın açıklamasını girin. Bu codelab'de, hikayeler, bilgi kartları ve yapay zeka eğitmeni aracılığıyla yeni bir dil öğrenmenize yardımcı olacak bir uygulama oluşturacaksınız. Aşağıdakiler gibi bir istem girin:

   An app to help someone learn a new language. The app should include
   AI-generated stories in the target language, where users can click vocab
   words or the entire story to see it in English. A different section
   includes flashcards, where the user is shown a word in the chosen language
   and can click it to flip the card and see the word in English. The final
   section includes an AI chatbot that allows the user to have simple
   conversations in the chosen language or ask questions in English about
   what a word means or how to form a sentence in the chosen language. All
   content should be beginner-friendly, focusing on basic greetings, common
   questions/answers, and vocabulary relevant to the lessons or stories.
   To start, the app should teach the user French, although we might add
   additional languages in the future.
   

3. Yapay zeka ile prototip oluşturun'u tıklayın.
4. Önerilen uygulama planını inceleyin. Planı düzenlemek için Özelleştir'i tıklayın:
   1. Uygulama adını Speak Easy olarak değiştirin.
   2. Renk şemasını aşağıdakilerden biriyle değiştirin:

   Primary color: Asparagus green (#98BF64) for a calm and friendly feel.
   Secondary color: Light parchment (#F5EBCD) to complement the primary color.
   Accent: Marigold (#FFB833) for interactive elements and call-to-action buttons.
   

   Renk düzeninizi veya düzeninizi resim olarak göndermeyi tercih ederseniz istem veya plan süreci sırasında resim yüklemek için Ek seçeneğini tıklayın. Resimler 3 MiB'tan küçük olmalıdır.
5. Kaydet'i tıklayın.
6. Plan, güncellemelerinizi eklemeyi tamamladığında Bu Uygulamanın Prototipini Oluştur'u tıklayın.
7. Bu uygulama yapay zeka öğeleri içerdiğinden temsilci, Gemini anahtarı girmenizi ister. Kendi Gemini API anahtarınızı ekleyin veya Gemini API anahtarı oluşturmak için Otomatik oluştur'u tıklayın. Otomatik oluştur'u tıklarsanız Firebase Studio bir Firebase projesi oluşturur ve sizin için bir Gemini API anahtarı oluşturur.
8. Uygulama Prototipleme aracısı, uygulamanızın ilk sürümünü oluşturmak için Uygulama Planı'nı kullanır. İşlem tamamlandığında, uygulamanızın önizlemesi bir Gemini sohbet arayüzüyle birlikte gösterilir. Uygulamanızı test etmek için biraz zaman ayırın. Tam olarak hayal ettiğiniz gibi görünmese bile, sonraki bölümde yeni işlevler ekleme ve tasarımı iyileştirme hakkında bilgi verilmektedir.

3. (İsteğe bağlı) Kodu alma

Takılırsanız veya örnek uygulamayı daha yakından takip etmek isterseniz codelab boyunca çeşitli kontrol noktalarında sağlanan örnek dosyaları kullanın.

1. Klasördeki dosyaları indirin.
2. Firebase Studio'da Koda Geç'i tıklayarak Kod görünümünü açın.
3. İndirdiğiniz dosyaları Firebase Studio'nun Explorer bölmesine sürükleyin. Dosyaların mevcut dosyaları değiştirmesine izin verin.
4. Uygulamanın örnek sürümünü kullanarak codelab'e devam etmek için Prototip Oluşturucu'ya geç'i tıklayın.

4. Uygulamanızın işlevlerini test etme, yineleme ve hatalarını ayıklama

Uygulamayı önizlerken hatalar veya beklenmedik işlevler fark edebilirsiniz. Uygulamanın örnek sürümüne aşağıdaki değişiklikleri ve düzeltmeleri ekleyeceğiz:

• Kullanıcılar, yapay zeka hikaye oluşturucuda kelimeleri tıklayarak İngilizce tanımlarını görebilmelidir.
• Bilgi kartları önce Fransızca olarak gösterilmeli, ardından tıklandığında İngilizceye geçmelidir.
• Kullanıcı, ayarlar sayfasına gidip Fransızca yerine Japonca öğrenmeye geçebilmelidir.

1. hedef: Yapay Zeka Hikaye Oluşturucu'ya kelime ekleme

İsteğe bağlı: Bu noktadan itibaren uygulamanın örnek sürümünü kullanmak için bu dosyaları indirip Kod görünümündeki Firebase Studio'nun Gezgin bölmesine sürükleyin.

1. Sohbet arayüzünde, eklemek istediğiniz özelliği açıklayın:

   In the AI Story Generator, users should be able to click vocab words or
   phrases to get the definition in English. Words or phrases should be
   underlined to indicate they can be clicked.
   

2. Uygulamayı önizleme penceresinde test edin. Uygulamanın görünümünü ve tarzını daha sonra güncelleyeceksiniz. Bu nedenle, şimdilik yalnızca işlevselliğe odaklanmaya çalışın.
3. Uygulamanız beklediğiniz gibi çalışmıyorsa Uygulama Prototipi Oluşturma aracından düzenleme yapmasını istemeye devam edin. Örneğin:

   IMPORTANT: Be sure to underline and provide a definition for most words
   and phrases, and ESPECIALLY all nouns and verbs. If a word or phrase in the
   story appears multiple times, only underline and define the first instance.
   

4. Koda Geç'i tıklayarak kod görünümünü açın. Burada uygulamanızın tüm dosyalarını görebilir ve kodunuzu doğrudan değiştirebilirsiniz. Gemini'ın çözemediği bir hata varsa dosyayı manuel olarak düzenlemek bazen daha kolay olabilir. Hazır olduğunuzda, Uygulama Prototipleme aracısını kullanmaya devam etmek için Prototip Oluşturucu'ya geç modunu seçin.

Hedef 2: Bilgi kartlarına çeviri ekleme

İsteğe bağlı: Bu noktadan itibaren uygulamanın örnek sürümünü kullanmak için bu dosyaları indirip Kod görünümündeki Firebase Studio'nun Gezgin bölmesine sürükleyin.

Yukarıdakiyle aynı işlemi uygulayın. Özelliği açıklamak için sohbet arayüzünü kullanın, önizleme penceresinde test edin, ardından ek istemler veya Kod görünümü'nü kullanarak bilgi kartlarına çeviri ekleyin. Aşağıdaki gibi bir istem deneyin:

 The flash cards should appear in the target language to start, then switch to
 English when clicked.

Bazen Uygulama Prototipi Aracısı, hata olduğunu algılamaz. Gördüklerinizi ve düzeltilmesi gerekenleri açıklamak daha etkili olabilir. Örneğin:

 The flip button for the flash cards isn't working. Can you debug it? All flash
 cards are only showing in English.

3. hedef: Yeni bir dil ekleyin

İsteğe bağlı: Bu noktadan itibaren uygulamanın örnek sürümünü kullanmak için bu dosyaları indirip Kod görünümündeki Firebase Studio'nun Gezgin bölmesine sürükleyin.

Aşağıdaki gibi bir istem deneyin:

 Add a settings section to the app, where users can swap to a new language
 to learn. Add Japanese to the list of languages the user can pick from. If
 the user selects Japanese, the AI-generated stories, flash cards, and chatbot
 tutor should all use Japanese instead of French.

5. Uygulamanızın tasarımında yineleme yapma

İsteğe bağlı: Bu noktadan itibaren uygulamanın örnek sürümünü kullanmak için bu dosyaları indirip Kod görünümündeki Firebase Studio'nun Gezgin bölmesine sürükleyin.

Uygulamanız artık istediğiniz tüm işlevlere sahip. Şimdi sıra stile geldi.

Uygulamanın renk şemasını değiştirme

Kullanmak istediğiniz renkleri belirtebilir veya App Prototyping aracısının yönlendirmesine izin verebilirsiniz. Kullanmak istediğiniz renklerin veya stilin resmini yüklemek için sohbet arayüzünde Ek seçeneğini de tıklayabilirsiniz. İstem kullanmayı tercih ediyorsanız şunları deneyin:

 Add color to the design of the app. Use modern, clean colors that adhere
 to accessibility standards and have a calming feel.

Uygulamada kullanılan metni güncelleme

Örneğin, "AI Chatbot Tutor" yerine yalnızca "Sohbet" demesini isteyebilirsiniz:

 Change the text "AI Chatbot Tutor" to "Chat".

Uygulamanın kullanıcı arayüzünü daha sezgisel hale getirmek için ayarlama

Örneğin, kullanıcının metin göndermek için bir düğmeye basması yerine klavyesinde Return tuşuna basmasına izin vermek isteyebilirsiniz:

 In the story generator section, allow the user to press the return key on
 the keyboard to submit the text.

Kullanıcıya açık ve koyu mod arasında seçim yapma seçeneği ekleyin.

Birçok kullanıcı, uygulama için açık veya koyu tema seçeneğini tercih edebilir. Bu geçişi bulmak için mantıklı bir yer belirleyin:

 Add an icon in the upper right corner to dynamically switch the color theme of
 the app between dark mode and light mode.

İstem ve hata ayıklama ipuçları

• İstemlerle ilgili yardım alma: App Prototyping aracısına ne istediğinizi açıklamakta zorlanıyorsanız istemi iyileştirmesi için Google için Gemini'dan yardım isteyin. Etkili istemler hakkında daha fazla bilgi edinin.
• Diğer cihazlarda test etme: Prototip modunda, uygulamanızı diğer cihazlarda test etmek için Önizleme Bağlantısını Paylaş'ı tıklayın.
• Yerleşik araçları kullanma: Kod görünümünde, uygulamanızı incelemek, hata ayıklamak ve denetlemek için Firebase Studio'nun yerleşik hata ayıklama ve raporlama özelliklerini kullanın.
• Basit başlayın: Bir seferde tek bir özellik üzerinde çalışın. Prototipinizde temel bir özellik grubuyla başlayıp bu özellikler beklendiği gibi çalıştıktan sonra kapsamı genişletebilirsiniz.
• Hataları açıklama: Çalışmayan bir şey varsa mevcut davranışı, ardından istediğiniz davranışı Uygulama Prototipi Oluşturma aracısına açıklayın.
• Geri dönme: Uygulama Prototipleme aracısı bir istemi yanlış anladığında veya çözülmesi zor bir sorun ortaya çıkardığında Geri yükle düğmesini tıklayarak uygulamanın önceki bir sürümüne geri dönün ve farklı bir istemle tekrar deneyin.

6. (İsteğe bağlı) Uygulamanızı yayınlama

İsteğe bağlı: Bu noktadan itibaren uygulamanın örnek sürümünü kullanmak için bu dosyaları indirip Kod görünümündeki Firebase Studio'nun Gezgin bölmesine sürükleyin.

Uygulamayı test edip memnun kaldıktan sonra Firebase App Hosting ile web'de yayınlayabilirsiniz.

1. Yeni bir Firebase projesi oluşturmak ve uygulama barındırma kurulumuna başlamak için Yayınla'yı tıklayın. Uygulamanızı yayınlayın bölmesi görünür.
2. Firebase projesi adımında, sizin için oluşturulan Firebase projesinin adını not edin ve Sonraki'yi tıklayın.
3. Cloud Faturalandırma Hesabı'nı bağlayın adımında aşağıdakilerden birini seçin:
   1. Firebase projenize bağlamak istediğiniz Cloud Billing hesabını seçin.
   2. Cloud Faturalandırma Hesabınız yoksa veya yeni bir hesap oluşturmak istiyorsanız Cloud Faturalandırma Hesabı oluştur'u tıklayın. Bu işlem, yeni bir self servis Cloud Faturalandırma Hesabı oluşturabileceğiniz Google Cloud metnini açar. Hesabı oluşturduktan sonra Firebase Studio'ya dönün ve Cloud Faturalandırma'yı bağla listesinden hesabı seçin.
4. İleri'yi tıklayın. Firebase Studio, faturalandırma hesabını, çalışma alanınızla ilişkili projeye bağlar. Bu proje, Gemini API anahtarı otomatik olarak oluşturulduğunda veya Yayınla'yı tıkladığınızda oluşturulur. Ardından, App Hosting, Google Cloud'da uygulamanız için tümüyle yönetilen bir ortam oluşturur.
5. İlk dağıtımınızı oluşturun'u tıklayın. Firebase Studio, App Hosting'in kullanıma sunulmasını başlatır. Bu işlemin tamamlanması on dakika kadar sürebilir. Arka planda neler olduğu hakkında daha fazla bilgi edinmek için Uygulama barındırma derleme süreci başlıklı makaleyi inceleyin.
6. Kullanıma sunma işlemi tamamlandığında Uygulamaya genel bakış bölümünde, App Hosting gözlemlenebilirliği tarafından desteklenen bir URL ve uygulama analizleri gösterilir. Firebase tarafından oluşturulan alan adı yerine özel bir alan adı (ör. example.com veya app.example.com) kullanmak için Firebase metnine özel bir alan adı ekleyebilirsiniz.

Uygulama barındırma hakkında daha fazla bilgi için Uygulama barındırma ve işleyiş şekli başlıklı makaleyi inceleyin.

7. (İsteğe bağlı) Uygulamanızı izleme

Uygulama Barındırma Uygulamaya genel bakış paneli, uygulamanızla ilgili temel metrikleri ve bilgileri sağlar. Böylece, Uygulama Barındırma'nın yerleşik gözlemlenebilirlik araçlarını kullanarak web uygulamanızın performansını izleyebilirsiniz. Siteniz kullanıma sunulduktan sonra Yayınla'yı tıklayarak genel bakışa erişebilirsiniz. Bu panelde şunları yapabilirsiniz:

• Uygulamanızın yeni bir sürümünü yayınlamak için Yayın oluştur'u tıklayın.
• Uygulamanızın bağlantısını paylaşın veya Uygulamanızı ziyaret edin'de doğrudan uygulamanızı açın.
• Uygulamanızın son 7 gündeki performansının özetini (toplam istek sayısı ve en son kullanıma sunma işleminizin durumu dahil) inceleyin. Firebase metninde daha fazla bilgiye erişmek için Ayrıntıları göster'i tıklayın.
• Uygulamanızın son 24 saat içinde aldığı istek sayısının HTTP durum koduna göre dökümünü içeren bir grafik görüntüleyin.

Uygulama genel bakış panelini kapatırsanız Yayınla'yı tıklayarak istediğiniz zaman yeniden açabilirsiniz.

Dağıtımları ve yayınları yönetme başlıklı makaleden uygulama barındırma dağıtımlarını yönetme ve izleme hakkında daha fazla bilgi edinebilirsiniz.

8. Sonuç

Tebrikler! Firebase Studio'yu kullanarak başarılı bir şekilde uygulama oluşturdunuz. Uygulamaya genişletilmiş sözlük, daha fazla dil, ses, animasyon veya zorluk seviyesi seçimi gibi çok daha fazla özellik ekleyebilirsiniz. Uygulamanızla oynamaya devam edebilir veya yeni bir şey oluşturabilirsiniz.

Daha fazla bilgi:

• App Prototyping aracısıyla tam yığınlı bir web uygulaması geliştirme, yayınlama ve izleme
• Firebase Studio ile yeni uygulamanızın prototipini oluşturmaya başlayın
• Firebase Studio çalışma alanları hakkında daha fazla bilgi edinin.