Cara Membangun Proyek WordPress Tanpa Kepala Pertama Anda dengan ACF + WPGraphQL

Setiap orang memiliki alat favorit mereka ketika datang ke pengembangan WordPress, dan gagasan membangun situs tanpa kepala tanpa alat itu bisa jadi menakutkan. Untungnya, dua alat favorit pengembang WordPress — ACF dan WPGraphQL — dapat membantu Anda terjun ke pengembangan tanpa kepala.

Dalam sesi ini, Advokat Pengembang Senior Mesin WP Jeff Everhart memamerkan seluk beluk infrastruktur dengan membangun situs demo hanya dalam beberapa menit menggunakan Atlas!

Slide Sesi:

Salinan:

JEFF EVERHART: Apa kabar semuanya? Nama saya Jeff Everhart, advokat pengembang senior di WP Engine. Terima kasih banyak telah bergabung dengan pembicaraan saya hari ini tentang membangun proyek WordPress tanpa kepala pertama Anda dengan ACF dan WP GraphQL. Sebelum mulai membangun, saya selalu ingin memberikan beberapa konteks tentang apa itu headless WordPress. Sepertinya headless menjadi istilah yang kurang umum dan lebih umum, jadi saya akan mencoba untuk membuat penjelasannya singkat.

WordPress tanpa kepala pada intinya adalah tentang menggunakan CMS WordPress melalui API untuk menggerakkan beberapa jenis aplikasi lainnya. Jika kita melihat diagram di slide ini, ketika pengguna meminta site.com/page, alih-alih meminta WordPress menangani permintaan itu, aplikasi JavaScript merespons rute itu. Itu melihat jalur, menentukan data apa yang dibutuhkan dari WordPress atau sumber lain, melakukan panggilan API tersebut, dan menghasilkan respons kepada pengguna.

Penting untuk dicatat bahwa apa yang ada di slot runtime Node.js itu sebenarnya bisa berupa sejumlah jenis aplikasi atau klien yang berbeda. Kami telah melihat berbagai contoh aplikasi seluler atau situs web yang dibuat dengan semua kerangka kerja paling populer menggunakan pola ini dengan sukses besar. Sekarang setelah Anda memiliki ide yang bagus tentang apa itu WordPress headless, mari telusuri kumpulan teknologi yang akan kita gunakan untuk proyek hari ini.

Di lapisan paling belakang kami, kami akan menggunakan WP GraphQL sebagai API kami. WP GraphQL mengubah backend WordPress Anda menjadi API GraphQL yang kuat. Itu memberlakukan semua pemeriksaan keamanan peran dan kemampuan yang sama seperti yang dilakukan WordPress asli dan API REST inti. WP GraphQL adalah pilihan tepat untuk mengembangkan aplikasi tanpa kepala karena menggunakan bahasa kueri deklaratifnya, kami dapat meminta berbagai jenis konten di seluruh konten tersebut. Jadi mendapatkan posting, halaman dengan kategorinya semuanya dalam permintaan yang sama.

Sekarang, mari kita lihat bagaimana kita dapat menyusun dan memodelkan beberapa data yang lebih kompleks menggunakan WordPress CMS. Banyak pengembang yang mendekati proyek tanpa kepala perlu membuat model dan menyimpan data yang berbeda, bukan? Melampaui posting atau halaman khas WordPress. ACF atau bidang khusus lanjutan adalah alat yang hebat untuk memodelkan bidang khusus tersebut. Dalam rilis yang akan datang, itu akan menjadi lebih kuat dengan memungkinkan Anda mendaftarkan jenis posting dan taksonomi langsung di UI dalam versi gratis dari plugin ini.

Itu membuat semua data tersedia melalui REST API dengan mudah tetapi perlu menginstal ekstensi WP GraphQL untuk menambahkan beberapa data bidang itu ke skema GraphQL kami. Secara pribadi, saya sangat senang melihat plugin ini berkembang karena menjadi lebih kuat untuk pengembang tanpa kepala.

Sekarang, setelah kami dapat memodelkan data yang kompleks dan menanyakannya melalui WP GraphQL, kami memerlukan beberapa cara untuk membuat pengalaman web modern tersebut bagi pengguna kami sambil juga mendukung editor konten yang sudah mengenal dan menyukai WordPress. Di situlah Faust berperan. Faust adalah framework dua bagian yang terdiri dari plugin WordPress dan framework JavaScript berbasis Next.js. Mereka bekerja bersama untuk membuat pembuatan situs WordPress tanpa kepala menjadi mudah dan intuitif.

Itu menambahkan dukungan untuk hal-hal seperti pratinjau posting dan otentikasi di luar kotak, dan Anda dapat bersandar pada pengalaman hierarki template WP yang dibayangkan ulang dalam JavaScript modern. Faust.js bertujuan untuk menjadi platform yang sangat dapat diperluas dan dikirimkan dengan sistem plug-in dan bilah admin yang dapat Anda gunakan untuk menyesuaikan dan menciptakan pengalaman yang mendukung kasus penggunaan khusus Anda.

Last but not least, kita memerlukan beberapa cara untuk bekerja dengan alat ini secara lokal dan dalam produksi. Menggunakan migrasi lokal dan WP, saya telah menarik semua sumber daya WordPress yang Anda perlukan untuk proyek ini ke dalam satu file zip yang dapat Anda seret dan lepas ke lokal untuk memulai. Setelah kami selesai membangun situs kami, kami dapat mendorong pekerjaan kami ke platform Atlas. Solusi hosting tanpa kepala Atlas WP Engine yang menggabungkan backend WordPress Anda dan wadah Node.js semuanya disetel untuk bekerja bersama tersedia melalui satu dasbor yang mulus.

Jadi sekarang setelah Anda memiliki pemahaman yang baik tentang semua alat yang akan kita gunakan dalam presentasi hari ini, mari langsung masuk dan mulai membangun. Buka URL di slide ini untuk mengakses kode demo di browser. Saya telah mencoba membuat pengalaman ini semudah mungkin untuk diikuti, tetapi kita akan membahas banyak hal dalam 25 menit ke depan, jadi jangan ragu untuk menonton sekarang dan merujuk kembali ke repositori GitHub ini dan rekaman sesi ini nanti untuk tetap bekerja setelah konferensi. Jika sisa decode adalah pameran mobil, maka sesi ini adalah membangun mesin. Pun benar-benar dimaksudkan.

Sekarang setelah repositori GitHub terbuka, mari kita mulai. Hal pertama yang saya sarankan untuk Anda lakukan adalah membuat fork dari repositori ini di akun Anda sendiri. Jika Anda melihat apa yang terkandung dalam repositori ini, Anda akan melihat sekumpulan kode contoh serta beberapa petunjuk langkah demi langkah di readme untuk semua yang akan kita lakukan dalam presentasi ini. Faktanya, kami akan melakukan banyak penyalinan dan penempelan langsung dari repositori ini ke dalam proyek Anda. Untuk mengkloning ini secara lokal, mari lanjutkan dan jalankan perintah Git clone di dalam terminal Anda.

Itu hanya membutuhkan satu detik untuk mengunduh, dan kemudian setelah kita mengunduh proyek, mari lanjutkan dan ubah direktori kita menjadi direktori proyek itu. Dari sana, saya akan menjalankan perintah untuk membuka proyek ini di VS Code, tetapi Anda bebas menggunakan editor kode apa pun yang Anda inginkan. Karena VS Code sudah memiliki terminal terintegrasi, saya dapat membersihkan ini lalu langsung saja menutup iTerm. Dan sekarang, kita dapat bertransisi untuk menempatkan situs lokal WordPress kita. Untuk melakukan itu, kita akan membuka proyek ini di Finder dan kemudian mencari file zip demo WP tanpa kepala yang telah saya siapkan untuk Anda.

Kami akan menyeret dan melepaskan file zip itu langsung ke lingkungan pengembangan lokal, dan lokal akan memulai proses membongkar dan mem-bootstrap situs WordPress demo Anda untuk Anda. Kami dapat tetap menggunakan default, dan kemudian lokal hanya perlu beberapa menit untuk membuatkan Anda situs WordPress baru. Sekarang, ini adalah fitur hebat dari WP migrate pro yang memungkinkan saya untuk mengekspor situs apa pun sebagai zip dan drag and drop langsung ke lokal sehingga saya dapat membawa situs produksi ke mesin lokal saya dengan sangat cepat, apa pun platformnya.

Setelah selesai menginstal, Anda mungkin ingin melanjutkan dan mempercayai sertifikat SSL ini, lalu kami akan melanjutkan dan membuka proyek ini di WP Admin. Dari sana, kita akan melanjutkan dan meminimalkan lokal, karena ini sudah berjalan, dan kita tidak perlu melakukan apa pun dengannya. Jadi dari sana, kami akan membuka repositori kami, di mana Anda akan menemukan nama pengguna dan kata sandi admin yang telah saya buat untuk situs demo ini. Anda harus dapat menggunakan kredensial tersebut untuk melanjutkan dan masuk ke dasbor WP Admin. Dari sana, kita akan mengambil beberapa detik untuk membiasakan diri dengan pemasangan WordPress lokal ini.

Hal pertama yang akan kita lakukan adalah melihat plugin yang terpasang di situs WordPress ini. Kami melihat hal-hal seperti bidang khusus lanjutan untuk pemodelan data. Kami memiliki pelanggaran untuk mengaktifkan beberapa kemampuan headless kami, WP GraphQL untuk bertindak sebagai API untuk situs kami, dan kemudian WP GraphQL untuk ekstensi ACF untuk menampilkan beberapa grup bidang ACF. Sekarang, mari kita lihat postingannya juga. Jika Anda melihat semua pos demo berbeda yang telah saya isi sebelumnya di dalam proyek ini, kita dapat melihat bahwa kami memiliki sejumlah pos berbeda dengan banyak kategori berbeda.

Jika kita melihat konten di dalam setiap posting, kita akan melihat bahwa kita memiliki banyak konten tubuh, beberapa gambar, gambar unggulan, dan beberapa grup bidang ACF yang telah kita buat dan diisi sebelumnya. Jadi mari kita lihat grup lapangan lebih terinci. Jika kami membuka menu ACF, Anda akan melihat kami memiliki dua grup bidang yang dibuat– sumber makanan dan mixtape manis. Mari kita lihat sumber makanan terlebih dahulu.

Ini hanyalah grup bidang dasar dengan dua bidang individual– teks dan URL. Untuk masing-masing hal ini, saya mencentang opsi Tampilkan di GraphQL sehingga muncul di GraphQL. Kemudian saya juga telah memeriksa opsi itu di tingkat grup lapangan. Selain itu, saya memiliki beberapa logika kondisional untuk menentukan kapan harus merender postingan ini– jadi jika kategori postingan sama dengan makanan. Dan mari kita lihat seperti apa mixtape yang manis itu.

Kita akan melihat bahwa ini terlihat sangat mirip dengan sumber makanan kita, dan kita memiliki beberapa bidang yang berbeda. Masing-masing memiliki opsi Tampilkan di GraphQL yang dicentang, serta yang dicentang di tingkat grup bidang sebagai tambahan. Kita dapat melihat bahwa ada beberapa pengaturan berbeda yang diberikan oleh ekstensi WP GraphQL yang mungkin tidak kita perlukan. Selain itu, kita dapat melihat bahwa kita juga menampilkan ini berdasarkan kategori postingan.

Jadi sekarang, mari kita lihat WP GraphQL dan apa yang diberikannya kepada kita dalam hal alat. Jika kita membuka menu GraphQL, kita akan masuk ke dalam IDE grafis. Sekarang, ini adalah lingkungan pengembangan interaktif yang memungkinkan Anda membuat kueri menggunakan WP GraphQL. Kami dapat menentukan bahwa kami ingin, katakanlah, 10 posting pertama dengan kategori dan menyertakan bidang ACF tambahan kami di sini juga. Saat kami mengklik tombol Jalankan, kami mendapatkan kembali data langsung dari situs WordPress kami yang cocok dengan data dalam kueri itu.

Jika kita mau, kita bisa membuka jendela Query Composer dan menyusun aspek kueri kita secara visual. Jadi ini adalah alat yang sangat berguna jika Anda tidak yakin bidang atau data tertentu apa yang mungkin ada di objek WordPress tertentu. Anda dapat menggunakan Query Composer untuk menjelajahi dan menjalankan kueri tersebut secara real time. Sekarang, mari beralih ke konfigurasi Faust dengan membuka menu pengaturan Faust. Seperti yang saya katakan di pembicaraan pendahuluan, Faust sebenarnya adalah kerangka kerja dua bagian yang terdiri dari plugin WordPress dan basis kode front-end Anda.

Jadi jika kita kembali ke menu pengaturan plug-in WordPress, kita dapat melihat bahwa kita telah menyetel opsi ini untuk URL situs front-end, yang akan mengarah ke alamat situs front-end kita. Tepat di bawah opsi kunci rahasia, kita akan melanjutkan dan klik buat ulang untuk menghasilkan kunci unik yang dapat Anda gunakan untuk proyek demo Anda. Dari sana, mari kembali ke basis kode JavaScript, dan kita akan menjalankan perintah ini untuk menyalin contoh file variabel lingkungan menjadi file yang dapat kita gunakan dengan situs kita.

Setelah kita menjalankannya, perintah buka .env.localfile, dan kita akan membuat beberapa perubahan. Hal pertama yang akan mengganti opsi URL WordPress publik berikutnya dengan lokasi situs lokal Anda. Jadi ACF.WPEngine.local. Dan kemudian kita juga akan mengambil nilai kunci rahasia itu dan menggunakannya untuk kunci rahasia Faust kita. Pastikan kita juga ingin menghapus komentarnya, lalu variabel lingkungan terakhir benar-benar hanya berguna untuk pengujian dan pengembangan lokal sehingga Anda dapat memuluskan masalah SSL apa pun yang mungkin Anda miliki saat terhubung ke lingkungan pengembangan lokal.

Dari sana, kita ingin menjalankan NPM Install untuk menginstal semua dependensi proyek kita, dan kemudian setelah selesai, kita dapat memulai ini dan menjalankan NPM Run Dev untuk memulai proyek kita. Itu hanya butuh satu detik untuk dikompilasi, tetapi setelah itu, kita dapat membuka localhost:3000 di browser, dan kita akan melihat situs Faust kita beraksi.

Setelah itu dirender, Anda dapat melihat bahwa Faust sudah menangani beberapa sihir untuk kita. Jika kita melihat menu di kanan atas, kita dapat melihat bahwa itu sudah menarik halaman dan konten dari menu kita yang telah kita tentukan di backend WordPress kita, dan jika kita melompat kembali ke Admin WordPress kita, kita dapat melihat di bagaimana koneksi ini bekerja sedikit lebih detail.

Karena plugin Faust mengetahui alamat URL ujung depan kami, ia menulis ulang banyak tautan, seperti tautan pratinjau sehingga ketika Anda membukanya di browser, tautan itu terbuka di URL situs ujung depan, sehingga Anda Anda mendapatkan pratinjau langsung yang nyata tentang seperti apa tampilan konten Anda di front-end.

Sekarang, mari selami lebih dalam struktur proyek JavaScript Faust kita. Jika Anda terbiasa bekerja di Next.js, Anda mungkin menggunakan direktori halaman untuk membuat komponen halaman yang mengimplementasikan rute Anda. Anda masih dapat melakukan ini di Faust, tetapi ini didasarkan pada konsep ini dengan menyediakan rute umum yang disebut simpul WordPress yang memungkinkan Anda mengambil URI apa pun yang dikelola WordPress dan menyelesaikannya ke bagian konten tertentu.

Kami kemudian mendapatkan beberapa data tambahan tentang item konten itu dan menyebarkannya melalui komponen kami sehingga kami dapat menyelesaikan satu konten individual itu ke template tertentu di folder template WP. Ini sangat mirip dengan konsep hierarki template dan tema WordPress tradisional, dan banyak konvensi penamaan. Cocok misalnya, frontpage.js adalah halaman depan website kita, sedangkan page.js bertanggung jawab untuk merender hal-hal dari jenis konten halaman. Dan single.js ada untuk membuat posting tunggal.

Sekarang, mari mulai dan buat frontpage.js kita sedikit lebih dinamis. OKE . Jadi untuk memulai, kita akan melanjutkan dan membuka file front page.js kita dan memberi diri kita sedikit lebih banyak ruang untuk bekerja. Jadi jika kita lihat isi dari file ini, kita bisa melihat ada tiga bagian utama. Ada komponen itu sendiri yang kita render, properti kueri yang dilampirkan ke komponen, dan ini dijalankan setiap kali kita merender komponen, lalu beberapa variabel yang bisa kita berikan di bagian bawah.

Dan seperti yang Anda lihat, ada dua cara utama untuk menggunakan ini. Entah menggunakan use query hook di dalam komponen, atau bisa diturunkan sebagai props ke dalam komponen itu sendiri, dan Anda akan melihatnya dalam contoh nanti. Jadi mari kembali ke repositori dan mulai dengan langkah 2.1 untuk memperbarui kueri untuk frontpage.js kita. Jadi kita akan menyalinnya, lalu kembali ke IDE grafis dan bermain-main di sana sebentar. Jadi kueri yang kami miliki di clipboard kami harus mendapatkan 10 posting pertama dan mendapatkan beberapa data yang terkait dengan masing-masing posting tersebut.

Jadi jika kita mengklik di sana dan menjalankannya, kita melihat bahwa semuanya berfungsi dengan baik. Jadi kami ingin melanjutkan dan menambahkannya ke properti kueri komponen kami. Jadi kita akan menemukan tempat yang bagus untuk melakukan itu dan hanya menempelkannya di sana, dan melakukan sedikit pemformatan ulang. Jadi yang dilakukan adalah menambahkan bagian individual dari kueri ini ke kueri itu sendiri. Jadi kita masih perlu membuat hasil kueri itu tersedia untuk komponen kita yang lain, jadi kita akan melanjutkan dan menambahkan baris tambahan ini yang baru saja mengekstrak hasil posting tersebut ke dalam variabel yang dapat kita kerjakan.

Sekarang, langkah selanjutnya untuk membuat beranda ini dinamis sebenarnya adalah membuat komponen untuk merender kutipan posting tersebut. Jadi kita akan melakukan itu dan membuat beberapa file di folder komponen, dan saya akan menyebutkannya di sini– Saya akan melanjutkan dan membuat postexcerpt.js di dalam folder kutipan posting, dan saya' m benar-benar hanya menduplikasi struktur komponen yang ada yang merupakan bagian dari proyek Memulai Faust.js ini. Anda benar-benar bebas untuk melakukan apa pun yang Anda inginkan di sini, dan saya hanya mengikuti kerangka kerja karena sudah diatur untuk saya sebagai bagian dari Memulai ini.

Jadi setelah kita memiliki ketiga file tersebut, kita akan mulai menambahkan beberapa hal ke dalamnya untuk merender postingan tersebut. Jadi hal pertama yang akan kita lakukan adalah memasukkan beberapa konten ke dalam komponen kutipan postingan kita. Jadi kita hanya akan menyalin dan menempelkannya dari repositori kita, dan kita dapat melihat bahwa kita sedang mengimpor file module.css itu. Dan kami memiliki fungsi yang disebut kutipan posting yaitu komponen kami yang menyukai satu prop yaitu posting, lalu kami merender bagian, memiliki tautan yang akan langsung menuju ke URI posting itu, merender judul. Kemudian di bawah sana, kami memiliki petak kategori yang kami render juga, dan kemudian menggunakan pengaturan berbahaya di HTML kami untuk mengatur konten HTML untuk kutipan posting.

Sekarang, setelah semuanya bagus dan disimpan, kita akan menyimpannya, tetapi kita juga akan masuk ke sini dan menambahkan gaya cakupan tambahan ini ke komponen kita untuk memberi gaya pada tag rentang tersebut untuk kategori kita, dan kemudian kita hanya akan lakukan impor ekspor di dalam file index.js untuk mengambilnya dari ekspor default ke ekspor bernama, dan kami akan menyimpan semua itu. Dan kemudian langkah terakhir untuk membuatnya tersedia untuk digunakan dalam hal lain adalah menambahkan satu baris ekspor lagi ke file index.js dari folder komponen kita. Dan sekarang setelah kita melakukannya, jika kita kembali ke halaman beranda, frontpage.js, kita seharusnya dapat menambahkan impor tambahan ke pernyataan impor kita yang sudah ada untuk menggunakan kutipan postingan kita.

Sekarang, kita ingin menemukan tempat untuk mengimplementasikannya, dan jika kita turun dan melihat ke dalam elemen utama kita, lihat bahwa kita memiliki beberapa barang tepat di bawah pahlawan– yang akan kita lakukan hanyalah salin dan tempel beberapa kode di repositori dan timpa apa yang ada di dalam main itu dengan menggunakan kutipan posting kami. Dan kami hanya akan melakukan sedikit pemformatan ulang untuk menghaluskan beberapa hal, tetapi Anda dapat melihat di sana bahwa apa yang kami lakukan ada di dalam wadah itu, kami akan memetakan melalui serangkaian pos yang kami dapatkan kembali sebagai hasil dari kueri kami dan kemudian mengembalikan komponen kutipan pos tempat kami mengirimkan pos dan memberinya kunci.

Dan kemudian jika kita melanjutkan dan menyimpan semua itu dan merendernya di browser dan menyegarkan, kita akan melihat bahwa kita memiliki beranda dinamis yang bagus. Ya, masing-masing judul tersebut memiliki tautan yang dapat diklik, seperti halnya petak kategori individu. Dan jika kita mengklik, kita dapat melihat bahwa melalui manfaat dari template yang sudah ada di Faust, semua barang kiriman kita sudah dirender, meskipun kita kehilangan beberapa grup sumber daya yang kita buat menggunakan ACF. Jadi jika kita mengklik ke posting kedua, kita dapat melihat bahwa salah satu merender hebat serta melakukan semua pra-dibuat link kategori yang - kami hanya menggunakan URI kategori untuk bersandar ke Faust dalam merender template JS kategori itu .

Oke, sekarang kita memiliki beranda yang dinamis, mari beralih untuk membuat bidang ACF tersebut dirender pada template single.js kita. Jadi lanjutkan dan bersihkan editor kode kita, lalu kita bisa membuka file single.js dan melihat apa yang ada di dalamnya. Kita tahu bahwa di tingkat atas itu, kita memiliki fungsi komponen yang kita ekspor yang benar-benar membutuhkan alat peraga, dan properti component.query yang memiliki kueri GraphQL dinamis yang membaca beberapa variabel yang kita dapatkan kembali dari kueri awal.

Dan yang pada akhirnya ingin kita lakukan adalah menampilkan beberapa sumber postingan yang berbeda di bagian bawah konten postingan kita. Jadi saya kembali ke repositori dan menggulir ke bawah ke langkah 3.1, di mana kami memperbarui kueri posting tunggal, dan kami akan melihatnya karena mulai menarik grup mixtape manis dan bidang sumber daya makanan yang kami buat di langkah sebelumnya. Jika saya mengambil kueri itu dan menyalin dan menempelkannya ke grafik, saya akan melanjutkan dan membuat kode keras ID basis data untuk sebuah posting, dan menghapus hanya beberapa hal berbeda yang tidak kita perlukan seperti As Preview dan fragmen lainnya .

Jika saya melanjutkan dan menjalankannya, kita akan melihat bahwa saya mendapatkan kembali beberapa data yang benar-benar berisi apa yang saya harapkan. Kontennya, saya mendapatkan kembali penulisnya, dan saya mendapatkan kembali, yang terpenting, kedua grup lapangan tersebut dan datanya. Jadi saya akan melanjutkan dan menyalin kueri itu dan kembali ke single.js. Dari sana, saya akan benar-benar mengganti bagian kueri itu dengan apa yang saya dapatkan dari clipboard saya. Kita bisa melanjutkan dan menyimpannya. Anda dapat memformat ulang jika Anda mau, tetapi ini adalah spasi agnostik, jadi menurut saya sebagian besar terlihat baik-baik saja.

Jadi dari sana, kami ingin melakukan hal yang sama seperti yang kami lakukan di langkah terakhir, di mana kami menjadikannya sebagai bagian dari kueri kami. Sekarang, kami ingin memastikan bahwa kami membuat variabel tersebut tersedia di dalam komponen kami. Jadi kami akan menambahkannya ke pernyataan penataan itu, dan kemudian, karena kami memiliki beberapa kategori berbeda untuk posting kami, kami ingin membuat beberapa barang Boolean untuk membantu kami menentukan apakah kami harus menampilkan sumber makanan atau mixtape manis atau tidak. Karena seperti yang Anda lihat di sana, apa pun yang kami dapatkan, keduanya, dan jika tidak ada yang bisa ditemukan untuk bidang mixtape yang manis, itu akan kembali sebagai nol. Jadi saya ingin melakukan pemeriksaan kondisional di sana, jadi saya akan menambahkan dua baris kode ini ke file kita.

Dan apa yang pada dasarnya dilakukan adalah membuat kita beberapa variabel Boolean yang dapat kita gunakan di bawah untuk merender template secara kondisional. Dalam hal ini, kami melihat node untuk setiap kategori dan pada dasarnya memfilternya untuk menentukan apakah ada makanan atau musik di dalamnya atau tidak, lalu memeriksa panjangnya. Mungkin ada banyak cara untuk mengimplementasikan variabel Boolean jenis ini, jadi jangan ragu untuk mengubahnya jika Anda memiliki cara yang lebih bersih untuk melakukannya, tetapi untuk tujuan kita di sini, saya pikir itu akan bekerja dengan baik.

Sekarang, langkah selanjutnya adalah kita benar-benar ingin, seperti pada langkah sebelumnya, membuat beberapa komponen tambahan. Jadi saya akan melanjutkan dan di dalam file komponen saya, lanjutkan dan buat komponen sumber daya makanan. Jadi saya akan membuat folder dan kemudian file food resources.js di dalamnya, dan bersamaan dengan itu, saya akan membuat file index.js serta file modul CSS. Dan sekarang file modul SCSS sangat membantu karena memungkinkan kita untuk membatasi gaya kita ke komponen tertentu itu. Jadi rasanya seperti sintaks yang funky untuk melakukannya, tetapi pada akhirnya ini adalah hasil yang sangat bersih karena kita tidak perlu menulis banyak kelas dan semacamnya.

Jadi saya akan mulai menyalin dan menempelkan kode komponen dari repositori langsung ke file tersebut. Kita dapat melihat bahwa kita memiliki fungsi sumber makanan yang mengambil dua nama resep alat peraga dan tautan resep, lalu kita merendernya di bawah usia kita yang baik dengan emoji burrito. Kami juga akan menyalin dan menempelkan beberapa gaya file SCC ke dalam folder khusus ini, dan kemudian kami akan memastikan bahwa kami mengekspornya dari folder komponen index.js. Dan seperti pada contoh sebelumnya, kita ingin melanjutkan dan mengekspor ini di index.js folder komponen kita juga sehingga kita dapat memiliki grup yang sangat bagus untuk diimpor, seperti yang telah Anda lihat langsung dari komponen itu folder di tempat lain di beberapa file yang berbeda ini.

Jadi setelah kami menambahkannya, kami akan mengalihkan perhatian kami ke komponen sumber daya musik, dan kami akan melakukan hal yang sama. Kita akan melanjutkan dan membuat struktur file yang sama. Jadi folder sumber daya musik dan file musicresources.js di dalamnya. Kemudian kita akan melanjutkan dan membuat file index.js untuk mengekspornya dan kemudian juga file musicresources.module.scss kita untuk gaya ruang lingkup tersebut.

Jadi setelah kita mendapatkan semua itu, kita akan melakukan hal yang sama seperti yang kita lakukan untuk sumber makanan kita dan cukup salin dan tempel beberapa kode ini dari repositori. Kita dapat melihat bahwa komponen ini terlihat hampir identik. Kami punya sumber daya musik. Ini sebenarnya memiliki tiga properti, bukan dua, tetapi kami memiliki tiga bidang pada grup bidang ini, tetapi konvensi style.component adalah sama. Dan kami hanya melakukan rendering yang sedikit berbeda karena kami memiliki konten yang berbeda.

Jadi dari sana, kami juga akan menambahkan kode SCSS kami dan memastikan untuk mengekspornya dari folder komponen index.js dan kemudian juga mengimpornya ke folder kami di sini, dan saya pikir saya benar-benar membuatnya– mari kita ganti nama ini dengan cepat dan cukup pastikan bahwa semua penamaan kita terlihat bagus, sehingga index.js dan komponen kita menemukan sumber daya musik kita dan semuanya bagus. Jadi sekarang, kita akan melanjutkan dan menutup semua tab asing ini karena kita siap untuk benar-benar mengimplementasikan komponen tersebut dalam file single.js kita.

Jadi untuk melakukan itu, kita hanya akan menambahkan kedua komponen tersebut ke pernyataan impor kita yang sudah ada, yang sudah secara otomatis mengenalinya, dan kita akan menemukan tempat yang bagus untuk melakukannya. Jadi kami memiliki komponen pembungkus konten ini di sini. Jadi saat ini, kami meneruskan konten, tetapi itu sebenarnya juga akan menerima anak-anak secara opsional. Jadi kita dapat meneruskan konten tetapi kemudian juga meneruskan beberapa komponen anak langsung ke bungkus konten itu, sehingga ditampilkan di ruang horizontal bagus yang sudah kita miliki dan semuanya selaras.

Jadi itulah yang akan kita lakukan, lalu kita akan menyalin dan menempelkan kode itu di sana dan memformat ulang dan membicarakan apa yang terjadi dalam contoh khusus ini. Jadi tepat di dalam komponen pembungkus konten itu, kami menggunakan variabel is food dan is music Boolean untuk merender secara kondisional, meskipun, komponen sumber daya yang sesuai. Jadi jika makanan itu benar dan postingan ini masuk kategori makanan, kami akan merendernya. Dan jika itu musik, kami akan melakukan hal yang sama. Dan di sana, Anda dapat melihat kami meneruskan semua properti berbeda yang diperlukan untuk merendernya.

Dan jika kita keluar dan me-refresh salah satu halaman template single.js kita, kita dapat melihat bahwa sumber daya makanan kita dirender seperti yang kita harapkan, dan tautan itu akan berfungsi dengan baik jika kita kembali ke WP Admin atau rumah kita halaman. Dan jika kami menemukan satu dan kategori makanan atau musik, kami dapat membuka Kinfolk Synth DIY dan melihat seperti apa komponen sumber daya musik kami, dan semuanya tampak hebat. Dan jika kita menemukan satu yang benar-benar ada di kedua kategori, kita dapat melihat bahwa sebenarnya, di bagian bawah, merender kedua komponen tersebut seperti yang kita harapkan.

OKE. Jadi sekarang setelah kita mendapatkan situs kita seperti yang kita inginkan, mari beralih ke pembicaraan tentang cara menerapkan situs ini. Sekarang, saya memiliki bagian dari repositori GitHub yang dibuat untuk kami, dan sebenarnya, saya telah membuat cabang yang diterapkan sepenuhnya terpisah di cabang finish. Jadi menjalankan Git check out selesai, kami akan memberikannya untuk Anda. Dan Anda juga bisa menerapkan cabang itu langsung ke Atlas, yang merupakan solusi hosting WordPress tanpa kepala dari WP Engine.

Ini memberi Anda instalasi WordPress dan wadah Node.js, dan Anda dapat mendaftar untuk akun kotak pasir gratis hanya dengan mengklik tombol ini di halaman arahan Atlas. Membawa Anda ke forum yang sangat cepat, dan seperti yang Anda lihat, harganya nol. Anda mungkin masih harus memasukkan kartu kredit yang kami gunakan hanya untuk tujuan pencegahan penipuan, tetapi Anda dapat memiliki akun gratis untuk bermain-main dengan semua ini untuk mengujinya, belajar tanpa kepala sesuai keinginan hati Anda. Jadi saya akan melanjutkan dan membuka dasbor WP Engine untuk mulai menerapkan situs ini ke Atlas.

Hal pertama yang akan saya lakukan adalah membuka daftar situs saya, dan saya akan membuka situs WordPress produksi saya. Jadi sebenarnya, situs tanpa kepala ACF yang Anda lihat di sini, di mana saya akan membuka Admin WP di jendela baru, adalah situs induk untuk file zip yang Anda semua gunakan secara lokal. Jadi saya membuat zipnya menggunakan ekspor WP, dan itulah yang sebenarnya akan saya gunakan untuk penerapan produksi saya.

Dari sana, saya akan mengeklik tab Atlas, lalu mengeklik Buat Aplikasi. Dan saya disajikan dengan opsi ini. Saya akan memilih Tarik Dari Repo, lalu klik Lanjutkan. Dan jika saya belum mengautentikasi dengan GitHub, di sinilah Anda akan melakukannya, tetapi karena saya sudah melakukannya, saya dapat melanjutkan dan memilih repositori saya. Jadi kita akan melanjutkan dan memilih repositori yang kita gunakan untuk proyek ini, klik Continue, lalu saya akan men-deploy aplikasi saya di US Central.

Dari sini, memungkinkan saya untuk memilih cabang, dan seperti yang saya katakan, saya akan menggunakan Finished. Ada juga opsi jika Anda menggunakan monorepo, yang bukan kami, dan saya akan membiarkan Instalasi WordPress Saya Dicentang, dan Cari Situs Tanpa Kepala ACF Saya. Sekarang, di sini, saya ingin, sebenarnya, daripada menggunakan file .env, saya ingin menyalin dua variabel lingkungan dari proyek file saya.

Jadi yang pertama adalah URL WordPress publik berikutnya. Itu adalah variabel lingkungan yang sama yang kami tetapkan di proyek lokal kami, dan saya akan menyalin tautan ke instalasi WordPress produksi saya di sana. Kemudian saya akan menambahkan variabel lingkungan lain, dan yang ini akan menjadi kunci rahasia Faust kita. Jadi saya akan melanjutkan dan menyalinnya dari menu Pengaturan Faust, dan memasukkannya ke sana dan menyetel kunci untuk itu ke Kunci Rahasia Faust.

Dan setelah selesai, saya dapat melanjutkan dan mengeklik Buat Aplikasi, dan Atlas akan memulai proses membangun dan menerapkan aplikasi saya. Selama proses build Atlas, ia akan menjalankan instalasi NPM, dan perintah build NPM Anda untuk framework apa pun yang Anda gunakan. Dan setelah semua kode itu dibuat, itu akan menyebarkan wadah Node itu untuk Anda ke jaringan kami. Jadi setelah semua itu berputar sebentar, kita akan mendapatkan pesan sukses, lalu kita dapat mengklik URL yang disediakan untuk kita dan benar-benar melihat situs kita secara langsung.

Jadi kita akan mendapatkan pesan sukses kita, lalu kita bisa melanjutkan dan membuka URL ini di tab lain. Dan di sana kami dapat melihat bahwa situs kami terlihat persis seperti yang dilakukan secara lokal, dan menarik semua data yang benar, semua gambar yang benar, dan bahkan menyedot semua konten ACF kami. Beberapa postingan kami terlihat sangat bagus, dan kinerja kami sangat bagus di Atlas– Saya sebenarnya menggunakan beberapa gambar yang sangat besar di sini, jadi jika Anda melihat kelambatan, itu pasti karena pilihan saya.

Platform Atlas penuh dengan fitur yang akan dihargai oleh pengembang JavaScript modern. Sayangnya, tidak ada cukup waktu dalam presentasi ini untuk membahas semuanya secara mendetail.

Tapi Atlas melakukan pekerjaan yang sangat baik dalam menyatukan detail penting dari bagian frontend dan backend ekosistem headless Anda ke dalam satu dasbor yang nyaman, tempat Anda dapat melihat log build individu dan output build, memeriksa penerapan, variabel lingkungan yang Anda gunakan untuk build tertentu, serta memiliki akses ke pengaturan atau fitur tambahan yang dapat Anda aktifkan, seperti lingkungan pratinjau, tempat Anda dapat membuat lingkungan tambahan untuk setiap PR yang dibuat terhadap repo GitHub Anda, atau membuat webhook lingkungan untuk membangun kembali bagian tertentu dari aplikasi atau CDN Anda saat Anda melakukan perubahan pada WordPress.

Semua hal ini menjadi mungkin dengan platform Atlas, dan ini benar-benar menurunkan penghalang untuk mulai membangun dengan WordPress headless.

Wow. Selamat seperti yang saya katakan, banyak yang harus dibahas dalam 25 menit. Jangan ragu untuk terus berlatih setelah presentasi, dan hubungi saya jika Anda memiliki pertanyaan untuk memulai dengan sumber daya demo. Jika Anda tertarik mempelajari lebih lanjut tentang headless tetapi membutuhkan ruang untuk melakukannya, daftar akun Atlas Sandbox gratis. Selain menerapkan repositori kode Anda sendiri, seperti yang telah kami lakukan hari ini, Anda juga dapat memulai dengan beberapa cetak biru siap pakai kami, yang merupakan tumpukan Proyek sekali klik yang dapat membantu Anda melihat seperti apa proyek tanpa kepala saat selesai.

We have a basic scaffold example, a portfolio example with some custom post types, and a new ecommerce example that integrates with big commerce through some of their APIs. Our team and developer relations is really passionate about meeting you wherever you are on your journey towards learning headless. So check out our headless developer's roadmap for a step-by-step series of articles and videos that build on one another to help backfill some of the concepts we've just glossed over today.

The headless ecosystem is young, but it's growing quickly. If you need help on a project, want to talk to some people using headless WordPress in production, or just want to hang out where the magic happens, join the roughly 1,000 other developers in our Discord focused on headless, where we chat, help each other with projects, and help get you moving. Thank you so much for coming to this talk. I look forward to collaborating with you on all of your future headless projects.