Altın Konu Raspberry Pi .Net Core ile MVC Led Yakma

lHezarfeNl · 25 Şub 2024

Mikrodenetleyiciler ile yolu kesişenlerin bir nevi "Hello World!" başlangıcıdır led yakma projeleri. Biz de bu makalemizde .Net Core kullanarak web sitesi üzerinden kartımıza bağlı olan ledi yakıp söndüreceğiz. Bir mihenk taşı olan bu makalede, gelecek makalelerin de temelini atacağız. Kendi oluşturduğumuz mini projeleri kolaylıkla internet üzerinden yönetebilecek ve takip edebileceğiz.

Kullanılan Yazılımlar ve Donanımlar

SDK: .NET CORE 2.2 (Güncel SDK’yı

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

indirebilirsiniz.)

IDE: Visual Studio 2017

Kart: Raspberry Pi 2 Model B

OS:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

– November 2018

Devre elemanları:

1 adet 5mm LED
En az 2 Dişi-Erkek Kablo
1 Breadboard

Raspberry Pi Pin Şeması

Kullanacağımız pinleri kısaca üzerinden geçecek olursak; Raspberry Pi üzerinde çeşitli sensörleri kullanmamızı sağlayan, kendi projelerimize göre kullanabileceğimiz çeşitl fonksiyonlarda 40 tane GPIO pinleri mevcuttur.

Kart üzerinde yer alan bu pinlerin bazıları 5V ve 3.3V elektrik çıkışı verirken bazıları da topraklama için kullanılmaktadır. Kendi amacımıza göre giriş/çıkış olarak programlayabileceğimiz GPIO pinleri aşağıda sarı renkte belirtilmiştir(kullandığınız modele göre yerleri değişiklik gösterebilir). Bazı kartlarda da özel olarak rezerve edilmiş pinler bulunabilir. Daha detaylı bilgi için Raspberry sitesine

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

.

ASP.NET CORE Web Projesinin Oluşturulması

Yeni ASP.Net Core MVC Projesi oluşturuyoruz. Bunun için ".NET Core" altında bulunan "ASP.NET Core Web Application" seçiyoruz. Makalemizde yapacağımız projemize "dotnetcore-onlineled" ismini verip devam ediyorum. (Farklı bir isim kullanmanız durumunda komutlarda yer alan proje ismini kendi projenize göre değiştirmeyi unutmayın)

İkinci ekranda .Net Core versiyonunu ve proje yapımızı seçiyoruz. Burada boş projeyi(Empty) seçip devam edelim.

Projemiz oluştuktan sonra kendi Controller klasörümüzü oluşturup, içerisine "LedController" isminde kendi controller'ımızı ekleyelim.

Oluşan "LedController", varsayılan olarak Index metodu ile gelmekte. Index metodumuza hızlıca bir View ekleyelim. Bunun için imlecimiz ile Index metodunun ismine sağ tıklayıp "Add View" diyebilirsiniz. Visual Studio gerekli klasörleri sizin için hızlıca oluşturacak ve view'ı controller'ımıza bağlayacaktır.

Yeni oluşan Index.html dosyamızı aşağıdaki gibi güncelleyelim.

Kod:

@{
    ViewData["Title"] = "Index";
}
 
<h1>Online Led Yakma Projesi</h1>

Projemizi boş bir .Net Core şablonunda oluşturduğumuz işin son olarak projenin başlangıcında Web projesine uygun olarak çalışabilmesi için aşağıdaki tanımları yapmanız gerekmektedir. Bunun için projemizin "Startup.cs" dosyasını aşağıdaki gibi değiştirelim.

Kod:

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.Configure<CookiePolicyOptions>(options =>
        {
            options.CheckConsentNeeded = context => true;
            options.MinimumSameSitePolicy = SameSiteMode.None;
        });
 
 
        services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
    }
 
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
 
        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Led}/{action=Index}/{id?}");
        });
    }
}

Burada projemiz çalıştığında ilk olarak çalışmasını istediğimiz metodu da belirleyebiliyoruz.

Kod:

routes.MapRoute(
                    name: "default",
                    template: "{controller=Led}/{action=Index}/{id?}");

Bu satırları ekleyerek projemiz çalıştığında LedController'da, Index action'ının çağrılmasını ve açılış sayfası olmasını sağladık.

Düzenlemeleri yaptıktan sonra projemizi kendi bilgisayarımızda derleyip çalıştıralım ve her şeyin bu aşamaya kadar yolunda olduğundan emin olalım.

MVC Projesine Bootstrap Eklemek

Projemize biraz da görsel güzellik katmak ve hazır şablonları kullanmak için

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

kütüphanesini entegre edeceğim. Bootstrap'in kısaca üzerinden geçecek olursam eğer, Twitter geliştiricileri tarafından ilk olarak geliştirilmeye başlanan, responsive görünüme uygun, kendi içerisinde bir takım hazır bileşenleri bulunduran bir front-end kütüphanesidir. Eğer backend geliştiriciyseniz, tasarımsal detaylarla fazla zaman kaybetmek istemeyebilirsiniz. Ben de tasarımla fazla uğraşmamak için, bu projede Bootstrap kullanacağım.

Bootstrap'in kendi sitesinde projenize hızlıca eklemek için hazır bir şablon yer almakta. Dilerseniz

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

sayfanıza uygulayabilir kütüphaneye cdn linklerinden erişebilir, dilerseniz de Bootstrap kütüphanesine ait dosyaları indirip, proje dosyalarına attıktan sonra doğrudan projeniz üzerinden erişebilirsiniz.

Kod:

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 
    <title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Bu şablonu uygulamak için projemizde "Views" klasörü altında, "Shared" isminde bir klasör oluşturacağım ve içerisine "_Layout" isminde bir sayfa ekleyeceğim ve içerisini aşağıdaki gibi dolduralım.

Kod:

<!doctype html>
<html lang="tr">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 
    <title>Online Led Yakma Projesi</title>
</head>
<body>
    @RenderBody()
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Views -> Led altında bulunan "Index.html" sayfamızı da aşağıdaki gibi değiştirelim.

Kod:

<h1>Online Led Yakma Projesi</h1>
<div>
    <p>
        Led Işığını:
    </p>
   <a href="#" class="btn btn-success" role="button">Aç</a>
    <a href="#" class="btn btn-danger" role="button">Kapat</a>
</div>

Son olarak da oluşturduğumuz ana layout yapısının tüm eklediğimiz view'ları kapsaması için Views klasörü altına "_ViewStart" isminde bir view daha ekliyoruz ve içerisini aşağıdaki gibi değiştiriyoruz.

Kod:

@{
    Layout = "_Layout";
}

Checkpoint: Projemizin şu ana kadar ki dosya yapısı aşağıdaki gibidir.

Projemizi tekrardan çalıştırdığımızda sonuç aşağıdaki gibi olacaktır:

.Net Core ile GPIO Pinlerinin Kullanılması

Kullandığımız geliştirme kartlarında yer alan pinleri kullanabilmemiz için harici paketlere ihtiyaç duymaktayız. Bu uygulamamızda Microsoft tarafından geliştirilen ve NuGet paketi olarak projemize hızlıca ekleyebileceğimiz "System.Device.Gpio" kütüphanesini kullanacağım. Bu paket ile ilgili

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

bakabilir ve

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

inceleyebilirsiniz.

Paketi indirmek için;

Kod:

Install-Package System.Device.Gpio -Version 0.1.0-prerelease.19171.3

Visual Studio üzerinden arama yapacaksanız eğer paket henüz resmi olarak dağıtıma çıkarılmadığı için arama yaparken "Include prerelease" kutusunu işaretlemeyi unutmayın.

İndirdiğimiz paket ile beraber, Device.Gpio içerisinde yer alan "GpioController" sınıfı üzerinden pin işlemlerimizi yapacağız. Bunun için önceki aşamada oluşturduğunuz LedController'a aşağıdaki gibi ekleme yapalım.

Kod:

//led'i bağladığımız pin numarasını veriyoruz.
private const int LedPin = 17;
private readonly GpioController _gpioController;
 
//constructor tanımlayıp burada pin yöneticimizi ve kullanacağımız pini tanımlıyoruz
public LedController()
{
    _gpioController = new GpioController();
    //verilen pini çıktı verecek şekilde tanımlıyoruz.
    _gpioController.OpenPin(LedPin, PinMode.Output);
}

Led yakma uygulamasında bize lazım olacak ledi yakan ve ledi söndüren iki action'ı aşağıdaki gibi yazalım.

Kod:

public IActionResult LedAc()
{
    //verilmiş olan pini voltaj verecek şekilde değiştiriyoruz
    _gpioController.Write(LedPin, PinValue.High);
    //kullanıcıya bilgi vermek için bir mesaj yazıyoruz.
    ViewBag.LedDurumu = "Led Açık!";
 
    return View("Index");
}
 
public IActionResult LedKapat()
{
    //verilmiş olan pini voltajı kesecek şekilde değiştiriyoruz
    _gpioController.Write(LedPin, PinValue.Low);
    //kullanıcıya bilgi vermek için bir mesaj yazıyoruz.
    ViewBag.LedDurumu = "Led Kapalı!";
 
    return View("Index");
}

Yapılan bu işlemlerin ardından LedController'ımız aşağıdaki gibi olacaktır.

Kod:

public class LedController : Controller
 {
     //led'i bağladığımız pin numarasını veriyoruz.
     private const int LedPin = 17;
     private readonly GpioController _gpioController;
 
     //constructor tanımlayıp burada pin yöneticimizi ve kullanacağımız pini tanımlıyoruz
     public LedController()
     {
         _gpioController = new GpioController();
         //verilen pini çıktı verecek şekilde tanımlıyoruz.
         _gpioController.OpenPin(LedPin, PinMode.Output);
     }
 
     public IActionResult Index()
     {
         return View();
     }
 
     public IActionResult LedAc()
     {
         //verilmiş olan pini voltaj verecek şekilde değiştiriyoruz
         _gpioController.Write(LedPin, PinValue.High);
         //kullanıcıya bilgi vermek için bir mesaj yazıyoruz.
         ViewBag.LedDurumu = "Led Açık!";
 
         return View("Index");
     }
 
     public IActionResult LedKapat()
     {
         //verilmiş olan pini voltajı kesecek şekilde değiştiriyoruz
         _gpioController.Write(LedPin, PinValue.Low);
         //kullanıcıya bilgi vermek için bir mesaj yazıyoruz.
         ViewBag.LedDurumu = "Led Kapalı!";
 
         return View("Index");
     }
 }

Butonlarımızın yer aldığı Index view'ımıza controller tarafında eklediğimiz LedAc ve LedKapat metotlarına yönlendirmemizi yapalım ve döndüğümüz mesajları alıp gösterebileceğimiz uyarı alanını ekleyelim.

Index.cshtml dosyamızın son hali aşağıdaki gibi olması beklenmektedir.

Kod:

@{
    //kullanıcı aksiyonu sonunda bir mesaj var ise burada onu alıyoruz
    var ledDurumu = ViewBag.LedDurumu;
}
<h1>Online Led Yakma Projesi</h1>
<div>
    <p>
        Led Işığını:
    </p>
    <a href="@Url.Action("LedAc")" class="btn btn-success" role="button">Aç</a>
    <a href="@Url.Action("LedKapat")" class="btn btn-danger" role="button">Kapat</a>
</div>
<br/>
@*
    Kullanıcıya gösterilecek bir mesaj olması durumunda kullanıcıya gösteriyoruz.
*@
@if (!string.IsNullOrEmpty(ledDurumu))
{
    <div class="alert alert-primary" role="alert">
        <b>Bilgi:</b> @ledDurumu
    </div>
}

.Net Core MVC Sitenin Raspberry Pi Üzerinde Çalıştırılması

Önceki makalemizde .NET Core MVC alt yapısıyla geliştirdiğimiz bir web uygulamasının kurulum dosyalarının nasıl oluşturulacağını detaylı bir şekilde

Projeyi "build" edip, aşağıdaki komutu terminalde çalıştırın.

Kod:

dotnet publish -c Release -r linux-arm

Projenin yer aldığı dizinde, "\bin\Release\netcoreapp2.2\linux-arm\publish" altında bulunan dosyaları Raspberry Pi cihazınızda "home\pi" dizinine kopyalayın.

Sırası ile aşağıdaki komutları çalıştırıp projeyi ayağa kaldırın.

Kod:

cd dotnetcore-onlineled
 
chmod 777 ./dotnetcore-onlineled
 
./dotnetcore-onlineled

Raspberry pi üzerinde kullandığınız browser'da "

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

" adresine giderek projemize gidelim.

Led Devresinin Oluşturulması

Şimdi biraz led patlatmanın zamanı geldi

1 led'i 2 dişi-erkek kabloya aşağıdaki gibi bağlayalım. GPIO 17 pininden gelen kabloyu led'in artı(+) bacağına, GND pininden gelen kabloyu da led'in eksi(-) bacağına bağlayalım.

Devreyi de sorunsuz kurduktan sonra web sitesi üzerinden led'imizi açıp kapayabiliriz.

Aç butonu tıklandıktan sonra:

Kapat butonu tıklandıktan sonra: