Button to create data | API

[Dr_Dark]

Hello.

I’m having some issues with a website i’m making.
Would it be possible for anyone to give me a quick guide on how i’d make an HTML button that’ll submit some data from boxes?

I already have this code below, but it seems it’ll only recognize require in my server.js, but i obviously can’t refer to code in there.
Everywhere else i just get require is not defined.

var Airtable = require('airtable');
var base = new Airtable({apiKey: 'YOUR_API_KEY'}).base('YOUR_BASE_ID');

base('MissedAttacks').create({
"Username": "$Jujubeez$",
"AttacksMissed": "2",
"Date": "2008-01-18",
"Total Stars": "50 | 54",
"Is Valid": true,
"Which Clan": "Main"
}, function(err, record) {
if (err) {
console.error(err);
return;
  }
  console.log(record.getId());
});

[Bill_French]

Dr_Dark:

Everywhere else i just get require is not defined .

Dr,

It’s difficult to say what the underlying issue is. Could you expand on this by providing some additional details about the environment? Is this NodeJS? Also, can you provide a little more context as to where this code fragment exists in your app? Is this in the root of a tag? In a function?

Red Flag (sidebar)

var base = new Airtable({apiKey: ‘YOUR_API_KEY’}).base(‘appWtux0RgXKL8Ssv’);

A line like this in a web app will expose your API key to the entire web. With it anyone could foul or completely delete all your Airtable data. Worse, they could see all your Airtable data which may contain sensitive information. Ideally, your API key must be protected and @Chinara_James demonstrates this here.

[Dr_Dark]

Bill.French:

It’s difficult to say what the underlying issue is. Could you expand on this by providing some additional details about the environment? Is this NodeJS? Also, can you provide a little more context as to where this code fragment exists in your app? Is this in the root of a tag? In a function?

Sorry.
I guess you can just view my project instead. That’d probably be easier.
https:_//glitch_.com/~hoggystyle
Please remove the _'s
What i’m working with here is: server.js views/index.html and public/client.js
I’m guessing it’d make most sense to make this button in client.js but if i do that, then i get Require isn't defined

Bill.French:

A line like this in a web app will expose your API key to the entire web. With it anyone could foul or completely delete all your Airtable data. Worse, they could see all your Airtable data which may contain sensitive information. Ideally, your API key must be protected and @Chinara_James demonstrates this [here]

This is only my base ID. API key is hidden very good away. And it contains no sensitive info and it never will.

And i forgot to say. The code i have in the box at top will be a function, executed by a button somehow. How, that’s what i need help with.

[Bill_French]

Dr_Dark:

I’m guessing it’d make most sense to make this button in client.js but if i do that, then i get Require isn't defined

Right, okay. So, Is it possible you’re simply conflating two programming constructs - (i) code that is intended to run server-side (such as a NodeJS app) and code intended to run client-side (plain old javascript in a browser)?

I don’t think there’s anything wrong with the approach in your code shared above. Ideally, the client would kick off a post request to your server and the server would execute to create() method in the Airtable SDK. I think that’s kind’a what you are doing, eh?

Take a look at those two links to client and server Airtable SDKs.

[Dr_Dark]

The code above is just the code i need to run. How i actually try is like this:

function submitData(base, Airtable) {

event.preventDefault()
var Airtable = require(‘airtable’);
var base = new Airtable({apiKey: process.env.AIRTABLE_API_KEY}).base(process.env.AIRTABLE_BASE_ID);
var username = document.getElementById(“newUsername”).innerHTMl;
var attacksMissed = document.getElementById(“newAttacksMissed”).innerHTML;
var date = document.getElementById(“newDate”).innerHTML;
var totalStars = document.getElementById(“newTotalStars”).innerHTML;
var whichClan = document.getElementById(“newWhichClan”).innerHTML;

base(‘MissedAttacks’).create({
“Username”: username,
“AttacksMissed”: attacksMissed,
“Date”: date,
“Total Stars”: totalStars,
“Is Valid”: true,
“Which Clan”: whichClan
}, function(err, record) {
if (err) {
console.error(err);
return;
}
console.log(record.getId());
}); }

---

var username = document.getElementById(“newUsername”).innerHTMl;
var attacksMissed = document.getElementById(“newAttacksMissed”).innerHTML;
var date = document.getElementById(“newDate”).innerHTML;
var totalStars = document.getElementById(“newTotalStars”).innerHTML;
var whichClan = document.getElementById(“newWhichClan”).innerHTML;

These are input boxes on my page.

[Bill_French]

Okay, I believe this is a problem…

Loading the SDK (line 😎 creates an object (i.e., Airtable) that should be statically declared (Const?) outside any functions that use it. I am assuming that you are sharing the server-side (NodeJS) code here.

As you have it, the Airtable parameter passed into your submitData() function is attempting to make is a dynamic variable, and the var (re-declaration) is likely throwing an error.

I’m not an expert in all the nuances of NodeJS or even the Airtable SDK as I tend to build custom equivalents of the SDK into my existing integration frameworks. But, I think if you move line 8 outside the function and drop the Airtable argument (from that function), it might work.

[Dr_Dark]

Hmm is it possible to just copy this code, and then replace the get with post? (And then of course fix the variables to the form instead.)

app.get("/data", function(_, response) {
if (cachedResponse && new Date() - cachedResponseDate < cacheTimeoutMs) {
response.send(cachedResponse);
} else {
// Select the first 10 records from the view.
base(tableName).select({
maxRecords: 21,
view: viewName,
}).firstPage(function(error, records) {
if (error) {
response.send({error: error});
} else {
cachedResponse = {
records: records.map(record => {
return {
name: record.get(‘Username’),
atkmissed: record.get(‘AttacksMissed’),
date: record.get(‘Date’),
totalstars: record.get(‘Total Stars’),
isvalid: record.get(‘Is Valid’),
whichclan: record.get(‘Which Clan’),

        };
      }),
    };
    cachedResponseDate = new Date();
    
    response.send(cachedResponse);
  }
});

}

[Bill_French]

Yes, that may work, however, you may also be getting into some weeds with cross-domain security depending on how you implement this. Is the client and server the same domain?

As I can see, your recent code share suggests this is NodeJS and server side.

Here’s a good practice to follow when building server-side code -

• Always start with the most reducible code framework. This is to suggest that you only build and test the minimal process - i.e., a GET that returns a static value, and a POST that hears and echos a dynamic value.
• Perform all tests from a reliable framework such as this or this.
• Always add API functionality slowly all while testing from tools that provide insight into the outcomes of each test.

Only after you have tested the server-side code and ready it for production, should you attempt to integrate from the client. Otherwise, you may be dealing with issues on either side and debugging unknowns from two perspectives is daunting.

[Dr_Dark]

I only just began working with databases yesterday, and i also recently began learning javascript. I’m very newbie, so i have to slowly learn all this :slightly_smiling_face:

[Bill_French]

Yep - I get that. I’m an accountant -> turned database guy -> turned software guy -> turned integration guy -> turned API designer -> turned solution architect -> turned real-time analytics dude -> turned AI hack. Still learning.