diff --git a/docs/create/aws/analytics-using-aws/analytics3.png b/docs/create/aws/analytics-using-aws/analytics3.png new file mode 100644 index 0000000000..9d4872947e Binary files /dev/null and b/docs/create/aws/analytics-using-aws/analytics3.png differ diff --git a/docs/create/aws/analytics-using-aws/analytics4.png b/docs/create/aws/analytics-using-aws/analytics4.png new file mode 100644 index 0000000000..cf3dbb13de Binary files /dev/null and b/docs/create/aws/analytics-using-aws/analytics4.png differ diff --git a/docs/create/aws/analytics-using-aws/analytics_dashboard.png b/docs/create/aws/analytics-using-aws/analytics_dashboard.png new file mode 100644 index 0000000000..76774c0b5d Binary files /dev/null and b/docs/create/aws/analytics-using-aws/analytics_dashboard.png differ diff --git a/docs/create/aws/analytics-using-aws/analytics_traffic.png b/docs/create/aws/analytics-using-aws/analytics_traffic.png new file mode 100644 index 0000000000..e1fc2caa7b Binary files /dev/null and b/docs/create/aws/analytics-using-aws/analytics_traffic.png differ diff --git a/docs/create/aws/analytics-using-aws/index-analytics-using-aws.mdx b/docs/create/aws/analytics-using-aws/index-analytics-using-aws.mdx new file mode 100644 index 0000000000..8eb5faf6b6 --- /dev/null +++ b/docs/create/aws/analytics-using-aws/index-analytics-using-aws.mdx @@ -0,0 +1,352 @@ +--- +id: index-analytics-using-aws +title: How to Build and Deploy Your Own Analytics Dashboard on AWS using NodeJS and Redis +sidebar_label: Building Analytics Dashboard on using NodeJS and then deploy it on AWS +slug: /create/aws/analytics-using-aws +authors: [ajeet] +--- + +An interactive analytics dashboard serves several purposes. They allow you to share data and provide you with all those vital information to make game-changing decisions at a faster pace. Building a real-time dynamic dashboard using a traditional relational database might require a complex set of queries. By using a NoSQL database like Redis, you can build a powerful interactive and dynamic dashboard with a small number of Redis commands. + +Let’s take a look at how this was achieved. + + +- What will you build? +- What will you need? +- Getting started +- How does it work? +- How data is stored +- Navigating the application + + +### 1. What will you build? + +You’ll build an analytics dashboard app that uses Redis Bitmap written in NodeJS (JavaScript) and then deploy it to AWS + +Ready to get started? Ok, let’s dive straight in. + + +### 2. What will you need? + +- [NodeJS](https://developer.redis.com/develop/node): used as an open-source, cross-platform, backend JavaScript runtime environment that executes Javascript code outside a web browser. +- [Redis Enterprise Cloud](https://developer.redis.com/create/rediscloud): used as a real-time database, cache, and message broker.i +- [NPM](https://www.npmjs.com/): used as a package manager. It allows you to build node apps. + +### 3. Getting Started + +### Prepare the environment + +- Install Node - v12.19.0 +- Install NPM - v6.14.8 + + +### Step 1. Sign up for a Free Redis Enterprise Cloud Account + +[Follow this tutorial](https://developer.redis.com/create/aws/redis-on-aws) to sign up for a free Redis Enterprise Cloud account. + + + +Choose AWS as a Cloud vendor while creating your new subscription. At the end of the database creation process, you will get a Redis Enterprise CLoud database endpoint and password. You can save it for later use. + + + + + + +### Step 2. Clone the repository + + ```bash + git clone https://github.com/redis-developer/basic-analytics-dashboard-redis-bitmaps-nodejs + ``` + + +### Step 3. Setting up backend + + +First we will be settin up environmental variables + +Go to /server folder (cd ./server) and then execute the below command: + + ```bash + cp .env.example .env + ``` + +Open .env file and add Redis Enterprise Cloud Database Endpoint URL, port and password as shown below: + +``` + +PORT=3000 + +# Host and a port. Can be with `redis://` or without. +# Host and a port encoded in redis uri take precedence over other environment variable. +# preferable +REDIS_ENDPOINT_URI=redis://redis-XXXX.c212.ap-south-1-1.ec2.cloud.redislabs.com:15564 + +# Or you can set it here (ie. for docker development) +REDIS_HOST=redis-XXXX.c212.ap-south-1-1.ec2.cloud.redislabs.com +REDIS_PORT=XXXX + +# You can set password here +REDIS_PASSWORD=reXXX + +COMPOSE_PROJECT_NAME=redis-analytics-bitmaps +``` + + +### Step 4. Install dependencies + + ```bash + npm install + ``` + + +### Step 5. Run the backend + + ```bash + npm run dev + ``` + +### Step 6. Setting up the frontend + +Go to /client folder (cd ./client) and then: + + ```bash + cp .env.example .env + ``` + +Add the exact URL path and port number of your choice for VUE_APP_API_URL parameter as shown below: + +``` +VUE_APP_API_URL=http://localhost:3000 +``` + + +### Step 7. Install dependencies + + ```bash + npm install + ``` + +### Step 8. Run the frontend + + ```bash + npm run serve + ``` + + + +### How does it work? + +#### How the data is stored: + +The event data is stored in various keys and various data types. + +For each of time spans: + +- year: like 2021 +- month: like 2021-03 (means March of 2021) +- day: like 2021-03-03 (means 3rd March of 2021) +- weekOfMonth: like 2021-03/4 (means 4th week of March 2021) +- anytime + +and for each of scopes: + +- source +- action +- source + action +- action + page +- userId + action +- global + +and for each of data types (types): + +- count (Integer stored as String) +- bitmap +- set + +Is generated key like: + + + ```bash + rab:{type}[:custom:{customName}][:user:{userId}][:source:{source}][:action:{action}][:page:{page}]:timeSpan:{timeSpan} + ``` + +where values in [] are optional. + +- For each generated key like rab:count:*, data is stored like: INCR {key} +Example: + + ```bash + INCR rab:count:action:addToCart:timeSpan:2015-12/3 + ``` +- For each generated key like: rab:set:*, data is stored like: SADD {key} {userId} +Example: + + ```bash + SADD rab:set:action:addToCart:timeSpan:2015-12/3 8 + ``` +- For each generated key like rab:bitmap:*, data is stored like: SETBIT {key} {userId} 1. +Example: + + ```bash + SETBIT rab:bitmap:action:addToCart:timeSpan:2015-12/3 8 1 + ``` +### Cohort data + +- We store users who register and then bought some products (action order matters). +- For each buy action in December we check if user performed register action before (register counter must be greater than zero). +- If so, we set user bit to 1 like: SETBIT rab:bitmap:custom:cohort-buy:timeSpan:{timeSpan} {userId} 1 + +- E.g User Id 2 bought 2 products on 2015-12-17. It won't be stored. +- E.g User Id 10 bought 1 product on 2015-12-17 and registered on 2015-12-16. + It will be stored like: SETBIT rab:bitmap:custom:cohort-buy:timeSpan:2015-12 10 1. +- We assume that user cannot buy without register. + +#### Retention data + +- Retention means users who bought on two different dates +- For each buy action we check if user bought more products anytime than bought on particular day (current purchase not included). +- If so, we add user id to set like: SADD rab:set:custom:retention-buy:timeSpan:{timeSpan} {userId} +- E.g User Id 5 bought 3 products on 2015-12-15. His retention won't be stored (products bought on particular day: 2, products bought anytime: 0). +- E.g User Id 3 bought 1 product on 2015-12-15 and before - 1 product on 2015-12-13. His retention will be stored (products bought on particular day: 0, products bought anytime: 1) like: SADD rab:set:custom:retention-buy:timeSpan:2015-12 3. + +#### How the data is accessed: + +- Total Traffic: + +December: ```BITCOUNT rab:bitmap:custom:global:timeSpan:2015-12``` +X week of December: ```BITCOUNT rab:bitmap:custom:global:timeSpan:2015-12/{X}``` +Example: + + ```bash + BITCOUNT rab:bitmap:custom:global:timeSpan:2015-12/3 + ``` + +- Traffic per Page ({page} is one of: homepage, product1, product2, product3): + +``` +December: BITCOUNT rab:bitmap:action:visit:page:{page}:timeSpan:2015-12 +``` + +Example: + + ```bash + BITCOUNT rab:bitmap:action:visit:page:homepage:timeSpan:2015-12 + ``` + +- X week of December: + +``` +BITCOUNT rab:bitmap:action:visit:page:{page}:timeSpan:2015-12/{X} +``` + +Example: + + ```bash + BITCOUNT rab:bitmap:action:visit:page:product1:timeSpan:2015-12/2 + ``` + +- Traffic per Source ({source} is one of: google, Facebook, email, direct, referral, none): + +December: + +``` +BITCOUNT rab:bitmap:source:{source}:timeSpan:2015-12 +``` + +Example: + + ```bash + BITCOUNT rab:bitmap:source:referral:timeSpan:2015-12 + ``` + +- X week of December: ```BITCOUNT rab:bitmap:source:{source}:timeSpan:2015-12/{X}``` + +Example: + + ```bash + BITCOUNT rab:bitmap:source:google:timeSpan:2015-12/1 + ``` + +- Trend traffic ({page} is one of: homepage, product1, product2, product3): + +- December: from ```BITCOUNT rab:bitmap:action:visit:{page}:timeSpan:2015-12-01``` to ```BITCOUNT rab:bitmap:action:visit:{page}:timeSpan:2015-12-31``` +- 1 Week of December: Similar as above, but from 2015-12-01 to 2015-12-07 +- 2 Week of December: Similar as above, but from 2015-12-08 to 2015-12-14 +- 3 Week of December: Similar as above, but from 2015-12-15 to 2015-12-21 +- 4 Week of December: Similar as above, but from 2015-12-22 to 2015-12-28 +- 5 Week of December: Similar as above, but from 2015-12-29 to 2015-12-31 +- Example: + + ```bash + BITCOUNT rab:bitmap:action:visit:homepage:timeSpan:2015-12-29 => BITCOUNT rab:bitmap:action:visit:homepage:timeSpan:2015-12-30 => BITCOUNT rab:bitmap:action:visit:homepage:timeSpan:2015-12-31 + ``` + +- Total products bought: + +- December: ```GET rab:count:action:buy:timeSpan:2015-12``` +- X week of December: ```GET rab:count:action:buy:timeSpan:2015-12/{X}``` +Example: + + ```bash + GET rab:count:action:buy:timeSpan:2015-12/1 + ``` + +- Total products added to cart: + +December: ```GET rab:count:action:addToCart:timeSpan:2015-12``` +X week of December: ```GET rab:count:action:addToCart:timeSpan:2015-12/{X}``` +Example: + + ```bash + GET rab:count:action:addToCart:timeSpan:2015-12/1 + ``` + +- Shares of products bought ({productPage} is on of product1, product2, product3): + +December: ```GET rab:count:action:buy:page:{productPage}:timeSpan:2015-12``` +Example: + + ```bash + GET rab:count:action:buy:page:product3:timeSpan:2015-12 + ``` + +- X week of December: ```GET rab:count:action:buy:page:{productPage}:timeSpan:2015-12/{X}``` +Example: + + ```bash + GET rab:count:action:buy:page:product1:timeSpan:2015-12/2 + ``` + +#### Customer and Cohort Analysis + +- People who registered: BITCOUNT rab:bitmap:action:register:timeSpan:2015-12 +- People who register then bought (order matters): BITCOUNT rab:bitmap:custom:cohort-buy:timeSpan:2015-12 +- Dropoff: (People who register then bought / People who register) * 100 [%] +- Customers who bought only specified product ({productPage} is one of: product1, product2, product3): + +``` +SMEMBERS rab:set:action:buy:page:{productPage}:timeSpan:2015-12 +``` + +Example: + + ```bash + SMEMBERS rab:set:action:buy:page:product2:timeSpan:2015-12 + ``` + +- Customers who bought Product1 and Product2: + +``` +SINTER rab:set:action:buy:page:product1:timeSpan:anytime rab:set:action:buy:page:product2:timeSpan:anytime +``` + +- Customer Retention (customers who bought on the different dates): SMEMBERS rab:set:custom:retention-buy:timeSpan:anytime + + +### References + +- [Project Source Code](https://github.com/redis-developer/basic-analytics-dashboard-redis-bitmaps-nodejs) +- [Use cases of Bitmaps](https://redis.io/topics/data-types-intro) +- [How to Build a Slack Bot to Retrieve Lost Files Using AWS S3 and RediSearch](/create/aws/slackbot) +- [How to Deploy and Manage Redis Database on AWS Using Terraform](/create/aws/terraform) diff --git a/docs/create/aws/bidding-on-aws/images/architecture.png b/docs/create/aws/bidding-on-aws/images/architecture.png new file mode 100644 index 0000000000..9070f493c0 Binary files /dev/null and b/docs/create/aws/bidding-on-aws/images/architecture.png differ diff --git a/docs/create/aws/bidding-on-aws/images/image_10.png b/docs/create/aws/bidding-on-aws/images/image_10.png new file mode 100644 index 0000000000..8c5ff50924 Binary files /dev/null and b/docs/create/aws/bidding-on-aws/images/image_10.png differ diff --git a/docs/create/aws/bidding-on-aws/images/image_11.png b/docs/create/aws/bidding-on-aws/images/image_11.png new file mode 100644 index 0000000000..b098307225 Binary files /dev/null and b/docs/create/aws/bidding-on-aws/images/image_11.png differ diff --git a/docs/create/aws/bidding-on-aws/images/image_12.png b/docs/create/aws/bidding-on-aws/images/image_12.png new file mode 100644 index 0000000000..feb236bf99 Binary files /dev/null and b/docs/create/aws/bidding-on-aws/images/image_12.png differ diff --git a/docs/create/aws/bidding-on-aws/images/image_13.png b/docs/create/aws/bidding-on-aws/images/image_13.png new file mode 100644 index 0000000000..3790cc29e0 Binary files /dev/null and b/docs/create/aws/bidding-on-aws/images/image_13.png differ diff --git a/docs/create/aws/bidding-on-aws/images/image_2.png b/docs/create/aws/bidding-on-aws/images/image_2.png new file mode 100644 index 0000000000..31bc689f1b Binary files /dev/null and b/docs/create/aws/bidding-on-aws/images/image_2.png differ diff --git a/docs/create/aws/bidding-on-aws/images/image_3.png b/docs/create/aws/bidding-on-aws/images/image_3.png new file mode 100644 index 0000000000..0f3e2969de Binary files /dev/null and b/docs/create/aws/bidding-on-aws/images/image_3.png differ diff --git a/docs/create/aws/bidding-on-aws/images/image_4.png b/docs/create/aws/bidding-on-aws/images/image_4.png new file mode 100644 index 0000000000..4b20a07184 Binary files /dev/null and b/docs/create/aws/bidding-on-aws/images/image_4.png differ diff --git a/docs/create/aws/bidding-on-aws/images/image_5.png b/docs/create/aws/bidding-on-aws/images/image_5.png new file mode 100644 index 0000000000..765296b166 Binary files /dev/null and b/docs/create/aws/bidding-on-aws/images/image_5.png differ diff --git a/docs/create/aws/bidding-on-aws/images/image_6.png b/docs/create/aws/bidding-on-aws/images/image_6.png new file mode 100644 index 0000000000..3790cc29e0 Binary files /dev/null and b/docs/create/aws/bidding-on-aws/images/image_6.png differ diff --git a/docs/create/aws/bidding-on-aws/images/image_7.png b/docs/create/aws/bidding-on-aws/images/image_7.png new file mode 100644 index 0000000000..8c5ff50924 Binary files /dev/null and b/docs/create/aws/bidding-on-aws/images/image_7.png differ diff --git a/docs/create/aws/bidding-on-aws/images/image_8.png b/docs/create/aws/bidding-on-aws/images/image_8.png new file mode 100644 index 0000000000..765296b166 Binary files /dev/null and b/docs/create/aws/bidding-on-aws/images/image_8.png differ diff --git a/docs/create/aws/bidding-on-aws/images/image_9.png b/docs/create/aws/bidding-on-aws/images/image_9.png new file mode 100644 index 0000000000..0f3e2969de Binary files /dev/null and b/docs/create/aws/bidding-on-aws/images/image_9.png differ diff --git a/docs/create/aws/bidding-on-aws/images/image_featured.png b/docs/create/aws/bidding-on-aws/images/image_featured.png new file mode 100644 index 0000000000..d9b3c241fb Binary files /dev/null and b/docs/create/aws/bidding-on-aws/images/image_featured.png differ diff --git a/docs/create/aws/bidding-on-aws/index-bidding-on-aws.mdx b/docs/create/aws/bidding-on-aws/index-bidding-on-aws.mdx new file mode 100644 index 0000000000..811b3369f1 --- /dev/null +++ b/docs/create/aws/bidding-on-aws/index-bidding-on-aws.mdx @@ -0,0 +1,301 @@ +--- +id: index-bidding-on-aws +title: How to Build a Real-Time Bidding Platform on AWS using NodeJS, AWS Lambda, and Redis +sidebar_label: Building a Real-Time Bidding Platform on AWS using NodeJS, AWS Lambda, and Redis +slug: /create/aws/bidding-on-aws +authors: [ajeet] +--- + +Digital technology has propelled us forward to an exciting new era and has transformed almost every aspect of life. We’re more interconnected than ever as communication has become instant. Working from home has now become the norm, helping us pivot to a new way of working during the pandemic. And our ability to reduce carbon emissions by attending work-related events online has meant that we’ve taken greater strides to combat global warming. Continuing this trend is [Shamshir Anees and his team](https://github.com/shamshiranees), who have created an application that can host digital auctions. By using Redis, data transmission between components was carried out with maximum efficiency, providing users with real-time bidding updates on the dashboard. + +Let’s take a look at how this was achieved. We’d also like to point out that we have a diverse range of exciting applications for you to check out on the [Redis Launchpad](https://launchpad.redis.com). + +- What will you build? +- What will you need? +- Architecture +- How does it work? +- Getting started +- How data is stored +- Navigating the application + +### What will you build? + +You’ll build an application that will allow users to attend and take part in digital auctions. The application will allow users to create an account, put in bids, and even set up their own auction. Below we’ll uncover the required components, their functionality, and how to deploy them within this architecture. + +Ready to get started? Ok, let’s dive straight in. + +### What will you need? + +- [NodeJS](https://developer.redis.com/develop/node): used as an open-source, cross-platform, backend JavaScript runtime environment that executes Javascript code outside a web browser. +- [Amazon Cognito](https://aws.amazon.com/cognito/): used to securely manage and synchronize app data for users on mobile. +- [Redis Enterprise Cloud](https://developer.redis.com/create/rediscloud): used as a real-time database, cache, and message broker. +- [RedisJSON](https://developer.redis.com/howtos/redisjson/getting-started): used to store, update and fetch JSON values from Redis. +- [Socket.IO](https://socket.io/): used as a library that provides real-time, bi-directional, and event-based communication between the browser and the server. +- [AWS Lambda](https://aws.amazon.com/lambda/): used as a serverless compute service that runs your code in response events and manages the underlying compute service automatically for you. +- [Amazon SNS/Amazon SES](https://aws.amazon.com/sns/): a fully managed messaging service for both application-to-application (A2A) and application-to-person (A2P) communication. + +### Architecture + + + +### How does it work? + +#### All auctions + +NodeJS connects to the Redis Enterprise Cloud database. + +The frontend then communicates with the NodeJS backend through API calls. + +```GET : /api/auctions``` fetches all the keys from Auctions Hash. + +NodeJS uses the Redis module to work with Redis Enterprise Cloud. The Redis client is then created using the Redis credentials and hmget(). This is the equivalent of the HMSET command that’s used to push data to the Redis database. + +#### Each auction + +```GET : /api/auctions/{auctionId}``` fetches each auction item by id. + +NodeJS uses the Redis module to work with Redis Cloud. The Redis client is then created using the Redis credentials and hmget(). This is the equivalent of the HMSET command that’s used to push data to the Redis database. + +All bidding data of an auction item + +```GET : /api/bidding/{auctionId}``` + +NodeJS uses the Redis module to work with Redis Cloud. The Redis client is then created using the Redis credentials and hmget(). This is the equivalent of the HMSET command that’s used to push data to the Redis database. + +#### Profile settings + +```GET : /api/settings``` + +NodeJS uses the Redis module to work with Redis Cloud. The Redis client is then created using the Redis credentials and hmget(). This is the equivalent of the HMSET command that’s used to push data to the Redis database. + +#### User info + +```GET : /api/users/{email}``` + +NodeJS uses the Redis module to work with Redis Cloud. The Redis client is then created using the Redis credentials and hmget(). This is the equivalent of the HMSET command that’s used to push data to the Redis database. + +### Getting started + +### Prerequisites + +- [NodeJS](https://nodejs.org/en/) +- [NPM](https://www.npmjs.com/) + +### Step 1. Sign up for a Free Redis Enterprise Cloud Account + +[Follow this tutorial](https://developer.redis.com/create/aws/redis-on-aws) to sign up for a free Redis Enterprise Cloud account. + + + +Choose AWS as a Cloud vendor while creating your new subscription. At the end of the database creation process, you will get a Redis Enterprise CLoud database endpoint and password. You can save it for later use. + + + + +### Step 2: Clone the backend GitHub repository + +``` +https://github.com/redis-developer/NR-digital-auction-backend +``` + +### Step 3. Install the package dependencies + +The 'npm install' is a npm cli-command that does the predefined thing i.e install dependencies specified inside package.json + +``` +npm install +``` + +### Step 4. Setting up environmental variable + + + +``` +export REDIS_END_POINT=XXXX +export REDIS_PASSWORD=XXX +export REDIS_PORT=XXX +``` + +### Step 5. Building the application + +``` +npm run build +``` + +### Step 6. Starting the application + +``` +npm start +``` + +### Step 7. Cloning the Frontend GITHUB repository + +``` +git clone https://github.com/redis-developer/NR-digital-auction-frontend +``` + +### Step 8. Building the application + +``` +npm run build +``` + +### Step 9. Starting the application + +``` +npm start +``` + +### Step 10. Accessing the application + + + +### Step 11. Signing up to the application + + + +### Step 12. Sign-in + + + + +### Step 13. Accessing the dashboard + + + +### Step 14. Listing the auction item + + + + +### Step 15. Accessing the bidding page + + + + +### How data is stored + +The Redis Enterprise Cloud Database with RedisJSON module is what you’ll use to install the data. + +### Auctions + +- Type - Redis Hash. +- Used for storing auctions data. +- UUID generated from the backend (NodeJS) serves as the key +- JSON data which represents the Auction object and includes the following keys + - auctionId + - auctionItemName + - description + - lotNo + - quantity + - buyersPremium + - itemUnit + - minBidAmount + - bidIncrement + - startDateTime + - endDateTime + - images + - currentBid +- NodeJS connects to the Redis Cloud database. The Frontend communicates with the NodeJS backend through API calls. +- POST : /api/auctions. +- The request body has JSON data to be inserted into the database. +- NodeJS uses the Redis module to work with Redis Cloud. The Redis client is created. using the Redis credentials and hmset(). This is the equivalent of the HMSET command that’s used to push data to the Redis database. + +### Biddings + +- Type - Redis Hash +- Used for storing the bids placed on each auction item +- NodeJS connects to the Redis Cloud database. The Frontend communicates with the NodeJS backend through API calls. +- POST : ```/api/bidding``` +- The request body has JSON data to be inserted into the database. +- AuctionId from request body serves as the key +- JSON data which includes keys: + + - currentBid + - currentBidTime + - currentBidEndTime, and + - biddings array (id, auctionId, userId, username, bidAmount, bidTime) + +- The bidding array has all of the bids placed for a particular auction item. +- Based on the current BidEndTime and BidTime, the auction end date is extended based on the Dynamic closing concept. +- Current dynamic closing logic - If a new bid is placed within the last 5 minutes of the auction end time, the end time is extended by 1 hour. +- This will be configurable in the SaaS solution. +- NodeJS uses the Redis module to work with Redis Cloud. The Redis client is created using the Redis credentials and hmset(). This is the equivalent of the HMSET command that’s used to push data to the Redis database. + +### Profile Settings + +- Type - string +- JSON data which includes keys - serves as a value +- NodeJS connects to the Redis Cloud database. The frontend communicates with the NodeJS backend through API calls. +- POST : ```/api/settings``` +- The request body has JSON data to be inserted into the database. +- NodeJS uses the Redis module to work with Redis Cloud. The Redis client is created using the Redis credentials and hmset(). This is the equivalent of the HMSET command that’s used to push data to the Redis database. + +### Users + +- Type - Redis Hash +- Used for storing user details +- NodeJS connects to the Redis Cloud database. The Frontend communicates with the NodeJS backend through API calls. +- POST : ```/api/users``` +- The request body has JSON data to be inserted into the database +- The email id serves as the key +- The JSON data which includes keys - serves as a value +- NodeJS uses the Redis module to work with Redis Cloud. The Redis client is created using the Redis credentials and hmset(). This is the equivalent of the HMSET command that’s used to push data to the Redis database. + +### Navigating the application + +### Creating an account + +When you go onto the Digital Auction’s homepage, you’ll come across a range of items that are to be auctioned (see below). Click on the ‘Welcome’ button to create an account. + + + +You’ll then be taken to the sign-up page. Enter your details and click ‘sign-up.’ Once you’ve completed the sign-up form, you’ll receive a confirmation email to activate your account. + +### Placing a bid + +Go to the homepage to have access to view all of the items and their auction details. All of the data here is being populated by RedisJSON and Redis Cloud. Scroll through the page and click on the item that you want to place a bid for. + + + +When you click on an item, you’ll see the details for the bidding process at the top of the page. You’ll also have the option to set a reminder by receiving an email of whenever the bidding process of this item begins. + +On the right-hand side of the image, you’ll see the highest bid that’s been placed for this item. Below is a list of previous bids made by different users which are updated in real-time. + +Click on the ‘Place Bid’ button to make a bid. + +To access the meta-data information or view more images of the item, simply scroll down the page (see below). + + + +### Viewing your Bidding History + +Click on ‘My biddings’ at the top of the navigation bar to view your bidding history (see below). + + + +### Viewing upcoming auctions + +Click on ‘Auctions’ at the top of the navigation bar to view all upcoming auctions. + + + +### Conclusion: Leveraging Redis and AWS to Empower Auctioneers with Real-time Data + +Digital technology has had a ripple effect across all aspects of modern life. The ability to complete important tasks online instead of in-person has revolutionized the way we live, helping us to reduce carbon emissions, save time from traveling and have instant access to reams worth of data that we never had before. + +However, the success of such events hinges on a database’s ability to transmit data in real-time. Any blips in transmission would create a disconnect between users and the auction, impeding auctioneers’ reactions to bids. This would only result in frustration, disengagement, and a complete divorce of users from the application. + +But thanks to Redis, the components that made up the architecture system became vastly more interconnected so data was able to be sent, processed, and received in real-time. Achieving this paves the way for a smooth bidding process where users can interact with events in real-time without interruptions, ultimately enhancing the functionality of the app. + +[NR-Digital-Auction](https://launchpad.redis.com/?id=project%3ANR-digital-auction-frontend) is a fantastic example of how innovations can be brought to life by using Redis. Everyday programmers are experimenting with Redis to build applications that are impacting everyday life from around the world and you can too! + +So what can you build with Redis? For more inspiration, you can head over to the Redis Launchpad to access an exciting range of applications. + +Don't miss out on your $200 credit. Plus, your opportunity win a Tesla! + + +
+ diff --git a/docs/create/aws/bidding-on-aws/matrix200.png b/docs/create/aws/bidding-on-aws/matrix200.png new file mode 100644 index 0000000000..0465899283 Binary files /dev/null and b/docs/create/aws/bidding-on-aws/matrix200.png differ diff --git a/docs/create/aws/bidding-on-aws/sign3.png b/docs/create/aws/bidding-on-aws/sign3.png new file mode 100644 index 0000000000..9d4872947e Binary files /dev/null and b/docs/create/aws/bidding-on-aws/sign3.png differ diff --git a/docs/create/aws/bidding-on-aws/sign4.png b/docs/create/aws/bidding-on-aws/sign4.png new file mode 100644 index 0000000000..cf3dbb13de Binary files /dev/null and b/docs/create/aws/bidding-on-aws/sign4.png differ diff --git a/docs/create/aws/chatapp/chatapp2.png b/docs/create/aws/chatapp/chatapp2.png new file mode 100644 index 0000000000..26d8e55ab6 Binary files /dev/null and b/docs/create/aws/chatapp/chatapp2.png differ diff --git a/docs/create/aws/chatapp/chatapp3.png b/docs/create/aws/chatapp/chatapp3.png new file mode 100644 index 0000000000..9d4872947e Binary files /dev/null and b/docs/create/aws/chatapp/chatapp3.png differ diff --git a/docs/create/aws/chatapp/chatapp4.png b/docs/create/aws/chatapp/chatapp4.png new file mode 100644 index 0000000000..cf3dbb13de Binary files /dev/null and b/docs/create/aws/chatapp/chatapp4.png differ diff --git a/docs/create/aws/chatapp/chatapp_homepage.png b/docs/create/aws/chatapp/chatapp_homepage.png new file mode 100644 index 0000000000..3967d54859 Binary files /dev/null and b/docs/create/aws/chatapp/chatapp_homepage.png differ diff --git a/docs/create/aws/chatapp/chatapp_server.png b/docs/create/aws/chatapp/chatapp_server.png new file mode 100644 index 0000000000..b5c141478e Binary files /dev/null and b/docs/create/aws/chatapp/chatapp_server.png differ diff --git a/docs/create/aws/chatapp/image_chatapp1.png b/docs/create/aws/chatapp/image_chatapp1.png new file mode 100644 index 0000000000..a995f8237d Binary files /dev/null and b/docs/create/aws/chatapp/image_chatapp1.png differ diff --git a/docs/create/aws/chatapp/index-chatapp.mdx b/docs/create/aws/chatapp/index-chatapp.mdx new file mode 100644 index 0000000000..0724fba26d --- /dev/null +++ b/docs/create/aws/chatapp/index-chatapp.mdx @@ -0,0 +1,267 @@ +--- +id: index-chatapp +title: How to Build a Real-Time Chat application on AWS using Python and Redis +sidebar_label: Building a Real-Time Chat application on AWS using Python and Redis +slug: /create/aws/chatapp +authors: [ajeet] +--- + +Chat messaging apps are surging in popularity exponentially. Mobile apps like WhatsApp, Facebook, Telegram, Slack, Discord have become “a part and parcel” of our life. Users are addicted to these apps as they bring a personal touch and offer a real-time interaction. + + + +There’s been a rise in the number of social media apps that bring social elements to enable activities like collaboration, messaging, social interaction and commenting. Such activities require a real-time capability to automatically present updated information to users. More and more developers are tapping into the power of Redis as it is extremely fast & its support for a variety of rich data structures such as Lists, Sets, Sorted Sets, Hashes etc. Redis comes along with a Pub/Sub messaging functionality that allows developers to scale the backend by spawning multiple server instances. + + + +- What will you build? +- What will you need? +- Getting started +- How it works? +- How is the data stored? +- How is the data accessed? + +### 1. What will you build? + +In this tutorial, we will see how to build a basic chat application built with Flask, Socket.IO and Redis Enterprise Cloud running on AWS Cloud. This example uses pub/sub features combined with web-sockets for implementing the message communication between client and server. + + + +### 2. What will you need? + +- Frontend - React, Socket.IO +- Backend - Python(Flask), Redis Enterprise Cloud hosted on AWS + +### 3. Getting Started + + +### Step 1. Sign up for a Free Redis Enterprise Cloud Account + +[Follow this tutorial](https://developer.redis.com/create/aws/redis-on-aws) to sign up for a free Redis Enterprise Cloud account. + + + +Choose AWS as a Cloud vendor while creating your new subscription. At the end of the database creation process, you will get a Redis Enterprise CLoud database endpoint and password. You can save it for later use. + + + +### Step 2. Clone the repository + +``` +git clone https://github.com/redis-developer/basic-redis-chat-app-demo-python +``` + + +### Step 3. Installing the requred packages + +``` +cd client +yarn install +``` + +### Step 4. Starting the frontend + +``` +yarn start +``` + +``` +You can now view client in the browser. + + Local: http://localhost:3000 + On Your Network: http://192.168.1.9:3000 +``` + + + + + + +### Step 5. Installing the required Python modules + + +``` +cd .. +pip3 install -r requirements.txt +``` + +### Step 6: Running Backend + + + + + +``` +python3 -m venv venv/ +source venv/bin/activate +python3 app.py +``` + +``` +python3 app.py + * Restarting with stat + * Debugger is active! + * Debugger PIN: 220-696-610 +(8122) wsgi starting up on http://127.0.0.1:5000 +``` + + + +### Step 7. How it works? + + +The chat server works as a basic REST API which involves keeping the session and handling the user state in the chat rooms (besides the WebSocket/real-time part). +When the server starts, the initialization step occurs. At first, a new Redis connection is established and it's checked whether it's needed to load the demo data. + +#### Initialization + +For simplicity, a key with total_users value is checked: if it does not exist, we fill the Redis database with initial data. EXISTS total_users (checks if the key exists) +The demo data initialization is handled in multiple steps: + +#### Creating demo users + +We create a new user id: INCR total_users. Then we set a user ID lookup key by user name: e.g. + +``` +SET username:nick user:1 +``` + +And finally, the rest of the data is written to the hash set: + +Example: + + ```bash + HSET user:1 username "nick" password "bcrypt_hashed_password". + ``` + +Additionally, each user is added to the default "General" room. +For handling rooms for each user, we have a set that holds the room ids. Here's an example command of how to add the room: + + ```bash + SADD user:1:rooms "0" + ``` + +#### Populating private messages between users + +First, private rooms are created: if a private room needs to be established, for each user a room id: room:1:2 is generated, where numbers correspond to the user ids in ascending order. + +E.g. Create a private room between 2 users: + + ```bash + SADD user:1:rooms 1:2 and SADD user:2:rooms 1:2 + ``` + +Then we add messages to this room by writing to a sorted set: + + ```bash + ZADD room:1:2 1615480369 "{'from': 1, 'date': 1615480369, 'message': 'Hello', 'roomId': '1:2'}" + ``` + + +We are using a stringified JSON to keep the message structure and simplify the implementation details for this demo-app. You may choose to use a Hash or RedisJSON + +### Populate the "General" room with messages + +Messages are added to the sorted set with id of the "General" room: room:0 + +#### Pub/sub + +After initialization, a pub/sub subscription is created: SUBSCRIBE MESSAGES. At the same time, each server instance will run a listener on a message on this channel to receive real-time updates. + +Again, for simplicity, each message is serialized to JSON, which we parse and then handle in the same manner, as WebSocket messages. + +Pub/sub allows connecting multiple servers written in different platforms without taking into consideration the implementation detail of each server. + +#### Real-time chat and session handling + +When a WebSocket connection is established, we can start to listen for events: +- Connection. A new user is connected. At this point, a user ID is captured and saved to the session (which is cached in Redis). Note, that session caching is language/library-specific and it's used here purely for persistence and maintaining the state between server reloads. + +A global set with online_users key is used for keeping the online state for each user. So on a new connection, a user ID is written to that set: + + ```bash + SADD online_users 1 + ``` + +Here we have added user with id 1 to the set online_users + +After that, a message is broadcasted to the clients to notify them that a new user is joined the chat. + +- Disconnect. It works similarly to the connection event, except we need to remove the user for online_users set and notify the clients: SREM online_users 1 (makes user with id 1 offline). + +- Message. A user sends a message, and it needs to be broadcasted to the other clients. The pub/sub allows us also to broadcast this message to all server instances which are connected to this Redis: + + ``` + PUBLISH message "{'serverId': 4132, 'type':'message', 'data': {'from': 1, 'date': 1615480369, 'message': 'Hello', 'roomId': '1:2'}}" + ``` + +Note we send additional data related to the type of the message and the server id. Server id is used to discard the messages by the server instance which sends them since it is connected to the same MESSAGES channel. + +The type field of the serialized JSON corresponds to the real-time method we use for real-time communication (connect/disconnect/message). + +The data is method-specific information. In the example above it's related to the new message. + +### Step 8. How the data is stored? + +Redis is used mainly as a database to keep the user/messages data and for sending messages between connected servers. + +The real-time functionality is handled by Socket.IO for server-client messaging. Additionally each server instance subscribes to the MESSAGES channel of pub/sub and dispatches messages once they arrive. Note that, the server transports pub/sub messages with a separate event stream (handled by Server Sent Events), this is due to the need of running pub/sub message loop apart from socket.io signals. + +The chat data is stored in various keys and various data types. +User data is stored in a hash set where each user entry contains the next values: +- username: unique user name; +- password: hashed password + +- Additionally a set of rooms is associated with user +- Rooms are sorted sets which contains messages where score is the timestamp for each message +- Each room has a name associated with it +- Online set is global for all users is used for keeping track on which user is online. +- User hash set is accessed by key user:{userId}. The data for it stored with HSET key field data. User id is calculated by incrementing the total_users key (INCR total_users) + +- Username is stored as a separate key (username:{username}) which returns the userId for quicker access and stored with SET username:{username} {userId}. + +- Rooms which user belongs too are stored at user:{userId}:rooms as a set of room ids. A room is added by SADD user:{userId}:rooms {roomId} command. + +- Messages are stored at room:{roomId} key in a sorted set (as mentioned above). They are added with ZADD room:{roomId} {timestamp} {message} command. Message is serialized to an app-specific JSON string. + +### Step 9. How the data is accessed? + +Get User HGETALL user:{id}. + + ```bash + HGETALL user:2 + ``` + +where we get data for the user with id: 2. + +- Online users: SMEMBERS online_users. This will return ids of users which are online + +- Get room ids of a user: SMEMBERS user:{id}:rooms. +Example: + + ``` + SMEMBERS user:2:rooms + ``` + +This will return IDs of rooms for user with ID: 2 + +- Get list of messages ZREVRANGE room:{roomId} {offset_start} {offset_end}. +Example: + + ``` + ZREVRANGE room:1:2 0 50 + ``` +It will return 50 messages with 0 offsets for the private room between users with IDs 1 and 2. + + + +### Further References + +- [Building a sample Redis Chat application demo in .Net](https://github.com/redis-developer/basic-redis-chat-app-demo-dotnet) +- [Building a Sample Redis Chat application demo in Java](https://github.com/redis-developer/basic-redis-chat-app-demo-java) +- [Building a Sample Redis Chat application demo in NodeJS](https://github.com/redis-developer/basic-redis-chat-app-demo-nodejs) +- [Building a Sample Redis Chat application demo in Go](https://github.com/redis-developer/basic-redis-chat-demo-go) +- [Building a Sample Redis Chat application demo in Ruby](https://github.com/redis-developer/basic-redis-chat-demo-ruby) + + + diff --git a/docs/create/aws/chatapp/index-chatapp.mdx_python b/docs/create/aws/chatapp/index-chatapp.mdx_python new file mode 100644 index 0000000000..d50e68bc2b --- /dev/null +++ b/docs/create/aws/chatapp/index-chatapp.mdx_python @@ -0,0 +1,247 @@ +--- +id: index-chatapp +title: How to build a Chat application using Redis +sidebar_label: How to build a Chat application using Redis +slug: /howtos/chatapp +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import RedisCard from '@site/src/theme/RedisCard'; + + +In this tutorial, we will see how to build a basic chat application built with Flask, Socket.IO and Redis. + + + +