I have been trying to find more ways to bring in a serverless setup into my projects more and more. The more functions that I can offload the easier it will be to keep my projects as well as share some components between some projects. The more components that we can offload and keep a project staying with static hosting providers makes things easier for me. Airtable has been another tool that I have been using a lot a lot. Airtable is marketed as part spreadsheet Before, we start setting up our HTML. Let us get into Airtable and set up a basic database so we can structure our data. Screen Shot 2018-07-22 at 7.35.37 PM.pngThere is not much here just two text fields with Email and Name. Once, you have a database setup lets go over and to [https://airtable.com/api] this will give us all the information we need to interact with our database. Note: the API key is unique to your account make sure you keep that private. To get start lets just start with a very basic form with a few common fields.
For, the above form we left our action blank. We are going to go back to this soon with a URL. For now, lets head over to webtask. Let's create a blank template and start from scratch. For, this form I am going to use Axios. Head over to the NPM module section and add in axios as a required package. Then head back to inside your editor and setup axios. const axios = require('axios');
module.exports = function(context, cb) {
};
Now, to send data to airtable we don’t have to do the lot. We are going to send make a simple post to our airtable url. var airtable_write_endpoint = airurl;
axios
.post(airtable_write_endpoint, {
fields: {
Email: context.body.email,
Name: context.body.name
}
})
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
Then now if we update our HTML of our form with the URL that we get from web task. We can fill out that form and those fields will get sent over to Airtable. Screen Shot 2018-07-22 at 8.05.33 PM.pngSo, this is a very simple implementation of this. We can improve the user experience, as well as get more fields but this is a simple way to data into a database. Airtable is something that can be powerful for front-end people as this API is something that is very easy to get into and can also be used to host data and access it as a data store as well. I have been having fun with this workflow and I am sure I will work with this more.