AngularJS Uygulamamız Hakkında Bilgiler

AngularJS Uygulama Linki: http://www.tolgasariyildiz.com.tr/angularjs-match-master

Bu yazımızda AngularJS ve bootstrap kullanarak basit bir eşini bulma oyunu tasarlayacağız. Bildiğiniz gibi bu oyunda seçtiğiniz bir karakterin bir eşini diğer boş karelere tıklayarak bulmaya çalışıyoruz. Hangi oyundan bahsediyorsun tarzında sorularınız devam ediyorsa yazıyı okudukça anlayacağınızdan şüpheniz olmasın ?

Projemiz için gerekli olan Bootstrap ve Javascript( AngularJS – JQuery ) kütüphanelerine aşağıda vermiş üç linkten ulaşabilirsiniz :

AngularJS için gerekli dosyalar : https://code.angularjs.org/1.2.9/

//Bağlantıda yer alan .zip uzantılı dosyayı indirmeniz yeterlidir.

Bootstrap için gerekli dosyalar https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip

//Bağlantıda yer alan .zip uzantılı dosyayı indirmeniz yeterlidir.

Jquery için gerekli dosyalar : https://code.jquery.com/jquery-1.11.0.min.js //Bağlantıda yer alan .js uzantılı dosyayı sağ tıklayıp gerekli yere farklı kaydet demeniz yeterlidir.

Angular-ui için gerekli dosya : https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js yolunda bulunan dosyayı sağ tıklayıp gerekli yere farklı kaydet demeniz gerekir. Gerekli yeri yazıda açıkça belirttik sadece adımları doğru izlemeniz yeterlidir.

Projemiz için gereken üç adet klasör ve anasayfamız olan index.html dosyasını tanımladıktan sonra yukarıda indirmiş olduğumuz dosyaları “lib” adlı klasörün içine yerleştiriyoruz.

Proje Dosyaları 


app

eslesme
→→ views
→→→ index.html
→ → eslesmeController.js
app.js

lib
angular
angular-ui
bootstrap
jquery

 css
app.css

index.html


“lib” klasörü içerisine indirmeniz gereken içerikleri dört klasöre göre yerleştirmeniz gerekir. Zaten indirdiğimiz içeriklerle klasörler aynı isimde olduğu için bunu kolaylıkla yapacaksınız. Bizim değişiklik yapacağımız daha doğrusu kodlarını yazacağımız dosyalar “app.js” , “app.css” , “views → index.html” ve “eslesmeControl.js” dosyalarıdır.

Uygulamamızın çalışması için host edilmesi gerektiği için kullanacağımız programlar bir yazılım geliştirme arayüzü olan  Visual Studio 2012 veya sanal web servisleri (wamp,xampp,usbwebserver vb.) olacaktır. Siz bu uygulamada Usbwebserver kullanabilirsiniz. Dosyaları arşivden klasöre çıkardıktan sonra projeyi root klasörü içerisine koymanız ve localhost/projeyeVereceginizIsim/ şeklinde browser’da açmanız gerekir. Fakat daha önce .exe uzantılı USBWebServer uygulamasını çalıştırmalısınız. Eğer Apache ve Mysql için yeşil işaret çıkar ise servis başarılı bir şekilde çalışmış demektir. Eğer sorun yaşarsanız yorumlarınızla benden yardım alabilirsiniz.

app.js :

AngularJS modülümüzü tanımladığımız javascript dosyasıdır ve bu dosya içerisinde view kısmı ile controller kısmının dosyalarının entegrasyonu sağlanır. AngularJS ‘ nin olmazsa olmaz yapısı olan “&scope” atamaları da bu klasör içerisinde tanımlanır. Burada yaptığımız AngularJS Model – View – Controller yapısının model tarafını kodlamaktır. Uygulamamızın index sayfası içerisinde oyunun yer aldığı bölüm eslesme->views ->index.html yolunda yer alan ve görünüm tarafını temsil eden HTML dosyasıdır. “eslesme” klasörü içerisinde de “eslesmeController.js” kontrol kısmını temsil eder ki burası javaScript fonksiyonlarının tanımlandığı ve views içerisindeki HTML sayfasının server tarafındaki işlevlerini gerçekleştirmek için kullanılmaktadır.

MVC uygulamalarının işlerlik kazanmasındaki en önemli yapılar  controller yapılarıdır. Verilerin tutulması , view ve controller yapıları arasındaki ilişkinin sağlanması gibi işlemler ise AngularJS içerisindeki Model yapısını oluşturur. AngularJS’deki modullerde işte bu bahsettiğim MVC uygulama çerçevesi içerisindeki “model” yapısını temsil etmektedir.

Bootstrap yapıları ve AngularJS fonksiyonel yapısının arasındaki ilişkiyi sağlayan değer atamasıda app.js kodlarının ilk satırında yapılmaktadır. Yazımızda daha önce bahsettiğimiz uygulamamızda yer alması gereken, lib klasörü içerisinde tanımladığımız hazır kütüphalerimiz ve stil dosyalarımızın içerisinde yer alan angular-ui, işte bu ilişkiyi sağlayan önemli dosyayı içerisinde barındırmaktadır.

DOSYA İÇERİSİNDEKİ KODLAR AŞAĞIDA YER ALMAKTADIR !

var app = angular.module('match', ['ngRoute', 'ui.bootstrap']);

app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'app/match/views/index.html',
controller: 'matchController',
})
.otherwise({ 
redirectTo: '/',
});
}]);

app.run(function($rootScope) {
$rootScope.$safeApply = function($scope, fn) {
fn = fn || function() {};
if($scope.$$phase) {

fn();
}
else {

$scope.$apply(fn);
}
};
})

jQuery(function($) {
angular.bootstrap(document, ['match']);
});

app.css : 

Bu dosya içerisinde ufak tefek stil ayarları yaparak uygulamamız için tanımladığımız indeks sayfamızın daha göze hoş gelen bir tasarımda olmasına olanak sağlamaktayız. Aşağıdaki verdiğimiz kodda sınıfları ne amaçla kullandığımızı açıklama satırları ile belirttik.

CSS Kodlarımız :

body {
margin: 2em auto; /* body etiketimiz ile diğer etiketler arasında otomatik olarak boşluk veriyoruz.*/
}

footer {
margin-top: 2em; /* footer etiketimize üst taraftan boşluk değeri veriyoruz.*/
}

.nav, .pagination, .carousel, .panel-title a { cursor: pointer; } Fare imlecine tip ataması yapılıyor. /* Bağlantılara gelindiğinde imleç değişiyor */

[class*='col-'] {
margin: 1em auto; /* col- ile başlayan kolonları temsil eden sınıflarda margin (hizalamayı sağlar) değerini ayarlıyoruz */
}

.match-board {
border: 1px solid #efefef; /*karakterlerin yer alacağı tablonun border (kenarlık) değeri ve rengi belirleniyor.*/
}

 

app -> eslesme -> views -> index.html dosyası :

eslesmeController.js kontrol dosyasının içerisindeki işlevlerin yani fonksiyonların gerçekleştirileceği html dosyamızdır. Bir nevi bu dosyaya sayfamızın görünümü ve tasarımı diyebiliriz. Bildiğiniz üzere HTML web sayfası içerisinde tasarımın ve temel sayfa yapısının belirlendiği bir işaretleme dilidir. Arkasında çalışacak olan ise MVC mantığına göre controller yapıları olacaktır. Projemizdeki controller dosyası da daha önce belirttiğim üzere eslesme klasörü içerisinde yer alan eslesmeController.js isimli javascript dosyasıdır. HTML sayfamızın kodlarını aşağıda sizler için paylaştım.

h5>DOSYA İÇERİSİNDEKİ KODLAR AŞAĞIDA YER ALMAKTADIR

<h2>Hafızanı Kullan</h2>
<div class="row match-board">
<div ng-repeat="card in cards track by $index" class="col-xs-{{columnSize}} text-center">
<button type="button" class="btn btn-default btn-lg" ng-click="cardClick()">
<span ng-class="card.toString()"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="well">
Deneme Sayısı <strong>{{guesses}}</strong> 
</div>
</div>
<div class="col-xs-6">
<div class="well text-right">
Toplam Oynama <strong>{{totalPlays}}</strong>
 </div>
</div>
</div>

Yukarıda yer alan kodlarda AngularJS temel yapılarından olan “directives” yapısı kullanılarak toplam deneme sayıları ve oynama sayıları sayfada render edilerek oyuncuya istatistiksel bilgiler verilmektedir. Ayrıca Bootstrap temel grid yapısı ile oyunda tıklanarak açılan karakterlerin bulunduğu yapılar,  düzgün bir şekilde tasarlanmıştır. “ng-repeat” yapısı ile kolonlar içerisinde kartlar yinelenerek basılmış ve bu belirtilen kolon sayısına göre gerçekleştirilmiştir. Sayfada kaç kartın ve kaç kolunun olacağını ise angularJS kullanılarak yazılmış olan kontrol dosyamız “eslesmeController.js” içerisinde belirliyoruz.

eslesmeController.js :

Bu dosya içerisinde kodlanması gereken satırlar aşağıda yer almaktadır. Burada temel olarak tanımlanması gereken angularJS fonksiyonları ve bu çerçeveye uygun yapıların tanımlanması gerçekleştirilmektedir.

CONTROLLER DOSYAMIZIN İÇERİĞİ AŞAĞIDA YER ALMAKTADIR
Controller kısmı hakkında bazı önemli noktalar – 1

Kod parçasının ilk bölümünde matchController yapısının gerekli ataması yapılmış , fonksiyon içerisinde uygulama modelinin temel yapısı olan $scope ve kök modelini temsil eden $rootScope değerleri kullanılmıştır. Oyun kartları üzerinde yer alacak ikonlar lib klasörü içerisinde yer alan ve bootstrap dosyaları içerisinde özel olarak tanımlanmış ikonları temsil eden ‘glyphicon’ yapılarının string değer tipine çevrilmesi ile elde edilmiştir.

app.controller('matchController', function($scope, $rootScope) {
function Card(icon) {
this.icon = icon;
this.selected = false;
}
Card.prototype.toString = function() {
return 'glyphicon ' + (this.selected ? 'glyphicon-' + this.icon + ' selected' : '');
}

$scope.totalPlays = 0; // Başlangıçta toplam oynama sayısı daha öncede belirttiğimiz üzere "totalPlays" içerisinde sıfır olarak atanır

newGame();
/* Yeni oyun başlatıldığında kartlarda yer alması gereken ikonlar belirleniyor ve kolon sayıları için değer atamaları yapılıyor. Görüldüğü üzere Javascript kodumuzda dizi tipinde bir değer ataması yapılmıştır.*/
function newGame() {
var cards = [
new Card('phone-alt'),
new Card('floppy-remove'),
new Card('send'),
new Card('stats'),
 new Card('tower'),
new Card('saved'),
 
 new Card('adjust'),
 new Card('map-marker'),
 new Card('share'),
 new Card('stop'),
 new Card('play'),
 new Card('question-sign'),
  ];

$scope.columnSize = 4;

 console.log('cards', cards);
// Kod içerisinde aynı karttan iki tane yer alması için ise clone fonksiyon tanımlanmış ve aynı özelliği (attribute) taşıyan nesnelerin sayfaya render (oluşturulması) edilmesi sağlanmıştır.
 function clone(obj) {
 if (null == obj || "object" != typeof obj) return obj;
 var copy = obj.constructor();
 for (var attr in obj) {
 if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
 }
 return copy;
 } 
// Oluşturulan string içerisinde ikili şekilde kopyalanan kartlar, current-hand adı verilen string değerdeki değişkene atanarak, kartların ikon değerleri karakter dizisi şeklinde tutulmaktadır.
 var current_hand = [];
 for(x in cards) {
 current_hand.push(cards[x]);
 current_hand.push(jQuery.extend({}, cards[x]));
 }
 console.log('current hand', current_hand);
Controller kısmı hakkında bazı önemli noktalar – 2

Oyun kartlarının karıştırılması için kullanılan shuffleArray() fonksiyonunda temel JavaScript yapıları kullanılarak, değişimi oluşturan fonksiyonellik sağlanmış ve kod bloğu içerisinde Math metodunun gerekli olan özellikleri kullanılmıştır. Bu fonksiyon içerindeki değer tipi olarak Array (dizi) yapıları kullanılmış ve daha önce tanımlanan current-hand dizi içerisinde shuffle (karştırma) işlemi gerçekleştirilmiştir.

ÖZET

Oyunumuzun temel mantığı ve genel işlevselliğinin bu dosya ile sağlandığını daha önceden belirtmiştim. Bilindiği üzere uygulama modelini temsil eden $scope yapısı ile AngularJS yapısının temelini sağlamaktayız. MVC yapısının model tarafında yer alan bir yapı olan $scope ile uygulamamızdaki neredeyse bütün değişkenleri fonksiyonel olarak tutmaktayız. Tüm uygulama döngüsü içerisinde $scope nesnesi ile tanımlanan bu model uygulamanın bütün katmanları boyunca kullanılmaktadır.

Bu yazımızda temel AngularJS ve Bootstrap yapılarını kullanarak basit bir eşleşme oyununun yapımını gerçekleştirdik. Aklınıza takılan ve eksik gördüğünüz bir konu varsa yorumlarınızı iletebilirsiniz. AngularJS ve Bootstrap ile alakalı daha pek çok yazımız olacak.Hepinize teşekkür eder web dolu günler dilerim ?

Uygulama Linki : http://www.tolgasariyildiz.com.tr/angularjs-match-master