Chương 67: Thế giới phát triển Frontend

Lại tiếp tục 300 bài cốt thiếu nhi nào (ദ്ദി ๑>؂•̀๑)

Enjoy!

------------------------------

Thế giới phát triển Frontend

Tôi lặng lẽ nhìn vào màn hình API sản phẩm của tiệm bánh Mizunoya mà mình vừa tạo xong.

“Cái này mà đem cho Chihiro xem chắc cô ấy chỉ nghiêng đầu hỏi ‘?’ thôi nhỉ.”

Trên trình duyệt là những dòng dữ liệu sản phẩm ở dạng JSON. Thông tin về sakuramochi, kusamochi… hiện lên bằng tiếng Anh và ký hiệu khô khan, hoàn toàn không phải thứ có thể đưa cho Chihiro xem một cách thoải mái.

“Đúng vậy. Vì thế mới cần frontend.”

Takuya-san gật đầu.

“Nhiệm vụ của frontend là biến dữ liệu JSON ấy thành một giao diện đẹp, dễ nhìn.”

Rồi anh ấy tiếp lời, như thể đã chờ sẵn khoảnh khắc này:

“Vậy nên, giờ ta thử làm màn hình frontend nào.”

Anh ấy mở một thư mục khác.

“Anh có sẵn một project Next.js rồi, cậu thử chỉnh sửa nó xem.”

“Next.js… nghe có vẻ khó quá.”

Chỉ mới nghe tên thôi mà tôi đã hơi căng thẳng.

“Không sao đâu. Chỉ cần sửa một vài file có sẵn thôi. Next.js là tên một framework của React.”

Giọng Takuya-san trấn an tôi.

“Mở file app/page.tsx đi.”

Tôi làm theo, và trên màn hình hiện ra những dòng code lạ lẫm.

“Giờ mình đổi nội dung file này thành danh sách sản phẩm của Mizunoya nhé.”

Dưới sự hướng dẫn bên cạnh của anh Takuya, tôi dần dần chỉnh sửa code thành như sau:

'use client';

import { useState, useEffect } from 'react';

export default function Home() {

  const [products, setProducts] = useState([]);

  useEffect(() => {

    fetch('http://localhost:3000/products')

      .then(res => res.json())

      .then(data => setProducts(data));

  }, []);

  return (

    <div style={{ padding: '20px' }}>

      <h1>水野屋商品一覧</h1>

      {products.map((product: any) => (

        <div key={product.id} style={{

          border: '1px solid #ccc',

          margin: '10px',

          padding: '10px'

        }}>

          <h3>{product.name}</h3>

          <p>価格: {product.price}円</p>

          <p>カテゴリ: {product.category}</p>

        </div>

      ))}

    </div>

  );

}

“Kết đoạn code này đang làm gì vậy ạ?”

Tôi hỏi.

“Giải thích đơn giản thì thế này.”

Takuya-san vừa nói vừa chỉ vào màn hình.

useEffect dùng để gọi xử lý khi trang vừa được tải

fetch lấy dữ liệu JSON từ API mình vừa tạo, rồi lưu vào mảng bằng setProducts

Phần return dùng map để duyệt mảng đó và hiển thị từng sản phẩm ra màn hình

“À… tức là lấy dữ liệu về rồi sắp xếp chúng lên giao diện đúng không ạ.”

Dòng chảy tổng thể cuối cùng cũng bắt đầu rõ ràng hơn trong đầu tôi.

“Được rồi, chạy thử nhé.”

Takuya-san gõ npm run dev vào terminal – cái màn hình đen quen thuộc – để khởi động server Next.js.

“Truy cập vào localhost:3001 đi.”

Tôi mở trình duyệt và nhập địa chỉ được chỉ định.

“Woa! Dữ liệu API lúc nãy đã biến thành một giao diện đẹp hẳn rồi!”

Trên màn hình, dưới tiêu đề “Danh sách sản phẩm Mizunoya”, thông tin về sakuramochi, kusamochi, anmitsu được sắp xếp gọn gàng, dễ nhìn. Giá cả và danh mục cũng hiện lên bằng tiếng Nhật, rất thân thiện.

“Đó chính là sự kết hợp giữa Next.js và Nest.js. Người ta gọi là phát triển full-stack.”

Takuya-san nói, vẻ hài lòng.

“Thế này thì đưa cho Chihiro xem cũng dễ hiểu lắm!”

Tôi không giấu nổi sự phấn khích.

“Dù mới chỉ là căn bản thôi.”

Anh ấy cười nhẹ, nhưng tim tôi thì vẫn còn đập nhanh.

“Nhưng đúng là… có thể xây dựng được cả một hệ thống quản lý sản phẩm cho Mizunoya nhỉ.”

“Đúng vậy. Frontend lo phần ‘hiển thị và thao tác’, backend lo phần ‘dữ liệu và xử lý’.”

Anh ấy giải thích rõ ràng vai trò của từng bên.

“Nest.js lúc nãy quản lý dữ liệu, còn Next.js thì trình bày nó sao cho đẹp.”

“Vì thế nên dù làm riêng, chúng vẫn kết nối được với nhau.”

Tôi thật sự cảm nhận được ưu điểm của thiết kế tách rời. Hai server chạy độc lập, nhưng khi kết hợp lại thì vận hành trơn tru như một hệ thống thống nhất.

Tôi lặng lẽ sắp xếp lại những gì mình học được hôm nay: frontend, backend, và sự kết nối giữa chúng. Những mảnh kiến thức rời rạc ban đầu, giờ đây dần ghép lại thành một bức tranh hoàn chỉnh.

“Mà Takuya-san học những thứ này ở đâu vậy ạ?”

“Đại học Tsukuba, khoa Khoa học Thông tin. Anh học từ nền tảng ở đó.” [note89579]

Đại học Tsukuba. Trước đây tôi đã nghe nhắc đến, nhưng khi trực tiếp chứng kiến kỹ năng của anh, tôi mới thật sự cảm nhận được sự đáng nể ấy.

“Ở Tsukuba, người ta học mấy thứ này sâu lắm hả anh?”

“Ừ. Từ nền tảng khoa học máy tính cho đến công nghệ mới nhất, tất cả đều được học một cách bài bản.”

Giọng anh ấy nghiêm túc.

Tôi lại suy nghĩ. Chỉ trong một ngày, tôi đã tự tay tạo backend, frontend, rồi kết nối chúng với nhau. Và tôi nhận ra, trong lòng mình đang nhen lên một niềm ngưỡng mộ mạnh mẽ dành cho Đại học Tsukuba – nơi đã nuôi dưỡng nên một kỹ sư như Takuya-san.

Nhưng… đó chỉ là sự ngưỡng mộ thoáng qua thôi sao?

Hay là, đâu đó trong tôi, đã bắt đầu hình thành một mục tiêu rõ ràng cho chính mình?

Như thể đã nhìn thấu những dao động trong lòng tôi, Takuya-san trầm ngâm một chút rồi tiếp lời.

“Nhân tiện thì, Kenta này, anh muốn nói với cậu một điều quan trọng về đại học.”

“Vâng.”

“Đại học không phải là phần kéo dài của cấp ba. Đó là một nơi hoàn toàn khác.”

Nghe lời anh, tôi bất giác thẳng lưng lên.

“Cho đến hết cấp ba, người ta học những thứ ‘đã được quốc gia quy định sẵn’. Nhưng đại học thì khác. Đó là nơi ta đến để học vì muốn hiện thực hóa điều mình thật sự muốn làm.”

“Điều mình muốn làm…”

“Đúng vậy. Bây giờ cậu đang muốn tạo ra một hệ thống cho Mizunoya, vì Chihiro-chan. Đó chính là ‘điều mình muốn làm’. Đại học nên được dùng như một nơi giúp cậu đạt được mục tiêu ấy một cách hiệu quả.”

Những lời của Takuya-san đã làm thay đổi hoàn toàn hình ảnh về đại học mà tôi vẫn mang trong đầu bấy lâu nay.

“Nếu chỉ coi đại học là sự nối dài của cấp ba, rồi ‘đi đại cho có’ thì thật sự rất lãng phí. Dù gì cũng là bốn năm cuộc đời, lại còn tốn không ít tiền bạc.”

“…Em hiểu rồi.”

“Vì thế, trường đại học mình sẽ theo học phải do chính mình suy nghĩ và tự mình quyết định.”

Takuya-san mỉm cười, có chút ngượng ngùng.

“Thật ra đây là lời anh nghe từ bố mình. ‘Người duy nhất có thể chịu trách nhiệm cho cuộc đời con, chỉ có chính con thôi’. Vì vậy, cả việc mình sẽ làm gì suốt đời cũng nên do bản thân quyết định.”

“Việc sẽ làm suốt đời…”

“Ừ. Khi chọn đại học, tốt nhất là hãy nghĩ đến cả cuộc sống sau đó nữa.”

Những lời ấy khắc sâu vào lòng tôi.

“Trong trường hợp của cậu, cậu đã có một mục tiêu khá rõ ràng rồi: ‘muốn trở thành người có thể tạo ra những hệ thống thật sự hữu ích cho Chihiro-chan và Mizunoya’. Nếu vậy, cậu nên tự mình chọn một trường có thể học về khoa học máy tính, và bước vào đó bằng chính ý chí của mình.”

Anh ấy ngừng lại một chút rồi nói thêm.

“Tất nhiên, không phải mọi thứ đều chỉ xoay quanh Mizunoya. Có thể trong tương lai, cậu sẽ muốn làm một điều gì đó khác. Bây giờ, có thể cậu đang nghĩ ‘Đại học Tsukuba thật tuyệt’ sau khi nghe anh nói. Nhưng anh muốn cậu suy nghĩ kỹ xem, đó là mong muốn thật sự của cậu, hay chỉ là vì bị lời anh ảnh hưởng.”

Bị nói trúng tim đen, tim tôi khẽ thắt lại.

“Dù là vì Mizunoya và Chihiro-chan, hay vì một mục tiêu nào khác, thì việc cậu sẽ làm gì vẫn nên do chính bản thân quyết định.”

“Vâng…”

“Khoa Thông tin của Đại học Tsukuba, nếu cậu đang hướng đến tương lai trở thành một web engineer, thì đúng là một môi trường không tệ. Nhưng kể cả vậy, người đưa ra quyết định cuối cùng vẫn phải là cậu.”

Không chỉ là mục tiêu nghề nghiệp dần trở nên rõ ràng hơn, mà cách tôi nhìn nhận việc học đại học cũng thay đổi tận gốc. Đó là một khoảnh khắc rất quan trọng đối với tôi.

Bố tôi đã không còn nữa. Nhưng nếu ông vẫn còn sống, có lẽ ông cũng sẽ nói với tôi những điều sâu sắc như thế này. Nghĩ vậy, trong lòng tôi dâng lên một nỗi buồn nhẹ, nhưng đồng thời cũng thầm cảm ơn Takuya-san từ tận đáy lòng.

—------------------------------------

Sau khi về nhà, tôi gọi điện kể lại mọi chuyện cho Chihiro.

“Hôm nay anh được Takuya-san nói cho nghe những điều rất quan trọng về đại học.”

“Về đại học sao? Anh ấy nói gì vậy?”

Giọng Chihiro đầy tò mò.

“Rằng đại học không phải là nơi mình đến một cách ‘mơ hồ’, như phần kéo dài của cấp ba. Mà là nơi mình đến để học, nhằm thực hiện điều bản thân thật sự muốn làm.”

“Ra vậy… đúng là như thế thật.”

“Nghe xong, anh cũng thử suy nghĩ lại. Rốt cuộc, điều anh thật sự muốn làm là gì.”

Chihiro im lặng một chút rồi đáp.

“Kenta-san lúc nào cũng nghĩ cho Mizunoya và lo liệu rất nhiều việc mà.”

“Ừm. Với anh hiện tại, làm những điều vì Mizunoya và vì Chihiro-san là việc rất quan trọng, lại còn rất vui nữa. Nhưng nếu hỏi nó có thể trở thành công việc gắn bó cả đời hay không, thì anh lại không chắc. Hôm nay, Takuya-san đã thẳng thắn chỉ ra điều đó.”

“Em hiểu rồi. Nghe anh nói, em cũng thấy mình cần phải suy nghĩ nghiêm túc hơn về tương lai. Trước giờ, em cũng nghĩ đại học chỉ là nơi ‘đương nhiên phải học tiếp’ thôi.”

Sự chân thành trong lời nói của Chihiro khiến tim tôi rung động.

“Hay là… mình cùng nhau suy nghĩ nhé? Về tương lai của cả hai.”

“Vâng, em rất mong được như vậy.”

Được cùng Chihiro nghĩ về tương lai, đối với tôi là một niềm hạnh phúc lớn.

Hôm nay, tôi đã trực tiếp trải nghiệm sự kết nối giữa frontend và backend. Lấy dữ liệu về, rồi hiển thị nó thành một giao diện đẹp. Chỉ cần nắm được cơ chế cơ bản này, tôi tin rằng mình có thể xây dựng được những hệ thống phức tạp hơn nữa.

Không chỉ vậy, Takuya-san còn cho tôi một kim chỉ nam quan trọng cho cuộc đời. Tôi muốn nghiêm túc đối diện với tương lai của chính mình.

Ít nhất là vào lúc này — vì Chihiro, vì Mizunoya, và vì tương lai của bản thân. Tôi muốn học sâu hơn nữa ở Đại học Tsukuba, để có thể tạo ra những hệ thống thật sự hữu ích. Và rồi, liệu con đường ấy có dẫn đến công việc gắn bó cả đời hay không?

Người duy nhất có thể chịu trách nhiệm cho cuộc đời mình, chỉ có chính mình.

Tôi phải tự quyết định.

Mang theo suy nghĩ mạnh mẽ ấy trong lòng, tôi lặng lẽ nhìn lại một ngày vừa trôi qua.

Hãy bình luận để ủng hộ người đăng nhé!