Android Studio Firebase Instagram Clone

Android Studio Firebase Instagram Clone

Uygulamalarımız için kullanabileceğimiz bir veritabanı olarak karşımıza çıkan Firebase bir çok özelliği sayesinde bizlere oldukça kolaylık sağlıyor. Firebase kütüphanesi Database(Veri Tabanı), Storage(Media Depolama) ve Authentication(Kimlik Doğrulama) özelliklerini bizlere sunmaktadır. Bizde bu makalede her bir özelliği kullanarak basit bir uygulama yapmaya çalışacağız.

Uygulamamızı genel olarak anlatırsak ilk olarak kullanıcı telefonunda bulunan bir resimi seçerek resim ile ilgili bir yorum ekleyecek daha sonra bu resim ve yorumu veritabanına kayıt edeceğiz. Seçilen resim ve yorumu bir sayfada instagrama benzer bir şekide göstereceğiz. Kullanıcılar resimin üstüne basılı tuttuğu zaman da resim beğenilmiş olacak kısaca instagramın ilkel bir hali şeklinde karşımıza çıkacak.

Bir resim post ettiğimiz zaman veya bir resimi beğendiğimiz zaman diğer kullanıcının aynı anda değişikliği algılamasını Firebase kütüphanesinin Real Time özelliği sağlamaktadır böylelikle sadece Instagram değil Whatsapp gibi uygulamalarında yapılabilmesi için oldukça kullanışlı bir veritabanıdır.

GEREKLİ AYARLARIN YAPILMASI

1 – Android Studio >> Start a new Android Studio project diyerek yeni bir proje oluşturuyoruz.

2 – Üst pencereden Firebase>>Tools sekmesini açıyoruz ve aşağıdaki resimlerde numaralı yerleri aktif hale getiriyoruz.

En son hali aşağıdaki resim gibi olması gerekiyor.

Resimdeki adımları uyguladığımız zaman Firebase kütüphanesinin Authentication özelliğini aktif hale getirip uygulamamıza dahil etmiş olduk. Database ve Storage özelliklerini kullanabilmek için aynı adımları bu özellikler için de uyguluyoruz.

3 – AndroidManifest.xml dosyamızı açıp aşağıdaki izinleri alıyoruz.

4 – Uygulamamızda kullanacağım resimleri buraya tıklayarak indirelim ve klasördeki üç resimi drawable klasörünün altına atalım.

5 – Uygulamanın yukardaki çalışan gifine dikkat ederseniz post işlemini yapmak için sağ üstte bulunan üç noktaya tıklayarak bir menü açıyoruz. Bu şekilde bir menü oluşturabilmek için bu adımı uyguluyoruz.

res klasörünün üstüne sağ tıklayarak new >> Directory diyerek menu adında bir klasör oluşturuyoruz. Daha sonra oluşturduğumuz menu klasörünün üstüne sağ tıklayarak new >> Menu resource file diyoruz File name kısmına add_post diyerek yeni xml dosyası oluşturuyoruz. Oluşturduğumuz xml dosyasını aşağıdaki gibi düzenliyoruz.

add_post.xml 

6 – Resimleri veritabanına kayıt ederken url şeklinde kayıt edeceğiz. Uygulamamızda bu resimleri gösterebilmek için oldukça karışık işlemler yapmak yerine Picasso Freamwork’ü kullanacağız. Buraya tıklayarak websitesini ziyaret edebilirsiniz.

Kullanımı kolay olduğu gibi kurulumuda oldukça kolay aşağıdaki kod satırını build.gradle dosyamıza ekliyoruz.

Gerekli ayarları 6 adımda yaptıktan sonra projemiz anlatıma geçmek için hazır hale geldi artık anlatıma geçelim.

activity_main.xml dosyamızı email ve şifre girilebilecek şekilde bir login sayfası oluşturuyoruz.

activity_main.xml

MainActivity.java sınıfımızda kullanıcının sisteme kayıt olmasını ve kayıt olduktan sonra giriş yapması için gerekli ayarları yapıyoruz.

MainActivity.java

Kullanıcı kayıt olduktan sonra sisteme girdiğinde FeedActivity.java sınıfına geçiş yapacak ve bu sayfada adapter oluşturup listView içine aktararak resimleri göstereceğiz.

java klasörünün üstünde sağ tıklayarak new >> activity >> Empty Activity

Activity Name :  FeedActivity

Layout Name : activity_feed

Finish diyerek dosyalarımızı oluşturuyoruz.

Oluşturduğumuz dosyaları aşağıdaki gibi düzenliyoruz.

FeedActivity.java

activity_feed.xml

FeedActivity sınıfımızda adapter modeli için;

java klasörünün üstünde sağ tıklayarak new >> Java Class 

Activity Name :  PostClass

Ok diyerek dosyamızı oluşturuyoruz.

Oluşturduğumuz dosyayı aşağıdaki gibi düzenliyoruz.

PostClass.java

FeedActivity sınıfımızda listView içinde resimlerimiz daha derli toplu gösterebilmek için custom_view oluşturuyoruz zaten PostClass sınıfında bu xml dosyasını bağlamıştık.

layout klasörünün üstünde sağ tıklayarak  New >> Layout resource file

File name : custom_view

Ok diyerek dosyamızı oluşturuyoruz.

Oluşturduğumuz dosyayı aşağıdaki gibi düzenliyoruz.

Uygulamanın sağ üstünden menü >> add post dediğimiz zaman resimleri yükleyeceğimiz sayfayı nasıl düzenleyeceğimize bakalım.

java klasörünün üstünde sağ tıklayarak new >> activity >> Empty Activity

Activity Name :  UploadActivity

Layout Name : upload_activity

Finish diyerek dosyalarımızı oluşturuyoruz.

Oluşturduğumuz dosyaları aşağıdaki gibi düzenliyoruz.

UploadActivity.java

upload_activity.xml

Böylelikle uzun bir anlatımdan sonra basit bir şekilde instagram mantığı ile çalışan bir uygulamayı nasıl yapabileceğimizi ve Firebase kütüphanesinin bize sağlamış olduğu Authentication – Database – Storage özelliklerini nasıl kullanabileceğimiz görmüş olduk.

Projenin kaynak kodlarını buraya tıklayarak indirebilirsiniz.

 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir