From 512473f188313e8da98497113175815ceee1bc03 Mon Sep 17 00:00:00 2001 From: Neel Shah <71593494+neelshah2409@users.noreply.github.com> Date: Tue, 25 Oct 2022 19:48:38 +0530 Subject: [PATCH 1/4] Update README.md --- with-python/README.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/with-python/README.md b/with-python/README.md index 0f9104e..99d7339 100644 --- a/with-python/README.md +++ b/with-python/README.md @@ -55,6 +55,19 @@ In you terminal the endpoint at which your GraphQL API is deployed is logged. A In your virtual environment and inside your `with-python` folder in your terminal, run ` /Users/YOUR_USERNAME_HERE/with-python/env/bin/python /Users/YOUR_USERNAME)HERE/with-python/main.py` to see the data coming back from your GraphQL API. +## Another example - Integrating Weather API +- Please follow the above steps first of creating the stepzen account and cloning the repo. + +1. Create a new file called integration.py in your project's root directory. + +2. Import the requests library. + +3. Define a function called weather that takes two arguments: a city name and an API key. + +4. Make a GET request to the StepZen Weather API using the city name and API key. + +5. Parse the response JSON and return the current temperature in the city. + ## Learn More You can learn more in the [StepZen documentation](https://stepzen.com/docs). Questions? Head over to [Discord](https://discord.com/invite/9k2VdPn2FR) or [GitHub Discussions](https://github.com/stepzen-dev/examples/discussions) to ask questions. From b95b7b2f1ddb297b7ef0fc236db185c79eba168f Mon Sep 17 00:00:00 2001 From: Neel Shah <71593494+neelshah2409@users.noreply.github.com> Date: Fri, 28 Oct 2022 21:26:40 +0530 Subject: [PATCH 2/4] Update README.md --- with-python/README.md | 53 ++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 52 insertions(+), 1 deletion(-) diff --git a/with-python/README.md b/with-python/README.md index 99d7339..ea0b560 100644 --- a/with-python/README.md +++ b/with-python/README.md @@ -57,7 +57,6 @@ In your virtual environment and inside your `with-python` folder in your termina ## Another example - Integrating Weather API - Please follow the above steps first of creating the stepzen account and cloning the repo. - 1. Create a new file called integration.py in your project's root directory. 2. Import the requests library. @@ -68,6 +67,58 @@ In your virtual environment and inside your `with-python` folder in your termina 5. Parse the response JSON and return the current temperature in the city. +- Code just for your reference +```bash +import os +import sys + +import requests + +# Please set your StepZen access key here +access_key = "Your StepZen access key" + +# Please set the URL for the StepZen weather API endpoint +url = "https://api.stepzen.com/v1/weather" + +# Please set the latitude and longitude for the location +# for which you want to get the weather information +latitude = "37.386" +longitude = "-122.08" + +# Please set the start date and end date for which you want to get the weather information +start_date = "2019-01-01" +end_date = "2019-01-31" + +# Please set the units for the weather information +units = "m" + +# Set the headers for the HTTP request +headers = { + "Content-Type": "application/json", + "X-Api-Key": access_key +} + +# Set the parameters for the HTTP request +params = { + "latitude": latitude, + "longitude": longitude, + "startDate": start_date, + "endDate": end_date, + "units": units +} + +# Execute the HTTP request +response = requests.get(url, headers=headers, params=params) + +# Check for HTTP codes other than 200 +if response.status_code != 200: + print("HTTP error: {} - {}".format(response.status_code, response.text)) + sys.exit(1) + +# Print the response from the StepZen weather API +print(response.json()) +``` + ## Learn More You can learn more in the [StepZen documentation](https://stepzen.com/docs). Questions? Head over to [Discord](https://discord.com/invite/9k2VdPn2FR) or [GitHub Discussions](https://github.com/stepzen-dev/examples/discussions) to ask questions. From 1478fed5089daba365e57dd144bdfb2f37f04a99 Mon Sep 17 00:00:00 2001 From: Neel Shah <71593494+neelshah2409@users.noreply.github.com> Date: Mon, 31 Oct 2022 12:08:43 +0530 Subject: [PATCH 3/4] Added Another example with react --- with-react-native/README.md | 132 ++++++++++++++++++++++++++++++++++++ 1 file changed, 132 insertions(+) diff --git a/with-react-native/README.md b/with-react-native/README.md index c0d6c14..49d2d22 100644 --- a/with-react-native/README.md +++ b/with-react-native/README.md @@ -69,6 +69,138 @@ stepzen start In you terminal the endpoint at which your GraphQL API is deployed is logged. A proxy of the GraphiQL playground is available at your suggested endpoint (in example `http://localhost:5001/api/with-react-native`), which you can use to explore the GraphQL API. +## Another way to Integrate Stepzen with React + +1.Download the StepZEN SDK from the website. + +2.In your React project, create a new folder called StepZEN. + +3.Copy the contents of the StepZEN SDK into the StepZEN folder. + +4.In your code editor, open the index.js file in the StepZEN folder. + +5.Import the StepZEN SDK into your React project. + +```bash +import StepZEN from './stepzen-sdk/index.js'; +``` +6.Initialize the StepZEN SDK in your React project. +```bash +StepZEN.init({ + +appKey: 'YOUR_APP_KEY', + +}); +``` + +7.In your code editor, open the App.js file in the src folder. + +8.Import the StepZEN SDK into the App.js file. +```bash +import StepZEN from '../StepZEN/index.js'; +``` +9.Initialize the StepZEN SDK in the App.js file. +```bash +StepZEN.init({ + +appKey: 'YOUR_APP_KEY', + +}); +``` +10.Create a new component called StepZENButton. +```bash +import React from 'react'; + +import StepZEN from '../StepZEN/index.js'; + +class StepZENButton extends React.Component { + +constructor(props) { + +super(props); + +this.state = { + +isLoading: false, + +}; + +} + +render() { + +return ( + + + +); + +} + +handleClick = async () => { + +this.setState({ isLoading: true }); + +try { + +const response = await StepZEN.sendMessage({ + +text: 'Hello World!', + +}); + +console.log(response); + +} catch (error) { + +console.error(error); + +} finally { + +this.setState({ isLoading: false }); + +} + +}; + +} + +export default StepZENButton; +``` +11.In the App.js file, import the StepZENButton component. +```bash +import StepZENButton from './StepZENButton.js'; +``` +12.Add the StepZENButton component to the App.js file. + + + +13.Save the App.js file. + +14.Open the index.html file in the public folder. + +15.Add the StepZEN SDK script tag to the index.html file. + +```bash + +``` +16.Save the index.html file. + +17.Start the React development server. + +```bash +npm start +``` +18.Open http://localhost:3000 in your web browser. + +19.Click the Click Me button. + +20.View the console to see the StepZEN SDK response. + ## Learn More You can learn more in the [StepZen documentation](https://stepzen.com/docs). Questions? Head over to [Discord](https://discord.com/invite/9k2VdPn2FR) or [GitHub Discussions](https://github.com/stepzen-dev/examples/discussions) to ask questions. From de7f7ccacae91a4a217f327893f8f9cfda8b0fbd Mon Sep 17 00:00:00 2001 From: Neel Shah <71593494+neelshah2409@users.noreply.github.com> Date: Mon, 31 Oct 2022 12:10:42 +0530 Subject: [PATCH 4/4] Update README.md --- with-python/README.md | 63 ------------------------------------------- 1 file changed, 63 deletions(-) diff --git a/with-python/README.md b/with-python/README.md index ea0b560..e576cfd 100644 --- a/with-python/README.md +++ b/with-python/README.md @@ -55,69 +55,6 @@ In you terminal the endpoint at which your GraphQL API is deployed is logged. A In your virtual environment and inside your `with-python` folder in your terminal, run ` /Users/YOUR_USERNAME_HERE/with-python/env/bin/python /Users/YOUR_USERNAME)HERE/with-python/main.py` to see the data coming back from your GraphQL API. -## Another example - Integrating Weather API -- Please follow the above steps first of creating the stepzen account and cloning the repo. -1. Create a new file called integration.py in your project's root directory. - -2. Import the requests library. - -3. Define a function called weather that takes two arguments: a city name and an API key. - -4. Make a GET request to the StepZen Weather API using the city name and API key. - -5. Parse the response JSON and return the current temperature in the city. - -- Code just for your reference -```bash -import os -import sys - -import requests - -# Please set your StepZen access key here -access_key = "Your StepZen access key" - -# Please set the URL for the StepZen weather API endpoint -url = "https://api.stepzen.com/v1/weather" - -# Please set the latitude and longitude for the location -# for which you want to get the weather information -latitude = "37.386" -longitude = "-122.08" - -# Please set the start date and end date for which you want to get the weather information -start_date = "2019-01-01" -end_date = "2019-01-31" - -# Please set the units for the weather information -units = "m" - -# Set the headers for the HTTP request -headers = { - "Content-Type": "application/json", - "X-Api-Key": access_key -} - -# Set the parameters for the HTTP request -params = { - "latitude": latitude, - "longitude": longitude, - "startDate": start_date, - "endDate": end_date, - "units": units -} - -# Execute the HTTP request -response = requests.get(url, headers=headers, params=params) - -# Check for HTTP codes other than 200 -if response.status_code != 200: - print("HTTP error: {} - {}".format(response.status_code, response.text)) - sys.exit(1) - -# Print the response from the StepZen weather API -print(response.json()) -``` ## Learn More