Bir ayda mobil uygulama geliştirebilmek
Selamlar, bu yazımda sadece temel javascript bilgim ile 1 ay, hatta 1 aydan daha kısa bir süre içerisinde nasıl mobil uygulama geliştirdiğimden bahsetmeye çalışacağım.
Bahsedeceğim uygulamayı indirmek için buraya tıklayabilirsiniz.
Neden mobil uygulama ?
Zerostagram.com bir instagram içerik indirme sitesi. Tarayıcınızda instagramdaki herhangi bir içeriği görüntülerken urlin başına “0” koymanız ile indirme ekranına sizi yönlendiriyor. Adres satırı sayesinde indirme işlemini kolaylaştıran bir sitenin neden mobil uygulaması olmalı ?
Aslında oldukça mantıksız.
İnternet sitemi bir defa ziyaret eden herhangi bir kullanıcının bir daha siteme girme olasılığı oldukça düşük. Çünkü instagram yoğun bir şekilde mobil uygulama üzerinden kullanılıyor. Karşılaştığınız herhangi bir içeriği indirmek istediğinizde telefonunuz üzerinden tarayıcıyı açıp adres satırına 0instagram.com yazıp gitmeniz, sonrasında karşılaştığınız fotoğrafı birde tarayıcı üzerinden bulmanız oldukça yorucu bir durum.
Bu sebepten ötürü hali hazırda app marketlerde yüzlerce olan instagram fotoğraf indirme uygulamalarına bir yenisini daha eklemiş oldum.
Nereden başladım ?
Aslında 25 Kasım’da Bahçeşehir Üniversitesi ile House Of Apps’in düzenlediği şu etkinliğe katılarak ilk başlangıcımı yaptım diyebilirim. Harika sunumundan ötürü Tuğkan abiye tekrardan teşekkür ediyorum.
Gerçekten de bir mobil uygulamayı geliştirirken nereden başlamam gerektiğini sunum esnasında tam olarak kavradım diyebilirim. Etkinlikten yaklaşık 1 ay sonra mobil uygulamamı geliştirmeye başlamama rağmen kodların github’ta olması sayesinde her takıldığım noktada tekrar kodlara dönerek neyi nasıl kullanmam gerektiğini hatırladım. Bu esnada kod okumanın da ne kadar faydalı olduğunu da anlamış oldum.
Bunun yanı sıra react-native’in kendi dökümantasyonu gerçekten harika.
Süreç
Öncelikle elimde mevcut bir tasarımın olmaması sanırım en büyük eksiklerimden biridir. Tasarım konusunda her ne kadar native-base’den yararlansam da uygulamamın oldukça berbat bir tasarıma sahip olduğunu söylemek için tek bir göz dahi yeterli. Bu konuda birilerinden yardım almam gerektiği aşikar.
React-navigation’ı ayarlamak ve api için bir helper yazmak ile başladığımı hatırlıyorum. Bu kadar basit şeyler dahi ilk başlarda çok sancılı olabiliyor. Sadece navigationu ayarlamak sanırım bir günümü almıştı. Üniversite sınavına hazırlanmaktan arta kalan günden bahsediyorum.
Sonrasında kullanıcı profillerini tasarlamaya başladım. Bu konuda en büyük yardımcım kesinlikle flex oldu.
Kullanıcı bilgilerini içeren kısmı kodladıktan sonra gönderileri listeleme kısmına geçtim, sanırım en çok zorlandığım noktalardan biriydi. Scroll sayfanın sonuna geldiği zaman daha eski gönderiler listelenmeliydi. Bu konuda react-native ile birlikte dahili olarak gelen flatlist, aslında yeterli doğrudan flatlistin infinite scroll özelliği var fakat bir şeyleri yanlış yürütmemden ötürü olmalı ki çeşitli problemler ile karşılaştım. Neyse ki geç olmasına rağmen bir şekilde karşılaştığım sorunları çözdüm.
Sorunlardan benim için en dertli olanı, scroll kaydıkça, yüklenen görsellerin belli bir noktadan sonra cihazda kasma yapmaya başlamasıydı. Bunun sebebi tüm görselleri ramde saklayarak scrolla devam etmesiydi, haliyle ram tüketimi maximum seviyeye ulaşınca da uygulama kullanılmaz hale geliyordu. Bu sorunu, görselleri dahili hafızada cacheleme yaparak çözdüm. Bunun içinde ileride şu paketi kullandım.
Profil ekranını bitirdikten sonra gönderiler için bir ekran tasarladım, burada ilk defa dışarıdan bir paket kullandım. Video gönderilerini oynatabilmek için react-native-video paketini projeme dahil ettim. Açık kaynağın ne kadar değerli ve güzel bir şey olduğunu proje geliştirirken fark ediyorsunuz diyebilirim.Kullandığım paketler o kadar işimi kolaylaştırdı ki anlatamam. Paketler konusunda yazının ilerleyen safalarında birkaç şeyden daha bahsedeceğim.
Profil ve gönderi ekranlarından sonra kullanıcı arama kısmını kodlamaya koyuldum. Burada bir api’ya istekte bulunup dönen sonuca göre ekranda kullanıcıları listeliyor. Basit bir scrollview ile işlem tamam. Şuan çok rahat yazıyorum fakat ilk uygularken bu konuda da oldukça sıkıntılara düşmüştüm.
Arama kısmını da yazdığımıza göre tek eksiğimiz ana sayfa ekranı. İnternet sitesinde ana sayfa ekranı boş kalmasın diye bir takım yazılar ile doldurmuştum. Mobil uygulamada böyle bir şeyin hiçbir şekilde hoş olmadığını düşünerek. Son ziyaret edilen 5 profili ana sayfaya ekleme kararı aldım. Burada biraz instagram hikaye görünümünden etkilenerek yukarıya kullanıcı profil fotoğraflarını koymaya karar kıldım. Öncelikle bu kısmı asyncStorage ile yazmaya çalıştım. Fakat tek array dizisinin içinde ziyaret edilen profillerin kullanıcı adı ve profil fotoğrafı urlini tutmayı başaramadım. Bende realm veritabanı kullanmaya karar verdim. Realm ile çok daha kısa bir sürede istediğim sonucu aldım sanıyordum ki çeşitli buglar oluştuğunu fark edene kadar. Bu buglar kesinlikle benim acemiliğim kaynaklı sorunlar. Çözmeye çalıştım fakat bir türlü çözemeyince tekrardan asyncStorage’e geri dönüş yaptım. Biraz array üzerine araştırma yaptıktan sonra tek array dizisi içinde işlemlerimi gerçekleştirebildim.
Ana sayfa ekranında url yapıştırma kısmı da ekledim. Sanırım en kolay yapabildiğim kısım bu oldu. Clipboard ile kopyalanmış linki paste edip, linki parse ederek ilgili kısmı çektim.
Ardından tek eksiğim uygulamanın can alıcı noktası içerikleri cihaza kaydetmek kaldı. Bunun için öncelikle react-native-fs paketi kullandım ve gayet güzel çalıştığını düşüyordum fakat indirilen içerikler galeride görünmesi için cihazı açıp kapatmak gerekiyordu. Tam olarak nedenini bilmiyorum. Dosya yöneticisinden görülen fotoğraflar, galeride görünmüyordu. Biraz araştırma yaptıktan sonra fetch-blob paketine geçiş yaparak scanFile ile bu sorunu ortadan kaldırdım.
Sanırım kod aşamasındaki hemen her şeyden bahsettim. Merak ettiğiniz aklınıza takılan herhangi bir konuda hiç çekinmeden bana twitter üzerinden mesaj atabilirsiniz.Biraz da deneyimlediğim tecrübeleri aktarmaya çalışayım.
Paketler
Bir projede olmazsa olmaz şey kesinlikle çeşitli npm paketleridir. Özellikle tek başınıza veya küçük bir ekip olarak geliştirme yapıyorsanız, paketler geliştirme sürecinizi oldukça kısaltacaktır. Fakat herhangi bir paketi projenize dahil ederken dikkat etmeniz gereken birkaç unsur var.
- Github üzerinden açılan issue’lara mutlaka bakın. Kullanmak istediğiniz paketin çeşitli bugları olabilir. Bazı durumlarda kullanacağınız paket işinizi dahi görmeyecek durumda olabilir. Paketi kullandıktan sonra bunu deneyimlemek yerine mutlaka issuelara bir göz gezdirin.
- Mutlaka kullanacağınız paketi alternatifleri ile karşılaştırın. Github üzerinden alınan starlar çoğu zaman eleyici bir faktör olsa da her zaman starı fazla olan paket sizin sorununuz için doğru paket olmayabilir.
- Kullandığınız paketleri oldukça azaltmaya özen gösterin. React-native ile geliştirilen bir uygulamada şüphesiz en can alıcı noktalardan birisi uygulama boyutu. Kullandığınız gereksiz paketlerde uygulama boyutunuzu olumsuz yönde etkileyecektir. Olabildiğince az paket ile işinizi çözmeye çalışın.
Tasarım
Herhangi bir web veya mobil uygulamanın bel kemiği kesinlikle tasarımıdır. Bu konuda oldukça zayıfım ve çevremdeki bazı yalnız geliştiriciler de aynı durumdan muzdarip olduğunu görüyorum. Çeşitli tasarımların open-source olarak paylaşıldığı bir platform var mı bilmiyorum ama yoksa bile kesinlikle olmalı. Çok ekmeğini yiyenlerden biri olacağım kesin :)
Yayınlama süreci
Asıl can alıcı nokta sanırım app marketde yayınlama sürecimdi. Öncelikle bir macbook + 100 $ sahibi olmadığım için ios için çıkamayacağım kesindi. Tek platform olarak android’de yani google play’de yayınlayacaktım. Uygulamayı bitirdiğimi düşündüğüm gün google play’e gönderdim, 1 saat geçmeden uygulamam market de yayına alındı. Her şey çok güzeldi. Ta ki gelen maile kadar. Uygulamayı yayınlayalı 1 hafta olmamıştı ki uygulamam yayından kaldırıldı. Google destek ekibine niçin kaldırıldığını sorduğumda “Bürünme politikası” cevabından başka hiç bir cevap alamadım. Uygulama açıklamasında ve başlığında instagram adını geçirdiğim için yayından kaldırıldığını düşünerek, uygulama başlığını ve açıklamasını değiştirip tekrar yayınladım.
Yine 1 saat geçmeden yayınlandı. Fakat bu defa tam 7. günde bir mail daha “Uygulamanız bürünme politikamıza aykırı olduğu için yayından kaldırıldı” Kan beynime fışkırdı adeta. Nedir bu bürünme politikası ? Defalarca google’ın yazdığı makaleyi okudum. Tekrar mail attım, cevap yok. Oldukça sinir bozucu bir durumdu.
Logomun renklerinin benzediğini düşündüm fakat aynı renklerde hatta logosu instagrama benden çok daha fazla benzeyen onlarca uygulama market de aylardır yayındaydı. 2. reddimi yememin ardından logomu Arda abinin tasarladığı orjinal renklerinde tekrardan yayınladım. Bugün 6. gün umarım tekrardan yayından kaldırılmaz. Bu konuda Google oldukça berbat çalışıyor. App store’a göndereceğiniz bir uygulamanın belki 3 gün bekleme süreci olacak ama sonrasında yayından kalkmayacağını biliyorsunuz. Google 1 saatte onaylıyor ama sebebini dahi açıkça belirtmeden yayından kaldırıyor. Tam bu olaylar başımdan geçerken 1:0 podcastini dinleyip aynı dertlerle mücadele etmeye çalışmış birilerini daha görmek, beni google’dan epey soğuttu. En kısa zamanda macbook+100$ sahibi olup sadece ios geliştirmek istiyorum :)
Bir medium yazımın daha sonuna geldiniz. Buraya kadar okuduğunuz için size çok teşekkür ederim. Bir başka yazımda tekrardan görüşmek üzere esen kalın 👋