Sadece 6 Ayda Sıfırdan Nasıl Mobil Uygulama Yaptık ?
Serinin 2. yazısına hoşgeldiniz :)
Bu yazıda fikirden çalışan bir uygulamaya doğru giderken nasıl bir yol izlenmesi gerektiğini kendi tecrübelerimizden örnekler vererek aktarmaya çalıştım.
Uzun bir yazı olacağa benziyor; çayınızı, kahvenizi hazırlayın derim :) Güzel bir haftasonu okuması olsun.
TL;DR Tanışma, öğrenme ve geliştirme dahil 6 ay içerisinde çalışan bir uygulama yaptık.
Bölüm 1 — Hazırlık, Problem, Fikir
Girişimciliği öğrenirken yaşadıklarımızı ve fikrin nereden çıktığını anlamak için aşağıda paylaştığım yazıyı okuyabilirsiniz. Bu bölüm çok uzun olduğu için burayı ayrı bir yazı olarak yayınlamaya karar verdik. Serinin 2. yazısı deme sebebim bu yüzden :)
6 Ay Boyunca Hangi Araçları Kullandık:
İş Modeli Kanvası
İş fikrimizin eksiklerini görebilmek ve yol haritasını çizebilmek için kanvası doldurmamız gerekiyordu. Ciz.io’u tercih etmemizin sebebi kullanımı kolay ve hızlı olmasıydı. Ayrıca bilinen girişimlerin kanvas örneklerini de inceleyebiliyorsunuz ciz.io ile. (Steve Blank)
Kullanıcı Türleri — User Persona
Eğer bir yatırımcı veya jüri karşısında “Ürünümüzü herkes için yaptık” derseniz maça 3–0 geride başlarsınız hatta hükmen mağlup sayılırsınız. Bu durumu yaşamamak için dersimize iyi çalışıyoruz, kullanıcılarımızı-müşterilerimizi spesifik olarak tanımlıyoruz ki “Ürünümüzü 14–18 yaş aralığında programcılığı öğrenmek isteyen lise öğrencileri için geliştirdik” diyebilelim.
Persona’ların nasıl oluşturulması gerektiği konusunda yukarıdaki araçlar yol gösteriyor. İsterseniz bizim olşuturduğumuz kullanıcı tiplerini de inceleyebilirsiniz. Evoltapp’i tercih etme sebebimiz ise diğerleri gibi ücretsiz* olması ve göze hoş gelen arayüzü.
- Ücretsiz pakette tek proje düzenleme hakkınız var. Projenizi indirip aynı proje üzerinde değişiklikler yapmaya devam edebilirsiniz. Bu yazıda bahsedeceğim araçların çoğu ücretsiz, aksi olursa belirteceğim :)
İsim ve Logo
İsim ve logo konusunda iş biraz da (biraz mı!) sizin yaratıcılığınıza kalıyor. Biz yukarıdaki araçları kullanmadık. Deneme yanılma ile, Tilda.cc ikonlarını kullanarak; “bi tık” sağa kaydıra kaydıra kendi logomuzu tasarladık. İsim ve logo konusunda zaman kazanmak istiyorsanız yukarıdaki araçlar işinizi fazlasıyla görecektir.
Bölüm 3 — Landing Page, Prototipleme
Landing Page
Girişiminizi tanıtan internet sitelerine landing page diyoruz. Landing page’in işlevi 1 dakikadan kısa sürede kullanıcıya ne iş yaptığınızı anlatabilmek olmalı, ürünü satın almaya denemeye teşvik etmeli.
Mobil uygulamamızı tanıtacağımız için tek sayfalık bir site yapmayı tercih ettik. Cruip, bünyesinde barındırdığı landing page temalarını ücretsiz olarak indirmenize olanak sağlıyor. Barındırma, SSL sertifikası, form toplama gibi servislerle uğraşmak istermiyorsanız Wix’i de düşünebilirsiniz. Wix’te hesap açıp sitenizi düzenledikten sonra beklemeye başlayın. %50 indirim teklifi er ya da geç posta kutunuza düşecektir (:
Domain
Girişimimiz için isim, logo ve site tasarımı aşamalarını hallettik, sıra alan adını seçmekte; domain satın alma konsunda oldukça fazla seçenek var. Biz ilk yıl için en ekonomik çözümü sunduğu için Godaddy üzerinden satın almaya karar verdik. Önceden satın aldığım alan adları da Godaddy’de bulunduğu için yönetmesi de kolay olacaktı.
Google’a “Godaddy” yazdıktan sonra çıkan ilk reklama tıkladığınız takdirde alan adınızı daha düşük bir ücretten alma şansınız var. Biz öyle yaptık.
Hosting (Landing Page için)
İlk zamanlar landing page’i kendi sunucumuzda barındırdık ancak kullanıcıların mail bilgilerini toplamak için Sendgrid ile API bağlantısı yapmamız ve popup ayarlamamız gerekti. SSL serfikasını ise Cloudflare üzerinden aldık. Sonra öğrendik ki tüm bunları Netlify ile kolayca halledebiliyormuşuz. “Evet bu servis de ücretsiz”
Ücretsiz SSL sertifikası için bir diğer alternatif: Let’s Encrypt Authority
Müşterilerinize ve temel ortaklarınıza, @hotmail.com adresinden mail göndermek istemiyorsanız kurumsal bir mail adresine ihtiyacınız var. Sırf bu yüzden yaptığınız işi ciddiye almadığınızı düşünenler olabilir, benim tanıştığım kişilerin çoğu bu mail olayını pek önemsemiyor; biz en iyisi işimizi sağlam kazığa bağlayalım dedik.
Gsuite başlangıç aşaması için biraz tuzlu olabilir -aylık $6 - Domaini Godaddy üzerinden aldığımız için bir kaç tık ile mail sunucusunu kurmak kolayımıza geldi. Mail Server kurmak zaman kaybı/zahmetli olabiliyor. Gönderdiğimiz mailin spam’e düşmesini ya da karşı tarafa hiç ulaşmamasını hiçbirimiz istemeyiz. Sırtımızı Gsuite’e yaslayıp hiç endişelenmemek en güzeli.
En güzeli tüm bunları Zoho Mail kullanarak birkaç ufak kısıtlamayla ücretsiz olarak da yapabilirsiniz.
Chatbot
Sitemize gelen ziyaretçilere hoşgeldiniz demekten öte, iletişim bilgilerini toplamak için kullandığımız canlı yardım araçları bir hayli revaçta; işe de yarıyorlar. Yukarıdaki araçları kullanarak ziyaretçilerinizden gelen sorulara anlık olarak yanıt verebiliyorsunuz. “Benim yerime bot cevap versin”, “Müşteri fiyatlandırma sayfasına geldiğinde şu mesajı göndersin” dediğiniz anda ücretli pakete geçmeniz gerekiyor.
- En iyisini kullanmak istiyorsanız: Intercom (ücretsiz paketi bulunmuyor!)
- Ziyaretçileri özel mesaj ile karşılamak istiyorsanız: Drift
- Ücretsiz pakette en çok özelliği veren olsun derseniz: Crisp.chat
Tasarım
2010 yılında ilk versiyonu yayınlanan Sketch kısa süre içerisinde endüstri standardı haline geldi. Bunun da etkisi ile internette yüzlerce kaynak bulabilirsiniz; Eğitimler, icon setleri, UI Kit’ler, wireframeler, ücretli-ücretsiz birçok tasarım ve eklenti…
Ne yazık ki Sketch sadece Mac cihazlarda çalışıyor ve ücretsiz değil. Öğrenci olmayanlar için yıllık $100, öğrenciler için ise $50'lık bir ücreti var. Biz 50 dolar ödedik, bana sorarsanız son kuruşuna kadar değdi.
Sırf bu iş için Apple Store’a gitmenize gerek yok. Icon8 tarafından geliştirilen Lunacy ile .sketch uzantılı dosyaları açabilir, düzenleyebilirsiniz.
SketchappSources, Neede.co Prototypr.io gibi kürasyon siteleri ihtiyaç duyduğunuz anda imdadınıza yetişiyor.
İllüstrasyonlar
Undraw.co harika! 🙌🏻🚀
İstediğiniz temada, istediğiniz renk kodunda yüzlerce illüstrasyonu .svg ve .png formatlarında indirebiliyorsunuz. Yukarıdaki araçları sürekli yeni ilustrasyonlar ekleniyor, Drawkit ve Manypixel’in ücretli paketleri de bulunuyor.
Prototipleme
Bu noktada işler biraz karmaşıklaşıyor. Yakın geçmişte taslaklar elle çizilir, Sketh ile arayüzler tasarlanır, kodlamaya girişmeden önce Marvel ile kullanıcı testi yapılır, Zeplin(🇹🇷) ile de ürün ekibi koordinasyonu sağlanırdı. Şimdi ise neredeyse her araç her işi yapıyor. Her şeyi yerli yerine oturtabilmek için altta paylaştığım yazıya göz atabilirsiniz.
Arayüzleri Sketch’te veya başka bir yerde tasarladık; şimdi eksiklerimizi görme, kullanıcı alışkanlıklarını test etme vakti.
Sketch ile entegre çalışmayan tasarım-prototip aracı yok denecek kadar az** Bu yüzden en kolayınıza gelen araçları kullanabilirsiniz. Peki biz nasıl yaptık ?
Önce Sketch ile 22 ekan oluşturduk ardından “Şu butona tıklandığında şu sayfaya git” ayarlamalarını yaptık. (Aksiyona geçmesini istediğiniz butonu seçip W tuşuna basıyorsunuz, Sketch sizi yönlendiriyor). Oluşturduğumuz bu ekranları bir kaç tık ile Overflow’a export ettik ve çıktı aldık. Sketch ile Owerflow entegre çalışabildiği için akış şemasını tekrardan oluşturmamıza gerek kalmadı. Çıktıyı masaya yatırıp uzun uzun tartıştık.
Overflow’dan aldığımız “Akış Şeması” sayesinde nasıl bir algoritma oluşturmamız gerektiğini daha iyi görebildik. Yol haritamızı çizmemiz biraz daha kolay oldu.
Overflow ile birlikte arayüzlere MarvelApp’e de aktardık. MarvelApp’in en güzel tarafı “User Testing” özelliği: Sketch’te tasarladığımız tüm ekranları akış şeması ile Marvelapp’e aktardık. Artık tasarımları kullanıcılar ile buluşturma zamanı. Test için Marvelapp’in mobil uygulamasını ya da web platformunu kullanabilsiniz.
En güzeli tasarladığınız ekranlar ile kullanıcıları başbaşa bırakmak. Müdahale etmeden oturup kullanıcı ne yapıyor izleyin. Kafası karıştığı anda not edin, herhangi bir ekranda beklenenden uzun kalıyor ya da çıkmaza giriyorsa doğru yoldasınız demektir. Teste katılan 10 kişiden 8'i aynı ekranda takılıyorsa tasarımı mutlaka güncellemeliyiz.
Overflow’dan aldığımız akış şeması üzerinde o kadar tartışmamıza rağmen kullanıcı testleri sonrası birçok eksiğimiz olduğunu farkettik. Eksik sayfaları tamamladık, çıkmaz sokakları ortadan kaldırdık. Ekran sayımız 33'e çıkmıştı.
Kodlamaya başladıktan sonra da arayüz güncellemelerimiz devam etti.
Peki tasarımlar nasıl koda dönüşüyor ?
Yanıt: zeplin.io
En basit haliyle Zeplin; tasarımcı ve yazılımcı arasındaki iletişimi karmaşıklıktan uzaklaştıran bir ortak çalışma platformu. Sketch’te tasarladığımız tüm butonların, görsellerin, fontların büyüklüklerini, renk kodlarını, konumlarını yazılım dillerine çeviren bir araç.
Overflow betadan çıktığı için ücretsiz paketini iptal etmiş. Enseyi karartmaya gerek yok** 30 günlük deneme süresi birçoğumuz için yeterli olacaktır.
Bölüm 4 — Kodlama, Geliştirme, Süreç Boyu
Ekip, iş modeli, arayüzler, prototipleme… ve sonunda kodlama aşamasındayız, artık neyi kodlayacağımızı biliyoruz. Şimdi nasıl kodlayacağımıza karar verme vakti.
Programlama Dili
Mobil uygulama geliştirebilmek için öğrenmemiz gereken programlara dilleri var. Bunları öğrenmeye sıfırdan başlayabilirsiniz, belirli bir düzeyde yazılım bilgisine sahipseniz daha hızlı öğrenebilirsiniz. Swift ile Apple ekosistemine özel (native) uygulamalar geliştirebilir yine Kotlin ile Android ekosistemine özel uygulamalar geliştirebilirsiniz.
Uygulamanızı native olarak geliştirmek isterseniz her platform için ayrı bir “kod base” oluşturmanız gerekiyor. Kısaca IOS uygulamanız için ayrı, Android uygulamanız için ayrı kodlar yazmalısınız.
React Native, Flutter, Xamarin, Ionic gibi programlama dilleri (framework’ler) tek bir kod altyapısı ile birden fazla platforma çıktı almanızı sağlıyor. Aynı kodu Web, Android ve IOS’ta çalıştırabiliyorsunuz.
Yazının başlığını da doğrulamak için daha önceden mobil uygulama geliştirme tecrübemiz olmadığını hatırlatmam gerekiyor**
İlk başta Flutter kullanmayı düşündük fakat stabil versiyonun henüz yeni çıkıyor olması ve internette React Native’e kıyasla daha az kaynak olmasını Flutter’ın zayıf noktaları olarak gördük.
Facebook’un desteği, performans avantajı, büyüyen komünitesi, React Native’in güçlü yanlarını oluşturuyordu. Komüniteler tarafından geliştirilen kullanıma-hazır komponentler de işimizi kolaylaştıracaktı. Sonuç olarak React Native daha cezbedici ve mantıklıydı, bu yüzden oyumuzu React Native’den yana kullandık.
Eğitim, Öğrenme
“Sıfırdan React Native Eğitimi” başlıklı online kursları pek tercih etmedik; hiç etmedik daha doğrusu. X kursunu tamamlayıp sonrasında yazılım geliştirmeye başlamak çoğu kişi için daha doğru bir yol olabilir ama kursları incelediğimizde pek güncel olmadıklarını farkettik.
Amacımız mobil uygulama geliştirmeyi öğrenmek değildi, uygulama yapmak için öğrenmemiz gerekiyordu; öğrendik.
Neredeyse tamamen dokümantasyonlar üzerinden ilerledik. Medium, Stackoverflow ve Youtube da değerli kaynaklar oldu bizim için; özellikle bir hayli Youtube araması yaptık. “How to make X in react” gibi aramalar sizi çoğu zaman çözüme ulaştırıyor.
Kullandığımız Bazı Komponentlerin Github Sayfaları
- https://facebook.github.io/react-native/docs/0.59/getting-started
- https://firebase.google.com/docs/?hl=tr
- rnfirebase.io
- nativebase.io
- https://firebase.google.com/docs/guides?hl=tr
Algoritma
Algoritma konusu için ayrı bir parantez açmak istiyorum. Arayüzleri çizelim, kodlayalım gerisi hallolur gibi bir durum söz konusu değil. Uygulamanızdaki her detayı her fonksiyonu planlamanız gerekiyor. Bunun için ekipte en az bir hacker şart :)
Fikir vermesi açısından algoritma oluştururken kullandığımız eskizlerden bir tanesini altta paylaşıyorum:
Backend
Backend-Servis Mimarisi: Yazılımda kullanıcıların görmediği kısımların tümü, ana sistem.
Bu işe yeni giriştiğimiz için Google Cloud, Azure, AWS gibi bulut çözümleri bizim için içinden çıkılmaz hale gelebilir o yüzden burayı fazla kalabalıklaştırmaya gerek yok zaten Parse, Pubnub gibi servisleri de pek konuşan yok.
Firebase ve Amplify gibi platformları kullanarak tüm servis ihtiyaçlarımızı tek noktadan yönetebiliyoruz. Yeni başlayan geliştiriciler için büyük kolaylık sağlıyorlar. Karşılaştırma için altta güzel bir video var.
Amplify ile karşılaştırıldığında daha az esneklik sunmasına karşın Firebase’i tercih ettik. Firebase ile mobil bildirimlerden, mesajlaşmaya tüm backend servislerimizi yönetebiliyoruz…
İletişim
Tahminimden uzun bir yazı olmaya başladı, az yolumuz kaldı dayanın :)
Olmazsa olmazlar listesinin başında yer alan Slack, Github’daki son commitleri, Zeplin’e gelen yorumları ve Trello’daki son değişiklikleri size bildiren, sayısız 3. parti yazılımı entegre edebileceğiniz gelişmiş bir ekip içi mesajlaşma aracı.
Ekipteki herkesin Skype adresine sahip olduğu için yeni bir keşfe gerek duymadık ancak appear.in ve zoom.us günümüzün popüler girişimlerinden, denemesi bedava :)
Bu arada yazı yayınlana kadar appear.in ismini whereby olarak değiştirdi
Çevrimiçi veya çevrimdışı olması pek önemli değil, ekip olarak haftada bir kez toplanmak; sorunları tartışabilmek ve motivasyonu kaybetmemek adına çok önemli.
Proje Yönetimi
Trello gibi proje yönetim araçları; yapılacak işlerin-görevlerin parçalara ayrılmasını, planlanmasını ve takip edilmesini kolaylaştırıyor. Trello ile basit bir kanban oluşturarak, iş akışlarını kuşbakışı izleyebilirsiniz.
Burada nasıl bir kanban oluşturacağınız size kalmış, tamamen özgürsünüz. Görevlerimizi yaygın kullanımda olduğu gibi 4 ana sütun altında toplayarak işe başlayabiliriz:
- PLANLAMA BEKLEYEN
- YAPILACAKLAR
- YAPILIYOR
- TAMAMLANANDI
Mockups
Mockup ürünün, hizmetin ya da dijital varlığınız her ne ise onun, son kullanıcı tarafından görüntülenecek haline en yakın görünümüyle, sunulacak en temel fonksiyonlarının, tüm etkileşim senaryolarının simüle edildiği modelidir. -Sherpa Blog
Dilerseniz Design Camera (rotato.xyz) ile dilediğiniz açıdan ekran görüntüleri alabilirsiniz, yukarıda adı geçen üç araç da ile de tatmin edici sonuçlar elde edebilirsiniz.
Mobil Bildirimler — Push Notifications
Backend servislerimiz Firebase üzerinde çalıştığı için kendi içerisinde sunduğu bildirim özelliğini tercih ettik. Diğer “push” servislerini kullanmanız için bir engel bulunmuyor. Mobil bildirimler, kullanıcı tutundurmada en aktif yöntemler arasında yer alıyor. Daha fazla bilgi almak isterseniz aşağıdaki rapora göz atabilirsiniz. Kaynak
Bölüm 5 — Test, Beta, Hala Öğreniyoruz
Test
Sıra test aşamasında geldi. App Store ve Play Store öncesi uygulamanızı hatalardan arındırmak, eksiklikleri daha iyi görebilmek için test yapıyoruz. Bu aşamayı “Beta” ya da “Alfa” olarak isimlendirebilirsiniz önemli olan olabildiğince geri bildirim toplayabilmek.
Uygulamanızı bu marketlerde yayınlayabilmek için Apple ve Google’ın belirlediği kurallara uymanız gerekiyor. Uygulamanız aniden kapanıyor, kırık linkler barındırıyorsa ya da sonu çıkmaz sokak olan ekranlarınız bulunuyorsa uygulamanız muhtemelen reddedilecektir. Yaygın Uygulama Redleri-App Store
Biz kayıt ekranındaki üç ekrana “geri butonu” 🔙 koymayı unutmuşuz :) dediğim gibi çıkmaz sokak istenmiyor kesinlikle!
App Store ve Play Store’a uygulama yükleme hakkında tüm resmi kaynaklara buradan ve buradan erişebilirsiniz.
Uygulamanızı markete yükleyebilmek için herşeyden önce geliştirici olmanız gerekiyor. Bunun ücreti de Apple için yıllık $100, Google için ise tek seferlik $25
Hukuk — Sözleşmeler
Betadan önce sözleşemelerden bahsetmem gerek. Gizlilik Sözleşmeniz olmadan app marketlere adım atamıyorsunuz. Tabi kimse sizden sıfırdan sayfalarca sözleşme yazmanızı beklemiyor, onun da kolayı var.
Bu araçlar ile klavyeye dokunmadan kendi sözleşmenizi hazırlayabiliyorsunuz. Soruların geneli çoktan seçmeli ya da “Evet-Hayır” şeklinde. Termly ücretsiz paketinde 1 adet sözleşme hazırlamanıza izin veriyor, farklı hesapları ile GDPR, Terms and Conditions, Cookie Consent gibi hukuki meseleleri de halledebilirsiniz. Sorulara yanlış yanıtlar vermemeye dikkat edin!
Beta
Beta diyorduk: Şimdilik fabric.io üzerinden de erişilebilen Crashlytics bazen sorun çıkarsa da en hızlı çözüm olarak karşımıza çıktı. Ayarlamaları yaptıktan sonra mail adresi ekleyerek veya link paylaşarak kullanıcıları betaya davet edebiliyorsunuz.
Hacker Tip!
Geliştirdiğiniz uygulamayı 1000+ kişi kullandığında neler olacağını görmek mi istiyorsunuz ? Merak etmeyin faker.js tam size göre;Faker.js sizin için bir çok kombinasyonda rastgele “fake” kullanıcılar üretiyor. Gerçekten etkileyici bir çözüm, algoritmamızı geliştirmemize katkısı da oldu 👏 ➡ Demo
Analytics
Uygulamamızı kaç kişi kullanıyor, günlük aktif kullanıcımız ne kadar, kullanıcılar uygulamamızda ortalama kaç dakika harcıyor, bir gelen bir daha uğruyor mu (retention) gibi gibi soruları basitçe yanıtlayan çözümlere “analitik araçları” deniyor. Ücretli ve ücretsiz sayısız seçenek mevcut. Ücretsiz seçenekler arasında muhteşem farklar yok, dilediğinizi kullanabilirsiniz.
Güncelleme: Sevgili Celil Bozkurt’un önerisi üzerine Flurry’e geçmeye karar verdik 👍
Bölüm 6—Product Hunt, Teşekkürler (Ask)
Sizlere mobil uygulama geliştirirken nasıl bir yol izlenmeli; “Hangi aşamada hangi adım atılmalı” konusunda kendi tecrübelerimizden örnekler vererek anlatmaya çalıştım. Buraya kadar okuduysanız can-ı gönülden tebrik ederim 👏👏
Product Hunt sayfamıza abone olan 5 kişiye “Yalın Girişim” kitabını hediye ediyoruz 🎁📘 Alttaki linkte tıklayıp mail adresinizi bırakmanız yeterli, bu yazıyı paylaşarak da destek olabilirsiniz :)
Sadece 6 ayda ortaya çıkan bir ürünü değil, 3 yıllık başarısızlığın, öğrenmenin, deneyimin bir sonucunu anlattım aslında.
Uygulamamızı ilk kullanıcılarından olmak ve testimize katılmak isterseniz buradan Iphone cihazınıza, buradan da Android cihazınıza indirebilirsiniz.
Beta sürecinde ve bu yazının son haline bürünmesinde geri bildirimlerini eksik etmeyen Sevgili Basar Kaya, Erman Taylan, Ozan Sönmez, Murat K. Girgin, Şehrazat Moroveti, Celil Bozkurt, Onur Çevik, Sarp Bilecen, Mertcan Gül, Hamdi KÜÇÜK, Erdem Lafcı, Gencer Özkazmaz, Erdal Kılınç, Fatih Ünver ve elbette bu ekibi tanıştıran Emre Utku Solak’a buradan teşekkürlerimi iletiyorum.
Geri bildirimlerinizi bekliyoruz 🙌🏻
