Logo

dev-resources.site

for different kinds of informations.

Embarking on a Cloud-native Journey with a Todo API

Published at
11/11/2023
Categories
cloudnative
aiassisted
todo
api
Author
dfberry
Categories
4 categories in total
cloudnative
open
aiassisted
open
todo
open
api
open
Author
7 person written this
dfberry
open
Embarking on a Cloud-native Journey with a Todo API

Our cloud-native adventure begins with the API layer - the magical bridge between the front-end UI and the back-end services. For our Todo project, we're keeping the API simple and efficient. Express.js is our chosen framework, a tried-and-true Node.js project. With the power of Copilot Chat, we'll be speeding through the process in no time!

How do you typically approach building a new API for a cloud-native project?

Fire Up the Dev Containerโ€‹

In the previous chapter of our journey, 002-developer-environment-setup, we set up a robust dev environment. Now, it's time to bring it to life! Open it in GitHub Codespaces or locally on your computer with Visual Studio Code (Docker installation required).

Whether you're the lead developer or part of a team, whether you're working on a familiar project or exploring new territories, you've got options. Visual Studio Code and the dev container for local work, or Codespaces for a cloud-based approach.

Stay in the dev containerโ€‹

If you are like me, your local computer may not be a workhorse so docker may not be started when you start working on your project. You can start using Copilot chap locally, then realize you need the dev container for something. The Copilot chat stays with the environment, it doesn't move (at this time). If you are 20 questions into your conversation with a few side trips here and there, switching environments and not having the chat to reference is frustrating.

If you are using dev containers and Copilot chat, start and stay in the container for the entire conversation.

Building an API with Copilot Chatโ€‹

In just half an hour, Copilot Chat helped me create a fully functional API, complete with types, linting, tests, and a build-test workflow. Here's a sneak peek into the prompts I used:

  1. Building a todo microservice with Node.js and TypeScript.
  2. Adding tests for the todo API.
  3. Refactoring server.ts for both server and test.
  4. Modifying server.ts for CRUD operations.
  5. Providing initial sample data.
  6. Creating an OpenAPI yaml for the API.
  7. Adding an OpenAPI UI route.
  8. Setting up ESLint with Prettier.
  9. Deciding .gitignore contents.
  10. Moving openapi.yaml to the dist folder using tsc.
  11. Creating a GitHub action for linting, building, and testing.
  12. Identifying missing microservice elements.
  13. Adding type safety.

Refining Types and Refactoringโ€‹

There was some back-and-forth over types and refactoring. Copilot shone in evaluating incoming API request data. After a few prompts, the validation looked like this:

export interface Todo {
  id: number;
  title: string;
}

export interface PartialTodo {
  id?: unknown;
  title?: unknown;
}

const todoSchema = Joi.object({
  id: Joi.number().greater(0).required(),
  title: Joi.string().min(1).max(1000).required(),
}).unknown(false);

const todoPartialSchema = Joi.object({
  id: Joi.number().greater(0),
  title: Joi.string().min(1).max(1000).required(),
}).unknown(false);

export interface TodoValidation {
  valid: boolean;
  error: Error | null | string | ValidationErrorItem[];
  todo: Todo | PartialTodo | null;
}

export const validateTodo = (
  todo: PartialTodo,
  isNewTodo: boolean = false
): TodoValidation => {
  const schema = isNewTodo ? todoPartialSchema : todoSchema;
  const { error } = schema.validate(todo);
  if (error) {
    return {
      valid: false,
      error: error.details,
      todo: null,
    };
  }
  return { valid: true, error: null, todo };
};
Enter fullscreen mode Exit fullscreen mode

Copilot also excelled in creating logging handlers for requests and responses, and in adding those handlers to the route.

Copilot's Strengthsโ€‹

Copilot gave me a flying start. While some answers lacked details, running the app or tests quickly revealed any errors, which were easy to fix.

Copilot's Weaknessesโ€‹

Despite the conversation and the wealth of examples, I encountered more issues than expected. For more obscure subjects, I'd recommend breaking down the steps more atomically.

Why Not Use Existing Code?โ€‹

Sure, there are plenty of examples on GitHub. But navigating licenses and attributions can be tricky. I preferred to avoid any potential missteps.

Time Investmentโ€‹

From start to finish, the project took about 2 hours. There were a few hiccups along the way, but each step was small, making issues manageable. Considering everything, 2 hours is a solid benchmark for a proof-of-concept project.

todo Article's
30 articles in total
Favicon
Personal TODO list on how I set up my dev machine
Favicon
Svelte + Manifest = Giving Svelte a proper backend with 7 lines of code ๐Ÿงก๐Ÿฆš
Favicon
NodeJS Notes
Favicon
The Productivity apps I use in 2024
Favicon
Managing Your To-Do List Effectively: Strategies for Effective Task Management
Favicon
How can you effectively manage the scope of a task over time?
Favicon
A simple Todo application with Google sheets and React
Favicon
Effortlessly streamline Your Day with Integrated Email and Todo List Management
Favicon
Complete MERN Stack Todo Application
Favicon
Embarking on a Cloud-native Journey with a Todo API
Favicon
TODO List React Application
Favicon
A Simple To Do List with Next.js
Favicon
Simple TODO List APP with React
Favicon
A simple TODO list application built with Typescript and ReactJS
Favicon
A Todo list App using React
Favicon
Todo App Built With React and Redux
Favicon
React To-Do App with Tailwind CSS
Favicon
To-do list website made with React JS, Tailwind CSS
Favicon
Todo App: Why is it a Good Choice for a Pet Project?
Favicon
Wunderlist For Windows โ€“ Your Own Task Manager
Favicon
How to Use the Eisenhower Matrix to prioritize your work
Favicon
10 Effective Strategies for Conquering Challenging Tasks on Your To-Do List: Insights from an Experienced Web Developer
Favicon
A good reason to allow empty git commits
Favicon
Creating a TODO app in Fyne an Go
Favicon
The Productivity apps I use in 2023
Favicon
How to Build a Phoenix LiveView Todo List App with Testing.
Favicon
Total.js tutorial: Simple Todo application (part 2)
Favicon
How to Create TO-DO list with Node and React simple steps.
Favicon
Todo List To Learn a new language
Favicon
I made a plugin to remember todo comments on the code in vite

Featured ones: