Prasyarat Langkah 1: Bilah menu Langkah 2: Dasbor Langkah 3: Jendela lingkungan Langkah 4: Editor, tab, dan panel Langkah 5: Konsol Langkah 6: Buka bagian file Langkah 7: Selokan Langkah 8: Bilah status Langkah 9: jendela Garis Besar Langkah 10: jendela Pergi Langkah 11: tab Segera Langkah 12: Daftar proses Langkah 13: Preferensi Langkah 14: Terminal Langkah 15: Jendela Debugger Pikiran akhir

Tur AWS Cloud9 IDE

Topik ini memberikan tur dasar lingkungan pengembangan AWS Cloud9 terintegrasi (IDE). Untuk memanfaatkan sepenuhnya tur ini, ikuti langkah-langkah yang ditunjukkan di bawah ini secara berurutan.

Topik

Prasyarat
Langkah 1: Bilah menu
Langkah 2: Dasbor
Langkah 3: Jendela lingkungan
Langkah 4: Editor, tab, dan panel
Langkah 5: Konsol
Langkah 6: Buka bagian file
Langkah 7: Selokan
Langkah 8: Bilah status
Langkah 9: jendela Garis Besar
Langkah 10: jendela Pergi
Langkah 11: tab Segera
Langkah 12: Daftar proses
Langkah 13: Preferensi
Langkah 14: Terminal
Langkah 15: Jendela Debugger
Pikiran akhir

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 Mulai menggunakan AWS Cloud9. Atau, Anda dapat menjelajahi topik-topik terkait yang terpisah seperti Menyiapkan AWS Cloud9 dan Bekerja dengan lingkungan di AWS Cloud9.

Awas

Memiliki lingkungan AWS Cloud9 pengembangan dapat mengakibatkan biaya ke AWS akun Anda. Ini termasuk kemungkinan biaya untuk Amazon EC2 jika Anda menggunakan EC2 lingkungan. Untuk informasi selengkapnya, lihat EC2Harga Amazon.

Bilah menu, di tepi atasIDE, berisi perintah umum untuk bekerja dengan file dan kode dan mengubah IDE pengaturan. Anda juga dapat melakukan pratinjau dan menjalankan kode dari bilah menu.

Anda dapat menyembunyikan bilah menu dengan memilih panah di tepinya, sebagai berikut.

Menyembunyikan bilah menu di AWS Cloud9 IDE

Anda dapat menampilkan bilah menu lagi dengan memilih panah di tengah tempat bar menu sebelumnya, sebagai berikut.

Menampilkan bilah menu lagi di AWS Cloud9 IDE

Bandingkan hasil Anda dengan berikut.

Menyembunyikan dan menampilkan bilah menu di AWS Cloud9 IDE

Anda dapat menggunakan IDE untuk bekerja dengan satu set file di 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.

Seringkali ada beberapa cara untuk melakukan sesuatu diIDE. 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 denganIDE, jangan ragu untuk bereksperimen dan mencari tahu cara yang paling cocok 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-environmentkartu. Untuk kembali ke dasbor, gunakan tombol kembali peramban web Anda atau breadcrumb navigasi yang disebut Lingkungan.

Untuk membuka lingkungan Anda, pilih Buka IDE di dalam my-demo-environmentkartu. IDE

catatan

Diperlukan beberapa saat IDE untuk 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 Lingkungandan 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.

Menampilkan file tersembunyi menggunakan jendela Lingkungan

Langkah 4: Editor, tab, dan panel

Editor adalah tempat Anda dapat melakukan hal-hal seperti menulis kode, menjalankan sesi terminal, dan mengubah IDE pengaturan. 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.

Tab baru dengan perintah untuk memilih, seperti File Baru

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.

Menampilkan dua panel dengan membelah satu panel menjadi dua baris

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.

Memperluas ukuran tampilan konsol tersebut

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.

Pergi ke nomor baris tertentu menggunakan bilah AWS Cloud9 IDE status

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.

Mengubah preferensi jenis file di bilah AWS Cloud9 IDE status

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 disempurnakan.
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.
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.

Buka tab Segera dengan memilih Jendela, Jendela Segera Baru pada bilah menu.
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.

Tampilkan Daftar Proses dengan memilih Alat, Daftar Proses pada bilah menu.
Cari sebuah proses. Di Daftar Proses, ketik nama proses.
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.

Menampilkan preferensi di AWS Cloud9 IDE

Langkah 14: Terminal

Anda dapat menjalankan satu atau beberapa sesi terminal diIDE. 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 --versionuntuk 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 dasar IDE dari salah satu IDEtutorial dasar.

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.

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...”).
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 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
```
2. Gunakan editor teks untuk memperbarui file profil shell Anda (misalnya, ~/.bashrc) untuk mengaktifkan nvm untuk memuat. Misalnya, di jendela Lingkungan, pilih ikon roda gigiIDE, lalu pilih Tampilkan Beranda di Favorit. Ulangi langkah ini dan memilih Tampilkan File Tersembunyi juga.
3. Buka file ~/.bashrc.
4. 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.
```
5. Simpan file tersebut.
6. Tutup sesi terminal itu dan mulai yang baru. Kemudian jalankan perintah berikut untuk menginstal versi terbaru Node.js.
```
nvm install node
```
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!");
```
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.
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.
2. 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.
3. Mulai menjalankan kode. Memilih Jalankan, Jalankan Dengan, Node.js, sebagai berikut.
4. Kode berhenti berjalan pada baris 6. Jendela Debugger menunjukkan nilai i di Lihat Ekspresi, yang saat ini 10.
5. Di jendela Debugger, memilih Lanjutkan, yang merupakan ikon panah biru, seperti berikut.
6. Kode berhenti berjalan pada baris 10. Jendela Debugger sekarang menunjukkan nilai i, yang saat ini 11.
7. 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 kemungkinan biaya untuk Amazon EC2 jika Anda menggunakan EC2 lingkungan. Untuk informasi selengkapnya, lihat EC2Harga Amazon.

Ada topik tambahan di bagian induk (Bekerja dengan IDE) 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 dalamMenghapus Lingkungan.

Awas Javascript dinonaktifkan atau tidak tersedia di browser Anda.

Untuk menggunakan Dokumentasi AWS, Javascript harus diaktifkan. Lihat halaman Bantuan browser Anda untuk petunjuk.

Konvensi Dokumen

Bekerja dengan IDE

Dukungan bahasa