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) |
|
|
|
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
-----