99. Studi Kasus: Dashboard Admin Berbasis grpc-gateway

Dashboard admin adalah jantung utama dalam mengelola aplikasi berskala besar. Di balik tombol dan tabel statistiknya, tersimpan tantangan arsitektur nyata tentang komunikasi antar service backend. Salah satu cara modern untuk membangun API kuat sekaligus tetap developer-friendly adalah grpc-gateway. Dalam studi kasus ini, kita akan membongkar bagaimana membangun dashboard admin berbasis grpc-gateway, lengkap dengan studi desain, contoh kode, simulasi alur, dan best practices.

Pendahuluan: Ketika REST Tak Lagi Cukup

Banyak aplikasi mulai dengan REST API. Namun, seiring bertambahnya volume data, kebutuhan real-time, dan demand integrasi multi-platform, protokol ini mulai terasa kurang efisien. gRPC, yang berbasis HTTP/2 dan Protocol Buffers, menawarkan performa dan type safety. Namun, gRPC murni belum universal: tidak setiap frontend siap bicara gRPC-native. Inilah celah yang diisi oleh grpc-gateway: sebuah bridge otomatis dari gRPC ke RESTful API.

Studi Kasus: Dashboard Admin Kinerja User

Misalkan kita punya aplikasi SaaS, dengan tim admin yang mengelola user, melakukan monitoring penggunaan, dan melakukan intervensi bila terjadi anomaly. Kita ingin dashboard admin yang:

• Menampilkan statistik user secara real-time.
• CRUD user dengan response cepat.
• Bisa diakses oleh frontend web (through RESTful endpoints).
• Backend efisien, schema terdesain dengan baik, dan mudah untuk di-scale.

Pilihan Arsitektur

Protobuf Definition: Mendefinisikan API Sekali untuk Semua

gRPC berawal dari satu sumber kebenaran: .proto file. Contohnya, user.proto:

syntax = "proto3";

package admin;

service UserService {
    rpc GetUserStats (StatsRequest) returns (StatsResponse) {
        option (google.api.http) = {
            get: "/admin/users/stats"
        };
    }

    rpc ListUsers (ListUsersRequest) returns (ListUsersResponse) {
        option (google.api.http) = {
            get: "/admin/users"
        };
    }

    rpc CreateUser (CreateUserRequest) returns (User) {
        option (google.api.http) = {
            post: "/admin/users"
            body: "*"
        };
    }

    rpc DeleteUser (DeleteUserRequest) returns (Empty) {
        option (google.api.http) = {
            delete: "/admin/users/{id}"
        };
    }
}

message StatsRequest {}
message StatsResponse {
    int32 active_user_count = 1;
    int32 total_user_count = 2;
}

message User {
    string id = 1;
    string name = 2;
    string email = 3;
}

message ListUsersRequest {
    int32 page = 1;
    int32 per_page = 2;
}
message ListUsersResponse {
    repeated User users = 1;
}

message CreateUserRequest {
    string name = 1;
    string email = 2;
}

message DeleteUserRequest {
    string id = 1;
}
message Empty {}

Dengan sebuah file .proto, endpoint gRPC untuk backend dan REST untuk frontend ter-generate otomatis.

Implementasi gRPC Backend

Misal, di GoLang (implementation yang populer untuk gRPC):

// user_service.go
func (s *Server) GetUserStats(ctx context.Context, req *pb.StatsRequest) (*pb.StatsResponse, error) {
    stats, err := s.repo.FetchStats() // Ambil dari Postgres misal
    if err != nil {
        return nil, status.Errorf(codes.Internal, "FetchStats: %v", err)
    }
    return &pb.StatsResponse{
        ActiveUserCount: stats.Active,
        TotalUserCount:  stats.Total,
    }, nil
}

Setting up grpc-gateway

grpc-gateway membaca anotasi google.api.http pada proto dan menghasilkan proxy HTTP -> gRPC converter.

Misal, pada Go Mod Project:

1. Generate code dari .proto:

   protoc -I. --go_out=. --go-grpc_out=. --grpc-gateway_out=. user.proto
   

2. Implementasikan gateway handler:

   mux := runtime.NewServeMux()
   err := admin.RegisterUserServiceHandlerServer(ctx, mux, userServer)
   if err != nil {
      log.Fatalf("Failed to register: %v", err)
   }
   http.ListenAndServe(":8080", mux)
   

grpc-gateway akan expose /admin/users/stats, /admin/users, dll sebagai endpoint REST, sementara forwards request ke handler gRPC.

Simulasi Alur Request

Contoh, frontend React fetch statistik user:

fetch("/admin/users/stats")
  .then(res => res.json())
  .then(res => console.log(res));

Pada backend:

• HTTP GET /admin/users/stats
• grpc-gateway mengkonversi ke GetUserStats gRPC
• Handler GoLang menjalankan logic bisnis
• Hasil direturunkan ke frontend dalam format JSON

Diagram Alur (mermaid)

sequenceDiagram
  participant Frontend
  participant grpc-gateway
  participant UserService (gRPC)
  participant Database

  Frontend->>grpc-gateway: GET /admin/users/stats
  grpc-gateway->>UserService (gRPC): GetUserStats()
  UserService (gRPC)->>Database: SQL SELECT COUNT()
  Database-->>UserService (gRPC): Stats
  UserService (gRPC)-->>grpc-gateway: StatsResponse
  grpc-gateway-->>Frontend: JSON Stats

Benchmark: Efisiensi

Analisa ringkas simulasi performance:

Dengan grpc-gateway, kita mendapatkan performance hampir setara gRPC native, sekaligus fleksibilitas REST.

Testing dan Observabilitas

Anda tetap bisa menulis unit/integration test pada gRPC handler, dan hanya perlu test e2e pada layer grpc-gateway. grpc-gateway telah mature dan mendukung OpenAPI docs serta logging middleware dengan mudah, memastikan observabilitas.

mux := runtime.NewServeMux(
   runtime.WithForwardResponseOption(myLoggingResponseModifier),
)

Perbandingan: REST vs gRPC-Gateway

Catatan dan Best Practices

1. Selalu mulai dari proto file: Fungsikan proto sebagai single source of truth bagi API.
2. Gunakan anotasi google.api.http secara konsisten agar endpoint REST selalu tersedia.
3. Pisahkan handler gateway dan backend logic—jaga agar handler REST simpel, logic berat dihandler gRPC.
4. Versikan proto dan endpoint jika ada perubahan schema besar.
5. Monitoring tracing antar layer penting untuk debugging production.

Kesimpulan

Dengan grpc-gateway, team backend bisa menulis API yang modern, efficient, dan future proof, sembari tetap menyajikan API RESTful yang umum untuk frontend, mobile, integrator maupun legacy client lain. Studi kasus dashboard admin ini menampilkan kekuatan pola: definisikan sekali, gunakan di mana saja. Proyek berikutnya, segera pertimbangkan untuk memulai dari gRPC + grpc-gateway.

Sumber ingin coba?
gRPC-Gateway Documentation
Contoh kode di github.com/your-repo/admin-dashboard-grpc-gateway

Terimakasih telah membaca!
Tinggalkan komentar jika ingin studi kasus lebih dalam lagi.