AI Mevzuları • 13:35 • 3 segments
Google Stitch, tasarımcı ve geliştiriciyi AI destekli kod üretimiyle birleştirerek süreçleri hızlandırır.
“TUAL” özelliği, tek bir tuvalde tüm kullanıcı akışını görmeyi sağlayarak büyük projelerde tutarlılığı artırır.
Deneysel modda ayda 100 kod üretimi limiti ve GPT‑2.5 Pro ile yüksek kalite kod sunulurken, standart modda da benzer iş akışı var.
30’dan fazla dilde çeviri desteği ile uluslararası ekiplerin dil bariyerleri ortadan kaldırılır.
AI, tekrarlayan kodlama ve tasarım işleri üstlenerek tasarımcıların ve geliştiricilerin yaratıcılığa odaklanmasını sağlar; mobil entegrasyonla çıktılar Firebase Studio, ADE gibi ortamlara aktarılabilir.
"Son olarak genel kullanıcı arayüzünde yapılan iyileştirmeler ve cila sayesinde araç artık çok daha akıcı ve keyifli bir kullanım sunuyor diyebiliriz"
00:03
✓ Obsidian export ready
./data/notes/4GmXMeOAHAM_GOOGLE_STITCH_20_Tasarımları_MOBİL_UYGULAMAYA_Dönü.md
Merhaba dostlar. Bugün sizlerle birlikte son zamanlarda adından sıkça söz ettire...
var ki bunu bence kullanmayın. Hızlı ancak pek başarılı sonuçlar vermiyor ama ex...
göre. Artık ücretli bir uygulama ise stripe entegrasyonlarını yaptıracaksınız. D...
Merhaba dostlar. Bugün sizlerle birlikte son zamanlarda adından sıkça söz ettiren Google'ın tasarım ve yazılım dünyasında adeta bir devrim yaratan ilk aracından ikinci kez bahsedeceğiz. Hangi araç bu peki? Google Stitch. Özellikle wipe coding ile ürün geliştirmek için bir nimet bence. Hem bu harika aracı hiç bilmeyenler için kısaca bir tanıtacağım hem de aranızda benim gibi bu teknolojiyi yakından takip edenler için gelen birkaç tane yepyeni güncellemeyi sizlere anlatacağım. Videonun ilerleyen kısımlarında ise Stitch ile yaptığım tasarımları nasıl ışık hızında React Native Expo Framework'ü ile gerçek bir mobil uygulamaya dönüştürdüğümüzü göstereceğim. Ama o kısım biraz daha uygulamalı olacak. Daha önce biliyorsunuz Stitch videomda demiştiniz hocam nasıl bunu yapabilir? Size bir nevi bunu göstereceğim. Peki nedir bu stitch? Dostlar Stitch en basit tanımıyla tasarımcılar ve geliştiriciler arasındaki o meşhur bazen de sancılı süreci ortadan kaldırmayı hedefleyen bir köprü. Yıllardır Figma gibi araçlarla harika tasarımlar yapıyoruz değil mi? Eğer geliştiriciysek tasarımları yapanlar ayrı kişiler genelde oluyor. İşte onlarla anlaşıyoruz. Ürün geliştirirken tasarımla ayrı. Bazen anlaşamıyoruz. Değişiyor bu. Her bir detayıyla uğraşıyoruz. Pikselleri milim milim kaydırıyorduk. Ama o iş tasarımı koda dökmeye geldiğinde ne oluyordu? İşte genellikle tasarımcı ve geliştirici arasında birtım sıkıntılar çıkabiliyordu. Ama burada ne oldu? Eğer bireysel ürün geliştiriyorsanız Stitch sizin yardımınıza koştu. Artık yapay zekayla istediğiniz kafanızdaki uygulamayı oluşturtabiliyorsunuz Google'ın Stitch aracıyla birlikte. Şimdi gelin yeni güncellemelere bir bakalım neler gelmiş. Google durmuyor ve Stitch'ile beraber birçok aracını sürekli olarak güncelleyip çok daha iyi bir hale getiriyor. Son gelen güncellemelerle birlikte aracın yetenekleri adeta çağladı. İlk ve belki de en önemli güncelleme Kenwatas yani TUAL özelliği. Artık tüm kullanıcı akışımızı yani uygulamamızın ekranlarının birbiriyle olan bağlantısını tek bir tual üzerinde bütüncü bir şekilde görebiliyoruz. Bu da ne demek? Kritik detayları tek bir yerden takip edebilmek demek. Bu özellikle büyük ve karmaşık uygulamalarda tasarım tutarlılığını sağlamak için gerçekten müthiş bir kolaylık. Google'ın dediği gibi bu daha sadece bir başlangıç ve bu tuval özelliğinin üzerine çok daha fazlasını inşa edeceklerinin sinyalini veriyorlar. Ama güncellemeler bununla da sınırlı değil. Gelen diğer yenilikler de şunlar. Şimdi experimental modumuz var. Bir de standart modumuz var. Experimental yani deneysel modda limit arttırıldı. Yani üretim limiti ayda 100'de çıkartıldı. Bu da demek oluyor ki daha fazla deneme yapabileceksiniz. Hatta daha fazla tasarım fikrini koda dökme imkanınız var. Ta hızlı iş akışı geldi. Sohbet arayüzüne eklenen önerilen yanıtlar sayesinde iş akışımız daha da hızlanıyor. Takıldığımız yerde bize yol gösteren, bir sonraki adımı tahmin eden bir asistan gibi düşünebilirsiniz. Deneysel modda artık daha güçlü olan 2.5 Pro modeli kullanılıyor. Biliyorsunuz ilk başlarda 2.5 flash modeli kullanılıyordu. Bu da hem daha tutarlı hem de daha kaliteli kod üretimleri demek. Uluslararası çalışan ekipler için de müjdeli bir haber var. 30'dan fazla ülke için çeviri desteği geldi. Artık dil bariyerleri de yavaş yavaş ortadan kalkıyor. Son olarak genel kullanıcı arayüzünde yapılan iyileştirmeler ve cila sayesinde araç artık çok daha akıcı ve keyifli bir kullanım sunuyor diyebiliriz. Peki tüm bunlar ne anlama geliyor? Ya bu işin geleceği nereye varacak? Dostlar Stitch gibi araçlar yapay zekanın da gücüyle birlikte mobil uygulama geliştirme sürecini kökünden değiştiriyor. Bunun ötesini size şöyle anlatayım. Bir müddet sonra artık direktman buradan mobil uygulamayı yapacağız. Direktmen istediğimiz türde koda dönüştüreceğiz. Bunu artık Firebase Studio üzerinden mi yaparız yoksa Google farklı yöntemler mi gösterir? O çıktıyı alacağız. Daha sonra kendi lokal ortamımızdaki idemize mi aktarırız veya ADEMize mi aktarırız ki ben ADE kullanacağım. ADE'nin ne olduğunu da kısaca söyleyeyim. Warp kullanacağım. Warp bir agentic development environment yani ajansal geliştirme ortamı diyebiliriz. Mükemmeldir. Bir de warp'a da çok güzel güncellemeler geldi. Şu an çok güzel hale geldi. Yani bu işin ötesi buraya doğru gidiyor. Artık fikir aşamasından çalışan bir prototipe hatta ilerleyen safhalarda canlı bir uygulamaya geçiş süresi çok uzun olmayacak. çok kısa süreler, günler belki de saatlere inecek. Bu özellikle startup'lar ve bireysel geliştiriciler için hızlı ürün çıkarma konusunda müthiş bir kolaylıktır. Tasarımcının ve yazılımcının rolü ortadan kalkmıyor. Bakın bunu yanlış anlamayın. Burada söylüyoruz hemen işte yazılım bitmiyor, yazılım bitmeyecek. Şu aşamada bitmezdi zaten. Aksine evrilecek. Artık daha çok ürünün mantığına, kullanıcı deneyimine ve yaratıcı çözümlerle odaklanabileceğiz. Hani diyoruz ya, ben demiyorum da diyorlar, yapay zeka problem çözme becerilerimizi öldürüyor. Hayır arkadaşlar, yapay zeka aksine analitik düşünme becerinizi bence arttırıyor. Çünkü önceden bir şey yaparken üzerine bu kadar düşünmüyordunuz. Çünkü kafanızı sürekli farklı şeylerle meşgul ettiğiniz için bazen de yorulduğunuz için burada ne oluyordu? Veriminiz düşüyordu. Burada öyle bir şey olmayacak. Tam odaklanabileceksiniz. Biraz da bu pencereden bakmak lazım bence. Angaria olarak gördüğünüz sürekli tekrar eden kodlama ve tasarım işlerini bu tür araçlara devrediyoruz. enerjimizi daha yenilikçi işlere harcıyoruz. Gelecek insan yaratıcılığıyile yapay zeka verimliliğinin birleştiği bir noktada olacak. Hibrit bir çalışma modeli gibi düşünebilirsiniz bunu. Bu geleceğe hala itiraz edip işte yapay zeka şöyle kötü, yapay zeka şuramızı öldürüyor, yapay zeka bunu öldürüyor demek yerine bence bu araçları, şu meretleri kullanmamız gerekiyor. Şimdi uygulamamıza geçelim. Şimdi tasarım kısmına geçmeden önce sizlere promptu nasıl ürettiğimi söyleyeyim. Yani tasarımlarda ve fikir bulma süreçlerinden nasıl yapay zekadan yararlanıyorum ben genelde burada Google Gemina'ın GAM özelliğinden yararlanıyorum. CAM ne yapıyor? Siz bir isim veriyorsunuz. Gördüğünüz gibi benim gemimin adı burada. App Idea generator yani uygulama fikri oluşturucu. Bunu arka planda tabii ki prompt oluşturmaya kadar birçok sistem talimatı verdim ben. Siz de talimat veriyorsunuz. Varsa elinizde kaynağı da referans olarak veriyorsunuz ve bana böyle böyle çıktılar ürettiyorsunuz. Mesela ben dedim ki R Fit diye bir fitness uygulaması yapacağım. İçinde yapay zeka chat botu da olacak. Kapsamlı ve modern bir tasarıma sahip olacak. Hemen ne yaptı? Bana işte promptumu direkt bu şekilde üretti. Ne yaptım ben? Promt'un buradan kopyalıyorum. Sonra Stitch'i açıyorum veya işte uygulama geliştireceğim araçları açıyorum. Onun içerisine yükleyip kullanıyorum. Şimdi Stitch'imizin arayüzü bu şekilde. Size ne demiştim? Bir standart modumuz
var ki bunu bence kullanmayın. Hızlı ancak pek başarılı sonuçlar vermiyor ama experimental mod hani ayda 100 sınırı olan mod bu mod. 2.5 Pro ile yapıyor tasarımları. Baktığınız zaman arayüzde mobil ve web seçenekleri var. İstediğinizi seçebilirsiniz. Biz mobil üzerinden ilerleyeceğiz bu videoda. Buraya promptunuzu yazacaksınız. Yani tasarımınızı özetleyeceğiniz kısım burası. Şimdi burada bakın görsel yükleme kısmı da var. Burayı nasıl ilerletebilirsiniz? Örnek veriyorum kafanızda spesifik bir iskelet vardır. Yani geldiniz açtınız böyle uygulamanızın butonu nerede olacak? Uygulamanın ana sayfa yapısı nasıl olacak gibi bunu kafanızda eğer spesifik belirlediyseniz bunu direktman kopyalıyorsunuz. Getiriyorsunuz buraya yapıştırıyorsunuz. işte ana sayfa şöyle olacak ve böyle olacak diye. Şimdi vakit kaybı olmaması adına gördüğünüz gibi ben promtumuzu bayağı bir detaylı oluşturtum ve buraya yapıştırdım. Sonra teker teker tüm sayfaları oluşturmaya başladım. Bazı kısımları ekletmek durumunda kaldım. Zaten size öneri yapıyor. Mesela burada işte login sayfasını oluşturuyor. Sonra size diyor ki sign up sayfasında yapalım mı? Sonra onu yapıyor. Mesela geliyorsunuz farklı farklı öneriler yapıyor. Bol bol bayağı bir oluştur biz gördüğünüz gibi. Öyle azuz değil. Şimdi oluşturduğumuz sayfalar bu şekilde. Bunları canvas kısmı dememizin sebebi aslında istediğiniz gibi hepsini yönetebiliyorsunuz. Yönetmekle kalmıyorsunuz. Hepsiyle ilgili her şeye erişebiliyorsunuz. Peki biz bundan sonra ne yapacağız? Geldik tasarımlarımızı oluşturduk. Düzenli bir sıraya göre dizdik. Yapmanız gereken şey aslında çok basit. Şimdi bir tasarımı seçtiniz. Shift'e basarak diğerlerinin tamamını seçiyorsunuz. Ekranda ne kadar tasarım varsa hepsini seçmeniz gerekiyor. Tabii kendinize göre eğer kullanmayacağınız varsa onları seçmeyin. Daha sonra bakın hepsi seçilin. Download diyoruz ve indiriyoruz. Zip formatında indirecek bizi. Zip formatında indirdikten sonra biz bu yapıyı ne yapacağız? Şimdi ne yaptık? Zip formatında indirdik. O zip'i klasöre çıkardık. Artık tüm tasarımlarımız aslında şu şekilde görünecek. Gördüğünüz gibi böyle bir zipimizi klasörlemiştik. Tüm tasarımlarımızın hepsi burada görünüyor. Bakın screen PNG var. Cod.h html var. Cod.html var. Hepsi için cod.html var. Yani her sayfanın HTML kodu var elimizde. Tüm bu arayüzleri indirdik. İndirdikten sonra geldik warp'ın içerisine. Warp'ı açtık. Ben warp'ı açtım. Siz curser kullanabilirsiniz. Alibaba color kullanabilirsiniz. CLı'lar kullanabilirsiniz. İşte Google Jemin olabilir, Cursor CLI olabilir, Cloud Code olabilir, Alibaba'nın CLI'ı olabilir. Hiç fark etmez. Geldikten sonra buranın içerine yükledik. Ben cloud 4.1 opus modelimi kullanacağım. Buraya geldikten sonra şimdi klasörümüzün içerisine geldik. Tüm tasarımlarımız var. Bir görev verdik prompt olarak. Dedik ki bir funk seviyesi developer olarak aşağıdaki görevi eksiksiz ve koşulsuz yerine getirmenizi istiyorum. Hedef belirledik. Elimdeki işte şu dizindeki her bir ekran klasörü içerisindeki mobil UI tasarımlarımı ve kodlarımı düzenli bir şekilde birleştirerek React Native Expo Mobil uygulaması haline getirmek. Belli gereksinimler belirledi. Şimdi ayarlarımı da göstereyim kısaca size. Warp ayarlarımı. Bu arada warp'ile ilgili direkt bir videom var. En güncel haliyle. Onu da izleyebilirsiniz. Warp'ı merak ediyorsanız. Warp'ın ne olduğunu da söyledim zaten size. Bunlar benim kullandığım MCP'ler. Contact 7, File System, Firebase, Firecrow, MCP Docker, Memory, Sequential Thinking, Superbase. Daha sonra geldik promptumuzu belirledik ve burada bakın agent modunu seçmeniz lazım. Bunu seçmezseniz olmaz ve gönderiyoruz. Şimdi promptumuzu verdik ve warp cloud opus 4.1 ile birlikte istediğimiz şekilde tasarımlarımızı React Native Expo formatına getirmeye başladı. Burada kodladı, kodladı. Bayağı bir kodlama yaptı. Yarım saate yakın sürdü bu arada onu da söylemiş olayım. Bazı sayfaları eksik yaptı biz söyledik. Hala bazı sayfaları eksik ama en azından size mantığın nasıl olduğunu göstermek istiyorum. Çok iyi çalıştı. Yani neredeyse sıfır hata ile Expo formatına getirdi uygulamamızı. Görüyorsunuz bayağı bir kodladı. kodladıktan sonra bize böyle bir QR kod döndürüyor. Peki biz bu QR kodu ne yapacağız? Telefonunuz ne olursa olsun Expo Go isimli uygulamayı indirmeniz lazım. A iOS'ta da mevcut, Android'de de. Sonra Expo Go'yu indirdikten sonra scan QR kod kısmı var. Oradan burayı taratacaksınız ve uygulama bundle edilecek. Telefonunuzla açılacak. Ben burada şimdi telefondan göstermeyeceğim. Hepinizin görmesi adına Android Studio ile bunu birlikte yapacağım. Ben genelde Android Studio'yu kullanıyorum. Onun da direkt indirip kurabilirsiniz. YouTube'da sayısız video mevcut. Android Studio nasıl indirilir, nasıl işte cihaz aktif edilir vesaire hepsine bakabilirsiniz. Android Studio'yu açıyorum. Açtıktan sonra bakın Expo Go içerisine kurulu zaten. Daha sonra geldim buraya ne yaptım? Az önce kopyaladığım linki yapıştırdım. Sonra connect diyorum ve bağlanıyor. Uygulamamız gördüğünüz gibi bir Android arayüzünde nasıl görünüyor? Açıldı. Bundan sonraki tüm geliştirme süreçlerinizde her şeyi buradan takip edebilirsiniz canlı olarak. Şimdi sign up dedim ve giriş yaptım. Login page'imiz de var burada gördüğünüz gibi. Şimdi sign up deyince bizden belirli bilgiler istiyor. Next diyoruz. Direkt uygulama arayüzümüze gelelim. Doldurmadığımız için böyle bir arayüz açıldı. Programs kısmı var, progress kısmı var. Chatbot kısmımız var, profile kısmımız var. Şu aşamada uygulamamız bu hale kadar geldi. Artık bir React Native uygulaması. Şimdi bunun üzerine ne yapacaksınız? Kodlatmaya devam edeceksiniz. İstediğiniz tasarımlar olacak aklınızda. Stitch'e gideceksiniz. tasarım oluşturtacaksınız. Sonra onu indireceksiniz. Bu dizine atacaksınız. Yine warp üzerinde şuraya. Buraya attıktan sonra tekrar işte şunu da ekledin, şu sayfayı da şuraya ekle diyeceksiniz. Tamamen aynı mantık ilerleyeceksiniz. Bu şekilde istediğiniz uygulamayı hızlıca bir gün içerisinde veya iki gün veya birkaç günde çok fazla token harcamadan yapabileceksiniz. Ama eğer bu şekilde yapmazsanız direkt giderseniz işte bir el eleme, şöyle bir fikrim var bunu mobil uygulama yap derseniz çok basit bir arayüzle yapacaktır ve bunu da yapana kadar açık konuşayım sizi kanser edecektir. Hani uğraşılmaz gerçekten. Stitch gibi araçlarımız var. Kullanın. E zaten Stitch'te de kafanızdaki tasarımı herhangi bir yerde iskeleti çizerek oluşturtabiliyorsunuz. Tek yapmanız gereken spesifik renk kodları vermek. İşte şu kodu verdim, şunu verdim, bunu verdim. işte şu renk yap, şu buton, şu renk olsun. Bunları spesifik eğer belirlerseniz genelleme yapmaz. Yani herkesteki ortak çıktı almazsınız. Bence bu şekilde bireysel mobil uygulamalarınızı çok hızlı şekilde geliştirebilirsiniz. Burada backend kısmı kalıyor. Artık ne yaptık biz burada? React native expo ile tasarımları hepsini dönüştürdünüz. Backend kısmı kalıyor. Onun için de ilgili bir tab seçeceksiniz uygulamanıza
göre. Artık ücretli bir uygulama ise stripe entegrasyonlarını yaptıracaksınız. Daha sonra ne yapacaksınız? Her şeyi hazırladınız. Örnek verelim Google Play üzerinde yayınlayacaksınız. Google Play konsol hesabı açmanız gerekiyor. Bu tek seferlik bir 25 dolarlık kayıt ücreti istiyor sizden. Sonra işte uygulama ismi, ikonu, açılış görseli, ekran görüntüleri, gizlilik politikası linklerini yükleyeceksiniz. Uygulamayı build edebilirsiniz. İşte Expo ile iki yol var burada. Birincisi Expo Application Service build. Yani bunu öneriyorum size. Bunu yapabilirsiniz. Expo hesabınıza gireceksiniz. Bunların hepsinin yöntemini size yapay zeka aracınız söyleyecektir. Sizin komut vermeniz yeterli. Bir de klasik build'imiz var bizim. Sonra ne yapacaksınız? Google Play Consol'da create app diyeceksiniz. Uygulamanın detaylarını giriyorsunuz. Production işte create new relas kısmına gireceksiniz. AAB dosyasını yükleyeceksiniz. Bu Expo Application Service'ten aldığınız dosya olacak. Uygulamanın içerik değerlendirmesi, gizlilik politikası, reklam bildirimi gibi formları dolduruyorsunuz. Sonra yayın için göndere basıyorsunuz. İşte Google incelemesi genelde 1 ile 3 gün arası sürüyor. Onayladıktan sonra uygulamanın Google Play de yayında olmuş oluyor. Bu şekilde yapabilirsiniz. Siz tabii bu süreçleri detaylıca yapay zekaya söylerseniz o hepsini yapıyor. Mesela Expo hesabını oluşturmak kolay. Google'a Expo yazıyorsunuz, giriş yapıyorsunuz direktmen. İşte Google Play konsol kısmına da aynı şekilde kayıt oluyorsunuz. Ha bunlar kolay sayılar. Siz uygulamanızı tamamlayın. Bunları her halükarda halledebilirsiniz. Bu tarz videoların devamı için videoya beğeni atmayı ve abone olmayı unutmayın değerli dostlar. Umarım sizlere faydalı bir video olmuştur. Bir sonraki videoda görüşmek üzere.
