Transcription

Hey, I'm Ellen, co-founder of Dark, and I'm excited to show you the holistic programming language editor and infrastructure we've been working on for the last two years. Today, I'm going to show you how to build a fully functional backend for an Office sign-in application. But first, I wanted to do the first thing I would do in any new language, which is set up a Hello World. In Dark, you don't have to install a bunch of stuff or get going with infrastructure before you can have a working API. In fact, all I need to do is specify my route, the method, and my response. I now have this as a JSON API that's on the internet and available. I can say, add a URL parameter to it, so I have hello name, so I can greet my guests by name. And if I were to do this, I could say hello to myself, say hello to my co-founder Paul, say hello to everyone else who works here, say hello to you, a developer who's watching this video. In Dark, I now can see all of these full requests, and I can see what the expression evaluates to. If I chose to change a piece of it, I could see what that trace would now evaluate to. So that's how you get started with Dark. But let's get into building a full backend with, say, workers and API integrations and all your usual backend things. Ahead of time, we built this React application. It's the front end for our Office sign-in application. The only thing that's special about it is that it's pointed at Dark's API for the backend. Otherwise, Dark is completely front-end diagnostic. You can use React, Vue, Svelte, any tool of your choice. I previously built this application in my terminal, npm run build, probably looks pretty familiar. And now I'm going to use Dark's command line application to upload my build file into our CDN. So now that those assets are available for me, what I can do is I can just serve them at whatever route I want. In this case, just the base one. And I need the index.html. So there we go. React application. Right now, we're getting a 404, because we haven't built out our API yet. So let's do that. Traditionally, I would use my browser tools to inspect, check my console. In Dark, I don't need to do that. I can actually get in real time what request is failing and create that endpoint. I can throw some data in there quickly. And there we go. Alan and Paula are hosts. But that's not what you want for a real app. So let's create a new datastore. I'm going to make one named hosts. And we're going to give our hosts names, obviously. And then let's give them phone numbers so we can text them. And Slack IDs so we can send DMs. We're going to want to test this out. So I'm going to quickly add myself into the datastore. I'm going to use a REPL, because I don't have a front-end built for this in advance. But I'm going to leave myself a note that if I wanted to in the future, I can change to HTTP. We do name our REPLs after a combination of an adjective and an animal. Or you can just rename them. So I feel like it's nicer to have that one named add host. And that's not a very clear comment. Change to HTTP later. Great. So now let's just add me into our datastore. You already know that my name is Ellen. I pulled my phone number out into a function ahead of time. And for my Slack ID, I can just grab that quickly from my profile. Since Starks datastores are key-value based, I want to have a unique identifier. And my Slack ID is a good option, since no two people who work here are going to have that. So I'm going to extract that into a variable. And then you can see, as I'm naming my variable, it's putting it into the place where it was before as well. So there we go. We'll use my Slack ID as a key. That's why we did that. And our hosts table. Before, you saw that we could see the output of expressions. But since our datastore functionality has side effects, it doesn't run automatically. We can choose to run it, which I'm going to do now. Once we run it, we see the record that we get back. And we can also see that our host datastore is locked. Once we have production data in here, we'd have to do a migration in order to change our schema. Last piece of this is let's get our host from our datastore instead of our dummy data. And you can see we get this preview of our schema, in case we've forgotten what field we're looking for. In this case, it's name. Great. So when I go back to my React application, should just be me. Great. It's me. And developer. You're here to visit me. We get a 404 again. Same workflow. We can create a new endpoint. In this case, a difference is that while we're still going to do the same dbset operation that we had before, instead of having to build the full object, we can actually just use our incoming request. Use our request.body. Since we don't have a good unique identifier, I'm just going to generate a key. And let's make our new datastore. So I'm going to have a host. And it's going to have a visitor. There we go. Go back and fill that in. So now when we go back to our frontend, what we're expecting is if we check in, we will have it stored in our datastore. But we haven't done anything else yet. So there we go. We get our confirmation. And our datastore has locked. All right. Now let's go about sending me a text message and a Slack DM to say that you're here. I'm going to use Dark's built-in eventing functionality. So I'm going to emit our request.body. So same as before. Set event. To send a text. And I'm going to write similar logic to do the same thing, but to send a DM. Let's run both of those. And we can see here we've created these work items for ourselves. So now we're going to have a new worker for sending a text. Events work very similarly to incoming requests. In this case, I'm going to say let our host name equal our event.host. And then let's get our host back out of our datastore. And let's just make sure we get a response. We do. And the thing we really care about is our host phone. And let's write our message, which would be event.visitor is here to see you. All right. So now I think we have everything we're going to need. And let's use Twilio to send our text message. In Dark, we've wrapped the Twilio API. So when I type Twilio, I get this Twilio send text function. It shows me all of the parameters I need to call into this API. And so I pulled out my credentials ahead of time. So I need my SID, my token, and my phone number. My T number is going to be my host phone, and my body is going to be my message. Like we saw before with our database operations, we can choose to execute this API call. We can see that we get an OK response, confirmation, and I actually got a text message. Great. So one thing left to do. Let's build our Slack DM sending thing. So we're going to make our new worker. And it's pretty similar. Let's grab our host name again, because we're going to need to get their Slack ID. And Dark's copy-paste works by expression, so I'm just going to go grab this. Thanks, Siri. Not very necessary. And now we're going to get our channel, which is going to be our host.slackid. And let's just check real quick. Yep, there we go. Okay. So now since we're using the Slack API, we are going to want to pass in a header that both specifies our content type and also our auth credentials. So let's get going on that. First part, Slack needs a bearer token. And you've probably already guessed, I pulled out my token in advance. And let's merge that with our JSON content type. And just for ease of use, the URL we're going to be using for the Slack API is their chat API, and specifically we want to post a message. All right. So now we're pretty much there. I'm going to use the built-in HTTP client library to post our URL we've specified. In our body, we need our token, which is our Slack token. We need our channel, which we have pulled out as our channel. And we need our text, which I didn't pull it out nicely this time, so we'll do event.visitor. Is here to see you. We don't need a query, so I'm just going to make an empty object, and then we have our header. So let's try this. Hit our play button again. Bot message and message. So I think now what we should have is an application where when we go to our front end, we're able to specify who we're checking in to see. We could add more people to our datastore, but right now we just have me. When we check in as developer three, should get stored in our datastore, I should get a Slack and a text. And that's how you build a complete functional backend in Dark for something like an office sign-in application in less than 10 minutes. If you're excited about this or have something similar to build, please join us at darklang.com.