開發者基礎：使用 AI 建構軟體所需的最低知識

© 2026 MakersHub.dev. All rights reserved.

Developer Basics: The Minimum You Need to Build with AI

The Essential Knowledge You Need to Build with AI

AI has dramatically lowered the barrier to building software. This guide gives you the foundational knowledge to take full advantage—the minimum you need to start building real apps with Cursor, Claude Code, or any AI coding tool.

AI has changed everything. Building software used to require years of learning syntax, frameworks, and infrastructure. Today, AI handles most of the implementation—you describe what you want, and it writes the code. This is one of the most significant shifts in how software gets built.

But here's what hasn't changed: you still need to understand the ecosystem. Not to write code yourself, but to give AI clear instructions, understand what it generates, and troubleshoot when things go wrong.

Think of it like this: AI is an incredibly skilled co-pilot, but you still need to know the basics of flying—what the instruments mean, where you're headed, and what to do if something looks off. This guide teaches you those fundamentals.

By the end, you'll understand the core concepts that come up constantly when building with AI—terminal commands, version control, how code is organized, what databases do, and how apps get from your computer to the internet. This is the foundation that makes everything else click.

The Terminal: Your Command Center

Every AI coding tool—Cursor, Claude Code, VS Code—eventually asks you to run commands in a terminal. It looks intimidating at first, but it's simply a way to talk to your computer using text instead of clicking.

What is a terminal?

A terminal (also called command line, console, or shell) is a text-based interface to your computer. Instead of clicking icons and menus, you type commands and press Enter. It's how developers have controlled computers since before graphical interfaces existed—and it's still the most powerful way to do many tasks.

Why it matters for AI coding: When AI generates code, it often tells you to run commands like npm install or git push. If you don't know what these mean or where to type them, you're stuck. The terminal is where these commands live.

How to open the terminal

For Windows users

Many tutorials assume Mac/Linux commands. Consider installing Git Bash (comes with Git) or WSL (Windows Subsystem for Linux) for better compatibility with developer tools.

The commands you'll actually use

You only need about five commands to get started. AI handles the complex stuff.

See them in action:

A simple mental model

Think of your computer's files like a building with floors and rooms:

Don't memorize—let AI help

When AI tells you to run a command you don't recognize, just ask: "What does this command do?" AI will explain it. Over time, the common ones become second nature.

Reading error messages

Errors in the terminal look scary but follow a pattern. Here's what to look for:

Example error:

This tells you: React isn't installed, and the problem is in App.js, line 1. The fix is usually npm install react.

The #1 debugging skill

Copy the entire error message and paste it to your AI coding tool. Say "I got this error, what's wrong?" This solves 80% of problems.

Traversy Media's beginner-friendly walkthrough

Comprehensive freeCodeCamp course by Colt Steele

Ubuntu's official tutorial with practical exercises

Interactive tutorial with exercises

Your Code Editor (IDE)

Before you start writing code, you need a place to write it. That's where an IDE comes in—an Integrated Development Environment. Think of it as your coding workspace: a text editor, file browser, and terminal all in one window.

What is an IDE?

An IDE combines everything you need to write code:

You could write code in Notepad and run commands in a separate terminal, but an IDE makes everything faster and more connected.

The two main options for AI coding

VS Code

Visual Studio Code (VS Code) is the most popular code editor in the world. It's free, open-source, and runs on Mac, Windows, and Linux. With the right extensions, it can do almost anything.

For AI coding, you'd add:

Cursor

Cursor is a fork of VS Code built specifically for AI-first development. It looks and works like VS Code (same shortcuts, same extensions), but AI is deeply integrated:

Our recommendation for AI coding

Start with Cursor. It's free to try, works like VS Code, and the AI integration is seamless. If you're learning to code with AI, Cursor removes the friction of setting up extensions and configuring AI tools.

Online IDE (no installation needed)

Can't install software? Working on a Chromebook? Just want to try coding without commitment? Replit lets you code from any browser.

Replit

A browser-based IDE with AI assistance, collaborative editing, and one-click deployment. Perfect for beginners who want to understand what they're building.

What makes it great for beginners:

Replit is great for getting started quickly and learning the fundamentals. As your projects grow more complex, you'll likely want to switch to a desktop IDE like Cursor for better performance and more features.

Quick setup guide

Git: Your Safety Net

Git is version control—it saves snapshots of your code so you can go back if something breaks. Think of it like Google Docs' version history, but for code.

What is Git?

Git is software that tracks changes to your files over time. Every time you save a "snapshot" (called a commit), Git remembers exactly what every file looked like at that moment. You can go back to any previous snapshot whenever you want.

GitHub is a website that stores your Git projects online. It's like Google Drive for code—your projects are backed up, and you can access them from anywhere.

Why Git matters even more with AI

AI can make sweeping changes to your codebase in seconds. Sometimes those changes break things. Without Git, you'd have to manually undo everything. With Git, you just roll back to a working version.

Git is your undo button for AI mistakes.

The five commands you need

The basic workflow

See it visually:

That's it. This covers 90% of what you'll do with Git.

GitHub: Where your code lives online

GitHub is a website that stores your Git repositories (projects) online. It's important because:

Commit early, commit often

Make small, frequent commits. "Added header component" is better than one giant commit with everything. If something breaks, you can pinpoint exactly when.

When things go wrong

Made a mess and want to start over from your last commit?

This throws away all changes since your last save. It's your "undo everything" button.

Fireship's ultra-quick conceptual overview

freeCodeCamp's comprehensive beginner course

Visual, interactive tutorial for Git concepts

W3Schools' step-by-step reference guide

Understanding Code Without Writing It

Here's the key insight: AI writes the code, but you need to read it well enough to know if something's wrong.

You're the director. AI is the screenwriter. You need to understand the script well enough to give feedback and catch problems—not write every word yourself.

Core concepts to recognize

You don't need to master these—just recognize them when you see them:

Variables — Named containers that hold values

Functions — Reusable blocks of code that do something

Conditionals — Code that makes decisions

Loops — Code that repeats

File types and what they mean

The skill that matters most: Reading errors

When AI-generated code doesn't work, the error message tells you why. Learning to parse errors is the single most valuable skill for AI-assisted development.

Pattern to look for:

Then tell AI: "I'm getting [error] in [file] on line [number]. Here's the code around that line: [paste code]. What's wrong?"

Tech Stacks Explained

A tech stack is the combination of technologies used to build an app. Different stacks are better for different projects. Knowing the basics helps you tell AI which tools to use.

The Web Stack (JavaScript/TypeScript)

This is the most versatile stack—it can build almost anything on the web.

Best for: Web apps, SaaS products, marketing sites, dashboards, most startup ideas.

The Data/AI Stack (Python)

Python is the language of data science, machine learning, and quick utility tools.

Best for: Data analysis tools, AI-powered utilities, automations, internal tools, prototypes.

The Mobile Stack

Best for: Mobile apps that need to be on app stores.

Which stack should you choose?

Simple decision tree

Frontend vs Backend

Every app has two parts: what users see (frontend) and what runs on servers (backend). Understanding this split helps you communicate with AI about where code should live.

Frontend: The user interface

Everything you can see and interact with:

Technologies: React, Next.js pages, HTML, CSS, Tailwind

Backend: The behind-the-scenes

Everything that happens on servers:

Technologies: Next.js API routes, Supabase, server functions

How they communicate: APIs

The frontend and backend talk to each other through APIs (Application Programming Interfaces). Think of it like a restaurant:

When you click "Submit" on a form, the frontend sends a request to the backend API. The backend processes it (maybe saves to database), then sends a response back.

Why this matters for AI coding

AI will often ask or suggest things like:

Now you understand what it's asking. Generally:

Databases 101

A database is where your app stores information permanently. Without it, everything disappears when users close the browser.

What is a database?

Think of a database as a collection of spreadsheets that your app can read and write to automatically:

Two main types

For most projects, use Supabase (PostgreSQL). It handles 95% of use cases and has excellent documentation.

Key vocabulary

When AI talks about databases

Common things you'll hear:

You don't need to master SQL. AI writes the queries. You just need to understand what a database does and describe what you want stored.

freeCodeCamp's comprehensive written guide with examples

Supabase's official guide for building with Next.js

Package Managers & Dependencies

Modern apps are built on top of code other people wrote. Package managers handle downloading and organizing this external code.

What's a package?

A package (also called library or module) is pre-written code you can use in your project. Instead of building everything from scratch, you import packages:

The two main package managers

Key files to know

package.json (JavaScript projects)
Lists all the packages your project uses. When you run npm install, it reads this file and downloads everything.

node_modules folder
Where all downloaded packages live. It's huge and you never edit it. If something's weird, delete it and run npm install again.

.env file
Stores secrets and configuration (API keys, database URLs). Never share this file or commit it to GitHub.

Commands you'll use

When packages cause problems

The classic fix: delete node_modules and package-lock.json, then run npm install. This solves a surprising number of issues.

APIs: How Apps Talk

APIs (Application Programming Interfaces) let different software systems communicate. Your frontend talks to your backend through APIs. Your app talks to Stripe for payments through their API. Everything connects through APIs.

The restaurant analogy

You don't go into the kitchen. You make a request through the waiter, and get a response back.

HTTP methods: Types of requests

What an API request looks like

Why this matters

When AI creates code, it often separates:

Understanding that these are separate pieces that talk to each other helps you follow what AI is building and troubleshoot when the connection breaks.

Deployment: Getting Your App Online

Deployment means taking the app running on your computer and putting it on the internet where anyone can access it.

The three environments

Popular deployment platforms

The deployment workflow

This happens automatically once you connect GitHub to your deployment platform.

Environment variables in production

Your .env file with secrets doesn't go to GitHub (for security). Instead, you add those same variables in your deployment platform's settings. Every platform has a place for "Environment Variables" where you paste your keys.

Step-by-step Vercel deployment walkthrough

Complete Netlify deployment guide

Putting It All Together

Here's how all these pieces connect when you build an app with AI:

The development rhythm

Your mental model

When you get stuck

What's Next

You now have the foundational knowledge to start building with AI coding tools. You understand:

This isn't everything. But it's enough to start building real things and learn the rest as you go. The best way to solidify this knowledge is to use it.

Now go build something

Open Cursor or Claude Code, describe a simple project, and start building. You'll reference these concepts constantly—and they'll become second nature faster than you think.

Last updated: December 2025
Difficulty: Beginner | Estimated time: 15 minutes

Table of Contents