lens up

Lensa Atas

1. Tamu melihat Gallery UI dengan foto tamu lainnya. Dia juga melihat kode QR di pojok aplikasi.

2. Tamu memindai kode QR, yang mengarahkannya ke Photo Collector UI dan di sana ia dapat mengunggah foto dan keinginan.

3. Photo Collector UI mengirim data ke Photo Collector Service .

4. Photo Collector Service mengunggah foto tamu ke penyimpanan blob.

5. Photo Collector Service menambahkan data tamu ke database.

6. Photo Collector Service mempublikasikan acara ke antrian.

7. Gallery Service menerima acara dan memprosesnya.

8. Pemberitahuan push Gallery Service tentang foto baru di galeri untuk Gallery UI , lalu Gallery UI menambahkan foto tamu baru ke koleksi galeri.

Gambaran besar LensUp:

Keterangan:

• Layanan ujung belakang:

  • Layanan Pengumpul Foto (.NET Web API)
  • Layanan Galeri (.NET Web API)
  • Layanan BackOffice (.NET Web API)
  • Simulator Pemicu Webhook (Fungsi Azure)

• Aplikasi UI:

  • UI Kolektor Foto (React.js)
  • Galeri UI (React.js)
  • UI Back Office (React.js)

• Layanan Azure:

  • Penyimpanan Meja
  • Penyimpanan Antrian
  • Penyimpanan Gumpalan

? Cara menjalankan LensUp secara lokal

Anda dapat menjalankan proyek secara lokal di mesin Anda menggunakan Docker. Ikuti langkah-langkah di bawah ini untuk menjalankan aplikasi secara lokal:

1. Sebelum kita mulai, Anda harus membuat dev-certs untuk LensUp di mesin Anda. Operasi ini diperlukan untuk menghosting image ASP.NET Core dengan Docker melalui HTTPS. Jadi buatlah sertifikat menggunakan perintah ini:

   dotnet dev-certs https -ep " %USERPROFILE%.aspnethttpslens-up.pfx " -p localCertPassword
   dotnet dev-certs https --trust

   Ganti %USERPROFILE% dengan nama komputer Anda. Contoh "C:UsersDell Precision 7520.aspnethttpslens-up.pfx"

   Untuk tujuan pengembangan lokal, kami akan menggunakan kata sandi localCertPassword . Jangan ubah ini, karena kata sandi yang sama digunakan di file docker-compose.yml .

   Perintah di atas harus menghasilkan sertifikat lens-up.pfx , dan harus menempatkannya di direktori seperti yang ditunjukkan pada gambar di bawah.

   

   Ini adalah langkah yang perlu, karena docker-compose mengacu pada sertifikat itu!

2. Instal docker desktop di mesin Anda (lewati jika Anda sudah melakukannya) .

3. Jalankan aplikasi docker desktop Anda.

4. Di direktori proyek utama ( lens-up ), tempat file docker-compose.yml berada, jalankan perintah docker-compose build . Ini akan menghasilkan 7 gambar LensUp yang diperlukan. Pembuatan pertama kali mungkin memerlukan waktu beberapa menit (hingga 10 menit). Setelah menyelesaikan langkah-langkah ini, Anda akan melihat gambar baru di aplikasi Docker Desktop.

   

5. Setelah perintah build, jalankan docker-compose up untuk memulai seluruh infrastruktur. Anda akan melihat di Docker Desktop bahwa 7 container yang terkait dengan LensUp telah dimulai.

   

6. Sekarang seluruh aplikasi berjalan di mesin Anda. Anda dapat menggunakan alamat berikut:

   • Layanan ujung belakang:

     • Kesombongan LensUp.BackOfficeService.API - https://localhost:8085/swagger/index.html
     • Kesombongan LensUp.GalleryService.API - https://localhost:8083/swagger/index.html
     • LensUp.GalleryService.WebhookTriggerSimulator - http://localhost:8086/
     • Kesombongan LensUp.PhotoCollectorService.API - https://localhost:8081/swagger/index.html

   • Aplikasi UI:

     • LensUp.GalleryService.UI - http://localhost:5001/

     • LensUp.PhotoCollectorService.UI - http://localhost:5002/

       Di LensUp.PhotoCollectorService.UI Anda akan melihat halaman kesalahan, karena Anda perlu menavigasi ke tampilan yang terkait dengan galeri tertentu, yang belum Anda buat.

Bagaimana cara membuat galeri pertama Anda dan bersenang-senang dengan LensUp?

1. Buka LensUp.BackOfficeService.API - https://localhost:8085/swagger/index.html

2. Gunakan Create titik akhir untuk membuat galeri Anda. Titik akhir mengembalikan pengidentifikasi galeri setelah dibuat (1) .

   

3. Sebelum menggunakan galeri, kita perlu mengaktifkannya. Dalam hal ini gunakan Activate endpoint dan teruskan galleryId dan endDate di badan permintaan. Ingat endDate divalidasi dan harus lebih besar dari waktu saat ini. Jika tidak, galeri Anda akan dianggap kedaluwarsa. Titik akhir mengembalikan galeri enterCode setelah diaktifkan (1) .

   

4. Dengan enterCode galeri Anda, Anda dapat membuka galeri Anda menggunakan LensUp.GalleryService.UI - http://localhost:5001/

   Masuk ke galeri Anda menggunakan enterCode .

   

5. Sekarang Anda dapat memindai kode QR galeri dan mengunggah foto ke dalamnya. Kode dialihkan ke formulir untuk menambahkan foto ke galeri. Anda dapat menggunakan alat browser untuk memindai kode QR atau jika tidak berhasil, Anda dapat langsung mengunjungi http://localhost:5002/upload-photo/{enterCode} .

   

6. Kode QR mengarahkan Anda untuk menambahkan foto dan formulir keinginan. Sekarang Anda dapat mengunggah data Anda ke galeri.

   

7. Setelah formulir berhasil diisi, kita akan melihat notifikasi sukses dan fotonya akan muncul di galeri.

   

? Daftar TODO 100 hari

Aspek umum:

• Siapkan infrastruktur monorepo untuk backend
• Siapkan infrastruktur monorepo untuk frontend
• Buat skrip yang menjalankan LensUp
• Buat dokumentasi cara menjalankan LensUp secara lokal
• Buat film tutorial "Cara menjalankan LensUp secara lokal"
• Buat dokumentasi cara menjalankan LensUp secara lokal di jaringan WLAN.

Aspek latar belakang:

• Buat proyek backend umum bersama
• Buat kumpulan aturan pengkodean untuk layanan backend
• Buat paket Antrian di proyek umum bersama
• Buat paket Penyimpanan Tabel dalam proyek umum bersama
• Paket Crate Blob dalam proyek umum bersama

Layanan Kembali Kantor:

• Buat struktur proyek
• Buat tambahkan titik akhir pengguna
• Buat tambahkan titik akhir galeri
• Buat titik akhir galeri aktif

Layanan Galeri:

• Buat struktur proyek
• Buat titik akhir dapatkan info galeri
• Buat hub notifikasi galeri

Layanan Pengumpul Foto:

• Buat struktur proyek
• Buat tambahkan foto dan titik akhir keinginan
• Buat pengubah ukuran gambar

Aspek bagian depan:

• Buat proyek frontend umum bersama
• Buat kumpulan aturan pengkodean untuk aplikasi frontend
• Buat komponen bersama dalam proyek frontend umum bersama

UI Kantor Belakang:

• Buat Panel Admin (opsional)

UI Galeri:

• Buat login ke halaman galeri
• Buat halaman utama dengan galeri
• Tangani notifikasi dari backend
• Tambahkan animasi ke galeri
• Tambahkan carousel untuk foto

UI Kolektor Foto:

• Buat satu halaman dengan menambahkan foto dan formulir keinginan