mirror/lowdefy
2
0
Fork 0
mirror of https://github.com/lowdefy/lowdefy.git synced 2025-02-23 14:39:32 +08:00
Code Issues Packages Projects Releases Wiki Activity
31df2a4120
lowdefy/packages/docs/tutorial/tutorial-requests.yaml
Gervwyk 6dadb94dd3 docs: Fix typos in tutorials.
2021-02-09 13:20:38 +02:00

290 lines
11 KiB
YAML
Raw Blame History

# Copyright 2020-2021 Lowdefy, Inc
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
# http://www.apache.org/licenses/LICENSE-2.0
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
_ref:
path: templates/general.yaml.njk
vars:
pageId: tutorial-requests
pageTitle: Requests
section: Tutorial
# prefetchPages: []
content:
- id: md1
type: MarkdownWithCode
properties:
content: |
We will be saving the data from our form in a Google Sheet, using the [`GoogleSheet`](\GoogleSheet). To do this, we will first need to set up a Google Cloud Platform project to get credentials to access the API.
### Creating a Google Sheet and getting credentials
#### Step 1
Go to [Google Sheets](https://docs.google.com/spreadsheets) and create a new Google Sheet.
#### Step 2
Go to [console.cloud.google.com](https://console.cloud.google.com) and sign in with the same Google account.
#### Step 3
Click on the "Select a project" dropdown at the top left, and then choose "NEW PROJECT". Give your project a name and click "Create".
#### Step 4
Click on the "Go to APIs overview" button, and the click "ENABLE APIS AND SERVICES".
#### Step 5
Search for "Sheets" and select the Google Sheets API.
#### Step 6
Click "Enable".
#### Step 7
Click "CREATE CREDENTIALS".
#### Step 8
Choose the following:
- **Which API are you using?**: Google Sheets API
- **Where will you be calling the API from?** : Web server (e.g. node.js, Tomcat)
- **What data will you be accessing?**: Application data
- **Are you planning to use this API with App Engine or Compute Engine?**: No, I'm not using them
Then click "What credentials do I need?"
#### Step 9
Choose the following:
- Give the account a name.
- Chose "Project > Editor" as the role.
- Choose JSON as the key type.
Click continue.
#### Step 10
You will be asked to save a file. This file contains the credentials to access your sheet, so make sure to handle it securely. Download the file. Do not commit it to source control.
#### Step 11
To use the private on Netlify, we need to base64 encode it, so it can be used in an environment variable. The easiest way to do this is to use the `btoa` function in a web browser console. On any webpage, right-click and choose "Inspect/Inspect Element". Then select the console tab. Enter the the following, using the `private_key` from your credentials file:
```js
btoa("-----BEGIN PRIVATE KEY-----\cmHM04djsk...kpO7EXuQ=\n-----END PRIVATE KEY-----\n")
```
This will output a long stream of characters that are your key.
- id: alert1
type: Alert
properties:
type: warning
showIcon: false
message: By base64 encoding your credentials you have not encrypted them. They are still just as sensitive as before.
- id: md2
type: MarkdownWithCode
properties:
content: |
#### Step 12
Create a file called `.env` in your project directory with the following:
##### `.env`
```
LOWDEFY_SECRET_SHEETS_CLIENT_EMAIL=__YOUR_CLIENT_EMAIL__
LOWDEFY_SECRET_SHEETS_PRIVATE_KEY=__YOUR_ENCODED_PRIVATE_KEY__
```
Fill in the client email and your encoded private key values (without the quotes). This will give the development server access to these secrets.
- id: alert2
type: Alert
properties:
type: warning
showIcon: false
message: The .env file contains your credentials. Do not commit this file to git. It should be listed in your .gitignore file if you started from the project template.
- id: md3
type: MarkdownWithCode
properties:
content: |
#### Step 12
Because we changed the environment variables, we need to restart the dev server. Press "Ctrl + c" in the terminal, and run `npx @lowdefy/cli dev` again to restart the server.
#### Step 13
To be able to use these secrets in our live app, we also need to add them in Netlify. Go to your project on Netlify. Go to "Site settings", then "Build and deploy" in the left menu. Scroll down and select "Edit variables" in the "Environment" section.
#### Step 14
Add the same variables (`LOWDEFY_SECRET_SHEETS_CLIENT_EMAIL` and `LOWDEFY_SECRET_SHEETS_PRIVATE_KEY`) with their values and save.
#### Step 15
We need to give our service account access to our Google Sheet. Go to your Google Sheet and click the "Share" button. Share the sheet with the client email of the service account we just created, with the "Editor" role.
### What happened
We created a Google Cloud Platform (GCP) project, and created a service account in that project that we can use to access Google sheets. This gave us the credentials we need for the [`GoogleSheet`](/GoogleSheet) connection.
We set up these credentials for our local dev environment using a `.env` file, and for our Netlify app using the Netlify console.
### Using the Google Sheets connection
### Step 1
To use a Google Sheet with the Lowdefy connection, we first need to define the columns in the sheet. This will be the same fields as the data we will be saving later.
In the first row of your sheet, add the following column headers:
- ticket_title
- ticket_type
- ticket_description
- confirm_restart
- created_date
#### Step 2
In your `lowdefy.yaml` file, add the following:
##### `lowdefy.yaml`
```yaml
name: lowdefy-project-template
version: CURRENT_LOWDEFY_VERSION
################ -------- Copy from here -------- ################
connections:
- id: google_sheet
type: GoogleSheet
properties:
client_email:
_secret: SHEETS_CLIENT_EMAIL
private_key:
_base64.decode:
_secret: SHEETS_PRIVATE_KEY
sheetIndex: 0
spreadsheetId: __YOUR_SPREADSHEET_ID__
write: true
################ ------- Copy to here ----------- ################
menus:
# ...
```
#### Step 3
Note down your spreadsheetId. You can find this by looking at the url in your browser when you are looking at your sheet. It should look something like:
`https://docs.google.com/spreadsheets/d/{spreadsheetId}/edit#gid=0`
where the spreadsheetId is a 44 character random string. Fill in your spreadsheetId in the spreadsheet connection.
#### Step 4
In your `new-ticket.yaml` file, add the following request:
##### `pages/new-ticket.yaml`
```yaml
id: new-ticket
type: PageHeaderMenu
properties:
title: Loa a ticket
layout:
contentJustify: center # Center the contents of the page
################ -------- Copy from here -------- ################
requests:
- id: save_data
type: GoogleSheetAppendOne
connectionId: google_sheet
properties:
row:
# Get all the values to save from state
ticket_title:
_state: ticket_title
ticket_type:
_state: ticket_type
ticket_description:
_state: ticket_description
confirm_restart:
_state: confirm_restart
# Add the date the row was created using the `_date.now` operator.
created_date:
_date: now
################ ------- Copy to here ----------- ################
blocks:
# ...
```
#### Step 5
In your `new-ticket.yaml` file, add the following action to the submit button:
##### `pages/new-ticket.yaml`
```yaml
id: new-ticket
# ...
blocks:
- id: content_card
# ...
blocks:
- id: page_heading
# ...
# ...
# ...
- id: submit_button
type: Button
#...
events:
onClick:
- id: validate
type: Validate
################ -------- Copy from here -------- ################
- id: save_data # Make a request to Google Sheets
type: Request
params: save_data
- id: reset # Reset the form once data has been submitted
type: Reset
################ ------- Copy to here ----------- ################
```
#### Step 6
If you click the submit button, you should see your data submitted to your Google Sheet.
### What happened
We set up the column names we will be using in our Google Sheet. We need to do this to use the `GoogleSheet` connection.
We defined the `GoogleSheet` connection we will be using in our app, using the credentials we obtained earlier.
We also defined a `GoogleSheetAppendOne` request, to save the data to our sheet, and called that request when clicking the submit button.
### Up next
This is the end of the tutorial. If you have any feedback or suggestions, we would greatly appreciate that. You can start a new discussion [here](https://github.com/lowdefy/lowdefy/discussions).
Our next steps will show you some of the things you could do next.
- _ref:
path: templates/navigation_buttons.yaml
vars:
previous_page_title: Interactive pages
previous_page_id: tutorial-actions-operators
next_page_title: Next steps
next_page_id: next-steps
Reference in New Issue View Git Blame Copy Permalink