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...