Skip to content

Commit 0e1e039

Browse files
committed
made the requested changes
1 parent 078fe6f commit 0e1e039

File tree

1 file changed

+20
-20
lines changed

1 file changed

+20
-20
lines changed

tutorial/markdown/python/streamlit/README.md

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ By the end of this tutorial, you will have a working flight visualization tool a
3232

3333
The final app will look like this hosted Streamlit application: [Couchbase Connector Demo App](https://couchbase-connector-demo-app.streamlit.app/). The original code for this demo is available [here](https://github.com/couchbase-examples/streamlit-quickstart/blob/main/Demo.py).
3434

35-
## Important Concepts
35+
## Basic Concepts
3636

3737
### Understanding JSON and Document Databases
3838
Couchbase is a NoSQL document database that stores data in JSON format. This allows for flexible and scalable data modeling. JSON (JavaScript Object Notation) is a lightweight data format that is:
@@ -69,15 +69,15 @@ Couchbase organizes data into a hierarchical structure:
6969
| **Collection** | Table | Group of related JSON documents. |
7070
| **Document** | Row | Individual JSON record. |
7171

72-
### Important Operation Notes
72+
### Operation Notes
7373
- **CRUD Operations**: Create, Read, Update, and Delete operations only work on the specific bucket, scope, and collection specified during connection setup.
7474
- **Queries**: Can work across any bucket, scope, and collection in the cluster, regardless of the connection settings.
7575
- **Access Control**: Both CRUD operations and queries are limited by the permissions assigned to the Couchbase user in the cluster. The **Username** and **Password** provided during connection setup must belong to a Couchbase user with the necessary cluster access permissions.
7676

7777
By understanding these key concepts, you'll be well-prepared to build and optimize applications using Couchbase and Streamlit.
7878

7979
## Dataset Overview
80-
The `travel-sample` dataset in Couchbase consists of multiple scopes and collections related to travel and transportation data. The primary scope used in this application is `inventory`, which contains five collections:
80+
The [`travel-sample`](https://docs.couchbase.com/ruby-sdk/current/ref/travel-app-data-model.html) dataset in Couchbase consists of multiple scopes and collections related to travel and transportation data. The primary scope used in this application is `inventory`, which contains five collections:
8181

8282
- **airline (190 documents)**: Contains information about airlines, including their name, country, ICAO, IATA codes, and callsigns.
8383
- **Key fields:** `name`, `country`, `icao`, `iata`, `callsign`, `id`, `type`
@@ -143,7 +143,7 @@ Before setting up the environment, ensure you have the following:
143143
- **Operational Couchbase cluster** with configured access ([Instructions](https://docs.couchbase.com/cloud/get-started/connect.html#prerequisites))
144144
- **Connection string** from Couchbase Capella
145145

146-
### Step 1: Installation and Setup
146+
### Installation and Setup
147147
Create an isolated Python environment, run the following commands:
148148

149149
```sh
@@ -161,8 +161,8 @@ streamlit hello
161161

162162
If everything is set up correctly, a browser window should open with Streamlit's demo application.
163163

164-
### Step 2: Implement Data Fetching Functions
165-
To optimize performance, data retrieval functions are cached using `@st.cache_data`. This prevents redundant queries and speeds up the app.
164+
### Implement Data Fetching Functions
165+
To optimize performance, data retrieval functions are cached using `@st.cache_data`, which stores previously fetched data to prevent redundant queries and speed up the app. However, the `_connection` object is intentionally not cached (indicated by the underscore prefix) to ensure a fresh database connection is established each time. Caching the connection could lead to issues with stale or expired sessions, potentially causing failed queries or inconsistent data retrieval. For more details, refer to the official documentation: [Streamlit `st.cache_data`](https://docs.streamlit.io/develop/api-reference/caching-and-state/st.cache_data).
166166

167167
`get_all_airports(_connection)`: Fetches airport details.
168168
```python
@@ -324,11 +324,11 @@ def get_all_hotels(_connection, cities):
324324
return pd.DataFrame(hotels)
325325
```
326326

327-
### Step 3: Create Interactive Visualizations
327+
### Create Interactive Visualizations
328328

329329
`plot_airports_and_routes(airports_df, routes_df)`: Displays airports and their flight routes.
330330

331-
This function visualizes flight routes between airports using Plotly. It first extracts airport coordinates from `airports_df` into a dictionary for quick lookup. Then, it iterates through `routes_df` to collect latitude and longitude pairs for each flight route, ensuring that non-existent airports are skipped. A scatter map plot is created using `Scattermap` to represent routes as blue lines. Additionally, a separate scatter plot of airports is overlaid, with markers color-coded in red and displaying airport details on hover. The final visualization is displayed using `st.plotly_chart`.
331+
This function visualizes flight routes between airports using [Plotly](https://plotly.com/python/lines-on-tile-maps/). It first extracts airport coordinates from `airports_df` into a dictionary for quick lookup. Then, it iterates through `routes_df` to collect latitude and longitude pairs for each flight route, ensuring that non-existent airports are skipped. A scatter map plot is created using `Scattermap` to represent routes as blue lines. Additionally, a separate scatter plot of airports is overlaid, with markers color-coded in red and displaying airport details on hover. The final visualization is displayed using `st.plotly_chart`.
332332

333333
```python
334334
def plot_airports_and_routes(airports_df, routes_df):
@@ -384,7 +384,7 @@ def plot_airports_and_routes(airports_df, routes_df):
384384

385385
`create_landmark_map(landmarks, hotels_near_landmark)`: Shows landmarks along with nearby hotels.
386386

387-
This function visualizes landmarks and nearby hotels on an interactive map using Plotly. Hotels are color-coded based on their distance from landmarks: red for distances ≤3 km, orange for ≤6 km, and gold for farther hotels. Each hotel is plotted with a marker, and a tooltip displays the name and distance. Landmarks are represented as blue star-shaped markers. The map uses OpenStreetMap styling and is embedded in a Streamlit app for easy visualization.
387+
This function visualizes landmarks and nearby hotels on an interactive map using [Plotly](https://plotly.com/python/tile-scatter-maps/). Hotels are color-coded based on their distance from landmarks: red for distances ≤3 km, orange for ≤6 km, and gold for farther hotels. Each hotel is plotted with a marker, and a tooltip displays the name and distance. Landmarks are represented as blue star-shaped markers. The map uses OpenStreetMap styling and is embedded in a Streamlit app for easy visualization.
388388

389389
```python
390390
def create_landmark_map(landmarks, hotels_near_landmark):
@@ -430,7 +430,7 @@ def create_landmark_map(landmarks, hotels_near_landmark):
430430
```
431431

432432
`create_hotel_map(hotels_df)`: Plots hotels, color-coded by their average ratings.
433-
This function visualizes hotel locations on an interactive map using Plotly and Streamlit. Hotels are color-coded based on their average ratings, with a continuous color scale for rated hotels and a distinct color (orange) for those without ratings. It ensures that the map remains interactive even when no data is available by adding an invisible marker. The function also converts numeric ratings into a star-based format for better readability in the hover tooltips.
433+
This function visualizes hotel locations on an interactive map using [Plotly](https://plotly.com/python/tile-scatter-maps/) and Streamlit. Hotels are color-coded based on their average ratings, with a continuous color scale for rated hotels and a distinct color (orange) for those without ratings. It ensures that the map remains interactive even when no data is available by adding an invisible marker. The function also converts numeric ratings into a star-based format for better readability in the hover tooltips.
434434
```python
435435
def create_hotel_map(hotels_df):
436436

@@ -520,7 +520,7 @@ def create_hotel_map(hotels_df):
520520
st.plotly_chart(fig, use_container_width=True)
521521
```
522522

523-
### Step 4: Implement Streamlit Tabs
523+
### Implement Streamlit Tabs
524524
The application is structured into three tabs:
525525
1. **Airports & Flight Routes**: Users can select airports to display routes between them.
526526

@@ -609,7 +609,7 @@ def tab3_visual():
609609
create_hotel_map(hotels)
610610
```
611611

612-
### Step 5: Putting It All Together
612+
### Putting It All Together
613613

614614
In the Streamlit sidebar, users need to enter their Couchbase credentials to connect to the database. The connection is established using the `CouchbaseConnector` class.
615615

@@ -621,11 +621,11 @@ st.title("Couchbase Streamlit App")
621621
# Sidebar inputs for Couchbase connection parameters
622622
st.sidebar.header("Enter Couchbase Credentials")
623623
conn_str = st.sidebar.text_input("Connection String", "couchbases://your-cluster-url")
624-
username = st.sidebar.text_input("Username", "admin")
624+
username = st.sidebar.text_input("Username", "Administrator")
625625
password = st.sidebar.text_input("Password", type="password") # Password input is masked
626-
bucket_name = st.sidebar.text_input("Bucket Name", "default")
627-
scope_name = st.sidebar.text_input("Scope Name", "_default")
628-
collection_name = st.sidebar.text_input("Collection Name", "_default")
626+
bucket_name = st.sidebar.text_input("Bucket Name", "travel-sample")
627+
scope_name = st.sidebar.text_input("Scope Name", "inventory")
628+
collection_name = st.sidebar.text_input("Collection Name", "airline")
629629

630630
if st.sidebar.button("Connect"):
631631
try:
@@ -659,7 +659,7 @@ if "connection" in st.session_state:
659659
tab3_visual()
660660
```
661661

662-
### Step 6: Run the Application
662+
### Run the Application
663663
To start the Streamlit app, run the following command:
664664
```sh
665665
streamlit run app.py
@@ -691,7 +691,7 @@ This will launch the app in your browser, allowing you to interactively explore
691691

692692
Now that you've built your demo app, it's time to deploy it for free using **Streamlit Community Cloud**!
693693

694-
### Step 1: Push Your App to GitHub
694+
### Push Your App to GitHub
695695
Ensure your app is stored in a GitHub repository with the following files:
696696
- `app.py` (your main script)
697697
- `requirements.txt` (dependencies)
@@ -705,10 +705,10 @@ plotly
705705
geopy
706706
```
707707

708-
### Step 2: Set Up a Streamlit Community Cloud Account
708+
### Set Up a Streamlit Community Cloud Account
709709
Sign up or log in at [Streamlit Community Cloud](https://share.streamlit.io/), then link your GitHub account.
710710

711-
### Step 3: Deploy Your App
711+
### Deploy Your App
712712
1. Click **New App** on the Streamlit Community Cloud dashboard.
713713
2. Select your GitHub repository.
714714
3. Specify the branch and main script (`app.py`).

0 commit comments

Comments
 (0)