ASP.Net Core 3 ile Angular Kullanarak Hesap Makinesi Yapmak

Asp.Net Core 3 versiyonu üzerinde Angular kütüphanesini kullanarak Api entegrasyonlu bir hesap makinesi yaparak Angular Component mantığını ve ASP.Net Core 3 üzerinde nasıl bir yapı kuracağımızı hep beraber görelim.

Öncelikle projenizi ASP.NET Core Web Application olarak oluşturalım.

Daha sonrasında proje detaylarını girelim.

Şimdi de proje yapımızı (template) Angular olarak seçelim ve projemizi oluşturalım. Bu ekranda dikkat etmeniz gereken bir başka nokta da üst kısımda bulunan .NET Core sürümü. Örnek ile alakalı resimleri dikkatlice inceleyiniz.

Projemizi oluşturduk. Sağ tarafta bulunan Çözüm Gezgini (Solution Explorer) üzerinde projemizin dosyalarını görüyoruz. Yapı gereği hiyeraşiyi şu şekilde açıklayabilirim;

• wwwroot -> CSS, Javascript, Resim vb. herkese açık dosyalarımızı eklememiz gereken yer olacak. Bu klasör derlendiğinde ana dizin olarak gözükecektir. Örneğin; css klasörü oluşturup altına bir main.css dosyası eklediğimizi varsayalım. Sitemiz içerisinde verceğimiz adres /wwwroot/css/main.css değil de /css/main.css olacaktır.
• ClientApp -> İstemci tarafında varolacak Angular, React, React Native vb. kütüphanelerin derlenmesi, oluşturulması ve kodlanması bu klasör altında gerçekleştirilecektir.
• ClientApp/index.html -> Bu dosya istemci tarafında uygulamaya başlangıç sağlayan dosyadır.
• ClientApp/main.ts -> Typescript ile oluşturulmuş olan ve derlendiğinde saf javascript olarak görülebilecek olan bu dosya ise Angular yapısının en temel yapısını oluşturmaktadır. Modülleri ve komponentleri bu dosya içerisinden çağırabilirsiniz.
• ClientApp/app -> Modül ve komponentlerin yer aldığı klasördür.
• ClientApp/app/app.module.ts -> Typescript ile hazırlanmış bu dosya ise Angular için modülün temelini oluşturan bir dosyadır.
• ClientApp/app/app.component.html -> Başlatılan modülün html yapısını barındıran dosyadır.
• ClientApp/app/calculator -> Bu klasörü biz oluşturacağız. Bu da bizim modülümüzü barındıracak olan klasör oluyor. Size tavsiyem diğer modülleri de inceleyip neler örneklendirilmiş anlamaya çalışmanız. Eğer bir sorunuz olursa [email protected] mailine soru sormaktan çekinmeyiniz.

Sıra işlemleri yapacağımız API Controller’ını oluşturmak. Controllers’a sağ tıklayarak Add -> Controller seçenekleri ile yeni controller’ı ekliyoruz.

Açılan pencerede API Controller – Empty seçeneğini seçiyoruz

Controller ismimizi “CalculatorController” olarak veriyoruz.

Bu aşamada biraz beklememiz gerekecek. Proje kendini Build ederek Angular için gerekli olan kütüphaneleri indirip projeyi hazır hale getiriyor. Bu yüzden ilk build biraz uzun sürecektir. Endişelenmeyin.

Sonrasında eklenen Controller aşağıdaki gibi olacak. Angular tarafından gelecek olan bilgiler için bir model oluşturmalıyız. Proje üzerinde yeni bir klasör oluşturup adını Models olarak veriyoruz. Bunun amacı proje içerisinde DTO dediğimiz Data Transfer Objects nesnelerini bu klasör altında barındırmamızdır.

Şimdi de sınıfımızın içerisini dolduralım.

    public class CalculatorModel
    {
        /// <summary>
        /// İşlem Yapılacak Birinci Sayı
        /// </summary>
        public float NumberOne { get; set; }
        /// <summary>
        /// İşlem Yapılacak İkinci Sayı
        /// </summary>
        public float NumberTwo { get; set; }
        /// <summary>
        /// Yapılacak işlem Enum
        /// </summary>
        public Process Process { get; set; }
    }

    public enum Process
    {
        /// <summary>
        /// Toplama
        /// </summary>
        Collect,
        /// <summary>
        /// Çıkartma
        /// </summary>
        Extraction
    }

CalculatorController içerisindeki kodlarımız da aşağıdaki şekilde;

[Route("api/[controller]")]
    [ApiController]
    public class CalculatorController : ControllerBase
    {
        [HttpPost("Process")]
        public float Process([FromBody]Models.CalculatorModel model)
        {
            try
            {
                switch (model.Process)
                {
                    case Models.Process.Collect:
                        return model.NumberOne + model.NumberTwo;
                    case Models.Process.Extraction:
                        return model.NumberOne - model.NumberTwo;
                    default:
                        return 0;
                }
            }
            catch (Exception)
            {
                throw;
            }
        }
    }

Yukarıdaki kod bloğundan anlaşılacağı üzere POST işlemini gerçekleştireceğimiz adresimiz “/api/Calculator/Process” adresi olacak.

Sıra geldi Angular kısmına. Şimdi burada dikkat edilmesi gereken çok fazla püf noktası var. Ben mümkün olduğunca detaylandıracağım;

İlk olarak ClientApp/app klasörü altında calculator adında bir klasör oluşturup içerisine counter.component.html ve counter.component.ts adında iki dosya oluşturuyoruz.

calculator.component.ts dosyasının içeriği şu şekilde;

import { Component, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
    selector: 'app-calculator-component',
    templateUrl: './calculator.component.html'
})
export class CalculatorComponent {
    public currentCount = 0;

    public result = 0;
    public numberTwo = null;
    private httpClient: HttpClient;
    private baseUrl: string;
    constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
        this.httpClient = http;
        this.baseUrl = baseUrl;
    }


    public process(processId: number) {
        this
            .httpClient
            .post<number>(this.baseUrl + 'api/Calculator/Process',
                {
                    NumberOne: this.result,
                    NumberTwo: parseFloat(this.numberTwo),
                    Process: processId
                })
            .subscribe(httpResult => {
                this.result = httpResult;
            }, error => console.error(error));
    }
}

calculator.component.html dosyasının içeriği de şu şekilde;

<h1>Hesap Makinesi</h1>

<p>Burada sonucu göreceksiniz : {{result}}</p>

<input type="text" [(ngModel)]="numberTwo" />
<button class="btn btn-primary" (click)="process(0)">+</button>
<button class="btn btn-danger" (click)="process(1)">-</button>

Html içerisinde gördüğünüz gibi (click) ve [(ngModel)] gibi saf html den farklı etiketler (attributes) bulunmakta. Bunlar angular için tetikleme etiketleridir. Click etiketi tıklandığında, ngModel ise içerisine verilen değişkenin değeri değiştiğinde ekranın veya ekran üzerinden yeni bir değer girildiğinde de değişkenin değerini değiştirmek için kullanılır. Bu sisteme MVVM (Model <-> View – View <-> Model) denir.

Şimdi sıra komponentin yüklenmesini sağlamak. Bunun için ClientApp/app/app.component.ts içerisinde aşağıdaki değişiklikleri yapıyoruz;

Şimdi de yaptığımız sayfayı navigation yani menü üzerine ekleyeceğiz. bunun için ClientApp/app/nav-menu/nav-menu.component.html üzerinde değişiklik yapacağız.

Uygulamamızı çalıştıralım;

Üst menüde yaptığımız sayfayı görebiliyoruz. Buraya tıklayarak yukarıdaki ekrana ulaşabilirsiniz.

Uygulamanızı duraklama noktası ( Breakpoint ) koyarak test edin

Projenin dosyalarına aşağıdaki linkten ulaşabilirsiniz. Herkese iyi çalışmalar.