EasyForms_NET.vb

Klon Google Formulir

Proyek ini merupakan tiruan sederhana dari Google Formulir yang memungkinkan pengguna membuat dan melihat kiriman. Ini menunjukkan penggunaan server backend untuk menangani data dan aplikasi frontend untuk berinteraksi dengan pengguna. Backend dibangun dengan Node.js dan Express, sedangkan frontend dibangun menggunakan Visual Basic di Visual Studio.

Daftar isi

• Perkenalan
• Arsitektur
• Struktur Proyek
• Instalasi
• Pengaturan Backend
• Pengaturan Bagian Depan
• Menjalankan Proyek
• Titik Akhir API
• Penggunaan
• Berkontribusi
• Lisensi
• Pratinjau

Perkenalan

Tujuan

Tujuan dari proyek ini adalah untuk menyediakan sistem pengiriman formulir sederhana di mana pengguna dapat membuat pengiriman baru dan melihat yang sudah ada. Ini berfungsi sebagai contoh pengintegrasian aplikasi frontend dengan server backend.

Fitur

• Buat pengiriman formulir baru dengan detail pengguna dan waktu stopwatch.
• Lihat kiriman yang ada, navigasikan menggunakan tombol berikutnya dan sebelumnya.
• Persistensi data menggunakan file JSON sebagai database.

Arsitektur

Bagian belakang

• Node.js dan Express digunakan untuk membuat REST API sederhana.
• Modul fs digunakan untuk membaca dan menulis data ke file JSON ( db.json ).

Bagian depan

• Visual Basic di Visual Studio digunakan untuk membuat aplikasi frontend.
• Aplikasi frontend terdiri dari dua formulir utama: CreateSubmissionForm dan ViewSubmissionsForm .

Struktur Proyek

klon-google-formulir/
│
├── Geser/
│ ├── dis/
│ │ ├── server.js
│ ├── src/
│ │ ├── db.json
│ │ ├── server.ts
│ ├── simpul_modul/
│ ├── paket.json
│ ├── tsconfig.json
│ └── README.md
│ └── Proyek VisualStudio/
├── Buat Formulir Pengajuan.vb
├── Lihat Formulir Pengiriman.vb
├── Program.vb
└── VisualStudioProject.sln

• Slidely : Berisi kode backend.

  • dist : File JavaScript yang dikompilasi.
  • src : File Sumber TypeScript dan file JSON database.
  • node_modules : dependensi Node.js.
  • package.json : Konfigurasi proyek Node.js.
  • tsconfig.json : Konfigurasi TypeScript.

• VisualStudioProject : Berisi kode frontend.

  • CreateSubmissionForm.vb : Formulir untuk membuat kiriman baru.
  • ViewSubmissionsForm.vb : Formulir untuk melihat kiriman yang sudah ada.
  • Program.vb : File program utama.
  • VisualStudioProject.sln : File solusi Visual Studio.

Instalasi

Prasyarat

• Node.js
• npm
• Visual Studio dengan dukungan .NET

Pengaturan Backend

1. Kloning repositori:

   git clone https://github.com/yourusername/google-forms-clone.git
   cd google-forms-clone/Slidely

2. Instal dependensi yang diperlukan:

   npm install

3. Kompilasi file TypeScript:

   tsc

Pengaturan Bagian Depan

1. Buka solusi VisualStudioProject di Visual Studio.

2. Pastikan semua paket NuGet yang diperlukan telah diinstal. Anda mungkin perlu memulihkan paket NuGet jika paket tersebut hilang.

Menjalankan Proyek

Memulai Server Backend

1. Arahkan ke direktori Slidely :

    cd google-forms-clone/Slidely

2. Mulai server:

   node dist/server.js

   Anda akan melihat pesan:

    Server is running on http://localhost:3000
   

Menjalankan Frontend

1. Buka solusi di Visual Studio.

2. Atur formulir startup ke CreateSubmissionForm atau ViewSubmissionsForm sesuai kebutuhan.

3. Jalankan proyek dengan menekan F5 atau mengklik tombol Start di Visual Studio.

Titik Akhir API

POSTING /kirim

• Deskripsi : Mengirimkan entri formulir baru.
• Badan Permintaan :

  {
    "name" : " John Doe " ,
    "email" : " [email protected] " ,
    "phone" : " 1234567890 " ,
    "github_link" : " https://github.com/johndoe " ,
    "stopwatch_time" : " 00:05:00 "
  }

• Tanggapan :

  {
    "success" : true
  }

DAPATKAN / baca

• Deskripsi : Mengambil entri formulir berdasarkan indeksnya.
• Parameter Kueri :
  • index : Indeks kiriman yang akan diambil.
• Tanggapan :

  {
    "submission" : {
      "name" : " John Doe " ,
      "email" : " [email protected] " ,
      "phone" : " 1234567890 " ,
      "githubLink" : " https://github.com/johndoe " ,
      "stopwatchTime" : " 00:05:00 "
    }
  }

Penggunaan

Membuat Pengajuan

1. Buka CreateSubmissionForm di Visual Studio.
2. Masukkan detail yang diperlukan seperti Nama, Email, Telepon, Tautan GitHub, dan mulai Stopwatch.
3. Klik tombol Submit untuk menyimpan kiriman.
   • Data formulir dikirim ke server backend melalui permintaan POST ke /submit .
   • Jika pengiriman berhasil, pesan konfirmasi akan ditampilkan.

Melihat Kiriman

1. Buka ViewSubmissionsForm di Visual Studio.
2. Klik tombol Next atau Previous untuk menavigasi kiriman.
   • Formulir mengambil data dari server backend melalui permintaan GET ke /read dengan indeks saat ini sebagai parameter kueri.
   • Detail pengiriman ditampilkan di kolom formulir.

Berkontribusi

Kontribusi dipersilahkan! Silakan fork repositori dan buat permintaan tarik dengan perubahan Anda. Pastikan kode Anda mematuhi standar pengkodean dan mencakup pengujian yang sesuai.

1. Cabangkan repositori.
2. Buat cabang baru untuk fitur Anda.
3. Komit perubahan Anda ke cabang.
4. Buat permintaan tarik dengan penjelasan rinci tentang perubahan Anda.

Pratinjau

Halaman Beranda

Lihat Pengiriman

Buat Pengajuan

Lisensi

Proyek ini dilisensikan di bawah Lisensi MIT. Lihat file LISENSI untuk informasi lebih lanjut.