GitHub GitHub Satellite 2020 - Workshops, 8 May 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building automations with GitHub Apps and GraphQL - GitHub Satellite 2020

Description

Have you ever wondered how to make cool robots that can help manage repositories? This session will show you how to bootstrap a GitHub App and get it running in under one hour. Speakers Mark Tareshawty and Andrew Hoglund will walk you through selecting composite resources from the GraphQL API and generating a starter application in JavaScript with authentication.

GitHub Satellite: A community connected by code

On May 6th, we threw a free virtual event featuring developers working together on the world’s software, announcements from the GitHub team, and inspiring performances by artists who code.

More information: https://githubsatellite.com
Schedule: https://githubsatellite.com/schedule/

A

Okay and good morning, everyone from wherever you are thanks for joining us for building automations with github apps and graph QL. My name is Mark Terra shadi and my co-presenter is Andrew Oakland, we're part. We are engineers in the community and ecosystems group responsible for get-ups, api's and apps, and for structuring development.

A

We're really excited to be here to share our experiences on how we can start built on how you can start building your own automations, but it's not just the two of us we'd also like to think and take a moment to thank our moderators for helping us out today. They will be available in slack to answer questions and help give a feedback during the presentation to make sure we're all in the same place.

A

Today we're gonna cover how we're gonna learn the fundamentals stuff get about some graph QL we're gonna, create a get about and set it up for local development. We're going to install are gonna back onto some repositories. We're gonna receive an offense from github to our local application and we're gonna use graph QL to respond to those events in an authenticated manner. So let's go ahead and take a look at a demo.

A

Okay, so you see that I just have get up repository here. Nothing too special about it and I'm gonna create an issue so I'm gonna, say test emoji fauna here. So what we're gonna build today is actually gonna be get AB app that can take issue comments and issue bodies and emotive like them. So I'm gonna use something like truck dog bug, I'm gonna, say emoji fight.

A

So the really important thing here is gonna, be this emoji by slash come in, and so we're just gonna go ahead and submit this new issue, and you should see in a moment yep there. It is that our github app translated my words into emojis and I'm. Just going to show you really quick. What that diff look like we're gonna take words that translate from emojis they're, translate that are words and then read. Translate them.

A

Let's talk about github apps, there are our newest and most secure way of building integrations on top of github and there's a lot of great things about apps. But here are some of the highlights. We give you the ability to ask for what you need and nothing more in our applications. We need the ability to up the issue, bodies of the issue, comments and read the source code, and so we'll be able to ask for only what we need and nothing more.

A

There is a singular web hook for all events or if you've ever developed, get up applications before you've probably had to set up a hook on each organization and repository. You want it to listen to events on with github apps. You can actually set up one hook and you're ready to go. We're not gonna go very deep into the mechanics of what hooks today, but if you're curious after this talk, I highly recommend you attend the next workshop, it's called building and get of integrations with web hooks and rests.

A

The presenters are from the ecosystem, events, team and they're, really quite experts on the subject. This is also grant Ilan individual resources. So not only do you need to ask for more permissions than what you need, but your application can be granted access to individual resources like a single repository out of a whole organization. This really helps lower the barrier for organizations to try out an application without giving away the keys to the whole kingdom there's also better insight into user identity. Again, if you've ever used an OAuth application before you've.

A

No doubt seen when you make like an API call from the app it shows up in the github user interface as you not really the app which can get really confusing with geta baps. We actually service that information in a much more clear way and we'll get into that in a little bit tokens expire. If you've ever worked with personal access tokens or all auth tokens, they live forever get up apps. This is not the case. All tokens expire and have refresh capabilities.

A

So you don't have to worry about a long-lived credentials getting neat and we also have more comprehensive rate. Limiting generally tokens have 5,000 requests per hour to use with github apps. We actually take the resources that your application has access to into account when figuring out your rate limit, and so, if your app is on organization or a lot of repositories, we increase your rate limit to try and make it easier to develop.

A

So there's two ways to authenticate with github maps is I kind of alluded to before you have server-to-server, which you might know as bots and use a dist server server. Disturber you'll notice that this pro bots de Lappe has its own identity and it's not tied to any user on github, it's a first-class actor and can be its own can be its own thing. So what does this mean? It can act on its own behalf. It can take actions by API, directly I'm using its own identity.

A

In this example, the image by managed to make file, changes and open up a pull request, all about the interaction of a user, which this also means that you don't have to maintain a blog or service account as a separate user. This is cumbersome and if you're in an organization build plan, as sees this, would actually take up. Another seat. Get a map, so you don't have to worry about that for user to server. This is also known as like. Via a user, it uses the user's.

B

A

Instead of a boy, so what we can happen here is that the eita babba actually uses your identity and the permission that you have as a user to make a BPI requests. You'll see on this page here, then the slack app is asking for authorization on my account. So can make API request on my behalf and what's really cool about this?

A

Is it actually shows up in the github you I, as a user via an app, not just the user, making the requests like opening up an issue or a pull request or deploying I would really encourage you to check out developer Duquette hub comm, slash apps, if you're interested in learning more about apps in general and now I'm going to pass it over to Andrew to talk about graphics. Well,.

B

Okay, yeah hi, my name is Andrew. Thank you Mark. So let's talk a little bit about graph QL.

B

If you wouldn't mind mute e mark, I can just hear an echo there. Thank you yeah, so graph QL. What is it graph? Ql is an API query language at the most basic description.

B

It's graph QL is all about asking an API for specific fields on objects. Now that may seem a little confusing right now, but we have to go back a little bit to understand the other alternative way that you can interact with the github API, which is the REST API.

B

The REST API is a something that's been around for a long time and allows you to make endpoints or to query endpoints or to hit endpoints and get data back from it with predefined payloads. The difference with graph QL is that you can actually query the API filter fields interact with it in a much more robust way and we're going to get into that a little bit later. But first, let's talk a little bit about the history of graph koala github, so originally graph QL was introduced to the world by Facebook.

B

They use it internally for quite some time before they released its the public specification. I think it was in 2015 or around there. Soon after that, github was introduced. Our public graph QL API in 2016 and github, was one of the first large public graph.

B

Ql API is and was also instrumental in in the rapid expansion and growth of graph QL, due to the fact that we expose a lot of the github functionality and allowing you to interact with our our data and your data via our API graph, QL API and like I, said this basically just gives us a new approach to exposing get-up functionality to our users, so as I kind of said, before, probably not in the clearest way. So, let's list that die a little bit deeper into why graph QL? What does it give us?

B

Well, the first thing it gives us is: it gives us type safety in graph QL everything is is type safe and everything is a type really.

B

You have to understand that graph ql1, it's it's language, agnostic, so the service is that right, graph 12 can be in any language. It doesn't really matter it's a language, agnostic technology that allows you to not only implement basic, primitive types like int billions and all those types of things, but also the power of graph QL comes when you can define your own types, and you can describe your business domain in a large graph.

B

Basically, a graph schema that allows you to describe your business domain, those types and and then I'll expose those to users for them to be able to query and interact with. So you can see in this very very simple example that we're looking at the top level of this query of this is the query which basically tells us that we're going to ask API for something.

B

The next thing is the viewer which in that's, basically something that github as denoted as the current user, the viewer and then what we're asking here is for is for a single field on the viewer. So basically, what you're asking for in this query is your own login.

B

What else graph QL also allows you to customize your response data? So, as you can see in this query here, it's it's a little more complicated, we're asking for the NPM organization and then under there we're asking for the first ten repositories in that organization, and you can see here, we have these nested edges and nodes. You can think of these as representations of of a collection and I won't get too much into that right now, but suffice it to say basically what we're doin hit the keyboard there.

B

What we're doing here is asking for one specific piece of information, which is the name with owner, which is a custom attribute that we've defined in our API for the first 10 repositories of the NPM organization.

B

So why is this important? Well, this gives us reduced network traffic. Not only can we customize our query to only pull the data that we need, we can also reduce the amount of network calls that we're making to the API, and so those those of you are familiar with working with REST. Api is well know that a lot of times you'll have to stitch together. Multiple calls to an API in order to get the data that you need.

B

That problem is solved by graph QL, because not only can you nest things like this, but you can stack multiple query. You can call multiple queries.

B

Multiple objects in one API call and get the data back that you need for your application customized in the way you need it for ok. So let's try out some queries.

B

If you would like to follow along with me, you can do so by heading to developer on github.com, slash, v, 4, slash explorer. I think they'll, probably post, that in the chat I'll give you a couple seconds to get there in your browser.

B

And the first thing you want to do is click on that green button on the top to sign you in so this will sign you in as your user I'm, using a test user here called forced update, that's the one I'll be using for this demo, and you can see here that I'm signed in using my account you and I'm going hitting the real live production graft well API.

B

This is graphical, and this allows us to interact with the API via graphical interface. So let's go ahead and just hit play on this query that they give us and you can see. This is exactly what we saw in the presentation. It's just giving me back something that's very.

B

The shape is very similar to the shape of the query that I made, and it's just giving me back the login. Ok. So let's modify this a little bit to do something a little bit more complicated instead of just getting my own login. Actually we can keep that login here. We don't need to even remove that and you I can also ask for other fields.

B

Maybe that's something important to show so like I can I can ask for the login and the created app, and that only gives me those two things so just to highlight the difference really quickly. I'm gonna go I'm gonna go back to my terminal and I'm gonna do something similar in the REST API. So if you see here, I have a curl saved. This curl is authenticating to the REST API and that's asking for my current user.

B

So if I hit that command, you could see it returns me a ton of information, a bunch of URLs to other things that I might be interested in Korean, and it shows me my login a lot of different stuff, but you can see I what I get back this whole payload is returning me whether I, like it or not, and so with graph QL. That isn't the case. I can only ask for the fields that I care about. Let's and let's, let's go a step further.

B

Let's say I, don't want to just see attributes on this. One user I also want to see what repository this user owns, so go ahead and type in repositories. Plural and, as you can see, I just want to note that we have Auto completion.

B

So since graph QL has a schema, this schema can be exposed to the users, and in this case the schema is exposed to users via the our graph QL API, which allows you to know exactly. What are our API defines every single type everything about our our API is exposed to you in one large schema much like. If you have a database schema, you know that's the source of truth for exactly what's defined in your database. It's the same with the graph QL. You can know exactly what is defined and so graph graphical leverage.

B

Is that fact, and gives you all this really cool, auto completion and documentation, as you type your queries, so to move on, let's just type in last 10 and then some curly braces and then, as I showed before we have to drill down into the nodes close and then, let's just ask for a name with owner. So this is going to give me the last ten repositories that this, as you can see, this is nested within the viewer.

B

So this is only going to be the repositories that's owned by the viewer query net, which is me and I'm going to ask just for the name with owner of those. So if I go ahead and hit play that hit, hits the API and I only have two repositories on this user right now, and you can see both of them here and I can also ask for more information on each one. These were I can ask for when they were created.

B

That and- and one other thing I want to highlight- is you can see as I hover over this sort of gives me a little underlying and also gives me these cool pop-ups? So if I click on one of these, this opens up the documentation here on of the schema on the right hand, side. So this allows for great discoverability of the API as you're building out your queries, you can actually look in real time and see what it is is is available to you.

B

So, for example, if I look here at each one of the nodes collection, it gives its it's defined in the schema to return to me, an array of repository objects.

B

So, if I click on the repository object, that shows me all of the fields whether those fields be other connections to other relations in the graph, or it also gives me simple fields, attributes on a repository, and this allows great discoverability of the API, because you can just navigate through here figure out what you want to and how to build your query rather than in the REST API. You would have to make calls or dig through documentation and kind of piecemeal it together yourself.

B

Okay, now it's time to actually get Cody and so to do that. I think this is time for me to hand this back over to mark and he's going to get us started with building a github app. So if you all want to head to this URL I think they'll post it in the chat settings, / Apps, slash new I'll pass it back to you mark.

A

All righty all right thanks so much changer. Okay. So just to recap, the URL we're going to is get up, calm, slash settings, /, Apps, slash new, and this is just the get a VAT registration page. So there's a lot of moving components when it comes to be making a get up app, we're gonna walk through each one, just to kind of get an idea of. What's all about. The first thing we need to do is give it a name, and so just for information get about.

A

Names are actually global across the entire github calm, which means that it has to be unique. So what I'm gonna do is I'm gonna, say, mark tera shotty. So this is my handle, emoji fire and that's just all I'm gonna name it so I mean I prefixed it with my login, so mark tera, shadi, emoji fire.

A

If you end up naming, is something that somebody else has already mean, but you can always come back and come here in reset it, but for now again I just put it as my login and then a mode, your fire, just the name, give everyone a. Second.

A

All right great, so we have a description here. This isn't required. It's actually pretty neat. So if you want to write a description about your apps, so people know what it is before installing it. You can do it, but it's not required for our case, just because this is in development. So we're just gonna go skip right past this. You have a homepage URL. This is technically required, but because our app is in development, I'm just gonna go ahead and put it as example.com.

A

You can set this to be whatever you want it to be, and you can always come back and change it later. So again, I just set the homepage URL to example.com.

A

Coming down to identifying and authorizing users, this is a really big component for the user to server flow that we had talked about earlier in the slides, we're not using this for our applications. So we can just leave this blank, but for future reference.

A

If you wanted to sign somebody in to your app using github, you would set a callback URL here and what it would do is when the user authorizes on github, but we would send the user back to you by a redirect and that redirect would be the callback URL again we're not using it some good information to know we also the post installation flows. So this is another little nicety that we're not gonna use today, but something you should be aware of. There's the set up URL.

A

So when you install a github app onto a repository or organization, you can actually redirect the user posts install back to your site for more setup or activation or whatever you need, but we're not using this just good to know now we're getting into some interesting stuff. So I talked about how all github apps just have a singular web hook that takes in all events from everywhere that it has access to so we're gonna set up that web hook, make sure that it's checked as active.

A

Otherwise you won't be receiving events and we need to set our web hook URL. So you might notice a problem where the app is actually on. My local machine I can't get web hook, events from github to localhost, so what we're gonna use you might be familiar with egg rock is another tool that does this, but I'm actually gonna use a Smita so go ahead and in your browser, open up another tab and go to smile again, that's SME dot! Io!

A

You should just see their landing page, it's pretty neat and what this tool does is it actually will take in webhook events from github and then what we can do is set up a client on our local server to take in events from Smith to our local server. So I'll give everyone a second to get to Sneed on I/o and then I'm gonna go ahead and click start a new channel.

A

Alright gonna go ahead and click start in your channel and you see there's a lot of really interesting stuff here. But the thing I'm really concerned about right now is this web proxy URL. This is gonna, be what we put into the web hook, URL on our github app, so I'm gonna go ahead and copy the entire web proxy URL.

A

So HTTP video and my unique identifier is grabbing the whole thing, copying it and then I'm gonna move back over to my get about registration, page and add Sinha, alright, so we're back onto our get about registration, page I'm, gonna go ahead and paste and again I'm just putting in the entire sameen web proxy URL no extra routes, no nothing just this new URL, and then we also have this web hook secret. Alright, again, I'm not gonna, really get into all the bits and bits and bobs about web hooks.

A

But the important thing to know here is that we have to set a secret for our server. This is just to know that the web hook is actually coming from github and you can and you can identify it I'm gonna set the secret is my secret, very plain, very easy. If you don't set your web hook secret to be my secret, you will not be able to receive what bulk events on your local server and you'll just need to update the code.

A

So I would just recommend sending it to my secret I'll give everyone a second again. We have the web hook, URL Smita io with a unique identifier. This should be unique to you. Don't copy/paste mine you'll get very confused, and then you have the web hooks secret. Just sending it to be my secret. We don't have to worry about us to sell verification.

A

Smee has its own, so certificates that we can just leave that on and the next thing I'm going to go down to is repository. Permissions permissions are broken up basically into three categories: repository organization and user. Our application only uses repository permissions, but I'm gonna go through all three just so you know what they are and you'll see. There's quite a few permissions for repositories, but we're all gonna use a few of them, so the first one I want to use is contents.

A

So contents is the ability to see your code essentially, so you can see releases downloads branches get commits anything of that nature, and so what I want to do is I want to click on access. We just currently set to no access and I want to set it to read-only. Now, what's really cool here. Is that because I've said it to read-only? Obviously, I can't write. This means that while I can read your code, I can't edit your code. I can't do anything with your code.

A

All I can just see is that it exists in what its contents are. This is a really powerful thing if you want to be able to read, say a configuration file, which is what we'll do later you'll just want read access. This gives people who are installing your have a higher level of confidence that you're only asking for what you need, and then we come down here and I'm also going to turn on the issues permissions. So this is anything related to an issue.

A

Its labels comments, anything like that and I'm gonna go ahead and click on no access and I'm gonna go to read and write. So why read and write? Well, if you saw our demo what you would you'll see that it has the slash and mode to fire command and we updated the comment to replace the words with emoji, and so in order to have that write permission you mean read and write and then coming down here, you may have noticed that the metadata permission was kind of automatically set when I instead of contents.

A

This is a very basic and you can almost think of it as a parent repository permission. This permission just kind of gives you, like the name, the number of stars. You know who the owner is very basic stuff, but you really do need it for any of the other repository permissions, which is why we listed as mandatory. If you ask for anything inside of a set of repository permissions now, just so you know, if you don't need access to repositories at all, you don't need metadata permission.

A

You can actually have an app with just organization permissions, but we'll get back to that in a second. The last permission, I want to add, is poll, requests, read and write, and what does this mean? This means that if somebody opens up a poll request and their body has the emoji fire command, we can just go ahead and update that pull request comment now. The really cool thing to note here is that the poll request permission does not give you access to code.

A

It just gives you access to like the pull request itself like the timeline and anything any of the metadata around it, but the contents permission is actually what you need in order to see like. What's the diff above all, requests and I also just want to point out that issues and pull requests are their own two separate granular permissions. So just to recap, we have contents. Read-Only issues read and write, metadata, read-only and pull requests, read and write. The moderators should be posting these permissions in chat.

A

If you get stuck I'm gonna go ahead and scroll past the rest of this you'll notice. There's quite a few.

C

Permissions here we.

A

Try to make it as granular as possible so now, because we're in Organization permissions, you notice they kind of change up a little bit. You have things like members, administration, billing plan, something you could do with organization. Permissions is say you wanted to do like members need, you could technically see who's part of an organization what teams they are and your your app could technically @mention at github team and send a notification, but we're not doing any app mentions so I'm just gonna go ahead and turn this off and say no access.

A

Something really good to note is that you can always update these permissions later. This is not set in stone when you create the application so scrolling down a little bit. We have user permissions, and so these permissions can only be granted through the user authorization flow. The user deserver flow, which we had talked about. In our example, we used the slack app to authorize our identity, and so they can use our and what we're just gonna do here is nothing really, but just so, you now has email addresses GPG keys plans. Anything like that.

A

But again you need the users consent in order to get these permissions so now we're into events. So we talked about how a web hook has a single point and can listen to events across everything. It has permission on. I'm gonna ask for a couple of events and these events you get based on the permissions that you've requested so I'm gonna, head click on issues, issue, comment and pull request, so this will give us a lot of different web hook. Events we'll filter them down in a little bit.

A

But again you just want issues, issue, comment and pull request.

A

Again. It's issues, issue, comment and pull request, and just to recap, the permissions really quick. Just in case you need it. We have contents, read issues, read and write, metadata, read-only and pull requests, read and write so I'm going to scroll past the permissions scroll past the webhook events- and the last part is: where can this get about the installed?

A

There's two kind of settings you can have a set only on this account is what we consider a private github app, and you could only install it on the account that owns it or you can sift any account and what this means is that any user or organization can install your github app, no matter where they are for development.

A

You probably just want to set it to only in this account unless you have like multiple different works that are trying it out so go ahead and sift a private and then I'm gonna go ahead and create the github app.

A

Alright great you'll see this banner up here. This registration is successful. You must generate a private key in order to install your github app will do that in a couple minutes. Just kind of keep that in mind. So the next thing we need to do is we actually need to set up our application. So what I'm gonna do is I'm gonna go over to my terminal here and I already have the repository cloned and you'll see I'm on the master branch. Nothing's really changed, based configuration.

A

If you need this URL again, it's github.com slash, get on satellites workshops, slash apps have graphed you up again skipped satellite workshop, slash apps with graph QL just go ahead and clone the repository to your local machine. You should have NPM already set up, but other than that you should be good to go so now that I have my repository on my local machine. I'm gonna go ahead and start by running NPM run so again. This is just NPM run setup, and this is just doing something.

A

A little bit nice, it's going to copy the configuration JSON file that she's seen this example and copy it to a regular can configure, as you noticed, like nothing's, really changed into get configuration. That's because it's get ignored.

A

So the next thing we want to do is we want to edit our configuration file for our github applications, so I'm gonna go ahead and use my favorite editor of in and I'm gonna open up. My configuration file and you'll see that I have two keys here.

A

They get a map ID and the web proxy URL we're going to need both of these in order to get everything running so the first thing I'm gonna do is I'm gonna, go back to my browser and I'm going to go ahead and copy the whole get about ID, so you'll see like about owned by app ID clan and a client secret meet just meet the primary ID from the app so mine's six three. Ninety four just copying this whole ID and then we're gonna go back over to our editor and update the JSON file.

A

So I'm just gonna go hop right back over to my terminal and I'm, going to set the ID so again get a map. Id is just the primary idea of your github out, so you grabbed it from your about page and put it into the configuration JSON file. The other thing that we need right now is the smee URL, the web proxy URL that we put into the web hook configuration on our GABA, so I'm gonna go back over to my browser.

A

I'm gonna go over to Smee and you'll, see that we've sorry I already started receiving web events. So just a quick look. We received the ping event. This is just a sanity check. Just to make sure our are so web hook is up and ready to go so I'm gonna copy this entire web proxy URL. The entire URL here with the unique identifier and I'm gonna go back over to my terminal and all I'm gonna. Do is just paste this right into the configuration.

C

Moderator speaking, can you go over again where you can find the config that JSON file absolutely.

A

So we have this config dot JSON example file and if you run npm run setup, it should copy the example file over to just configuration dot, JSON yep. For some reason it doesn't.

C

You also cover how to get clogged up repo I.

A

Didn't but we did cover where it was. If you wanted to clone it, all you would do, is you just say, get clone and then the URL here, so you can grab that URL and get out comm slash, get up satellite workshops, absolutely Raph. You will and then you can go to the clone or download button and go ahead and copy the clone URL see we just take it over here. Anyone get clone and then the whole URL and you should be able to clone the repository I.

C

Think are people following along or catching up to that point absolutely.

A

Alright, so we'll give everyone a second just to make sure you have a cloned moderator. Just let me know when everyone's good.

C

But it's git clone and then NPM run set up great yep.

A

So you so what you do is you run git clone? You would have the repo on your local directory. You wouldn't change directory into the apps of graph QL folder. Once you're inside the repository, you would run NPM run setup so again, NPM run setup and this will take the config got json dot example file and copy it over to config a song.

C

All right few people are typing still, okay, give.

A

Everyone a couple seconds and swim and then will once everyone's cloned and we have our config day. So I'll go back over again how to grab all the information for your configuration file.

C

Oh I think you can show the competent Doug kindig Jason to file now. Okay,.

A

Great, so just a recap: we've run, run, npm, run setup, it's copied over the file and then I'm gonna use my favorite editor to open it up, and what this was before. You should see give up a PI, D 0 web proxy URL is empty string, I'm already filled mine in, but the way actually I'll just I'll go over this again. Just so everyone knows so you have they get a map ID, which is just the primary ID a beginner map and the way I got this ID was I.

A

Just went to my github apps settings page and I. Just grabbed this. This game app ID here. So this 639 8 for a number and I went back over to my terminal and I, inserted it as the value for the get of app ID key. So again, just going from your get IMAP settings page grabbing this ID, going back to the configuration JSON file in your editor and then pasting the whole app ID has the value and then the next thing we're you know. I gave everyone a second to do that.

C

C

Caught everyone's al-qaeda.

C

Did you freeze mark.

B

I think mark froze I can take over until he can jump back in sounds.

C

B

Okay, so where we were, it was.

B

B

And then I think he just showed you how to do the github app ID part, so we're gonna tackle the web proxy URL now in order to do that head over to your browser, and you should be able to find the Smee tab that you already had open and just go in the URL brown, the URL bar copy that your that URL and paste it within in this empty string here.

B

So this right, yours is going to look like this all you're gonna do is just paste that in there and that will allow our our application to interact with that. So I will leave this up on the screen once again, don't copy my ID or my Smee thing. This needs to be customized to you and that's why we had to go through this, because this is custom to your app to your web proxy and we can't we couldn't automate this. We had to have you configure this yourself.

B

Give you a couple more seconds to do that. Do we have mark back it.

C

Looks like he's here: okay,.

A

My internet cut out about the worst possible time. Alright,.

B

I will I will hand it back to you. We just filled out the web proxy URL, okay,.

A

Awesome, thank you so much. Alright, so I'm gonna go ahead and reshare my screen and close this out. The internet. Man I tell you what okay, so it looks like we covered how to get this. The web proxy URL from Snee, so I'm gonna go ahead and copy that and reinsert this in here. So again we just have the ID and the web proxy URL, and we can just go ahead and save this great.

A

So now that we have our config file, the next thing we want to do is actually get the private key from our github app. This is really really important steps to make sure we got to make sure we get this right. So I'm gonna go from again. I went from my terminal over to the browser, and we see this like generate a private key in order to install your gonna bat, I'm, gonna scroll, all the way down to the bottom of my page and I'm gonna click on generate a private key great.

A

It should end up in your downloads folder wherever that may be, and what we're gonna do is we're actually gonna copy it from our demonstrate tree into the root of this repository.

A

So I'm gonna, head back over my terminal and what I'm gonna do is I'm gonna copy, the private key, the the suffix is PE m and I'm gonna move it over to my local repository, so I'm going to run the copy command, and you can tell I've done this a couple of times in my history, so I have it in the Downloads directory.

A

It starts with the name of your app, so mine was marked arrow shotty, ammo de fire dot and today's date, which is the 7th so 2025 7 unless you're somewhere, where it's tomorrow, the private key TEM again I'm just copying this from the Downloads directory and I'm setting it I'm gonna, rename it as GH app Tem.

A

So again, I'm just copying just just a highlight what we're doing here, we're copying it from our download directory and we're renaming it ghf Tem, alright, so I'm gonna go ahead and copy that over and if I list, everything in my directory you'll see that it got added here as ghfp ii m, but I'll give everyone a second just to get your download and move it over. So just to recap, logger one's doing that we went down to the private keys section of the app.

A

So we were at the app registration page where we got to get a bath ID and we went all the way down to the bottom, clicked on, generate a private key and then went and got it from our downloads.

A

Once we had in our downloads, we moved over to our terminal and we copied so we did copy downloads, the name of the key and then remained it gh app TEM, alright moderator you wouldn't mind giving me a thumbs up, just make sure we're all not clear, and then we can start keep setting up our app.

C

See no one else has any other questions. Oh, you should be good to go. Okay,.

A

Great, so now that we've copied our private key, the only thing we need to do is just to make sure that our app is working. So what I'm gonna do. First is I'm gonna install all the dependencies that we've set up in this app, so I'm gonna run npm, install just npm install and just go ahead and hit enter, so this should just install all of the dependencies that we need for this project up and ready to go.

A

So just to recap, it was npm, install I've downloaded and install all the packages that I need, and then the next thing we're gonna do is run npm start, but I'll give it more in a second just to get your packages downloaded.

C

B

Shouldn't be too.

A

Many so hopefully it's pretty quick, but if not just just hanging with us.

C

Actually hold on people are lost and we're too copied the pen file. Okay,.

A

Awesome I'll go over that again, okay, so we were on our github app settings, page so settings apps and the name of your app. We have this About section here to see. We all know we're at the same place this about. We grabbed their github app ID, and then we went all the way to the bottom.

A

So if you keep scrolling all the way past the webhook information and ask the display information down to the private keys, I already have a private key generated, but you, if you haven't generated when you would probably see a big green button here, this is generate private key. If you've gone ahead and generated a private key, you'll have to go, find it wherever your downloads are and then once you've done, that we can go back over to the terminal and we can copy the private key from the Downloads directory to the to that.

A

The root or the top level of this repository, where our code is that so we're gonna go ahead and copy the private key from our downloads and then rename it as gh app doc Tem and it's just gh app doc. Key I'm gonna leave this up just so everybody kind of knows what this looks like and then I'll wait for the signal from the moderators.

C

Just as reminder cuff, the gh app that pen should be at the top of the source code, otherwise pretty most part we're good. Okay,.

A

Great, so, just to recap what we were doing before we were installing the dependencies. So this is just NPM install these go ahead and enter and install all the dependencies here.

A

Mine seems to be well I've already I've already installed this, so I can already know what's up and then once we've installed appendices which is just NP and so again we're gonna, run. Npm start alright. So again, I'm just gonna leave this up here as just NPM start and then once you hit enter your server should start. There should be any syntax errors, anything like bad and you should see something. The kind that looks like this.

A

This will be your your local Smee web proxy URL, your localhost with a route, and it should say your app is listening to a particular port and it's connected to Smee. So I'll give everyone a second I'll, just kind of leave the server up and just to make sure we're all on the same page before we continue.

A

Okay, um assuming everyone is good and we can always come back and revisit this. What I'm, gonna do is I'm gonna go validate that I'm able to receive webhooks from Smith and the way I'm gonna do. That is I'm. Actually gonna go back to my browser here. I'm gonna go over to Smee bio and you notice that the web page kind of change- and we have talked about how the pink event it's just like a sanity check.

A

It's like hey, just send something out to the web hook, make sure it's good to go a little bit of main and metadata here, including the information about our app. It's got. Some. It's got the web hook. Events we're listening to some different things like that, so what I'm gonna do here? This is a really neat trick.

A

You can resend web hook deliveries from Smith to your local server, so what I'm gonna do is I'm just gonna click on redeliver, this payload and then I'm gonna, go back over to my brow to my terminal and you'll, see that we have console logged the entire web payload onto on to our terminal. So if you don't see this, let your moderator notes, so we can help get you sorted out.

C

Several people are typing: you, okay, give.

A

Everyone, a second.

C

Well, what's the command that you're at again, which.

A

Which command okay, I'll just go over all the commands again so yeah we have npm install', so npm install' installs the dependencies for us for our project, then to start our local server, we're an NPM start. So again we just run NPM start and we just started our local server.

A

You should see like forwarding from your Smee web proxy URL to your web, hooks your local web hooks, URL, the port and then a connection to CEO, and so once you've got this working kind of looks like mine. You can go over to your browser. You can go to your city page and you could click on redeliver, this payload, so I'm just gonna go ahead and redeliver this again and you'll see. Then you are able to see the entire web hook, payload that we saw on Smee right over here.

A

We managed to see this on our on our terminal. So if you're not here, what will give everyone? A second make sure to reach out to your moderator? If you have questions.

C

All right, if you're, having issues running the pig you had to just go back to your CIO but looks like other people are, are getting all the information, so I think we're good to go. Okay,.

A

Great, so we have one last step of setup before we really start getting to the meeting. The data is this, so what we're gonna do is we're going to actually create a repository to install our application on so I'm gonna go up here and I'm. Gonna click on new repository, so I went again. I went to my browser. I went up to the top right hand, corner and I clicked on new, posit or II, and you can name this repository whatever you want. I'm just gonna call it fire demo I'm.

B

Gonna name mine, a mode.

C

A

Fire demo just.

C

A

What repo I'm looking at I'm gonna set it the private you can set it to public or private. It doesn't matter which and I'm gonna initialize this with a readme, so I'm just gonna scroll back up here, really quick to let everybody take a look at this configuration, the name. You can name it whatever you want, you can set it to either public or private. A pump, private repositories or free NASA might as well take advantage of it, and then you can initialize this repository with our readme.

A

All this does is just sets a little bit of code, so you have some content on your repository. This.

B

Will make it a little bit easier later when.

A

We set a configuration file if we get a chance to do that.

A

Alright, let's go ahead and create the repository.

A

Yeah we created it okay, so it's pretty basic. It's just got the the generic readme here, nothing special about it, but what we're gonna do next is really really important. It's kind of talgut of apps really starts to shine is what we're gonna do.

A

Is we're gonna, take our github app that we created emoji fire and we're gonna install it on our repository so that we can start receiving what poke events have permission and all of that, so what I'm gonna do is from my repository page I'm gonna go back up to my avatar here with the little arrow and I'm gonna. Go all the way down to settings. I'm gonna give everyone a second, so I went over to my a bazaar and I clicked on settings, and this will take me to my personal settings for my account.

A

You see it's got just a little bit of information here again the URL. If you're stuck is you know, calm, slash settings, / profile, we're gonna scroll down to developer settings. So it's not in this part of the navigation. It's all the way down at this part. So it's just developer settings here, so we can go ahead and click on this and we're in the github.com / settings.

A

/ apps URL here and what I'm gonna do is I'm gonna go over to my mark Terra shadi emoji fire app, which is the app that we created and I'm gonna go ahead and click on edit.

A

So now I'm back to my get a map settings page, which is where we created our private key, which has all the webhook information and also has to get a bad lady. What we're gonna do from here is we're gonna go over to this navigation piece and we're gonna click on install app so.

C

A

At the get up app settings page we're gonna, go or to install app and we're going to click on this from the navigation.

A

So now we're at the installation page. If this github app wasn't private and you were the admin of other organizations, these organizations would also show up there's also a high level top-level URL you can install apps from, but because this one's private we're not going to use that. So, once everybody's at the install app section, I'm gonna go ahead, and you see my username here: I'm gonna go ahead and click on install and now I'm on the installation. Page moderator. Would you mind giving me a thumbs up to make sure everyone's everyone's here.

C

Frantically tight, don't good! This.

A

Is a really important part I just want to make sure nobody misses it.

C

Well looks like people are good. Ok, awesome, great.

A

So we have some some really important information here and some settings and I'm just gonna go over them. So when you instill again about you have to kind of settings here, you can either have all repositories which basically says give the app access to every repository. I have on my account, plus repositories that I'll make in the future.

A

But the one we're gonna use today is only select repositories and I feel like this is really where get about starts to shine is because you can actually just ask for a single repository. So you see, I have two repositories here: the demo I used earlier and the the repo I just created so I'm gonna go ahead and click on ammo to fire. Demo here and you'll see that I've selected a single repository, and it tells me the repository lets me remove it if I want. So you could do two repositories.

A

If you want, you can do one repository if you want, but what's really nice is. It has axis just that single repository and then we also highlight the permissions that we're going to be asking for. So we have again a read access to code, which is an alias for contents. We have read access to metadata, which was the information about the repository, the name. Then we also have read and write access to issues and pull requests. So this will this permission again.

A

Will let us update the the issue body, pull request by issue comment bodies to a modify the the content there so I'll give everyone a second make sure you've, either selected all repositories or select a single repository check out the permissions make sure they look right and then we'll go ahead and install the gap.

A

All right, so, let's go ahead and click on install and.

A

Now we see, we've been taken to our settings page with a particular installation. You just see: we've got the permissions again here you have the repository access, which is just a single repository. Really nice thing to note. Is that at any point you could change this to the all repositories or you could remove repository access. If you wanted so say, I had two repos and then I just wanted to add it just want it to be one.

A

You can do that here, it's it's all up to you and it can be changed at any time so make sure you're at this settings installations. Page again, you should see your permissions, the repository access and then, if you ever want to uninstall it it's just right down here in this danger zone section and while everyone is doing that I'm gonna hop over to Smee die. Oh you don't have to do this I just kind of wanted to highlight it.

A

You'll see that two new installation, two new events, are happened while you're doing this, this one's actually going to be deprecated, so we're gonna ignore this, and then you have this installation event. This is a really nice thing when you're an immigrate err, we send you a web hook. Event anytime. Somebody has installed your app uninstall, your app updated the apps. You can kind of keep track of what permission you have you see. You've got some installation information here with the account which is my name.

A

You've got repository selection, which is selected because I've only picked one repository, and it gives you a lot of really great information here. So just double check. Everyone has a good map. Installation set up with the repository access that you want and then we're gonna go back to our terminal. I'm gonna hop this back over to Andrew, so one second.

A

So again, if you had your server up and you're probably receiving these events right now, like I, did so I'm just going to check with the moderator really quick that everyone's all set up good to go. I'm gonna go back to the settings page just to make sure so this is where you should be on your browser. You should have they get about installed on your account, so we'll give everyone a couple seconds just to make sure we're all this in place and then I will pass it over to Andrew.

C

Cool I think we're good to go. Alright.

A

B

Okay, great so now we're actually gonna get into some code, which is exciting so for today's demo we just so we decided, as you can see, to develop this in nodejs, although, as we noted before this, all of this stuff is is code agnostic, in other words, to have a github app running. You don't have to use node. You could use anything that will allow you to have a web server listening on a port and actually both mark and ice myself JavaScript.

B

It isn't even our first language in terms of what we mostly code in every single day. So if you're not familiar with with JavaScript necessarily that's, not a big blocker for you, we're gonna go through every single step and, like I said I'm, not even a full-time JavaScript, developer, myself, okay! So let's get started with some code. So in your code, editor open up in the repo there's gave me a server called Lib, slash server, Jas, open up that file and let's just take a really quick tour of this file.

B

So, on the top we were pulling in a few external dependencies we've pulling in one local dependency, which is our Smee, some Smee client library code, that we abstract it out a few bits of setup like what part were listening on we're using Express as our framework for HTTP server.

B

This is pulling in that config dot JSON file that we spent some time working on and then we're setting up this Smee, client and starting it, and then you can see here is we have a really really simple Express app the Express app is whoops is exposing one endpoint, a slash web hooks using the post method.

B

So actually the first thing we're gonna do here is we're going to delete this code, so line 18 through 21 go ahead and just cut that code out of here, because that's just some boilerplate that we had in there so that we could test that everything was working out so give you a few seconds to delete that okay.

B

So what we're gonna do rather than write all of this ourselves is we're gonna leverage, the octa kit, library. What is the arctic 8 library?

B

Well, there's it's a collection of libraries really so octa kit is where all of the official clients SDKs for the github api are live and we have clients for javascript. We have. We have a graph qlj s, client that we're going to be using and and the one actually we're gonna pull in right now. Is this webhooks.

B

Jas library, this really gives us some nice wrappers around setting up event listeners for web hooks. So let's pull in that dependency.

B

So up here in your external dependencies on block- or you can put it anywhere just make sure it's somewhere at the top of the file here, let's define a new Const and we're going to call it create web hooks api.

B

We're going to require that.

B

From the octocat web hooks library, so once again, this is the line of code. We just wrote Const and then we're extracting out the create web hooks api function, wrap that in curly braces and we're gonna do that by requiring the octo kit web hooks library, you should not have to rerun npm install. We already ran that and all of these dependencies are already set up on this repo.

B

So this should be good to go as long as for those of you who are wondering if we need to do any other set up, it should be good to go with that. Ok, so the next thing we're going to do is actually define a new object that we can interact with and use in our application. So for this we're going to go down to our application section, Const webhooks equals and then we're going to instantiate.

B

Object from that function that we just pulled in so this is what your code looks like so far, const webhooks equals new and then run that function that we just pulled in.

B

And what we're going to do is we're actually going to pass it an object of some configuration settings, one of them being a secret, and so this is going to be that secret. You set up with mark when you, when you define your app in the in the GUI, so unless you did something different, just use my secret.

B

If you, if you chose to do something different, make sure you put that here and then the second argument is going to be path or, and we're going to set up this listener to be on the same path that we did when we were using Express, so slash web hooks. So this is the line of code. We just wrote we're instantiating a new web hooks object and we're passing it in a secret and a path. I'll. Give you a couple seconds to type that out.

B

Okay, next thing we need to do is tell our Express apt to use the mist as middleware.

B

App is our express app we're, calling the use method on it or function and we're passing in webhooks dot middleware. This is the line of code. We just wrote I'll give you a couple seconds to type that out.

B

Okay, now, let's set up some event, listeners go ahead and type in webhooks dot odd and the first argument we're gonna pass in are the events that we want to listen to. For starters, let's just listen to everything so put in a star to denote that we want to listen to every single event that comes into this application.

B

We're going to pass a second argument, which is an asynchronous function.

B

Was that out expand it?

B

So let's go over that really quickly again, we just call the on function from the webhooks object, we're passing it in the events. We want to listen to and respond and interact with right now we're doing star to denote everything and then the second argument for this is going to be in the asynchronous function that gets called when an event comes into our application, and the final step of this in this block for now is just a quick, also dot log.

B

All right one one other thing: I want to do before we fire up the server and see it working type in web. Hooks dot on same thing is up here before, but instead we're gonna, listen for errors, and this will just give us a nice output if something goes wrong. Same thing. First argument is error. Second argument is going to be a function, call is that out open it up and then here same type of deal, console dot, log and we'll just give a nice error message. Error occurred in handler.

B

And we can do some string interpolation here, error on stack.

B

Please note that I'm using back ticks, not single quotes there, so I can get that variable in there. So once again we just define another listener that will allow us to have a little bit more friendly output. In case an error occurs, and our application as we're working through this I'll, give you a few seconds to type that out and then we'll move on.

B

Okay, so if you're in your code, editor I, want you to jump over to your terminal, I might code it'll editor in my terminal or both right here in the same place, so I'm just going to go down here. This is another terminal. I have set up below my code, editor and I'm, just gonna type in NPM start and crossed my fingers that nothing blows up. Well, who nothing blew up?

B

You can see we're listening on port six, four, eight, nine seven and we are connected to our Smee web proxy. Once you have that going jump back over to your browser and go to your smile.

B

Tab now you can see I have a bunch of stuff in here. Your your page may not look exactly like this. This is only because I was doing some stuff on this application before so it doesn't really matter which one you pick you can at this point, because we're listening to literally everything I'm just going to pick this first one here, click on this little ellipsis and then you're gonna see the resend you've already done this before.

B

So this should be nothing new, go ahead and click on this wreath redeliver and then go back to that terminal. Where you started that server- and you should see now that we received excuse me, then we received a post and got a bunch of data back from github, and we log that out to the terminal.

B

Okay, I'm gonna go ahead and stop my server my control scheme and then we'll close. This code editor for right now, actually no by bad one more step.

B

Assume look, I assume everyone's with me. I I think we're good to go. So what we're gonna do now is we're gonna set up our event lister to be it a little bit more granular. We don't what we don't really care about every single event that happens when when this application receives in with them, we only care about certain ones. Specifically, we care about the ones that we set up.

B

Let me set up our app, so you can remember here and the app that, with the events that we service will that we subscribe to or issues issue comments and pull requests. So, let's filter our list of events that we want to listen to down to just those three.

B

So, instead of passing this a string with a star in it, let's pass this an array of strings.

B

First of all, we're going to filter is issue, underscore comment, dot create it, so this will only fire the code within the asynchronous function. If we receive issued a comment that is created all right, comma and we're going to do another option in this array and we're gonna do issues open and then one last one pull request.

B

B

So once again, we passed in for the first argument of our eventlistener, an array of three strings which are going to filter the events that we care about. Give us a few seconds just to expect and type that out.

B

Okay and then the very last thing we want to do is within this asynchronous function, we're going to D structure the event and only pull out what we care about. In this case, it's the payload. So let's define another cons, a structure, the payload from the event like so and then the last thing we'll do is log the payload rather than the whole event.

B

Okay, now that we have that, let's go back to our terminal, let's run NPM start again, fingers crossed I think blows up. Nothing does awesome. So if you jump back to your terminal, excuse me if you jump back to your Smita io browser tab if I redeliver the same one that I just did since this is an installation event. It should not log anything. Let's redeliver that, and if you look at my server output, it didn't it received a post, but we didn't care about it. We just blindly returned to 200 and ignored it.

B

Okay, so instead I'm gonna refire. One of these issue comments that happen a while back and I only want to do. One is created, so you can see here. The action is an issue comment that has been created so I know. This is one of the ones we're filtering on so I'm gonna resend that- and you may not have this and that's fine. You can just see this for now and we'll and we'll get to creating the issue comment in a bit.

B

Actually, you know what I changed my mind: let's actually go, create an issue comment, so you so everyone can see this so go back to your repo that you created the one I created is called, let's get it modified and go to the issues, tab and click on new issue and we'll just say test issue, and then here we'll say all right: okay, so once again what we just did is we went to the repository that you install this app on, went to the issues tab and we went to submit a new issue, and here we are and I'm just going to create this.

B

Now, if I go back to my terminal, you'll see that we actually are seeing the payload logged. So that means that we've successfully filtered out only the events that we care about.

C

B

It's not taking.

C

It and you're gonna pause it for a few people. Our cycle bit, okay,.

B

C

Sometimes they're, okay.

B

Are they stuck on the repo part or I can go over something again.

C

Okay, cool a few people caught up Thanks, okay,.

B

Great and the good thing is if, for some reason, you're just totally stuck, and you cannot get this working go into your terminal- all right. Andrew people are asking if they could see the code, like maybe show your your editor for a little bit. Well, people catch up this part here, yep, okay, I'll, just keep that highlighted for a second.

C

People just want to go over what you're gonna say about doing the checkpoint, since, if people are stuck like in with typos, that will actually just magically add the code base for everyone to see. Yeah.

B

Okay, so if you're, if you're just stuck, go ahead and type in get reset Bart- and this will clear out any of the changes you've made already and then type out, we have some branches, so you're, gonna type out get check out. Work stop checkpoint one.

B

So once again, that's get check out workshop checkpoint, one! You hit that that will change you to the workshop checkpoint, one branch and you should be all cut up and everything should be working for you.

C

Dennis, wouldn't reset the config dot JSON a sauce. You have that configured correctly, it should catch up to where Andrew is that that's.

B

Great and with that I'm going to pass it back to mark who's, going to talk about or graph Qi authorization and a little bit of graphic well.

A

Thank you so much Andrew, okay, so my set up real, quick, okay I just want to reiterate really quick that if you were stuck and something doesn't work quite right and you didn't get a chance to see the code, you can run git reset harder which will reset all the code changes that you've made and then you can run git check, check out workshop checkpoint. One which you can see is the branch that I'm on right now: cuz, that's what I use to get caught up.

A

So again, let's get check out workshop checkpoint, one and I'm gonna go ahead and open up. My editor and I'm gonna go ahead and open up Lib server J s again, which is where Andrew is that, and you can see that the code is exactly where Andrew left us off. We have our webhook listener with the specific events, and then we also have the webhook error handling. The next thing we're gonna do is now that we're receiving webhook events.

A

We need to create an authenticated, API client to start responding from the web hooks to the API. So the first thing we're doing is we're gonna start by pulling in some other arctic libraries.

A

So the first thing I'm going to do is I'm going to create a constant, and this is going to be create off and I'm gonna require it from the octa kit or- and this is gonna- be off app, so you'll see if you use es lint like I'm using um it's, they say it's it's a sign, but it I use never used we'll get there in a second.

A

So if you see zeroth, no sweat again, I'm taking I'm, creating a constant destruction just to create a path function and I'm pulling it from the optic it off app library, so not the web books, library, but still part of the same group. It's just app. What this will do is this will let us start to make authenticated clients and I'll go into a little bit how that works. I'm good.

A

The next thing we're gonna do is we're gonna, create another constant which we're going to be structure and we're gonna, say graph QL, and what this is is we're going to require another octave code library? This suite of this says this SDK is so comprehensive, especially in the JavaScript world.

A

What we're gonna do here is we're gonna create a graph, ul client from the authenticated information we get from free data, so just to highlight this again, we created a constant, create app off, which is requiring the auth app library, and then we created another constant R actual, which is requiring the Arctic hit graph. Ql library I'll give everyone a second just to get those tech caught up and I'm gonna highlight the two lines that you should have as long.

C

As you have this near the top.

A

Of the file you should be okay, um so I'll give everyone a second or two to catch up. I know it's a lot to type.

A

Okay, great, the next thing we're gonna do is all these pieces are starting to come together. I promise we're now going to create another constant down here, and do you remember that private key that we copied from our downloads to the root of our repository, we're gonna, we're gonna bring in the value of it?

A

So what I'm gonna do is I'm gonna, create a private key private key constant and what I'm gonna use is the file system library, which is gonna, say we file sync, and it's going to we're gonna, say gh app key, which is what we remained our private key to be so should be in the root of the root of the project. Name: the ghfp ii m.

A

If you didn't get a chance to rename it or something messed up, you can always just rename this string to whatever the name of the key is, and it should work and then the next thing you're going to do is I'm gonna, say just utf-8 just so we know kind of format. This is in so I'm. Gonna highlight this really quick, you'll see es lid is also yelling at me. Again, because private key isn't assigned value but not used we'll get there.

C

A

Second, hang tight, I'll give everyone a second again: we're gonna create a private key constant, which is just reading in the value of the private key that we copied over. We created a we created, the constant, create app off function from the auth app library, and we also created a constant graph QL from the octave cake graph, QL library. So you should have these two lines to your line, 6 and 7 on my terminal, and you should also have line 16 right under config.

A

You can put this as long as the private key is before the rest of the code. You should be fine, but it's line 16 on my terminal. I'll give everyone a second to catch up moderator, if you wouldn't mind giving a thumbs up, make sure no one's lost or confused.

A

Alright great, so what we're going to do now is we're going to go into the web hooks on. So this is when we receive the different webhook events and we're gonna come right underneath haloed. This is the restructuring of the event to just grab the payload and I'm gonna create a couple of things. Now we're going to type this out, it may be a little bit confusing.

A

Don't worry, hang tight, I'm gonna explain how this works after we write this out, so we're gonna create a constant and the constant name is odd, and this is an asynchronous function that we want to wait for. The result of so I'm gonna say await and I'm gonna say, create app off, so we're using the function that we created as a constant of above from the auth apply Bri I'm going to then add an object on the inside and there's a couple of different arguments that you need here.

A

I'm going to I'm, gonna, add ID, which is the config github app ID and you're like whoa. Mark wait a minute where, where did this config come from I'm glad? You asked up here in line 15 we're parsing the JSON file, but we copied over and it's reading in the values that you set from earlier and adding it as a nice little configuration helper. So we've set the the ID to the github, app ID and then the next piece we're going to use is we're going to use the private key.

A

So we read in the contents of the private key from our repository into the server and we're going to do private keys, the key private key as the value. So we have to get AB app ID, which we had copied over from the browser.

A

We have the private key, which is what we had pulled in from our downloads that are reading in through the file system, library and then the last piece here is actually the installation ID and this installation ID comes from the payload here and if you're confused it's because we really haven't covered yet really the concept of an installation idea.

A

So when you created the installation and by installation I mean you installed your github app on that repository, it created, what's known as an installation, you can think of an installation as a siloed house of permissions, which only has access to the one repository that you've branded access to, and only the permissions that you said when you install them. Each of these silos has a unique identifier.

A

So when we create when we need to create a token to make an authenticated request to github github needs to not only know our github app information, so this ID and the private key is telling you hell. Yes, I am the authenticated app.

A

Please give me a token for the given installation, and so the github will give us a installation token as its referred to, but only has access to the data that the installation has and if you're, waiting, if you're wondering mark where, where did this, where did this installation ID come from, we actually send the installation information at the bottom of every web hook event for a github app.

A

This allows you to be a better API citizen without instead of reaching out to get up and asking for the ID every time you can actually just follow me the information from the web hooks. So you know how does fire back to the information I'm gonna start going into the the graph QL client just so we can keep on time. The next thing we're gonna do is we're gonna, create another constant and we're going to say graph QL graph QL.

A

Oh man, I can't it's a graph QL with off and we're gonna use it's an asynchronous function again, but we need the no. This one is in the main sequence function. This is just a regular function, so we can. We can say graph QL, which is the client we created and we're gonna set some defaults here, don't make the same mistake: I did I did default, sync Euler and it blew up on me and it took me a while to figure it out. It's actually defaults, plural and we're gonna passed in some arguments here.

A

So I will cover what this is in a second, but for now, let's just type it in together. So we do request and then hook.

A

Okay, so this is a lot. This is a kind of obscuring you're, not entirely sure, what's happening here. That's absolutely fine! So remember we covered that. This odd constant is making an authenticated request to github as your app with a private key and asks for an installation token. This is using actually JSON JSON web tokens under the hood in case you're curious. So this is using a JSON web token and it's going and creating an installation token from this is the result of off.

A

We come down here and in our graphic ul client, and we then need the authenticated client to making our requests. We then take the the hook, the hook, which, basically all it does is set. The authorization header for the API request and lets us make authenticated API calls so coming down here. I'm gonna start typing out this query moderators, please. Let me know if anybody gets anybody stuck or I need to go over a fuel with off again just.

C

Keep rolling okay.

A

So we're gonna go ahead and now we're gonna create a query here. So we're gonna create a test query. This is just to make sure that everything's working as expected graph QL with ah create the object Aaron. So we created a variable where we were creating the result of gravity levels. So we are making a fraction well request. We're gonna do is we're gonna say it add the query, which is the kind of like the graph smoker you were doing before with Andrew here right, you'll notice that I put this in a try-catch.

A

Actually we also need to do this console.log test query here, so we're going to make an authenticated API request by graph QL with this query we're gonna log it to the console. You may have an extra console log down here. You don't need it. I'm gonna delete it. I forgot to earlier, so we've made the query I'm going to catch an error here and I'm. So all I'm gonna do is just console.log the errors.

A

So if something happens in our graph QL request where we can't make test query when test query equals console.log, hmm there's a space there try to figure out if I have a typo somewhere well, I guess we'll find well guess we'll find out I.

B

Just want you to use a constants at Alette.

A

Okay, thank you. huh Is it lynching, grape, okay, so go ahead, and you have this try catch here. It's just making a very basic query: we'll get you all caught up in case you get stuck well. What I'm gonna do is I'm gonna go to my terminal, I'm gonna run NPM, start great and then I'm gonna go over to my browser. Where I have my repository, my emoji fire demo setup and I'm gonna create a new issue with this new issue. I'm just gonna say you know hello world.

A

This is my issue right. We don't need to worry about anything right now. We just need it to be the proper event. I'm gonna go ahead and submit the new issue, and you see that I created an issue. We come back to the server and I actually had a error here, which is really nice. You can actually see that it's handling the air, as expected with the try-catch, looks like I made ah I added.

A

So if you, if you notice here on this request, I, add an extra colon which is not great and not the Bella graph, QL syntax, so I can go ahead and save this kill the server start. The server back up I can use Smee to resend the event here ah there you go, and now we have the response from the branch. Well query, which just says the viewer was our point, which are, which was our marked area modified block. If we all you should be here, you should have this graph QL response.

A

If you're, not let your moderator know, we can try and get you caught up. I'll give it one a couple seconds just in case. Anybody needs me to go over or something again and I'm also going to leave the code right here so that you can see what I wrote so starting from line of 28 to line 48 and I'll stop moving the window, because it's probably a very confusing.

A

Actually, you know what I'm gonna do. I'm gonna highlight this so that everybody can see what we were working on there. We go, alright, give everyone a second moderator. If you wouldn't mind, give me a thumbs up when we're good to go.

C

Thank you. People are celebrating to code, but in a few seconds you can keep going. Oh, it's the next part. The checkup. Yes,.

A

We're gonna we're gonna check out, so you know what that's probably better things. So, if you're stuck, if something's not working right, what you, what you're gonna want to do is I'm gonna write and quit I'm going to get reset hard, so I'm gonna, clear away. All of my changes so get reset hard I'm running git checkout workshop checkpoint two. So again, this is good check out workshop checkpoint two.

A

If you do that and then reopen web server, this will actually have all of the code that we just set up sans the actual query that we had written to test to make sure you have the authenticated request.

A

You've ever won a second and if we're good, to go, I'm gonna go ahead and start teaching you how to modify your content.

C

Well, I think we can keep rolling okay. Let's do it all.

A

Right so the next thing we're going to do is we're actually going to show you how to modify the contents of the left hook. So I'm gonna go up back up to the top of my file. I'm gonna go to my local dependencies and I'm going to create another constant, which is a mode you find the function and I'm going to require the path. So this is just up in our local directory moja find out jeaious and I made this mistake.

A

Yesterday, I didn't put in a second parenthesis and I'm gonna cheat and copy a little bit and I'm going to grab the has command command function here and I'm gonna crab command sheäôs. So I'm gonna highlight this for a second, you should have two constants emoji Fi and has command from the local files. The motor fight genius and command dot. J cos everyone about three seconds. Just again, I've got it highlighted up here. Yes, lint may be like hey you're, not using this, yet we will in a second, don't worry all right great.

A

So we now have these two functions. I'm gonna come back down to my web hook. Web hook, listener I'm gonna go underneath all the graph QL appliance stuff and what I'm gonna do is I'm gonna start D structuring the payload. So what's kind of neat is that you can actually destructured multiple I guess: it'd be objects again on a ruby person and not a JavaScript, but I thought it was cool.

A

You do something like this, so if the payload has either a comment or an issue or a pull request, the payload will assign those values and then what we can do here is we can grab the body from whichever object, isn't actually null comment or issue or hole, request body you've ever win a second. So we are d structuring the comment, the issue and the pull request from payload.

A

We don't know which one it is when we receive the hook, but this takes care of all those different, all those different issues, and then we are creating or setting the body constant to. Whichever of these objects responds to body once we do that, we're actually gonna start with the function has come in here and we're gonna, say emoji fine body.

A

So what this is doing is all it's doing is saying: do I have the slash command, emoji Phi as part as part of my body like we had in the example and then we're going to go and say, create a constant new body is equal to a modify body. I won't get into the emotive fly code, just because it's quite a bit, but all it does is it takes your content, matches against words that are emojis strips out the emotive I command and sets it as a string.

A

Then what we want to do here is we just want to console.log the new body and a little bit of housekeeping I'm gonna come down here, I'm, going to clean out the the console I'm payload, so we can see the result. So, just to recap, we created a constant comment: issue pull request from the payload. Only one of these will be available at any given time. We then created the body from one. Whichever one responds to body. We then check to make sure the body has the Emotiv I command.

A

We've translated that body to use emojis and we've printed it out to the server so I'm gonna go ahead and come over to from my editor to my server I'm, going to stop the server process, I'm going to restart the server process with NPM start and I'm going to go over to my browser and what I'm gonna do is I'm going to create an issue comment so truck dog fire, I'm, gonna, say emoji file here so again, words and we know, will already translate truck dog fire. Has a forward slash, emoji, fine and I'm.

A

Just gonna click comment and if all goes well, we should see this uh-huh look at that. We have the emotive vacation in our comp in the server locks, so we know that we managed to receive the slash command, translated it and we're good to go. I'm gonna give everyone a second to catch up. Moderators just give me a heads up if I need to go over anything else, if not we'll check out the next checkpoint and I'll pass it back over to Andrew.

A

Okay, great I'm gonna go ahead and stop my server process close my editor, and let's do this together if you're stuck run, get reset hard, which clears out all of our changes and then we're running git checkout workshop check 23 and if we look at the contents, you'll see that it's doing exactly what we just did checks to make sure you, the Emotiv I command and then console walks it. Alright, I'm gonna pass this back over to you major.

B

Ok great so, once again, if you are stuck and apologies that we're picking up the pace a little bit here, we just want to get through the bulk of the content. We are running a bit low back behind on time, so all of this code you'll have available afterwards as well as a recording. So if you are stuck and having errors, no shame and just running get reset hard and then get check out workshop checkpoint s3, and you will be exactly where we're left off and we can go from there all right.

B

So, let's reopen our live server. A file, and the last thing we're gonna do here- is we're actually going to now make this app update the content back on the issue itself. So right now we're just logging these emojis into the console. Let's do something with better with it. So we're going to go here to our local dependencies are gonna pull in some mutations.

B

Const update body mutation for equals require.

B

And the file we're gonna requires mutations with an SJS right.

B

That's the line we just typed out, update body mutation for equals require, and then the mutations on JS file I'll. Give you a couple seconds to type that out and if moderators want to also paste that in that might help be helpful too. All right. Let's take a look at that. I just want to see what it's doing cause it's kind of important.

B

So when I went over the graph QL stuff before I really only touched on queries, you can also modify and make changes to your data and github using the graphical API and that's exactly what mutations are for. So these are mutation. Queries, Orwell mutation, functions that we provide to you, for example, update issue comment is a mutation which does exactly that will allow you to send in a query that will update an issue comment with whatever data that you want to, that is allowed to pass into it.

B

So in this case you can see here we have a bunch of what just looks like a bunch of variables and types and that's exactly what this is. So this is one of the other powers of graft. Well, is the ability to define these static, these static queries and mutations in strings and then and then pass variables into them so that you can reuse them and that's exactly what we're doing here.

B

We're variable izing, if that's a word, the ID and the uppercase ID is a type that is basically represents a global, unique identifier for this for an object in the graph QL runtime, and then you have a new body variable. This is what we just defined to denote the new emoji fi body, and that's going to be a string.

B

You know the last thing I want to note: is that you'll see this exclamation or bang and that just denotes that this argument is non mobile, that you have to provide it and then we're using those arguments as those variables. Excuse me as arguments into the input of this update, issued comet mutation and then the last thing is that we need to return something from this mutation in this case we're just going to return.

B

The now updated issue comment body and you'll see here that we're doing very, very similar things with update issues and update, pull requests, and so these are just three statically defined mutations that we've put in string in this file and that we're just having a very simple switch statement that will pick which one which query we need to run depending on the event that gets fired all right, so now jump back into your Lib server file and scroll all the way down to this app code and we're gonna go inside what mark just wrote with this hat inside this has command and we're gonna actually call those.

B

So let's go ahead and remove this and we're gonna say: try I'm just going to write out this whole try-catch block I catch err.

B

Err: okay, so we have our try catch type down now within the try. We're gonna run a wait graph 2ql with off. This is what we set up before with mark and we're gonna pass it in one of the mutations from the function. We just required update mutation for and we're gonna pass that event name and that's what's going to allow us to leverage, that's big, that switch statement that we just saw on that file and the second argument is going to be an object of variables, one being the new body which we define here.

B

And the ID, which is the node ID now this is something I didn't go over. So for some reason you didn't get checkout workshop checkpoint three, then you also need to write type. This piece of code out I forgot to go over that, so it's very, very similar to what Mark did with the extracting of the body from the payload, and so we're just doing the same thing here. To get the note ID. This is the the the globally unique ID for whatever piece of content we want to update.

B

So I'll give you a second just to type that out. You can actually just copy paste this line. If you need and then the place body with nobody here, instead, alright and then we want to make sure once other things we want to just take the turn. Here. Everything looks fine.

B

We don't need to console.log anything now we're just within our try. We want to do a return and then hop into your terminal run. Npm start, nothing is blowing up. That's great! Now, let's go to back to your issue and type in this code. Has some serious.

B

Suite so, as you can see, our content got automatically a modified and it translated the words that were translatable, and you can see that the bots did it automatically.

B

Okay, how are we doing on time moderators? Do we need to stop I.

C

Think we can go over just a quick summary of the config is setup. Okay,.

B

All right, so what we're gonna do now is we're gonna, we're gonna, actually fast forward for sake of time and and we're going to skip over into the final version of the code, and this just is gonna highlight one last thing: okay, so if you want to, if everyone I know, you probably have some ownership of the code, you just wrote, so apologies we're gonna, throw all that away.

B

We're gonna do get reset hard and that's gonna, throw all of our changes away and, let's fast forward to the end, we're just gonna go over one last thing, but we won't have you type it out, we'll just talk through it, so you can get check out workshop checkpoint five, which is the final version of this code once again, get reset hard, get check out workshop checkpoint five. Alright, your.

C

Browser is still showing Andrew. Oh.

B

Thank you. Sorry, there get reset hard and get check out. I have aliases for check out, so you probably want to do it again check out work, Check, Point, 5,.

C

B

Open up the code and see what got added if we scroll down to this section here, you can see we have a few new items of code here. So let's talk through this okay, so the what we wanted to highlight here is the the ability for you to allow the you, the repositories that your app gets installed on, to interact and or to configure certain things about your app.

B

So you can basically give your users of your app the ability to pass in certain configurations if they want to do different things with your app that you're going to allow them. So one common pattern that we see a lot I will use a lot. Is this idea of dropping a config file at the root of your of your repository as a pattern? So, in other words, anybody who installs your app?

B

If, for some reason they want to configure it, they can drop a dot, emoji, afire, dot, yeah mol file at the root of the master branch, and so what this code? This query is basically doing, is going out and getting the contents of that file. So we're running a query with the repo name and repo owner variables, we're looking for those that repository and we're looking for an object like a get object.

B

Gi T object on the master branch, with a file name of dot e moja fire dot, yml, that's just a file that we filename that we came up with as for our app here and then we're using the fact. This object can return like an enum of different types, so the only type that we care about so we're going to use an inline fragment to only care about blob types and we're going to get the actual text contained in dive into this.

B

This gets into some more details about how get works and how our graph QL schema works with that. So I'll just leave that at that. But the the summary of this is we're getting that we're getting the contents of this file right here, all right. So then, once again, we're querying and with our graph QL with auth function.

B

We're using that that query that we defined up here and we're passing it in the repo name and owner as arguments and then basically what we're doing is we're saying if that thing has some, if that file is exists and has something in it, let's set our ammo defier config variable to load. In this case it's a yeah mol file, now caveat.

B

Probably you should have some more if you're going to really do this in production, you want some more safeguards around like. What's in the what contents are in the file, you make sure you parsing it and you're only allowing certain keys and you can go to town with that right now, we're just blindly loading in whatever Gamble's in that file and then we're taking that emoji fire config and we're passing it as two new options into our modify. So one of these options do edit mode and emoji limit all right.

B

Well, let's find out so in the in the code, and you don't have to follow along. You can just watch this part, so I have a default config here in the repo I'm just going to go ahead and copy and paste the contents of this into my clipboard.

C

B

I'm going to go back to my my repo, actually I already have the file created, so this is even better so before I had created this file and let's take a look at it, so, as you can see, the default is for edit mode to be replaced. In other words, the emoji will replace the word and we're sending an emoji limit of 0, which is unlimited, so in this case we're allowing people to say.

B

Oh instead of instead of replacing words, we want to amend words and we only want the lit emojis to go up to 5 another way. We don't want people to just blanket this with hundreds of emojis so with this configure now, if I make a a comment on this issue and I just do fire truck dog bug and I'm gonna do something like this, where I copy and paste out a bunch of times just so, you can see the limit and I say and modify watch what happens.

B

Nothing happened might help if I had this server run all right, so I just started the server that wasn't running. Try that again comment Oh.

B

So you can see the words remained and the emojis got put next to them, and also we limited the amount of emojis that we could put on the screen. So that was a just a trivial example, but I hope that it shows you the power of not only being able to have automations with your with your apps, but also allowing your users to be able to customize and configure your app and I. Think with that we're done.

B

C

You everyone for showing up I think we had one request near the beginning of the presentation for you, Andrew and mark to share your vim configs, as people are geeking out over it. Oh.

B

Yes, sir, we can maybe do that afterwards, I I just have a dog files. You can just take a look at they're, all I'll paste them in the chat. Yes,.

C

This is a reminder we'll have the video this workshop posted soon and the slack channel will stay open today and tomorrow and we'll try to answer questions throughout the day and tomorrow also sorry for the sudden speed up near the end. But hopefully you can all go back and follow along the coding segment.

C

Thank you. Everyone for attending bye.

C