Setelah tes pena yang cukup berhasil dengan Ember Octane, saya memutuskan (atau lebih tepatnya, kami memutuskan dengan google translate) untuk mengayunkan suci terjemahan tutorial dari panduan resmi Ember.js

Seperti yang akan Anda lihat dari teks, tutorial ini dirancang untuk yang terkecil pemrogram pemula. Yang tidak menghentikannya dari melayani pejuang berpengalaman sebagai titik awal yang bagus untuk menjelajahi kerangka kerja. Untuk bagian penuh game ini Tutorial akan memakan waktu 1-2 jam. Setelah itu, Anda dapat mengevaluasi Ember.js dalam edisi terbaru Octane tanpa harus membaca ulasan tentang kesegaran tahun lalu.

Daftar topik yang dibahas dalam tutorial menyarankan:

• Menggunakan Ember CLI
• Navigasi file aplikasi dan folder Ember
• Buat dan tautkan antara halaman
• Templat dan komponen
• Pengujian Otomatis
• Bekerja dengan data server
• Segmen dinamis dalam rute
• Layanan di Ember
• Perpustakaan Data Ember
• Adaptor dan serialisator
• Pola Komponen Penyedia

Jika Anda setuju bahwa rasanya enak untuk 1-2 jam, selamat datang di kucing!

Dari penerjemah:
Karena Habr tidak dapat menampilkan hbs dengan benar, saya memasukkan gambar. Gunakan teks asli untuk menyalin sisipan kode. Maaf atas ketidaknyamanan ini.

Juga, tutorial asli terdiri dari dua bagian, tetapi karena volume, saya membagi bagian pertama menjadi dua: bagian 1.1 dan bagian 1.2 . Saya berharap bahwa bagian kedua akan diterjemahkan secara keseluruhan dan kemudian saya akan memberikannya bagian penomoran 2. Saya juga berharap bahwa ini tidak akan menyebabkan kebingungan)

Dalam bahasa Rusia tentang Ember, Anda dapat bertanya di saluran telegram ember_js

Entri

Selamat datang di dunia Ember!

Dalam tutorial ini, kita akan menggunakan Ember untuk membuat aplikasi Super Rentals. Ini akan menjadi situs web untuk melihat tempat-tempat menarik untuk tinggal selama liburan Anda berikutnya. Periksa aplikasi yang sudah selesai untuk mendapatkan gambaran tentang ruang lingkup proyek.

Sepanjang jalan, Anda akan mempelajari semua yang perlu Anda ketahui untuk membuat aplikasi Ember dasar. Jika Anda buntu pada suatu saat selama pelajaran, silakan mengunduh sumber untuk contoh kerja yang lengkap.

Pelajaran ini memiliki dua bagian. Bagian pertama mencakup konsep dasar berikut:

• Menggunakan Ember CLI
• Navigasi file aplikasi dan folder Ember
• Buat dan tautkan antara halaman
• Templat dan komponen
• Pengujian Otomatis
• Bekerja dengan data server

Pada bagian kedua dari pelajaran kita akan beralih ke tingkat berikutnya, menggunakan konsep-konsep yang telah kita pelajari.

Generasi proyek baru

Di bagian ini, Anda akan menginstal Ember CLI, menggunakannya untuk membuat proyek Ember baru, dan menambahkan pola dan gaya dasar ke aplikasi baru Anda. Pada akhir bagian itu, Anda akan melihat halaman pendaratan dengan foto Profesor Tomster tersayang:

Dengan membuat halaman ini, Anda akan belajar:

• Instal Ember CLI
• Buat aplikasi Ember baru dengan Ember CLI
• Mulai dan hentikan server pengembangan
• Edit file dan segera lihat hasilnya (live reload)
• Bekerja dengan HTML, CSS, dan sumber daya di aplikasi Ember

Instal Ember CLI

Anda dapat menginstal versi terbaru Ember CLI dengan menjalankan perintah berikut:

 $ npm install -g ember-cli 

Untuk memverifikasi bahwa instalasi Anda berhasil, jalankan:

 $ ember --version ember-cli: 3.15.0 node: 12.8.1 os: linux x64 

Jika nomor versi ditampilkan, Anda siap berangkat.

Membuat Aplikasi Ember Baru Menggunakan Ember CLI

Kita dapat membuat proyek baru menggunakan perintah new Ember CLI. Gunakan pola ember new <project-name> . Dalam kasus kami, nama proyek akan menjadi super-rentals :

 $ ember new super-rentals installing app Ember CLI v3.15.0 Creating a new Ember app in /home/runner/work/super-rentals-tutorial/super-rentals-tutorial/dist/code/super-rentals: create .editorconfig create .ember-cli create .eslintignore create .eslintrc.js create .template-lintrc.js create .travis.yml create .watchmanconfig create README.md create app/app.js create app/components/.gitkeep create app/controllers/.gitkeep create app/helpers/.gitkeep create app/index.html create app/models/.gitkeep create app/router.js create app/routes/.gitkeep create app/styles/app.css create app/templates/application.hbs create config/environment.js create config/optional-features.json create config/targets.js create ember-cli-build.js create .gitignore create package.json create public/robots.txt create testem.js create tests/helpers/.gitkeep create tests/index.html create tests/integration/.gitkeep create tests/test-helper.js create tests/unit/.gitkeep create vendor/.gitkeep Installing packages... This might take a couple of minutes. npm: Installing dependencies ... npm: Installed dependencies Initializing git repository. Git: successfully initialized. Successfully created project super-rentals. Get started by typing: $ cd super-rentals $ npm start Happy coding! 

Tim ini akan membuatkan kami folder baru yang disebut super-rentals . Kita dapat pergi menggunakan cd .

 $ cd super-rentals 

Di sisa tutorial, semua perintah harus dijalankan di folder super-rentals . Folder ini memiliki struktur berikut:

 super-rentals ├── app │ ├── components │ │ └── .gitkeep │ ├── controllers │ │ └── .gitkeep │ ├── helpers │ │ └── .gitkeep │ ├── models │ │ └── .gitkeep │ ├── routes │ │ └── .gitkeep │ ├── styles │ │ └── app.css │ ├── templates │ │ └── application.hbs │ ├── app.js │ ├── index.html │ └── router.js ├── config │ ├── environment.js │ ├── optional-features.json │ └── targets.js ├── public │ └── robots.txt ├── tests │ ├── helpers │ │ └── .gitkeep │ ├── integration │ │ └── .gitkeep │ ├── unit │ │ └── .gitkeep │ ├── index.html │ └── test-helper.js ├── vendor │ └── .gitkeep ├── .editorconfig ├── .ember-cli ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .template-lintrc.js ├── .travis.yml ├── .watchmanconfig ├── README.md ├── ember-cli-build.js ├── package.json ├── package-lock.json └── testem.js 15 directories, 32 files 

Ketika kita melanjutkan pelajaran, kita akan belajar tentang tujuan dari file dan folder ini. Sementara itu, ketahuilah bahwa sebagian besar waktu kita akan bekerja di folder app .

Memulai dan menghentikan server pengembangan

Ember CLI hadir dengan banyak perintah berbeda untuk berbagai tugas pengembangan, seperti perintah ember new kita lihat sebelumnya. Itu juga dilengkapi dengan server pengembangan, yang dapat kita jalankan dengan perintah ember server :

 $ ember server building... Build successful (9761ms) – Serving on http://localhost:4200/ 

Server pengembangan bertanggung jawab untuk mengkompilasi aplikasi kita. Ini juga memiliki server web built-in yang memasok file ke browser. Pengunduhan mungkin memakan waktu. Setelah berfungsi, buka peramban favorit Anda dan buka http://localhost:4200 . Anda akan melihat halaman sambutan berikut:

Zoe menjelaskan:

Alamat localhost di URL berarti bahwa Anda hanya dapat mengakses server pengembangan dari komputer lokal Anda. Jika Anda ingin membagikan karya Anda dengan dunia, Anda harus menyebarkan aplikasi Anda di Internet publik. Kami akan menjelaskan bagaimana melakukan ini di bagian kedua pelajaran.

Anda dapat keluar dari server pengembangan kapan saja dengan mengetikkan Ctrl + C (untuk MacOS Cmd + C ) di jendela terminal tempat ember server berjalan. Yaitu, dengan menekan tombol "C" pada keyboard sambil menahan tombol "Ctrl". Setelah berhenti, Anda dapat memulainya lagi menggunakan perintah ember server sama. Kami menyarankan Anda membuka dua terminal windows: satu untuk memulai server di latar belakang, yang lain untuk memasukkan perintah konsol Ember lainnya.

Pengeditan File dan Live Reload

Server pengembangan memiliki fungsi yang disebut live reload yang memonitor perubahan file di aplikasi Anda, secara otomatis mengkompilasi ulang semuanya, dan memperbarui semua halaman browser yang terbuka. Ini sangat berguna dalam pengembangan, jadi mari kita coba!

Seperti yang ditunjukkan dalam teks pada halaman pembuka, kode sumber untuk halaman tersebut ada di app/templates/application.hbs . Mari kita coba edit file ini dan ganti dengan konten kita sendiri:

Segera setelah menyimpan file, browser Anda akan secara otomatis memperbarui dan mengirim ucapan selamat kami ke seluruh dunia. Hebat!

Setelah Anda selesai bereksperimen, hapus file app/templates/application.hbs . Kami tidak akan membutuhkannya untuk beberapa waktu lagi. Kami akan menambahkannya nanti.

Sekali lagi, jika Anda masih memiliki tab browser terbuka, tab Anda akan secara otomatis menampilkan kembali halaman kosong segera setelah Anda menghapus file. Ini mencerminkan fakta bahwa kita tidak lagi memiliki templat aplikasi dalam aplikasi kita.

Bekerja dengan HTML, CSS, dan aset dalam aplikasi Ember

Buat file app/templates/index.hbs dan rekatkan markup berikut.

Jika Anda berpikir, "Hei, ini seperti HTML!", Maka Anda benar sekali! Dalam bentuknya yang paling sederhana, templat Ember hanyalah HTML. Jika Anda sudah terbiasa dengan HTML, Anda harus merasa betah di sini.

Tentu saja, tidak seperti HTML, templat Ember dapat melakukan lebih dari sekadar menampilkan konten statis. Kami akan segera melihatnya beraksi.

Setelah menyimpan file, tab browser Anda akan secara otomatis diperbarui, menunjukkan kepada kami pesan selamat datang yang baru saja kami kerjakan.

Sebelum melakukan hal lain, mari tambahkan beberapa gaya ke aplikasi kita. Kami menghabiskan cukup banyak waktu untuk melihat layar komputer, jadi kami harus melindungi penglihatan kami dari markup HTML kosong!

Untungnya, desainer kami mengirimi kami beberapa CSS untuk digunakan, sehingga kami dapat mengunggah file stylesheet dan menyalinnya ke app/styles/app.css . File ini memiliki semua gaya yang kita butuhkan untuk membuat sisa aplikasi.

 @import url(https://fonts.googleapis.com/css?family=Lato:300,300italic,400,700,700italic); /** * Base Elements */ * { margin: 0; padding: 0; } body, h1, h2, h3, h4, h5, h6, p, div, span, a, button { font-family: 'Lato', 'Open Sans', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif; line-height: 1.5; } body { background: #f3f3f3; } /* ...snip... */ 

Jika Anda terbiasa dengan CSS, silakan sesuaikan gaya ini sesuai dengan keinginan Anda! Perlu diingat bahwa Anda mungkin melihat beberapa perbedaan visual di masa depan jika Anda memutuskan untuk melakukannya.

Saat Anda siap, simpan file CSS; server pengembangan kami yang andal harus segera mengambilnya dan menyegarkan laman kami. Tidak ada lagi konten HTML telanjang!

Untuk mencocokkan tata letak dari desainer kami, kami juga perlu mengunduh gambar teaching-tomster.png yang mengacu pada file CSS kami:

 .tomster { background: url(../assets/images/teaching-tomster.png); /* ...snip... */ } 

Seperti yang kita pelajari sebelumnya, konvensi Ember adalah menempatkan kode sumber Anda di folder app . Untuk sumber daya lain, seperti gambar dan font, ada folder public . Kami akan mengikuti konvensi ini dengan mengunggah file gambar dan menyimpannya di public/assets/images/teaching-tomster.png .

Baik Ember CLI dan server pengembangan memahami konvensi folder ini dan secara otomatis membuat file-file ini tersedia untuk browser.

Anda dapat mengonfirmasi ini dengan membuka http://localhost:4200/assets/images/teaching-tomster.png . Gambar juga harus ditampilkan pada halaman pembuka yang sedang kami kerjakan. Jika gambar masih tidak muncul selama pembaruan, coba perbarui secara manual sehingga browser mengambil file baru.

Membuat Halaman Aplikasi

Di bagian ini, Anda akan membuat beberapa halaman pertama aplikasi Ember Anda dan membuat tautan di antara mereka. Pada akhir bab ini, Anda harus memiliki dua halaman baru - halaman Tentang Kami dan halaman Kontak. Halaman-halaman ini akan ditautkan ke halaman awal Anda:

Dengan membuat halaman-halaman ini, Anda akan belajar tentang:

• Menentukan Rute
• Menggunakan Pola Rute
• Kustomisasi URL
• Menautkan halaman ke komponen <LinkTo>
• Melewati Argumen dan Atribut ke Komponen

Definisi Rute

Setelah membuat halaman pertama kami, mari kita tambahkan yang lain!

Kali ini kami ingin halaman dihosting di URL /about . Untuk melakukan ini, kami perlu memberi tahu Ember tentang rencana kami untuk menambahkan halaman ke tempat ini. Kalau tidak, Ember akan menganggap bahwa kami mengunjungi URL yang salah!

Tempat untuk mengelola halaman yang dapat diakses adalah router. Buka app/router.js dan buat perubahan berikut:

Ini menambahkan rute bernama "about", yang dilayani secara default di /about URL.

Menggunakan templat rute

Sekarang kita dapat membuat file app/templates/about.hbs dengan konten berikut:

Untuk melihat ini dalam tindakan, buka http://localhost:4200/about .

Jadi halaman kedua kami sudah siap!

Menentukan Rute Menggunakan Jalur Kustom

Kami melanjutkan! Mari kita tambahkan halaman ketiga kami. Kali ini agak berbeda. Semua orang di perusahaan menyebut ini halaman "kontak". Namun, situs web lama yang kami ganti sudah memiliki halaman yang serupa, yang disajikan di URL yang sudah ketinggalan zaman /getting-in-touch .

Kami ingin menyimpan URL yang ada untuk situs web baru, tetapi kami tidak perlu memasukkan semua kode baru! Untungnya, kita bisa melakukan yang lebih baik:

Di sini kami menambahkan rute contact , tetapi secara eksplisit menentukan jalur untuk rute tersebut. Ini memungkinkan kami untuk mempertahankan URL yang usang, tetapi menggunakan nama baru yang lebih pendek untuk rute, serta nama file templat.

Berbicara tentang template, mari kita buat juga. Kami akan menambahkan app/templates/contact.hbs file app/templates/contact.hbs dengan konten:

Ember mematuhi konvensi yang ketat dan pengaturan default yang wajar - jika kita mulai dari awal, kami tidak akan keberatan dengan URL /contact default. Namun, jika pengaturan default tidak berhasil bagi kami, ini bukan masalah. Kami dapat menyesuaikan Ember untuk kebutuhan kami!

Setelah Anda menambahkan rute dan templat di atas, kita harus memiliki halaman baru di alamat http://localhost:4200/getting-in-touch .

Buat navigasi silang pada halaman menggunakan komponen <LinkTo>

Kami berupaya keras untuk membuat halaman-halaman ini, tetapi kami membutuhkan orang untuk menemukannya! Di Internet, hyperlink digunakan untuk ini, atau hanya tautan singkat untuk singkatnya.

Ember menawarkan dukungan luar biasa untuk URL di luar kotak. Kami hanya dapat menautkan halaman kami bersama-sama menggunakan tag <a> dengan href sesuai. Namun, mengklik tautan ini akan membutuhkan browser untuk sepenuhnya menyegarkan halaman, yang berarti harus kembali ke server untuk mendapatkan halaman, dan kemudian mengunduh semuanya dari awal lagi.

Dengan Ember kita bisa berbuat lebih banyak! Alih-alih tag <a> tua yang biasa, Ember menawarkan alternatif untuk <LinkTo> . Sebagai contoh, berikut adalah bagaimana Anda dapat menggunakannya di halaman yang baru saja kami buat:

Mari kita lihat lebih dekat apa yang baru saja kita tambahkan.

<LinkTo> adalah contoh komponen di Ember - Anda dapat membedakannya dari tag HTML biasa karena mereka mulai dengan huruf kapital. Seiring dengan tag HTML biasa, komponen adalah batu bata yang dapat kita gunakan untuk membuat antarmuka pengguna aplikasi.

Nanti kita akan memiliki lebih banyak informasi tentang komponen, tetapi sekarang Anda dapat menganggapnya sebagai cara untuk memberikan tag khusus yang melengkapi tag yang dibangun ke dalam browser.

Bagian @route=... adalah cara kami meneruskan argumen ke komponen. Di sini kita menggunakan argumen ini untuk menunjukkan rute mana yang ingin kita hubungkan. (Perhatikan bahwa ini harus nama rute, bukan jalur, jadi kami tentukan "about" alih-alih "/about" dan "contact" alih-alih "/getting-in-touch" .)

Selain argumen, komponen juga dapat menerima atribut HTML biasa. Dalam contoh kami, kami menambahkan kelas "button" untuk gaya, tetapi kami juga bisa menentukan atribut lain yang kami anggap tepat, seperti atribut role ARIA . Mereka dilewatkan tanpa karakter @ ( class=... tidak seperti @class=... ), jadi Ember akan tahu bahwa mereka adalah atribut HTML biasa.

Di bawah tenda, komponen <LinkTo> menghasilkan bagi kami tag <a> biasa dengan href terkait untuk rute tertentu. Tag <a> ini bekerja sangat baik dengan pembaca layar, dan juga memungkinkan pengguna kami untuk membookmark tautan atau membukanya di tab baru.

Namun, ketika Anda mengklik salah satu tautan khusus ini, Ember akan mencegat klik mouse, menampilkan konten untuk halaman baru dan memperbarui URL - semua ini dilakukan secara lokal, tanpa menunggu server. Ini menghindari penyegaran halaman penuh.

Kita akan belajar lebih banyak tentang bagaimana semua ini bekerja dalam waktu dekat. Sementara itu, silakan dan klik tautan di browser. Pernahkah Anda memperhatikan seberapa cepat transisi ini terjadi?

Selamat, Anda setengah jalan untuk menjadi master halaman!

Pengujian Otomatis

Di bagian ini, Anda akan menggunakan lingkungan uji bawaan Ember untuk menulis beberapa tes otomatis untuk aplikasi Anda. Akibatnya, kami akan memiliki rangkaian uji otomatis yang dapat kami jalankan untuk memastikan aplikasi kami bekerja dengan benar:

Dalam prosesnya, Anda akan belajar tentang:

• Tujuan Pengujian Otomatis
• Tes Penerimaan Tulisan
• Menggunakan Generator di Ember CLI
• Menguji dengan Perpustakaan Tes QUnit
• Bekerja dengan Pembantu uji Ember
• Menguji Praktek Alur Kerja

Tujuan pengujian otomatis

Kami telah mencapai banyak hal! Ringkasnya - kami mulai dari awal, menambahkan beberapa halaman konten, menata segalanya agar terlihat cantik, menambahkan gambar Tomster, menambahkan tautan di antara halaman kami dan, yang mengejutkan, itu berhasil!

Tapi apakah kita benar-benar yakin semuanya benar-benar berfungsi? Tentu saja, kami memanggil sedikit untuk memastikan semuanya terlihat seperti yang diharapkan. Tetapi apakah kami yakin kami memeriksa setiap halaman setelah perubahan terbaru yang kami buat?

Pada akhirnya, sebagian besar dari kita memiliki pengalaman (atau telah mendengar cerita-cerita mengerikan) ketika perubahan kecil di satu area aplikasi secara tidak sengaja merusak sesuatu di bagian lain . Bahkan jika kami tidak mengubah apa pun di sana (dan, karenanya, tidak memeriksa nanti).

Misalkan kita dapat menulis daftar cek dan memeriksanya setelah melakukan perubahan di situs web kami. Tapi tentu saja, ini akan menjadi tidak terkendali ketika kita menambahkan lebih banyak fitur ke aplikasi kita. Itu juga berakhir dengan sangat cepat. Karenanya, tugas berulang seperti itu sebaiknya diserahkan kepada robot.

Hmm, robot. Ini ide! Bagaimana jika kita dapat menulis daftar periksa ini dan membuat komputer memeriksa semuanya untuk kita? Saya pikir kami baru saja menemukan ide pengujian otomatis! Oke, mungkin kita bukan yang pertama kali datang dengan konsep ini, tapi kami secara mandiri menemukannya, jadi kami masih pantas mendapatkan sedikit pujian)

Menggunakan Generator untuk Membuat Tes Penerimaan

Segera setelah kita selesai membelai kepala kita sendiri atau menyelesaikan pai dari rak, kita akan menjalankan perintah berikut di terminal:

 $ ember generate acceptance-test super-rentals installing acceptance-test create tests/acceptance/super-rentals-test.js 

Di Ember CLI, ini disebut perintah generator . Generator secara otomatis membuat file untuk kami berdasarkan konvensi Ember dan mengisinya dengan konten standar yang sesuai, mirip dengan bagaimana ember new dibuat aplikasi kerangka untuk kami. Itu biasanya mengikuti pola ember generate <type> <name> , di mana <type> adalah apa yang kita hasilkan dan <name> adalah apa yang kita ingin menyebutnya.

Dalam hal ini, kami membuat tes penerimaan yang terletak di tests/acceptance/super-rentals-test.js .

Tentu saja, menggunakan generator tidak perlu; kita dapat membuat file sendiri yang akan melakukan hal yang sama. Tetapi generator, tentu saja, menyelamatkan kita dari beban kerja mental yang tidak perlu untuk menemukan folder dan nama yang tepat, serta waktu untuk mengatur konten. Lihatlah file tes penerimaan dan lihat sendiri.

Zoe menjelaskan ...

Ingin lebih berhemat saat mencetak? ember generate ... dapat disingkat menjadi ember g ... Ini 7 karakter kurang! Perintah lain mengikuti logika yang serupa.

Kami menulis tes penerimaan

Tes penerimaan adalah salah satu jenis pengujian otomatis yang kami miliki di Ember. , , , — « , », .

:

URL / (test helper) visit Ember. , http://localhost:4200/ enter .

, , , JavaScript await . , , , .

, , await visit . , , , . , , , , .

URL / , URL URL ( / ). currentURL - currentURL , equal . « » . , , , , .

, <h2> , « Super Rentals!» . , , , .

«About Us» , CSS .jumbo a.button . , , « jumbo <a> button» . HTML .

, . , , await .

, , URL- /about .

...

, QUnit , module , test assert . , click , visit currentURL @ember/test-helpers . , import . , .

, ember test --server ember t -s . , . . http://localhost:7357/ .

, , ( ):

, , , , , , , . , index.hbs , <LinkTo> , , (failing) :

!

, , :

, . . , , - .

. , ( : , ) , , « ».

, . — — , ?

. :

:

• {{yield}}
• {{outlet}}

<LinkTo> . , , — Ember HTML . !

. , "jumbo" . , :

, , . , , , . , .

. — , . app/components/jumbo.hbs «jumbo» :

, ! , <Jumbo> .

...

, , Ember HTML. jumbo.hbs <Jumbo> , , super-awesome.hbs <SuperAwesome> .

{{yield}}

Ember , . HTML-, , , <Jumbo>some content</Jumbo> . {{yield}} , , .

, :

, , … ! , , ! <Jumbo> , - , .

!

.

, , .

, «jumbo» , , . , , . !

, <Jumbo> . :

 $ ember generate component-test jumbo installing component-test create tests/integration/components/jumbo-test.js 

(component test), (rendering test). . , , .

, , :

URL- <Jumbo> . , , , . .

, , , await . , , . , , .

, : .

<NavBar> app/components/nav-bar.hbs :

:

, !

...

<NavBar /> <NavBar></NavBar> . , - , . , Ember !

, , , . , !

? <NavBar> , <Jumbo> . , <NavBar> , , . !

, , <nav> . (accessibility), . , <NavBar> .

!

{{outlet}}

, , . <NavBar> , . . , .

, application.hbs . , , , , . !

, URL-, . , , . , (footer) .

, , , .

{{outlet}} , , {{yield}} , .

! , , . !

1.1 . .

UPDATE: MK1301 .