Flazzo memiliki fokus utama untuk menambah nilai bisnis Anda.

Blog

Kembangkan aplikasi di cloud dengan Project IDX

18019073-thumb.jpg
Blog

Kembangkan aplikasi di cloud dengan Project IDX

[ad_1]

Beberapa tahun terakhir telah terjadi peningkatan IDE berbasis cloud dan beberapa opsi telah muncul seperti CodeSandBox, Replit, StackBlitz, dll. IDE berbasis cloud memungkinkan pemrograman tanpa memerlukan mesin spesifikasi pengembang khusus karena dijalankan langsung di browser. Mereka memberikan kebebasan penuh untuk menulis perangkat lunak dari mana saja dan kapan saja. IDE ini selalu hebat dalam membuat demo demo dan POC, dan memiliki keterbatasan. Pada Agustus 2023, Google meluncurkan IDE berbasis cloud miliknya sendiri, yang dikenal sebagai Project IDX. Project IDX menyediakan lingkungan pengembangan yang komprehensif untuk mengembangkan aplikasi lintas platform.

Manfaat proyek BEI

Proyek BEI memiliki beberapa keunggulan utama dibandingkan IDE berbasis cloud terkemuka lainnya:

KODE OSS

Project IDX memiliki editor IDE yang familiar, mirip dengan Visual Studio Code, yang sudah biasa digunakan oleh banyak pengembang. Ia menggunakan platform Code OSS open source yang sama, tempat VS Code dikembangkan. Ini juga memungkinkan mengimpor plugin VS Code ke editor Project IDX.

Editor Proyek BEI

Gambar 1: Editor Proyek BEI

Mesin Virtual Debian

Setiap ruang kerja Project IDX berjalan pada mesin virtual berbasis Debian Linux miliknya sendiri. Pengembang dapat menginstal alat yang harus mereka miliki menggunakan terminal pada VM ini. Mesin virtual mulai dan berhenti secara otomatis sesuai kebutuhan. Hal ini memungkinkan setiap ruang kerja memiliki kemampuan pengembangan penuh tanpa bergantung pada mesin pengguna akhir. Hal ini memiliki keuntungan utama karena ruang kerja Project IDX tidak bersaing untuk mendapatkan sumber daya di mesin lokal, namun tetap memungkinkan pengembang untuk membuat kode dengan perangkat yang sudah dikenal.

Top-up Langsung

Proyek IDX menampilkan live preview dari proyek yang sedang dibangun dan preview tersebut otomatis terupdate seiring pengembang mengetikkan kode.

Proyek IDX Live Reload

Gambar 2: Proyek IDX Live Reload

Templat yang telah ditentukan sebelumnya

Project IDX hadir dengan beberapa templat siap pakai untuk memungkinkan permulaan instan aplikasi web baru, backend, aplikasi seluler, proyek AI/ML, dan banyak lagi. Kemampuan ini memungkinkan pengembang menulis kode fitur dengan cepat tanpa harus mengkhawatirkan kode boilerplate awal.Templat Proyek BEI

Gambar 3: Model Proyek BEI

Dukungan AI bawaan

Ruang kerja proyek IDX memiliki fitur yang sangat erat dengan model AI generatif Google, Gemini. Gemini dapat membantu sebagai alat penyelesaian dan pembuatan kode di ruang kerja dan ada juga jendela obrolan khusus untuk diskusi langsung.

Gemini di proyek BEI

Gambar 4: Gemini di proyek BEI

Membuat aplikasi React baru di proyek IDX

Sekarang setelah Anda memiliki gambaran umum tentang apa itu proyek IDX dan fitur-fitur utamanya, inilah saatnya untuk mempelajari sebuah proyek. Anda dapat mengikuti langkah-langkah di bawah ini untuk meluncurkan aplikasi React baru di proyek IDX.

  • Akses proyek IDX menggunakan ini URL. Anda harus masuk ke akun Google Anda.
  • Klik pada Untuk memulai tombol. Anda akan diarahkan untuk menerima syarat dan ketentuan. Setelah menyetujui syarat dan ketentuan, Anda akan diminta untuk mengaktifkan dukungan AI. Hal ini memungkinkan Anda mendapatkan dukungan dari model Google Gemini GenAI.
  • Anda sekarang akan dibawa ke halaman di mana Anda dapat memilih template untuk memulai proyek Anda. Anda akan melihat pola awal yang berbeda, seperti yang ditunjukkan pada ilustrasi yang diberikan sebelumnya (Gambar 2). Anda mungkin perlu mengklik Lihat semua model tombol dan arahkan ke Aplikasi Web untuk melihat templat React. Klik pada Model reaksiyang kemudian akan meminta Anda memberi nama proyek Anda. Pilih nama pilihan Anda dan secara opsional pilih antara JavaScript dan TypeScript. Setelah itu, tekan Membuat Tombol tersebut akan menginisialisasi proyek dan Anda akan melihat detailnya seperti yang disorot dalam ilustrasi di bawah.

Menyiapkan proyek baru

Gambar 5: Konfigurasi proyek baru

  • Setelah penyiapan proyek selesai, Anda akan melihat kode Anda dimuat di VS Type Editor dan pratinjau langsung proyek Anda.
  • Buka itu app.tsx file dan perbarui kode di return caranya seperti gambar di bawah ini.
  // app.tsx
  return (
    <>
      

Hello Project IDX React

> )

  • Jendela live reload Anda akan disegarkan dan Anda akan melihat hasilnya seperti yang ditunjukkan pada ilustrasi di bawah.

Lihat diperbarui setelah perubahan kode

Gambar 6: Tampilan yang diperbarui setelah perubahan kode

Kesimpulan

Anda menemukan proyek IDX dan fitur utamanya di artikel ini. Selain itu, Anda meluncurkan proyek React baru, mengedit kodenya, dan melihat perubahan Anda terlihat secara otomatis. Project IDX lebih dari sekadar editor kode sederhana: ini adalah ruang kerja lengkap untuk mengembangkan aplikasi yang kompleks. Silakan kode fungsionalitas yang Anda inginkan dan jelajahi lebih banyak template yang disediakan oleh Project IDX yang lebih sesuai dengan kebutuhan Anda.

[ad_2]