From the course: Replit 101: From Prompt to Product
Using connectors to add external features - Replit Tutorial
From the course: Replit 101: From Prompt to Product
Using connectors to add external features
AI isn't the only integration Repl.it provides out-of-the-box. If you go to the documentation under integrations, you'll see there's also a long list of connectors. Connectors enable the Repl.it agent to integrate your app with external services and can also pull and push information to and from those external services. Now, there are different types of integrations in Repl.it. You have the built-in ones. This is the back end of Repl.it's service itself, where you find databases, data storage, app storage, authorization, all of the stuff that is necessary for your app to work. You have connectors. These are direct connections with external services that are approved by Repl.it and set up by Repl.it that you can simply sign into through Repl.it, and then they have access to your external services. Those services include Google Workspace, Microsoft 365, developer tools, and a bunch of other things. And you can also add in your own custom connectors through MCP if you want to. So let's use one of these integrations in the app. I want to capture the e-mail address and question from each of the attendees that submits a question, if they want to, and place that in a Google spreadsheet for the event. That means I need to integrate with Google Workplace. Now, I already have a folder set up in Google Drive that is going to capture this information. So let's go over into Repl.it. Go to the home page. Go to integrations. Here, I'll scroll down until I find Google Drive. Or maybe what I actually need is Google Sheets. So I'll click Sign In over here. This takes me through the sign-up process for Google Sheets. And what I'm doing here is allowing Repl.it to act on my behalf with Google Sheets. So I'll click on the correct account, then save what I want Repl.it to be able to do. So create, delete, and so create. C, create, delete its own configuration data. C, edit, create, and delete specific Google Drive files. I'm just going to say select all. Then I click Continue. I'm now navigated back to Repl.it, and you can see Google Sheets is now active. If I want to deactivate it, I can click Manage. From here, I can change what features are available, and I can click on the three dots up here and delete this connection. Now that just deletes the authentication between my account and Repl.it. It doesn't take the connection away. You can still reconnect it later or connect it to a different account. Now let's see if we can integrate this. So I'll go to my apps, find the Live Talk Q&A app. Then I'll start a new chat. I'll change the setting from Build to Plan again and say, update the Ask a Question form to have an optional e-mail address field and a checkbox the attendee can check if they want the speaker to contact them later with an answer to the question. On the admin page for each talk, add an export questions button that exports any question where the attendee said they want an answer by e-mail. Add the questions along with the talk title and the e-mail address to a spreadsheet on Google Drive under the Q&A folder. I have no idea if this is going to work, but let's see. The plan agent has put together a plan that makes sense, so let's start building. This new feature I prompted the agent to add is actually quite involved, because not only does it require changing the front end to add new fields to the submission form, but it also requires changing the way the database works on the backend. So the agent is now creating a new database, then migrating the content from the old database to the new database, then rewiring the entire app on the backend so that it's using the new database, and then integrating all the features. And here, I get the question, connect to Google Drive. Turns out I need Google Drive in addition to Google Sheets. So I'll say, connect Google Drive. And now, hopefully, the agent has access to all the Google features it needs to be able to send and receive information. Let's see. The agent is done. Let's test to make sure if this works. I'll go to Admin, type in the Admin password, Access Dashboard, then go into an event. So here we now have that button. That should be Export Questions to Google Drive. But first, I want to add a couple of extra questions. Actually, there's quite a few questions here. But I need to add a couple of questions so that we have those boxes checked. So I'll say Ask a Question, then put in the e-mail address. and check the box and click post question. So if I click on recent, here is the question. It's been rephrased by AI. Now as admin, I will go back to the front page, I guess, to here and then click on this button. And here we have the data in a new spreadsheet on Google Drive. So the integration works. out-of-the-box, just like that. It's hard to wrap your head around as a developer that this is possible, but it is. And I have yet to touch any code in this app.