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

Merhaba,


Bu yazı serisinde Android Studio, Socket.io ve Mysql ile online oyun yapımından bahsedeceğim.


Videolu anlatım için buraya tıklayınız.
Serinin ikinci yazısı için buraya tıklayınız.
Serinin üçüncü yazısı için buraya tıklayınız.


Oyun matematikte toplama işlemi üzerine olacak. İşleyiş şu şekilde olacak;

  • İlk olarak login ekranı açılacak. Kullanıcı adı ve parola yazılıp giriş yapılacak. Kullanıcı adı yoksa yeni oluşturulacak, varsa parolaya göre kontrol edilip anasayfaya gidilecek.
  • Anasayfada online kullanıcılar listelenecek. Kullanıcının üzerine tıklayıp oyun isteği gönderilebilecek.
  • Gelen oyun isteği kabul edilirse oyun ekranı açılacak. 30 saniyelik süre içerisinde en fazla puan yapan oyunun galibi olacak. Puanlar eşitse oyun berabere bitmiş olacak.
  • Galibiyet 3 puan, beraberlik 1 puan şeklinde sisteme işlenecek. Anasayfada bulunan sıralama butonuna tıklanarak liderlik sıralaması görüntülenebilecek.


Serinin bu ilk yazısında gerekli projeleri ve veritabanını oluşturup, ihtiyacımız olan kütüphaneleri yükleyeceğiz.


Hadi başlayalım...


İlk olarak server tarafı için komut satırını açıp masaüstü dizinine geliyoruz. Yeni bir klasör açıp o klasörün içine de bir Node.js projesi oluşturuyoruz:

mkdir online-math-game
cd online-math-game
npm init -y


Node.js projesi üzerinde proje boyunca ihtiyacımız olacak kütüphaneleri eklemek için şu komutu yazıyoruz:

npm install socket.io mysql nodemon --save


Server tarafındaki tüm kodları içinde bulunduracağımız server.js dosyasını proje dizininde oluşturuyoruz. Sonrasında package.json dosyasını açıp scripts kısmına bir script ekliyoruz:

...
"scripts": {
  "start": "nodemon server",
  ...
},
...

Böylece projemizi ayağa kaldırırken npm start komutunu verip server.js dosyamızın nodemon ile çalışmasını sağlayacağız. Bu da bize server.js üzerinde yapılan her değişiklik sonrası Node.js projesinin otomatik olarak yeniden başlatılmasını sağlayacak.


server.js dosyasını açıp şu kodları ekliyoruz;

const http = require('http').createServer();
const io = require('socket.io')(http);

http.listen(3000);

io.on('connection', socket => {
  console.log('kullanıcı bağlandı.');
});

Böylece 3000 portunda çalışan ve bir socket bağlantısı sağlayan bir http sunucusu oluşturmuş oluyoruz. Socket bağlantısı yapan bir kullanıcı olduğunda da konsola mesaj bastırıyoruz.


npm start ile projemizi ayağa kaldırıyoruz.


Şimdi de Android Studio üzerinde boş bir proje oluşturuyoruz. Sonrasında build.gradle dosyasını açıp proje boyunca ihtiyacımız olacak kütüphaneleri ekliyoruz ve Sync Now butonuna basıyoruz:

implementation 'com.android.support:recyclerview-v7:28.0.0'    
implementation 'com.android.support:cardview-v7:28.0.0'
implementation 'com.github.nkzawa:socket.io-client:0.5.0'


Server tarafındaki socket.io ile iletişim kurmak için proje dizinine App adında bir sınıf (class) oluşturuyoruz ve içeriğini şu şekilde dolduruyoruz;

...

import android.app.Application
import com.github.nkzawa.socketio.client.IO
import com.github.nkzawa.socketio.client.Socket

class App : Application() {

    companion object {
        lateinit var socket: Socket
    }
    private var url = "http://192.168.1.34:3000"

    override fun onCreate() {
        super.onCreate()
        socket = IO.socket(url)
        socket.connect()
    }
}

Burada bir socket nesnesi oluşturup, server tarafı ile iletişime geçmeyi sağlıyoruz. Bu socket nesnesini de uygulamadaki her activity içerisinde kullanabileceğiz. Singleton özelliği olan bu App sınıfı sayesinde uygulama boyunca tek bir socket nesnesi ile işlem yapmış olacağız.

Not: url kısmında bulunan ip adresine komut satırında ipconfig yazıp IPv4 Address kısmından ulaşabilirsiniz.


AndroidManifest.xml dosyasını açıp application tag'ı altına App sınıfını ekliyoruz. Ayrıca internet izni vermeyi de ihmal etmiyoruz:

...

<uses-permission android:name="android.permission.INTERNET" />

<application
  android:name=".App"
...


Uygulamanın başında açılacak olan login ekranı için LoginActivity adında boş bir activity oluşturuyoruz. AndroidManifest.xml dosyası içerisinde varsayılan olarak launcher özelliğinde bulunan MainActivity'nin bu özelliğini silip LoginActivity'e veriyoruz:

...

<activity android:name=".LoginActivity">
  <intent-filter>
    <action android:name="android.intent.action.MAIN" />

    <category android:name="android.intent.category.LAUNCHER" />
  </intent-filter>
</activity>
<activity android:name=".MainActivity" />


Son olarak mysql veritabanımızı da oluşturacağız. Ben bunun için Xampp kullanacağım. Xampp üzerinde Apache ve Mysql'i başlattıktan sonra veritabanı yönetim programını (bunun için de HeidiSql kullanıyorum) açıp online-math-game adında bir veritabanı oluşturuyoruz. Bu veritabanı içine de users adında bir tablo oluşturuyoruz. Tablomuzun sütunları şu şekilde olacak;


Server tarafından veritabanımıza bağlanıyoruz ve server.js dosyamızın son hali şu şekilde oluyor:

const http = require('http').createServer();
const io = require('socket.io')(http);

http.listen(3000);

const mysql = require('mysql');
const connection = mysql.createConnection({
    "host": "localhost",
    "user": "root",
    "password": "",
    "database": "online-math-game"
});
connection.connect((error) => {

});

io.on('connection', socket => {
  console.log('kullanıcı bağlandı.');
});


Artık Android Studio'da projemizi çalıştırarak emülatör üzerinde uygulamamızı açtığımız anda server tarafında konsola gelen "kullanıcı bağlandı." mesajını görebiliriz.


Bir sonraki yazıda görüşmek üzere...

Yusuf Borucu

Yazılımı iş ve hobi olarak yapan bir insan evladıyım. Yazılıma yönelik uğraştığım ve ilgi duyduğum teknolojiler; Laravel, Android (Kotlin & Java), Vue.js ve Node.js. Her geçen gün kendimi geliştirmeye gayret gösteriyorum....

"Android Studio, Socket.io ve Mysql ile online oyun yapımı #1" için 2 yorum yapıldı.
H.C
hakan cansiz 11 Mayıs 2020

Hocam ben mysql değilde mongodb kullanmak istiyorum projemde realtime işlem gerçekleşmesi için socket io kullanmak istiyorumda ben bu tarz bi uygulama değilde sosyal medya tarzı uygulama geliştirmek istiyorum tam olarak sorunum şu tweet tarzı kullanıcıların bişeyler paylaşmasını istiyorum ve realtime listelenmesini bu olayı nodejs kullanarak yazabilirim ama socket io dahil ederek malesef yazamıyorum bu konuda yardımcı olabilirmisiniz? İstediğim hazır kod vermeniz değil faydalı video makale vb bişeyler önerirseniz sevinirim ben araştırdım socket io ile ilgili sadece chat uygulamaları var

Yusuf Borucu (Yazı sahibi)14 Mayıs 2020

Merhaba, geliştirmek istediğiniz uygulama için öncelikle Node.js üzerinde Socket.io kullanımını temel anlamda öğrenmeniz gerekmekte. Bununla ilgili genellikle chat uygulamaları örnekleri var dediğiniz gibi. Ancak işin temelini öğrenmek açısından gayet yeterli olacaktır. Örneğin şu makaleye göz atabilirsiniz; https://cagatay.me/node-js-ile-anl%C4%B1k-mesajla%C5%9Fma-uygulamas%C4%B1-yap%C4%B1m%C4%B1-5-c9d3e910a96f Sonrasında ise geliştirmek istediğiniz uygulamaya özel olarak algoritmanızı düşünmeli ve yapınızı ona göre kurmalısınız. Bu noktada da bu anlatmış olduğum online oyun yazı serisinden faydalanabilirsiniz. Onun dışında şöyle bir örnek buldum, bu örnekteki Socket.io ile ilgili kısımları incelemek de bir fikir verebilir; https://github.com/leomotta121/twitter-clone-socket.io İyi çalışmalar.

Yorum yap * E-posta adresiniz yayınlanmayacak.