DEV Community: atsushi-ambo

Attending Manus’s First Event in Japan

atsushi-ambo — Sun, 20 Apr 2025 11:08:38 +0000

Attending Manus’s First Event in Japan 🇯🇵

Yesterday, I had the chance to join the first-ever Manus event held in Tokyo, and I’d like to share my impressions.

Event Overview

The event kicked off with Manus’s CPO talking about the origin, development stories, and design philosophy behind Manus. What surprised me most was that, before releasing Manus, the team actually built an AI-driven browser.

They initially developed a Chrome extension, but since it depended on Chrome, they decided to build a standalone browser. After six months of development, they were just a week away from launch when they chose to cancel the project.

It turned out that when the AI was processing, the browser would lock up and prevent any other tasks, effectively taking over the entire browser. So they decided to abandon the browser project—and that decision ultimately led to the creation of Manus.

AHPU: Agentic Hours Per User

Most SaaS companies focus on increasing users’ time spent on their platforms. Manus takes the opposite approach: reducing the time users spend. The CPO argued that “time spent” is not a good metric.

Because Manus continues working even after you close your laptop, you can spend time on chores, family, or anything else. This is the core idea behind AHPU (Agentic Hours Per User)—the hours your agent works on your behalf.

The CPO also shared some heartwarming user feedback: a mother of three working in San Francisco said that using Manus to create documents gave her more time to spend with her children.

It’s been about a month since Manus launched, and the response has been overwhelming. User numbers are growing rapidly, and the CPO can’t contain their excitement.

They’ve only been sleeping two to three hours a night for the past month and are understandably exhausted—yet they’re still smiling. It’s clear how passionate and excited they are about what they’re building.

Conversation with the CPO and Mr. Chaen

In the second half, the CPO joined Mr. Chaen for a Q&A session, answering questions submitted in advance.

The CPO revealed plans to open a Tokyo office and deploy servers in Japan, in partnership with AWS, to meet security and data management requirements for Japanese enterprises.

Mr. Chaen, who regularly shares AI insights as an exclusive seminar instructor for GMO Internet Group employees, was also there in person—it was the first time I’d met him face-to-face, and his energy was infectious.

The food at the event was also top-notch! 🍽️

Conclusion

Connecting directly with people on the front lines of the AI era was an incredible experience. The concept of AHPU shared by the Manus CPO was particularly fascinating.

Hearing how the team, though exhausted from sleepless nights, remains thrilled by the excitement of the moment left a lasting impression.

Manus events will continue in the future—if you’re interested, I highly recommend attending. It’s a rare opportunity to experience the cutting edge of AI technology firsthand.

Attending Manus’s First Event in Japan

atsushi-ambo — Sun, 20 Apr 2025 11:00:49 +0000

Attending Manus’s First Event in Japan 🇯🇵

Yesterday, I had the chance to join the first-ever Manus event held in Tokyo, and I’d like to share my impressions.

Event Overview

AHPU: Agentic Hours Per User

The CPO also shared some heartwarming user feedback: a mother of three working in San Francisco said that using Manus to create documents gave her more time to spend with her children.

It’s been about a month since Manus launched, and the response has been overwhelming. User numbers are growing rapidly, and the CPO can’t contain their excitement.

Conversation with the CPO and Mr. Chaen

In the second half, the CPO joined Mr. Chaen for a Q&A session, answering questions submitted in advance.

The CPO revealed plans to open a Tokyo office and deploy servers in Japan, in partnership with AWS, to meet security and data management requirements for Japanese enterprises.

The food at the event was also top-notch! 🍽️

Conclusion

Connecting directly with people on the front lines of the AI era was an incredible experience. The concept of AHPU shared by the Manus CPO was particularly fascinating.

Hearing how the team, though exhausted from sleepless nights, remains thrilled by the excitement of the moment left a lasting impression.

Manus events will continue in the future—if you’re interested, I highly recommend attending. It’s a rare opportunity to experience the cutting edge of AI technology firsthand.

Attending Manus’s First Event in Japan

atsushi-ambo — Sun, 20 Apr 2025 10:49:26 +0000

Attending Manus’s First Event in Japan 🇯🇵

Yesterday, I had the chance to join the first-ever Manus event held in Tokyo, and I’d like to share my impressions.

Event Overview

AHPU: Agentic Hours Per User

The CPO also shared some heartwarming user feedback: a mother of three working in San Francisco said that using Manus to create documents gave her more time to spend with her children.

It’s been about a month since Manus launched, and the response has been overwhelming. User numbers are growing rapidly, and the CPO can’t contain their excitement.

Conversation with the CPO and Mr. Chaen

In the second half, the CPO joined Mr. Chaen for a Q&A session, answering questions submitted in advance.

The CPO revealed plans to open a Tokyo office and deploy servers in Japan, in partnership with AWS, to meet security and data management requirements for Japanese enterprises.

The food at the event was also top-notch! 🍽️

Conclusion

Connecting directly with people on the front lines of the AI era was an incredible experience. The concept of AHPU shared by the Manus CPO was particularly fascinating.

Hearing how the team, though exhausted from sleepless nights, remains thrilled by the excitement of the moment left a lasting impression.

Manus events will continue in the future—if you’re interested, I highly recommend attending. It’s a rare opportunity to experience the cutting edge of AI technology firsthand.

I Took a Popular Vibe Coding Course and Built a Sample App

atsushi-ambo — Mon, 31 Mar 2025 02:12:20 +0000

Experiencing Vibe Coding - Building Web Apps with AI Agents

Hello, I'm Atsushi from the SRE team at GMO Media. In this article, I'd like to share my experience taking the "Vibe Coding 101 with Replit" course offered by DeepLearning.AI and building sample applications with AI agents.

What is Vibe Coding?

"Vibe Coding" is a new coding style where you delegate most of the coding work to AI agents while focusing on application architecture and feature design. It's not just about throwing a prompt at an AI and accepting all its suggestions; it involves structuring your work, refining prompts, and using frameworks that lead to more efficient code.

Course Overview

This course was created in partnership with Replit (an online coding environment), with Michele Catasta (President of Replit) and Matt Palmer (Head of Developer Relations) as instructors. Through about 1 hour and 34 minutes of video lessons, you learn how to build and deploy two web applications using AI coding agents.

The course consists of 7 modules:

Introduction (3 minutes)
- Course overview and goals
- Basic concepts of Vibe Coding
Principles of Agent Development (18 minutes)
- Effective collaboration with AI agents
- Five-skill framework for leveraging agents
Planning and Building an SEO Analyzer (23 minutes)
- Creating a Product Requirements Document (PRD) and wireframes
- Developing prototypes using AI agents
Implementing SEO Analysis Features (12 minutes)
- Improving UI and adding features
- Error handling and debugging methods
Planning and Building a Voting App (26 minutes)
- Designing data models
- Implementing a comparison voting system
Enhancing the National Parks Voting App (7 minutes)
- Integrating a complete dataset
- Implementing data persistence and storage features
Next Steps and Best Practices (4 minutes)
- Applying to more complex projects
- Tips and tricks for utilizing Vibe Coding

Applications I Built

Of the two applications introduced in the course, I created the SEO Analyzer in Replit, so I'll detail that process.

SEO Analyzer

This is a tool that analyzes SEO-related information from a website when you input its URL.

Main features of the app:

Analyzes SEO-related information for websites
Checks meta tags and SEO elements
Evaluates mobile-friendliness
Provides improvement suggestions

In this project, I communicated requirements to an AI agent who created a basic prototype. Then, I gradually improved its completeness by giving instructions for UI improvements and feature additions.

Development in Replit

By giving the AI agent specific prompts like the one below, I was able to create an application in just a few minutes:

Help me create an interactive app that displays the SEO (meta) tags for ANY website in an interactive and visual way to check that they're properly implemented.

The app should fetch the HTML for a site, then provide feedback on SEO tags in accordance with best practices for SEO optimization.

The app should give google and Social media previews.

The completed app retrieves meta tags from the entered URL and visually displays previews for Google search results and social media. It also checks important SEO points and suggests improvements if needed.

Since it wasn't responsive for smartphones, I conveyed the following prompt to have it fixed:

make my app fully responsive and mobile friendly

This process of starting with simple prompts and adding/improving features through dialogue with the AI agent is the essence of Vibe Coding.

Five Skills Needed for Vibe Coding

The course introduced five skills for effective "Vibe Coding":

Thinking
Using Frameworks
Checkpoints
Debugging
Providing Context

Why I Recommend This Course

After taking this course, I found tremendous value in the experience of collaborating with AI agents to develop applications. Here are some reasons:

1. Efficient Learning Curve

In traditional programming learning, you need to first learn language syntax and framework usage, but with Vibe Coding, you can start immediately from the idea of "what you want to create." Since AI agents handle implementation details, you can focus on higher-level concepts.

2. Deeper Understanding of Implementation

Surprisingly, having AI write code increased my opportunities to understand how that code works. When I ask "What does this code do?", the AI explains in detail, making it an effective learning tool.

3. Accelerated Prototyping

The time from idea to prototype is dramatically shortened. Projects that would normally take days take shape in hours, allowing you to try more ideas.

4. Prompt Engineering Skills Improvement

The ability to effectively instruct AI has become an extremely important skill for modern programmers. This course teaches specific prompt strategies.

My Course Experience

While taking the course, I created an SEO analyzer following the instructions. I started with a simple UI implementing only basic functions and gradually added features.

I was particularly impressed with the debugging process when errors occurred. When I communicated error messages and code status to the AI, it quickly suggested the causes and solutions. I felt this was a much more understandable approach for beginners compared to traditional debugging methods.

Also, using Replit eliminated the hassle of environment setup, allowing me to focus on coding immediately. Replit integrates an editor, package manager, and deployment tools, enabling one-stop development to deployment.

Conclusion

The "Vibe Coding 101 with Replit" course is an excellent opportunity to learn effective collaboration methods with AI agents. From programming beginners to experienced developers, you can practically learn new development approaches utilizing AI.

A wonderful point is experiencing the entire process from project conception to prototyping, refinement, and deployment. The skills learned in this course are applicable to actual business projects and directly lead to improved development efficiency.

I believe collaboration with AI agents will become standard in future programming. By acquiring "Vibe Coding" skills ahead of this trend, we can focus on more creative and advanced projects.

Borrowing the power of AI while humans focus on higher-order problem solving and creativity—why not experience this new form of programming through this course?

I Took a Popular Vibe Coding Course and Built a Sample App

atsushi-ambo — Mon, 31 Mar 2025 02:07:19 +0000

Experiencing Vibe Coding - Building Web Apps with AI Agents

What is Vibe Coding?

Course Overview

The course consists of 7 modules:

Introduction (3 minutes)
- Course overview and goals
- Basic concepts of Vibe Coding
Principles of Agent Development (18 minutes)
- Effective collaboration with AI agents
- Five-skill framework for leveraging agents
Planning and Building an SEO Analyzer (23 minutes)
- Creating a Product Requirements Document (PRD) and wireframes
- Developing prototypes using AI agents
Implementing SEO Analysis Features (12 minutes)
- Improving UI and adding features
- Error handling and debugging methods
Planning and Building a Voting App (26 minutes)
- Designing data models
- Implementing a comparison voting system
Enhancing the National Parks Voting App (7 minutes)
- Integrating a complete dataset
- Implementing data persistence and storage features
Next Steps and Best Practices (4 minutes)
- Applying to more complex projects
- Tips and tricks for utilizing Vibe Coding

Applications I Built

Of the two applications introduced in the course, I created the SEO Analyzer in Replit, so I'll detail that process.

SEO Analyzer

This is a tool that analyzes SEO-related information from a website when you input its URL.

Main features of the app:

Analyzes SEO-related information for websites
Checks meta tags and SEO elements
Evaluates mobile-friendliness
Provides improvement suggestions

Development in Replit

By giving the AI agent specific prompts like the one below, I was able to create an application in just a few minutes:

Help me create an interactive app that displays the SEO (meta) tags for ANY website in an interactive and visual way to check that they're properly implemented.

The app should fetch the HTML for a site, then provide feedback on SEO tags in accordance with best practices for SEO optimization.

The app should give google and Social media previews.

Since it wasn't responsive for smartphones, I conveyed the following prompt to have it fixed:

make my app fully responsive and mobile friendly

This process of starting with simple prompts and adding/improving features through dialogue with the AI agent is the essence of Vibe Coding.

Five Skills Needed for Vibe Coding

The course introduced five skills for effective "Vibe Coding":

Thinking
Using Frameworks
Checkpoints
Debugging
Providing Context

Why I Recommend This Course

After taking this course, I found tremendous value in the experience of collaborating with AI agents to develop applications. Here are some reasons:

1. Efficient Learning Curve

2. Deeper Understanding of Implementation

Surprisingly, having AI write code increased my opportunities to understand how that code works. When I ask "What does this code do?", the AI explains in detail, making it an effective learning tool.

3. Accelerated Prototyping

The time from idea to prototype is dramatically shortened. Projects that would normally take days take shape in hours, allowing you to try more ideas.

4. Prompt Engineering Skills Improvement

The ability to effectively instruct AI has become an extremely important skill for modern programmers. This course teaches specific prompt strategies.

My Course Experience

While taking the course, I created an SEO analyzer following the instructions. I started with a simple UI implementing only basic functions and gradually added features.

Conclusion

I believe collaboration with AI agents will become standard in future programming. By acquiring "Vibe Coding" skills ahead of this trend, we can focus on more creative and advanced projects.

Borrowing the power of AI while humans focus on higher-order problem solving and creativity—why not experience this new form of programming through this course?

I Took a Popular Vibe Coding Course and Built a Sample App

atsushi-ambo — Mon, 31 Mar 2025 01:51:04 +0000

Experiencing Vibe Coding - Building Web Apps with AI Agents

What is Vibe Coding?

Course Overview

The course consists of 7 modules:

Introduction (3 minutes)
- Course overview and goals
- Basic concepts of Vibe Coding
Principles of Agent Development (18 minutes)
- Effective collaboration with AI agents
- Five-skill framework for leveraging agents
Planning and Building an SEO Analyzer (23 minutes)
- Creating a Product Requirements Document (PRD) and wireframes
- Developing prototypes using AI agents
Implementing SEO Analysis Features (12 minutes)
- Improving UI and adding features
- Error handling and debugging methods
Planning and Building a Voting App (26 minutes)
- Designing data models
- Implementing a comparison voting system
Enhancing the National Parks Voting App (7 minutes)
- Integrating a complete dataset
- Implementing data persistence and storage features
Next Steps and Best Practices (4 minutes)
- Applying to more complex projects
- Tips and tricks for utilizing Vibe Coding

Applications I Built

Of the two applications introduced in the course, I created the SEO Analyzer in Replit, so I'll detail that process.

SEO Analyzer

This is a tool that analyzes SEO-related information from a website when you input its URL.

Main features of the app:

Analyzes SEO-related information for websites
Checks meta tags and SEO elements
Evaluates mobile-friendliness
Provides improvement suggestions

Development in Replit

By giving the AI agent specific prompts like the one below, I was able to create an application in just a few minutes:

Help me create an interactive app that displays the SEO (meta) tags for ANY website in an interactive and visual way to check that they're properly implemented.

The app should fetch the HTML for a site, then provide feedback on SEO tags in accordance with best practices for SEO optimization.

The app should give google and Social media previews.

Since it wasn't responsive for smartphones, I conveyed the following prompt to have it fixed:

make my app fully responsive and mobile friendly

This process of starting with simple prompts and adding/improving features through dialogue with the AI agent is the essence of Vibe Coding.

Five Skills Needed for Vibe Coding

The course introduced five skills for effective "Vibe Coding":

Thinking
Using Frameworks
Checkpoints
Debugging
Providing Context

Why I Recommend This Course

After taking this course, I found tremendous value in the experience of collaborating with AI agents to develop applications. Here are some reasons:

1. Efficient Learning Curve

2. Deeper Understanding of Implementation

Surprisingly, having AI write code increased my opportunities to understand how that code works. When I ask "What does this code do?", the AI explains in detail, making it an effective learning tool.

3. Accelerated Prototyping

The time from idea to prototype is dramatically shortened. Projects that would normally take days take shape in hours, allowing you to try more ideas.

4. Prompt Engineering Skills Improvement

The ability to effectively instruct AI has become an extremely important skill for modern programmers. This course teaches specific prompt strategies.

My Course Experience

While taking the course, I created an SEO analyzer following the instructions. I started with a simple UI implementing only basic functions and gradually added features.

Conclusion

I believe collaboration with AI agents will become standard in future programming. By acquiring "Vibe Coding" skills ahead of this trend, we can focus on more creative and advanced projects.

Borrowing the power of AI while humans focus on higher-order problem solving and creativity—why not experience this new form of programming through this course?

Running Qwen, Nearly as Powerful as DeepSeek, on a MacBook Pro

atsushi-ambo — Wed, 05 Feb 2025 13:05:38 +0000

Running Qwen Locally on a MacBook Pro

Qwen (Qwen GitHub Repository) has been gaining attention recently as a powerful open-source large language model (LLM). I decided to give it a spin on my MacBook Pro using Ollama, a platform designed for running local LLMs. While Qwen2.5-Max boasts the highest performance, my setup could only handle the smaller Qwen2.5 (32B) model. Here's what I found!

Hardware and Software Environment

Device: MacBook Pro (M3 Pro)
Memory: 36GB RAM
Software: Latest version of Ollama

Installing Ollama

To get started, I installed Ollama. With Homebrew, the installation process is straightforward:

brew install ollama

# Verify installation
ollama --version
# Output: ollama version is 0.5.7

Downloading and Running Qwen2.5 (32B)

Once Ollama was set up, I proceeded to download and run the Qwen2.5 (32B) model:

ollama run qwen2.5:32b
# Output during the first run:
pulling manifest 
pulling eabc98a9bcbf... 100% ▕█████████████████████████████████████████████████████████████████████████████▏  19 GB
...
success

The model weighs about 20GB, so depending on your internet speed, downloading may take some time.

Memory Usage Insights

Running the Qwen2.5 (32B) model requires substantial memory. With my MacBook Pro M3 and its 36GB RAM, these were the key observations:

Memory Usage: About 30-34GB was utilized while running the model. (Baseline system memory before starting: ~15GB.)
Performance: Each response took around 1–2 minutes, varying based on the complexity of the prompt.
Extended usage caused the laptop fan to start running, but the overall experience was stable.

Caveats to Keep in Mind

Large Initial Download: Be prepared for the ~20GB download on the first launch.
High Memory Usage: Ensure you manage other applications to free up resources.
Slower Response Without GPU: In setups without a dedicated GPU, inference times can be slower.

Example Task: Round-Trip Train Calculation

To test the model’s reasoning and computation abilities, I used the following prompt:

ollama run qwen2.5:32b
>>> A train travels from city A to city B at 60 km/h and takes 2 hours. On the return journey, due to headwind, it travels at 40 km/h. 
... 1) What is the total distance between cities A and B?
... 2) How long does the return journey take?
... 3) What is the average speed for the entire round trip?
... Please show all calculations.

Qwen's Response

Below is the model's detailed response:

### 1) Total Distance Between Cities A and B
Distance = Speed × Time  
= 60 km/h × 2 h   
= **120 km**

The total distance is 120 km.

### 2) Duration of the Return Journey
Time = Distance ÷ Speed  
= 120 km ÷ 40 km/h  
= **3 hours**

The return journey takes 3 hours.

### 3) Average Speed for the Entire Round Trip
- Total Distance = 120 km (to B) + 120 km (return) = **240 km**
- Total Time = 2 hours (to B) + 3 hours (return) = **5 hours**
- Average Speed = Total Distance ÷ Total Time  
= 240 km ÷ 5 h  
= **48 km/h**

The average speed for the round trip is 48 km/h.

I cross-verified the results with Gemini, GPT-4, and Claude 3.5, all of which produced the same answers.

Uninstalling Qwen

If you no longer need the model, it can be removed efficiently using the following command:

ollama rm qwen2.5:32b
# Output: deleted 'qwen2.5:32b'

Summary

Running Qwen2.5 (32B) on a MacBook Pro (M3, 36GB RAM) was possible, albeit with tight memory constraints. I had to close other applications to allocate sufficient resources. Despite the slower response times in a CPU-only environment, Qwen did a commendable job handling complex queries.

Although my benchmark was limited to Qwen2.5 (32B), the official Qwen2.5-Max benchmark suggests its performance is on par with models like DeepSeek-V3 and GPT-4. This makes Qwen an exciting open-source alternative worth watching!

Are you planning to try Qwen on your setup? Let me know your experience in the comments below! 🚀

Exploring Cursor: The AI Editor Revolutionizing Content Creation

atsushi-ambo — Tue, 10 Sep 2024 01:56:49 +0000

In the ever-evolving landscape of digital content creation, Cursor stands out as a powerful AI editor designed to enhance the writing process. This blog delves into the features, benefits, and overall impact of Cursor on writers, marketers, and content creators alike. By leveraging advanced artificial intelligence, Cursor not only streamlines the editing process but also empowers users to produce high-quality content with ease.

What is Cursor?

Cursor is an AI-driven writing assistant that helps users craft, edit, and refine their written content. Whether you're a seasoned writer or a novice, Cursor offers tools that cater to various writing needs, from grammar and style checks to content suggestions and organization tips. Its intuitive interface and smart algorithms make it an invaluable resource for anyone looking to improve their writing efficiency.

Key Features of Cursor

1. Real-Time Editing

One of the standout features of Cursor is its real-time editing capability. As you write, Cursor analyzes your text and provides instant feedback on grammar, punctuation, and style. This allows you to make corrections on the fly, ensuring that your content is polished and professional before you hit publish.

2. Content Suggestions

Cursor goes beyond basic editing by offering content suggestions tailored to your writing style and topic. It can recommend synonyms, phrases, and even entire sentences to enhance clarity and engagement. This feature is particularly useful for writers looking to diversify their vocabulary and improve their overall writing quality.

3. Plagiarism Checker

Maintaining originality is crucial in content creation, and Cursor includes a built-in plagiarism checker to help you ensure that your work is unique. By scanning your text against a vast database of existing content, Cursor alerts you to any potential issues, allowing you to make necessary adjustments before submission.

4. User-Friendly Interface

Cursor's interface is designed with user experience in mind. Its clean layout and intuitive navigation make it easy for users to access the tools they need without feeling overwhelmed. Whether you're editing a blog post, drafting an email, or writing a report, Cursor provides a seamless writing experience.

Benefits of Using Cursor

1. Enhanced Productivity

By automating the editing process and providing instant feedback, Cursor significantly boosts productivity. Writers can spend less time on revisions and more time on creating compelling content. This efficiency is especially beneficial for professionals who juggle multiple projects and deadlines.

2. Improved Writing Quality

With Cursor's advanced editing features and content suggestions, users can elevate the quality of their writing. The AI's ability to identify errors and offer alternatives helps writers produce clearer, more engaging content that resonates with their audience.

3. Accessibility for All Skill Levels

Whether you're an experienced writer or just starting, Cursor is designed to accommodate all skill levels. Its user-friendly features make it accessible to anyone looking to improve their writing, making it a valuable tool for students, professionals, and hobbyists alike.

Conclusion

Cursor is more than just an AI editor; it's a comprehensive writing assistant that empowers users to create high-quality content efficiently. With its real-time editing, content suggestions, and user-friendly interface, Cursor is revolutionizing the way we approach writing. As the demand for engaging and well-crafted content continues to grow, tools like Cursor will play an essential role in helping writers meet those challenges head-on. Embrace the future of content creation with Cursor and unlock your full writing potential.

Building a To-Do App with AI Assistance

atsushi-ambo — Sun, 26 Nov 2023 08:34:44 +0000

Introduction

As developers, we often find ourselves in the cycle of continuous learning. My recent endeavor was to build a To-Do application—a classic project that never gets old. But this time, I had a twist in the tale; I decided to build this app with the assistance of an AI. Yes, you heard it right, an AI partner in coding!

The Idea

The concept was simple: a To-Do List application where tasks can be created, read, updated, and deleted (CRUD). But I wanted to incorporate best practices and containerization with Docker, and get everything right from the get-go. This is where my AI assistant came into play.

The Build

Flask and the Backend

Flask is a micro web framework in Python that is perfect for small-scale projects like a To-Do app. With the AI's guidance, I set up the backend, ensuring a RESTful API design that could handle CRUD operations seamlessly.

Frontend and User Experience

The frontend was kept minimal with HTML and CSS. The AI provided tips on UI/UX design to ensure the application was user-friendly. It suggested a color scheme similar to Trello, a popular project management tool, to give a sense of familiarity to users.

MySQL and Persistence

No To-Do app is complete without a database to store the tasks. MySQL was the database of choice, and Docker helped in setting up a MySQL container. My AI assistant walked me through the integration, ensuring that the tasks persisted across sessions.

Docker Compose and Containerization

Docker compose is a tool for defining and running multi-container Docker applications. With a single command, you can spin up the application with all its service dependencies. The AI helped me write the docker-compose.yml file to define our Flask app and MySQL service.

Challenges and Learning

Every coding journey has its set of challenges. Debugging the connection issues between Flask and MySQL, understanding Docker's nuances, and getting the RESTful endpoints to work were some hurdles I crossed, with AI providing me solutions and explanations at every step.

Conclusion

The result is a functional To-Do application that can be easily spun up on any machine with Docker installed. This project not only reinforced my understanding of Flask, MySQL, and Docker but also showcased the potential of AI in coding assistance.

Future Enhancements

There's always room for improvement. Next steps include adding authentication, allowing multiple users, and deploying the app on the cloud.

Acknowledgements

A huge shoutout to OpenAI and their AI-powered tools for their assistance throughout this journey. I can confidently say that AI and human collaboration can lead to remarkable achievements in the realm of software development.

Want to Try?

The source code is available on GitHub, and I welcome you to clone, fork, and contribute to the project!

https://github.com/atsushi-ambo/todo-app
git clone https://github.com/your-username/todo-app.git

Happy coding!

If you enjoyed this article, please like and share. I'm open to discussions and questions in the comments section below. Let's learn and grow together in this ever-evolving field of software development.

I tried to run the app using OpenAI API

atsushi-ambo — Sat, 18 Mar 2023 08:15:57 +0000

The official OpenAI web site has a description of how to use the API, so I built it along with a sample application.

Prerequisite

Python already installed. If you have not installed it, click here.

Prepare the code for the application

Clone the following repository and install the application files. Or, download the zip file from the official website.

% git clone https://github.com/openai/openai-quickstart-python.git

Add an API key

Change the directory to the cloned repository. Create a new .env file.

% cd openai-quickstart-python
% cp .env.example .env

Confirm that you created the file.The username is hidden for security reasons.

% ls -l
total 56
416B Mar 12 16:57 .
160B Mar 12 16:37 ..
213B Mar 12 17:04 .env
162B Mar  8 12:06 .env.example
115B Mar  8 12:06 .gitignore
1.0K Mar  8 12:06 LICENSE
1.2K Mar  8 12:06 README.md
96B Mar 12 16:57 __pycache__
940B Mar  8 12:06 app.py
413B Mar  8 12:06 requirements.txt
128B Mar  8 12:06 static
96B Mar  8 12:06 templates
192B Mar 12 16:49 venv

You can create an API key on the official page.

Then add that key to the newly created .env file.

% code .env
FLASK_APP=app
FLASK_ENV=development

# Once you add your API key below, make sure to not share it with anyone! The API key should remain private.
OPENAI_API_KEY="Put the key here"

Run the application

Run the following command to start the application. The Python command varies depending on the version.

python3 -m venv venv
. venv/bin/activate
pip3 install -r requirements.txt
flask run
 * Serving Flask app 'app' (lazy loading)
 * Environment: development
 * Debug mode: on
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 177-654-623

I was able to launch the application. Go to http://127.0.0.1:5000/ in your browser to see the app. Enter the name of the animal and it will suggest 3 superhero animal names!

This concludes the construction of the application. The next step is to look at the code.

Check the code

If you open the app.py file, you can see the code. The actual API request is sent at response = openai. I am using the code command in the VS Code to open the file.

% code app.py
import os

import openai
from flask import Flask, redirect, render_template, request, url_for

app = Flask(__name__)
openai.api_key = os.getenv("OPENAI_API_KEY")


@app.route("/", methods=("GET", "POST"))
def index():
    if request.method == "POST":
        animal = request.form["animal"]
        response = openai.Completion.create(
            model="text-davinci-003",
            prompt=generate_prompt(animal),
            temperature=0.6,
        )
        return redirect(url_for("index", result=response.choices[0].text))

    result = request.args.get("result")
    return render_template("index.html", result=result)


def generate_prompt(animal):
    return """Suggest three names for an animal that is a superhero.

Animal: Cat
Names: Captain Sharpclaw, Agent Fluffball, The Incredible Feline
Animal: Dog
Names: Ruff the Protector, Wonder Canine, Sir Barks-a-Lot
Animal: {}
Names:""".format(
        animal.capitalize()
    )

I am not familiar with the coding. so I asked ChatGPT what this code is about. It seems to me that ChatGPT can explain this very well.

Here's a breakdown of the code:
1.Importing required libraries:

import os
import openai
from flask import Flask, redirect, render_template, request, url_for

os is a Python standard library that provides a way of interacting with the operating system. openai is a Python library for interacting with OpenAI's API. Flask is a Python web framework, and render_template, request, and url_for are functions from Flask that are used to render HTML templates, handle incoming requests, and generate URLs, respectively.
2.Creating a Flask app and setting up OpenAI API key:

app = Flask(__name__)
openai.api_key = os.getenv("OPENAI_API_KEY")

Here, we create a Flask app object and set the OpenAI API key by getting the value of the OPENAI_API_KEY environment variable.
3.Defining the index route:

@app.route("/", methods=("GET", "POST"))
def index():
    if request.method == "POST":
        animal = request.form["animal"]
        response = openai.Completion.create(
            model="text-davinci-003",
            prompt=generate_prompt(animal),
            temperature=0.6,
        )
        return redirect(url_for("index", result=response.choices[0].text))

    result = request.args.get("result")
    return render_template("index.html", result=result)

This function is executed when a user navigates to the homepage of the web app. If the user submits a form with an animal name, the function generates three superhero names for that animal using the OpenAI API and returns the results. If the user navigates to the homepage without submitting a form, the function renders the index template with the previous results.
4.Defining the generate_prompt function:

def generate_prompt(animal):
    return """Suggest three names for an animal that is a superhero.

Animal: Cat
Names: Captain Sharpclaw, Agent Fluffball, The Incredible Feline
Animal: Dog
Names: Ruff the Protector, Wonder Canine, Sir Barks-a-Lot
Animal: {}
Names:""".format(
        animal.capitalize()
    )

This function takes an animal name as an argument and returns a string prompt that will be passed to the OpenAI API. The prompt provides examples of superhero names for cats and dogs, and the given animal's name is inserted at the end.

Overall, this web app takes an animal name as input and generates three superhero names for that animal using the OpenAI API.

Manage an RDS Instance using Terraform

atsushi-ambo — Sun, 19 Feb 2023 09:35:16 +0000

I tried to manage an RDS instance using Terraform. I followed the hashicorp.com tutorial.

Prerequisites
1. Clone the sample repository
2. Check resource configuration
3. Provision resources
4. Modify instance configuration
5. Create a Read Replica
6. Clean up infrastructure

Prerequisites

Terraform 0.14+ installed locally.
An AWS account with credentials configured for Terraform.
PostgreSQL 14.2+ installed.

1. Clone the sample repository

Clone the repository from Harshicorp of Github.

% git clone https://github.com/hashicorp/learn-terraform-rds.git
Cloning into 'learn-terraform-rds'...
remote: Enumerating objects: 52, done.
remote: Counting objects: 100% (42/42), done.
remote: Compressing objects: 100% (25/25), done.
remote: Total 52 (delta 21), reused 30 (delta 17), pack-reused 10
Receiving objects: 100% (52/52), 16.13 KiB | 8.07 MiB/s, done.
Resolving deltas: 100% (21/21), done.

Change the directory to the installed repository.

cd learn-terraform-rds

2. Check resource configuration

Use the less command to check resource configuration

% less main.tf

Networking components

The VPC and the subnets are defined as the first resource by using the terraform-aws-vpc module.
Caution: For simplicity, the RDS instance is publicly accessible in this tutorial.

module "vpc" {
  source  = "terraform-aws-modules/vpc/aws"
  version = "2.77.0"

  name                 = "education"
  cidr                 = "10.0.0.0/16"
  azs                  = data.aws_availability_zones.available.names
  public_subnets       = ["10.0.4.0/24", "10.0.5.0/24", "10.0.6.0/24"]
  enable_dns_hostnames = true
  enable_dns_support   = true
}

Memo:

A Terraform module is a group of Terraform resources that are packaged together in a reusable way. Modules are useful because they allow you to reuse your infrastructure configuration code, and reduce duplication of code and effort.

The terraform-aws-modules/vpc/aws module that's used in the configuration file is a module that creates an Amazon Virtual Private Cloud (VPC) in AWS. A VPC is a virtual network dedicated to your AWS account that you can use to launch AWS resources in a logically isolated manner.

The vpc module in the configuration file creates an AWS VPC with the specified cidr (network address range), public_subnets (public subnet addresses), and tags (metadata). The VPC is given a name of example-vpc. Once the module is declared, you can use the outputs of the module to connect other resources to the VPC, such as the RDS instance in the configuration file.

By using the VPC module, you can quickly create a VPC with a consistent configuration and eliminate the need to duplicate the VPC configuration across multiple Terraform projects.

Subnet group

The next resource is an aws_db_subnet_group, which is a collection of subnets where your RDS instance can be provisioned. This subnet group uses the subnets created by the VPC module.

resource "aws_db_subnet_group" "education" {
  name       = "education"
  subnet_ids = module.vpc.public_subnets

  tags = {
    Name = "Education"
  }
}

This subnet group resource is an optional parameter in your aws_db_instance block shown below. Otherwise, Terraform will create your RDS instances in the default VPC.

Database instance

Check the aws_db_instance configuration.

resource "aws_db_instance" "education" {
  identifier             = "education"
  instance_class         = "db.t3.micro"
  allocated_storage      = 5
  engine                 = "postgres"
  engine_version         = "14.1"
  username               = "edu"
  password               = var.db_password
  db_subnet_group_name   = aws_db_subnet_group.education.name
  vpc_security_group_ids = [aws_security_group.rds.id]
  parameter_group_name   = aws_db_parameter_group.education.name
  publicly_accessible    = true
  skip_final_snapshot    = true
}

As I mentioned earlier, the argument of publicly_accessible is set to true, which means that this DB is accessible from the public.You can check all arguments on this page.

Parameter group

Now check the aws_db_parameter_group.

resource "aws_db_parameter_group" "education" {
  name   = "education"
  family = "postgres14"

  parameter {
    name  = "log_connections"
    value = "1"
  }
}

You can specify a name for the db parameter group. Otherwise, Terraform will randomly assign a unique name. You do not need to set a custom DB parameter group. Terraform will use a default one, but the default parameter group cannot be modified later, so if you want to modify it, it is better to use a custom parameter group.
You can check all arguments on this page.

Input variables

You can check the input variable by opening variables.tf file. The DB root user password is configured in the file.

% less variables.tf
variable "db_password" {
  description = "RDS root user password"
  sensitive   = true
}

Terraform can hide the password in the output file, but Terrafor stores it in the state file.

Output variables

You can review the output file. It shows the details of the RDS that will be created.

output "rds_hostname" {
  description = "RDS instance hostname"
  value       = aws_db_instance.education.address
  sensitive   = true
}

output "rds_port" {
  description = "RDS instance port"
  value       = aws_db_instance.education.port
  sensitive   = true
}

output "rds_username" {
  description = "RDS instance root username"
  value       = aws_db_instance.education.username
  sensitive   = true
}

3.Provision resources

First, set the db_password variable as an environment variable.
Then, initialize the terraform configuration.

% export TF_VAR_db_password="hashicorp"
% terraform init
Initializing modules...
Downloading registry.terraform.io/terraform-aws-modules/vpc/aws 2.77.0 for vpc...
- vpc in .terraform/modules/vpc

Initializing the backend...

Initializing provider plugins...
- Reusing previous version of hashicorp/aws from the dependency lock file
- Installing hashicorp/aws v3.32.0...
- Installed hashicorp/aws v3.32.0 (signed by HashiCorp)

Terraform has made some changes to the provider dependency selections recorded
in the .terraform.lock.hcl file. Review those changes and commit them to your
version control system if they represent changes you intended to make.

Terraform has been successfully initialized!

You may now begin working with Terraform. Try running "terraform plan" to see
any changes that are required for your infrastructure. All Terraform commands
should now work.

If you ever set or change modules or backend configuration for Terraform,
rerun this command to reinitialize your working directory. If you forget, other
commands will detect it and remind you to do so if necessary.

Next, apply the configuration. When prompted to confirm, answer Yes.
After a few minutes, the RDS creation was complete.

Apply complete! Resources: 14 added, 0 changed, 0 destroyed.

Outputs:

rds_hostname = <sensitive>
rds_port = <sensitive>
rds_username = <sensitive>

Then you can try to connect to the RDS by a following command.

psql -h $(terraform output -raw rds_hostname) -p $(terraform output -raw rds_port) -U $(terraform output -raw rds_username) postgres

But, I have received the following error even though I have installed PostgreSQL.

psql -h $(terraform output -raw rds_hostname) -p $(terraform output -raw rds_port) -U $(terraform output -raw rds_username) postgres
zsh: command not found: psql

So I looked it up on Google. It seems like I need to specify the path in ~/.zshrc file.
If you get the same error, run the following command and Add the path

$ vim ~/.zshrc
export PATH="/opt/homebrew/opt/postgresql@15/bin:$PATH"
:wq!

Then, I run the psql command again to connect.
Password is "hashicorp"
After connecting the DB, you can create a database named "hashicorp" within this instance.

postgres=> CREATE DATABASE hashicorp;
CREATE DATABASE

You can verify that the database has been created by running the following command.

postgres-> \list
                                                 List of databases
   Name    |  Owner   | Encoding |   Collate   |    Ctype    | ICU Locale | Locale Provider |   Access privileges   
-----------+----------+----------+-------------+-------------+------------+-----------------+-----------------------
 hashicorp | edu      | UTF8     | en_US.UTF-8 | en_US.UTF-8 |            | libc            | 
 postgres  | edu      | UTF8     | en_US.UTF-8 | en_US.UTF-8 |            | libc            | 
 rdsadmin  | rdsadmin | UTF8     | en_US.UTF-8 | en_US.UTF-8 |            | libc            | rdsadmin=CTc/rdsadmin+
           |          |          |             |             |            |                 | rdstopmgr=Tc/rdsadmin
 template0 | rdsadmin | UTF8     | en_US.UTF-8 | en_US.UTF-8 |            | libc            | =c/rdsadmin          +
           |          |          |             |             |            |                 | rdsadmin=CTc/rdsadmin
 template1 | edu      | UTF8     | en_US.UTF-8 | en_US.UTF-8 |            | libc            | =c/edu               +
           |          |          |             |             |            |                 | edu=CTc/edu
(5 rows)

You can exit by the following command.

\q

4. Modify instance configuration

Open main.tf and change the storage size from 5 to 10GB.

resource "aws_db_instance" "education" {
   name                   = "education"
   instance_class         = "db.t3.micro"
-  allocated_storage      = 5
+  allocated_storage      = 10
##...
}

Before you apply the change, you will need to add the apply_immediately argument to set it to true so that the RDS can be restarted.

resource "aws_db_instance" "education_replica" {
   name                   = "education-replica"
   identifier             = "education-replica"
   replicate_source_db    = aws_db_instance.education.identifier
   instance_class         = "db.t3.micro"
 + apply_immediately      = true
   publicly_accessible    = true
   skip_final_snapshot    = true
   vpc_security_group_ids = [aws_security_group.rds.id]
   parameter_group_name   = aws_db_parameter_group.education.name
}

Then, apply the change.

% terraform apply
data.aws_availability_zones.available: Reading...
module.vpc.aws_vpc.this[0]: Refreshing state... [id=vpc-0b256089f0091780c]
aws_db_parameter_group.education: Refreshing state... [id=education]
data.aws_availability_zones.available: Read complete after 0s [id=us-east-2]
aws_security_group.rds: Refreshing state... [id=sg-014424185901691c4]
module.vpc.aws_internet_gateway.this[0]: Refreshing state... [id=igw-0719c56f100ace0d7]
module.vpc.aws_route_table.public[0]: Refreshing state... [id=rtb-03d7c847b9a295364]
module.vpc.aws_subnet.public[1]: Refreshing state... [id=subnet-008ab5f5d5587f486]
module.vpc.aws_subnet.public[0]: Refreshing state... [id=subnet-062890da2dae35429]
module.vpc.aws_subnet.public[2]: Refreshing state... [id=subnet-02cb916ed21e23d79]
module.vpc.aws_route.public_internet_gateway[0]: Refreshing state... [id=r-rtb-03d7c847b9a2953641080289494]
module.vpc.aws_route_table_association.public[1]: Refreshing state... [id=rtbassoc-03ce6f881ca509cf7]
module.vpc.aws_route_table_association.public[0]: Refreshing state... [id=rtbassoc-0f0f18b8c334690d4]
module.vpc.aws_route_table_association.public[2]: Refreshing state... [id=rtbassoc-02bb355ff4c6d01f1]
aws_db_subnet_group.education: Refreshing state... [id=education]
aws_db_instance.education: Refreshing state... [id=education]

Terraform used the selected providers to generate the following execution plan. Resource
actions are indicated with the following symbols:
  ~ update in-place

Terraform will perform the following actions:

  # aws_db_instance.education will be updated in-place
  ~ resource "aws_db_instance" "education" {
      ~ allocated_storage                     = 5 -> 10
        id                                    = "education"
        name                                  = ""
        tags                                  = {}
        # (49 unchanged attributes hidden)
    }

Plan: 0 to add, 1 to change, 0 to destroy.

Do you want to perform these actions?
  Terraform will perform the actions described above.
  Only 'yes' will be accepted to approve.

  Enter a value: yes

aws_db_instance.education: Modifying... [id=education]
aws_db_instance.education: Still modifying... [id=education, 10s elapsed]
aws_db_instance.education: Still modifying... [id=education, 20s elapsed]
aws_db_instance.education: Still modifying... [id=education, 30s elapsed]
aws_db_instance.education: Modifications complete after 33s [id=education]

Apply complete! Resources: 0 added, 1 changed, 0 destroyed.

Outputs:

rds_hostname = <sensitive>
rds_port = <sensitive>
rds_username = <sensitive>

After completing the change, you can verify that it was applied correctly.

% terraform plan
data.aws_availability_zones.available: Reading...
aws_db_parameter_group.education: Refreshing state... [id=education]
module.vpc.aws_vpc.this[0]: Refreshing state... [id=vpc-0b256089f0091780c]
data.aws_availability_zones.available: Read complete after 1s [id=us-east-2]
aws_security_group.rds: Refreshing state... [id=sg-014424185901691c4]
module.vpc.aws_internet_gateway.this[0]: Refreshing state... [id=igw-0719c56f100ace0d7]
module.vpc.aws_subnet.public[0]: Refreshing state... [id=subnet-062890da2dae35429]
module.vpc.aws_subnet.public[2]: Refreshing state... [id=subnet-02cb916ed21e23d79]
module.vpc.aws_subnet.public[1]: Refreshing state... [id=subnet-008ab5f5d5587f486]
module.vpc.aws_route_table.public[0]: Refreshing state... [id=rtb-03d7c847b9a295364]
module.vpc.aws_route.public_internet_gateway[0]: Refreshing state... [id=r-rtb-03d7c847b9a2953641080289494]
module.vpc.aws_route_table_association.public[0]: Refreshing state... [id=rtbassoc-0f0f18b8c334690d4]
module.vpc.aws_route_table_association.public[1]: Refreshing state... [id=rtbassoc-03ce6f881ca509cf7]
module.vpc.aws_route_table_association.public[2]: Refreshing state... [id=rtbassoc-02bb355ff4c6d01f1]
aws_db_subnet_group.education: Refreshing state... [id=education]
aws_db_instance.education: Refreshing state... [id=education]

No changes. Your infrastructure matches the configuration.

Terraform has compared your real infrastructure against your configuration and found no
differences, so no changes are needed.

5. Create a Read Replica

Open main.tf file and add the following block.

resource "aws_db_instance" "education_replica" {
   name                   = "education-replica"
   identifier             = "education-replica"
   replicate_source_db    = aws_db_instance.education.identifier
   instance_class         = "db.t3.micro"
   apply_immediately      = true
   publicly_accessible    = true
   skip_final_snapshot    = true
   vpc_security_group_ids = [aws_security_group.rds.id]
   parameter_group_name   = aws_db_parameter_group.education.name
}

And add this argument in the primary instance block.

resource "aws_db_instance" "education" {
    name                      = "education"
    instance_class            = "db.t3.micro"
    allocated_storage         = 10
+   backup_retention_period   = 1
##...
}

Add this block into outputs.tf file.

output "rds_replica_connection_parameters" {
  description = "RDS replica instance connection parameters"
  value       = "-h ${aws_db_instance.education_replica.address} -p ${aws_db_instance.education_replica.port} -U ${aws_db_instance.education_replica.username} postgres"
}

Then apply the change with "terraform apply".
You will see the following message at the bottom of the screen.

aws_db_instance.education_replica: Creation complete after 11m47s [id=education-replica]

Apply complete! Resources: 1 added, 1 changed, 0 destroyed.

Outputs:

rds_hostname = <sensitive>
rds_port = <sensitive>
rds_replica_connection_parameters = "-h education-replica.cl6o1zzqtrp1.us-east-2.rds.amazonaws.com -p 5432 -U edu postgres"

Now you can connect to the read replica.

% psql $(terraform output -raw rds_replica_connection_parameters)
Password for user edu:

List database to verify that the database has actually been created.

postgres=> \list
                                                 List of databases
   Name    |  Owner   | Encoding |   Collate   |    Ctype    | ICU Locale | Locale Provider |   Access privileges   
-----------+----------+----------+-------------+-------------+------------+-----------------+-----------------------
 hashicorp | edu      | UTF8     | en_US.UTF-8 | en_US.UTF-8 |            | libc            | 
 postgres  | edu      | UTF8     | en_US.UTF-8 | en_US.UTF-8 |            | libc            | 
 rdsadmin  | rdsadmin | UTF8     | en_US.UTF-8 | en_US.UTF-8 |            | libc            | rdsadmin=CTc/rdsadmin+
           |          |          |             |             |            |                 | rdstopmgr=Tc/rdsadmin
 template0 | rdsadmin | UTF8     | en_US.UTF-8 | en_US.UTF-8 |            | libc            | =c/rdsadmin          +
           |          |          |             |             |            |                 | rdsadmin=CTc/rdsadmin
 template1 | edu      | UTF8     | en_US.UTF-8 | en_US.UTF-8 |            | libc            | =c/edu               +
           |          |          |             |             |            |                 | edu=CTc/edu
(5 rows)

6. Clean up infrastructure

You can delete the infrastructure by this command.

% terraform destroy 
....
module.vpc.aws_vpc.this[0]: Destroying... [id=vpc-0b256089f0091780c]
module.vpc.aws_vpc.this[0]: Destruction complete after 1s

Destroy complete! Resources: 15 destroyed.

Well, this is the end of this tutorial.
I'm getting used to Terraform, so I'll keep learning.
You may refer to this site to review the argument of aws RDS.

I tried the initial setting of GitHub [For Mac user]

atsushi-ambo — Sun, 29 Jan 2023 09:41:20 +0000

I plan to write a bunch of blogs this year. I would like to use GitHub to manage my blogs, so this time around I tried the initial setup of GitHub to get started.

1. Create an account
2. Create a repository
3. Basic commands for using GitHub

1. Create an account

Click Sign up on the GitHub official page.

You will be asked to enter your email address, password and username after clicking on the page.

Then you need to do puzzle. You will receive an email with a passcode for authentication.
If the password is OK, you will be taken to the GitHub home page.

2. Create a repository

Click the plus button in the upper right corner to create a new repository.

After clicking it, you have to fill in the name of the repository and other information.
README is like a description of a project, you may add it later.
.gitignore file is a list of files you don't like to be managed on GitHub.

After filling in the information, click the Create a repository button. You will be taken to a next page.

3. Basic commands for using GitHub

OK, let's try a couple of basic commands to make use of the repository we have just created.
Copy an URL of the repository by clicking the code button in the upper right corner.

Then open a terminal on your PC and run the following command.
You will get a copy of a remote repository (on GitHub) into your local repository.

% git clone [URL of the repository]

You will get comments like the following:
This is a public repository, so I can show my URL.

% git clone https://github.com/atsushi-ambo/test-github
Cloning into 'test-github'...
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Compressing objects: 100% (2/2), done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (3/3), done.

Initialize the repository

Run the following command to initialize your repository.

% git init
Reinitialized existing Git repository in /Users/username/test-github/.git/

Add a new file to your local repository

First, create a new file in the local repository by the following command.

% echo “Hello World” > GitHubtest.txt
% ls
GitHubtest.txt  README.md

Then, add the file to the local repository with the following command.
Actually, the "add" command does not add to a local repository, it adds to an index before the local repository.

% git add GitHubtest.txt

Commit the file to the local repository

Having added the file to the index, you can now commit it to the local repository using the following "commit" command. You will need to add a message such as "Add a file".

git commit -m "[your message]"

I got the following result:

% git commit -m "add a file"
[main aa3f19e] adda file
 Committer: Atsushi Ambo <username-MacBook-Pro.local>
Your name and email address were configured automatically based
on your username and hostname. Please check that they are accurate.
You can suppress this message by setting them explicitly. Run the
following command and follow the instructions in your editor to edit
your configuration file:

    git config --global --edit

After doing this, you may fix the identity used for this commit with:

    git commit --amend --reset-author

 1 file changed, 1 insertion(+)
 create mode 100644 GitHubtest.txt

Push the change to the remote repository

Now, you have committed the change (file) to your local repository. Next, add it the remote repository by the following command. You have only a main branch, so branch name is "main."

git push origin [branch name]

However, I received the following error.

% git push origin main          
Missing or invalid credentials.
Error: connect ENOENT /var/folders/vr/n1j1fkxd25b60vlpyg3_8t500000gn/T/vscode-git-fc8d2dcd4c.sock
    at PipeConnectWrap.afterConnect [as oncomplete] (node:net:1157:16) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'connect',
  address: '/var/folders/vr/n1j1fkxd25b60vlpyg3_8t500000gn/T/vscode-git-fc8d2dcd4c.sock'
}
Missing or invalid credentials.
Error: connect ENOENT /var/folders/vr/n1j1fkxd25b60vlpyg3_8t500000gn/T/vscode-git-fc8d2dcd4c.sock
    at PipeConnectWrap.afterConnect [as oncomplete] (node:net:1157:16) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'connect',
  address: '/var/folders/vr/n1j1fkxd25b60vlpyg3_8t500000gn/T/vscode-git-fc8d2dcd4c.sock'
}
remote: No anonymous write access.
fatal: Authentication failed for 'https://github.com/atsushi-ambo/test-github/'

I did some research on Google and found out that I have to set an access token for the repository.

Setup personal access token

So, let's setup the token.
Go to the Settings tab and click on Developer settings at the bottom.

Select Fine-grained tokens in Personal access tokens tab.
GitHub recommends fine-grained tokens over tokens (classic).

Fill in required fields such as Token Name.
Select the Only select repositories check box so that you can push to the remote repository this time.

Then, click the create button.
Copy the created token, you only have one time to copy it. Don't lose it.

To setup the token, you will need to install GitHub CLI.

% brew install gh
Running `brew update --auto-update`...
==> Auto-updated Homebrew!
Updated 2 taps (hashicorp/tap and homebrew/core).
==> New Formulae
ancient                      clang-build-analyzer         hashicorp/tap/copywrite      m1ddc                        mdless                       xcdiff                       zsh-autopair

You have 9 outdated formulae installed.
You can upgrade them with brew upgrade
or list them with brew outdated.

==> Fetching gh
==> Downloading https://ghcr.io/v2/homebrew/core/gh/manifests/2.22.1
######################################################################## 100.0%
==> Downloading https://ghcr.io/v2/homebrew/core/gh/blobs/sha256:e704f932cbc7b237e9143e9db3a9a32f0acd753e03d302299b69d660d3875011
==> Downloading from https://pkg-containers.githubusercontent.com/ghcr1/blobs/sha256:e704f932cbc7b237e9143e9db3a9a32f0acd753e03d302299b69d660d3875011?se=2023-01-28T10%3A25%3A00Z&sig=u57FLpso8S3mj2ErguwRz
######################################################################## 100.0%
==> Pouring gh--2.22.1.arm64_ventura.bottle.tar.gz
==> Caveats
zsh completions have been installed to:
  /opt/homebrew/share/zsh/site-functions
==> Summary
🍺  /opt/homebrew/Cellar/gh/2.22.1: 153 files, 40.3MB
==> Running `brew cleanup gh`...
Disable this behaviour by setting HOMEBREW_NO_INSTALL_CLEANUP.
Hide these hints with HOMEBREW_NO_ENV_HINTS (see `man brew`).

Run the following command to setup the token.
You will be asked some questions, answer them to continue.

% gh auth login
? What account do you want to log into? GitHub.com
? What is your preferred protocol for Git operations? HTTPS
? Authenticate Git with your GitHub credentials? Yes
? How would you like to authenticate GitHub CLI? Login with a web browser
...
✓ Authentication complete.
- gh config set -h github.com git_protocol https
✓ Configured git protocol
✓ Logged in as atsushi-ambo

If you receive an authentication complete message, you have completed the setup.
So, now let's try "push" command again.

% git push origin main
Enumerating objects: 4, done.
Counting objects: 100% (4/4), done.
Delta compression using up to 8 threads
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 349 bytes | 349.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/atsushi-ambo/test-github
   e30a2c6..7253ffa  main -> main

You have completed the commit to the remote repository on GitHub.
You can see the test file uploaded to the repository on GitHub.
My blog is finished at this point. There are some other git commands like "git branch" and "git checkout". I will try to use them next time.