Embedded Files
HAZIRLAYAN : EMİRCAN ALTUNTAŞ - 22430070020
Mehabalar bu projemde Blazor tabanlı Click Speed Test uygulamasını geliştireceğim ve adım adım sizlerle paylaşacağım. Visual Studio Code programı ile geliştirmekte olduğum bu uygulama sizin mouse tıklama hızınız ve ne kadar fazla tıklayabileceğiniz hakkında bilgi verecektir. Bunu arkadaşlarınızla birlikte deneyip keyifli vakit geçirebilirsiniz. Şimdi bunu nasıl yapacağımıza hep birlikte bakalım :
Projenin kodlarına ulaşmak için : https://github.com/emircanaltuntas/Click-Speed-Test
Bu uygulamayı geliştirmek için Visual Studio Code 2019 programını kullandım. Bunu kullanmamın amacı Blazor tabanlı bir projeyi daha kolay açma ve yönetme gücü sağlaması tabi siz istediğiniz sürümünü kullanabilirsiniz. Programı kurup ve yeni bir Blazor tabanlı projeyi oluşturduktan sonra ;
Blazor framework'ünun bize sağladığı temel arka plan üzerinde bazı değişiklikler yaparak bu uygulamayı oluşturdum. Yaptığım değişikliklere göz gezdirecek olursak :
Visual Studio Code ile yeni bir Blazor tabanlı proje oluşturduğunuzda sağ tarafta karşınızda böyle bir panel çıkar bu panel sizin sayfa üzerinde değişiklik yapmanızı sağlar. Mesela oluşturduğum site adını görselde bulunan _Host.cshtml içerinde bulunan Title(Sayfa Başlığı) kodu üzerinden değiştirdirdim. Sizde oluşturacağınız site içerisindeki tüm değişiklikleri soldaki görselde bulunan kısımlar üzerinden yapabilirsiniz.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Click Speed Test</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
</head>
Oluşturduğum projenin asıl içeriğine gelecek olursak: Siteye girdiğinizde solda bulunan Start sekmesine girip click me yazaran yere tıklayarak en fazla ne kadar tıklayabildiğini ölçebilirsiniz. Gelişme sürecinde olan bu projemde zaman sayacı ve online sürümü çıkardığımda Scoreboard kısmında diğer insanlarla rekabet edebilirsiniz.
Şimdi gelelim siteye zaman ve tarih sayacını nasıl eklediğimize. Yukarıda bahsettiğim üzere Blazorun bize sunduğu panel üzerinden Counter.razor kısmına girdikten sonra karşınıza bir takım kodlar çıkacak en üstte @page "/counter" yazan kodun altına @using System.Timers kodunu yazın ve ardından altına :
<br />
<br />
<span style="color:red;font-weight:700">@dateTimeValue</span>
Kodlarını yazdıktan sonra @code { ile başlayan kısımın altına verdiğim kodları yazın :
@code {
private int currentCount = 0;
private Timer timer;
private string dateTimeValue;
private void IncrementCount()
{
currentCount++;
dateTimeValue = DateTime.Now.ToString("dd-MM-yyyy hh:mm:ss tt");
timer = new Timer();
timer.Interval = 1000;
timer.Elapsed += OnTimerElapsed;
timer.Enabled = true;
}
private void OnTimerElapsed(object? sender, ElapsedEventArgs e)
{
dateTimeValue = DateTime.Now.ToString("dd-MM-yyyy hh:mm:ss tt");
InvokeAsync(() =>
{
StateHasChanged();
});
}
}
Page updated
Report abuse