25.0312 Doc URLs Stack URLs Lab notes (Gdrive), Git

Overview

This page provides an overview of how I added the following tabs to a Vue stack frontend (FE) using only Copilot:

• "4 ApiDoc": Documents an API (implemented on an existing backend) by importing API annotations from the code.
• "5 DbApi": Allows API testing in the UI (call the API) in a customized UI interface.
• "6 SwaggerDoc": Allows API testing using Swagger in the UI.

Notes:

• The backend runs on a free Render plan. Initial delays in REST responses can last 1 minute.
• "tab 7 Markdown" fails.

Screenshots (localhost)

The demos are very basic and need a lot of work, but prove the basic concepts. And all created with Copilot.

4 ApiDoc

Documents an API (implemented on an existing backend) by importing API annotations from the code (if you change the annotations, this page auto-changes). I had to manually tweek some things (could not come up with a prompt that caused Copilot to give me what I wanted). Demo below needs scripts to autoformat btter, but demos the basic concept. I'm sure there are professional apps that do this, but I wanted to create a basic self-made version.

5 DbApi

I told Copilot what the endpoint and the params were, and got this. Not bad. The API calls work.

6 SwaggerDoc

Allows API testing using Swagger in the UI

7 Markdown (fails)

The idea is to convert the swagger annotations to markdown files and then use these to create API docs. But for some reason importing markdown in Vue (used to create the site) seems to be rather complex. Maybe just forget this. Or try in the React version.

Screenshots (render deployment, previous version)

Still need to deploy latest version. There are a few problems when deployed to Render that I still need to figure out.