Add assets for GitHub actions tutorialc
Before Width: | Height: | Size: 130 KiB After Width: | Height: | Size: 130 KiB |
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
Before Width: | Height: | Size: 201 KiB After Width: | Height: | Size: 201 KiB |
Before Width: | Height: | Size: 254 KiB After Width: | Height: | Size: 254 KiB |
Before Width: | Height: | Size: 249 KiB After Width: | Height: | Size: 249 KiB |
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 33 KiB |
Before Width: | Height: | Size: 101 KiB After Width: | Height: | Size: 101 KiB |
Before Width: | Height: | Size: 262 KiB After Width: | Height: | Size: 262 KiB |
Before Width: | Height: | Size: 159 KiB After Width: | Height: | Size: 159 KiB |
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 88 KiB |
@ -19,7 +19,7 @@ The challenge is that e-commerce websites run flash sales and temporary discount
|
|||||||
|
|
||||||
That's where automation comes in. In this guide, we'll build a Python application that monitors product prices across any e-commerce website and instantly notifies you when prices drop on items you're actually interested in. Here is a sneak peek of the app:
|
That's where automation comes in. In this guide, we'll build a Python application that monitors product prices across any e-commerce website and instantly notifies you when prices drop on items you're actually interested in. Here is a sneak peek of the app:
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
The app has a simple appearance but provides complete functionality:
|
The app has a simple appearance but provides complete functionality:
|
||||||
|
|
||||||
@ -96,7 +96,7 @@ git commit -m "Initial commit"
|
|||||||
|
|
||||||
Let's take a look at the final product one more time:
|
Let's take a look at the final product one more time:
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
It has two sections: the sidebar and the main dashboard. Since the first thing you do when launching this app is adding products, we will start building the sidebar first. Open `ui.py` and paste the following code:
|
It has two sections: the sidebar and the main dashboard. Since the first thing you do when launching this app is adding products, we will start building the sidebar first. Open `ui.py` and paste the following code:
|
||||||
|
|
||||||
@ -389,7 +389,7 @@ There are many platforms for hosting Postgres instances but the one I find the e
|
|||||||
|
|
||||||
Then, in a few minutes, your free Postgres instance comes online. To connect to this instance, click on Home in the left sidebar and then, "Connect":
|
Then, in a few minutes, your free Postgres instance comes online. To connect to this instance, click on Home in the left sidebar and then, "Connect":
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
You will be shown your database connection string with a placeholder for the password you copied. You should paste this string in your `.env` file with your password added to the `.env` file:
|
You will be shown your database connection string with a placeholder for the password you copied. You should paste this string in your `.env` file with your password added to the `.env` file:
|
||||||
|
|
||||||
@ -623,7 +623,7 @@ git commit -m "Add a feature to track product prices after they are added"
|
|||||||
|
|
||||||
Let's take a look at the final product shown in the introduction once again:
|
Let's take a look at the final product shown in the introduction once again:
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
Apart from the sidebar, the main dashboard shows each product's price history visualized with a Plotly line plot where the X axis is the timestamp while the Y axis is the prices. Each line plot is wrapped in a Streamlit component that includes buttons for removing the product from the database or visiting its source URL.
|
Apart from the sidebar, the main dashboard shows each product's price history visualized with a Plotly line plot where the X axis is the timestamp while the Y axis is the prices. Each line plot is wrapped in a Streamlit component that includes buttons for removing the product from the database or visiting its source URL.
|
||||||
|
|
||||||
@ -772,7 +772,7 @@ In the right column, we create an interactive line plot using Plotly Express to
|
|||||||
|
|
||||||
After this step, the UI must be fully functional and ready to track products. For example, here is what mine looks like after adding a couple of products:
|
After this step, the UI must be fully functional and ready to track products. For example, here is what mine looks like after adding a couple of products:
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
But notice how the price history chart doesn't show anything. That's because we haven't populated it by checking the product price in regular intervals. Let's do that in the next couple of steps. For now, commit the latest changes we've made:
|
But notice how the price history chart doesn't show anything. That's because we haven't populated it by checking the product price in regular intervals. Let's do that in the next couple of steps. For now, commit the latest changes we've made:
|
||||||
|
|
||||||
@ -825,7 +825,7 @@ In the function body, we retrieve all products URLs, retrieve their new price da
|
|||||||
|
|
||||||
If you run the function once and refresh the Streamlit app, you must see a line chart appear for each product you are tracking:
|
If you run the function once and refresh the Streamlit app, you must see a line chart appear for each product you are tracking:
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
Let's commit the changes in this step:
|
Let's commit the changes in this step:
|
||||||
|
|
||||||
@ -933,7 +933,7 @@ git push origin main
|
|||||||
|
|
||||||
Next, navigate to your GitHub repository again and click on the "Actions" tab:
|
Next, navigate to your GitHub repository again and click on the "Actions" tab:
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
From there, you can run the workflow manually (click "Run workflow" and refresh the page). If it is executed successfully, you can return to the Streamlit app and refresh to see the new price added to the chart.
|
From there, you can run the workflow manually (click "Run workflow" and refresh the page). If it is executed successfully, you can return to the Streamlit app and refresh to see the new price added to the chart.
|
||||||
|
|
||||||
@ -1083,7 +1083,7 @@ python notifications.py
|
|||||||
|
|
||||||
If all is well, you should get a Discord message in your server that looks like this:
|
If all is well, you should get a Discord message in your server that looks like this:
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
Let's commit the changes we have:
|
Let's commit the changes we have:
|
||||||
|
|
||||||
@ -1176,7 +1176,7 @@ Let's examine the key changes in this enhanced version of `check_prices.py`:
|
|||||||
|
|
||||||
When I tested this new version of the script, I immediately got an alert:
|
When I tested this new version of the script, I immediately got an alert:
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
Before we supercharge our workflow with the new notification system, you should add this line of code to your `check_prices.yml` workflow file to read the Discord webhook URL from your GitHub secrets:
|
Before we supercharge our workflow with the new notification system, you should add this line of code to your `check_prices.yml` workflow file to read the Discord webhook URL from your GitHub secrets:
|
||||||
|
|
||||||
|
After Width: | Height: | Size: 410 KiB |