Merhaba arkadaşlar ben Erol
Sizlere uzun zamandır tutorial paylaşamiyordum bugün ufak bir grup chat uygulaması nasıl yapılır onu göstereceğim
Not: istenirse gelişmiş versiyonunu yapabilirim
Öncelikle sketchwareyi açıyoruz ve yeni bir proje oluşturuyoruz
Projenin ara yüzüne aşağıdaki resimdeki gibi widgetleri ekliyoruz
Linear1
• ListView (Mesajların Listelenmesi için)
Linear2
• EditText1 (Kullanıcı Adı İçin)
• EditText2 (Mesaj içeriği için)
• Button1 (Mesaji yollayıp listViewe eklemesi için)
Bunları yerleştirdikten sonra button1 in üzerine tıklayıp event içeriğine gelin oradan onClick olayını aktif edin blok paletini açıp 'Variable' kısmından 'add variable' butonuna basıyoruz karşımıza isim ekleme ve 4 tane seçenek çıkıyor en alttaki 'map' adlı seçeneğe tıklıyoruz Variable ismini isteğinize göre susleyebilirsiniz
Create ye bastıktan sonra blok paletindeki 'Variable' kısmının hemen altındaki List kısmına tıklıyoruz yine anlattığım gibi bir 'list map' oluşturuyoruz ismi şekillendirebilirsiniz.
Bunları yaptıktan sonra ana sayfamıza geliyoruz ve en alttaki 'main.xml' üzerine tıklıyoruz burda bizim sayfalarımızı listeleyen kısım var 'Custom View' e tıklıyoruz ve bir custom view oluşturuyoruz ismi farketmez
Custom viewin içine:
1 Adet Linear (H)
2 Adet TextView
Ekledikten sonra 'main.xml'ye gelip eklediğimiz list viewin üzerine tıklıyoruz seçeneklerden 'Custom View' seçeneğine tıklayıp oluşturduğumuz custom viewi seçiyoruz ve kaydediyoruz şimdi sıra FireBase kurmaya geldi
Firebase sitesi: FireBase Console
Burada eğer kaydınız yoksa kaydınızı tamamlayıp 'Create A New FireBase Project' butonuna tıklıyoruz
Project name adlı sayfada istediğimiz herhangi birşeyi yazıp contiuneye basıyoruz bilgilendirme formunu vs. Onaylayıp 'Configure Google Analytcs' kısmında select an accountun üzerine tıklayıp kendi mailimizi eğer mailimiz yoksa 'select default firebase account' yazısına tıklayıp ilerliyoruz projemiz oluşturulurken bekliyoruz
Oluşturulduktan sonra bizi gemini ai nin sayfasına attı siteyi yenileyip konsola bizi otomatik atıyor sol üstteki 3 çizgiden menüyü açıyoruz menüdeki seçeneklerden buildin üzerine tıklıyoruz ve 'Real Time Database' seçeneğine tıklıyoruz açılan sayfada 'Create Database' butonuna tıklıyoruz
Set Up Database sayfasını geçiyoruz ve açılan diğer sayfayı da
Şuan veritabanimizi oluşturduk üstteki Seçeneklerden Rules e tıklıyoruz karşımıza kod yazma alanı çıktı hemen alttaki kodu oraya mevcut yazıyı silip yapıştırıyoruz
İşaretledigim butona tıkladıktan sonra menude bir ayarlar iconu olacak (
) ona tıklıyoruz ve project settings seçeneğine basıyoruz
Evet karşımıza biraz kaydırınca böyle birşey çıkıyor Android Logosuna tıklıyoruz
Burada Sketchwareye girip uygulamamızın paket ismini giriyoruz
Burdaki Package name yi kopyalayıp
Burdaki ilk boşluğa yazıyoruz diğerini boş bıraıyoruz ve Register App Butonuna basıyoruz diğer açılan 3 sayfayı Enable onayla vs. Butonuna tıkliyoruz
Burada artık android ios logolari yerine uygulamamizin bilgileri var google-services.json adlı butona tıklıyoruz ve dosyayı indiriyoruz
Burada artık işimiz bitti Sketchware Proya giriş yapıyoruz ve uygulamamıza tıklıyoruz ana sayfada sağ üstteki 3 noktaya tıklayıp menüyü açıyoruz Library Managere tıklıyoruz ardında Firebase seçeneğine tıklıyoruz en alttaki import google-services.json butonuna tıklayıp firebase konsoldan indirdiğimiz dosyayı seçip kaydediyoruz artık firebase dbyi uygulamamıza aktardık şimdi kodlara gelelim
Components kısmından
Firebase DB componentini aktarıyoruz
Component ismi önemsiz ama eğer location kısmını sallarsaniz sıkıntı yaşayabilirsiniz ben özellikle mesajlar yaptım çünkü mesajları "Mesajlar" adlı dosyada sağlayacağız bu işinize göre değişir tabiki componenti ekledikten sonra componentin üzerine bir kez tıklıyoruz 'OnChildAdded' butonuna tıklıyoruz
Bu üstteki bloklari paletten bulup ekliyoruz bu bloklar sayesinde veriyi tek seferlik firebaseye kaydedip listmapa (listviewe özel olan) kaydediyoruz ve listviewi yeniliyoruz
Kaydedip ana ekrana geliyoruz
Button1 onClick olayına girip aşağıdaki kod bloklarını yerleştiriyoruz
Burda oluşturduğumuz Variable Map ile verileri tutuyoruz FireBaseye giden maptaki bloklari yani edittextlerdeki yazıları firebaseye götürür ondan önceki Key kısmında ise firebaseye nasıl yansıyor onu gösterir bize isim yazıyorsa firebase Dbde
028329383983:
'isim:ismin' : 'mesaj:mesajın'
Tarzında kaydeder
Evet buradan sonra kaydedip listviewin üzerine tıklıyoruz OnBindCustomView adlı seçeneği aktiflestiriyoruz
Bu kod bloklarını kod paletinden ekliyoruz bu paletlerde setText kısmında custom viewe eklediğimiz textviewleri Variable Mapa kaydettiğimiz keylerden çekiyor ve mesajları listeliyor kaydedip uygulamamızı deneyebiliriz
Elinize sağlık
Not: Online iş arıyorum şirketinize kişiye özel uygulama geliştirebilirim ufak ücretler dahilinde uygulama yapıp satıyorum
Telegram: @erolw
Kullandığım Sketchware Sürümü
Telegram kanalım: t.me/versabest
Bir sonraki tutorial ne olsun?
Sizlere uzun zamandır tutorial paylaşamiyordum bugün ufak bir grup chat uygulaması nasıl yapılır onu göstereceğim
Not: istenirse gelişmiş versiyonunu yapabilirim
Öncelikle sketchwareyi açıyoruz ve yeni bir proje oluşturuyoruz
Projenin ara yüzüne aşağıdaki resimdeki gibi widgetleri ekliyoruz
Linear1
• ListView (Mesajların Listelenmesi için)
Linear2
• EditText1 (Kullanıcı Adı İçin)
• EditText2 (Mesaj içeriği için)
• Button1 (Mesaji yollayıp listViewe eklemesi için)
Bunları yerleştirdikten sonra button1 in üzerine tıklayıp event içeriğine gelin oradan onClick olayını aktif edin blok paletini açıp 'Variable' kısmından 'add variable' butonuna basıyoruz karşımıza isim ekleme ve 4 tane seçenek çıkıyor en alttaki 'map' adlı seçeneğe tıklıyoruz Variable ismini isteğinize göre susleyebilirsiniz
Create ye bastıktan sonra blok paletindeki 'Variable' kısmının hemen altındaki List kısmına tıklıyoruz yine anlattığım gibi bir 'list map' oluşturuyoruz ismi şekillendirebilirsiniz.
Bunları yaptıktan sonra ana sayfamıza geliyoruz ve en alttaki 'main.xml' üzerine tıklıyoruz burda bizim sayfalarımızı listeleyen kısım var 'Custom View' e tıklıyoruz ve bir custom view oluşturuyoruz ismi farketmez
Custom viewin içine:
1 Adet Linear (H)
2 Adet TextView
Ekledikten sonra 'main.xml'ye gelip eklediğimiz list viewin üzerine tıklıyoruz seçeneklerden 'Custom View' seçeneğine tıklayıp oluşturduğumuz custom viewi seçiyoruz ve kaydediyoruz şimdi sıra FireBase kurmaya geldi
Firebase sitesi: FireBase Console
Burada eğer kaydınız yoksa kaydınızı tamamlayıp 'Create A New FireBase Project' butonuna tıklıyoruz
Project name adlı sayfada istediğimiz herhangi birşeyi yazıp contiuneye basıyoruz bilgilendirme formunu vs. Onaylayıp 'Configure Google Analytcs' kısmında select an accountun üzerine tıklayıp kendi mailimizi eğer mailimiz yoksa 'select default firebase account' yazısına tıklayıp ilerliyoruz projemiz oluşturulurken bekliyoruz
Oluşturulduktan sonra bizi gemini ai nin sayfasına attı siteyi yenileyip konsola bizi otomatik atıyor sol üstteki 3 çizgiden menüyü açıyoruz menüdeki seçeneklerden buildin üzerine tıklıyoruz ve 'Real Time Database' seçeneğine tıklıyoruz açılan sayfada 'Create Database' butonuna tıklıyoruz
Set Up Database sayfasını geçiyoruz ve açılan diğer sayfayı da
Şuan veritabanimizi oluşturduk üstteki Seçeneklerden Rules e tıklıyoruz karşımıza kod yazma alanı çıktı hemen alttaki kodu oraya mevcut yazıyı silip yapıştırıyoruz
Kod:
{
"rules": {
".read": true,
".write": true
}
}İşaretledigim butona tıkladıktan sonra menude bir ayarlar iconu olacak (
) ona tıklıyoruz ve project settings seçeneğine basıyoruzEvet karşımıza biraz kaydırınca böyle birşey çıkıyor Android Logosuna tıklıyoruz
Burada Sketchwareye girip uygulamamızın paket ismini giriyoruz
Burdaki Package name yi kopyalayıp
Burdaki ilk boşluğa yazıyoruz diğerini boş bıraıyoruz ve Register App Butonuna basıyoruz diğer açılan 3 sayfayı Enable onayla vs. Butonuna tıkliyoruz
Burada artık android ios logolari yerine uygulamamizin bilgileri var google-services.json adlı butona tıklıyoruz ve dosyayı indiriyoruz
Burada artık işimiz bitti Sketchware Proya giriş yapıyoruz ve uygulamamıza tıklıyoruz ana sayfada sağ üstteki 3 noktaya tıklayıp menüyü açıyoruz Library Managere tıklıyoruz ardında Firebase seçeneğine tıklıyoruz en alttaki import google-services.json butonuna tıklayıp firebase konsoldan indirdiğimiz dosyayı seçip kaydediyoruz artık firebase dbyi uygulamamıza aktardık şimdi kodlara gelelim
Components kısmından
Firebase DB componentini aktarıyoruz
Component ismi önemsiz ama eğer location kısmını sallarsaniz sıkıntı yaşayabilirsiniz ben özellikle mesajlar yaptım çünkü mesajları "Mesajlar" adlı dosyada sağlayacağız bu işinize göre değişir tabiki componenti ekledikten sonra componentin üzerine bir kez tıklıyoruz 'OnChildAdded' butonuna tıklıyoruz
Bu üstteki bloklari paletten bulup ekliyoruz bu bloklar sayesinde veriyi tek seferlik firebaseye kaydedip listmapa (listviewe özel olan) kaydediyoruz ve listviewi yeniliyoruz
Kaydedip ana ekrana geliyoruz
Button1 onClick olayına girip aşağıdaki kod bloklarını yerleştiriyoruz
Burda oluşturduğumuz Variable Map ile verileri tutuyoruz FireBaseye giden maptaki bloklari yani edittextlerdeki yazıları firebaseye götürür ondan önceki Key kısmında ise firebaseye nasıl yansıyor onu gösterir bize isim yazıyorsa firebase Dbde
028329383983:
'isim:ismin' : 'mesaj:mesajın'
Tarzında kaydeder
Evet buradan sonra kaydedip listviewin üzerine tıklıyoruz OnBindCustomView adlı seçeneği aktiflestiriyoruz
Bu kod bloklarını kod paletinden ekliyoruz bu paletlerde setText kısmında custom viewe eklediğimiz textviewleri Variable Mapa kaydettiğimiz keylerden çekiyor ve mesajları listeliyor kaydedip uygulamamızı deneyebiliriz
Elinize sağlık
Not: Online iş arıyorum şirketinize kişiye özel uygulama geliştirebilirim ufak ücretler dahilinde uygulama yapıp satıyorum
Telegram: @erolw
Kullandığım Sketchware Sürümü
Telegram kanalım: t.me/versabest
Bir sonraki tutorial ne olsun?
