Raspberry Pi .Net Core ile MVC Led Yakma Uygulaması

   

      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ı buradan indirebilirsiniz.)

IDE: Visual Studio 2017

Kart: Raspberry Pi 2 Model B

OS:   Raspbian Stretch – 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 bakabilirsiniz.

 

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.

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

    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. 

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 Bootstrap 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 bu şablonu 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.

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

 

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

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

@{
    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 kaynak kodlarına bakabilir ve NuGet sayfasını inceleyebilirsiniz.

       Paketi indirmek için;

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.

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

        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.

   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.

@{
    //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 bu makalemizde anlatmıştık. Bu makalemizde fazla detaya inmeden sırasıyla aşağıdaki işlemleri uygulayacağım.

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

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.

cd dotnetcore-onlineled

chmod 777 ./dotnetcore-onlineled

./dotnetcore-onlineled

       Raspberry pi üzerinde kullandığınız browser'da "http://localhost:5000" 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:

 

       Dilerseniz geliştirdiğiniz bu projeyi makalemizdeki adımları uygulayarak uzaktan erişim sağlayabilir, farklı sensörleri kullanarak internet üzerinden erişebilirsiniz. 

SON

         

 

       Projeye Github üzerinden erişebilirsiniz.

Add comment