From f85650a0a423b5ef34172c65be3d6745e2ac94e6 Mon Sep 17 00:00:00 2001 From: Harshil Agrawal Date: Tue, 15 Oct 2024 15:16:06 +0200 Subject: [PATCH] update pipelines tutorial --- .../query-data-with-motherduck/index.mdx | 577 +++++++++++++----- 1 file changed, 429 insertions(+), 148 deletions(-) diff --git a/src/content/docs/pipelines/tutorials/query-data-with-motherduck/index.mdx b/src/content/docs/pipelines/tutorials/query-data-with-motherduck/index.mdx index a83b4f8bdb1c7f..99b1aebfedc2b3 100644 --- a/src/content/docs/pipelines/tutorials/query-data-with-motherduck/index.mdx +++ b/src/content/docs/pipelines/tutorials/query-data-with-motherduck/index.mdx @@ -1,29 +1,359 @@ --- -updated: 2024-10-09 +updated: 2024-10-15 difficulty: Intermediate content_type: 📝 Tutorial pcx_content_type: tutorial -title: Query R2 data with MotherDuck +title: Analyzing Clickstream Data with MotherDuck and Cloudflare R2 products: - R2 + - Workers tags: - MotherDuck languages: - SQL --- -import { Render, PackageManagers } from "~/components"; +import { Render, PackageManagers, Details } from "~/components"; In this tutorial, you will learn how to ingest clickstream data to a R2 bucket using Pipelines. You will also learn how to connect the bucket to MotherDuck. You will then query the data using MotherDuck. +For this tutorial, you will build a landing page of an e-commerce website. The page will list the products available for sale. A user can click on the view button to view the product details or click on the add to cart button to add the product to their cart. The focus of this tutorial is to show how to ingest the data to R2 and query it using MotherDuck. Hence, the landing page will be a simple HTML page with no functionality. + ## Prerequisites 1. Create a [R2 bucket](/r2/buckets/create-buckets/) in your Cloudflare account. 2. A [MotherDuck](https://motherduck.com/) account. +3. Install [`Node.js`](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm). + +
+ Use a Node version manager like [Volta](https://volta.sh/) or + [nvm](https://github.com/nvm-sh/nvm) to avoid permission issues and change + Node.js versions. [Wrangler](/workers/wrangler/install-and-update/), discussed + later in this guide, requires a Node version of `16.17.0` or later. +
+ +## 1. Create a new project + +You will create a new Worker project that will use [Static Assets](/workers/static-assets/) to serve the HTML file. + +Create a new Worker project by running the following commands: + + + + + +Navigate to the `e-commerce-pipelines` directory: + +```sh frame="none" +cd e-commerce-pipelines +``` + +## 2. Create the front-end + +Using Static Assets, you can serve the frontend of your application from your Worker. To use Static Assets, you need to add the required bindings to your `wrangler.toml` file. + +```toml +[assets] +directory = "public" +``` + +Next, create a `public` directory and add an `index.html` file. The `index.html` file should contain the following HTML code: + +
+ Select to view the HTML code +```html + + + + + E-commerce Store + + + + +
+

Our Products

+
+ + + +
+
+ + + + + + +``` +
+ +The above code does the following: + +- Uses Tailwind CSS to style the page. +- Renders a list of products. +- Adds a button to view the details of a product. +- Adds a button to add a product to the cart. +- Contains a `handleClick` function to handle the click events. This function logs the action and the product ID. In the next steps, you will add the logic to send the click events to your pipeline. + +## 3. Generate clickstream data + +You need to send clickstream data like the `timestamp`, `user_id`, `session_id`, and `device_info` to your pipeline. You can generate this data on the client side. Add the following function in the `