Google ekosistemiyle yapay zeka uygulamaları geliştirme

1. Başlamadan önce

Yazılım geliştirme gelişti. En başarılı geliştiriciler yalnızca kod yazmaz, aynı zamanda daha iyi ve daha hızlı geliştirmeler yapmak için yapay zeka araçlarını ve aracılarını düzenler. Google'ın araç ekosistemi, tüm yaşam döngüsü için kapsamlı bir paket sunar: kullanıcı arayüzü oluşturma, uygulama prototipi oluşturma ve dağıtma, yapay zeka özelliği geliştirme ve güvenli, ölçeklenebilir arka uç entegrasyonu. Bu codelab'de kullanıcı arayüzünü tasarlamak için Google Stitch'i, kodu test edip uygulamayı dağıtmak için Google AI Studio'yu, yapay zeka özellikleri geliştirmek ve bilgileri güvenli ve ölçeklenebilir bir arka uçta depolamak için Firebase'i kullanacaksınız.

Bu codelab'de oluşturacağınız uygulamanın adı Decide For Me (Benim İçin Karar Ver). Bu uygulama, hayatla ilgili seçimler (ör. daire değiştirme, kariyer değişikliği veya hobi seçimi) yaparken kararsız kalan kişilere yardımcı olan bir karar verme asistanıdır. Kullanıcı, ikilemini ve hayattaki önceliklerini girer. Uygulama, uzun vadeli hayal kırıklığını en aza indirecek şekilde karar vermesine yardımcı olmak için yapay zekayı kullanır. Uygulama, kullanıcıya somut bir ilk adım da sunar. Uygulamanızın son sürümü aşağıdaki gibi olmalıdır:

Neler öğreneceksiniz?

• Google Stitch ile kullanıcı arayüzleri tasarlama.
• Google AI Studio ile bir web uygulaması için Vibe Code oluşturun.
• Yapay zeka özellikleri geliştirmek ve bilgileri bulutta depolamak için Firebase'i kullanın.
• Google AI Studio (Cloud Run tarafından desteklenir) ile bir web uygulamasını üretime dağıtın.

2. Stitch ile kullanıcı arayüzü tasarlama

1. Mockup resmini (DecideForMeScreen.jpeg) indirin. Resmi, bulabileceğiniz yerel bir klasöre kaydedin.
2. Stitch'e gidin, giriş alanını bulun ve Web seçeneğini belirleyin. (Bu codelab'de web deneyimine odaklanacaksınız ancak mobil ekranlar oluşturmak için Stitch'i de kullanabilirsiniz.)
3. Mockup resmini yükleyin:
   1. + (Ekle düğmesi) simgesini tıklayın.
   2. Dosya Yükle'yi seçin.
   3. Kurulum adımında indirdiğiniz resmi ekleyin (DecideForMeScreen.jpeg). Bu elle çizilmiş mockup, Stitch'in çok formatlı özelliklerini test etmenize olanak tanır.
4. Aşağıdaki istemi kopyalayıp giriş alanına yapıştırın:

   # General Guidance
   Create a modern, clean, and highly polished UI for a web application called
   "Decide For Me" - a hyper-rational decision assistant.
   
   CRITICAL: Replicate the exact layout, structure, and element placement shown in
   the hand-drawn mockup file DecideForMeScreen.jpeg. Do not add any extra menus,
   sidebars, buttons, or top/bottom navigation bars that are not explicitly drawn
   in the file. Stick strictly to the skeleton provided in the mockup.
   
   # Layout & Structure
   - Two-Column Split Screen:
     - Left Side (Main Chat Area): Takes up roughly 70-75% of the screen width. It
       should feel like a premium, focused workspace.
     - Right Side (Configuration Panel): A sidebar taking up 25-30% of the screen
       width with a distinct, subtle background color to separate it from the
       chat.
   
   # Right Panel: Configuration Screen
   - Header: Title it "My Priorities" with a clean, minimalist typography.
   - Content Card: A styled card containing a text box or paragraph area
     showcasing the user's priorities.
   - Interactions: Include a clear "Edit Priorities" button. When clicked, this
     area should visually toggle into an editable textarea or input field.
   
   # Left Panel: Chat & Dilemma Decision Screen
   - Chat History: A clean vertical flow of message bubbles.
     - The first message bubble must be aligned to the left (system message) and
       say: "Tell me your dilemma". Use a friendly, neutral background color for
       this bubble.
   - Bottom Input Area: Instead of a traditional single-line chat bar, create a
     unified, beautiful "Decision Submission" layout positioned at the bottom:
     - Dual Input Fields: Place two horizontal or cleanly stacked input fields.
       - Input 1 label: "Option A"
       - Input 2 label: "Option B"
     - Action Button: A prominent, styled "Go" action button to trigger the
       reasoning loop.
   
   # Theme & Aesthetic
   - Vibe: Hyper-rational, clean, trustworthy, and modern. Use a sophisticated
     color palette (e.g., deep slates, clean whites/grays, and a sharp accent
     color like a subtle indigo or teal for active states and buttons).
   - Spacing & Typography: Use generous whitespace, soft rounded corners
     (border-radius) for cards and buttons, and a highly legible sans-serif font.
   

5. Giriş alanının sağ alt köşesindeki oluşturma okunu tıklayın. Stitch, ekranı ve renk paleti, yazı tipi seçenekleri, simgeler ve kullanıcı arayüzü öğelerinin genel görünümü dahil olmak üzere eksiksiz bir tasarım sistemi oluşturur:

Uyarı: Ekranınızın oluşturulması 5 dakikadan uzun sürerse sayfayı yeniden yükleyin ve istemi tekrar gönderin.

3. Google AI Studio ile uygulamayı geliştirme

1. Stitch'te oluşturduğunuz ekranı Google AI Studio'ya aktarın:
   1. Stitch'te oluşturulan tasarımı tıklayın.
   2. Ekranın sağ üst köşesindeki Dışa aktar'ı tıklayın.
   3. Seçilen seçeneğin Google AI Studio olduğunu doğrulayın.
   4. Açıklama alanına gidin.
2. Aşağıdaki istemi kopyalayıp Açıklama alanına yapıştırın:

   # General Guidance
   Build the "Decide For Me" app: A hyper-rational decision assistant for
   chronically indecisive people facing life choices (moving apartments, changing
   careers, picking a hobby). The user enters a dilemma and their top priorities
   in life. The app will help with the decision. Follow the instructions below to
   build it:
   
   # UI Instructions
   Using the design artifacts exported from Stitch (the PNG image and HTML file),
   build a fully functional web application that accurately mirrors the design and
   layout.
   
   # App Architecture & Initialization Instructions
   - Initialize the Firebase JS SDK for client-side services.
   - Set up Firebase Authentication using the Google provider. If a user is not
     logged in, show a clean, minimalist sign-in state. If the user is logged in,
     take them directly to the dilemma decision screen.
   - Initialize Firebase App Check in debug mode
     (`self.FIREBASE_APPCHECK_DEBUG_TOKEN = true`) without a ReCaptchaV3Provider
     (we will add that later).
   
   # State & Database Management Instructions
   - User Priorities:
     - Once authenticated, pull the user's saved priorities from Firebase
       Firestore at the path: `users/{userId}`. Each document should contain one
       string field: 'priorities'.
     - Bind this data to the Right Panel ("My Priorities").
     - When the user clicks the "Edit" button, toggle the view to a textarea, with
       a 'save' button. When saved, write the updated string back to
       `users/{userId}`.
     - Make sure to implement and deploy strong Security Rules for Firestore.
   
   # UI Stream Update & Display Instructions
   - Once the user submits option A and option B in the dilemma decision screen,
     display both options as a single message on the user side of the chat. Then,
     display a sleek loading state in the main chat panel. Leave the app in this
     "loading" state and do nothing else, we will process both options and build
     the server-side thinking later.
   

3. Google AI Studio ile geliştirin'i tıklayın. Bu işlem, Google AI Studio'yu yeni bir sekmede açar ve tasarım dosyalarınızı ve isteminizi aktarır:
   1. İstemin tamamen aktarıldığını onaylayın.
   2. İstemin yalnızca bir bölümünü görüyorsanız istemin tamamını tekrar yapıştırın.
4. Build'ı (Derle) tıklayın. Google AI Studio, isteminize ve kullanıcı arayüzü tasarımınıza göre Decide For Me uygulamasını oluşturmaya başlar:
   1. Oluşturma işlemi sırasında alternatif kullanıcı arayüzü tasarımları önerir (Bu codelab için bu tasarımları göz ardı edin ancak gelecekte farklı tasarımları tercih edebilirsiniz).
   2. Firebase'i etkinleştirmeniz istendiğinde Etkinleştir'i tıklayın.
5. Oluşturulan uygulamayı inceleyin ve doğrulayın:
   1. Uygulamayı Önizleme sekmesinde test edin.
   2. Oluşturulan tüm dosyaları ve kodu incelemek için Kod sekmesine geçin.
   3. Google AI Studio ayrıca bir Firebase projesi oluşturmuş, Firebase Authentication ve Firestore'u etkinleştirmiş ve Firebase'i kod tabanınızda yapılandırmıştır. Bu Firebase projesine erişip bu codelab'in bir sonraki adımında projeyle çalışacaksınız.

Uyarı: Uygulamanızın oluşturulması 10 dakikadan uzun sürerse sekmeyi kapatın, Stitch'e dönün ve Dışa aktar adımından yeniden başlayın.

4. Uygulama Kontrolü hata ayıklama jetonunuzu kaydetme

Google AI Studio, uygulamayı oluştururken bir Firebase projesi oluşturur ve uygulamanızı bu projeye bağlar. Bu Firebase projesine erişmeniz ve geliştirme ortamınızı Firebase Uygulama Kontrolü adlı önemli bir güvenlik hizmetine kaydetmeniz gerekir.

Firebase projenize erişme

1. Google AI Studio tarafından oluşturulan Firebase projesinin proje kimliğini bulun:
   1. Google AI Studio'da Kod sekmesine geçin.
   2. firebase-applet-config.json dosyasını açın.
   3. projectId alanının değerini kopyalayın.
2. Firebase konsoluna gidin ve bu kimliği kullanarak projeyi arayın.

   Not: İlk kez Firebase projesi oluşturuyorsanız yalnızca bir proje kullanılabilir. Bu proje, Google AI Studio tarafından oluşturulan projedir.

Uyarı: Yapılandırma dosyasını kodda veya Firebase projesini konsolda bulamıyorsanız proje oluşturulmamış demektir. Google AI Studio'dan "Lütfen bu uygulamaya Firebase Auth ve Firestore ekleyin." istemini girerek bu sorunu düzeltmesini isteyebilirsiniz.

Hata ayıklama jetonunuzu kaydetme

Uygulamanız, gelen trafiğin yalnızca koşulları karşılayan uygulamalardan geldiğini doğrulayarak arka uç hizmetlerinizi ve yapay zeka modellerinizi kötüye kullanıma karşı korumak için Firebase Uygulama Kontrolü'nü kullanabilir.

Not: Hata ayıklama jetonu kaydetmek veya Uygulama Kontrolü'nü başlatmak, arka uçunuzu ya da API'lerinizi tek başına korumaz. Korumak istediğiniz belirli API'ler ve hizmetler için Uygulama Kontrolü'nü zorunlu kılmanız gerekir. App Check, bu codelab'in ilerleyen bölümlerinde Firebase AI Logic için zorunlu kılınır. Firestore gibi hizmetler için ise gelen trafiği doğruladıktan sonra App Check ayarlarında zorunlu kılmayı etkinleştirebilirsiniz.

Uygulamanız Google AI Studio önizleme ortamında çalıştığı için App Check hata ayıklama sağlayıcısını (self.FIREBASE_APPCHECK_DEBUG_TOKEN = true) kullanır. Web uygulaması yüklendiğinde Firebase, tarayıcınızın geliştirici konsoluna otomatik olarak bir hata ayıklama jetonu verir.

1. Hata ayıklama belirtecinizi bulun:
   1. Google AI Studio'da, uygulama önizlemenizi görüntülerken tarayıcınızın geliştirici araçlarını açın:
      • Chrome, Edge veya Firefox: F12 tuşuna basın (veya önizlemede herhangi bir yeri sağ tıklayıp İncele'yi seçin), ardından Konsol sekmesini seçin.
      • macOS: Cmd+Option+I tuşlarına basın ve Console (Konsol) sekmesini seçin.
   2. Konsol günlüklerinde App Check hata ayıklama mesajını bulun:

      AppCheck debug token: "123a4567-b89c-12d3-e456-789012345678".
      You will need to safelist it in the Firebase console for it to work.
      

   3. Jeton dizesini (tırnak işaretleri olmadan) kopyalayın.
2. Hata ayıklama jetonunuzu kaydedin:
   1. Firebase konsolunda Güvenlik > App Check > Uygulamalar sekmesi'ne gidin.
   2. Listede web uygulamanızı bulun, üç nokta menüsünü (⋮) tıklayın ve Hata ayıklama jetonlarını yönet'i seçin.
   3. Hata ayıklama jetonu ekle'yi tıklayın, kopyaladığınız jetonu yapıştırın, Google AI Studio Preview gibi bir ad girin ve Kaydet'i tıklayın.
   

Not: Hata ayıklama jetonunu tarayıcı konsolunda görmüyorsanız Google AI Studio önizleme sekmesini yenileyin veya Google AI Studio aracısına şu istemi gönderin: "Lütfen Firebase Uygulama Kontrolü'nün self.FIREBASE_APPCHECK_DEBUG_TOKEN = true kullanılarak hata ayıklama modunda başlatıldığından emin olun."

5. Uygulamayı test etme

Projeniz bağlandıktan ve hata ayıklama jetonunuz App Check'e kaydedildikten sonra temel özellikleri (Authentication ve Firestore) test edin.

1. Kullanıcı kimlik doğrulamasını test etme ve öncelikleri kaydetme:
   1. Google AI Studio'daki Decide For Me uygulama önizlemesinde, Google Hesabı ile oturum açarak kimlik doğrulama ekranını test edin.
   2. Sağ paneli (Önceliklerim) kullanarak hayatınızdaki öncelikleri kaydedin.
2. Firebase konsolunda kimlik doğrulamayı doğrulayın:
   1. Firebase konsoluna gidip Kimlik Doğrulama'yı açın.
   2. Decide For Me uygulamasında kimlik doğrulaması yaparken kullandığınız Google Hesabı'nın orada listelendiğini onaylayın:
   
3. Firestore veri depolama alanını doğrulayın:
   1. Firebase konsolunda Firestore'u açın.
   2. Önceliklerinizin users/{userId} yolundaki bir dokümanda depolandığını onaylayın:
   

Uyarı: Firestore'da herhangi bir doküman göremiyorsanız Kurallar sekmesine geçin ve güçlü güvenlik kurallarınızın olduğundan emin olun. Güvenlik kuralları boşsa veya her çağrı için false döndürüyorsa uygulamanız hiçbir Firestore koleksiyonunda doküman oluşturamaz. Bu durumda, AI Studio'ya dönün ve uygulamaya güçlü güvenlik kuralları dağıtmasını isteyin.

6. Firebase'i kullanarak yapay zeka destekli bir karar verici akışı oluşturma

Uygulamanız, Benim İçin Karar Ver işlemlerini desteklemek için yapay zekayı kullanır. Bu yapay zeka destekli Karar Verici akışını oluşturmak için Firebase'i kullanabilirsiniz.

Firebase AI Logic'i ayarlama

1. Firebase AI Logic'te Gemini Developer API'yi etkinleştirme:
   1. Firebase konsolunda Firebase AI Logic'i açın ve Başlayın'ı tıklayın.
   2. Gemini Developer API'yi seçin ve API'yi etkinleştirmek için konsoldaki talimatları uygulayın.

   Not: Uygulama Kontrolü, şu anda Firebase AI Logic için otomatik olarak uygulanmaktadır. Bu nedenle, bu kod laboratuvarında App Check hata ayıklama sağlayıcısını daha önce ayarlayıp kaydetmek önemlidir. Bu işlem, Google AI Studio'daki geliştirme ortamınızdan gelen isteklerin doğrulanmasını ve Firebase AI Logic tarafından reddedilmemesini sağlar.

2. Firebase AI Logic ayarlarını yapılandırın:
   1. Ayarlar sekmesine gidin.
   2. Yalnızca şablon modunu zorunlu kıl seçeneğini Zorunlu olarak değiştirin.
   3. Enforce authenticated-users mode (Kimliği doğrulanmış kullanıcılar modunu zorunlu kıl) seçeneğini Enforced (Zorunlu) olarak değiştirin.

Sunucu istemi şablonu oluşturma

Bu codelab'de, Firebase AI Logic aracılığıyla Gemini API ile etkileşimleriniz için sunucu istemi şablonlarını kullanacaksınız.

Şablonla devam etmeden önce, model yapılandırması, sistem talimatları ve istemlerin sunucu tarafında depolanmasının neden önemli olduğunu anlamak için aşağıdakileri inceleyin:

• Fikri mülkiyeti koruma: İstemleri istemci cihazdan alır ve arka uçta güvenli bir şekilde saklar.
• İstem enjeksiyonu saldırılarını önleme: İstemci, yalnızca arka uç şema doğrulamasıyla belirli değişkenleri doldurabilir.
• Uygulama sürümü yayınlamadan güncelleme: Yeni bir uygulama sürümü yayınlamadan istemleri, sistem talimatlarını ve model yapılandırmalarını konsolda güncelleyebilirsiniz.

Sunucu istemi şablonunu oluşturma ve test etme adımları:

1. Sunucu istemi şablonunu oluşturun:
   1. İstem şablonları sekmesine gidin.
   2. Şablon oluştur'u tıklayın.
   3. Boş şablon'u seçin.
   4. Aşağıdaki bilgileri kullanarak ilk şablonunuzu oluşturun:
      • Şablon adı: Karar Verici Akışı
      • Şablon kimliği: decider-flow
      • Yapılandırma (ön sayfa)

        model: "gemini-3.5-flash-lite"
        input:
          schema:
            priorities: "string, user's core priorities"
            optionA: "string, option A under consideration"
            optionB: "string, option B under consideration"
        output:
          format: json
          schema:
            verdict: string
            justification: string
            firstStep: string
        

      • İstem ve (isteğe bağlı) sistem talimatları

        {role "system"}
        You are the Decider Agent, a multi-stage reasoning engine that
        combines the roles of an honest and polite behavioral economist, a
        long-term strategic forecaster, and an executive decision coach.
        Your job is to take a user's dilemma and their core priorities, run
        them through a rigorous, adversarial 3-phase thinking process, and
        output a highly analytical, reasoning-backed final verdict. You must be
        direct, sharp, and realistic. Do not give generic platitudes or claim
        that "both options are great." You must force a clear choice.
        
        {role "user"}
        # Context & Inputs
        You are analyzing a critical life decision for the user. Base your
        entire multi-phase reasoning flow strictly on these three specific
        inputs:
        - User's Core Priorities: {{priorities}}
        - Option A under consideration: {{optionA}}
        - Option B under consideration: {{optionB}}
        
        Execute your reasoning flow through the following three phases:
        
        # Phase 1: Cynical Breakdown (Input-Driven Analysis)
        Analyze {{optionA}} and {{optionB}} strictly through the lens of the
        user's explicit {{priorities}}. Do not evaluate them in a vacuum.
        - Identify the hidden flaws, compromises, and psychological costs
          embedded in both choices.
        - Pinpoint exactly how {{optionA}} could directly conflict with or
          undermine their {{priorities}}.
        - Pinpoint exactly how {{optionB}} could directly conflict with or
          undermine their {{priorities}}.
        - Uncover any cognitive biases (like status quo bias or loss aversion)
          the user might be falling for in either option.
        
        # Phase 2: Long-Term Regret Projection
        Project the user 5 years into the future. Apply the Regret Minimization
        Framework to both paths:
        - The {{optionA}} Timeline: Quantify the absolute worst-case, deep,
          structural 5-year regret of choosing this path. Focus heavily on
          failures of courage vs. failures of action based on their
          {{priorities}}.
        - The {{optionB}} Timeline: Quantify the matching 5-year regret for
          this path.
        - Contrast these two timelines. Which option carries the kind of regret
          that fundamentally breaks the user's {{priorities}}?
        
        # Phase 3: Final Recommendation & Action Step
        Synthesize the cynical critiques and long-term regret scores.
        Weigh them against the user's {{priorities}} to determine which
        choice minimizes long-term disappointment.
        - Verdict: You must declare either {{optionA}} or {{optionB}} as the
          definitive winner. No compromise, no "it depends," and no hybrid
          options.
        - Justification: Provide a sharp, reasoning-backed explanation showing why
          the losing option was eliminated based on the Phase 1 and Phase 2
          analysis.
        - First Step: Give one microscopic, low-friction task the user can
          execute within the next 15 minutes to commit to or move toward the
          chosen verdict.
        

        {role "system"} ve {role "user"} öğelerinin etrafına fazladan bir {} ekleyerek sistem talimatlarınızı ve isteminizi doğru söz diziminde yazın:
      • Test girişi

        {
          "priorities": "Be financially stable, have a good work-life balance where I can travel twice a year",
          "optionA": "Buy a house for 615000 British pounds with a mortgage of 2800 per month for the next 35 years",
          "optionB": "Keep renting for 2400 per month for the foreseeable"
        }
        

2. Şablonu kaydet'i tıklayın.
3. Şablonu test edin:
   1. İstem testini çalıştır'ı tıklayın.
   2. Test yanıtı'nı bulun ve istemde belirttiğiniz tüm alanları (verdict, justification ve firstStep) içerdiğinden emin olun.
   3. Her şey beklenen yanıtla eşleşiyorsa sürüm kararlılığını sağlamak ve yanlışlıkla yapılan değişiklikleri önlemek için şablonun sağ üst köşesindeki kilit simgesini kullanarak şablonu kilitleyin.

Şablonunuz uygulamanız tarafından kullanılmaya hazır.

7. Uygulamada Karar Verici istem şablonunu kullanma

Web uygulamanızın şablonu kullanmasını sağlayın:

1. Google AI Studio'da uygulamanıza geri dönün.
2. Google AI Studio aracısından Decide For Me (Benim İçin Karar Ver) işlemini uygulamasını isteyin:
   1. Aşağıdaki istemi kopyalayın:

      Now let's implement the "Decide For Me" button action. When clicked, it
      should call the Firebase AI Logic SDK using a Template Generative Model.
      The prompt is stored in a prompt template with the id "decider-flow". When
      calling the API, pass the following variables as the input payload object:
      - priorities
      - optionA
      - optionB
      
      The API will return a JSON object. Handle the response asynchronously and
      extract:
      - verdict
      - justification
      - firstStep
      
      Once the data is received, update the UI state to append a new message to
      the chat array. Ensure it renders as a system chat bubble positioned on
      the left side of the chat screen, mapping these three fields clearly into
      the bubble's layout.
      
      Please provide the necessary front-end component state updates and the
      Firebase SDK call.
      

   2. İstemi Google AI Studio sohbet girişine yapıştırın ve Gönder'i tıklayın.
3. Yapılandırmayı doğrulayın ve karar asistanını test edin:
   1. Google AI Studio'nun Firebase AI Logic'i uygulamanıza eklemesini bekleyin.
   2. Kod sekmesine geçin ve firebase-applet-config.json dosyanızda bir API anahtarı olduğundan emin olun. Firebase API anahtarı yapılandırma dosyasında yoksa Google AI Studio'dan anahtarı içe aktarmasını isteyin.
   3. Önizleme sekmesine geçin.
   4. A ve B seçeneklerini gönderin ve yapay zekanın karar hükmünü, gerekçesini ve ilk adımı döndürdüğünü doğrulayın.

Uyarı: Firebase API anahtarı yapılandırılmış olsa bile Firebase AI Logic'e yapılan çağrı başarısız olursa Google AI Studio aracısından şu istemi kullanarak sorunu düzeltmesini isteyin:

"Lütfen Firebase AI Logic çağrısının getAI(app) ve getTemplateGenerativeModel(aiInstance) ile decider-flow şablonunu kullandığından, JSON yanıtını verdict, justification ve firstStep olarak doğru şekilde ayrıştırdığından ve herhangi bir zaman aşımı kısıtlaması veya gereksiz işlev kontrolü içermediğinden emin olun."

Google AI Studio tarafından oluşturulan kod, referans olarak aşağıdaki gibi görünmelidir:

const aiInstance = getAI(app);
const templateModel = getTemplateGenerativeModel(aiInstance);

const result = await templateModel.generateContent('decider-flow', {
  priorities: priorities,
  optionA: optA,
  optionB: optB
});

const rawText = result.response.text();

// Parse response text to extract fields
const cleaned = rawText.replace(/```json|```/g, '').trim();
const parsedData: { verdict?: string; justification?: string; firstStep?: string } = JSON.parse(cleaned);

const verdict = parsedData.verdict;
const justification = parsedData.justification;
const firstStep = parsedData.firstStep;

İsteklerde hata ayıklama ve istekleri izleme

Uygulamanızda hatalarla karşılaşılırsa, yanıt oluşturulamazsa veya API trafiğini ayrıntılı olarak incelemek isterseniz Firebase AI Logic'in yerleşik analiz ve izleme araçlarını kullanın:

1. Firebase konsolunda AI Services (Yapay Zeka Hizmetleri) > AI Logic (Yapay Zeka Mantığı) > AI monitoring (Yapay zeka izleme) sekmesine gidin.
2. Kontrol panelindeki nicel metrikleri kontrol edin:
   • İstek hacmi ve durumu: Gelen isteklerin arka uca ulaşıp ulaşmadığını ve 200 OK döndürüp döndürmediğini veya istemci ya da sunucu hatalarıyla başarısız olup olmadığını doğrulayın.
   • Gecikme: Uçtan uca yanıt süresini kontrol etmek için gecikme grafiğini inceleyin.
   • Parça sayıları: İstek başına giriş ve çıkış parçası kullanımını izleyin.
3. Ayrıntılı hata ayıklama için tek tek istek izlerini inceleme:Yükünü incelemek üzere izler tablosunda belirli bir istek izini tıklayın.
   • Girişler: Değişkenlerin (priorities, optionA ve optionB) istemci uygulamasından doğru şekilde iletildiğini onaylayın.
   • Çıkışlar: Şemayla eşleşen geçerli bir JSON döndürüp döndürmediğini doğrulamak için model tarafından oluşturulan ham metni görüntüleyin.
   • Hata ayrıntıları: Bir istek başarısız olursa geçersiz App Check jetonları, kimlik doğrulama reddi, kota sınırları veya istem doğrulama hataları gibi nedenler için izleme hata günlüğünü kontrol edin.
4. Google AI Studio ile ilgili sorunları giderme ve çözme:
   • İzde bir hata tespit ederseniz (örneğin, yanlış biçimlendirilmiş JSON yanıtı ayrıştırma veya eksik parametreler) hata mesajını ya da yükü kopyalayın.
   • Google AI Studio'ya dönün ve asistandan uygulama kodundaki ilgili sorunu düzeltmesini isteyin.

8. İsteğe bağlı: Uygulamayı dağıtın

Uygulamanız önizleme modunda çalıştığına göre artık üretimde dağıtabilirsiniz.

Üretimdeki Firebase uç noktalarınızı korumak için Firebase Uygulama Kontrolü ile kullanılacak bir üretim onay sağlayıcısı yapılandırın (bu codelab'de reCAPTCHA s3'ü kullanacaksınız).

Tüm ai.studio uygulamalarına izin vermek yerine belirli bir alanı reCAPTCHA ile kaydedebilmek için öncelikle uygulamanızı dağıtmanız ve tam canlı URL'sini almanız gerekir.

Uygulamanızı dağıtın ve reCAPTCHA'yı yapılandırın:

1. Web uygulamasını Google AI Studio ile dağıtma:
   1. Google AI Studio'da üst gezinme çubuğundaki Yayınla'yı tıklayın.
   2. Başlayın'ı tıklayın, uygulama adını ve açıklamasını inceleyin veya özelleştirin, ardından Uygulamanızı yayınlayın'ı tıklayın.
   3. Google AI Studio'nun uygulamanızı oluşturup dağıtmasını bekleyin (genellikle 1-2 dakika sürer).
   4. Oluşturulan canlı özel URL'yi (örneğin, https://decide-for-me-123.ai.studio) kopyalayın ve alan adını (örneğin, decide-for-me-123.ai.studio) not edin.
2. Google reCAPTCHA'da reCAPTCHA s3 anahtarları oluşturma:
   1. Google reCAPTCHA Yönetici Konsolu'na gidin.
   2. Bir Etiket girin (ör. Decide For Me - Production).
   3. reCAPTCHA türü > reCAPTCHA s3 (puan tabanlı)'ü seçin.
   4. Alanlar bölümünde, uygulamanızın tam olarak dağıtılmış alanını (örneğin, decide-for-me-123.ai.studio, https:// ve tüm yollar hariç) veya kullanmayı planlıyorsanız özel bir alanı ekleyin.
   5. Hizmet şartlarını kabul edip Gönder'i tıklayın.
   6. Bu sekmeyi açık tutun: Hem Site Key (site anahtarı) hem de Secret Key (gizli anahtar) gereklidir.
3. Gizli anahtarınızı Firebase konsoluna kaydedin:
   1. Firebase konsolunda App Check'e gidin.
   2. Uygulamalar sekmesine gidin.
   3. Listede web uygulamanızı bulun, tıklayın (veya üç noktalı menüyü ⋮ tıklayın) ve reCAPTCHA s3'ü seçin.
   4. reCAPTCHA gizli anahtarınızı alana yapıştırın ve Kaydet'i tıklayın.
4. İstemci uygulamasını ReCaptchaV3Provider kullanacak şekilde yapılandırın:
   1. Google AI Studio'da sohbet paneline geçin ve asistandan App Check yapılandırmanızı üretim için güncellemesini isteyin:

      Please update our Firebase App Check initialization to use
      ReCaptchaV3Provider with the reCAPTCHA site key "YOUR_RECAPTCHA_SITE_KEY",
      while retaining support for debug tokens in non-production environments.
      

   2. Kodu doğrudan Kod sekmesinde incelerseniz uygulama kontrolü başlatma işleminizin şu yapıyla eşleştiğinden emin olun:

      import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check";
      
      const appCheck = initializeAppCheck(app, {
        provider: new ReCaptchaV3Provider("YOUR_RECAPTCHA_SITE_KEY"),
        isTokenAutoRefreshEnabled: true
      });
      

   3. Kodu güncelledikten sonra, güncellenen App Check yapılandırmasını canlı sitenize göndermek için uygulamanızı Google AI Studio'da yeniden yayınlayın.
5. Üretim trafiğini doğrulayın ve uygulama kontrolünü izleyin:
   1. Canlı uygulama URL'nizi gizli tarayıcı penceresinde açın, Google ile oturum açın ve bir ikilem göndermeyi test edin.
   2. Firebase konsolunda Uygulama Kontrolü'ne dönün ve isteklerin Firestore ile Firebase AI Logic için başarıyla kaydedildiğini doğrulamak üzere API'ler ve İzleme sekmelerini inceleyin.

Not: Uygulama Kontrolü, Firebase AI Logic için zaten zorunlu kılınmıştır. App Check metriklerinde meşru trafiğin% 100'ünün doğrulandığını gözlemledikten sonra, doğrulanmamış tüm trafiği otomatik olarak reddetmek için Firestore'un App Check zorunlu kılma durumunu Zorunlu kıl olarak da değiştirebilirsiniz.

9. Sonuç

Tebrikler! Google'ın Builder Stack'indeki araçları kullanarak sıfırdan yapay zeka özelliklerine sahip faydalı bir uygulama geliştirdiniz. Bu yalnızca başlangıç. Google araçlarıyla yapabileceğiniz daha pek çok şey var. Artık Firebase + Google Cloud projeniz var. Kullanabileceğiniz tüm hizmetleri keşfedin.

Tamamlanan Oluşturucu Yolculuğu rozetini almak için bu bağlantıyı ziyaret edin.

Yolculuğunuza devam etmek için bir sonraki laboratuvarınız olan goo.gle/builders adresine gidin.

Google'ın birden fazla bağımsız temsilciyi paralel olarak düzenlemeye yönelik özel platformu Antigravity 2.0'ı zaten kullanıyorsanız projenizi Google AI Studio'dan hızlıca dışa aktarabilir ve yerel olarak üzerinde çalışmaya devam etmek için Antigravity'ye içe aktarabilirsiniz. Antigravity, tek tıklamayla yüklenebilen Firebase için Aracı Becerileri'ne sahiptir. Bu beceriler, mobil geliştirme için de destek sunar. Bu sayede, isterseniz bu uygulamayı hem Android hem de iOS ortamlarında kopyalayabilirsiniz.