Microsoft 365 Community Community Demos, 25 Nov 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Contributors Corner - GitHub Contributions using the VS Code Web Editor

Description

In this 15-minute developer / citizen developer focused demo, David Warner interactively steps viewers through the creation of their first Pull Request (PR) using a new simplified GitHub contribution tool. Create an account in GitHub and scan the Barcode from demo to pull up a page and repository to edit. Open VS Code in Web Editor, create a ReadMe-UserName.md (Markdown) file, commit (save) changes to GitHub, open and update Pull Request (PR) template and submit your PR! This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on November 25, 2021.

Demo Presenter: David Warner (Catapult) | @DavidWarnerII

Supporting materials:
• First Time Contributor training – sharing-in-caring | https://github.com/pnp/sharing-is-caring
• Website – Sharing Is Caring | https://pnp.github.io/sharing-is-caring/ | https://aka.ms/sharing-is-caring
• Extension - GitHub Repositories | https://marketplace.visualstudio.com/items?itemName=GitHub.remotehub

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

We're going to talk about github contributions using the vs code web editor, my name is david warner, uh feel free to reach out. If you have any questions- and it's important to know also that uh on this demonstration it is going to be a live and interactive demonstration, so you're all able to participate. In fact, if you're watching the video on demand after today's session, you can still participate following along everything, you see us doing today, you'll be able to do on demand afterwards.

A

So we look forward to seeing those contributions trickle in let's talk about traditional github contributions. So uh you know historically, you've had to kind of combine a number of technologies to be able to contribute via github to some of our initiatives. So you'd have to install git. Then you would go ahead and create a github account which is free and then you'd use a variety of tools and you could choose, and these are not all encompassing, but you would use the command line.

A

You would type all of your interactions with github and not always the most favorite for everyone, especially if it's new for you, you could use visual studio code, download visual studio code, install an extension. You still had to install git, and maybe it was a little bit more cumbersome to do all those things, but it maybe was a better environment in the end, because it was much more uh clickety clackady right, you could just kind of point and click or you could install github desktop again a independent solution that you could utilize.

A

But when you combine all these, if you're brand, new and you're not sure how and where and to get started, it's a little overwhelming and and so combining all these tools and understanding them could be a little intimidating. Let's talk about a simplified, github contribution approach. Now all you really need is github and a browser. You don't even need to install vs code. If you don't want, we recommend you do and we'll talk a little bit more about that in a few moments, but to actually get started, making a full contribution.

A

All you need is a github account and a browser. So what does that look like? Well, let's jump directly into our demo. So let's talk a little bit about the agenda and the requirements so be logged into your github account again. This is not just for what I'm going to show you, but for all of you it is interactive.

A

We're going to open up vs code in the web and and maybe you're like what kind of portal to some other world is that, yes, it is available we're going to create a readme file together, so you're all going to create a readme with your username file, we're going to just add a nice little geographic location to the readme greetings from wherever you're at we're going to commit.

A

Maybe that's a new foreign term to you commit is just a fancy way of saying we're going to save it to github and then we're going to submit a pull request, and if the poll request term is also unfamiliar. The simplified way of looking at a pull request is that you're going to make a change to a repo that you don't own or administer, but you're then going to copy it into your account and you're going to make that change and then you're going to send a request to the administrators of the repo.

A

You don't own to pull it in so think of it kind of you know you may think you're pushing it in, but it's actually kind of the reverse you're asking them or making the request for them to pull it back. So if anybody encounters any issues along the way today, where your experience is different from what we're presenting on the screen just bear in mind, we won't be able to stop and help anyone individually, but we can do that in the sharing is caring sessions.

A

We provide hands-on guidance, so please sign up we'll have some links for you to do that. But let's see if we can break some records today, so the first thing you want to do is you want to pull up the page and the repository we're going to edit. So if you go to pr a dot sharing dot, ms, that is going to take you to the sharing, is carrying repository. So here I am I'm going to put that in right there and that's going to take you to the sharing is carrying a repository.

A

Now this is a github, we're, probably all familiar with it. If we've ever been to it, it's likely been a little intimidating because you're seeing a lot of foreign terms like fork- and uh you know a variety of other things that we may not be familiar with, but there is a very, very cool thing hiding behind all of this that I bet you didn't know so bring up. This url make sure you're logged in now, I'm using an account here.

A

That is not my typical account and again I'm just calling that out, because if I were to do it as my typical account, it would be an administrative account. So I want you to see everything that I'm seeing. I have no special rights here, so there's nothing. I'm doing that's unique to what you're going to be able to do, but when you're on this page github.com forward, slash pnp forward, slash sharing dash is caring. I want you to do one little thing that probably, and hopefully will blow your mind, hit the period key now.

A

You can't see me doing this, so I'm describing it but hit the period key and you're going to see the results of that setting up the web editor. Now what this is done, let's take a moment, uh is it's actually just changed our url right, so it's taken us to github dot, dev forward, slash pnp forward, slash sharing is caring, and so you can actually do that by just changing the url there from com.dev, but it's taken us into a web version of vs code right now.

A

There are a number of maybe familiar things to you. If you're familiar with it like extensions, you can actually install some extensions via the web, which isn't crazy and it utilizes the functionality of a a real extension nvs code called github repositories which we'll talk about in a moment. But you can do everything here as if you had installed git and were using any one of those other tools. I told you about.

A

So what we're going to do is we're going to try to create a new file all of us together and we're going to submit a pull request together each individually. So we've got this folder here uh called pnp demo contributions all right and if you open it, uh there's just a sample uh and we're just gonna leave that there we use that to instantiate the folder and you can create a new file in a couple of ways.

A

You can right click and select new file right or, if you're clicked on the folder, and we want to make sure we're clicked on the folder. You can also do the little new file icon right there and that will create a new file so in either case it's a little easier to right click on the folder and select new file that ensures that you're creating a file in that folder.

A

And so you, you want to click new file and that's going to open up a little text box here and I'm going to just type warner dot digital.

A

Now it's important that you'll type whatever your username is right.

A

You want to make sure you type whatever your username is because we want a bunch of unique files here right if we all name the same file, we're going to create collisions and overwrite each other's files, and so this will ensure that all github usernames are unique, so you hit enter and that just creates a simple little markdown file and and we're not going to do anything crazy here, we're just going to say, greetings from and I'm going to say, los angeles, los, lunas, los angeles, not los angeles uh angelus and jealous yes and uh just add a couple of heart emojis um and you can actually go ahead and put in whatever it is that you're from we'll see where everyone's from this is a nice way of showing how far uh spread the community is uh and you'll notice.

A

I don't have to save right. Everything is automatically saved and we kind of see that if we look right over here, that is what identifies changes that we're making in this repository right, and so we see one and that's because we added this little markdown file and we see that as well by the little a icon, which means added now again, don't feel overwhelmed by all this. We want you to join a sharing and caring session to learn more we're just showing you how simple it is for you to interface directly into github.

A

Now we talked about not owning any of these repos right, like none of us, are using an account that owns this repo or is an administrator in this repo. So how is it that we're going to make this change? Well, if you click on the source control. At this point, it's automatically saved, you click on the source control, and it shows the changes that we've made right. So there's our file.

A

In fact, we could double click on that and it shows us what the before and after was because it never existed before so now it exists and it's showing us what we added right now, in addition to that, what we can do is I'll close that open that back up um and it says uh to create a pull request, enter a message.

A

Now we're not going to create a process directly from here, um but what we are going to do is commit, so we still want to uh enter a message and we'll just say, added greetings file, something simple: you can write whatever you want and we want to commit it, and so you'll notice, when I hover over the little check box there. It allows me to commit now again commit is a fancy way of saying save, but you may think: how is it that we're going to commit to a repo that we don't own?

A

Well, that's where the source control comes in, so I'm going to click that and click commit, and it's going to tell me right here, you're trying to make changes to a project. You don't have right access to because we're not an administrator. So it's going to ask me: do you want to create a fork of this project to commit the proposed changes? To so remember, a fork is just a fancy way of saying make a copy of it in my account, so I can make changes to it and then we'll submit a pull request.

A

So yes, if you get this message, then you want to select fork repository now for anyone, that's already joined, sharing his carrying session and already forked the sharing is carrying repo. You likely will not get this message because you've already forked it you'll go directly to where it asks you. The next thing, which is, would you like to create a branch?

A

And so yes, we want to create a branch, we're not going to get into too much detail on exactly what a branch is, but it is a copy of a copy join. The sharing is caring again if you'd like to learn more about it, but it's just a normal way of software development life cycle contributions in making a copy of a copy. So it's an isolated place to make your changes, we'll leave it at patch, one or whatever.

A

The name of yours is so you hit enter, and now it's told me, okay, uh committed again fancy way of saving your changes to your fork of sharing is carrying. Do you want to switch to your fork to continue to make changes? So we're going to say? Yes, we want to switch to fork and now it refreshes it and you'll notice that the url is no longer uh pointing at p and p sharing is carrying. It is now pointing out whatever your url is. Whatever your account name is right, because now we've made that change.

A

uh We've got a copy of a copy here, patch one, and if I expand this, then we can see there's my file. Now none of us are going to see each other's files yet right because we are not making a pull request, so we just see our own. So how do we make that formal pull request?

A

There is a couple of ways we could actually do it directly from here if we wanted to right. So if I were to come here and say, pull request create pull request. It actually creates a little interface here, showing exactly how to do that. um There's a little newness here, though it doesn't include things like our pull request template.

A

I wanted to point this out, though, just so you knew it, but what we're going to do is we're going to click on the little hamburger menu item here and select, go to repository, alright go to repository, and what that does is it opens up a new tab and takes us to our repository and it shows in fact, or should show patch one had pushes one minute ago right now. It shows us here is our branch list right here, um but we can compare and pull request.

A

So if you don't see this little yellow uh little yellow box and the button, you can always go to your branch right here. When you drop down, it should show your branches, and there is my branch right there. So I'm going to select that now when I select that it shows on my head right, and so I could click compare pull request or- or you have this contribute button right here. That shows that as well right so either of those buttons are the exact same thing, you want to click open, pull request.

A

Now, what we've done is we created a pull request? Template specifically for this call, so just real briefly we're going to run through updating that, so you want to fill in an x, you can always use the preview tab to show the pnp demo has been checked. This is the category again. Every repository has specific pnp or pull request templates to fill out. It's always important to read them. We're making this one pretty accelerated for the demo. So I'm just going to say: pnp greetings demo, and so we fill that out.

A

You can click the preview tab to make sure everything looks accurate. As you scroll down you're able to see all of the changes we made we're adding a file. One edition who made it commit again fancy way of saying save one file: change contributor.

A

Okay, so now the rubber hits the road don't pay any attention to this up here. This is showing where we're going to push it to uh and again we talk more about this in our sessions. It's already defaulted to master for you and you should be able to click, create, pull request and, if all goes well, my email will be blowing up here and anyone subscribed. I already see five pull requests, 17 awesome and they continue to come in. So clearly everyone is doing. Well, that is fantastic, and here they come.

A

I'm going to mute my my speakers all right. Let's talk a little bit more about some options that are available to you. You may not love editing everything in the browser, but it is amazing that that technology exists everything we just did in that web-based. Experience is also available in a github repositories, vs code extension. If you do enjoy working within vs code, it is highly recommended. You have a little bit more uh experience that you can take advantage of, and so uh you can go install this.

A

It's only a few months old actually, and it will give you that same experience. You have to authenticate from with nvs code to your github account, whereas through the browser you're already authenticated, so it just simplifies that, but take advantage of that vs code extension. It is very, very cool.

A

If you had trouble in this demonstration and interactive collaboration opportunity, um please don't let it frustrate you come join. Us sharing is caring. We have a first time contributor session that will walk you through that hands-on, safe space opportunity, and we will show you all those cool tools in a number of sessions. We absolutely want to see you get more involved, but we wanted to highlight how simple it really is to go from zero to pull request within just what we've done in 15 minutes using the amazing new technology that's available to us.

A

So thank you again, all for your time on this github repositories, vs code extension you can get to at ghexting.sharing.ms and of course, ak.ms sharing is caring. Please don't hesitate to reach out. If you have any questions at all, we love to see you get more involved.