Beranda>Kode sumber ASP>Kategori lainnya
Unduh

Membangun Aplikasi Berbagi Foto dengan Blazor Web Assembly Hosted, Web API, gRPC, dan Duende Identity Server

Kita akan membangun sebuah situs web sederhana di mana orang dapat mengirim gambar dan komentar.

  • Setiap orang dapat menelusuri gambar dan komentar yang ada.
  • Hanya pengguna terautentikasi yang dapat mengunggah gambar dan komentar baru.
  • Hanya pemilik gambar yang dapat mengedit atau menghapus gambar.
  • Hanya pemilik komentar yang dapat menghapus atau memperbarui komentar.

Kami akan membangun 3 bagian.

  • FrontEnd , Aplikasi Web Klien Blazor yang dipasangkan dengan Host Web Inti ASP.NET miliknya sendiri.
  • Backend , yang dibangun dengan .NET 7.0, akan terdiri dari
    • Layanan REST untuk pengelolaan gambar
    • Layanan gRPC untuk komentar
  • Penyedia Identitas akan menjadi proyek Duende kami sendiri.

1.1 - Klien FrontEnd

  • Klien Blazor
  • HTML5
  • CSS3
  • Buka Klien Id Connect

Proyek ini akan berinteraksi dengan pengguna melalui browser dengan membangun antarmuka pengguna HTML secara dinamis dan akan berkomunikasi dengan servernya sendiri dengan menggunakan gRPC Web dan HttpClient .

1.2 - Backend Untuk Frontend (BFF)

  • Host Web Inti ASP.Net
  • YARP
  • Duende.Bff.Yarp

Proyek ini menghosting dan melayani aplikasi Blazor Client. Ini juga bertindak sebagai proxy terbalik untuk meneruskan panggilan ke backend REST dan gRpc.

2.1 - Layanan REST Foto

  • Pengontrol API Web .NET 7
  • Kerangka Entitas Inti 7.0
  • Basis Data SqLite
  • Otentikasi Klien Duende

2.2 - Komentar Layanan GRPC

  • Layanan gRPC .NET 7
  • Kerangka Entitas Inti 7.0
  • Basis Data SqLite
  • Otentikasi Klien Duende

Proyek-proyek ini akan bertanggung jawab untuk menyimpan data di server dan menanggapi permintaan klien melalui http, json dan protobuf.

  1. Server Otentikasi
    • Server Identitas 4 (Duende)
    • Inti Kerangka Entitas

Proyek ini akan menangani bagian otentikasi. Ini akan mengeluarkan token JWT yang akan digunakan oleh aplikasi klien untuk mendapatkan akses ke layanan.

Apa yang perlu Anda ketahui:

  • C#
  • HTML5
  • CSS3

Apa yang akan Anda pelajari:

  • ISTIRAHAT
  • gRPC
  • jaket
  • Pengontrol API Web ASP.NET Core 7.0
  • Layanan gRPC ASP.NET Core 7.0
  • Kerangka Entitas Inti 7.0
  • Kesombongan / OpenAPI
  • KOR
  • YARP
  • Otentikasi dan Otorisasi
  • OAuth 2 dan Buka Id Connect
  • Server Identitas 4 (Duende)
  • Otorisasi Sederhana
  • Otorisasi Pemilik Sumber Daya
  • Arsitektur BERSIH
  • Pengujian Unit dengan bUnit
  • Interoperabilitas Javascript

Sebelum Anda mulai

Pada saat penulisan tutorial ini, .NET Core 7.0 hanya dapat digunakan dengan Visual Studio 2022. Anda disarankan untuk menginstal Visual Studio 2022 versi terbaru agar dapat bekerja dengan .NET Core 7.0.

  • Instal Visual Studio 2022 versi terbaru dengan beban kerja ASP.NET dan pengembangan web
  • Instal .NET Core 7.0 dengan mengunduh .NET Core 7.0 SDK

Anda mungkin ingin membuka dokumentasi memulai untuk serangkaian instruksi terbaru.

Alur kerja kami

Kami akan mengikuti beberapa langkah sederhana. Setiap langkah akan fokus pada satu tugas dan akan melanjutkan langkah sebelumnya. Kami akan memulai dengan proyek sederhana yang seiring berjalannya waktu akan menjadi semakin kompleks. Misalnya, kami tidak akan fokus pada otentikasi dan otorisasi pada awalnya. Kami akan menambahkannya di langkah selanjutnya.

Caranya ikuti tutorial ini

Jika Anda memulai dari Lab01 dan mengikuti setiap readme.md, Anda dapat menyelesaikan setiap lab dan melanjutkan ke lab berikutnya menggunakan kode Anda sendiri. Tidak perlu membuka folder Start maupun Solution yang disediakan dalam repo ini.

  • Folder Start adalah titik awal dari setiap langkah.
  • Folder Solution adalah versi final dari setiap langkah, diberikan kepada Anda jika Anda ingin memeriksa proyek Anda seharusnya menjadi apa di akhir setiap lab.

Yang harus Anda lakukan adalah membuka folder Start yang sesuai dengan lab yang ingin Anda coba ( Lab01/Start untuk memulai dari awal) dan ikuti instruksi yang Anda temukan di file readme.md . Setelah selesai, silakan bandingkan pekerjaan Anda dengan solusi yang disediakan di folder Solution .

Untuk MEMULAI

  1. Buka folder Labs
  2. Arahkan ke subfolder Lab01
  3. Arahkan ke subfolder Start
  4. Ikuti instruksi yang terdapat dalam file readme.md untuk melanjutkan

Jika Anda ingin melihat aplikasi terakhir

Buat Basis Data Layanan REST Foto

  • Buka Lab15SolutionblazorPhotoSharingApplicationPhotoSharingApplication.sln di Visual Studio
  • Bangun Solusinya
  • Pastikan Anda memiliki beberapa proyek startup:
    • Server Identitas
    • Istirahat
    • gRPC
    • Frontend.Server

Mulai aplikasi

Untuk Masuk

  • Nama pengguna: alice
  • Kata sandi: Lulus123$

Atau

  • Nama pengguna: bob
  • Kata sandi: Lulus123$

Satu catatan terakhir sebelum kita mulai

Saya berasumsi Anda seorang programmer C# yang tertarik untuk membangun aplikasi web. Tergantung pada usia Anda, Anda mungkin sudah menggunakan halaman asp, aspx, mvc dan/atau silet dan sekarang Anda ingin mencoba blazor. Anda mungkin sudah familiar dengan HTML dan CSS dan mungkin Anda pernah bermain dengan beberapa kerangka javascript seperti Angular, React atau Vue.

Saya akan menautkan banyak sekali dokumentasi tentang konsep dan teknologi web, jadi jangan khawatir jika Anda bukan ahli pengembang web, Anda dapat mempelajari semuanya selama prosesnya. Anda setidaknya harus fasih berbahasa C#, atau tutorial ini akan sulit diikuti. Sebagian besar kode yang akan kita tulis sebenarnya adalah C#. Kami juga akan menulis beberapa HTML, tapi itu mudah dipelajari sehingga tidak akan menjadi masalah.

Lab

  • Lab 01 - Bagian Depan Blazor
    • Menjelajahi struktur proyek Perakitan Web Blazor dan membuat halaman pertama kami
  • Lab 02 - Frontend: Tampilan Tambahan
    • Arsitektur BERSIH
    • Injeksi Ketergantungan
    • Menggunakan Perpustakaan Blazor tambahan melalui Paket NuGet
    • Rute
    • Pengikatan Data
    • Penanganan Acara
  • Lab 03 - Frontend: Menata UI dengan MatBlazor
    • Desain Bahan
    • MatBlazor
    • Halaman Tata Letak
  • Lab 04 - Frontend - Perpustakaan dan Komponen Razor Class
    • Membuat Perpustakaan Kelas Pisau Cukur
    • Menggunakan Perpustakaan Kelas Razor dari dalam proyek
    • Komponen Pisau Cukur
    • Komponen Induk dan Anak
    • Properti
    • Panggilan Balik Acara
  • Lab 05 - Backend: Web API dengan ASP.NET Core 7.0 dan Visual Studio 2022
    • Protokol REST
    • Api Web Inti Asp.NET
    • Pengendali
    • Tindakan
    • Rute
    • Mengikat
    • Inti Kerangka Entitas
    • JSON
    • Kesombongan / OpenAPI
  • Lab 06 - Frontend: Menghubungkan dengan Backend
    • Klien Http
    • Konfigurasi HttpClient
    • DapatkanDariJsonAsync
    • PostAsJsonAsync
    • PutAsJsonAsync
    • HapusAsync
    • BacaDariJsonAsync
    • KOR
    • YARP
  • Lab 07 - Bagian Depan: Komentar
    • Arsitektur yang lebih BERSIH
    • Lebih Banyak Komponen
  • Lab 08 - Backend: gRPC dengan ASP.NET Core 7.0 dan Visual Studio 2022
    • Arsitektur yang lebih BERSIH
    • gRPC
    • protobuf
    • gRPC di Asp.Net Inti
  • Lab 09 - Frontend: Menghubungkan dengan Backend
    • Web gRPC
    • Web Klien gRPC di .NET Core
    • Konfigurasi
    • KOR
    • YARP
  • Lab 10 - Keamanan: Otentikasi dan Otorisasi
    • Server Identitas Duende
    • Mengonfigurasi Layanan REST untuk Otentikasi Pembawa JWT
    • Mengonfigurasi Layanan gRPC untuk Otentikasi Pembawa JWT
    • Mengonfigurasi Klien Blazor untuk Otentikasi Pembawa JWT
    • Otorisasi Sederhana dengan Atribut Authorize
    • Mengambil dan meneruskan Token Pembawa JWT dengan menggunakan kerangka kerja Duende.Bff.Yarp
  • Lab 11 - Keamanan: Otorisasi Berbasis Sumber Daya
    • Layanan Otorisasi
    • Kebijakan
    • Persyaratan
    • Penangan
  • Lab 12 - Optimasi Kinerja
    • Pemisahan Tabel Kerangka Entitas
    • Unduh File dari Layanan REST Web Api
    • Cache Peramban
  • Lab 13 - Validasi
    • Anotasi Data
    • Validasi Lancar dalam Layanan Inti
    • Validasi Lancar dalam Layanan REST Inti ASP.NET
    • Validasi Lancar di Blazor dengan Blazored.FluentValidation
  • Lab 14 - Pengujian Unit Komponen Blazor dengan bUnit
    • Pengujian Satuan
    • Mengejek
    • xUnit
    • Moq
    • bSatuan
  • Lab 15 - Interoperabilitas Blazor/Javascript
    • IJSRuntime
    • Panggil fungsi JavaScript di ASP.NET Core Blazor
    • Panggil metode .NET dari fungsi JavaScript di ASP.NET Core Blazor
    • Isolasi Blazor JavaScript dan referensi objek
    • selebaran
    • exif.js
Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua