Kami meluncurkan Project IDX, pengalaman pengembangan baru berbasis browser eksperimental, untuk menyederhanakan kompleksitas saat membangun aplikasi full-stack dan mempermudah proses pengembangan dari (back)end hingga (front)end.
Berdasarkan pengalaman kami, sebagian besar aplikasi web dibangun dengan setidaknya dua lapisan yang berbeda: lapisan frontend (UI) dan lapisan backend. Ketika Anda berpikir tentang jenis aplikasi yang akan Anda bangun di ruang kerja developer berbasis browser, Anda mungkin tidak akan langsung beralih ke aplikasi full-stack dengan backend yang kuat dan berfungsi penuh. Mengembangkan backend di lingkungan berbasis web mungkin tidak efisien dan cepat menghabiskan banyak biaya. Karena pengaturan autentikasi yang berbeda untuk lingkungan pengembangan dan produksi, komunikasi yang aman antara backend dan frontend, serta kompleksitas dalam menyiapkan lingkungan pengujian (hermetic) yang sepenuhnya terpisah, biaya dan ketidaknyamanannya dapat bertambah.
Kami tahu Anda semua sangat antusias ingin mencoba IDX, tetapi saat ini, kami ingin membagikan postingan tentang pengembangan full-stack di Project IDX. Kami akan menguraikan beberapa situasi kompleks yang mungkin Anda hadapi sebagai developer saat membangun lapisan frontend dan backend di ruang kerja berbasis web — autentikasi developer, komunikasi frontend-backend, dan pengujian hermetic — dan bagaimana kami mencoba menjadikan semuanya sedikit lebih mudah. Dan tentu saja kami ingin mendengar dari Anda tentang apa lagi yang harus kami buat agar pengembangan full-stack semakin mudah bagi Anda!
Yang pertama dan terpenting, kami telah menyederhanakan proses untuk mengaktifkan komunikasi frontend aplikasi Anda dengan layanan backend di VM, sehingga Anda bisa dengan mudah melihat pratinjau aplikasi full-stack di browser.
Ruang kerja IDX dibangun di atas Google Cloud Workstation dan mengakses layanan yang terhubung secara aman melalui Akun Layanan. Setiap akun layanan unik di ruang kerja mendukung lingkungan pratinjau yang mulus dan terautentikasi untuk frontend aplikasi Anda. Jadi, ketika Anda menggunakan Project IDX, pratinjau aplikasi dibangun langsung ke dalam ruang kerja, dan Anda tidak perlu menyiapkan jalur autentikasi yang berbeda untuk melihat pratinjau UI. Saat ini, IDX hanya mendukung pratinjau web, tetapi pratinjau aplikasi Android dan iOS akan segera hadir di ruang kerja IDX.
Selain itu, jika pengaturan Anda memerlukan komunikasi dengan backend API yang sedang dikembangkan di IDX dari luar pratinjau browser, kami telah membuat beberapa mekanisme untuk menyediakan akses sementara ke port yang menjadi host dari backend API ini.
Jika Anda menggunakan framework yang menyalurkan lapisan backend dan frontend dari port yang sama, Anda bisa memberikan flag $PORT untuk menggunakan variabel lingkungan PORT khusus di file konfigurasi ruang kerja Anda (didukung oleh Nix dan disimpan secara langsung di ruang kerja). Ini adalah bagian dari alur penyiapan dasar di Project IDX, jadi Anda tidak perlu melakukan sesuatu yang spesial (selain mengatur variabel di file konfigurasi). Berikut adalah contoh file konfigurasi berbasis Nix:
{ pkgs, ... }: {
# NOTE: This is an excerpt of a complete Nix configuration example.
# Enable previews and customize configuration
idx.previews = {
enable = true;
previews = [
{
command = [
"npm"
"run"
"start"
"--"
"--port"
"$PORT"
"--host"
"0.0.0.0"
"--disable-host-check"
];
manager = "web";
id = "web";
}
];
};
Namun, jika server backend Anda berjalan pada port yang berbeda dari server UI, Anda perlu menerapkan strategi yang berbeda. Salah satu metodenya adalah dengan membuat frontend mem-proxy backend, seperti yang Anda lakukan dengan opsi server khusus Vite.
Cara lain untuk membangun komunikasi antar port adalah dengan mengatur kode Anda sehingga javascript yang berjalan pada UI Anda bisa berkomunikasi dengan server backend menggunakan permintaan AJAX.
Mari kita mulai dengan beberapa kode contoh yang menyertakan backend dan frontend. Berikut adalah server backend yang ditulis dalam Express.js:
import express from "express";
import cors from "cors";
const app= express();
app.use(cors());
app.get("/", (req, res) => {
res.send("Hello World");
});
app.listen(6000, () => {
console.log("Server is running on port 6000");
})
Baris yang dicetak tebal pada contoh — app.use(cors()); — menyiapkan header CORS. Penyiapannya mungkin berbeda berdasarkan bahasa/framework pilihan Anda, tetapi backend harus mengembalikan header ini, baik saat Anda mengembangkan secara lokal maupun di IDX.
Ketika Anda menjalankan server di terminal IDX, port backend akan muncul di panel IDX. Dan setiap port yang digunakan server secara otomatis dipetakan ke URL yang bisa Anda panggil.
Sekarang, mari kita tulis beberapa kode klien untuk membuat panggilan AJAX ke server ini.
// This URL is copied from the side panel showing the backend ports view
const WORKSPACE_URL = "https://6000-monospace-ksat-web-prod-79679-1677177068249.cluster-lknrrkkitbcdsvoir6wqg4mwt6.cloudworkstations.dev/";
async function get(url) {
const response = await fetch(url, {
credentials: 'include',
});
console.log(response.text());
}
// Call the backend
get(WORKSPACE_URL);
Kami juga telah memastikan bahwa panggilan fetch() menyertakan kredensial. URL IDX diautentikasi, jadi kita perlu menyertakan kredensial. Dengan cara ini, panggilan AJAX menyertakan cookie untuk mengautentikasi server kami.
Jika Anda menggunakan XMLHttpRequest alih-alih fetch, Anda bisa menyetel properti "withCredentials", seperti ini:
const xhr = new XMLHttpRequest();
xhr.open("GET", WORKSPACE_URL, true);
xhr.withCredentials = true;
xhr.send(null);
Kode Anda mungkin berbeda dengan contoh yang kami berikan berdasarkan library klien yang Anda gunakan untuk membuat panggilan AJAX. Jika ya, periksa dokumentasi library klien khusus Anda tentang cara membuat permintaan berkredensial. Selalu pastikan membuat permintaan berkredensial.
Dalam beberapa kasus, Anda mungkin ingin mengakses aplikasi Anda di Project IDX tanpa masuk ke akun Google Anda — atau dari lingkungan di mana Anda tidak dapat login ke akun Google Anda. Misalnya, jika Anda ingin mengakses API yang Anda kembangkan di IDX menggunakan Postman atau cURL dari command line laptop pribadi. Anda bisa melakukannya dengan menggunakan token akses sementara yang dibuat oleh Project IDX.
Setelah server berjalan di Project IDX, Anda bisa membuka menu perintah untuk membuat token akses. Token akses ini adalah token berdurasi singkat yang untuk sementara waktu memungkinkan Anda mengakses workstation Anda.
Sangat penting untuk dicatat bahwa token akses ini menyediakan akses ke seluruh ruang kerja IDX Anda, termasuk tetapi tidak terbatas pada aplikasi dalam bentuk pratinjau, jadi Anda tidak boleh membagikannya kepada sembarang orang. Kami sarankan agar Anda hanya menggunakannya untuk pengujian.
Ketika Anda menjalankan perintah ini dari IDX, token akses Anda akan muncul di jendela dialog. Salin token akses dan gunakan untuk membuat permintaan cURL ke layanan yang berjalan di workstation Anda, seperti berikut ini:
$ export ACCESS_TOKEN=myaccesstoken
$ curl -H "Authorization: Bearer $ACCESS_TOKEN" https://6000-monospace-ksat-web-prod-79679-1677177068249.cluster-lknrrkkitbcdsvoir6wqg4mwt6.cloudworkstations.dev/
Hello world
Dan sekarang Anda bisa menjalankan pengujian dari lingkungan server terautentikasi!
Seperti yang telah kami soroti, Anda bisa menguji frontend dan backend aplikasi di lingkungan yang sepenuhnya mandiri, terautentikasi, dan aman menggunakan IDX. Anda juga dapat menjalankan emulator lokal di lingkungan pengembangan berbasis web untuk menguji layanan backend aplikasi Anda.
Sebagai contoh, Anda bisa menjalankan Firebase Local Emulator Suite secara langsung dari ruang kerja IDX Anda. Untuk menginstal emulator suite, Anda perlu menjalankan firebase init emulator dari tab Terminal IDX dan mengikuti langkah-langkahnya untuk mengonfigurasi emulator yang Anda inginkan di port.
Setelah Anda menginstalnya, Anda bisa mengonfigurasi dan menggunakannya sama seperti yang Anda lakukan di lingkungan pengembangan lokal dari terminal IDX.
Seperti yang Anda lihat, Project IDX bisa memenuhi banyak kebutuhan pengembangan full-stack Anda — mulai dari frontend hingga backend dan semua emulator di dalamnya.
Jika Anda sudah menggunakan Project IDX, tag kami di media sosial dengan #projectidx untuk memberi tahu kami bagaimana Project IDX telah membantu pengembangan full-stack Anda. Atau untuk mendaftar ke daftar tunggu, kunjungi idx.dev.
Serial video Membangun dengan Google AI, Season 2: lebih banyak pola AI
How Firebase Genkit helped add AI to our Compass app
Everything you need to know about Google Wallet
Welcome India to the Google Wallet API
Menyesuaikan Gemini Pro di Google AI Studio atau dengan Gemini API
Google I/O 2024: What’s new in Android Development Tools