DE{CODE}: Fitur Baru untuk Atlas

Pembaruan untuk alat pengembangan tanpa kepala Atlas WP Engine akan membantu Anda memenuhi persyaratan terberat klien Anda. Menggunakan akun Sandbox gratis, demo ini akan menunjukkan cara menambahkan fitur baru ini ke situs headless Anda. Lihat video di bawah ini untuk mulai membangun situs web Anda yang paling berkinerja dan aman!

Slide Sesi

Transkrip Teks Lengkap

KELLEN MACE : Hai. Saya Kellen dari tim hubungan pengembang di WP Engine. Dalam pembicaraan ini, kita akan menjelajahi beberapa fitur baru yang menarik di ekosistem Atlas. Kita akan melihat bagaimana di portal pengguna WP Engine, kita dapat membuat aplikasi Atlas baru dan memilih cetak biru portofolio ini. Dengan melakukan itu, kita bisa mendapatkan situs WordPress tanpa kepala yang lengkap langsung di internet dalam hitungan menit.

Kemudian kita akan melihat bagaimana kita dapat mengkloning proyek itu ke mesin lokal kita dan bersiap untuk pengembangan lokal, sehingga kita dapat membuat penyesuaian pada situs baru kita. Kemudian kita akan mengalihkan perhatian kita ke Atlas Content Modeler dan melihat bagaimana kita dapat menggunakannya untuk membuat model konten kustom baru yang disebut Foto.

Dan model konten Foto ini akan memiliki beberapa bidang kustomnya sendiri, termasuk bidang berulang, yang merupakan fitur baru yang baru saja hadir di Atlas Content Modeler. Kemudian terakhir, kita akan melihat bagaimana kita dapat melakukan beberapa pengembangan kustom di aplikasi JavaScript front-end kita dan meminta data Foto kustom tersebut dan kemudian merendernya ke halaman.

Setelah saya membuat akun WP Engine dan masuk ke halaman Atlas portal pengguna, saya dapat melanjutkan dan mengklik tombol Buat Aplikasi Baru. Dari sini, kita bisa mulai dengan cetak biru, yang merupakan situs prebuilt, atau menarik dari repo yang sudah ada. Mari kita mulai dengan cetak biru. Sekarang kita dapat memilih cetak biru mana yang ingin kita gunakan. Jadi kita akan memilih cetak biru Portofolio, lalu klik Lanjutkan.

Langkah selanjutnya adalah menghubungkan aplikasi ini ke GitHub. Jadi kami akan mengklik tombol untuk melakukannya, lalu masuk ke GitHub. Dan setelah itu, kita akan melihat layar ini, yang menunjukkan bahwa aplikasi kita telah diotorisasi. Jadi selanjutnya, kita perlu mengkloning repo ini. Jadi kita akan klik Clone Blueprint, lalu beri nama untuk repositori baru kita. Dan klik tombol untuk membuat repo baru menggunakan template cetak biru ini.

Jadi di sini Anda dapat melihat bahwa repo aplikasi baru ini telah dibuat di akun GitHub saya. Sekarang kita perlu menautkan repo ini ke aplikasi Atlas kita. Jadi kembali ke portal pengguna, kami akan menggulir ke bawah ke bagian Repositori yang Dipilih. Jika Anda mengizinkan akses ke semua repo Anda, Anda dapat melihatnya di daftar. Jika tidak, Anda dapat mengklik Kelola Repositori.

Di halaman ini, Anda dapat memilih repo yang harus dapat diakses oleh Atlas. Jadi kami akan memilih repo kami di daftar. Klik Simpan, dan sekarang ketika kita kembali ke panel pengguna, kita akan melihat repo yang telah kita tambahkan muncul di daftar. Jadi lanjutkan dan pilih itu. Untuk wilayah untuk aplikasi kami, kami akan tetap menggunakan US Central. Dan terakhir, klik tombol untuk membuat aplikasi Atlas ini.

Di sini, kita akan melihat notifikasi bahwa aplikasi kita sekarang sedang dibuat. Jadi kami akan memberikannya sebentar. Sekarang setelah aplikasi Atlas kita selesai dibuat, kita dapat melanjutkan dan mengeklik tautan URL Atlas ini untuk melihat aplikasi Atlas baru kita berjalan langsung di internet. Jadi di halaman beranda, kita akan melihat daftar postingan terbaru kita. Kita lihat testimoni kita.

Kami dapat membuka halaman portofolio dan melihat daftar proyek portofolio kami di sini. Saya akan mengklik ke proyek individu. Selanjutnya, kita akan memeriksa blog. Jadi pergilah ke halaman blog dan lihat kotak posting kami di sini. Dan kita juga dapat mengklik untuk melihat halaman posting blog individual. Dan kemudian siap, atur, klik, untuk kembali ke beranda kami.

Jadi, Anda mungkin memperhatikan bahwa transisi halaman ini sangat cepat. Kami mendapatkan potongan langsung dari satu halaman ke halaman lainnya. Dan ini adalah salah satu keuntungan menggunakan arsitektur WordPress tanpa kepala. Selanjutnya, mari kita lihat situs WordPress yang ada di balik layar yang mendukung pengalaman ini. Jadi mari kembali ke portal pengguna WP Engine, dan dari sini kita dapat mengklik tautan ini ke lingkungan WordPress yang ditautkan.

Di sini kita dapat mengklik WP Admin untuk dikirim ke admin WordPress untuk situs kita. Jadi, inilah bagian belakang kami yang mendukung pengalaman ini. Mari menuju ke posting, dan kita dapat melihat di sini bahwa itu telah diisi sebelumnya dengan sejumlah posting blog tiruan. Jadi dari sinilah semua data itu berasal untuk situs baru kami. Mari kita lihat juga plugin. Di sini Anda dapat melihat beberapa plugin telah diinstal dan diaktifkan untuk mengaktifkan pengembangan WordPress tanpa kepala.

Mari beri perhatian khusus pada Atlas Content Modeler. Jadi di sidebar, kita klik Content Modeler. Anda dapat melihat di sini bahwa dua konten khusus telah dibuat untuk kami, proyek dan testimonial. Dan kita bisa melihatnya di sini di sidebar. Jadi kami memiliki proyek, daftarnya, serta testimonial, dan daftarnya. Jadi dari sinilah proyek dan data testimonial yang kami lihat di situs front end berasal.

Jadi kami telah membuat beberapa kemajuan besar. Kami telah melihat bagaimana dari portal pengguna kami dapat membuat aplikasi Atlas baru. Dan ketika kami melakukan itu, itu tidak hanya membuat aplikasi JavaScript front-end untuk melayani halaman situs Anda, tetapi juga menciptakan back end WordPress yang mendukung pengalaman itu dan menyelamatkan Anda dari masalah menghubungkan keduanya. Ini menghubungkan keduanya sehingga aplikasi front-end dapat mengambil datanya dari backend WordPress.

Dari sana kami dapat melihat aplikasi front-end dan melihatnya berjalan langsung online, serta melihat-lihat admin WordPress dan melihat beberapa tipe data khusus atau model data dan juga beberapa data dummy itu telah diciptakan untuk kita. Jadi dalam waktu yang sangat singkat, Anda dapat melihat bahwa kami memiliki aplikasi WordPress tanpa kepala yang berfungsi penuh dan sedang berjalan sekarang.

Namun, bagaimana jika saat ini kita ingin melakukan perubahan? Bagaimana jika Anda sedang membangun situs portofolio yang sebenarnya, dan Anda berpikir sendiri, ini sangat keren. Ini awal yang bagus. Tapi sekarang saya ingin membuat beberapa perubahan. Saya ingin membuat beberapa perubahan kode untuk mengganti beberapa warna atau menambahkan halaman tambahan ke situs saya. Bagaimana aku melakukan itu? Bagaimana cara memulai pengembangan lokal? Mari kita cari tahu selanjutnya.

Untuk memulai, kami akan menyalin tautan ke repo GitHub kami dan kemudian melanjutkan dan menjalankan git clone pada baris perintah untuk mengkloning proyek kami. Dari sini, kita dapat memasukkan CD ke direktori proyek tersebut, lalu menjalankan instalasi NPM untuk menginstal dependensi proyek kita. Setelah selesai, kita akan melanjutkan dan membuka proyek di editor kode.

Selanjutnya, kita perlu menyiapkan beberapa variabel lingkungan. Jadi Anda akan melihat bahwa file contoh telah dibuat untuk kita di sini. Dan sekarang kita hanya perlu memastikan ini memiliki nilai yang benar. Jadi kembali ke portal pengguna, kita akan mengklik Kelola Variabel dan kemudian melihat variabel lingkungan yang digunakan aplikasi produksi. Lanjutkan dan salin dan tempel keduanya ke dalam aplikasi kita sehingga aplikasi lokal kita akan menggunakan variabel lingkungan yang sama dengan produksi.

Dan langkah terakhir di sini adalah mengganti nama file ini, menghapus .sample dari ujungnya agar berlaku. Sekarang, aplikasi front-end yang sedang kita kerjakan di sini dibangun di atas Faust.js. Dan Faust, untuk melakukan keajaiban pengambilan data yang dilakukannya, harus dapat menjalankan apa yang disebut kueri introspeksi GraphQL.

Jadi ini pada dasarnya adalah Faust yang menanyakan ujung belakang WordPress, hei, data apa yang Anda miliki dalam skema GraphQL untuk saya tanyakan? Jadi kita harus mengaktifkan introspeksi agar ini berfungsi. Kami akan kembali ke admin WordPress di sini dan pergi ke GraphQL dan kemudian pengaturan di sidebar.

Pada halaman Pengaturan, kami akan menggulir ke bawah ke tempat kami melihat Aktifkan Introspeksi Publik, dan lanjutkan dan klik kotak itu. Sementara kami di sini, saya sarankan juga mengaktifkan Mode Debug Grafis. Itu akan memberi Anda lebih banyak pesan debug deskriptif yang muncul. Setelah kami selesai melakukannya, kami dapat melanjutkan dan mengklik tombol untuk menyimpan perubahan kami. Dan sekarang akhirnya kita dapat membuka terminal dan menjalankan NPM run generate. Dan setelah itu selesai, akhirnya, NPM menjalankan dev untuk mengaktifkan dan menjalankan aplikasi kita secara lokal.

Sekarang, saya akan mengklik link 3.000 localhost ini, dan kita dapat melihat bahwa situs kita benar-benar berjalan secara lokal di sini. Jadi kami mengatakan bahwa kami ingin menambahkan beberapa konten untuk menyesuaikan situs kami. Dan sekarang kami siap untuk pengembangan lokal, kami dapat melakukan hal itu. Jadi katakanlah untuk proyek ini, kami ingin memiliki tidak hanya posting blog dan kemudian beberapa konten khusus yang kami miliki, seperti proyek portofolio yang kami lihat dan juga testimonial ini.

Di luar konten khusus itu, katakanlah kami ingin menambahkan lebih banyak lagi. Di luar seseorang yang membuat posting blog dan membuat proyek portofolio, katakanlah klien situs itu juga seorang fotografer, dan mereka ingin menampilkan foto yang telah mereka ambil. Bagaimana kami dapat menambahkan jenis konten khusus atau model konten khusus ke situs kami untuk mendukung data foto ini, memintanya, dan kemudian menampilkan foto di aplikasi ujung depan kami? Mari kita lakukan selanjutnya.

Jadi saya akan kembali ke admin WordPress di sini, dan kita akan menuju ke Content Modeler. Jadi kami pernah ke layar sekali sebelumnya. Kami melirik proyek dan testimonial. Kita dapat melihat bahwa ini adalah model konten khusus yang telah dibuat untuk kita sebagai bagian dari cetak biru ini. Dan saya dapat mengklik masing-masing dari ini dan melihat bahwa masing-masing model ini memiliki kumpulan bidang masing-masing.

Jadi proyek, misalnya, akan memiliki bidang individual ini. Dan proyek serta testimoni keduanya tercermin di sini di sidebar. Dan kemudian bidang untuk masing-masing. Jika saya mengklik sebuah proyek, lalu mengklik yang sudah ada atau pergi ke Tambah Baru, kita akan melihat semua bidang tersebut tercermin di sini. Jadi pembuat konten kami akan melihat semua bidang yang mereka perlukan untuk memasukkan data ini. Baiklah.

Namun, untuk konten khusus kami, kami memerlukan model baru. Jadi saya akan melanjutkan dan membuat model baru dengan mengklik tombol ini di sini. Jadi saya akan memanggil foto ini. Dan untuk nama jamak, kami hanya akan menempatkan S di akhir dan menyebutnya foto. Pengidentifikasi API yang dibuat secara otomatis ini– di sini, ID ini– saya setuju. Foto terlihat bagus untuk saya. Untuk visibilitas API, yang ini kami ingin memastikan untuk mengklik publik, karena kami ingin dapat meminta data ini melalui GraphQL. Untuk ikon model kita, mungkin sesuatu seperti kamera cocok untuk foto. Dan sekarang saya akan mengklik Buat.

Jadi begitu saja, model konten foto kami telah dibuat. Jadi pada titik ini, dikatakan pilih bidang pertama Anda untuk model konten. Dan pada rekaman ini, ini adalah jenis bidang yang didukung oleh Atlas Content Modeler. Untuk foto yang ingin kami tampilkan di situs ini, mari gunakan beberapa di antaranya.

Katakanlah kita akan memberi judul pada setiap foto kita. Jadi saya akan mengatakan Judul, dan kemudian menyebutnya Judul Foto sebagai pengidentifikasi API. Dan begitulah cara itu akan tersedia dalam skema GraphQL. Untuk itulah. Dan kami akan mengatakan kami ingin menggunakan ini sebagai judul entri. Dan teks baris tunggal baik-baik saja. Jadi lanjutkan dan klik Buat.

Untuk bidang kita selanjutnya, katakanlah kita ingin mengambil gambar itu sendiri untuk foto. Jadi saya akan memukul plus. Dan di sini, kita akan membuat field baru. Kami akan menyebutnya gambar yang satu ini. Dan untuk jenisnya, sebenarnya kita harus memilih Media, karena itu akan berupa foto. Jadi saya beri nama image. Dan kemudian di sini, saya akan melanjutkan dan menetapkan ini sebagai gambar unggulan untuk setiap posting. Jadi saya akan klik itu, dan kami akan membuatnya diperlukan juga. Jadi kita selalu tahu itu akan ada di sana. Dan kemudian klik Buat.

Ini dia. Ada bidang kedua kami. Untuk yang ketiga, mari kita deskripsikan. Jadi saya akan memukul plus. Dan untuk yang satu ini, ini akan menjadi bidang teks yang kaya. Jadi kami akan mengatakan deskripsi dan itu akan melakukannya untuk bidang itu. Dan kemudian yang terakhir kami inginkan adalah untuk mata pelajaran. Jadi kami akan menggunakan bidang ini untuk menangkap apa yang ditampilkan di foto. Jadi kalau itu adalah foto pegunungan saat matahari terbenam, misalnya seperti salah satu foto kita nanti, beberapa subjek di foto itu mungkin gunung, bintang, langit, hal-hal seperti itu. Hanya daftar hal-hal yang ada di foto.

Akan ada berbagai cara untuk menyimpan data ini. Anda dapat membuat taksonomi khusus, misalnya, dan kemudian menetapkan istilah untuk masing-masing hal tersebut. Jadi masing-masing foto ini bisa memiliki satu istilah atau lebih. Itu akan menjadi salah satu cara untuk melakukannya. Katakanlah untuk tujuan kita, kita tidak tertarik untuk dapat mengelompokkan foto berdasarkan sesuatu seperti tag seperti itu atau taksonomi.

Sebaliknya, daftar ini benar-benar hanya untuk tujuan tampilan di situs. Soalnya kalau di sini kita tekan plusnya, kita jadikan text field, nah, kita cuma dapat salah satunya kan? Dan bagaimana jika ada lebih banyak? Sebelumnya kita tidak tahu berapa banyak subjek yang mungkin dimiliki oleh foto tertentu, bukan? Dan di situlah fitur bidang berulang ACM sangat berguna. Jadi mari kita lihat seperti apa bentuknya.

Saya akan menjadikan ini bidang teks di sini, dan kami akan menamainya subjek. Dan kemudian buat bidang ini berulang. Jadi ini kuncinya. Kami akan melanjutkan dan klik itu. Dan kami akan menyimpannya sebagai bidang teks satu baris, dan tekan Buat. Jadi begitu saja, model konten foto kami di sini sekarang telah dibuat. Dan kita bisa melihatnya di sidebar.

Jadi jika saya mengklik di sini pada Foto, kita akan melihat bahwa saya memiliki satu tiruan yang saya buat sebelumnya di sini. Namun jika kita membuat Add New, Anda akan melihat bahwa ini mencerminkan– bidang di sini mencerminkan apa yang telah kita tambahkan di model konten. Jadi kita mendapatkan gelar. Kami mendapat kesempatan untuk melampirkan gambar. Kami memiliki bidang teks kaya untuk deskripsi foto, dan bidang berulang di sini untuk menambahkan satu atau lebih subjek.

Jadi mari kita lihat apa yang bisa kita lakukan di sini. Saya akan mengklik Tambahkan Gambar Unggulan. Dan saya akan memilih satu dari mesin saya. Mari kita lihat. Dan setelah selesai mengunggah, kami akan memberikannya beberapa teks alternatif. Kami akan mengatakan, bunga putih, seperti itu, dan selesai. Jadi ada gambar kita. Mari kita kembali dan beri judul sekarang. Kami akan mengatakan bunga putih dengan bokeh. Seperti itu. Untuk deskripsi, kami akan mengatakan ini adalah bidikan bagus dari beberapa bunga putih yang cantik. Seperti itu.

Dan sekarang untuk subjek kita, kita bisa bertanya pada diri sendiri, apa yang ada di foto ini? Dan mungkin kita bisa– bunga bisa jadi satu. Klik Tambahkan Barang. Dan efek bokeh itu, dengan latar belakang buram, juga ada. Dan batang atau dahan pohon, saya kira, akan dibidik, sebagai contoh lainnya. Jadi kami akan menambahkan beberapa di sini. Dan jika kami merasa telah menangkap semuanya, Anda dapat melanjutkan dan menekan Publikasikan. Jadi begitulah.

Dan kemudian kembali ke foto, saya sebelumnya telah membuat yang ini. Pegunungan itu keren. Harus diatur seperti itu. Jadi Anda mendapatkan foto pegunungan. Dan inilah bidikan bagus dari pegunungan dengan gunung, bintang, bayangan. Beberapa mata pelajaran yang dimilikinya. Jadi itu akan memberi kita setidaknya beberapa posting untuk dikerjakan di aplikasi front-end kita.

Jadi pada titik ini, kami telah membuat model konten kami di ujung belakang WordPress untuk menyimpan data yang kami butuhkan untuk foto-foto ini, dan kami telah membuat dua kiriman foto baru untuk kami gunakan untuk mencoba menggunakannya di aplikasi ujung depan kami. Dan selanjutnya, Anda mungkin bertanya-tanya, bagaimana kita akan menarik data ini dari WordPress sehingga kita dapat menggunakannya di aplikasi front-end kita?

Ada fitur yang sangat keren yang dipamerkan Atlas Content Modeler untuk membuatnya sangat mudah. Jadi saya akan kembali ke Content Modeler di sini dan menemukan model foto kita, dan mengklik ikon titik elipsis kecil di sini. Dan saya akan membuka Open in Graphical. Jadi segera setelah saya mengklik ini, itu akan membuat kueri untuk saya yang menyertakan model konten yang kami buat ini, foto.

Dan itu mengambil 10 yang pertama, dan kemudian menyertakan fragmen GraphQL di bawah ini yang memiliki semua bidang yang telah kami buat, termasuk yang khusus. Jadi jika Anda perhatikan, kami menambahkan judul foto, kami memiliki gambar kami, kami memiliki deskripsi, dan kemudian subjeknya. Jadi ini sangat berguna untuk melihat seperti apa data ini dalam skema GraphQL. Jadi lanjutkan dan tekan tombol ini untuk menjalankan kueri ini.

Dan Anda dapat melihat apa yang akan didapatkan kembali oleh aplikasi JavaScript front-end kami jika menjalankan kueri GraphQL yang sama persis. Itu akan mendapatkan kembali foto. Dan di dalamnya akan ada objek yang disebut array, disebut node. Dan di dalam array itu akan ada objek yang terlihat seperti ini. Masing-masing foto ini akan memiliki judul, gambar, dan selanjutnya, deskripsi dan subjek juga.

Jadi inilah yang kita butuhkan. Jadi kita akan menggunakan beberapa bidang ini sekarang. Jadi kami baik-baik saja, dalam hal ujung belakang WordPress kami dan kemampuan untuk menyimpan dan juga memaparkan data foto ini. Jadi sekarang mari kita lihat bagaimana kita bisa menggunakan ini di aplikasi JavaScript front-end kita.

Jadi kita akan kembali ke sana. Dan menurut saya titik awal yang baik untuk ini adalah dengan melihat halaman Portofolio, yang merupakan daftar proyek, bukan? Karena itu adalah daftar posting model konten khusus, dan juga foto, kedua halaman tersebut memiliki banyak kesamaan. Jadi kita bisa menggunakannya sebagai semacam titik awal.

Jadi saya akan mengklik Portofolio di sini, dan hanya untuk mengingatkan diri kita seperti apa tampilannya. Dan begitulah, di mana kami mendapatkan daftar proyek portofolio ini. Jadi mari kita buka kodenya sekarang dan buat tangan kita sedikit kotor. Kami akan melacak halaman ini, yang merupakan proyek garis miring itu, dan melihat bagaimana ini dibangun.

Jadi di dalam Sumber, saya akan membuka Halaman. Dan kemudian saya akan menemukan Project. Itu ada. Dan buka file index.js di dalamnya. Jadi gulir ke bawah sedikit, dan kita akan melihat bahwa hook pagination node sedang digunakan. Dan ini adalah hook React yang berasal dari lokasi ini di sini, di dalam folder Hooks. Dan di dalamnya, kami memanggil query.projects.

Dan query.projects akan memungkinkan kita untuk mengakses data tentang jenis pos kustom proyek kita, alias model konten proyek yang telah kita buat. Jadi kita akan memanggil query.projects dan kemudian meneruskan beberapa bidang yang ingin kita proses sebelumnya, sehingga segera setelah halaman dimuat. Jadi itulah array ini di sini. Jadi bidang-bidang itu ada di halaman pertama yang dimuat.

Dan setelah kita benar-benar siap merender konten halaman ini, kita akan melakukannya. Kami memiliki komponen SEO, header, dan footer di bagian bawah. Dan kemudian bagian utama halaman di sini ada di dalam tag utama ini, di mana kita memiliki header, yang merupakan bagian biru yang ditarik. Dan kemudian div pembungkus dengan daftar proyek kita di dalamnya. Dan juga komponen Muat Lebih Banyak ini, yang menghasilkan tombol Muat Lebih Banyak di bagian bawah, yang dapat saya klik. Dan kemudian mengambil lebih banyak proyek dan memasukkannya ke UI.

Jadi begitulah halaman itu dibangun. Dan seperti yang saya katakan, saya suka menggunakan ini sebagai titik awal bagi kita. Jadi mari lanjutkan dan salin seluruh file ini, dan kita akan meniru struktur file ini di sini. Jadi di dalam Pages, kita akan membuat Foto. Dan kemudian di dalam folder itu, kita akan membuat file index.js. Baiklah. Dan di file baru ini, saya akan menempelkan isinya. Tapi kami akan mengubah beberapa hal, karena kami tidak tertarik dengan data proyek untuk ini, kami menginginkan data foto kami. Jadi mari kita lihat bagaimana kita bisa melakukannya.

Jadi nama konstanta ini adalah proyek referensi. Jadi mari lanjutkan dan ganti nama itu sebagai langkah pertama. Kita dapat mengatakan bidang pre-pass node foto. Jadi itu akan bagus. Kami harus menyediakan daftar bidang kami sendiri. Mungkin kami akan meninggalkan ID basis data untuk saat ini, dan kemudian kami akan menambahkan beberapa saat lagi.

Lebih jauh ke bawah, mari kita lihat. Pra-pass foto. Oh, namanya kacau. Di sana kita pergi. Jadi sekarang mereka cocok lagi. Baiklah. Alih-alih query.projects, ingat, kami ingin query.photos untuk jenis konten khusus kami. Jadi lanjutkan dan perbarui itu menjadi foto, di sana. Gulir ke bawah sedikit.

Jadi komponen proyek ini, ini tidak akan berlaku lagi, karena kami tidak menggunakannya. Jadi saya akan menghapusnya pada saat ini dan bagaimana dengan ini? Kami hanya akan memiliki– kami hanya akan H1. Dikatakan Halo, hanya untuk mendapatkan sesuatu yang dirender di halaman di sini. Dan mungkin kami akan berkomentar memuat lebih banyak juga.

Jadi saya akan menjalankan pencarian proyek untuk melihat apakah ada sesuatu yang saya lupa. Ya, hanya beberapa komentar kode dan kemudian komponen ini ditarik masuk yang tidak kita gunakan lagi. Jadi saya akan menghapus komponen itu. Dan saya pikir kita harus baik. Jadi kami tidak menggunakan beberapa dari hal-hal ini pada saat ini, tapi tidak apa-apa. Kami akan sebentar lagi.

Jadi saya akan memberikan ini Simpan, dan kami akan melihat apakah kami bisa mendapatkan rendering itu. Jadi sekarang di aplikasi front-end kita, saya seharusnya bisa membuka Photo, seperti ini. Dan begitulah. Jadi inilah halaman baru kami. Itu menyapa, dan sebagian besar terlihat sama dengan halaman proyek portofolio kami, seperti header di bagian atas dan footer.

Saya perhatikan masih tertulis portofolio, dan kami mungkin ingin menukarnya. Jadi kita bisa melakukannya secara singkat. Jadi, inilah portofolio. Kami akan mengatakan foto. Dan juga di tempat ini, kita akan mengubahnya menjadi foto. Simpan itu. Di sana kita pergi. Sehingga memperbarui header.

Sekarang mari selami bagaimana kita sebenarnya bisa menggunakan data itu, ambil data foto kita dan tampilkan daftarnya di sini. Jadi di mana kita mulai dengan itu? Seperti yang kita lihat di GraphQL– atau di admin WordPress di sini, kira-kira seperti inilah kueri kita. Ini akan memiliki bidang ini. Jadi mari kita lakukan itu. Jadi judul foto adalah bidang khusus. Tapi sebenarnya, karena kita menetapkan bidang ini sebagai judul posting, kita bisa menggunakan judul, karena itu akan menjadi– judul posting akan sama dengan bidang kustom dengan nama ini. Jadi kita hanya bisa menggunakan itu.

Jadi dalam array ini, kita tidak hanya akan membuat ID database, tetapi kita akan mendapatkan judul untuk foto, gambar, deskripsi, dan subjek kita. Jadi mari kita tambahkan itu juga. Gambar, deskripsi, lalu subjek. Baiklah. Anda akan membutuhkan koma di bagian akhir. Di sana kita pergi. Jadi saya pikir itu semua bidang kami yang ingin kami sediakan tepat saat halaman berakhir. Jadi itu terlihat bagus untukku.

Dan mari kita uji apakah kita benar-benar bisa mendapatkan beberapa rendering data di sini. Jadi di bawah Hello H1 yang kita miliki, mari kita lakukan ini. Kami akan melakukan JSON.stringify, dan kemudian kami akan menyampaikan sesuatu itu. Jadi kami akan melakukan data di sini, dan melihat apakah kami bisa mendapatkan rendering data ke halaman kami.

Jadi saya akan menyimpannya, dan kami akan kembali ke ujung depan kami. Dan itu dia, tentu saja. Jadi seperti inilah tampilan datanya. Anda dapat melihat kami berhasil mengambilnya dari bagian belakang WordPress kami. Kami memiliki array node ini, dan kemudian di dalam objek itu mewakili setiap foto individu kami dan persis data yang kami minta kembali, termasuk masing-masing nilai individu untuk bidang subjek berulang kami di sini.

Jadi ini bagus. Inilah yang kita butuhkan. Mari kita buat sedikit lebih bersih– yah, jauh lebih bersih, saya kira, daripada hanya memuntahkan data di halaman seperti ini. Alih-alih hanya pra tag ini di sini, mari petakan setiap potongan data kita dan buat kartu di halaman untuk ini.

Jadi satu hal yang ingin saya lakukan adalah sebelum kita berasumsi bahwa kita memiliki posting untuk dirender, kita harus memperhitungkan kasus yang mungkin tidak ada, bukan? Jadi satu hal yang ingin saya lakukan adalah di bagian atas komponen saya, saya memiliki foto, kira-kira seperti itu. Dan kemudian saya melakukan data.nodes.length seperti itu. Dan kami akan membuat tanda tanya untuk rangkaian opsional, karena kami belum tahu apakah data akan ada.

Dan kemudian kita akan mentransmisikan ini ke Boolean seperti itu. Jadi itu berarti jika kita gagal pada titik ini dan data tidak ditentukan, ini akan dianggap salah. Kami akan mengatakan, kami tidak memiliki foto untuk dirender. Jika tidak, jika kita dapat menelusuri sampai ke panjang array ini, itu akan menjadi nol, jika tidak ada tulisan, atau satu atau lebih. Jadi jika kita memasukkan bilangan bulat itu ke Boolean, itu akan memberi tahu kita apakah kita memiliki foto atau tidak. Jadi jika nol, ini akan salah. Jika satu atau lebih, havePhotos akan benar.

Sehingga dengan pengetahuan tersebut, maka kita dapat melakukan beberapa pengambilan keputusan di dalam komponen kita disini. Jadi mari kita cari tahu bagaimana kita bisa melakukannya. Jadi menurut saya, jika kita memiliki foto, maka kita ingin merender satu hal. Kami akan mengatakan– mari kita lihat. Kami ingin melakukan data.photos dan kemudian kami akan memetakannya. Jadi untuk setiap foto, kami akan merender sesuatu.

Jadi mari kita kembalikan sesuatu yang mudah pada awalnya. Kami akan mengembalikan– mari kita lihat. Kami akan membuat H2, bagaimana, karena ini akan menjadi seperti salah satu kartu kami. Dan kemudian kita akan mengatakan photo.title seperti itu. Baiklah. Jadi kami akan memetakan setiap foto kami. Dan untuk masing-masing, kami akan mengembalikan H2 dengan judul foto itu. Baiklah.

Jadi semua ini yang kita inginkan jika kita benar-benar memiliki foto untuk dirender. Tapi bagaimana dengan alternatifnya, jika kita tidak melakukannya? Jadi kita akan memiliki klausa lain di sini, dan mari membuat sesuatu yang lain. Bagaimana dengan paragraf. Dan kami akan mengatakan, tidak ada foto untuk ditampilkan. Jadi sekarang jika kita menyimpannya, ini dia. Jadi sekarang kita sedang merender judul posting kita di sini.

Jadi mari kita buat fitur ini sedikit lebih lengkap di sini. Kami akan mengatakan kami ingin mengembalikan sesuatu yang lain. Baiklah. Dan untuk masing-masing ini, saya akan menyalin hanya beberapa gaya, beberapa gaya sebaris yang saya tulis sebelumnya di sini, hanya untuk menghemat waktu kita mengetiknya. Jadi saya akan memiliki div pembungkus itu. Dan kemudian di dalamnya, kita dapat mengembalikan H2 yang kita miliki. Jadi saya akan menempelkan H2 dengan judul.

Setelah judul, bagaimana kalau kita tunjukkan deskripsinya. Kita bisa melakukan itu selanjutnya. Jadi itu akan menjadi foto.deskripsi, seperti itu. Tapi kita tidak bisa merendernya sendiri, seperti di dalam container, misalnya, seperti ini. Jika kami mencoba melakukan ini, ini tidak akan berhasil bagi kami, karena HTML tidak akan di-escape. Jadi jika saya menyimpannya, Anda dapat melihat sekarang kami memiliki HTML yang lolos ditampilkan di halaman, yang bukan itu yang kami inginkan.

Jadi React memiliki utilitas untuk bekerja dengan HTML yang aman dan tidak perlu di-escape seperti ini. Dan itu menggunakan div lalu dengan berbahayaSetInnerHTML seperti itu. Dan Anda dapat meneruskannya ke objek di mana satu properti adalah HTML garis bawah ganda.

Dan kemudian nilai yang Anda berikan adalah hal yang ingin Anda render tanpa melarikan diri. Jadi bagi kami, itu foto.deskripsi, begitu saja. Dan kemudian div ini bisa berpakaian sendiri. Baiklah. Jadi sekarang saya akan memberikan yang menyimpan. Kita lihat apa yang kita dapatkan. Dingin. Jadi sekarang HTML kita tidak lolos lagi. Jadi itu terlihat bagus untukku.

Jadi ini bagus. Bagaimana dengan gambar unggulan itu? Apa yang bisa kita lakukan adalah menulis ini dari awal. Kami dapat mengambil URL gambar unggulan dan memiliki tag gambar dan meneruskannya sebagai URL. Dan kemudian browser akan merender gambar dan mengarahkannya ke sumber itu.

Namun, proyek ini, jika Anda menggali basis kode cetak biru ini, sebenarnya memiliki komponen prebuilt persis untuk tujuan ini yang disebut gambar fitur. Jadi bagi kami itu akan sempurna untuk kami gunakan. Jadi saya akan menggulir sedikit ke tempat kami mengimpor banyak komponen berbeda dari direktori komponen kami. Dan saya akan memberi tag satu sampai akhir di sini disebut gambar unggulan, begitu saja. Jadi sekarang kita bisa merender gambar fitur kita dimanapun kita mau.

Tepat di bawah div ini dengan deskripsi foto kita, kita akan merender gambar unggulan kita. Dan ini membutuhkan penyangga gambar. Dan yang perlu kita sampaikan di sini adalah keseluruhan node untuk gambar ini. Jadi bagi kami, itu akan menjadi photo.feauredimage.node, begitu saja. Dan saya pikir itu seharusnya berhasil untuk citra kita. Jadi saya akan menyimpannya, dan tentu saja, ini dia. Jadi setelah halaman kami dimuat ulang di sini, sekarang kami memiliki judul kami, deskripsi kami, dan kemudian foto itu sendiri ditampilkan. Dan juga, untuk foto kami berikutnya, gambar itu ditampilkan di daftar.

Jadi ini keren. Kami membuat kemajuan besar. Hal terakhir adalah menjaga bidang berulang kami untuk subjek yang ada di foto. Jadi yang akan saya lakukan adalah membuat paragraf di sini dan menutupnya. Dan kemudian di dalam tag paragraf ini, kita dapat membuka beberapa keriting dan melakukan photo.subjects yang sama. Tapi sekarang kita akan membahas ujungnya bergabung. Dan kami akan memberi tahu [TIDAK TERDENGAR] kami ingin menggabungkannya dengan koma, spasi, begitu saja. Dan saya akan memberikan itu simpanan.

Saat hot reload kami terjadi, saya seharusnya bisa menggulir ke bawah. Dan benar saja, ini dia. Jadi mereka ditampilkan dalam daftar. Pengguna mungkin tidak yakin apa itu. Jadi mungkin di aplikasi kami, kami dapat muncul kembali dan menambahkan semacam label, sedikit hal sebelumnya yang mengatakan Subjek mungkin, seperti itu. Subyek bunga, bokeh, cabang. Dan kemudian foto kami yang lain di sini memiliki subjek gunung, bintang, bayangan, hanya sebagai contoh.

Jadi kita akan berhenti sebentar di sini, tetapi Anda dapat melihat seberapa cepat saya dapat menggabungkan halaman ini. Saya kira kita harus menyingkirkan halo kita, dunia di atas sana. Kami tidak terlalu membutuhkan itu. Atau kata halo. Jadi saya akan menghapus itu. Itu dia. Jadi Anda bisa melihat, seperti yang saya katakan, betapa cepatnya kami dapat menyatukan ini.

Hanya mendasarkan kode kami dari halaman daftar portofolio, kami dapat membuat halaman daftar foto kami di sini dan kemudian memetakan setiap foto dan mengakses bidang kustom Atlas Content Modeler untuk itu– judul, deskripsi, gambar, dan kemudian bidang berulang kami untuk subjek di sini. Jadi saya ingin Anda merasa diberdayakan oleh ini di proyek Anda sendiri.

Jika Anda ingin menggunakan salah satu cetak biru kami sebagai permulaan besar yang dapat menyelesaikan sebagian besar proyek Anda untuk Anda, banyak kerja keras yang dilakukan. Dan kemudian dari sana, Anda dapat melakukan sesuatu yang serupa dengan yang kami lakukan dalam pembicaraan ini. Anda dapat menyesuaikannya lebih lanjut dan menambahkan penyesuaian Anda sendiri dan model konten lainnya, dan sebagainya.

Terima kasih banyak telah menonton. Saya harap pembicaraan ini benar-benar berguna dan memberi Anda pemahaman yang baik tentang semua fitur hebat yang telah muncul dan akan terus muncul di ekosistem Atlas.

PRESENTER: Dan itu adalah penutup untuk DE{CODE} 2022. Saya harap Anda menemukan inspirasi dan pergi dengan lebih banyak keahlian WordPress dan koneksi komunitas baru. Carilah konten yang direkam di situs mulai hari Jumat untuk mengetahui apa pun yang mungkin Anda lewatkan atau menonton video lagi.

Saya ingin mengucapkan terima kasih terakhir kepada mitra sponsor kami: Amsive Digital, Box UK, Candyspace, Drewl, Elementary Digital, Illustrate Digital, Kanopi Studios, Springbox, Studio Malt, StrategiQ, WebDevStudios, dan 10Up. Terima kasih banyak telah berdonasi ke penggalangan dana DE{CODE} kami. Kami sangat menghargai kemurahan hati Anda.

Sekarang, untuk semua orang yang telah berinteraksi dengan kami di hub peserta dan sesi kami, kami akan memilih tiga pemenang teratas dan memberi tahu Anda cara mengklaim hadiah di akhir DE{CODE}. Kami berharap dapat bertemu Anda lagi di acara mendatang, baik secara langsung maupun secara virtual. Kami tidak sabar untuk memberi Anda lebih banyak tentang tren pengembangan WordPress terbaru dan bagaimana Anda dapat menerapkannya untuk membangun situs WordPress lebih cepat.

Sekian dari saya. Terima kasih banyak telah bergabung dengan kami, dan berhati-hatilah.