Web front-end (8) - HTML - Phần mềm lập trình web

Bài trước: Web front-end (7) - HTML - Bố cục một trang web

-------

1.1       Phần mềm lập trình web

1.1.1       Phân loại phần mềm lập trình

Như đã biết, trong quá trình tạo ra một ứng dụng web, chúng ta cần phải có công cụ để viết mã nguồn, dịch mã nguồn và chạy thử ứng dụng. Có những công cụ chỉ giúp bạn làm được một công việc, ví dụ chỉ để viết mã nguồn, hoặc chỉ để dịch mã nguồn, hoặc chỉ để chạy thử ứng dụng. Tuy nhiên, cũng có công cụ giúp bạn có thể làm được nhiều công việc, vừa viết mã, dịch mã nguồn và chạy thử ứng dụng.

Ví dụ, muốn làm một ứng dụng web (phía client), chúng ta cần notepad để viết mã nguồn, trình duyệt web để dịch và thực thi mã nguồn.

Có thể chia các phần mềm lập trình thành 4 loại:

– Phần mềm soạn thảo văn bản thô (text editor)

– Trình viết mã (code editor)

– Phần mềm phát triển tích hợp (IDE)

– Công cụ lập trình trực tuyến

Hình sau thể hiện tính tiện dụng của mỗi loại phần mềm lập trình, để ý, phần mềm càng tiện dụng thì dung lượng càng lớn.

Khi mới học làm web, bạn có thể lựa chọn các phần mềm viết mã đơn giản, để có thể dễ dàng hiểu được bản chất của các ngôn ngữ lập trình, quá trình thực thi mã nguồn, và nhanh nhớ các thẻ HTML, tên hàm, từ khóa. Tuy nhiên, khi làm việc, thì nên chọn phần mềm giúp thao tác nhanh, hiệu quả, phù hợp với ngôn ngữ lập trình và môi trường làm việc thực tế.

Phần mềm soạn thảo văn bản thô

Mã nguồn của các ứng dụng chỉ là văn bản thô hay văn bản thuần (plain text), do vậy có thể sử dụng bất kì trình soạn thảo nào cho phép tạo mới, nhập và lưu văn bản thô là có thể viết mã nguồn được.

Văn bản thô là văn bản không bao gồm thông tin định dạng (in đậm, màu sắc, gạch chân). Ví dụ, khi soạn thảo văn bản bằng Microsoft Word, nó đã tự động thêm vào các thông tin định dạng cho văn bản, vì vậy không thể dùng Microsoft Word để viết mã nguồn.

Text editor là trình soạn thảo văn bản thô, cho phép lập trình viên viết mã nguồn và lưu lại thành một tập tin. Ưu điểm của text editor là gọn, nhẹ, dễ sử dụng và thường có sẵn trong các hệ điều hành.

Ví dụ: Notepad, Notepad++, Vim

Trình viết mã

Trình viết mã (code editor) có chức năng cơ bản giống với một phần mềm soạn thảo văn bản thô. Tuy nhiên, nó cho phép người dùng tích hợp thêm các chức năng mở rộng, giúp việc soạn thảo, lập trình, lưu trữ, dịch mã nguồn được thuận tiện và linh hoạt hơn.

Các chức năng mở rộng của code editor so với text editor:

– Chức năng tô màu mã nguồn, giúp lập trình viên dễ dàng nhận ra các thành phần trong mã nguồn như từ khóa, tên biến, chuỗi, giá trị.

– Chức năng hỗ trợ gõ mã nguồn nhanh, tự động hoàn thành lệnh

– Chức năng kiểm tra lỗi cú pháp

– Tích hợp trình quản lý phiên bản (version control)

– Liên kết với chương trình dịch

– Các tính năng mở rộng khác

Ví dụ: VS code, Sublime Text, Atom

Phần mềm phát triển tích hợp

IDE (Integrated Development Environtment – môi trường phát triển tích hợp, hay phần mềm phát triển tích hợp) là phần mềm mạnh mẽ nhất dùng để lập trình, trong đó đã được tích hợp sẵn rất nhiều các thành phần liên quan đến quá trình phát triển phần mềm, từ viết mã, dịch mã, tìm và sửa lỗi, quản lý phiên bản, đóng gói.

Trong IDE đã được tích hợp sẵn các thành phần như text editor, code editor, debugger (trình sửa lỗi), trình dịch mã, máy ảo, trình quản lý phiên bản và nhiều công cụ khác.

IDE có nhiều loại, có loại phức tạp của các công ty lớn, cũng có loại đơn giản; có loại miễn phí, có loại phải trả phí. Tùy theo nhu cầu sử dụng để lựa chọn IDE cho phù hợp.

Ví dụ: Visual Studio, Eclipse, PHPStorm, Pycharm.

Chọn code editor hay IDE

Trong một số trường hợp, khi mới học lập trình (ví dụ học lập trình web front-end), bạn được khuyến khích sử dụng các phần mềm soạn mã nguồn đơn giản (text editor) để nhớ các thẻ HTML, các lệnh CSS. Tuy nhiên, để tăng tốc độ viết mã, nâng cao tính chuyên nghiệp thì bạn phải làm quen và sử dụng code editor hoặc IDE.

Việc lựa chọn giữa code editor hay IDE phụ thuộc vào thói quen, sở thích, yêu cầu của từng công việc, dự án, nhóm làm việc.

Code editor thường gọn nhẹ, miễn phí. Muốn sử dụng các chức năng mở rộng thì bạn phải tự thêm vào. Một code editor thường hỗ trợ cho nhiều ngôn ngữ lập trình khác nhau.

IDE thường có kích thước lớn, có bản miễn phí và có phí, các chức năng được được tích hợp sẵn, sử dụng thuận tiện, dễ dàng. Mỗi IDE thường hỗ trợ cho một hoặc một vài ngôn ngữ lập trình nhất định.

Bảng sau là một số phần mềm được dùng nhiều trong lập trình (theo khảo sát của stackoverflow):

Visual Studio Code (code editor)

Visual Studio (IDE)

Notepad++ (text/code editor)

IntelliJ (IDE)

Vim (text/code editor)

Android Studio (IDE)

Sublime Text (code editor)

PyCharm (IDE)

Eclipse (IDE)

Atom (code editor)

Ipython (IDE)

Xcode (IDE)

Webstorm (IDE)

PHPStorm (IDE)

Netbeans (IDE)

Emacs (text/code editor)

Notepad (text editor)

 

 

 

Công cụ lập trình trực tuyến

Ngoài các công cụ lập trình đã giới thiệu ở trên, bạn cũng có thể sử dụng môi trường lập trình trực tuyến trên Internet. Đó là các trang web, cho phép bạn nhập mã nguồn, dịch mã nguồn và xuất kết quả ngay trên môi trường web. Thực tế, trang web chỉ là nơi cho phép lập trình viên nhập mã nguồn, sau đó mã nguồn được gửi về server để dịch, thực thi và cuối cùng kết quả sẽ được hiển thị lại lên trang web.

Ưu điểm của môi trường lập trình trực tuyến là bạn không cần phải cài đặt, dễ dàng cộng tác, chia sẻ mã nguồn thuận lợi, miễn phí.

Tuy nhiên, môi trường lập trình trực tuyến cũng có một số bất lợi như bắt buộc phải có kết nối Internet khi lập trình. Tốc độ mạng không ổn định sẽ ảnh hưởng rất lớn đến hiệu quả lập trình. Môi trường lập trình do nhà cung cấp thiết lập sẵn, nên người học không có cơ hội để tìm hiểu chi tiết về cách hoạt động, sự phối hợp giữa các thành phần tham gia vào quá trình viết mã, dịch mã, chạy chương trình và xuất kết quả.

Môi trường lập trình trực tuyến thích hợp cho việc dạy và học lập trình, tìm hiểu về ngôn ngữ lập trình, chia sẻ mã nguồn; trao đổi và cộng tác trong lập trình.

Sau đây là một số trang web cung cho phép bạn lập trình trực tuyến:

https://replit.com/

https://codepen.io/

https://codesandbox.io/

http://codepad.org/

https://codeshare.io/

https://jsfiddle.net/

https://jsbin.com/?html,output

http://sqlfiddle.com/


Chatbot

Chatbot cũng có thể xem như một công cụ lập trình trực tuyến. Với khả năng tương tác linh hoạt và xử lý thông tin thông minh, chatbot đang dần trở thành người trợ lý đắc lực cho các lập trình viên, đặc biệt là những người mới bắt đầu.

Một số chatbot phổ biến gồm: ChatGPT của OpenAI, Gemini của Google, Copilot của Microsoft.

Ưu điểm của chatbot:

- Hỗ trợ học tập và tra cứu: chatbot cung cấp nguồn kiến thức lập trình khổng lồ thông qua các cuộc trò chuyện. Bạn có thể dễ dàng hỏi chatbot về bất kỳ khái niệm, cú pháp hay lỗi lập trình mà bạn gặp phải. Chatbot sẽ cung cấp các giải thích chi tiết, ví dụ minh họa, tài liệu tham khảo, giúp bạn nắm vững kiến thức và giải quyết vấn đề một cách hiệu quả.

- Tự động hóa các tác vụ đơn giản: chatbot có thể tự động hóa nhiều tác vụ lập trình đơn giản, giúp tiết kiệm thời gian và công sức cho lập trình viên. Ví dụ: chatbot có thể tự động tạo mã HTML cơ bản cho các cấu trúc trang web phổ biến, tự động tối ưu hóa mã HTML, hoặc tự động kiểm tra lỗi cú pháp. Nhờ vậy, lập trình viên có thể tập trung vào những phần việc phức tạp và sáng tạo hơn.

Tuy nhiên, chatbot vẫn còn một số hạn chế nhất định. Do khả năng xử lý ngôn ngữ tự nhiên còn hạn chế, chatbot đôi khi không hiểu rõ ý đồ của lập trình viên hoặc cung cấp thông tin không chính xác. Ngoài ra, chatbot cũng không thể thay thế hoàn toàn vai trò của lập trình viên trong việc sáng tạo và giải quyết vấn đề phức tạp.

Nhìn chung, chatbot là công cụ hỗ trợ đắc lực cho lập trình viên HTML, giúp họ học tập hiệu quả, tiết kiệm thời gian và nâng cao năng suất làm việc. Để phát huy tối đa tiềm năng của chatbot, lập trình viên cần sử dụng chatbot một cách thông minh và kết hợp với các phương pháp học tập và lập trình truyền thống.

Để sử dụng chatbot hiệu quả, bạn cần học về cách ra lệnh cho chatbot (prompt engineering).

1.1.2       Sử dụng phần mềm lập trình

Trong nghề lập trình, để chọn được phần mềm phù hợp, sử dụng hiệu quả, bạn cần phải biết các thông tin và kĩ năng cơ bản sau:

– Tính tương thích của phần mềm với các họ hệ điều hành (Windows, macOS, Linux)

– Phần mềm hỗ trợ làm việc với các ngôn ngữ lập trình nào

– Phần mềm miễn phí hay có phí

– Cách tải và cài đặt

– Sử dụng thuần thục các chức năng trên giao diện người dùng

– Cài đặt và chọn tông màu giao diện (theme) theo ý thích

– Thuần thục các thao tác với thư mục và tập tin

– Định dạng mã nguồn tự động

– Sử dụng gợi ý trong lúc viết mã (IntelliSense)

– Gõ bàn phím bằng 10 ngón tay

– Dịch và chạy mã nguồn

– Tìm, cài đặt và gỡ bỏ các chức năng mở rộng (extensions)

– Học các kỹ năng soạn thảo mã nguồn nhanh (ví dụ gõ tắt, tạo văn bản ngẫu nhiên, sử dụng đa con trỏ)

– Cách viết lệnh cho chatbot (prompt engineering)

1.1.3       Xem và đọc thêm

Sử dụng các từ khóa này, tìm kiếm trên Google hoặc Youtube để đọc và xem thêm: text editor, code editor, IDE, difference between code editor vs IDE

– Các phần mềm lập trình: https://insights.stackoverflow.com/survey/2021

– Sử dụng VS code [view]: https://www.youtube.com/watch?v=VqCgcpAypFQ

– Sử dụng VS code [read/view]: https://code.visualstudio.com/docs

– Trợ lý ảo: https://legiacong.blogspot.com/2024/04/ai-cho-giao-vien-1-tu-co-may-tim-kiem_2.html

1.1.4       Bài tập và thực hành

Bài tập 1. Sử dụng thuần thục một phần mềm lập trình (code editor hoặc IDE). Ví dụ VS code.

Tìm kiếm thông tin để trả lời các câu hỏi và thực hiện được các yêu cầu sau:

– Tính tương thích của phần mềm với các họ hệ điều hành (Windows, macOS, Linux)

– Phần mềm hỗ trợ làm việc với các ngôn ngữ lập trình nào

– Phần mềm miễn phí hay có phí

– Cách tải và cài đặt

– Sử dụng thuần thục các chức năng trên giao diện người dùng

– Cài đặt và chọn tông màu giao diện (theme) theo ý thích

– Thuần thục các thao tác với thư mục và tập tin

– Định dạng mã nguồn tự động

– Sử dụng gợi ý trong lúc viết mã (IntelliSense)

– Gõ bàn phím bằng 10 ngón tay

– Dịch và chạy mã nguồn

– Tìm, cài đặt và gỡ bỏ các chức năng mở rộng (extensions)

– Học các kỹ năng soạn thảo mã nguồn nhanh (ví dụ gõ tắt, tạo văn bản ngẫu nhiên, sử dụng đa con trỏ)

Bài tập 2. Gõ bàn phím bằng 10 ngón tay. Tốc độ tối thiểu 40 từ/phút (wpm – word per minute).

Bài tập 3. Viết 3 câu lệnh (prompt) yêu cầu chatbot hỗ trợ bạn trong việc học lập trình với HTML.

[Gợi ý làm bài tập]

Bài tập 1. Sử dụng thuần thục VS code.

Đọc thông tin tại trang chủ của phần mềm (https://code.visualstudio.com/docs), hoặc tìm kiếm trên google, youtube để thực hiện các yêu cầu.

– Dùng được trên cả ba họ hệ điều hành: Windows, macOS, Linux

– Làm việc được với hầu hết các ngôn ngữ lập trình, ví dụ: C++, C#, CSS, Dart, Dockerfile, F#, Go, HTML, Java, JavaScript, JSON, Julia, Less, Markdown, PHP, PowerShell, Python, SCSS, T-SQL, TypeScript,…v.v

– Miễn phí

– Tải và cài đặt: https://code.visualstudio.com/

– Sử dụng mục Explorer để mở, đóng thư mục, tập tin; tạo tập tin mới, lưu tập tin, nhận biết một tập tin đã lưu và chưa lưu.

– Sử dụng các chức năng trong menu

– Hiển thị thanh trạng thái: View\ Appearance\ Show Status Bar

– Trong thanh trạng thái, lựa chọn kiểu ngôn ngữ lập trình đang soạn thảo: Select Language Mode để nhập mã nguồn nhanh hơn

– Sử dụng Extensions để cài đặt và gỡ bỏ các thành phần mở rộng: ví dụ cài đặt extension Lorem

– Cài đặt và chọn tông màu giao diện (theme) theo ý thích: File > Preferences > Color Theme

– Định dạng mã nguồn tự động: Shift+Alt+F để định dạng các tập tin đang mở, Ctrl+K Ctrl+F để định dạng vùng đang chọn

– Sử dụng gợi ý trong lúc viết mã (IntelliSense): IntelliSense là sự kết hợp của code auto-complete và trí tuệ nhân tạo, nó đưa ra các gợi ý và các mô tả ngắn khi lập trình viên viết mã. Bạn có thể rê con trỏ chuột lên các từ khóa, các thành phần để xem thêm thông tin.

– Dịch và chạy mã nguồn: mục Run

– Học các kỹ năng soạn thảo mã nguồn nhanh (ví dụ gõ tắt, tạo văn bản ngẫu nhiên, sử dụng đa con trỏ): ví dụ: ul > li *3, div.mau-xanh, lorem6, Alt + chuột để tạo đa con trỏ https://code.visualstudio.com/Docs/languages/html

Bài tập 2.

– Nếu bạn chưa biết kĩ thuật gõ 10 ngón tay thì vào youtube để học.

– Vào trang này để luyện tập: https://www.typingstudy.com/

– Vào trang này để kiểm tra tốc độ gõ: https://monkeytype.com/

Bài tập 3. Viết 3 câu lệnh (prompt) yêu cầu chatbot hỗ trợ bạn trong việc học lập trình với HTML.

Ví dụ:

Là một lập trình front-end chuyên nghiệp. hãy viết menu cho trang web, sử dụng HTML. Menu gồm các mục HTML, CSS, JavaScript, Python.

1.1.4       Câu hỏi ôn tập

Câu hỏi 1. Các loại phần mềm dùng để viết mã trong làm web gồm?

A. Text editor, Microsoft Word, IDE, Web browser

B. Text editor, Code editor, Web browser, Acrobat

C. Mspaint, Web browser, Code editor, IDE

D. Web browser, Text editor, Code editor, IDE

Câu hỏi 2. Phát biểu nào sau đây là đúng?

A. IDE thường có dung lượng lớn hơn code editor

B. Không thể dịch mã chương trình bằng IDE

C. Tất cả IDE đều là phần mềm có phí

D. VS code là một IDE

Câu hỏi 3. ______ is the software that is designed specifically to help developers in coding. These are actually the text editors with some additional functionalities to manage and edit code.

A. Debugger

B. Text editor

C. Code editor

D. IDE

Câu hỏi 4. _____is a software application that provides comprehensive facilities to computer programmers for software development. An _____ normally consists of at least a source code editor, build automation tools and a debugger.

A. IDE

B. Code editor

C. Debugger

D. Compiler

Câu hỏi 5. Trong các phần mềm lập trình, IntelliSense là gì?

A. Là thành phần bổ sung của công ty Intell

B. Là thành phần dịch mã lệnh

C. Là chương trình gỡ lỗi

D. Là thành phần đưa ra các mô tả ngắn hoặc gợi ý khi viết mã nguồn

Đáp án: 1(D), 2(A), 3(C), 4(A), 5(D)

---------

Slide

Video

-----

Cập nhật: 3/5/2024
-----

Tải tài liệu đầy đủ: Tự học HTML căn bản