bottom sheets
When building an initial MVP for your product, it’s wise to avoid unnecessary expenses.
为产品建立初始MVP时，避免不必要的支出是明智的。
Creating an email list for your startup is necessary to facilitate a relationship, especially with your early customers.
为初创企业创建电子邮件列表对于促进与客户之间的关系是必要的，尤其是与早期客户的关系。
The free version of MailChimp only supports a maximum of 2,000 contacts (at the time of writing), while Google Sheets can store an infinite amount of mail for free.
免费版本的MailChimp仅支持最多2,000个联系人 (在撰写本文时)，而Google表格可以免费存储无限量的邮件。
By the end of this article, you’ll be able to connect forms on your website to Google Sheets.
在本文末尾，您将能够将网站上的表单连接到Google表格。
You’ll need basic JavaScript and HTML knowledge.
您需要基本JavaScript和HTML知识。
We’ll be using good old vanilla HTML and JavaScript to keep things simple:
我们将使用良好的老式HTML和JavaScript来简化事情：
演示地址
Embed courtesy of the author via carbon.now.sh. 通过carbon.now.sh嵌入作者的礼貌。Porting to React, Vue, or Angular should be a straightforward process.
移植到React，Vue或Angular应该是一个简单的过程。
Sheetson will provide us with a simple Rest API to communicate with our Google Sheets.
Sheetson将为我们提供一个简单的Rest API，以与我们的Google Sheets通信。
Screenshot courtesy of the author. 屏幕截图由作者提供。Sign up (it’s free) and head over to the console page. Copy the API key. We’ll use it in the next step.
注册(免费)并转到控制台页面。 复制API密钥。 我们将在下一步中使用它。
Head over to Google Sheets and create a sheet. To prepare it for use with Sheetson, label each column of the first row according to the fields you want to send. Here’s an example:
前往Google表格并创建表格。 要准备与Sheetson一起使用，请根据要发送的字段标记第一行的每一列。 这是一个例子：
Image courtesy of the author. 图片由作者提供。The spreadsheet above has first-row columns labeled “email” and “name.” These column names are case-sensitive.
上面的电子表格的第一行列标记为“电子邮件”和“名称”。 这些列名称区分大小写。
Next, share the sheet with google@sheetson.com as an editor.
接下来，与google@sheetson.com共享工作表 作为编辑。
Access the share menu with file>share. 通过文件>共享访问共享菜单。Lastly, get the sheet’s name and ID:
最后，获取工作表的名称和ID：
Creating a new row with Sheetson is easy. Simply send a post request to https://api.sheetson.com/v2/sheets/{SHEET_NAME} with Authorization and X-Spreadsheet-Id header values. The post request body should be a stringified JSON object of the form values with the corresponding column names as keys.
使用Sheetson创建新行很容易。 只需将带有Authorization和X-Spreadsheet-Id标头值的发布请求发送到https://api.sheetson.com/v2/sheets/{SHEET_NAME} 。 发布请求正文应为具有相应列名称作为键的形式值的字符串化JSON对象。
Like so:
像这样：
fetch("https://api.sheetson.com/v2/sheets/"+sheetName, { method: "POST", headers: { "Authorization": "Bearer YOUR_API_KEY", "X-Spreadsheet-Id": "YOUR_SPREADSHEET_ID", "Content-Type": "application/json" }, body: JSON.stringify({name:"name",email:"email"}) })Connecting your form values would look like this:
连接表单值如下所示：
<html> <body> <form action="javascript:submit()"> <label for="name">What's your name ?</label><br> <input required type="text" id="name" name="name" value=""><br> <label for="email">What's your email ?</label><br> <input required type="email" id="email" name="email" value=""><br> <input type="submit" id="submit" value="Submit"> </form> </body> <script> function submit (){ var sheetName = "Sheet1" //enter the sheet name var sheetId = "1ciV-RLMAZ_bOMTva4ThsJ9XT2YnbswnvBAUBzvcoURs" //enter the sheet id var apiKey = "w8pv4JvNbZSjlhcN0JvKRz3zXtPIoyOPddIICD5nwWunPlKc6Kf7C3QSHEo" document.getElementById("submit").value = "Loading..." var email = document.getElementById("email").value var name = document.getElementById("name").value fetch("https://api.sheetson.com/v2/sheets/"+sheetName,{ method:"POST", headers:{ "Authorization": "Bearer "+apiKey, "X-Spreadsheet-Id": sheetId, "Content-Type":"application/json" }, body: JSON.stringify({name,email}) }).then(result=>{ console.log(result) document.getElementById("submit").value = "Thank You!" }) } </script> </html>With that, you’ve successfully created a simple form connected to Google Sheets.
这样，您就成功创建了一个连接到Google表格的简单表单。
Platforms like MailChimp and ConvertKit offer more features like segmentation compared to Google Sheets, but this solution might be just fine to get started.
与Google Sheets相比，MailChimp和ConvertKit之类的平台提供了更多的功能，例如分段，但是这种解决方案可能很好入门。
Thanks for reading!
谢谢阅读！
Simple Email List (codepen.io)
简单电子邮件列表(codepen.io)
Email List Google Sheet
电子邮件列表Google表格
翻译自: https://medium.com/better-programming/use-sheetson-to-build-a-free-email-list-powered-by-google-sheets-8a7398631e29
bottom sheets
相关资源：bottomsheets：适用于Android的Material Bottom Sheets库-源码