การใช้งาน Simple Calculator ในภาษา Next.js แบบง่ายๆ

ในยุคปัจจุบันที่เทคโนโลยีได้เข้ามามีบทบาทในชีวิตประจำวันมากขึ้น การเรียนรู้การเขียนโปรแกรมเป็นสิ่งที่จำเป็น โดยเฉพาะในยุคที่ผู้คนต้องการพัฒนาแอพพลิเคชันต่างๆ เพื่อช่วยเพิ่มประสิทธิภาพในการทำงานของตนเอง ในบทความนี้เราจะมาสร้าง “Simple Calculator” โดยใช้ Next.js ซึ่งเป็น framework ที่สามารถช่วยสร้างแอพพลิเคชัน JavaScript ที่มีความสามารถในการทำงานร่วมกับ server-side และ client-side ได้อย่างมีประสิทธิภาพ

ทำความรู้จักกับ Next.js

Next.js เป็น Framework ของ React ที่ช่วยให้การสร้างแอพพลิเคชัน Single Page Application (SPA) และ Server-Side Rendering (SSR) เป็นเรื่องง่ายดาย โดยให้ความสามารถในการสร้างเว็บแอพที่สามารถโหลดหน้าเว็บได้อย่างรวดเร็วและช่วยให้ SEO ดีขึ้นได้ นอกจากนี้ยังสะดวกต่อการจัดการ routing และการใช้งาน API

การออกแบบ Simple Calculator

ก่อนที่เราจะเริ่มเขียนโค้ด เรามาดูกันก่อนว่า Simple Calculator จะมีฟีเจอร์อะไรบ้าง

การติดตั้ง Next.js

ก่อนที่เราจะเริ่มต้นสร้าง Simple Calculator เราต้องติดตั้ง Next.js กันก่อน โดยสามารถทำได้ตามขั้นตอนดังนี้:

1. เปิด terminal และสร้างโฟลเดอร์โปรเจกต์ใหม่:

```bash

npx create-next-app simple-calculator

```

2. เข้าไปที่โฟลเดอร์ที่สร้าง:

```bash

cd simple-calculator

```

3. เริ่มเซิร์ฟเวอร์ด้วยคำสั่ง:

```bash

npm run dev

```

4. จากนั้นเข้าสู่เว็บบราวเซอร์ที่ `http://localhost:3000`

เริ่มสร้าง Simple Calculator

ให้เปิดไฟล์ `pages/index.js` และแทนที่ด้วยโค้ดต่อไปนี้:

 import { useState } from 'react';

export default function Home() {
    const [num1, setNum1] = useState(0);
    const [num2, setNum2] = useState(0);
    const [result, setResult] = useState(null);
    const [operation, setOperation] = useState('+');

    const handleCalculation = () => {
        let res;
        switch (operation) {
            case '+':
                res = Number(num1) + Number(num2);
                break;
            case '-':
                res = Number(num1) - Number(num2);
                break;
            case '*':
                res = Number(num1) * Number(num2);
                break;
            case '/':
                res = Number(num1) / Number(num2);
                break;
            default:
                res = null;
        }
        setResult(res);
    };

    return (
        <div style={{ padding: '20px' }}>
            <h1>Simple Calculator</h1>
            <input
                type="number"
                value={num1}
                onChange={(e) => setNum1(e.target.value)}
                placeholder="Number 1"
            />
            <select value={operation} onChange={(e) => setOperation(e.target.value)}>
                <option value="+">+</option>
                <option value="-">-</option>
                <option value="*">*</option>
                <option value="/">/</option>
            </select>
            <input
                type="number"
                value={num2}
                onChange={(e) => setNum2(e.target.value)}
                placeholder="Number 2"
            />
            <button onClick={handleCalculation}>Calculate</button>
            {result !== null && <h2>Result: {result}</h2>}
        </div>
    );
}

อธิบายการทำงานของโค้ด

Use Case ในโลกจริง

การสร้าง Calculator อย่างที่เราทำไปนั้น มีใช้ในหลากหลายแอพพลิเคชันในชีวิตประจำวัน ตัวอย่างเช่น:

สรุป

การสร้าง Simple Calculator ด้วย Next.js เป็นการเรียนรู้ที่ดีเกี่ยวกับพื้นฐานการเขียนโปรแกรม ด้วยการจัดการ state และการคำนวณพื้นฐาน ช่วยให้คุณได้เรียนรู้และเข้าถึงการพัฒนาเว็บไซต์ที่มีคุณภาพ

หากคุณสนใจในการพัฒนาทักษะด้านการเขียนโปรแกรมเพิ่มเติม ทาง EPT (Expert-Programming-Tutor) มีคอร์สที่หลากหลาย ที่จะช่วยคุณเรียนรู้การเขียนโปรแกรมได้อย่างมีประสิทธิภาพ มาเป็นส่วนหนึ่งของการพัฒนาโปรแกรมกันเถอะ!

หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง