Android Studio, Socket.io ve Mysql ile online oyun yapımı #2

Sizin için önemli olan şeyleri daha fazla keşfedin

Serinin bu ikinci yazısında login ekranını tasarlayıp dinamik olarak çalıştırıyoruz. Ayrıca gerekli renk, string gibi tanımlamaları yapıyoruz.

 

Android Studio projesi üzerinde;

 

res/values klasörü içindeki colors.xml dosyasını açarak proje boyunca gerekli renk tanımlamalarını yapıyoruz:

<?xml version="1.0" encoding="utf-8"?> <resources>     <color name="colorPrimary">#008577</color>     <color name="colorPrimaryDark">#00574B</color>     <color name="colorAccent">#D81B60</color>     <color name="available">#27ae60</color>     <color name="busy">#c0392b</color>     <color name="white">#FFF</color> </resources>

 

res/values klasörü içindeki strings.xml dosyasını açarak proje boyunca gerekli string tanımlamalarını yapıyoruz:

<resources>     <string name="app_name">Online Math Game</string>     <string name="text_welcome">Hoşgeldin yusufborucu</string>     <string name="text_online_users">Online kullanıcılar</string>     <string name="text_player">aliveli</string>     <string name="text_username">Yoksa oluşturulacak.</string>     <string name="text_password">Unutursanız geri dönüşü yok.</string>     <string name="text_time">10</string>     <string name="text_question">15 + 20 = ?</string>     <string name="text_score">0</string>     <string name="text_result">Oyunu yusufborucu kazandı!</string>     <string name="text_result_draw">Oyun berabere bitti!</string>     <string name="text_rank">1</string>     <string name="hint_username">Kullanıcı adı</string>     <string name="hint_password">Parola</string>     <string name="hint_answer">Cevap</string>     <string name="button_login">Giriş Yap</string>     <string name="button_send">Gönder</string>     <string name="button_home">Anasayfa</string> </resources>

 

res/values klasörü içindeki styles.xml dosyasını açarak uygulama temasını NoActionBar olarak tanımlıyoruz:

... <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> ...

 

activity_login.xml dosyasını açıyoruz ve içeriğini şu şekilde doldurarak login ekranı tasarımını yapmış oluyoruz:

<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     tools:context=".LoginActivity">     <TextView         android:id="@+id/textView"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:fontFamily="@font/arbutus"         android:text="@string/app_name"         android:textAllCaps="false"         android:textColor="@color/colorPrimary"         android:textSize="25sp"         app:layout_constraintBottom_toTopOf="@+id/etUsername"         app:layout_constraintEnd_toEndOf="parent"         app:layout_constraintStart_toStartOf="parent"         app:layout_constraintTop_toTopOf="parent" />     <EditText         android:id="@+id/etUsername"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:ems="10"         android:hint="@string/hint_username"         android:inputType="textPersonName"         android:fontFamily="@font/arbutus"         app:layout_constraintBottom_toBottomOf="parent"         app:layout_constraintEnd_toEndOf="parent"         app:layout_constraintStart_toStartOf="parent"         app:layout_constraintTop_toTopOf="parent" />     <TextView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="@string/text_username"         android:fontFamily="@font/arbutus_slab"         app:layout_constraintStart_toStartOf="@+id/etUsername"         app:layout_constraintTop_toBottomOf="@+id/etUsername" />     <EditText         android:id="@+id/etPassword"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:ems="10"         android:inputType="textPassword"         android:hint="@string/hint_password"         android:fontFamily="@font/arbutus"         android:layout_marginTop="50dp"         app:layout_constraintEnd_toEndOf="parent"         app:layout_constraintStart_toStartOf="parent"         app:layout_constraintTop_toBottomOf="@+id/etUsername" />     <TextView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="@string/text_password"         android:fontFamily="@font/arbutus_slab"         app:layout_constraintStart_toStartOf="@+id/etPassword"         app:layout_constraintTop_toBottomOf="@+id/etPassword" />     <Button         android:id="@+id/bLogin"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_marginTop="50dp"         android:background="@color/colorPrimary"         android:text="@string/button_login"         android:fontFamily="@font/arbutus"         android:textAllCaps="false"         android:textColor="@color/white"         app:layout_constraintBottom_toBottomOf="parent"         app:layout_constraintEnd_toEndOf="parent"         app:layout_constraintStart_toStartOf="parent"         app:layout_constraintTop_toBottomOf="@+id/etPassword" /> </androidx.constraintlayout.widget.ConstraintLayout>

 

LoginActivity.kt dosyasını açarak şu kodları yazıyoruz ve girilen kullanıcı adı ve parolanın server tarafına emit edilmesini sağlıyoruz:

... lateinit var socket: Socket override fun onCreate(savedInstanceState: Bundle?) {    super.onCreate(savedInstanceState)     setContentView(R.layout.activity_login)     socket = App.socket     bLogin.setOnClickListener {         val username = etUsername.text.toString()         val password = etPassword.text.toString()         val user = JSONObject()         user.put("username", username)         user.put("password", password)         socket.emit("user_connect", user)     } ...

 

Node.js projesi üzerinde;

 

server.js dosyasını açarak users adında bir dizi oluşturuyoruz. Client tarafından gelen user_connect emit'ini karşılıyoruz:

... let users = []; io.on('connection', socket => {    socket.on('user_connect', (data) => {         connection.query("SELECT id FROM users WHERE username = '" + data.username + "'", (error, user) => {             if (user.length > 0) {                 connection.query("SELECT id FROM users WHERE username = '" + data.username + "' AND password = '" + data.password + "'", (error, user) => {                     if (user.length > 0) {                         let userObj = { id: socket.id, username: data.username, status: true };                         users.push(userObj);                         io.to(socket.id).emit('user_connect', data.username);                                             } else {                         io.to(socket.id).emit('wrong_password', 'Parola yanlış.');                     }                         });             } else {                 connection.query("INSERT INTO users (username, password) VALUES ('" + data.username + "', '" + data.password + "')");                 let userObj = { id: socket.id, username: data.username, status: true };                 users.push(userObj);                 io.to(socket.id).emit('user_connect', data.username);               }         });             });

Burada yaptığımız işlemler;

  • Client tarafından gelen kullanıcı adı veritabanında bulunan users tablosunda mevcutsa kullanıcı adı ve parolaya göre kontrol et. Parola yanlışsa wrong_password emit'i yap. Parola doğruysa bir userObj oluşturup users dizisine ekle ve user_connect emit'i yap.
  • Kullanıcı adı veritabanında mevcut değilse gelen kullanıcı adı ve parola ile yeni kayıt oluştur. Sonrasında yine aynı şekilde userObj oluşturup users dizisine ekle ve user_connect emit'i yap.

 

Android Studio projesi üzerinde;

 

LoginActivity.kt dosyasını açarak server tarafından gelen user_connect ve wrong_password emit'lerini karşılıyoruz:

... socket.on("user_connect") {    runOnUiThread {         run {             val username = it[0].toString()             val preferences = getSharedPreferences("app", Context.MODE_PRIVATE)             val editor = preferences.edit()             editor.putString("username", username)             editor.apply()             val intent = Intent(applicationContext, MainActivity::class.java)             startActivity(intent)             finish()         }     } } socket.on("wrong_password") {     runOnUiThread {         run {             Toast.makeText(applicationContext, it[0].toString(), Toast.LENGTH_SHORT).show()         }     } }

Burada yaptığımız işlemler;

  • user_connect kısmında gelen kullanıcı adı verisini sharedPreferences üzerinde kaydet ve Intent yardımıyla MainActivity ekranına geçiş yap.
  • wrong_password kısmında gelen veriyi Toast yardımıyla ekrana yazdır.