Bengaluru Tech Fest | GitHub Copilot Unleashed

Bengaluru | GitHub Copilot: The agent awakens: Building Applications with GitHub Copilot Agent Mode

Estimated read time: 1:20

Summary

In an exhilarating session hosted by Microsoft Reactor, attendees were introduced to the wonders of GitHub Copilot's Agent Mode, a tool designed to simplify building full-stack applications. The event, part of Microsoft AI Skills Fest, encouraged participants to engage in a Guinness World Record attempt while learning to build a hands-on project: an exercise tracker app. The application development journey was a showcase of how modern tools can transform complex tasks into manageable steps, allowing developers to focus more on creativity and less on repetitive routines.

Highlights

Kick off your coding with GitHub Copilot's Agent Mode and streamline your app-building process! 🚀
Join the global attempt to break a Guinness World Record with GitHub's AI-powered session! 🌍
Understand the synergy between Virtual Studio Code and GitHub for a seamless coding experience. 💼
Explore the structure and potential of a full-stack application with a fun fitness theme. 🏆
Engage in a fun, interactive learning session combining AI tools and coding education. 🎓

Key Takeaways

Discover the magic of GitHub Copilot's Agent Mode in simplifying app development! 🚀
Join a Guinness World Record by building an app with GitHub Copilot during the AI Skills Fest! 🌟
Experience the power of automated coding and debugging assistance with Copilot Agent Mode. 💻
Learn to create a full-stack fitness tracker app using Visual Studio Code and GitHub! 🏋️‍♀️
See how CodeSpaces can enhance your coding efficiency and productivity. ⏱️

Overview

The exciting session, spearheaded by Microsoft's Chris Noring, was tailored around GitHub Copilot's Agent Mode, demonstrating its capacity to simplify full-stack application development. Enthusiasts were whisked into the process of crafting a fitness tracker app using cutting-edge tools like Visual Studio Code and GitHub. This was not just an educational journey, but also a part of a larger event where participants could contribute to a Guinness World Record!

The session delved deep into the intricacies of using GitHub Copilot to reduce the manual coding effort, showcasing features that enable developers to create, manage, and modify applications with ease. Participants were guided through using CodeSpaces to optimize their setup, enhancing the coding process's efficiency and reducing time-consuming tasks.

The aim was not only to develop a full-fledged application but also to foster a deeper understanding of how AI-powered tools can significantly impact modern development practices. With ample opportunities to engage and ask questions, attendees walked away with not only a functioning app but a new appreciation for the potential of AI in development.

Chapters

00:00 - 01:30: Introduction and Code of Conduct This chapter serves as the introductory segment of the book, where foundational concepts are set and expectations are outlined. The central themes include an introduction to essential aspects that will be explored in subsequent chapters and a comprehensive explanation of the code of conduct to be adhered to throughout the narrative.
01:30 - 03:00: Welcome and Session Overview The chapter titled 'Welcome and Session Overview' begins with a greeting to the audience. Rashmita, the event planner for Microsoft Reactor India, introduces herself and outlines the structure of the session, which will last for 60 minutes including a Q&A. Attendees are reminded to read the code of conduct and to maintain respect and understanding towards different viewpoints throughout the session.
03:00 - 04:30: Microsoft AI Skills Fest Introduction The 'Microsoft AI Skills Fest Introduction' chapter focuses on encouraging active participation by asking attendees to use the chat section for questions and interactions. The session's host introduces Chris as the speaker, expressing excitement and positivity about the event. This introduction highlights the session's format as a livestream event.
04:30 - 06:00: GitHub Copilot Agent Mode Overview The chapter introduces the GitHub Copilot Agent Mode, beginning with a warm welcome from the presenter based in London. Participants are encouraged to share their locations in the comments. The event is part of the Microsoft AI Skills Fest and is an attempt to set a Guinness World Record, inviting participants to join by scanning a QR code.
06:00 - 07:30: Session Agenda and Objectives The chapter titled 'Session Agenda and Objectives' revolves around the main goal of building a full stack application. Participants are encouraged to follow along to potentially become part of a record. This session is part of the 'Learn Live' series named 'The Agent Awakens: Building Applications with GitHub Copilot Agent Mode'. It sets the stage with excitement and a call to action for attendees.
07:30 - 09:00: Application Theme and Features The chapter discusses the rollout of GitHub Copilot's new agent mode, which is now globally available for all users in Visual Studio Code. Chris Noring, a senior advocate at Microsoft, introduces the feature and offers his contact information for those interested in connecting with him.
09:00 - 10:30: Project Setup and Initial Steps The chapter introduces the agenda and main focus of the session—discussing the GitHub Copilot agent mode. It emphasizes understanding the learning objectives tied to specific modules designed to ensure participants meet set educational goals. This is presented as part of a structured learning approach.
10:30 - 13:00: Backend Setup and Configuration This chapter discusses the objectives, usually consisting of three to four different items. It moves on to explore the capabilities of GitHub Copilot in agent mode, highlighting how it can handle a lot of repetitive tasks for developers, reducing their workload.
13:00 - 15:00: Database Initialization The chapter introduces a project focused on creating a full-stack tracker application designed to make physical exercise enjoyable for youngsters. The theme revolves around leveraging GitHub Copilot's agent mode to facilitate the development process, highlighting the combination of frontend, backend, and database components essential for building the app.
15:00 - 18:00: Backend Development Continues The chapter is titled 'Backend Development Continues' and is set in a high school named Merchant High School. It involves characters named Paul Oto and Jessica Cat, who are part of a scenario that appears to relate to the creation of a user base. The scenario humorously notes that combining the names 'Octo' results in the famous GitHub logo. A challenge highlighted in the chapter is the lack of exercise among students today.
18:00 - 20:00: Backend Testing and Verification This chapter discusses the challenges of enticing young people to engage in physical exercise and suggests building a fun, social fitness tracking application to address this issue. The application aims to make fitness a social activity, thereby increasing participation among young adults. It also introduces the concept of using GitHub Copilot's agent mode to assist in the application's development.
20:00 - 23:30: Frontend Setup and Configuration This chapter covers the initial steps to configure and set up the frontend of an application. It emphasizes the importance of understanding and implementing organizational policies such as those of a company or school. Key features discussed include the support for user profiles, activity logging, team competitions, leaderboards, personalized workout suggestions, and a progress tracking dashboard. The aim is to address these features as comprehensively as possible.
23:30 - 25:30: Finalizing Frontend Development In this chapter titled 'Finalizing Frontend Development', the focus is on observing how various features will integrate within the full stack of an application. The narrative follows a user named Paul as he navigates through the application, offering practical insights into the system's capabilities. Additionally, there is a reference to a 'learn live' module which serves as a theoretical backing for this live learning experience, pointing out resources for those interested in a deeper understanding.
25:30 - 27:00: Application Launch and Styling The chapter titled 'Application Launch and Styling' involves interactive guidance through a module. It is recommended that participants do not complete the module independently to avoid missing valuable guidance from the instructor. Participants are advised to open the provided link in a separate browser tab and follow along. The session includes starting code spaces from a repository.
27:00 - 28:30: Summary and Closing Remarks The chapter focuses on showcasing a 'learn module' specifically about building applications with GitHub Copilot in agent mode. The speaker transitions from a presentation to a web browser to visually demonstrate how the learn module appears and functions.
28:30 - 30:00: Participant Acknowledgements and Next Steps The chapter focuses on the importance of learning objectives in educational modules, emphasizing the benefits and what participants can expect to learn from them.

Bengaluru | GitHub Copilot: The agent awakens: Building Applications with GitHub Copilot Agent Mode Transcription

00:00 - 00:30 heat heat n [Music]
00:30 - 01:00 good morning everyone and thank you all for joining us today my name is Rashmita and I am the event planner for Microsoft Reactor India this session will run over the next 60 minutes including Q&A but before we begin today's session please take a moment to read our code of conduct we are all here to learn together so please be respectful of other people views understanding of
01:00 - 01:30 differences being kind and considerate in the way you engage the chat section will be open throughout and we do encourage you all to participate so please feel free to drop all your questions in the chat section let me bring in Chris our speaker for today's session hey Chris thank you so much Rashimita i'm so excited to be here for you all this is a live stream event so uh good morning
01:30 - 02:00 from London and I'd love to hear where everyone is from so please post in the comments i've already seen some comments from you all from Korea and other places so huge and warm welcome uh very exciting news today this is part of something called Microsoft AI Skills Fest you are part of a Guinness World Record so if you're interested in participating I would urge you to scan this QR code here um so you can be part
02:00 - 02:30 of that so the game or or the object today is to build a full stack application so if you build all of that with us you have a chance to be part of a record isn't that exciting so as I said this is part of a learn live the learned live is called the agent awakens building applications with GitHub copilot agent mode so agents right i'm sure you've heard us talking
02:30 - 03:00 about agents from Microsoft and from other places and now GitHub Copilot globally has its own agent mode uh this has been in preview for a while but today is the day and we are definitely rolling it out globally for all of you to use that within Visual Studio Code my name is Chris Noring i'm a senior advocate at Microsoft if you're interested in connecting with me uh here's my LinkedIn and my QR code for that so you don't have to type
03:00 - 03:30 uh moving on let's talk about something more interesting than myself which is our agenda for today so the idea of this learn live is that we'll go through what this GitHub copilot agent mode is then we'll also talk about the learning objectives because all of these learn lives have an objective they are based upon a learn module and uh the idea with this learn modules is that you should be able to learn whatever we set out as
03:30 - 04:00 objectives which is usually three to four different items moving on we'll then explore the power of GitHub Copilot agent mode and what that can do for you and I can tell you right now if you haven't seen it before you will be excited to all the features that it's able to do in a short sentence it will do a lot of the heavy lifting for you that you as developers have done a million times before by why not offload all of that towards an agent but
04:00 - 04:30 of course we need a theme for today and that theme is our tracker application is a physical exercise application that will help make it fun for youngsters to do physical exercise and yeah as I said we will leverage GitHub copilot agent mode to build this full stack application so we will be building a front end a backend and a database uh just for you to have a context and see what are we building
04:30 - 05:00 today and what things are important here's all the things so the setting here is in a high school effective high school called Merchant in High School with a few characters because we need some kind of users as part of the scenario the users here are Paul Oto and Jessica Cat and guess what if you add Octo together you got the famous logo from GitHub the challenge here as I was saying is that students today rarely exercise i know how it is folks we are
05:00 - 05:30 sitting there in front of our Xbox and we don't really get outside it's the same thing with young people today so we need to make it fun for them to do some physical exercise uh so the idea here is that we build an application that will support all of this fun so people will do social fitness thanks to this tracking application and we will be using GitHub copilot agent mode to do so but of course as we build this application imagine now that this is a
05:30 - 06:00 company or a school there are some policies that we need to adhere by so we need to be able to instruct our agent to listen to those policies uh the key features of this application and this is quite ambitious is that it should be supporting user profiles activity logging team competitions leaderboard personalized workout suggestions and a progress tracking dashboard now we will do as much as we possibly can today with all of these features uh and you will
06:00 - 06:30 see how that will work on the full stack but it will leave some room for you to add more features uh to limit this somewhat we will follow Paul's journey today one of our users as he goes through the application so that's what we'll be building and uh yes here is the learn moduling question remember how I called this a learn live that means that we have a backing learn module so if you're interested in having
06:30 - 07:00 a look at that module take it yourself please do so but however for the sake of this learn live please listen to me as I guide you through the module and don't do the module separately because then you will miss out a lot of my guidance so but here you have it here you have the link so just click that up put that in a separate browser tab right uh so what we'll do as part of this is that we will start code spaces from a repo i'll show you how to get
07:00 - 07:30 there so now I will switch from my presentation into the web browser so give me a second here right so here you have the learn moduling question i just wanted to show you that learn module uh how it looks so imagine now that I have clicked the learn module this is where I end up building applications with GitHub copilot agent mode as I said all uh
07:30 - 08:00 learn modules on learn have these learning objectives so you can see what the objective is for what's in it for you if you take this learn module what will you learn uh let me just show you here here's an introduction mentioning all about this Guinness World Record today so hopefully you're excited by that and uh yes so let me just guide you very high level before we venture into code spaces here it talks about all
08:00 - 08:30 about what the agent mode is so you know what that is and the benefits of using the agent mode which is as I said it helps you with a lot of the heavy lifting in terms of it being able to install binaries or even run commands for you so here you got a few different examples of where this agent mode really shines so if you haven't seen or maybe you've seen GitHub copilot before but if you haven't seen edits you should know that that is multiple file edits but
08:30 - 09:00 agent mode takes that to the next level so yeah lots of information here and there's also a link here so you can start the exercise and end up on GitHub uh what that will do for you is to ask you to actually do a fork so let me uh actually go into GitHub so you see what that looks like i've already done the fork but if you see what this fork is coming from you see that it's coming from this site so let me just click that up really quickly so you can be where I started
09:00 - 09:30 this is uh GitHub this is the backing repo this is where you will start your journey so here's a nice little robot welcoming you all to this exercise the idea is that you will hit copy exercise and open this link in a new tab uh if you want to be a little bit faster what you need to do is essentially to click the fork link here so you have your own fork this is important because all of
09:30 - 10:00 the other instructions won't really work unless you've hit fork first so make sure you click fork so you have your own copy once you've done that you will end up here and if you've hit So we've hit copy exercise at this point great so we are kind of ready to begin so what we can be doing this is also worth doing let's see
10:00 - 10:30 we have click the copy yeah so we have done our fork right so we are ready to start so you either click through the link of the exercise and but what I'll do is to start the new code spaces as you can see this specific repo doesn't have that so I'll click the plus sign to kick off my code space so this starts up our environment and hopefully this is a fast business of just waiting a few seconds of it setting up the connection um so you can see what
10:30 - 11:00 this looks like uh yeah so code spaces is quite fast as I said so you should be up and running within seconds yeah we were uh what's important for you to realize as part of this GitHub repos where are my instructions they are within this GitHub folder and the steps folder so here are all the ambitious things that we will do today all the different steps so here's the first preparatory step to make it easy for you to see what this looks like I would recommend to open a preview
11:00 - 11:30 because what you will be doing is to copy paste a lot of the prompts within your agent mode uh this is step one so let's just read through this what we are doing we need to open it up in code spaces we've done so hello code spaces we need to confirm that this repository is not the original repo on GitHub but your copy so what you can do here is just to make sure that this is different soft Chris that's my GitHub user that's obviously different from the one over
11:30 - 12:00 here which is the one from GitHub so just verify that you are on your copy before you start your code spaces and as once you go through all of this you will see that it's asking you to do a few things uh use GitHub copilot mode to create a branch and publish it uh right so this little interesting step here is is uh nice because this
12:00 - 12:30 will actually introduce you to how the agent will work already uh okay so what it's saying is if not already there return to Visual Studio Code within the code space open the Copilot chat window if not already open let's do that we've done that copy and paste the following prompt and select the agent instead of ask now we're done here so we're starting off in ask so we need to change this to agent now we will be able to leverage the agent great and what is it saying let's
12:30 - 13:00 ask Copilot to remember a command and create the branch and publish it hey Copilot can I create and publish a new branch called build octit app okay let's try to do that let's just make sure that we're doing this in the right place so now this is probably your first time using this agent if you haven't used it in preview before but we're asking the agent to think for us and come up with a
13:00 - 13:30 command and also hopefully present this command to us so you can see how that will work for you right so now it's saying create the branch locally okay you can definitely do that uh what you can also do is to go in here and open this up because we want this to run via the terminal right and this is pretty cool so now you can see what it's about to do get checkout minusb get push if I hit
13:30 - 14:00 run at this point it will actually create this branch for me uh which is one of the super cool things about this agent that it presents the commands and then it runs it and we can also see that it says build octafit app so it successfully then created the branch pushed it and we're on that branch in if you're in doubt you just have to do create branch and you will be able to see that you are indeed in the right place and this concludes the first
14:00 - 14:30 part of our workshop today so let's keep things neat and tidy and let's see here for our step two what we'll do in our step two is the our initial application setup our directory structure as I mentioned we will be building a full stack application that means that we will be building a front end in React a backend in Django and Python and a database using MongoDB what it's saying here as our
14:30 - 15:00 first instruction is to open all the files of the docs folder the docs folder contains some detailed instructions for your project how to build it and also a story this is generally a recommendation when you start a project that you have a project description so you're giving that context to the agent what am I building so it will be able to make some smart decisions for you um right and this is just emphasizing that you need to be on agent mode instead of the ask mode just so things don't go wrong
15:00 - 15:30 apologies for that but yeah it's important that you are on agent and not ask or things won't work properly uh so here for our next keyboard activity what it's saying is that I will take the Mona High School fitness tracker markdown and use that as inspiration as context and to create the initial uh application structure so we'll copy this as I said this is a copy paste exercise today but
15:30 - 16:00 of course you are still needed you are the pilot it is the co-pilot but we will feed this information into the application so now it should be reading all the interesting part here and what I want you to see here is on the left side what just happened is that you see this grain green looking text here it's actually scaffolding applications so and this is something you need to get used to when it comes to the agent how it indicates that it's
16:00 - 16:30 working and you can see here how there are a lot of pending symbols moving that means that the agent is doing the work for you and it's saying I've been creating this file that file and so on and I'm even creating a front end piece as part of this uh yes so what it's also saying is you need to run this command in the terminal to create a virtual environment we need to make sure that we are in the
16:30 - 17:00 root of the application we are so as you can see here this is the agent working heavy for you by presenting you the command and giving you the option to run it and this should ideally now be creating our virtual environment uh right so now it's saying I've been creating this environment for you and it just wants to activate the environment that's what the source command is doing and then it also wants to do a pip install which means that it will now install all the dependencies uh so we're going to hit
17:00 - 17:30 continue on that and now it kicks off an installation I believe so now we are inside of our virtual environment we see that through the VNV here that we have stepped into that uh to update pip install okay let's see in the back end quickly here if there was actually a requirements txt file yes there was and you can see that it there's a symbol
17:30 - 18:00 here right you see this symbol here the dot within the square that means that we need to hit keep here for this to actually happen uh and let's see anything on the front end here no everything is good the files are updated let's see it was supposed to do a a pip install um sometimes the agent isn't perfect so I should just say that it has definitely run the command to activate the environment but it didn't look like I think it ran this so
18:00 - 18:30 let's try to run this manually again and again this is why you're the pilot it is the co-pilot it does its best but as you can see here now that I was able to catch this because I'm a developer and you know I have all the knowhow I understand that this didn't run uh so now you can see how the back end is being installed as you know working with the back end this is an important part to make sure that all the uh libraries that we need are being installed before we can move
18:30 - 19:00 on let's see if we can clean up a bit here uh we have a lot of things that are currently open yeah I I just like to keep things neat and tidy so you see what you're doing when you're doing it there so now it installed all the dependencies so now we can just go back to our exercise so what has it done it created this initial scaffold right it created a virtual environment it even stepped into the environment it almost got there also
19:00 - 19:30 where it installed the dependencies for the back end but if you just want to explore the application right now what you have you see that we have a back end you see that we have a front end also excellent so we kind of starting with this application from the back that means that we are uh installing the MongoDB database hands up if you know exactly what to type to install MongoDB probably no hands up right because these this is information that we don't want to keep in our head but we rather want
19:30 - 20:00 to rely on an agent or maybe Stack Overflow to figure out what the install command should be in this case thank you agent for giving me the instructions for how to install the binaries so I'm going to run those and because this is code spaces this will install the database lightning fast in just a few seconds so now we will soon have MongoDB ready for us to run that was fast right so now
20:00 - 20:30 we've installed the binaries and the app is also saying I will run some commands to start up the service called MongoDB and we'll also run a command to make sure that the status of the database is okay so we can continue let's try to run that starting database MongoDB it says okay down here and checking status of database MongoDB also okay fantastic that means that the database part is running of course the database doesn't have any data yet but
20:30 - 21:00 that's something we need to address and uh yeah I believe we are done with this second instruction file so let's move on to the third one we're making good progress today as you can see um I'm quite excited for you we have scaffolded our application we have installed the binaries and we've even started up our MongoDB database and it's ready for us uh so what we need to do here is of course keep working on the back end so it ends up connecting to the database so
21:00 - 21:30 uh here's our first keyboard activity uh it says the following it says to based on the example Monafit tracker app in the docs uh folder uh use octafit as the name of merge high school's app okay let's set up Python Django okay so that means that our back end will be developed a little bit now so let's as usual paste things now in the agent we've got accustomed to the
21:30 - 22:00 agent knowing how to do things for us so now the agent says you know what Chris I will scaffold a Django application okay I'm just happy being here uh okay so it scaffolded a Django application let's see how that was done okay I'm curious soul here so I want to see the pending changes here you al saw that yellow bar moving across the screen this
22:00 - 22:30 is the agent working for you analyzing what it needs to do so you can see how it adds things in good places like install application it also installs course that's something we're going to need for the front and the back end to talk to each other and now I kind of confirm that change uh great so there was no other p pending changes so I believe I could continue nothing here right nope uh we are still in the root of the application fantastic and now it's saying run this command to
22:30 - 23:00 run the server okay let's try that okay what happened here right so if you saw what happened here here you saw that we stepped out of the virtual environment by mistake and this is part of the self-healing uh properties of the agent it actually recognized what happened because every time it says no module named Django that means because we were kicked out of the virtual environment and we installed Django in the virtual environment it obviously
23:00 - 23:30 didn't know what Django was but the agent here got our back it recognized that something went wrong so now it's saying run the source command again step into the virtual environment and then run the command thank you agent so yeah it falls uh off a little bit sometimes but as you can see it has this self-healing property which is fantastic feature because as we all know with demos they never go perfectly so what we want to do here is to open the application up in a new browser to see
23:30 - 24:00 what it's saying here and install worked successfully so that's great django is giving us the thumbs up fantastic and now we also have a running application and what else is it saying to ensure the project functions correctly i'm reading from here you should apply these migrations by running this command okay so let's take that down and in this case we'll actually insert it into the terminal so let's be smart about this are we in the right
24:00 - 24:30 place for running this now so if you run the Python manage command you actually need to be in the backend folder and this is what I'm saying you are the pilot and it is the co-pilot so you need to be aware you can say to but I'm in the root can you give me the correct command then so now you can actually tell it like hey something went wrong here can you change the command to adopt itself to my circumstances since you're in the
24:30 - 25:00 root so you can see now that the command has updated itself to say hey okay fair enough this command is now octit tracker/backend/managed migrate and so now we'll insert that command again and this time the migration succeeded because I was able to have that conversation with the agent to say what is the actual command because this looks wrong and now all the initial migrations ran so we want to go back to
25:00 - 25:30 our preview now to see where we're at uh and now it's saying to initialize and create the database remember I said we have a MongoDB database uh sorry we have a service that's up and running but we don't have an actual database that's what this command will do so this will command will produce an outcome that will end up creating the database again copy paste exercise just make sure that you copy paste it properly you tell the agent this is what I'm about to do
25:30 - 26:00 initialize my database be inspired by you know um the docs file here that says everything about what my database is like so now we expect it to produce a command and if you inspect this command a little bit you see that it's creating several collections okay fair enough and uh yeah so let's actually try to run this and this should be then creating all the collections
26:00 - 26:30 and now it's asking us to run another command which will validate to make sure that these collections exist and now we get a bunch of collections back from the database because now it's saying you know what Chris I have a few collections in here they are called everything from leaderboard teams users and workouts and activity that one is at the top fantastic that means that we have all the collections we need to in the database but of course the database is empty at this point so what do we do
26:30 - 27:00 about it well we have another command here that will actually say a bunch of stuff and if you see this other command you say it says let's update the application file so we're not quite there at populating the database but we have another command to do first let's make sure we capture the entire prompt here like so as I said make sure you're in preview copy paste that so now this time around it will do some adjustments just to make sure that
27:00 - 27:30 everything works downstream so now it's looking through my application and it figures out what to do about this instruction it's quite lengthy but it's all good stuff in terms of configuring the application but you just need to make sure that it has ample time to do something right so it's still working on it so one needs to be patient i just love to see the agent work right because
27:30 - 28:00 this is code I don't need to write you see that it's pending it's working on both models and serializers but if you're a curious soul just like me you want to see what it's up to but it's still indicating yellow and this progress bar here is still running which means that we need to sit tight for a few seconds and yeah as I said if you're curious you can just go into the files and just see
28:00 - 28:30 what it's up to and just see that agent go right uh as I said before this is part of the heavy lifting that the agent is doing for you this file is already done because of this symbol so we can hit keep and now we're just waiting for the other files to conclude before we can move on with our next step so now you see here on the right side how the agent is saying this is what I've done for you Chris all of that heavy lifting I'm just sitting tight waiting for things to finish another yeah we have this symbol
28:30 - 29:00 and if we are curious which we should be we're just seeing allowed host star which is a command that enables the front end and the back end to talk to each other but of course in a production scenario you wouldn't allow star but it's good when you are debugging and make sure that the application is initially working so we go through these and just click keep until we've gone through all the different changes and every time I hit keep it just moves on to the next file and the
29:00 - 29:30 next and there I believe we have updated all the different files and let's see what it's saying here the backend setup for the Octif app is now complete fantastic that means that all the configuration we wanted to do are done let's clean things up a bit let's make it easy for us to see what we're doing uh like so i just want to clean things up let's close all the different tabs ah isn't that nice so yeah now that we've gone through the application configuration and set up now the moment
29:30 - 30:00 of truth has come with the populating of the database so this command here will make sure that we got some uh initial data into our database because you know we want to be able for the app to show something for us so we paste this command as usual and just to read it up to you loudly what it's doing it is looking to populate the octifit database um so let's read this based on the example monofit tracker app and use octifit as the name let's populate the
30:00 - 30:30 database whoops sorry about that apologies uh let's populate the database using uh this markdown file as inspiration and create a test data file uhhuh uhhuh okay and name it populate db.py and verify the test data is populated okay okay good stuff let's run that and send that to the agent now we're expecting fully expecting the agent to create this file
30:30 - 31:00 and insert some interesting test data within that file so we're sitting tight a few more seconds here and it should be done shortly so ooh nice um so now it's opened up populate DB file that it promised to create and you can see that there's some C data here for users what else activities leadboard entries workouts and so on so there are quite a few things created within this file uh
31:00 - 31:30 we just need to wait for this file to finish we have a pending icon here so we want to make sure that this is actually done because usually as I said before we need to hit this keep green button once it's done and so we're just waiting for that for a few more seconds
31:30 - 32:00 let's see okay yeah so the yellow symbol here indicates where it is as an agent in the file um I haven't seen it stop like this before yeah because here's the thing the next step here is to actually run these migrations and to run the file which
32:00 - 32:30 should ideally then pick up this migration and insert that into the database we just want to make sure that everything that needs to happen in this file is done okay okay so let's try to save that see if that makes a difference
32:30 - 33:00 yeah it's important to sit tight here but sometimes you need to interrupt it and just say "Hey you know what agent you're done." Um I just want to make sure that that is the case so if I do this too soon it might not work right if it's not done writing to the file but let you know what let's actually take this command and try to run it it will tell us if I did it too soon or
33:00 - 33:30 not and now we're going to run these command no migrations to apply so I've actually seen this happen a few times and the main reason is that sometimes the popular DB uh file here ends up in the wrong place um yeah so now it's actually selfhealing right because if you look at the difference between these commands this one tried to run migrations generally and assuming them to be like in a system folder but in this case it's actually naming the migration and calling it
33:30 - 34:00 populated DB and in my opinion that is the better way to do it so now it's naming the migration and successfully populated the database with test data that is great right that is exactly the green kind of status text that you want back and now of course because it is an agent it wants to verify that says I want to print information as JSON and print that to the screen by all means agent let's do
34:00 - 34:30 it and hhu okay implicit session I'm trying to print stuff in the it seems that the collections are currently empty and yeah it's trying to selfheal here Okay so it and this is great about the agent because a lot of things uh in this case is if things don't end up well it has the ability to investigate what went wrong so now I'm pressing keep the issue
34:30 - 35:00 might be related to Django or M or MongoDB uh the Okay okay okay so now we can tell the agent uh how do I start MongoDB and uh show collections and this is just us using our knowhow as developers because we
35:00 - 35:30 roughly know what we need to do right we know that we need to go into our MongoDB database and see what's going on so now it's showing us that you should be make sure that the service is running we know that that thing is running then you should type MongoDB as this one is saying okay I should be typing this let's do that okay that didn't work okay let's just copy that command
35:30 - 36:00 and paste that in now we switch database okay fair enough showing the collections so now it's showing us the various different collections and now I can tell you exactly what went wrong because here's the thing some and this happens sometimes it doesn't happen all the times but it has created a duplicate set of collections here so it's created octafit uh collections as well as the original ones called activities and so on
36:00 - 36:30 so what we can do then is most likely one of our collections has data and the other one doesn't so there's one octif tracker activity but there's also an activity here so what we can do here is list data of collection octo fit tracker activity that's what we
36:30 - 37:00 want to do of course I could be remembering the command if I'm working often with MongoDB but I got an agent so I don't really feel like it and you can see that the command here is in there i can either run this command or I can type it manually i choose to type it manually db activity fine like so that one looks empty but if we talk to the DB Octit the longer name here DB Octit
37:00 - 37:30 tracker activity that's the other unfortunate duplication what did I type octit track what did I type db ah yeah fine of course right so now you can see that
37:30 - 38:00 those tables are actually containing information um I choose to not be so worried at this step the main reason I'm not worried is because if you know Django you know that it when it's going to go through all of these models and when it's going to run the back end for real it will actually use this octafit name as default and the reason I know that is because Django's rest framework defaults to the application name underscore the collection name so I'm not actually worried about this step i would actually argue to say that this is
38:00 - 38:30 working as intended and we don't need to do the evaluation here but we what we will do is to return back to our project so despite the fact that it looks like it's created a duplicate set of collections one activity and one called application name underscore activity and so on for all the collections I'm not worried because the right collections according to me has been populated with data and this is also saying as the end of preview three here that everything is good let me just see yeah so this is
38:30 - 39:00 actually the end of step three which means we will go back to step four and we'll close all the others and now go into the preview so yeah uh general lesson for this is that you saw that the agent has self-healing capabilities and you can ask it what can be wrong but this is also an unfortunate thing that happens sometimes that it creates a duplicate collections um as developers you can just clean up the collections you don't need obviously
39:00 - 39:30 right so what we will do here as part of step four is to make sure that the back end is working correctly when it's talking to the database so in this activity here as part of our first activity it will set up the Django rest framework restart the server and test the API so it's quite ambitious in this step so what we need to do and we can't just copy paste this one because there's a placeholder in here this placeholder here is important important we need to change this to the name of our code space environment which is what you see
39:30 - 40:00 up here so you got refactored finicular something something i mean honestly I'm amazed by these code spaces names right so we can take this command and paste it but we can't run it because we need to edit this command so let's paste it meanwhile here but just keep an extra eye on these brackets so and then we go up here into our URL and I believe we need everything up
40:00 - 40:30 until this point so copy that make sure you have it and then return back into your prompt like so and start because we don't want to keep anything square bracket right so paste and I believe there is one more entry that we need to fix yes here here and let's make sure we got it all there so why this is important is because this has to do with host which host that is
40:30 - 41:00 actually allowing on the back end when there's going to come a call and this will also pay off towards the front end where we set up a proxy so this should then be setting up our application and you will see how the agent is going to work for us and do various updates so now it's going in here and into the views and you can see how it now sets a base URL and this is important right because you don't have to want to type
41:00 - 41:30 the full URL when you're working with this application but you rather want to have a base URL and that's what was important about this command so let's hit keep and you can also see as I said before when it comes to allowed hosts uh it also want to allow this host and 8,000 that's the port uh that it's going to use for the back end so now it what it wants to do is to run the server exciting times right we're about to come to a point where we'll see the server running make sure we're standing in the route we are so
41:30 - 42:00 now it ideally will be running the host for us so now it says the host is now available on port 8000 so let's see if that's actually true API root okay here's some interesting stuff and we see the swagger-l like interface we like that and we can go to for example users and now we see a bunch of users remember how I said before I wasn't worried about the fact that I got
42:00 - 42:30 duplicate collections because I knew the right collections had the had the data this is exactly what we're seeing we saw users being listed let's do leaderboards also we just need to do a few tests so now we are also seeing that we seem to have data everywhere and this is really good news right because now we have the backend fully operational and working and we are back in our code spaces and if we want to because the back end is now up and running we can just hit a new terminal we need a new terminal to run
42:30 - 43:00 this curl command to make sure that it responds and we can see all the responses coming back here right uh from activities users and so on and happy days that's exactly what we wanted right um and that means that we can go back here and we have done this command right we have replaced these placeholders and we have tested our back end we have launched it another way to launch your backend is also if you want to go into
43:00 - 43:30 this little icon here and launch Django backend that definitely works but for the intents and purposes of this step we have done what we should be doing which is to start up the back end and in a separate terminal we have run a curl command so we're kind of happy at this point we've actually done with step four which means that we're now going to close down a lot of things here so and we will come to the front end of this because as happy as we might be as
43:30 - 44:00 backend developers your users aren't very happy with you at this point right because they're like "Yeah Chris I like the fact that you got a back end but this JSON stuff it hurts my eyes i want to see something that looks like something visual." So what I'll be doing is I go in here I open up a preview so now we see how we can be setting up the front end so we have a back end here but the front end doesn't contain much right it's an empty folder but good news is we can do something
44:00 - 44:30 about that so now we have we need to update a few components so uh this step here will tell us how to scaffold a react application uh here so now we can copy paste this command and just high level what it's about to do is to create react app and install a react router dom that's the router for the front end and it also says where it's about to go in so we just paste all the
44:30 - 45:00 stuff uh so now it's just going through these steps and let's make sure we are in the right spot for doing this it's going to run MPX and it's going to go into the front end application yep okay and this is going to ask us to proceed so we need to interact here by typing yes and enter and now waiting for all that lovely scaffolding to happen um okay so now it's saying I'm going to be creating a React app the attempt to
45:00 - 45:30 create a React app in the folder failed because the directory already contains a git keep file which conflicts with the creation process i'll remove the git keep okay fair enough um remove always want to read one more extra time right so now it's removing that file and now it's going to try to scaffold so now you should see some more action hopefully yes installing React installing React DOM React scripts everything that's needed for running
45:30 - 46:00 things with React uh this is always the case with front-end applications right there's always a lot of dependencies to install but thanks to code spaces we expect this to be a fast process so now it's installing that node modules folder that's needed for all the uh dependencies that React are dependent on i expect this to just run a few more seconds but in case you're wondering
46:00 - 46:30 always look at these pending icons to see what's going to happen and yeah it said it added 18 packages and you see that the front end now has a bunch of folders because I'm curious i want to see the public folder okay nice the source folder I see an app okay so now it's in about to install the Bootstrap um and we can see that okay fair enough it's going to install Bootstrap within the front end subfolder
46:30 - 47:00 great and Bootstrap is a CSS library that's going to be used to make sure that everything looks pretty and now it's about to install what uh React router DOM uh okay so that's our router application so we can have multiple pages let's install that okay super it's still working on it so I guess it has something more to install right okay working on index.js okay importing Bootstrap i like
47:00 - 47:30 that it um according to me it should also be creating some subcomponents here because we don't want everything is one gigantic app let's see here let's just review what it's saying i have installed the reactor dome your router library the React app is now set up with Bootstrap okay that sounds good i think I expected it to create some subcomponents so but let's see if I can inspect it
47:30 - 48:00 okay so first off we are on step five here we are installing ah okay i was premature i've done this lab so many times i just remember what happened so this was me giving you a whiff of the future but this is actually in this command so in this command it's saying you know what Chris I will create subcomponents because if you've ever built a front end in React or some other framework know that you want multiple components it's easy to maintain but that command is
48:00 - 48:30 here ah again here's a placeholder so be careful here it's actually saying here to replace this with the code spaces name as we did before so be careful here paste this but don't run it and now we have to go in again and borrow this little name up here prefactor blah blah there copy and now let's go find that placeholder and replace it it was just one place
48:30 - 49:00 right it was okay so now we go into the square bracket here there paste it looks good let's run it so now it should be doing a bunch of cool stuff with our front end for the sake of maintenance right because nobody wants one big app component in inside of a front end project we all know that we need dedicated component whether we're using Vue or React or Angular or any such
49:00 - 49:30 framework but we are counting on the agent to do all the heavy lifting for us so now it's working on it and I can just sit back and sip some more coffee or if you got chai cheers so it's created a activities folder here uh yeah activities component subfolder exactly what I needed and you can see how activities leaderboard teams users is about to create all of those
49:30 - 50:00 exactly what I mentioned great we see all of those scaffolded and honestly as a front end and backend developer I've done this so many times i'm so happy that I got an agent doing all the heavy lifting for me so I can just focus on the fun part because this is initial scaffolding right i know I'm going to be asked to do updates and whatever else and sit in a lot of meetings as a developer right to decide what to build but at least I know that I can pivot and
50:00 - 50:30 I can change fast if I need to because I got my best friend here the agent and yes we want to keep this and as you can see that it's referring to the components instead so we definitely want to make sure that that happens appjs looks like it was Yeah we just confirmed that and let's just read the outcome here no errors were found blah blah blah but there's a few updates here that we need to acknowledge keep leaderboardjs looks
50:30 - 51:00 good yep yep you can see by the way if you're curious you see that all the going to full URL we know as React developers we know that we can probably replace this make this a bit nicer by having a proxy entry in the package json but for now we just want to make sure that things work because we can optimize later right so yeah we got a bunch of subcomponents that's that's really good news let's try to close things down a little bit as I
51:00 - 51:30 said I like it neat and tidy and let's close down all the files because I want to be able to return back and see what my next step is so now I was at the point here right where we created these components and we can actually launch the front end now as front- end developers we know that there are many ways that we could be doing this when it comes to launching we could either use this icon or we can go into our package JSON and run it from there because it should 100% be possible to start the
51:30 - 52:00 front end uh from here by running mpm start or you could be running it from this this is really like up to you i'm in a terminals kind of guy so if I want to run this I would need to go here or I could be asking the agent to literally do this but I just want to do this here uh remember how the I we need to double check that the back end is running right because if the back end isn't running it's not going to be so happy with me doing this so here nope that's not a
52:00 - 52:30 back end we can actually clean this up you see that it's quite happy in creating a lot of terminals that we may or may not need and here we got something running okay so what is this yeah so this is the backend running and the reason I know that is that the last command it ran was run server 8000 uh we just wanted to have that acknowledgement because without the running back and the front end would run into a lot of issues right so we know that we now are inside of now
52:30 - 53:00 that's the root where was I easy to lose yourself here but now we can see that we're in the front end and I'm going to run npm start and in a perfect world this works beautifully now right the front end talking to the back end i'm going to cross my fingers for this to work octoer activities yes they are being listed isn't that a beautiful site but of course if you're a front- end developer your eyes are bleeding right now right because you're looking at an
53:00 - 53:30 application with no styling whatsoever and you're like but on the other hand if that's your biggest concern know that again this lab has your back because it's going to say use Bootstrap make it beautiful uh right so now we got the front end up and running and now we can run a command again this actually take down the front end for now and just let it work its
53:30 - 54:00 magic and now we are running these this command and honestly I'm a bit excited here right because this is the fun part for me i've spent many years being a front-end uh developer but also a back-end developer but there's something special about delivering this fantastic visual experience for the customers right so I'm expect half expecting some magic and half expecting that I probably need to tweak something anyway but at least I will get some kind of initial
54:00 - 54:30 nice proof of concept appearance right so now I'm curious about all the edits and I'm fully expecting it to use cards and other nice components as part of bootstrap and I can see it's working hard here and I can acknowledge all of these changes yes it seem to be using container table okay fair enough table striped uhhuh uhhuh it's going through all these various bits still working on users
54:30 - 55:00 let's acknowledge that workups okay it seems to be one more component left great great great was there anything else or were those all the components yep it's done all the things uh let's see are we in the right place yes front end running front end and this time around we expect a better appearance ah that looks a bit better right
55:00 - 55:30 oh just I have to say I really love these usernames i have to say Thunder God Metal Geek for someone who listens to this kind of music you know um rock and roll and stuff thunder God that's a very fitting name it might not look like much but this is definitely a working fullstack application if we want to jazz it up by adding blue or red or whatever theme color you have for your company now's the time to do it so there you saw it folks we actually went through the entire exercise let's just double check
55:30 - 56:00 make sure that we don't have something in here that we need to do as well uh so let's just run this in preview but this is honestly the full exercise uh today and uh yeah there is another keyboard activity that is is optional because I think we are running up on full time but if you want to run this activity you see that we can summarize and review a PR also with co-pilot I'm going to let you do this one but we did create a fullstack
56:00 - 56:30 application today from absolute nothing we installed the database we h got the back end up and running with the front end we even styled it with Bootstrap and if you are like me you probably want to go in there and make it even more fun add images whatever you want to add so I'm going to go back into PowerPoint at this point and take us out so right we have created our full
56:30 - 57:00 stack application today we have been inside of code spaces you've seen all the magic and uh yes you have a working app it didn't look exactly like that every run is a bit different but you definitely got an octafit tracker working from front end to back end to database and you can style it to your h content and if you want to also run step six if you want to uh leverage your agent to work with pull request as well but I'm going to leave that one with you uh there's some resources that we want you to have a look at um so you learn
57:00 - 57:30 more about copilot and all its features github models those are AI models um if you didn't know you can definitely try Generative AI for free via GitHub all you need is a GitHub account there's also extensions that you need to have installed and I talked and showed you today the capabilities of the co-pilot agent mode how it did all that heavy lifting for you and congratulations if you've done all these things with me you got a working
57:30 - 58:00 application you are part of a Guinness World Record attempt so confirm your participation by scanning this QR code and also share your success we want to see what you built use this hashtag AI skillsfest so we can see on LinkedIn on X or on Tik Tok whatever you're trying to use that you are part of this Guinness record uh thank you so much for attending celebrate that success of yours scan this QR code and also have a look at
58:00 - 58:30 credentials for our Microsoft certifications we have many certifications so you might want to browse and see if there's any certifications that works for you but I also want to say that this is not the end but rather the beginning it is April 8th today but we will run exciting activities throughout the entire month from April 8th to May 28th you are part of AI Skills Fest so something fun is going to happen every day so make sure that you tune in and see what we're
58:30 - 59:00 doing um and we also are running this agent hack here between April 8th and April 20th so definitely check out the AKA link to see how you could be building agents with us the question is what will you learn next hopefully you learn how to use GitHub copilot agent mode to build a full stack app or whatever else application that's all from me today so back to the control room and see if we can take any questions
59:00 - 59:30 thank you thank you so much Chris um I think we I mean we had a lot of questions but our wonderful student team has already answered to most of them so like Chris already said please feel free to reach out to him if you have any further questions about today's sessions or in general if you want to reach out to him please u feel free to reach out to him and thank you once again for hosting this amazing uh session and thank you all for joining us today
59:30 - 60:00 please visit Microsoft Reactor website for more upcoming sessions and also we would appreciate your feedback on today's session as it will help us to curate future session please scan the QR code and do share your feedback today's event ID is 25295 feel free to use the learn module link this will give you access to additional resources to take your learning further thank you all once again and enjoy the rest of your day