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. Thậm chí có công cụ còn có khả năng tự động viết mã.
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 nhiều 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
– Các công cụ sinh mã tự động (dựa trên AI, dựa trên mô hình)
Xem hình minh họa.
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/ |
Công cụ sinh mã tự động là những phần mềm, công cụ hoặc kỹ thuật cho phép tự động tạo ra mã nguồn. Thay vì bạn phải viết từng dòng mã, các công cụ này dựa trên một số thông tin đầu vào như thông tin cấu hình, mô hình thiết kế, lược đồ cơ sở dữ liệu hoặc các mô tả bằng ngôn ngữ tự nhiên để tạo ra mã nguồn.
Một số công cụ sinh
mã tự động:
- Các framework (ví
dụ Ruby on Rails, Laravel, Express.js)
- Các ORM
- Các công cụ có
tích hợp AI (ChatGPT, Gemini, Cursor, Github Copilot)
Bạn cần học cách viết
yêu cầu (prompt, rule), để có thể ra lệnh cho các công cụ sinh mã.
Lưu ý: ở giai đoạn
học làm ứng dụng, bạn chỉ nên sử dụng các công cụ sinh mã tự động như là một
công cụ hỗ trợ quá trình học. Bạn vẫn phải tự học để hiểu các khái niệm, ý
nghĩa từng dòng mã; tự làm thực hành thật nhiều để nhớ, hiểu và thuần thục các
kỹ năng lập trình.
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 các yêu cầu (prompt, rule) cho các công cụ sinh
mã tự động
1.1.3 Xem và đọc thêm
Sử dụng các từ khóa này, tìm kiếm trên chatbot, 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 yêu cầu (prompt) để 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 yêu cầu (prompt) để 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.5 Câu hỏi ôn tập
Câu 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 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 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 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 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
-----
