Halaman AMP kanonis yang menarik dan interaktif

AMP mempermudah pembuatan halaman web yang andal, responsif, dan berperforma tinggi. AMP memungkinkan Anda membuat interaksi situs yang umum tanpa menulis JavaScript. Situs amp.dev menyertakan template panduan memulai cepat.

Yang akan Anda build

Dalam codelab ini, Anda akan membuat halaman AMP yang responsif, interaktif, dan sangat menarik, yang menggabungkan banyak fitur AMP dan komponen yang diperluas:

  • Navigasi responsif
  • Banner besar halaman penuh
  • Gambar yang responsif
  • Video dengan fitur putar otomatis
  • Sematan seperti Instagram
  • Tindakan dan pemilih
  • Data binding dengan amp-bind
  • Efek visual dengan amp-fx-collection dan amp-animation

Yang Anda butuhkan

  • Browser web modern
  • Node.js dan editor teks atau akses ke CodePen atau playground online yang serupa
  • Pengetahuan dasar tentang HTML, CSS, JavaScript, dan Alat Developer Google Chrome

Alat untuk menayangkan konten

Kita akan menggunakan Node.js untuk menjalankan server HTTP lokal agar menayangkan halaman AMP. Buka situs Node.js untuk mempelajari cara menginstalnya.

Alat pilihan kami untuk menayangkan konten secara lokal adalah serve, yang merupakan server konten statis berbasis Node.js. Untuk menginstalnya, jalankan perintah berikut:

npm install -g serve

Mendownload template dari amp.dev

Template AMP adalah repositori template dan komponen AMP yang dapat dimulai dengan cepat untuk membantu Anda membuat halaman AMP modern yang responsif dengan cepat.

Kunjungi Template AMP dan download kode untuk "Artikel Sederhana" untuk "Foto Hewan Terbaik & Tahun Ini”.

Menjalankan kode template

Ekstrak konten file ZIP.

Jalankan perintah serve di dalam folder article untuk menayangkan file secara lokal.

Buka http://localhost:5000/templates/article.amp.html di browser Anda. (Port mungkin 3.000 atau nomor berbeda bergantung pada versi serve. Periksa konsol untuk alamat yang tepat.)

Selagi kita melakukannya, mari buka Chrome DevTools dan alihkan mode Perangkat juga.

Memangkas kode template

Pada tahap ini, kami telah melengkapi halaman AMP yang sebagian besar berfungsi, tetapi tujuan codelab ini adalah agar Anda dapat belajar dan berlatih, jadi...

Hapus semua yang ada di dalam <body></body>.

Kini kita hanya memiliki halaman kosong yang hanya berisi beberapa kode boilerplate:

Sepanjang codelab ini, Anda akan menambahkan banyak komponen ke halaman kosong ini, yang sebagian membuat ulang template dengan lebih banyak fungsi.

Halaman AMP adalah halaman HTML dengan tag tambahan dan dengan beberapa batasan untuk performa yang andal.

Meskipun sebagian besar tag di halaman AMP adalah tag HTML reguler, beberapa tag HTML diganti dengan tag khusus AMP. Elemen kustom ini, yang disebut komponen HTML AMP, memudahkan penerapan pola umum dengan performa yang baik.

File HTML AMP yang paling sederhana akan terlihat seperti ini (terkadang disebut sebagai boilerplate AMP):

<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

Lihat kode halaman kosong yang Anda buat selama penyiapan, yang menyertakan boilerplate ini dan memiliki beberapa tambahan⁠—yang penting, tag <style amp-custom> yang menyertakan banyak CSS yang diminifikasi.

AMP tidak memiliki opini terkait desain dan tidak menerapkan kumpulan gaya tertentu. Sebagian besar komponen AMP memiliki penataan gaya yang sangat dasar. Pembuat halaman menyerahkan kepada CSS khusus mereka. Di sinilah <style amp-custom> berperan.

Namun, Template AMP menyediakan gaya CSS opininya sendiri yang didesain dengan indah, lintas browser, dan responsif untuk membantu Anda membuat halaman AMP yang elegan dengan cepat. Kode template yang telah Anda download menyertakan gaya CSS dogmatis ini di <style amp-custom>.

Kita akan mulai dengan menambahkan kembali beberapa komponen yang telah kita hapus dari template, untuk membuat shell untuk halaman, termasuk menu navigasi, gambar header halaman, dan judul.

Kami akan mendapatkan bantuan dari halaman komponen UI Mulai AMP, tetapi kami tidak akan menggali lebih dalam mengenai detail penerapannya. Langkah berikutnya dalam codelab akan memberikan banyak peluang untuk melakukannya.

Menambahkan navigasi responsif

Buka https://ampstart.com/components#navigation dan salin serta tempelkan kode HTML yang disediakan untuk MENUBAR RESPONSIF ke dalam body halaman Anda.

Kode yang diberikan oleh AMP Start mencakup struktur class HTML dan CSS yang diperlukan untuk menerapkan menu navigasi responsif untuk halaman Anda.

Cobalah: Ubah ukuran jendela Anda untuk melihat responsnya terhadap berbagai ukuran layar.

Kode ini menggunakan kueri media CSS dan komponen AMP amp-sidebar dan amp-accordion.

Tambahkan banner besar dan judul

AMP Start juga menyediakan cuplikan yang siap pakai untuk gambar dan judul yang bagus dan responsif.

Buka https://ampstart.com/components#media lalu salin dan tempel kode HTML yang diberikan untuk Fullpage Hero ke kode Anda, tepat setelah <!-- End Navbar --> comment di body.

Mari perbarui gambar dan judul sekarang.

Seperti yang mungkin telah Anda lihat, ada dua tag amp-img yang berbeda dalam cuplikan kode. Yang satu digunakan untuk lebar yang lebih kecil dan harus mengarah ke gambar yang beresolusi lebih rendah, dan yang satunya untuk layar yang lebih besar. Keduanya secara otomatis dialihkan berdasarkan atribut media, yang didukung AMP di semua elemen AMP.

Perbarui src, width, dan height ke gambar yang berbeda dan judul untuk "Mendaki Gunung Terindah di Barat Laut Pasifik" dengan mengganti <figure>...</figure> yang ada dengan:

<figure class="ampstart-image-fullpage-hero m0 relative mb4">
    <amp-img width="600" height="900" layout="responsive" src="https://unsplash.it/600/900?image=1003" media="(max-width: 415px)"></amp-img>
    <amp-img height="1800" layout="fixed-height" src="https://unsplash.it/1200/1800?image=1003" media="(min-width: 416px)"></amp-img>
    <figcaption class="absolute top-0 right-0 bottom-0 left-0">
      <header class="p3">
        <h1 class="ampstart-fullpage-hero-heading mb3">
        <span class="ampstart-fullpage-hero-heading-text">
          Most Beautiful Hikes in the Pacific Northwest
        </span>
      </h1>
        <span class="ampstart-image-credit h4">
        By <a href="#" role="author" class="text-decoration-none">D.F. Roy</a>,<br> January 14, 2017
      </span>
      </header>
      <footer class="absolute left-0 right-0 bottom-0">
        <a class="ampstart-readmore py3 caps line-height-2 text-decoration-none center block h5" href="#content">Read more</a>
      </footer>
    </figcaption>
</figure>

Mari kita lihat halaman sekarang:

Ringkasan

  • Anda telah membuat shell untuk halaman, termasuk navigasi responsif serta banner besar dan judul.
  • Anda telah mempelajari lebih lanjut Template AMP dan menggunakan komponen UI Start AMP untuk menyusun shell halaman dengan cepat.

Kode yang lengkap untuk bagian ini dapat ditemukan di sini: http://codepen.io/aghassemi/pen/RpRdzV

Pada bagian ini, kami akan menambahkan gambar, video, sematan, dan beberapa teks responsif ke halaman kami.

Mari kita tambahkan elemen main yang akan menghosting konten halaman. Kami akan menambahkannya ke akhir body:

<main id="content">

</main>

Menambahkan judul dan paragraf

Tambahkan kode berikut di dalam main:

<h2 class="px3 pt2 mb2">Photo Gallery</h2>
<p class="ampstart-dropcap mb4 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

Karena AMP hanyalah HTML, tidak ada yang istimewa tentang kode ini kecuali untuk nama class CSS tersebut. Apa yang dimaksud dengan px3, mb2, dan ampstart-dropcap? Dari mana asal mereka?

Class ini bukan bagian dari HTML AMP. Template AMP Start menggunakan Basscss untuk menyediakan toolkit CSS tingkat rendah dan menambahkan class khusus untuk AMP Start.

Dalam cuplikan ini, px3 dan mb2 ditentukan oleh Basscss dan masing-masing diterjemahkan ke padding-left-right dan margin-bottom. ampstart-dropcap disediakan oleh AMP Start dan memperbesar huruf pertama paragraf.

Anda dapat menemukan dokumentasi untuk class CSS yang telah ditentukan sebelumnya di http://basscss.com/ dan https://ampstart.com/components.

Mari kita lihat tampilan halamannya sekarang:

Menambahkan gambar

Membuat halaman responsif mudah dilakukan di AMP. Umumnya, membuat komponen AMP responsif semudah menambahkan atribut layout="responsive". Serupa dengan tag img HTML, amp-img juga mendukung srcset untuk menentukan gambar yang berbeda untuk berbagai lebar area pandang dan kepadatan piksel.

Tambahkan amp-img ke main:

<amp-img 
  layout="responsive" width="1080" height="720"
  srcset="https://unsplash.it/1080/720?image=1043 1080w, https://unsplash.it/720/480?image=1043 720w" 
  alt="Photo of mountains and trees landscape">
</amp-img>

Dengan kode ini, kita membuat gambar responsif dengan menentukan layout="responsive" dan memberikan width dan height.

Mengapa saya harus menentukan lebar dan tinggi saat menggunakan tata letak responsif?

Dua alasan:

  1. AMP menggunakan lebar dan tinggi untuk menghitung rasio lebar tinggi dan mempertahankan tinggi yang tepat saat lebar berubah agar sesuai dengan penampung induknya.
  2. AMP menerapkan ukuran statis untuk semua elemen untuk memastikan pengalaman pengguna yang baik (tanpa melompat ke halaman), serta menentukan ukuran dan posisi setiap elemen untuk menata letak halaman sebelum resource didownload.

Mari kita lihat halaman sekarang:

Menambahkan video yang diputar otomatis

AMP mendukung banyak pemutar video, seperti YouTube dan Vimeo. AMP memiliki versi elemen video HTML5 sendiri di bawah amp-video komponen yang diperluas. Beberapa pemutar video ini, termasuk amp-video dan amp-youtube juga mendukung putar otomatis tanpa suara di perangkat seluler.

Serupa dengan amp-img, amp-video dapat menjadi responsif dengan penambahan layout="responsive"

Mari tambahkan video yang diputar otomatis ke halaman.

Tambahkan paragraf lain dan elemen amp-video berikut ke main:

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

<amp-video 
  layout="responsive" width="1280" height="720"
  autoplay controls loop
  src="https://storage.googleapis.com/ampconf-76504.appspot.com/Bullfinch%20-%202797.mp4">
</amp-video>

Mari kita lihat:

Menambahkan sematan

AMP memiliki komponen yang diperluas untuk berbagai sematan pihak ketiga seperti Twitter dan Instagram. Untuk sematan yang tidak memiliki komponen AMP, akan selalu ada amp-iframe.

Mari kita tambahkan sematan Instagram ke halaman kita.

Tidak seperti amp-img dan amp-video, amp-instagram bukan komponen bawaan. Tag skrip impor harus disertakan secara eksplisit di head halaman AMP sebelum komponen dapat digunakan.

boilerplate AMP Start yang kita gunakan menyertakan beberapa tag skrip impor. Cari keduanya di awal tag head dan pastikan baris skrip impor berikut disertakan:

<script custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js" async></script>

Tambahkan paragraf lain dan elemen amp-instagram berikut ke main:

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>
    
<amp-instagram
   layout="responsive" width="566" height="708"
   data-shortcode="BJ_sPxzAGyg">
</amp-instagram>

Mari kita lihat:

Itu mungkin konten yang cukup untuk saat ini.

Ringkasan

  • Anda telah mempelajari komponen responsif di AMP.
  • Anda telah menambahkan berbagai jenis konten media dan teks.

Kode yang lengkap untuk bagian ini dapat ditemukan di sini: http://codepen.io/aghassemi/pen/OpXGoa

Sejauh ini, kami hanya membuat konten statis untuk halaman kami. Di bagian ini, kami akan membuat galeri foto interaktif menggunakan komponen seperti carousel, Lightbox, dan tindakan AMP.

Meskipun AMP tidak mendukung JavaScript kustom, AMP tetap mengekspos beberapa elemen penyusun untuk menerima dan menangani tindakan pengguna.

Membuat setiap gambar untuk halaman AMP yang berfokus pada foto terlihat di halaman tidak akan menciptakan pengalaman pengguna yang luar biasa. Untungnya, kita dapat menggunakan amp-carousel untuk membuat slide foto yang dapat digeser secara horizontal.

Pertama, pastikan tag skrip untuk amp-carousel disertakan dalam head:

<script custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js" async></script>

Sekarang mari kita tambahkan amp-carousel responsif dari jenis slides dengan beberapa gambar ke main:

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

<amp-carousel 
  layout="responsive" width="1080" height="720"
  type="slides">

    <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1039" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1040" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1041" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1042" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1043" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1044" layout="fill"></amp-img>
</amp-carousel>

type="slides" memastikan bahwa hanya satu gambar yang akan terlihat pada satu waktu, dan ini memungkinkan pengguna menggeser gambar tersebut.

Untuk gambar di dalam carousel, kami menggunakan layout="fill", karena carousel slide selalu mengisi ukurannya dengan elemen turunan, sehingga tidak perlu menentukan tata letak yang berbeda yang memerlukan lebar dan tinggi.

Mari kita coba dan lihat tampilannya:

1.gif

Sekarang tambahkan penampung yang dapat di-scroll secara horizontal untuk thumbnail gambar ini. Kita akan menggunakan <amp-carousel> lagi, tetapi tanpa type="slides" dan dengan tata letak dengan tinggi tetap.

Tambahkan yang berikut setelah elemen amp-carousel sebelumnya.

<amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img src="https://unsplash.it/108/72?image=1037" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1038" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1039" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1040" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1041" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1042" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1043" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1044" layout="fixed" width="108" height="72"></amp-img>

</amp-carousel>

Perhatikan bahwa untuk gambar thumbnail, kita hanya menggunakan layout="fixed" dan versi resolusi rendah dari foto yang sama.

Mari kita lihat:

Mengubah gambar saat pengguna mengetuk thumbnail

Untuk melakukannya, kita harus mengaitkan peristiwa seperti tap ke tindakan seperti mengubah slide.

peristiwa: Kita dapat menggunakan atribut on untuk menginstal pengendali peristiwa pada elemen dan peristiwa tap didukung di semua elemen.

tindakan: amp-carousel menampilkan tindakan goToSlide(index=INTEGER) yang dapat kita panggil dari pengendali peristiwa ketuk dari setiap gambar thumbnail.

Setelah mengetahui peristiwa dan tindakan tersebut, mari kita satukan.

Pertama-tama, kita harus memberi id carousel slide sehingga kita dapat mereferensikannya dari pengendali peristiwa ketuk di thumbnail.

Ubah kode yang ada untuk menambahkan atribut id ke carousel slide (pertama:

<amp-carousel 
  id="imageSlides"
  type="slides"

  ....

Sekarang mari kita instal pengendali peristiwa (on="tap:imageSlides.goToSlide(index=<slideNumber>)")" pada setiap gambar thumbnail:

<amp-img on="tap:imageSlides.goToSlide(index=0)" role="button" tabindex="1" layout="fixed" ...
<amp-img on="tap:imageSlides.goToSlide(index=1)" role="button" tabindex="1" layout="fixed" ...
<amp-img on="tap:imageSlides.goToSlide(index=2)" role="button" tabindex="1" layout="fixed" ...
...

Perhatikan bahwa kita juga harus memberinya tabindex dan menetapkan ARIA role untuk aksesibilitas.

Begitulah ringkasannya. Sekarang, mengetuk setiap gambar thumbnail akan menampilkan gambar yang sesuai di dalam carousel slide.

2.gif

Tandai thumbnail saat pengguna mengetuknya

Bisakah kami melakukannya? Sepertinya tidak ada tindakan yang mengubah class CSS untuk elemen yang akan dipanggil dari pengendali peristiwa ketuk. Jadi, bagaimana kita dapat menyoroti thumbnail yang dipilih?

<amp-selector> untuk menyelamatkan.

amp-selector berbeda dengan komponen yang telah digunakan sejauh ini. Ini bukan komponen presentasi, karena tidak memengaruhi tata letak halaman; ini adalah elemen penyusun yang memungkinkan halaman AMP untuk mengetahui opsi apa yang telah dipilih pengguna.

Yang dilakukan amp-selector cukup sederhana namun hebat:

  • amp-selector dapat berisi elemen HTML atau komponen AMP arbitrer.
  • Elemen turunan amp-selector mana pun dapat menjadi opsi jika memiliki atribut option=<value>.
  • Saat pengguna mengetuk elemen yang merupakan opsi, amp-selector hanya menambahkan atribut selected ke elemen tersebut (dan menghapusnya dari elemen opsi lain dalam mode pemilihan tunggal).
  • Anda dapat menyesuaikan gaya elemen yang dipilih dalam CSS kustom dengan menargetkan atribut selected menggunakan pemilih atribut CSS.

Mari kita lihat bagaimana hal ini membantu kita menyelesaikan tugas yang ada.

Tambahkan tag skrip untuk amp-selector ke head:

<script custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js" async></script>
  1. Gabungkan carousel thumbnail dalam amp-selector
  2. Jadikan setiap thumbnail sebagai opsi dengan menambahkan atribut option=<value>.
  3. Buat thumbnail pertama yang dipilih secara default dengan menambahkan atribut selected.
<amp-selector>

  <amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img option=0 selected on="tap:imageSlides.goToSlide(index=0)" ...
      
    <amp-img option=1 on="tap:imageSlides.goToSlide(index=1)" ...

    ...

  </amp-carousel>

</amp-selector>

Sekarang kita perlu menambahkan gaya visual untuk menandai thumbnail yang dipilih.

Tambahkan CSS kustom berikut di <style amp-custom> setelah boilerplate CSS yang diminifikasi dari AMP Start:

<style amp-custom>
...

/* low opacity for non-selected thumbnails */
amp-selector amp-img[option] {
  opacity: 0.4;
}

/* normal opacity for the selected thumbnail */
amp-selector amp-img[option][selected] {
  opacity: 1;
}

</style>

Mari kita lihat:

3.gif

Bagus, tapi apakah Anda menemukan bug?

Jika pengguna menggeser carousel slide, thumbnail yang dipilih tidak akan diperbarui untuk mencerminkannya. Bagaimana cara mengikat slide saat ini di carousel dengan thumbnail yang dipilih?

Di bagian berikutnya, kita akan mempelajari caranya.

Ringkasan

  • Anda telah mempelajari berbagai jenis carousel dan cara menggunakannya.
  • Anda telah menggunakan tindakan dan peristiwa AMP untuk mengubah slide yang terlihat di carousel gambar saat pengguna mengetuk gambar thumbnail.
  • Anda telah mempelajari amp-selector dan bagaimana menggunakannya sebagai elemen penyusun untuk mengimplementasikan kasus penggunaan yang menarik.

Kode yang lengkap untuk bagian ini dapat ditemukan di sini: http://codepen.io/aghassemi/pen/gmMJMy

Pada bagian ini, kita akan menggunakan amp-bind untuk meningkatkan interaktivitas galeri gambar dari bagian sebelumnya.

Apa itu amp-bind?

Komponen AMP inti amp-bind memungkinkan Anda membuat interaktivitas kustom dengan data binding dan ekspresi.

amp-bind memiliki tiga bagian penting:

  1. Negara bagian
  2. Binding
  3. Mutasi

Status adalah variabel status aplikasi, yang berisi apa pun mulai dari nilai tunggal hingga struktur data kompleks. Semua komponen dapat membaca dan menulis ke variabel bersama ini.

Binding adalah ekspresi yang mengaitkan status dengan atribut HTML atau konten dari elemen.

Mutasi adalah tindakan mengubah nilai status sebagai hasil dari beberapa tindakan atau peristiwa pengguna.

Kekuatan amp-bind dimulai saat mutasi terjadi: Semua komponen yang memiliki binding ke status tersebut akan diberi tahu dan akan otomatis diupdate untuk mencerminkan status baru.

Mari kita lihat penerapannya!

Sebelumnya, kami menggunakan tindakan AMP (misalnya goToSlide()) untuk mengaitkan carousel slide gambar penuh dengan peristiwa tap pada gambar thumbnail dan menggunakan amp-selector untuk menandai thumbnail yang dipilih.

Mari lihat cara untuk sepenuhnya menerapkan kembali kode ini menggunakan pendekatan amp-bind untuk data binding.

Namun, sebelum memulai coding, mari kita desain pendekatannya:

1. Apa nama negara bagian kami?

Cukup sederhana dalam kasus ini, satu-satunya nilai yang penting bagi kita adalah berapa nomor slide saat ini. Jadi, selectedSlide adalah negara bagian kita.

2. Apa yang dimaksud dengan binding?

Apa yang perlu diubah saat selectedSlide berubah?

  • slide carousel gambar penuh yang terlihat: 
<amp-carousel [slide]="selectedSlide" ...
  • Item selected di amp-selector juga perlu diubah. Hal ini akan memperbaiki bug yang kami alami di bagian sebelumnya.
<amp-selector [selected]="selectedSlide" ...

3. Apa mutasi kami?

Kapan selectedSlide perlu diubah?

  • Saat pengguna berpindah ke slide baru di carousel gambar penuh dengan menggeser:
<amp-carousel on="slideChange:AMP.setState({selectedSlide:event.index})" ...
  • Saat pengguna memilih thumbnail:
<amp-selector on="select:AMP.setState({selectedSlide:event.targetOption})" ...

Mari kita gunakan AMP.setState untuk memicu mutasi, yang berarti kita tidak lagi memerlukan semua kode on="tap:imageSlides.goToSlide(index=n)" yang kita miliki di thumbnail.

Mari kita satukan semuanya:

Tambahkan tag skrip untuk amp-bind ke head:

<script custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" async></script>

Ganti kode galeri yang ada dengan pendekatan baru:

<amp-carousel [slide]="selectedSlide" on="slideChange:AMP.setState({selectedSlide:event.index})" type="slides" id="imageSlides" layout="responsive" width="1080" height="720">

  <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1039" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1040" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1041" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1042" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1043" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1044" layout="fill"></amp-img>

</amp-carousel>


<amp-selector [selected]="selectedSlide" on="select:AMP.setState({selectedSlide:event.targetOption})">

  <amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img option=0 selected src="https://unsplash.it/108/72?image=1037" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=1 src="https://unsplash.it/108/72?image=1038" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=2 src="https://unsplash.it/108/72?image=1039" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=3 src="https://unsplash.it/108/72?image=1040" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=4 src="https://unsplash.it/108/72?image=1041" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=5 src="https://unsplash.it/108/72?image=1042" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=6 src="https://unsplash.it/108/72?image=1043" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=7 src="https://unsplash.it/108/72?image=1044" layout="fixed" width="108" height="72"></amp-img>

  </amp-carousel>

</amp-selector>

Mari kita coba. Ketuk thumbnail, dan slide gambar akan berubah. Geser slide gambar, dan thumbnail yang ditandai akan berubah.

4.gif

Tambahkan teks ke galeri

Kita telah melakukan pekerjaan berat untuk menentukan dan memutasikan status slide kita saat ini. Sekarang kita dapat dengan mudah memberikan binding tambahan untuk memperbarui informasi lainnya berdasarkan nomor slide saat ini.

Mari tambahkan teks "Gambar x/of y" ke galeri kami:

Tambahkan kode berikut di atas elemen carousel slide:

<div class="px3">Image <span [text]="1*selectedSlide + 1">1</span> of 8</div>

Kali ini, kita mengikat ke teks dalam elemen menggunakan [text]=, bukan mengikat ke atribut HTML.

Mari kita coba:

5.gif

Ringkasan

  • Anda telah mempelajari amp-bind.
  • Anda telah menggunakan amp-bind untuk menerapkan versi galeri gambar yang ditingkatkan.

Kode yang lengkap untuk bagian ini dapat ditemukan di sini: http://codepen.io/aghassemi/pen/MpeMdL

Pada bagian ini, kita akan menggunakan dua fitur baru untuk menambahkan animasi ke halaman.

Menambahkan efek paralaks pada judul

amp-fx-collection adalah ekstensi yang menyediakan kumpulan efek visual preset seperti paralaks yang dapat dengan mudah diaktifkan pada elemen apa pun dengan atribut.

Dengan efek paralaks, saat pengguna men-scroll halaman, elemen men-scroll lebih cepat atau lebih lambat bergantung pada nilai yang ditetapkan ke atribut.

Efek paralaks dapat diaktifkan dengan menambahkan atribut amp-fx="parallax" data-parallax-factor="<a decimal factor>" ke elemen HTML atau AMP.

  • Nilai faktor yang lebih besar dari 1 membuat elemen men-scroll lebih cepat saat pengguna men-scroll halaman ke bawah.
  • Nilai faktor kurang dari 1 membuat elemen men-scroll lebih lambat saat pengguna men-scroll halaman ke bawah.

Mari tambahkan paralaks dengan faktor 1,5 pada judul halaman kita dan lihat tampilannya!

Tambahkan tag skrip untuk amp-fx-collection ke head:

<script custom-element="amp-fx-collection" src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js" async></script>

Sekarang, temukan elemen judul header yang ada dalam kode dan tambahkan atribut amp-fx="parallax" and data-parallax-factor="1.5" ke dalamnya:

<header amp-fx="parallax" data-parallax-factor="1.5" class="p3">
  <h1 class="ampstart-fullpage-hero-heading mb3">
    <span class="ampstart-fullpage-hero-heading-text">
      Most Beautiful Hikes in the Pacific Northwest
    </span>
  </h1>
  <span class="ampstart-image-credit h4">
    By <a href="#" role="author" class="text-decoration-none">D.F. Roy</a>,<br> January 14, 2017
  </span>
</header>

Mari kita lihat hasilnya:

6.gif

Judulnya sekarang di-scroll lebih cepat daripada halaman lainnya. Keren!

Menambahkan animasi ke halaman

amp-animation adalah fitur yang menghadirkan Web Animations API ke halaman AMP.

Pada bagian ini, kita akan menggunakan amp-animation untuk membuat efek zoom-in yang halus pada gambar sampul.

Tambahkan tag skrip untuk amp-animation ke head:

<script custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js" async></script>

Sekarang kita perlu menentukan animasi dan elemen target yang diterapkan.

Animasi didefinisikan sebagai JSON dalam tag amp-animation level atas.

Sisipkan kode berikut tepat di bawah tag body pembuka di halaman Anda.

<amp-animation trigger="visibility" layout="nodisplay">
    <script type="application/json">
      {
        "target": "heroimage",
        "duration": 30000,
        "delay": 0, 
        "fill": "forwards",
        "easing": "ease-out",
        "keyframes": {"transform":  "scale(1.3)"}
      }
      </script>
</amp-animation>

Kode ini menentukan animasi yang berjalan selama 30 detik tanpa penundaan dan menskalakan gambar menjadi 30% lebih besar.

Kita menentukan fill maju untuk memungkinkan gambar tetap diperbesar setelah animasi berakhir. target adalah HTML id dari elemen tempat animasi diterapkan.

Mari tambahkan id ke elemen banner besar di halaman kita, sehingga amp-animation dapat menindaklanjutinya.

  1. Temukan banner besar yang ada (banner besar dengan layout="fixed-height") dalam kode Anda dan tambahkan id="heroimage" ke tag amp-img.
  2. Demi kemudahan, hapus juga media="(min-width: 416px)" dan hapus amp-img resolusi rendah lainnya sehingga kita tidak perlu menangani beberapa animasi dan kueri media di amp-animation untuk saat ini.
<figure class="ampstart-image-fullpage-hero m0 relative mb4">

    <amp-img id="heroimage" height="1800" layout="fixed-height" src="https://unsplash.it/1200/1800?image=1003"></amp-img>

    <figcaption class="absolute top-0 right-0 bottom-0 left-0">

...

Seperti yang mungkin telah Anda lihat, menskalakan gambar akan membuat gambar tersebut meluap dari induknya, sehingga kita perlu memperbaikinya dengan menyembunyikan tambahan.

Tambahkan aturan CSS berikut di akhir <style amp-custom> yang ada:

.ampstart-image-fullpage-hero {
  overflow: hidden;
}

Mari kita coba dan lihat tampilannya:

7,gif

Ringan!

Namun saya tetap dapat melakukannya dengan CSS. Apa gunanya amp-animation?

Hal ini berlaku dalam kasus ini, tetapi amp-animation memungkinkan fungsi tambahan yang tidak dapat dilakukan dengan CSS saja. Misalnya, animasi dapat dipicu berdasarkan visibilitas (dan juga dijeda berdasarkan visibilitas) atau animasi dapat dipicu dengan tindakan AMP. amp-animation juga didasarkan pada Web Animations API, yang memiliki lebih banyak fitur daripada animasi CSS, terutama seputar komposabilitas.

Ringkasan

  • Anda telah mempelajari cara membuat efek paralaks dengan amp-fx-collection.
  • Anda telah mempelajari amp-animation.

Kode yang sudah selesai untuk bagian ini dapat ditemukan di sini: http://codepen.io/aghassemi/pen/OpXKzo

Anda baru saja selesai membuat halaman AMP yang menarik dan interaktif.

Mari kita rayakan dengan melihat kembali apa yang telah Anda capai hari ini.

Berikut adalah link ke halaman yang sudah selesai: http://s.codepen.io/aghassemi/debug/OpXKzo

... dan kode akhir: http://codepen.io/aghassemi/pen/OpXKzo

GIF.Tanpa judul

Koleksi entri CodePen untuk codelab ini dapat ditemukan di sini: https://codepen.io/collection/XzKmNB/

Oh, sebelum berangkat...

Kami lupa memeriksa tampilan halaman kami pada faktor bentuk lain, seperti tablet dalam mode lanskap.

Mari kita lihat:

GIF.Tanpa judul

Sempurna!

Semoga hari Anda menyenangkan.

Apa selanjutnya

Codelab ini hanya membahas sebagian kemungkinan yang ada di AMP. Ada banyak referensi dan codelab yang tersedia untuk membantu Anda membuat halaman AMP yang menakjubkan:

Jika Anda memiliki pertanyaan atau mengalami masalah, harap temukan kami di saluran AMP Slack atau buat diskusi, laporan bug, atau permintaan fitur di GitHub.