Update dart examples documentation (#33)

Signed-off-by: Andreia Ocanoaia <[email protected]>
Genez-io · Mar 11, 2024 · 26fb7c6 · 26fb7c6
1 parent d9cbf86
commit 26fb7c6
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 108 deletions.
diff --git a/docs/examples/README.md b/docs/examples/README.md
@@ -63,11 +63,11 @@ Each example is open-source and it makes a good template to start your project f
 
 The support for Dart is newly launched and still in experimental mode. Don't hesitate to contact us on the [support chat](https://app.genez.io) or on our [Discord server](https://discord.com/invite/uc9H5YKjXv) to help you out if you encounter any problems.
 
-| Example                                   | Short Description                                     |
-| ----------------------------------------- | ----------------------------------------------------- |
-| [Getting Started](dart/getting-started)   | A getting started template                            |
-| [Todo List Flutter](dart/todo-list-react) | A todo list with auth in Dart, Flutter and Mongo      |
-| [Chat App](dart/chat-with-yoda-chatgpt)   | A chat app built with Dart, Flutter, Mongo and OpenAI |
+| Example                                         | Short Description                                     |
+| ----------------------------------------------- | ----------------------------------------------------- |
+| [Todo List](dart/todo-list)                     | A fullstack Dart/Flutter todo list application        |
+| [Todo List with React](dart/todo-list-react)    | A todo list application                               |
+| [Chat App](dart/chatbot-openai)                 | A chat app built with Dart, Flutter, Mongo and OpenAI |
 
 ### **Kotlin**
 

diff --git a/docs/examples/dart/README.md b/docs/examples/dart/README.md
@@ -4,10 +4,11 @@ sidebar_position: 3
 
 # Dart (Experimental)
 
-The support for Dart is newly launched and still in experimental mode. Don't hesitate to contact us on the [support chat](https://app.genez.io) or on our [Discord server](https://discord.com/invite/uc9H5YKjXv) to help you out if you encounter any problems.
+The support for Dart is newly launched and still in experimental mode.
+Don't hesitate to contact us on the [support chat](https://app.genez.io) or on our [Discord server](https://discord.com/invite/uc9H5YKjXv) to help you out if you encounter any problems.
 
-| Example                              | Short Description                                     |
-| ------------------------------------ | ----------------------------------------------------- |
-| [Getting Started](getting-started)   | A getting started template                            |
-| [Todo List Flutter](todo-list-react) | A todo list with auth in Dart, Flutter and Mongo      |
-| [Chat App](chat-with-yoda-chatgpt)   | A chat app built with Dart, Flutter, Mongo and OpenAI |
+| Example                                         | Short Description                                     |
+| ----------------------------------------------- | ----------------------------------------------------- |
+| [Todo List](todo-list)                     | A fullstack Dart/Flutter todo list application        |
+| [Todo List with React](todo-list-react)    | A todo list application                               |
+| [Chat App](chatbot-openai)                 | A chat app built with Dart, Flutter, Mongo and OpenAI |
diff --git a/docs/examples/dart/chat-with-yoda-chatgpt.md → docs/examples/dart/chatbot-openai.md b/docs/examples/dart/chat-with-yoda-chatgpt.md → docs/examples/dart/chatbot-openai.md
@@ -4,31 +4,41 @@ sidebar_position: 3
 
 # Chat Application with OpenAi
 
+:::warning
+Running `dart` on the backend side is still experimental work. If you encounter any issues, please let us know by creating a new [GitHub issue](https://github.com/Genez-io/genezio/issues).
+:::
+
 :::info
-The source code for this example is public on the following [GitHub repository](https://github.com/Genez-io/genezio-examples/tree/master/dart/chat-with-yoda-chatgpt).
+The source code for this example is public on the following [GitHub repository](https://github.com/Genez-io/genezio-examples/tree/master/dart/chatbot-openai).
 :::
 
-Welcome to our demo chat app integrated with Chat GPT, written in Flutter (frontend), Dart(backend), MongoDB as a database, and deployed [genezio](https://genezio.com/).
+Welcome to our demo chat app integrated with Chat GPT, written in Flutter (frontend), Dart(backend), MongoDB as a database, and deployed with [genezio](https://genezio.com/).
 
-This app allows users to engage in conversations with a chatbot powered by Chat GPT. This app is meant to be a demo for a technical talk on the topic of building full-stack apps with Dart and genezio.
+This app allows users to engage in conversations with a chatbot powered by Chat GPT.
+This app is meant to be a demo for a technical talk on the topic of building full-stack apps with Dart and genezio.
 
 ### Clone the example
 
 1. Run `git clone https://github.com/Genez-io/genezio-examples`
-2. Navigate to the folder `cd ./genezio-examples/dart/chat-with-yoda-chatgpt`
+2. Navigate to the folder `cd ./genezio-examples/dart/chatbot-open-ai`
 
 ### Replicate this demo
 
 Prerequisites:
 
 1. Get an OpenAI secret key. Create an account on the [OpenAI platform](https://platform.openai.com/) and head to this [link](https://platform.openai.com/account/api-keys) to add a secret key.
-2. Host a Mongo Database. Follow this [tutorial](https://www.mongodb.com/basics/mongodb-atlas-tutorial) to get a free tier database.
+2. Host a Mongo Database. Follow this [tutorial](https://genezio.com/docs/tutorials/connect-to-mongodb-atlas) to get a free tier database.
+3. Create a `server/.env` file and add the following environment variables:
+```env
+OPENAPI_KEY=todo
+MONGODB_URI=todo
+```
 
 If you want to deploy this demo and play around with it, follow these steps:
 
 1. Install genezio with `npm install -g genezio`
 2. Login on the genezio platform: `genezio login`
-3. Clone this repo: `git clone https://github.com/andreia-oca/dart_fullstack_chat_with_chatgpt`
+3. Clone this repo: `git clone https://github.com/Genez-io/genezio-examples`
 4. Head to the server directory and test it locally with: `genezio local`
 5. When you are happy with the local version, deploy it on our infrastructure with: `genezio deploy`
 6. Brag about it to your friends! You can share the frontend link to your friends and colleagues and let them play around with your new features.
@@ -42,16 +52,3 @@ For more details on how to use genezio, check the links below:
 
 For more details on each dart package, you can check out [pub.dev](https://pub.dev/)
 
-### Ask for help
-
-If you get stuck while testing or developing new features for this demo, feel free to add a new [GitHub issue](https://github.com/andreia-oca/dart_fullstack_chat_with_chatgpt/issues/new/choose). I will try to respond as soon as possible.
-
-### Contributing
-
-There are a lot of fun features that can be added to the app to test the capabilities of the system. Feel free to play around with the code and if you add a nice feature, don't hesitate and create a pull request.
-
-### Beta Testers Wait List
-
-Most of the features used in this demo are not yet released in the latest stable version of genezio. If you want to get exclusive access to the exciting updates about genezio, give us an email at [[email protected]](mailto:[email protected]) to enroll you on our beta testers list.
-
-Github files are available [**here**](https://github.com/Genez-io/genezio-examples/tree/master/dart/chat-with-yoda-chatgpt).
diff --git a/docs/examples/dart/getting-started.md b/docs/examples/dart/getting-started.md
diff --git a/docs/examples/dart/todo-list-react.md b/docs/examples/dart/todo-list-react.md
@@ -2,7 +2,11 @@
 sidebar_position: 2
 ---
 
-# Todo List
+# Todo List with React
+
+:::warning
+Running `dart` on the backend side is still experimental work. If you encounter any issues, please let us know by creating a new [GitHub issue](https://github.com/Genez-io/genezio/issues).
+:::
 
 :::info
 The source code for this example is public on the following [GitHub repository](https://github.com/Genez-io/genezio-examples/tree/master/dart/todo-list-react-typescript).
@@ -15,10 +19,23 @@ This is an example of a todo application that uses:
 - `MongoDB`
 - `genezio` for developing and deploying the project
 
-Note: `genezio deploy` deploys both backend and frontend. If you want to test this example out-of-the-box by running 1 command, head to the `server` directory and run `genezio deploy`.
+Note: `genezio deploy` deploys both backend and frontend.
+If you want to test this example out-of-the-box by running 1 command, head to the `server` directory and run `genezio deploy`.
 
 If you want to deploy your application step-by-step, follow the guidelines below.
 
+## Prerequisites
+- ✅ [NodeJs](https://nodejs.org) >= 16.0.0
+- ✅ [npm](https://www.npmjs.com/)
+- ✅ [genezio](https://genezio.com/)
+- ✅ [Flutter](https://docs.flutter.dev/get-started/install)
+
+1. Host a Mongo Database. Follow this [tutorial](https://genezio.com/docs/tutorials/connect-to-mongodb-atlas) to get a free tier database.
+2. Create a `server/.env` file and add the following environment variables:
+```env
+MONGO_DB_URI=<your-mongo-uri>
+```
+
 ### Clone the example
 
 1. Run `git clone https://github.com/Genez-io/genezio-examples`
@@ -45,7 +62,3 @@ If you want to deploy your application step-by-step, follow the guidelines below
 2. Run `genezio deploy --frontend` in the `server` folder to deploy the frontend in the genezio infrastructure.
 
 Github files are available [**here**](https://github.com/Genez-io/genezio-examples/tree/master/dart/todo-list-react-typescript).
-
-###
-
-\
diff --git a/docs/examples/dart/todo-list.md b/docs/examples/dart/todo-list.md
@@ -0,0 +1,48 @@
+---
+sidebar_position: 1
+---
+
+# Todo List with Flutter
+
+:::warning
+Running `dart` on the backend side is still experimental work. If you encounter any issues, please let us know by creating a new [GitHub issue](https://github.com/Genez-io/genezio/issues).
+:::
+
+:::info
+The source code for this example is public on the following [GitHub repository](https://github.com/Genez-io/genezio-examples/tree/master/dart/todo-list).
+:::
+
+This is an example of a todo application that uses:
+
+- `Dart` for the backend
+- `Flutter` for the frontend
+- `MongoDB`
+- `genezio` for developing and deploying the project
+
+## Prerequisites:
+
+1. Host a Mongo Database. Follow this [tutorial](https://genezio.com/docs/tutorials/connect-to-mongodb-atlas) to get a free tier database.
+2. Create a `server/.env` file and add the following environment variables:
+```env
+MONGODB_URI=todo
+```
+
+## Clone the example
+
+1. Run `git clone https://github.com/Genez-io/genezio-examples`
+2. Navigate to the folder `cd ./genezio-examples/dart/todo-list`
+
+## Initialization
+
+1. Run `dart pub get` in the `server/` folder to install the dependencies.
+2. Run `flutter pub get` in the `client/` folder to install the dependencies.
+3. Create a `.env` file in the `server/` folder and add MongoDB URI and the database table name.
+
+## Deploy the example in the genezio infrastructure
+
+Run `genezio deploy` in the `server/` folder that contains also the `genezio.yaml` file. This will deploy your code in the genezio infrastructure. The application will be available at the URL provided in the terminal.
+
+## Run the example locally
+
+1. Run `genezio local` in the `server/` folder to start the local server.
+2. Start the Flutter app by going to the `client/` folder and run `flutter run -d chrome`.
diff --git a/docs/examples/typescript/todo-list-flutter.md b/docs/examples/typescript/todo-list-flutter.md
@@ -2,45 +2,67 @@
 sidebar_position: 4
 ---
 
-# Todo List Flutter
-
-<!-- :::info -->
+# Todo List with Flutter
 
 :::info
 The source code for this example is public on the following [GitHub repository](https://github.com/Genez-io/genezio-examples/tree/master/typescript/todo-list-flutter).
 :::
 
-<!-- ::: -->
-
-## Getting started with Flutter and genezio
-
-This is an example of a todo application that uses Flutter for the frontend application and genezio for developing and deploying the backend.
+If you want to deploy your application step-by-step, follow the guidelines below.
 
-Note: `genezio deploy` deploys both backend and frontend. If you want to test this example out-of-the-box by running 1 command, head to the `server` directory and run `genezio deploy`.
+## Prerequisites
+- ✅ [NodeJs](https://nodejs.org) >= 16.0.0
+- ✅ [npm](https://www.npmjs.com/)
+- ✅ [genezio](https://genezio.com/)
+- ✅ [Flutter](https://docs.flutter.dev/get-started/install)
 
-If you want to deploy your application step-by-step, follow the guidelines below.
+1. Host a Mongo Database. Follow this [tutorial](https://genezio.com/docs/tutorials/connect-to-mongodb-atlas) to get a free tier database.
+2. Create a `server/.env` file and add the following environment variables:
+```env
+MONGO_DB_URI=<your-mongo-uri>
+```
 
-### Clone the example
+## Clone the example
 
 1. Run `git clone https://github.com/Genez-io/genezio-examples`
 2. Navigate to the folder `cd ./genezio-examples/typescript/todo-list-flutter`
 
-### Initialization
+## Run the example locally
+
+1. From a first terminal, run `genezio local` in the `server/` folder to start the local server.
+2. From a second terminal, start the Flutter app by going to the `client/` folder and run `flutter run -d chrome`.
+
+Note: You must have `MONGO_DB_URI` exported as an environment variable or set in the `.env` file in the `server/` folder.
+
+Flutter will start a new tab in your default browser with the todo list app that you can test locally.
+
+## Deploy the project
+
+1. Run `genezio deploy` in the `server` directory to deploy the project to the cloud.
+
+`genezio` will provide in the terminal a publicly available URL where you can access your application.
+
+Note: To remotely set the environment variables, you can deploy using `genezio deploy --env .env` command.
 
-1. Run `npm install` in the `server/` folder to install the dependencies.
-2. Run `flutter pub get` in the `client/` folder to install the dependencies.
+## Genezio Commands
 
-### Run the example locally
+All commands are run from the root of the project, from a terminal:
 
-1. Run `genezio local` in the `server/` folder to start the local server.
-2. Start the Flutter app by going to the `client/` folder and run `flutter run -d chrome`.
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install -g genezio`  | Installs genezio globally                        |
+| `genezio login`           | Logs in to genezio                               |
+| `genezio local`           | Starts a local server                            |
+| `genezio deploy`          | Deploys a production project                     |
+| `genezio --help`          | Get help using genezio                           |
 
-### Deploy the example in the genezio infrastructure
+## Want to learn more?
 
-1. Run `genezio deploy --backend` in the `server/` folder that contains also the `genezio.yaml` file. This will deploy your code in the genezio infrastructure and it will also create an SDK that can be used to call the methods remotely.
-2. Start the Flutter app by going to the `client/todo_list` folder and run `flutter run -d chrome`.
+Check out:
+- [Official genezio documentation](https://genezio.com/docs)
+- [Genezio tutorials](https://genezio.com/blog)
+- [Discord channel](https://discord.gg/uc9H5YKjXv)
 
-### Deploy the frontend in genezio Infrastructure
+## Contact
 
-1. Run `flutter clean && flutter pub get && flutter build web` in the `client/todo_list` folder to build the Flutter app.
-2. Run `genezio deploy --frontend` in the `server` folder to deploy the frontend in the genezio infrastructure.
+If you need support or you have any questions, please join us in our [Discord channel](https://discord.com/invite/uc9H5YKjXv). We'd love to chat!
diff --git a/sidebars.js b/sidebars.js
@@ -178,9 +178,9 @@ const sidebars = {
           label: "Dart (Experimental)",
           link: { type: "doc", id: "examples/dart/README" },
           items: [
-            "examples/dart/getting-started",
+            "examples/dart/todo-list",
             "examples/dart/todo-list-react",
-            "examples/dart/chat-with-yoda-chatgpt",
+            "examples/dart/chatbot-openai",
           ],
         },
         {