feat: add retail web as Web SDK example (#27)

Co-authored-by: xiaoweii <[email protected]>

.github/workflows/build-retail-web.yml

@@ -0,0 +1,19 @@
+name: Build for Retail Web
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  build-retail-web:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Run build
+        run: |
+          cd retail-web
+          npm i
+          npm run lint
+          npm run build

README.md

@@ -53,6 +53,9 @@ License: [Apache-2.0](https://github.com/funnyzak/react-native-v2ex/blob/dev/LIC
 ## Web SDK Example
 It's a Vue2.x and Express.JS application. See [it](./web/README.md) for more details.
 
+## Web SDK Example for Retail Demo Store
+It's a Vue3.x demo retail web application. See [it](./retail-web/README.md) for more details.
+
 ## Security
 
 See [CONTRIBUTING](CONTRIBUTING.md#security-issue-notifications) for more information.

retail-web/.env

@@ -0,0 +1,9 @@
+VITE_IMAGE_ROOT_URL=/images/
+VITE_BOT_NAME=RetailDemoStore
+VITE_USE_LOCAL_DATA=true
+VITE_CLICKSTREAM_APPID=
+VITE_CLICKSTREAM_ENDPOINT=
+VITE_SENSORDATA_APPID=
+VITE_SENSORDATA_ENDPOINT=
+VITE_FIREBASE_CONFIG=
+

retail-web/.gitignore

@@ -0,0 +1,26 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*
+
+# Layer0
+.layer0/
+dist-layer0/
+images

retail-web/README.md

@@ -0,0 +1,45 @@
+# Retail Demo Store Web UI
+
+The website is a purely static retail web store modified from [aws-samples/retail-demo-store](https://github.com/aws-samples/retail-demo-store). You can quickly deploy and use it locally without relying on the deployment of any service resources. Additionally, we have pre-integrated the [Clickstream Web SDK](https://github.com/awslabs/clickstream-web) to demonstrate how to integrate the SDK and collect data in an e-commerce web application.
+
+## Local deploy
+1. After cloning this repository, download the product images ZIP resources from the [link](https://code.retaildemostore.retail.aws.dev/images.tar.gz) and unzip the files.
+2. After unzip the files, you will get an `images` folder, let's copy this folder into this project root folder. The path to the folder should be `retail-web/images/`.
+3. Next, execute the following command to install the dependencies and start the website locally.
+   ```bash
+   npm i && npm run dev
+   ```
+   Then you can access it in your browser at [http://localhost:8080](http://localhost:8080).
+
+## Configure Clickstream SDK
+
+You can edit the `.env` file to and input your appId and endpoint:
+```bash
+VITE_CLICKSTREAM_APPID=your appId
+VITE_CLICKSTREAM_ENDPOINT=your endpoint
+```
+
+Or you can click the "Shop" dropdown at the top of the homepage, then select "Configure Clickstream" to enter the Clickstream SDK configuration page. Next, input your appId and endpoint.
+
+
+## Configure SensorData and Firebase SDK
+In this demo application, you can also simultaneously use Sensor Data Web SDK and the Firebase Web SDK to send data with Clickstream Web SDK. You can configure Firebase and the Sensor SDK as follows:
+
+```bash
+// Configure Sensor Data SDK
+VITE_SENSORDATA_APPID=your appId
+VITE_SENSORDATA_ENDPOINT=your endpoint
+
+// Configure Firebase SDK
+VITE_FIREBASE_CONFIG={apiKey:'xxx',authDomain:'xxx',projectId:'xxx',storageBucket:'xxx',messagingSenderId:'xxx',appId:'xxx',measurementId:'G-xxx'}
+```
+
+## Use your own deployed API
+
+If you follow [Deployment Instructions](https://github.com/aws-samples/retail-demo-store/blob/master/Deployment-Instructions.md) and have deployed related resources in your AWS account, you can also directly use your remote API to access our web-ui, modify as follows:
+1. Copy all content in your `.env` file which contains your service API such as `PRODUCTS_SERVICE_DOMAIN`,`USERS_SERVICE_DOMAIN` and `CARTS_SERVICE_DOMAIN`, and paste it to the bottom of our `.env` file.
+2. Modify use local data variable in the `.env` file to false
+   ```bash
+   VITE_USE_LOCAL_DATA=false
+   ```
+Then you can execute `npm run dev` to preview retail website with your own API.

retail-web/format-images.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+
+find images -type d -name "* *" | while IFS= read -r dir; do
+    echo "Processing directory: $dir"
+    cd "$dir" || exit
+
+    for file in *; do
+        if [[ "$file" == *.jpg ]]; then
+          break
+        fi
+        filename=$(basename "$file" .jpg)
+        newname=$(echo "$filename" | sed 's/...$/.jpg/')
+        mv "$file" "$newname"
+    done
+    cd ../../
+done

retail-web/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
+    <title>Retail Demo Store</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but the Retail Demo Store doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.slim.min.js" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
+    <script type="module" src="/src/main.js"></script>
+    <script>
+      window.global = window;
+    </script>
+  </body>
+</html>