Learn Live: Creating a Website using GitHub Copilot

Slides for https://www.youtube.com/watch?v=sNCbSTc55OI

Transcript

1. Create a website using GitHub Copilot aka.ms/learn/GitHubUniverse Burke Holland Principal Cloud Advocate Microsoft in/burkeholland Pamela Fox Principal Cloud Advocate Microsoft /in/pamela-s-fox
2. Agenda Backend Part 1 Frontend Part 2
3. Today's goal Use GitHub Copilot features to build a website:  Part 1: Build a Python backend for an AI app  Part 2: Build a JS frontend for that backend
4. Part 1: Build a Python backend for an AI app https://github.com/pamelafox/learnlive-rag-starter/ Starting from this repo: (PostgreSQL + OpenAI + GitHub models) Want to follow along? Open in GitHub Codespaces:
5. Part 2: Build a JS frontend for the Python backend https://github.com/pamelafox/learnlive-rag-starter/tree/solution Using the backend API from part 1: https://github.com/burkeholland/chat-front-end One possible frontend:
6. From prototype to production Today we built a prototype! For a production app, you need...  Tests  Infrastructure  Security  Automation A full-featured RAG-on-PostgreSQL solution is here: https://github.com/Azure-Samples/rag-postgres-openai-python/
7. Summary
8. Many ways to invoke GitHub Copilot  Editor: Just type and it will suggest code.  Chat: Ask questions about your code or code topics. (Use agents like @workspace for specific tasks)  Context menu: Ask it to explain, fix, or test selected code.
9. Best practices for prompting GitHub Copilot  Provide context:  Open relevant files or use #file to select file  Write comments that describe intent  Add imports for the packages that you want it to use  Write descriptive names for variables, functions, classes  Use types (TypeScript for JS, annotations for Python)  Be predictable:  Follow standard naming conventions  Use common software architecture patterns Prompting Copilot in VS Code: tinyurl.com/prompting-vscode
10. Avoiding Copilot confabulations  Paste in example code from docs  Be wary when asking about niche/new libraries or APIs Find out immediately if Copilot made an inaccurate suggestion:  Use real-time linters to check your work  Write tests for your code
11. About the Series ▪ October 15th: Create a website using GitHub Copilot TODAY’S SESSION ▪ October 22nd: Automate your repository using GitHub Actions ▪ October 8th: Build powerful READMEs with Markdown UPCOMING SESSION aka.ms/learn/GitHubUniverse Tuesday, 10:00 am EST ON DEMAND SESSION
12. https://aka.ms/learn/github GitHub Foundations Certification learning path – free ☺ Continue learning!