Front arkadaşlardan her sayfada tasarımı yapan kişi tarafından javascript ile fetchleme yapmasını istemekteyim. Eğer yapamayan olursa diğer arkadaşa söylerse ve diğer arkadaş da onun yerine yaparsa süper olur çünkü son birkaç günümüz kaldı ve biraz daha çabalamak gerekiyor şu anlık.
javascript içinde fetch adında bir method var. bu method 2 parametre alıyor
birincisi "ajax" isteği atacağımız link. bu şuna benzer: http://localhost:5109/api/ControllerIsmi/MethodIsmi ama tabii sizin bilgisayarınızda sadece bu sayı olan kısım değişir. genelde herkeste aynı olur ama yine de bakarız. bunun için aşağıda dotnet watch için gereken adımları yapıp sonra dotnet watch diyince tarayıcıda açılan sayfanın linkine bakmanız lazım.
ikincisi bir object ve bu objectin içinde isteğimizin methodu nedir mesela post mu get mi put mu falan, header kısmı ki bunun içine jwt mizi token ımızı koyucaz yani aynı zamanda bizim gönderdiğimiz verinin ne türünde olduğunu da söylicez application/json ki biz jsonlarla uğraşıyoruz.
üçüncüsü de body kısmı. eğer get dışında bir istek atıyorsak body kısmına bir object koyarak backende göndereceğimiz şeyleri göndermiş oluyoruz.
bu methodu kullanırken await diyerek beklemeniz gerekmekte. bu method bir response döndürür. Bunlar status codelarıdır ama şimdilik karışmasın diye direkt Ok ya da Fail tarzı bir şey olduğunu bilin. response.ok ise await response.json() methodu ile de gelen json verisini bir objecte dönüştürmüş oluyoruz. Bu gelen bir array olabilir. Düz 1 tane object olabilir falan bunu şimdi anlatıcam nerden bakacağınızı. Artık bu objecti düz bir object gibi kullanabilirsiniz. html içinde zaten react sayesinde {içine} direkt javascript yazabiliyoruz. gereken yerde {gelenobje.Name} gibi yazmanız lazım.
Şimdi az çok sıkıntı olan kısım şu ki ortak bir serverımız yok o yüzden herkesin kendi bilgisayarında database i çalıştırması gerekiyor. Bunun için ilk önce postgres kurmamız lazım. Herhangi bir sorun çıkan bir önceki versiyonu kurabilir. Kurarken şifre istediği kısımda 1234 yazarak kurun. daha sonra bilgisayara projeyi githubtan tam ve güncel bir şekilde çektikten sonra terminalde libraryapp.backend klasörüne girip terminale
komutlarını sırayla yazmanız gerekiyor ki database sizin bilgisayarınızda da oluşsun.
daha sonra database watch komutu ile backend kısmını çalıştırabilirsiniz.
Şimdi endpoint urllerine nerden bakacağınız konusunda birkaç seçeneğiniz var ama en basiti hazır dotnet watch kısmını yapmışken onu kullanıp swagger ile bakmanız diye düşünüyorum. tüm dosyaların githubtan çekildiğini ve güncel olduğunu varsayarak söylüyorum. LibraryApp.backend klasörüne girip vscode ile çalışanlar için dotnet watch komutu ile veya vs kullanıyorsanız direkt play tuşundan projeyi http ile başlatmanız lazım. Gelen tarayıcıda swagger adında bir sayfa açılacak. resimlerde de gözüktüğü gibi burada deneme istekleri atabiliyorsunuz. Hangi linke ne atarsanız ne döner gibisinden bakabilirsiniz. Bu şekilde size ne lazımsa bu link listesinden gerekeni seçip yukarda fetch methodunun içine yazmanız lazım.
Şimdi sizin de mesela book search tablosunda artık elle yazdığınız örnek veri yerine fetch yoluyla backendten aldığınız bookları listelemeniz gerekiyor. Bu mesela table için bir tablerow yani tr ve tabledata td elementleridir. Bunu normalde c#ta veya herhangi bir dilde for veya foreach ile yapıyordunuz. burda javascript in map diye bir methodu var. bu map methodu sayesinde bir arrayi bir for ile gibi dolaşıp her bir elemanı için tr oluşturucaz. Bunun görünümü benim eski projemde mesela şöyle:
bu fotoda td eklenmemiş hali ve trnin kapanış elementi eksik. Her bir array elemanı için bir tr oluşturuyorum. sonra bu trnin içine her sütun için bir td oluşturmanız gerekiyor. Mesela bu fotoğraf için
{da.name}
diyerek ilk sütunu isim gösterecek şekilde yaptım. kaç sütun varsa objectin özellikleriyle bunları doldurmanız lazım.
Benim projeden swagger örnekleri
en aşağı kısımda schema kısmında neler bekleyebileceğiniz falan da var.
Front arkadaşlardan her sayfada tasarımı yapan kişi tarafından javascript ile fetchleme yapmasını istemekteyim. Eğer yapamayan olursa diğer arkadaşa söylerse ve diğer arkadaş da onun yerine yaparsa süper olur çünkü son birkaç günümüz kaldı ve biraz daha çabalamak gerekiyor şu anlık.
javascript içinde fetch adında bir method var. bu method 2 parametre alıyor
bu methodu kullanırken await diyerek beklemeniz gerekmekte. bu method bir response döndürür. Bunlar status codelarıdır ama şimdilik karışmasın diye direkt Ok ya da Fail tarzı bir şey olduğunu bilin. response.ok ise await response.json() methodu ile de gelen json verisini bir objecte dönüştürmüş oluyoruz. Bu gelen bir array olabilir. Düz 1 tane object olabilir falan bunu şimdi anlatıcam nerden bakacağınızı. Artık bu objecti düz bir object gibi kullanabilirsiniz. html içinde zaten react sayesinde {içine} direkt javascript yazabiliyoruz. gereken yerde {gelenobje.Name} gibi yazmanız lazım.
Şimdi az çok sıkıntı olan kısım şu ki ortak bir serverımız yok o yüzden herkesin kendi bilgisayarında database i çalıştırması gerekiyor. Bunun için ilk önce postgres kurmamız lazım. Herhangi bir sorun çıkan bir önceki versiyonu kurabilir. Kurarken şifre istediği kısımda 1234 yazarak kurun. daha sonra bilgisayara projeyi githubtan tam ve güncel bir şekilde çektikten sonra terminalde libraryapp.backend klasörüne girip terminale
Şimdi endpoint urllerine nerden bakacağınız konusunda birkaç seçeneğiniz var ama en basiti hazır dotnet watch kısmını yapmışken onu kullanıp swagger ile bakmanız diye düşünüyorum. tüm dosyaların githubtan çekildiğini ve güncel olduğunu varsayarak söylüyorum. LibraryApp.backend klasörüne girip vscode ile çalışanlar için dotnet watch komutu ile veya vs kullanıyorsanız direkt play tuşundan projeyi http ile başlatmanız lazım. Gelen tarayıcıda swagger adında bir sayfa açılacak. resimlerde de gözüktüğü gibi burada deneme istekleri atabiliyorsunuz. Hangi linke ne atarsanız ne döner gibisinden bakabilirsiniz. Bu şekilde size ne lazımsa bu link listesinden gerekeni seçip yukarda fetch methodunun içine yazmanız lazım.
Şimdi sizin de mesela book search tablosunda artık elle yazdığınız örnek veri yerine fetch yoluyla backendten aldığınız bookları listelemeniz gerekiyor. Bu mesela table için bir tablerow yani tr ve tabledata td elementleridir. Bunu normalde c#ta veya herhangi bir dilde for veya foreach ile yapıyordunuz. burda javascript in map diye bir methodu var. bu map methodu sayesinde bir arrayi bir for ile gibi dolaşıp her bir elemanı için tr oluşturucaz. Bunun görünümü benim eski projemde mesela şöyle:
bu fotoda td eklenmemiş hali ve trnin kapanış elementi eksik. Her bir array elemanı için bir tr oluşturuyorum. sonra bu trnin içine her sütun için bir td oluşturmanız gerekiyor. Mesela bu fotoğraf için
Benim projeden swagger örnekleri
en aşağı kısımda schema kısmında neler bekleyebileceğiniz falan da var.
