ChatGPT’nin Yardımıyla Sıfırdan Mobil Uygulama Geliştirme Serüvenim
Bugün 21. gün.
21 gün boyunca profesyonel iş hayatımdaki mesaimden ve sosyal hayatımdan kalan zamanlarda geliştirdiğim bir uygulamayı nasıl geliştirdiğimi anlatacağım.
3 Nisan akşamı bilgisayarımın başına geçtim ve https://chat.openai.com/ ile serüvene başladım.
Amaç: SwiftUI öğrenmek, ChatGPT’nin derinliklerine inmek.
Hedef: App Store’a eli ayağı düzgün kullanılabilir bir uygulama göndermek.
Sonda söyleyeceğim şeyi başta söyleyeyim: Chat-GPT yazılım sektörünü bitirmeyecek. Yazılımcılar işsiz kalmayacak. Ama kendini geliştirmeye, öğrenmeye açık yazılımcıların önünü daha da açacak.
Bu tartışmaya girmeden ChatGPT ile olan 21 günlük challange’a geçiyorum.
Nasıl Başladım?
Ben de her meraklı yazılımcı gibi yeni teknolojiler geldikçe bir an önce onları deneyimlemek istiyorum. Daha ChatGPT’nin önceki sürümlerini deneyimlememişken 4. geldi ve bendeki geç kalmışlık, kaçırmışlık hissi arşa çıktı. Ben de bu furyayı kaçırmamak için hemen kolları sıvadım.
ChatGPT ’ye doğru prompt’lar verirseniz oldukça başarılı sonuçlar elde edebiliyorsunuz. Şunu fark ettim ki ChatGPT bir geliştirici için çok iyi bir co-pilot. Bu yazılım geliştirme maliyetlerini oldukça düşürecek ama tabiki de bitirmeyecek. Neyse bu başka bir yazının konusu ilerde bunu bilahare tartışırız.
ChatGPT yardımıyla Calcify isminde bir hesaplama aracı geliştirdim. App Store’a da geçtiğimiz hafta yükledim. Hatta o arada birkaç güncelleme bile geçtim :)
İsim Önerisi
Öncelikle uygulamanın ismine ihtiyacım vardı. Ne yapmak istediğimi detaylı bir şekilde anlattıktan sonra Chat-GPT’den isim önerilerisi yapmasını istedim.
Tabiki de yeterli gelmedi abimize. Hemen biraz daha detay verdim.
Artık daha güzel isimler önermeye başladı. Bu noktada tabii artık biraz daha yönlendirme yapmam gerekti. Daha fazla alternatif istedim. Hoşuma giden isim önerileri de oldu ama uygulamam bir hesap aracı uygulaması olacağı için “Calc” ile başlamasını istediğimi söyledim.
Vee bingo işte benim istediğim uygulama ismi. Ama bu sefer de kelime şansıma sözlükte başka bir anlama geldiğini öğrendim ama Chat-GPT’den beni bu konuda da ikna etmesini istedim.
İkon Tasarımı
İkon tasarımını yaptırmadan önce uzun uzun uygulamamın ne işe yaradığını ve neler yaptığını tekrar hatırlatmak istedim. Tabii bu arada aklımdaki renk paleti önerini vs. de söyledim. Sonuç olarak şöyle bir talepte bulundum:
Chat-GPT tasarımcı olan kardeşime gönderebileceğim harika bir brief hazırladı:
(Öncesinde uzun başka önerilerde de bulundu)
İşte tasarımdan gelen sonuç:
Öğrenme Süreci
Tabi Chat-GPT’ye doğru soruları sorabilmek için mobilden biraz olsun anlamak lazım. Daha önce farklı cross platformlarda geliştirme yapmıştım. (Titanium SDK ve Flutter)
SwiftUI’da yapmayı planladığım bu uygulama için öncesinde 1 hafta kadar yoğun olarak SwiftUI çalıştım. hackingwithswift.com’un bir video serisini izledim. Youtube’daki şu playlistin çoğunu izledim: https://www.youtube.com/watch?v=u8UOmfYmpoE&list=PLuoeXyslFTuZRi4q4VT6lZKxYbr7so1Mr&ab_channel=PaulHudson
Çok detay içeren bölümleri ve spesifik olarak ilk etapta işime yaramayacak bölümleri daha sonra izlemek üzere notlarım arasına ekledim. Bazı yerlerde videoları atlayarak izlemek zorunda kaldım. Siz böyle yapmayabilirsiniz benim cross platform da olsa mobil geçmişim vardı.
Anlamadığım yerleri sanki hoca karşıda anlatım yaparken soru soruyormuşçasına merak ettiğim yerleri, örneklendirilmesini istediğim kısımları ChatGPT’ye sordum.
Burada çok yeni olabilecek yeni bir öğrenme modelinin geliştiğini fark ettim. Artık youtube videoları da yapay zeka sayesinde birer interaktif sınıf haline geliyor.
Geliştirmeye Başlayalım!
Belli bir öğrenme düzeyine ulaştığımı düşündüm ve uygulamamı geliştirme aşamasına geçebilirdim. Zaten asıl öğrenmeyi uygulama geliştirmeyi sürdürürken yapacaktım.
Önce uygulamanın şablonunu oluşturmaya başladım:
import SwiftUI
struct ContentView: View {
// Bu değişken, tab seçimlerini tutacak.
@State private var selectedTab = 0
var body: some View {
TabView(selection: $selectedTab) {
// Ana Sayfa Tab
Text("Ana Sayfa")
.tabItem {
Image(systemName: "house")
Text("Ana Sayfa")
}
.tag(0)
// Araçlar Tab
Text("Araçlar")
.tabItem {
Image(systemName: "wrench")
Text("Araçlar")
}
.tag(1)
// Ayarlar Tab
Text("Ayarlar")
.tabItem {
Image(systemName: "gear")
Text("Ayarlar")
}
.tag(2)
}
.accentColor(.blue) // Tab seçim rengi
// ToolView
VStack {
Text("ToolView")
.font(.largeTitle)
.padding()
Button(action: {
// Butona tıklandığında yapılacak işlemler burada yer alacak.
}) {
Text("Büyük Buton")
.font(.title)
.padding()
.foregroundColor(.white)
.background(Color.blue)
.cornerRadius(10)
}
.padding()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}Tabi fark ettiyseniz burada sadece tab yapısını oluşturdu. Ancak ToolView kısmını biraz yanlış anladı. Daha doğrusu sonradan fark ettim çok kötü bir prompt girmişim. Bence ben yeterli bir yönlendirme olmadı.
Belki Chat-GPT’nin tüm uygulamayı yazma gibi kabiliyeti de vardır ancak nedense bende cevaplar sürekli yarıda kesiliyordu. “devam et”, “continue” veya “cont.” gibi komutlar vererek bazen devam etmesini sağlayabildim ancak bazen de devam etmeyip soruyu baştan cevaplamayı deniyordu. Soruları baştan yanıtlaması istediğim bir durum değil çünkü her seferinde yapay zeka farklı bir formülle bana geldiğinden önceki ürettiği kodları baştan düzenlemek gerekiyordu.
Güncelleme: Bu sorun ChatGPT’nin ücretli versiyonunu satın aldıktan sonra yaşamadım.
Böyle böyle doğru sorular sorarak uygulama iskeletini çıkarmayı başardım. Tabiki de çok fazla hatalı kod üretiyordu. Düzeltmem gereken bir çok yer oluyordu. Zamanla daha doğru promptlar vermeyi öğrendim.
Kullanacağım araçların ikonlarını da seçmesi için yardımcı olmasını istedim. KDV Hesaplamaya sürekli bir para ikonu koymakta ısrarlı olunca şimdilik K harfi şeklindeki ikonla değiştirdim :)
Sonraki adımsa artık uygulamanın içinde çalışmasını beklediğim bu araçların geliştirmesi oldu. Bu aşamada Chat-GPT’ye artık sanki tek bir uygulama yazıyormuşum gibi sorular sormaya başladım. Yüzdelik hesaplaması için şöyle bir brief verdim.
Bana ürettiği kod:
import SwiftUI
struct ContentView: View {
@State private var a = ""
@State private var b = ""
@State private var result = ""
@State private var selectedIndex = 0
let options = ["A sayısının %B'si", "A sayısı, B sayısının yüzde kaçıdır", "A sayısından B sayısına değişim oranı yüzde kaçtır", "A sayısı, %B kadar artırılırsa kaç olur", "A sayısı, %B kadar azaltılırsa kaç olur"]
var body: some View {
VStack {
Picker("Select an option", selection: $selectedIndex) {
ForEach(0..<options.count) { index in
Text(self.options[index])
}
}
.pickerStyle(.segmented)
.padding(.horizontal)
TextField("A", text: $a)
.keyboardType(.numberPad)
.padding()
TextField("B", text: $b)
.keyboardType(.numberPad)
.padding()
Button("Calculate") {
switch selectedIndex {
case 0:
let aVal = Double(a) ?? 0
let bVal = Double(b) ?? 0
let resultVal = aVal * (bVal / 100.0)
result = "\(resultVal)"
case 1:
let aVal = Double(a) ?? 0
let bVal = Double(b) ?? 0
let resultVal = (aVal / bVal) * 100.0
result = "\(resultVal)"
case 2:
let aVal = Double(a) ?? 0
let bVal = Double(b) ?? 0
let resultVal = ((bVal - aVal) / aVal) * 100.0
result = "\(resultVal)"
case 3:
let aVal = Double(a) ?? 0
let bVal = Double(b) ?? 0
let resultVal = aVal * (1.0 + (bVal / 100.0))
result = "\(resultVal)"
case 4:
let aVal = Double(a) ?? 0
let bVal = Double(b) ?? 0
let resultVal = aVal * (1.0 - (bVal / 100.0))
result = "\(resultVal)"
default:
break
}
}
.font(.title)
.padding()
Text("Result: \(result)")
.padding()
Spacer()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}Dediğimi yapmamış hesapla butonu kullanmış ama genel olarak yapmak istediğim sonuca varıyorum. Arayüzü de sen tasarla diyor bana :)
Burada gördüğünüz gibi düzgün bir ekran çizememiş. Birkaç dokunuşla sağını solunu düzenleyip şu hale getirdim. Bu arada buton’un kullanılmamasını sağlayan kodu yine ChatGPT’ye yazdırdım.
Ana çatı çıktıktan sonra küçük kod parçaları paylaşıp sizin için birşeyler yapmasını sağlayabilirsiniz.
Böyle böyle farklı araçların geliştirmesi için ChatGPT’ye bazen koca sayfalık promptlar girmem gerekti. Chat-GPT’ye yanlış yaptığı yerleri gösterip düzeltmesini istedim. Bunun için örneğin şöyle prompt’lar da verdim:
… yazan yerde uzun bir prompt yazdım. Sonra kodu yazmasını istemeden önce diğer sayfalardan birinde kullandığım yapıyı paylaştım ve ona göre bir tasarım yaparak paylaşmaya başladı.
Eğer tek bir chat üzerinden giderseniz ara ara daha önce verdiğiniz prompt’ları unutsa da genel olarak o söylediklerinizi de dikkate alarak yeni şeyler üretiyor.
Tabii bu arada çok yanlış oluğunu düşündüğüm şeyler de yaptı. Arada böyle böyle kavga ettik ama çoğunlukla ChatGPT alttan alıp özür diledi. Canım benim ya seviyorum seni :)
Bu arada bu challenge’ı ChatGPT’nin ücretsiz versiyonu ile gerçekleştirdim. 4. versiyonu hem daha güncel hem de çok daha iyi sonuçlar üretiyor. 2021'in Eylül ayından önceki bilgilere sahip olduğundan yer yer güncel olmayan sonuçlarla mücadele etmek zorunda kalabiliyorsunuz.
ChatGPT 4'ün bu konuda bana verdiği bilgi:
ChatGPT 3.5 ve ChatGPT 4, OpenAI tarafından geliştirilen yapay zeka dil modelleridir. Her iki modelin de eğitim verileri sürekli olarak güncellenir. Bununla birlikte, ChatGPT 4'ün bilgi kesim tarihi 2021–09'dur, bu tarihten önceki internet aramalarını içerir. ChatGPT 3.5 için kesin bir bilgi kesim tarihi verilmemiştir, ancak benzer şekilde, ChatGPT 4'ten daha eski bilgilere dayandığı düşünülmektedir. Bu nedenle, her iki modelin de en geç 2021 yılından önceki internet aramalarını içereceğini düşünebiliriz.
App Store’a Gönderme Süreci
Uygulamayı store’a göndermeden önce bana yardımcı olmasını istedim. Onlarca maddeden oluşan detaylı bir kılavuz hazırladı bana.
ChatGPT’yi kullana kullana artık “mısın” “lütfen” gibi kelimelerin bende azaldığını fark ettim. Çok kötü davranıyorum bu çocuğa ben :)
Bu kılavuzda gerekli belgeler kısmındaki her adıma ayrıca dikkat ettim. Daha önce satın aldığım bir themeforest teması vardı. Hızlıca ChatGPT’ye site içeriklerini yazdırıp bir site oluşturdum: https://nenasil.net/calcify/
Bu sitede mobil uygulamam için de kullanacağım aşağıdaki sayfaların içeriklerini de detaylı prompt’lar vererek oluşturdum.
Privacy Policy, User Privacy Choices, Support, FAQ
Son olarak App Store’a uygulama göndermeden önce bilmem gereken diğer teknik detayları google’dım artık :)
Uygulamam review sürecinde sadece 12 saat bekledi ve sonunda App Store’da yayınladı. Artık ara ara güncelleme geçiyorum.
Sonuç
hackingwithswif.com’un da sahibi Paul Hudson’ın youtube eğitimleri ve ChatGPT sayesinde çok kısa sürede artık App Store’da benim de bir uygulamam var.
Bu süreçte kayda değer satırda kod yazdım. Çok fazla deneme yaptım. Yazdıklarımını ChatGPT’ye review ettirdim. PR mantığında bazen satır satır yorumlarda bulundu arada saçmaladı da.
Merak edenler için mobil benim alanım değil ama sürekli yeni şeyler öğrenen meraklı bir geliştiriciyim :)
Bitirmeden tekrar edeyim ChatGPT ve yeni nesil yapay zekalar yazılım sektörünü bitirmeyecek :)
Beni twitter’dan takip edebilirsiniz: https://twitter.com/arifacar
Sizler de ChatGPT yardımıyla geliştirdiğim uygulamamı indirip beğenim güzel değerlendirmelerde bulunmayı unutmayın 🙏 🙏
