Step 1: Create a web app¶

First, we will create our app — a simple web page with a list of items to order. Copy the code below and save it as an HTML file.

HTML file¶

// tutorial.html
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Food Delivery Example</title>
      <link href="https://storage.googleapis.com/alan-tutorial/web-sdk/styles.css" rel="stylesheet">
   </head>
   <body>
      <h1>Food Delivery</h1>
      <h3>Menu</h3>
      <div class="menu">
         <div class="menu-item" id="pepperoni">
            <img src="https://storage.googleapis.com/alan-tutorial/web-sdk/pepperoni.jpg"/>
            Pepperoni
         </div>
         <div class="menu-item" id="margherita">
            <img src="https://storage.googleapis.com/alan-tutorial/web-sdk/margherita.jpg"/>
            Margherita
         </div>
         <div class="menu-item" id="burrito">
            <img src="https://storage.googleapis.com/alan-tutorial/web-sdk/burrito.jpg"/>
            Burrito
         </div>
         <div class="menu-item" id="burger">
            <img src="https://storage.googleapis.com/alan-tutorial/web-sdk/burger.jpg"/>
            Burger
         </div>
         <div class="menu-item" id="taco">
            <img src="https://storage.googleapis.com/alan-tutorial/web-sdk/taco.jpg"/>
            Taco
         </div>
         <div class="menu-item" id="apple-pie">
            <img src="https://storage.googleapis.com/alan-tutorial/web-sdk/applepie.jpg"/>
            Apple Pie
         </div>
      </div>
      <div id="order-details">
         <div id="order"></div>
         <div id="address"></div>
         <div id="time"></div>
         <div id="comment"></div>
      </div>
   </body>
</html>

Open the file in the browser. You will see a page like this: