AMP

Thiết lập

Yêu cầu trước khi tiến hành:

Trước khi bắt đầu bài thực hành này, bạn sẽ cần những điều sau:

  • Kiến thức cơ bản về HTML, CSS và JavaScript
  • Kiến thức cơ bản về các khái niệm cốt lõi của AMP (xem bài thực hành "Chuyển đổi HTML sang AMP")
  • Một trình duyệt tùy theo bạn chọn
  • Một trình soạn văn bản tùy theo bạn chọn

Thiết lập môi trường phát triển của bạn

Bước 1. Tải về đoạn code

  1. Tải về đoạn code cho hướng dẫn này, vốn được nén thành một tập tin zip, từ URL sau: https://github.com/ampproject/docs/raw/master/tutorial_source/amp-pets-story.zip

  2. Giải nén nội dung trong tập tin zip đó. Trong thư mục amp-pets-story là các tập tin hình ảnh, video, âm thanh và dữ liệu mà ta sẽ dùng để tạo câu chuyện. Tập tin pets.html là điểm khởi đầu cho câu chuyện. Phiên bản hoàn chỉnh của câu chuyện có thể tìm thấy trong tập tin pets-completed.html.

Bước 2. Chạy trang mẫu

Để thử Câu chuyện web mẫu, ta cần truy cập những tập tin này từ một máy chủ web. Có nhiều cách để tạo một máy chủ web cục bộ tạm thời cho mục đích thử nghiệm. Đây là những phương án, hãy chọn một cái hợp với bạn nhất:

Sau khi thiết lập máy chủ web cục bộ, hãy nhìn vào diện mạo của Câu chuyện web hoàn chỉnh của chúng tôi khi đến phần cuối hướng dẫn này, bằng cách truy cập URL sau:

http://localhost:8000/pets-completed.html

QUAN TRỌNG – Hãy chắc chắn là URL được phục vụ từ localhost, bằng không thì Câu chuyện web có thể không tải được đúng cách, và bạn có thể gặp phải những lỗi như "source" "must start with "https://" or "//" or be relative and served from either https or from localhost. ("source" phải bắt đầu bằng "https://" hoặc "//" hoặc là địa chỉ tương đối và được phục vụ từ https hoặc localhost)

Nhấp chuột coi hết câu chuyện hoàn chỉnh và nắm được tổng quan về cái mà chúng ta sắp tạo nên.