AWS Cloud9 tidak lagi tersedia untuk pelanggan baru. Pelanggan yang sudah ada AWS Cloud9 dapat terus menggunakan layanan seperti biasa. [Pelajari selengkapnya](https://aws.amazon.com/blogs/devops/how-to-migrate-from-aws-cloud9-to-aws-ide-toolkits-or-aws-cloudshell/)
Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.
# Tur AWS Cloud9 IDE
Topik ini memberikan tur dasar tentang lingkungan pengembangan AWS Cloud9 terintegrasi (IDE). Untuk memanfaatkan sepenuhnya tur ini, ikuti langkah-langkah yang ditunjukkan di bawah ini secara berurutan.
**Topics**
+ [Prasyarat](#tour-ide-prereqs)
+ [Langkah 1: Bilah menu](#tour-ide-menu-bar)
+ [Langkah 2: Dasbor](#tour-ide-dashboard)
+ [Langkah 3: Jendela lingkungan](#tour-ide-environment)
+ [Langkah 4: Editor, tab, dan panel](#tour-ide-editor)
+ [Langkah 5: Konsol](#tour-ide-console)
+ [Langkah 6: Buka bagian file](#tour-ide-open-files)
+ [Langkah 7: Selokan](#tour-ide-gutter)
+ [Langkah 8: Bilah status](#tour-ide-status-bar)
+ [Langkah 9: jendela Garis Besar](#tour-ide-outline)
+ [Langkah 10: jendela Pergi](#tour-ide-go)
+ [Langkah 11: tab Segera](#tour-ide-immediate)
+ [Langkah 12: Daftar proses](#tour-ide-process-list)
+ [Langkah 13: Preferensi](#tour-ide-preferences)
+ [Langkah 14: Terminal](#tour-ide-terminal)
+ [Langkah 15: Jendela Debugger](#tour-ide-debugger)
+ [Pikiran akhir](#tour-ide-cleanup)
## Prasyarat
Untuk mengikuti tur ini, Anda harus memiliki AWS akun dan lingkungan AWS Cloud9 pengembangan terbuka. Untuk mempelajari cara melakukan hal-hal ini, Anda dapat mengikuti langkah-langkah di [Memulai dengan AWS Cloud9](tutorials-basic.md). Atau, Anda dapat menjelajahi topik-topik terkait yang terpisah seperti [Menyiapkan AWS Cloud9](setting-up.md) dan [Bekerja dengan lingkungan di AWS Cloud9](environments.md).
**Awas**
Memiliki lingkungan AWS Cloud9 pengembangan dapat mengakibatkan biaya ke AWS akun Anda. Ini termasuk biaya yang mungkin untuk Amazon EC2 jika Anda menggunakan lingkungan EC2. Untuk informasi selengkapnya, lihat [Penetapan Harga Amazon EC2](https://aws.amazon.com/ec2/pricing/).
## Langkah 1: Bilah menu
*bilah menu*, di tepi atas IDE, berisi perintah umum untuk bekerja dengan file dan kode dan mengubah pengaturan IDE. Anda juga dapat melakukan pratinjau dan menjalankan kode dari bilah menu.
Anda dapat menyembunyikan bilah menu dengan memilih panah di tepinya, sebagai berikut.
Anda dapat menampilkan bilah menu lagi dengan memilih panah di tengah tempat bar menu sebelumnya, sebagai berikut.
Bandingkan hasil Anda dengan berikut.
Anda dapat menggunakan IDE untuk bekerja dengan satu set file dalam beberapa bagian berikutnya dalam tutorial ini. Untuk mengatur file-file ini, memilih **File**, **File Baru**.
Selanjutnya, salin teks berikut ke tab penyunting `Untitled1`.
```
fish.txt
--------
A fish is any member of a group of organisms that consist of
all gill-bearing aquatic craniate animals that lack limbs with
digits. They form a sister group to the tunicates, together
forming the olfactores. Included in this definition are
lampreys and cartilaginous and bony fish as well as various
extinct related groups.
```
Untuk menyimpan file, memilih **File**, **Simpan**. Beri nama file `fish.txt`, lalu memilih **Simpan**.
Ulangi petunjuk ini, menyimpan file kedua sebagai `cat.txt`, dengan konten berikut.
```
cat.txt
-------
The domestic cat is a small, typically furry, carnivorous mammal.
They are often called house cats when kept as indoor pets or
simply cats when there is no need to distinguish them from
other felids and felines. Cats are often valued by humans for
companionship and for their ability to hunt.
```
Sering ada beberapa cara untuk melakukan hal-hal di IDE. Misalnya, untuk menyembunyikan bilah menu, alih-alih memilih panah di tepinya, Anda bisa memilih **Melihat**, **Bilah Menu**. Untuk membuat file baru, alih-alih memilih **File, File Baru** Anda dapat menekan `Alt-N` (untuk Windows/Linux) atau `Control-N` (untuk macOS). Untuk mengurangi panjang tutorial ini, kami hanya menjelaskan satu cara untuk melakukan sesuatu. Ketika Anda merasa lebih nyaman dengan IDE, jangan ragu untuk bereksperimen dan mencari tahu cara yang terbaik untuk Anda.
## Langkah 2: Dasbor
*Dasbor* memberi Anda akses cepat ke setiap lingkungan Anda. Dari dasbor, Anda dapat membuat, membuka, dan mengubah pengaturan untuk lingkungan.
Untuk membuka dasbor, pada bilah menu, memilih **AWS Cloud9**, **Pergi ke Dasbor Anda**.
Untuk melihat pengaturan lingkungan Anda, pilih judul di dalam **my-demo-environment**kartu. Untuk kembali ke dasbor, gunakan tombol kembali peramban web Anda atau breadcrumb navigasi yang disebut **Lingkungan**.
Untuk membuka IDE untuk lingkungan Anda, pilih **Buka IDE** di dalam **my-demo-environment**kartu.
**catatan**
Perlu waktu beberapa saat agar IDE ditampilkan lagi.
## Langkah 3: Jendela lingkungan
Jendela **Lingkungan** menampilkan daftar folder dan file di lingkungan. Anda juga dapat menampilkan berbagai jenis file, seperti file tersembunyi.
Untuk menampilkan atau menyembunyikan jendela **Lingkungan**, memilih tombol **Lingkungan**.
Untuk menampilkan atau menyembunyikan jendela **Lingkungan**dan **Lingkungan**, memilih **Jendela**, **Lingkungan** pada bilah menu.
Untuk menampilkan atau menyembunyikan file tersembunyi, memilih ikon roda gigi di jendela **Lingkungan**, lalu memilih **Tampilkan File Tersembunyi**.
## Langkah 4: Editor, tab, dan panel
*Editor* adalah tempat Anda dapat melakukan hal-hal seperti tulis kode, menjalankan sesi terminal, dan mengubah pengaturan IDE. Setiap instans dari file terbuka, sesi terminal, dan sebagainya diwakili oleh *tab*. Tab dapat dikelompokkan ke *panel*. Tab ditampilkan di tepi panel mereka.
Untuk menampilkan atau menyembunyikan tab, memilih **Melihat**, **Tombol Tab** pada bilah menu.
Untuk membuka tab baru, memilih ikon **\+** di tepi baris tab. Kemudian memilih salah satu perintah yang tersedia, misalnya, **File Baru**, sebagai berikut.
Untuk menampilkan dua panel, memilih ikon yang terlihat seperti menu drop-down, yang berada di tepi deretan tab. Lalu memilih **Panel Terpisah dalam Dua Baris** sebagai berikut.
Untuk kembali ke satu panel, memilih ikon menu drop-down lagi, lalu memilih ikon persegi tunggal, sebagai berikut.
## Langkah 5: Konsol
*konsol* tersebut adalah tempat alternatif untuk membuat dan mengelola tab. Secara default, ini berisi tab Terminal, tetapi juga dapat berisi jenis tab lainnya.
Untuk menampilkan atau menyembunyikan konsol tersebut, memilih **Melihat**, **Konsol** pada bilah menu.
Untuk memperluas atau mengecilkan konsol tersebut, memilih ikon resize, yang berada di tepi konsol, sebagai berikut.
## Langkah 6: Buka bagian file
Bagian **Buka File** menunjukkan daftar semua file yang saat ini terbuka di editor. **Buka File** adalah bagian dari jendela **Lingkungan**.
Untuk menampilkan atau menyembunyikan bagian **Buka File**, memilih **Melihat**, **Buka File** pada bilah menu.
Untuk beralih di antara file yang terbuka, memilih file yang menarik dari daftar.
## Langkah 7: Selokan
*selokan*, di tepi setiap file di editor, menunjukkan hal-hal seperti nomor baris dan simbol kontekstual saat Anda bekerja dengan file.
Untuk menampilkan atau menyembunyikan selokan, memilih **Melihat**, **Selokan** pada bilah menu.
## Langkah 8: Bilah status
Parameter *bilah status*, di tepi setiap file di editor, menunjukkan hal-hal seperti nomor baris dan karakter, preferensi jenis file, pengaturan ruang dan tab, dan pengaturan editor terkait.
Untuk menampilkan atau menyembunyikan bilah status, memilih **Melihat**, **Bilah Status** pada bilah menu.
Untuk membuka nomor baris tertentu, memilih tab dengan file yang diminati. Kemudian di bilah status, memilih baris dan nomor karakter (itu harus sesuatu seperti **7:45**). Ketik nomor baris (seperti `4`), lalu tekan `Enter`, sebagai berikut.
Untuk mengubah preferensi jenis file, di bilah status, memilih jenis file yang berbeda. Misalnya, untuk **cat.txt**, memilih **Ruby** untuk melihat perubahan warna sintaks. Untuk kembali ke warna teks biasa, memilih **Teks Biasa**, sebagai berikut.
## Langkah 9: jendela Garis Besar
Anda dapat menggunakan jendela **Garis Besar** untuk pergi ke lokasi file tertentu dengan cepat.
Untuk menampilkan atau menyembunyikan jendela **Garis Besar** dan tombol **Garis Besar**, memilih **Jendela**, **Garis Besar** pada bilah menu.
Untuk melihat bagaimana jendela **Garis Besar** bekerja, membuat file bernama `hello.rb`. Salin kode berikut ke dalam file dan simpan.
```
def say_hello(i)
puts "Hello!"
puts "i is #{i}"
end
def say_goodbye(i)
puts "i is now #{i}"
puts "Goodbye!"
end
i = 1
say_hello(i)
i += 1
say_goodbye(i)
```
Untuk menampilkan atau menyembunyikan konten jendela **Garis Besar**, memilih tombol **Garis Besar**.
Di jendela **Garis Besar**, memilih **say\_hello(i)**, lalu pilih **say\_goodbye(i)**, sebagai berikut.
## Langkah 10: jendela Pergi
Anda dapat menggunakan jendela **Pergi** untuk membuka file dalam editor, pergi ke definisi simbol, jalankan perintah, atau pergi ke baris dalam file aktif dalam editor.
Untuk menampilkan konten jendela **Pergi**, memilih **Pergi** (ikon kaca pembesar).
Untuk menampilkan atau menyembunyikan jendela **Pergi** dan tombol **Pergi**, memilih **Jendela**, **Pergi** pada bilah menu.
Dengan jendela **Pergi** terbuka, Anda dapat:
+ Ketik garis miring ke depan (`/`) diikuti oleh sebagian atau seluruh nama file. Dalam daftar file yang cocok yang ditampilkan, memilih file untuk membukanya di editor. Misalnya, mengetik `/fish` daftar `fish.txt`, saat mengetik `/.txt` tandai `fish.txt` dan `cat.txt`.
**catatan**
Pencarian file hanya dicakup untuk file tidak tersembunyi dan folder tidak tersembunyi di jendela **Lingkungan**.
+ Ketik simbol at (`@`) diikuti dengan nama simbol. Dalam daftar file yang cocok yang ditampilkan, memilih simbol untuk membukanya di editor. Misalnya, dengan file `hello.rb` terbuka dan aktif di editor, ketik `@hello` daftar `say_hello(i)`, atau ketik `@say` untuk mencantumkan `say_hello(i)` dan `say_goodbye(i)`.
**catatan**
Jika file aktif dalam editor adalah bagian dari proyek bahasa yang di support, pencarian simbol dicakupkan ke proyek saat ini. Jika tidak, pencarian simbol hanya dicakupkan ke file aktif di editor. Untuk informasi selengkapnya, lihat [TypeScript Dukungan dan fitur yang ditingkatkan](projects.md).
+ Ketik titik (`.`) diikuti dengan nama perintah. Dalam daftar perintah yang ditampilkan, memilih perintah untuk menjalankannya. Misalnya, mengetik `.closetab` dan kemudian menekan `Enter` menutup tab saat ini di editor. Untuk daftar lengkap metrik yang tersedia, lihat [Referensi perintah untuk AWS Cloud9 IDE](commands.md).
+ Ketik titik dua (`:`) diikuti dengan nomor untuk pergi ke nomor baris dalam file aktif di editor. Misalnya, dengan file `hello.rb` terbuka dan aktif di editor, ketik `:11` untuk pergi ke baris 11 dalam file tersebut.
Untuk melihat pengikatan tombol untuk masing-masing tindakan ini berdasarkan mode keyboard dan sistem operasi saat ini, lihat masing-masing perintah **Pergi Ke** pada menu **Pergi** di bilah menu.
## Langkah 11: tab Segera
Tab **Segera** memungkinkan Anda untuk menguji potongan kecil kode. JavaScript Untuk melihat bagaimana tab **Segera** bekerja, lakukan hal berikut.
1. Buka tab **Segera** dengan memilih **Jendela**, **Jendela Segera Baru** pada bilah menu.
1. Menjalankan beberapa kode di tab **Segera**. Untuk mencoba ini, ketik kode berikut ke jendela, menekan `Shift-Enter` setelah mengetik baris 1 dan lagi setelah baris 2. Tekan `Enter` setelah baris 3. (Jika Anda menekan `Enter` alih-alih `Shift-Enter` setelah Anda mengetik baris 1 atau baris 2, kode akan berjalan lebih awal dari yang Anda inginkan.)
```
for (i = 0; i <= 10; i++) { // Press Shift-Enter after typing this line.
console.log(i) // Press Shift-Enter after typing this line.
} // Press Enter after typing this line. The numbers 0 to 10 will be printed.
```
## Langkah 12: Daftar proses
**Daftar Proses** menunjukkan semua proses yang sedang berjalan. Anda dapat menghentikan atau bahkan secara paksa menghentikan proses yang tidak ingin Anda jalankan lagi. Untuk melihat bagaimana jendela **Daftar Proses** bekerja, lakukan hal berikut.
1. Tampilkan **Daftar Proses** dengan memilih **Alat**, **Daftar Proses** pada bilah menu.
1. Cari sebuah proses. Di **Daftar Proses**, ketik nama proses.
1. Hentikan atau hentikan paksa proses. Dalam daftar proses, memilih prosesnya, lalu memilih **Bunuh** atau **Bunuh Paksa**.
## Langkah 13: Preferensi
*Preferensi* mencakup pengaturan berikut.
+ Pengaturan untuk lingkungan saat ini saja, seperti apakah akan menggunakan tab lunak di editor, jenis file yang akan diabaikan, dan perilaku penyelesaian kode untuk bahasa seperti PHP dan Python.
+ Pengaturan pengguna Anda di setiap lingkungan Anda, seperti warna, font, dan perilaku editor.
+ Pengikatan tombol Anda, seperti kombinasi kunci pintas yang ingin Anda gunakan untuk bekerja dengan file dan editor.
+ Tema keseluruhan IDE.
Untuk menampilkan preferensi, memilih **AWS Cloud9**, **Preferensi** pada bilah menu. Sesuatu seperti berikut ditampilkan.
## Langkah 14: Terminal
Anda dapat menjalankan satu atau lebih sesi *terminal* dalam IDE. Untuk meluncurkan sesi terminal baru, memilih **Jendela**, **Terminal Baru** pada bilah menu. Atau, memilih ikon "plus" di samping tab konsol tersebut dan memilih **Terminal Baru**.
Anda dapat mencoba menjalankan perintah di terminal. Sebagai contoh, di terminal, ketik `echo $PATH` dan kemudian tekan `Enter` untuk mencetak nilai variabel lingkungan `PATH`.
Anda juga dapat mencoba menjalankan perintah tambahan. Misalnya, coba perintah seperti berikut ini.
+ ** `pwd` ** untuk mencetak path ke direktori saat ini.
+ **`aws --version`**untuk mencetak informasi versi tentang AWS CLI.
+ ** `ls -l` ** untuk mencetak informasi tentang direktori saat ini.
## Langkah 15: Jendela Debugger
Anda dapat menggunakan jendela **Debugger** untuk men-debug kode Anda. Misalnya, Anda dapat melangkah melalui menjalankan kode porsi pada satu waktu, melihat nilai-nilai variabel dari waktu ke waktu, dan menjelajahi tumpukan panggilan.
**catatan**
Prosedur ini mirip dengan [Langkah 2: Tur Basic IDE](tutorials-basic.md#tutorial-tour-ide) dari salah satu [Tutorial IDE basic](tutorials-basic.md).
Untuk menampilkan atau menyembunyikan jendela **Debugger** dan tombol **Debugger**, memilih **Jendela**, **Debugger** pada bilah menu.
Untuk tutorial ini, Anda dapat bereksperimen dengan jendela **Debugger** dan beberapa JavaScript kode dengan melakukan hal berikut.
1. Memeriksa instalasi Node.js di lingkungan Anda dengan menjalankan perintah berikut dalam sesi terminal: **`node --version`**. Jika Node.js diinstal, nomor versi Node.js ditampilkan dalam output, dan Anda dapat melompat ke langkah 3 dalam prosedur ini (“Tulis beberapa JavaScript kode...”).
1. Jika Anda perlu menginstal Node.js, lakukan hal berikut.
1. Jalankan dua perintah berikut, satu per satu, untuk memastikan lingkungan Anda memiliki pembaruan terbaru dan kemudian unduh Node Version Manager (nvm). (nvm adalah skrip shell Bash sederhana yang berguna untuk menginstal dan mengelola versi Node.js. Untuk informasi selengkapnya, lihat [Pengelola Versi Node](https://github.com/creationix/nvm/blob/master/README.md) di GitHub.)
Untuk Amazon Linux:
```
sudo yum -y update
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
```
Untuk Ubuntu Server:
```
sudo apt update
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
```
1. Gunakan editor teks untuk memperbarui file profil shell Anda (misalnya, `~/.bashrc`) untuk mengaktifkan nvm untuk memuat. Misalnya, dalam jendela **Lingkungan** IDE, memilih ikon gear, dan kemudian memilih **Tampilkan Rumah di Favorit**. Ulangi langkah ini dan memilih **Tampilkan File Tersembunyi** juga.
1. Buka file `~/.bashrc`.
1. Ketik atau tempel kode berikut di akhir file untuk mengaktifkan nvm untuk memuat.
Untuk Amazon Linux:
```
export NVM_DIR="/home/ec2-user/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm.
```
Untuk Ubuntu Server:
```
export NVM_DIR="/home/ubuntu/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm.
```
1. Simpan file tersebut.
1. Tutup sesi terminal itu dan mulai yang baru. Kemudian jalankan perintah berikut untuk menginstal versi terbaru Node.js.
```
nvm install node
```
1. Tulis beberapa JavaScript kode untuk di-debug. Sebagai contoh, membuat file, menambahkan kode berikut ke file, dan menyimpannya sebagai `hello.js`.
```
var i;
i = 10;
console.log("Hello!");
console.log("i is " + i);
i += 1;
console.log("i is now " + i);
console.log("Goodbye!");
```
1. Menambahkan beberapa breakpoints ke kode. Misalnya, di selokan, memilih margin di sebelah garis 6 dan 10. Lingkaran merah ditampilkan di samping masing-masing nomor baris ini, sebagai berikut.
1. Sekarang Anda siap untuk men-debug JavaScript kode. Untuk melakukannya, jalankan yang berikut ini.
1. Untuk menampilkan atau menyembunyikan konten jendela **Debugger**, memilih tombol **Debugger**, seperti yang ditunjukkan pada langkah berikutnya.
1. Melihat nilai variabel bernama `i` sementara kode berjalan. Di jendela **Debugger**, untuk **Lihat Ekspresi**, memilih **Ketik ekspresi di sini**. Ketik huruf `i`, lalu tekan `Enter`, sebagai berikut.
1. Mulai menjalankan kode. Memilih **Jalankan**, **Jalankan Dengan**, **Node.js**, sebagai berikut.
1. Kode berhenti berjalan pada baris 6. Jendela **Debugger** menunjukkan nilai `i` di **Lihat Ekspresi**, yang saat ini `10`.
1. Di jendela **Debugger**, memilih **Lanjutkan**, yang merupakan ikon panah biru, seperti berikut.
1. Kode berhenti berjalan pada baris 10. Jendela **Debugger** sekarang menunjukkan nilai `i`, yang saat ini `11`.
1. Memilih **Lanjutkan** lagi. Kode berjalan sampai akhir. Output dicetak ke tab **hello.js** konsol tersebut, sebagai berikut.
Bandingkan hasil Anda dengan berikut.
## Pikiran akhir
**Awas**
Ingatlah bahwa memiliki lingkungan AWS Cloud9 pengembangan dapat mengakibatkan biaya ke AWS akun Anda. Ini termasuk biaya yang mungkin untuk Amazon EC2 jika Anda menggunakan lingkungan EC2. Untuk informasi selengkapnya, lihat [Penetapan Harga Amazon EC2](https://aws.amazon.com/ec2/pricing/).
Ada topik tambahan di bagian induk (*[Bekerja dengan IDE](ide.md)*) yang mungkin ingin Anda jelajahi. Namun, ketika Anda selesai tur AWS Cloud9 IDE dan tidak lagi membutuhkan lingkungan, pastikan untuk menghapusnya dan sumber daya terkait, seperti yang dijelaskan dalam[Menghapus Lingkungan](delete-environment.md).