Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Learn Live: Creating a Website using GitHub Cop...

Pamela Fox
October 15, 2024

Learn Live: Creating a Website using GitHub Copilot

Pamela Fox

October 15, 2024
Tweet

More Decks by Pamela Fox

Other Decks in Technology

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. 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
  3. 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:
  4. 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:
  5. 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/
  6. 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.
  7. 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
  8. 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
  9. 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