Lập trình Scratch (18) - Hệ thống menu

Bài trước: Lập trình Scratch (17) - Lồng tiếng cho nhân vật

-----

18. Hệ thống menu

Menu là danh sách các lựa chọn.

Ví dụ, khi bạn vào quán ăn, bạn sẽ thấy một danh sách các món ăn; bạn muốn ăn món gì thì chỉ việc chỉ tay (hoặc bấm, hoặc chạm) vào menu để lựa chọn.

Trong phần mềm, menu cũng có chức năng tương tự.

Menu là một tập hợp các nút bấm, biểu tượng hoặc chữ viết. Mỗi lựa chọn trong menu sẽ có một "nhiệm vụ" riêng, ví dụ:

- Nút Bắt đầu: Dẫn bạn vào màn hình chơi game

- Nút Cài đặt: Dẫn bạn đến chỗ chỉnh âm thanh, ánh sáng

- Nút Hướng dẫn: Dẫn bạn đến trang đọc luật chơi

Trong bài học này, chúng ta cùng trải nghiệm để tạo ra hệ thống menu.

Chúng ta cùng làm theo từng bước:

[Bước 1] Thêm 2 phông nền (backdrop)

- Phông nền 1: chọn hình khu rừng - Forest (hoặc tùy bạn chọn). Đặt tên phông nền là "Menu". Muốn đặt tên cho phông nền, thì bạn bấm vào mục Backdrops > điền tên vào mục Costume. 

Xem hình minh họa.

- Phông nền 2: chọn hình đồng cỏ - Savanna. Đặt tên là "TroChoi"

- Sau khi thêm 2 phông nền, chúng ta sẽ có tổng cộng là 3 phông nền, có tên lần lượt là backdrop1, Menu và TroChoi.

[Bước 2] Tạo 3 nhân vật (sprite)

- Nhân vật 1 là chú mèo, hoặc bạn có thể chọn nhân vật khác tùy thích

- Nhân vật 2: bạn bấm vào vùng chọn nhân vật (Choose a Sprite), gõ vào ô tìm kiếm là Button, chọn Button 2. 

Đổi tên nút này thành Play. 

Nhập chữ cho bề mặt nút là PLAY. 

Đổi màu chữ để nhìn cho rõ. 

Xem hình minh họa.

- Nhân vật 3: bạn bấm vào vùng chọn nhân vật (Choose a Sprite), gõ vào ô tìm kiếm là Home, chọn Home Button. 

Đổi tên nút này thành Home.

[Bước 3] Lập trình

Bạn lập trình từng bước, sau mỗi bước, chạy thử để xem kết quả có như mong đợi không, nếu không, hãy kiểm tra xem việc lập trình đã đúng chưa?

Lập trình cho nút Play

Chọn nút Play, lập trình theo hướng dẫn sau:

Scratch Blocks	Giải thích ý nghĩa
when green flag clicked	Bắt đầu thực hiện khi nhấn vào lá cờ xanh
switch backdrop to [Menu]	Hiển thị phông nền Menu
show	Hiển thị nút Play lên phông nền

Sau các bước ở trên, khi chạy chương trình, chúng ta đã có phông nền là Menu, trên phông nền có một nút Play. Chúng ta sẽ lập trình tiếp.

Lập trình cho phông nền và chuyển cảnh

- Bấm chuột vào mục Backdrops (khung phía dưới, bên phải màn hình)

- Chọn mục Code (phía trên, bên trái) để bắt đầu lập trình cho phông nền Menu

- Tạo biến music: vào mục Variables > bấm vào mục Make a Variable để tạo một biến mới, đặt tên là music

- Tiếp tục lập trình theo hướng dẫn trong bảng sau:

Scratch Blocks	Giải thích ý nghĩa
when backdrop switches to [Menu]	Kích hoạt chuỗi lệnh khi phông nền chuyển sang Menu
set [music] to [1]	Thiết lập giá trị biến "music" thành 1 để bắt đầu điều kiện cho việc phát nhạc
repeat until <(music) = [0]>	Vòng lặp liên tục thực hiện các lệnh bên trong cho đến khi biến "music" bị chuyển về giá trị 0
play sound [Bossa Nova] until done	Phát bản nhạc "Bossa Nova" và lặp lại từ đầu mỗi khi nhạc kết thúc (tạo nhạc nền). Trước đó, bạn phải vào mục Sound để tìm và nạp đoạn nhạc tên là Bossa Nova
Tạo thêm một khối lập trình mới (lưu ý: bạn vẫn đang lập trình cho Backdrops)
when backdrop switches to [TroChoi]	Kích hoạt chuỗi lệnh khi phông nền chuyển sang TroChoi
set [music] to [1]	Thiết lập giá trị biến "music" thành 1 để bắt đầu điều kiện cho việc phát nhạc
repeat until <(music) = [0]>	Vòng lặp liên tục thực hiện các lệnh bên trong cho đến khi biến "music" bị chuyển về giá trị 0
play sound [Video Game 1] until done	Phát bản nhạc "Video Game 1" liên tục, làm nhạc nền cho màn hình TroChoi. Trước đó, bạn phải vào mục Sound để tìm và nạp đoạn nhạc tên là Video Game 1
Tạo thêm một khối lập trình mới (lưu ý: bạn vẫn đang lập trình cho Backdrops)
when [space] key pressed	Bắt đầu thực hiện lệnh khi người dùng nhấn “phím cách” (Space) trên bàn phím
stop all sounds	Ngắt tất cả các bản nhạc đang phát
set [music] to [0]	Gán giá trị 0 cho biến "music" để thoát khỏi vòng lặp phát nhạc hiện tại
switch backdrop to [next backdrop]	Chuyển sang phông nền kế tiếp trong danh sách

Lập trình cho nút Play (tiếp)

Chọn nút Play, lập trình theo hướng dẫn sau:

Scratch Blocks	Giải thích ý nghĩa
when this sprite clicked	Kích hoạt các lệnh bên dưới khi người dùng bấm chuột vào nút Play
play sound [Pop] until done	Phát âm thanh "Pop" (tiếng bấm nút)
set [music] to [0]	Thiết lập giá trị của biến "music" bằng 0, để thoát khỏi vòng lặp phát nhạc hiện tại
stop all sounds	Tắt tất cả các âm thanh đang phát
broadcast [play]	Gửi đi một thông điệp tên là "play" để các nhân vật khác hoặc sân khấu nhận biết và hành động. Cách làm: bạn thêm khối lệnh “broadcast[message1]” > bấm chuột vào “message1” > chọn “new message” > nhập tên mới là “play”
hide	Làm nút Play biến mất khỏi màn hình sân khấu
Tạo thêm một khối lập trình mới (lưu ý: bạn vẫn đang lập trình cho nút Play)
when I receive [home]	Lệnh này sẽ chạy khi nhân vật (nút Play) nhận được thông điệp "home" từ một nơi khác gửi tới. Cách làm: bạn thêm khối lệnh “when I receive [play hoặc message1]” > bấm chuột vào “play hoặc message1” > chọn “new message” > nhập tên mới là “home”
wait [0.1] seconds	Tạm dừng chương trình trong một khoảng thời gian rất ngắn (0.1 giây)
switch backdrop to [Menu]	Chuyển sang phông nền Menu
show	Hiển thị nút Play lên phông nền

-----

Bài sau:

Robotics (1) - Chương trình đầu tiên

1. Chương trình đầu tiên

1.1 Cài đặt Robosim

Robosim là một nền tảng giả lập robot, giúp bạn học lập trình và tư duy logic cực kỳ hiệu quả mà không cần phải mua robot thật.

Trước khi cài đặt phần mềm, bạn cần kiểm tra xem cấu hình máy tính của bạn có đủ mạnh không?

Đây là cấu hình để máy có thể mở được phần mềm và chạy các bài tập đơn giản:

- Hệ điều hành: Windows 10 (64-bit)

- CPU: Intel Core i3 hoặc tương đương

- RAM: 4GB

- Card đồ họa (GPU): Intel HD Graphics 620 hoặc đời cao hơn

- Dung lượng ổ cứng trống: Khoảng 2GB - 5GB

- Có kết nối Internet để đăng nhập tài khoản và lưu tiến trình

Làm sao để kiểm tra được cấu hình máy tính?

- Mở cửa sổ Run, gõ lệnh dxdiag

Tải và cài đặt phần mềm Robosim

- Vào trang web sau để tải phần mềm:

https://robosim.stemtown.com/

- Sau khi tải về máy, thực hiện cài đặt như một chương trình thông thường.

- Sau khi cài đặt thành công, chạy phần mềm Robosim lần đầu, bạn cần tạo tài khoản trên hệ thống Robosim.

- Bấm vào Register để tạo tài khoản mới

- Sau khi đã có tài khoản, bạn đăng nhập vào phần mềm để sử dụng

- Để bắt đầu làm quen với Robosim, chúng ta cùng làm một bài tập đơn giản

1.2 Viết chương trình đầu tiên

Lập trình cho robot di chuyển theo 1 đường thẳng.

Các bước thực hiện:

- Từ giao diện của Robosim, bấm vào mục Training

- Chọn mục Teaching and training

- Chọn Blank space để tạo ra một bản đồ trống

Tạo robot

- Tạo một robot: trong mục Robot, chọn 1 robot mà bạn thích, ví dụ Explore Type I, robot sẽ xuất hiện trên màn hình chính (ở giữa)

Lập trình điều khiển robot

- Sau khi đã có robot, chúng ta sẽ chọn mục Programming để lập trình cho robot

- Sau khi bấm vào mục Programming, sẽ xuất hiện các khối lệnh lập trình. Bạn nào đã làm quen với lập trình Scratch sẽ thấy các khối lệnh này khá quen thuộc.

- Để lập trình, bạn sẽ kéo các khối lệnh từ cửa sổ bên trái ra khung cửa sổ chính (ở giữa)

- Thực hiện theo hướng dẫn ở bảng sau:

Robosim Blocks	Giải thích ý nghĩa
RCU [task1]	Khối sự kiện khởi đầu. Nó ra lệnh cho bộ điều khiển robot bắt đầu thực thi các lệnh nằm bên trong nhiệm vụ có tên là "task1"
move [forward] at speed [50] for [5] secs	Robot đi thẳng về phía trước với tốc độ 50% công suất động cơ trong khoảng thời gian 5 giây
stop moving	Ngắt điện vào động cơ, khiến robot dừng lại hoàn toàn ngay sau khi kết thúc 5 giây di chuyển

Kết quả sẽ được đoạn mã như sau:

Thực thi chương trình

- Sau khi lập trình xong, bạn bấm vào mục Simulation (nút thứ 3 từ trái sang - thanh công cụ phía trên màn hình)

- Bấm vào nút Start debugging để thực thi chương trình

- Sau khi chạy chương trình xong, bấm nút Stop debugging để dừng chương trình

Lưu lại bản thiết kế robot và mã nguồn

Để lưu lại bản thiết kế của robot, bạn chọn mục Build Robot > chọn Save the robot … > nhập tên (ví dụ Robot01 > bấm nút Save. Chương trình RoboSim sẽ lưu tập tin thiết kế robot với phần mở rộng là “.rsr” (ví dụ Robot01.rsr). Sau này, bạn có thể mở lại bản thiết kế robot này để sử dụng.

Để lưu lại mã nguồn, bạn chọn mục Programming > chọn Save the program … > nhập tên (ví dụ DiThang (đi thẳng) > bấm nút Save. Chương trình RoboSim sẽ lưu tập tin mã nguồn với phần mở rộng là “.rspx” (ví dụ DiThang.rspx). Sau này, bạn có thể mở lại tập tin mã nguồn này để sử dụng.

Chúc mừng bạn, vậy là bạn đã tạo được một robot, lập trình và chạy chương trình.

1.3 Bài tập và câu hỏi

Bài tập

Bài tập 1a. Cài đặt Robosim, tạo tài khoản trên hệ thống Robosim.

Bài tập 1b. Viết chương trình đầu tiên (làm theo hướng dẫn trong bài học)

Bài tập 1c. Viết chương trình cho robot đi lùi theo một đường thẳng

Bài tập 1d. Viết chương trình cho robot đi sang trái theo một đường thẳng

Bài tập 1e. Viết chương trình cho robot đi sang phải theo một đường thẳng

Câu hỏi

Câu 1.1: Sau khi đã thiết kế xong một mẫu robot, việc lưu tập tin dưới định dạng đuôi ".rsr" có ý nghĩa gì? 

A. Để robot có thể tự động chạy mà không cần lập trình

B. Để lưu lại mã nguồn (các khối lệnh) của robot

C. Để có thể mở lại và sử dụng đúng bản thiết kế robot đó cho các lần sau

D. Để xuất bản thiết kế robot lên trang web robosim.stemtown.com

Câu 1.2: Mục đích chính của khối lệnh RCU [task1] xuất hiện ở đầu mỗi chương trình trong Robosim là gì? 

A. Để robot bắt đầu di chuyển về phía trước với tốc độ 50%

B. Để xác định điểm bắt đầu và đặt tên cho nhiệm vụ mà robot sẽ thực hiện

C. Để kết nối robot với hệ thống internet và lưu tiến trình

D. Để dừng tất cả các hoạt động hiện tại của robot

Câu 1.3: Khi bạn muốn kiểm tra xem các khối lệnh mình vừa kéo thả có điều khiển robot chạy đúng như ý muốn hay không, bạn phải thực hiện quy trình nào? 

A. Vào mục Build Robot và chọn Save

B. Vào mục Programming và chọn Save the program

C. Vào mục Simulation và chọn Start debugging

D. Mở cửa sổ Run và gõ lệnh dxdiag

Học thuộc một số từ tiếng Anh và nghĩa của chúng

- RCU

- Build

- Programming

- Simulation

- Start

- Debugging

- Task

- Motor

- Move

- Stop

Mời bạn thực hiện các thử thách tiếp theo ở bài học sau.

-----

Bài sau:

Ebook2LateX (10) - Lập trình Web services

Bài trước: Ebook2LateX (9) - Web services

-----

10. Lập trình Web services

Tới bài học này, bạn đã thực hiện được các việc sau:

- Đã tạo môi trường ảo venv, cài đặt các thư viện cần thiết như FastAPI, Sqlalchemy, Alembic, và Python-dotenv

- Đã thiết lập kết nối với PostgreSQL, định nghĩa các bảng dữ liệu (Users, Documents, FormulaEntries, Logs) trong models.py và thực hiện migration để tạo bảng tự động

- Đã tạo tập tin main.py với mã nguồn "Hello World" và khởi chạy thành công Web server bằng Uvicorn

- Đã viết script seed.py để tự động nạp dữ liệu vào database

- Đã thực hiện commit các thay đổi và đẩy dự án lên GitHub

Trong phần này, chúng ta sẽ tìm hiểu một số nội dung sau:

- Hệ thống lại hoạt động của ứng dụng web trên nền tảng Python

- Lập trình minh họa để hiểu sâu về hoạt động của hệ thống

- Làm quen với việc tạo ra các services với kỹ thuật RESTful API

10.1 Mô hình client-server

Các ứng dụng web hoạt động dựa trên mô hình client-server.

Ý tưởng của mô hình client-server, đơn giản chỉ là: máy khách (client) gửi một yêu cầu (request) đến máy chủ (server), máy chủ sẽ xử lý và trả kết quả về cho máy khách.

Xem hình minh họa về mô hình client-server:

Mô hình client-server gồm một số thành phần:

- Client: khởi phát yêu cầu, gửi yêu cầu tới server, nhận kết quả từ server trả về. Client có thể là trình duyệt, ứng dụng viết bằng python/javascript hoặc bất kỳ ứng dụng nào mà có phát sinh ra HTTP request

- Server: có vai trò cung cấp dịch vụ, xử lý và trả về kết quả cho máy client

- Môi trường truyền thông tin: hạ tầng mạng (LAN, Internet), bao gồm cả phần cứng và phần mềm

- Giao thức truyền thông tin: các chuẩn công nghệ giúp giao tiếp và truyền thông tin giữa server-client. Ví dụ HTTP, HTTPS

Trong mô hình client-server, khi môi trường truyền đã được kết nối và sẵn sàng, thì client luôn là nơi khởi phát của ứng dụng. Client sẽ gửi một HTTP request tới server. Khi server nhận được request, nó sẽ xử lý và trả kết quả về cho client bằng một HTTP response

Client là thành phần chủ động. Server là thành phần bị động.

Chúng ta sẽ thấy cách hoạt động của một ứng dụng web rất khác so với cách hoạt động của chương trình trên máy cục bộ (ví dụ Microsoft Word). Trong Microsoft Word, mọi thao tác đều được thực hiện ngay trên máy người dùng, từ việc ra lệnh, xử lý và trả về kết quả. Cũng là chương trình xử lý văn bản, nhưng Google Docs là một ứng dụng hoạt động theo mô hình client-server. Nếu không có kết nối mạng thì Google Docs sẽ không hoạt động được.

Để hiểu rõ hơn về mô hình client-server, chúng ta sẽ cùng quan sát các bước của quá trình mở một ứng dụng web:

Do ứng dụng web hoạt động theo mô hình client-server, nên để có trang web trên trình duyệt, cần trải qua các bước sau:

Bước 1: Người dùng nhập địa chỉ trang web (URL) vào thanh địa chỉ. Ví dụ: http://example.com/hello.php

Bước 2: Trình duyệt dựa vào URL trong thanh địa chỉ, kết nối tới máy web server, gửi yêu cầu tới web server (ví dụ yêu cầu: gửi cho nội dung trang web hello.php)

Bước 3: Web server xử lý yêu cầu, gửi trả kết quả về cho trình duyệt (ví dụ nội dung trang web dưới dạng mã nguồn HTML, CSS và JavaScript)

Bước 4: Trình duyệt thực thi mã HTML, CSS, JavaScript và hiển thị trang web ra màn hình

Xem hình minh họa:

Chúng ta cùng thực hành, quan sát trình duyệt mở một ứng dụng web trên máy tính:

Bước 1. Mở trình duyệt web. Ví dụ Chrome

Bước 2. Nhập vào đường dẫn của trình duyệt địa chỉ một trang web, bấm Enter để trình duyệt lấy trang web từ máy server, và hiển thị nội dung ra màn hình. Ví dụ thanhnien.vn

Bước 3. Mở Developer tools của trình duyệt bằng một số cách sau:

- Bấm tổ hợp ba phím Ctrl+Shift+I

- hoặc bấm phím F12

- hoặc vào menu của trình duyệt tìm tới mục Developer tools

- hoặc bấm chuột phải vào trang web, chọn Inspect

Bước 4. Trong cửa sổ của Developer tools, bấm chuột vào mục Network

Bước 5. Quan sát sẽ thấy các tập tin HTML (thanhnien.vn), CSS (các tập tin có phần mở rộng là css), JavaScript (các tập tin có phần mở rộng là js) được server gửi về cho client

Bước 6. Bấm chuột vào các tập tin do server gửi về và quan sát nội dung của nó ở cửa sổ bên phải. Nhớ chọn mục Response

10.2 Hoạt động của ứng dụng web trên Python

Để trải nghiệm với ứng dụng web trên Python, chúng ta cùng thực hành và quan sát cách hệ thống này hoạt động.

Hình minh họa các thành phần của hệ thống:

Mô tả hoạt động của hệ thống:

- [Bước 1] Khởi chạy phần mềm Uvicorn, đây chính là phần mềm web server

- [Bước 2] Mở trình duyệt, gõ vào thanh địa chỉ: http://localhost:8000/ để gửi request tới Uvicorn, gửi tới cổng 8000, chuyển tới hàm get() của FastAPI.

- [Bước 3] Hàm get() của FastAPI sẽ xử lý yêu cầu từ client

- [Bước 4] FastAPI trả kết quả về cho trình duyệt

10.3 Bài tập và câu hỏi

Bài tập

Bài tập 10a. Hãy viết một chương trình đơn giản, để thực hiện việc sau:

- Mở trình duyệt, gửi một số qua thanh địa chỉ

- FastAPI nhận số từ trình duyệt, nhân với 10 rồi gửi trả lại cho trình duyệt

Bài tập 10b. Hãy viết một chương trình đơn giản, để thực hiện việc sau:

- Mở trình duyệt, gửi nhãn hiệu (brand) và kích thước (size) đôi giày bạn muốn mua (qua thanh địa chỉ), ví dụ hiệu Nike, kích thước 42

- FastAPI nhận brand và size từ trình duyệt, xử lý và trả về chuỗi: Bạn muốn mua giày [brand] kích thước [size] đúng không?

Câu hỏi

Câu 10.1 Trong mô hình client-server, thành phần nào đóng vai trò là nơi khởi phát yêu cầu (request)? 

A. Server 

B. Client 

C. Môi trường truyền tin 

D. Cơ sở dữ liệu

Câu 10.2 Đâu là các ví dụ về giao thức truyền thông tin dùng để kết nối giữa máy khách và máy chủ trong ứng dụng web? 

A. CPU và RAM 

B. LAN và Internet 

C. HTTP và HTTPS 

D. HTML và CSS

Câu 10.3 Phần mềm nào được sử dụng làm Web server chuẩn ASGI để chạy các ứng dụng FastAPI trong dự án web Python?

A. PostgreSQL 

B. React 

C. Uvicorn 

D. SQLAlchemy

Câu 10.4 Thứ tự các bước cơ bản để một ứng dụng web Python xử lý yêu cầu là gì? 

A. FastAPI trả kết quả -> Uvicorn nhận request -> Hàm xử lý thực thi

B. Khởi chạy Uvicorn -> Nhận request từ trình duyệt -> FastAPI xử lý -> Trả kết quả về trình duyệt

C. Mở trình duyệt -> FastAPI xử lý -> Khởi chạy Uvicorn -> Nhận kết quả

D. FastAPI nhận request trực tiếp từ trình duyệt -> Trả kết quả cho Uvicorn

Câu 10.5 Tại sao FastAPI được coi là một framework phù hợp cho các dịch vụ web hiện đại đòi hỏi hiệu suất cao? 

A. Vì nó chỉ chạy được trên hệ điều hành Windows

B. Vì nó hỗ trợ lập trình bất đồng bộ (async) mạnh mẽ và dựa trên nền tảng Starlette, Pydantic

C. Vì nó không cần cài đặt Python

D. Vì nó tự động kết nối với tất cả các loại cơ sở dữ liệu mà không cần cấu hình

Câu 10.6 Trong mã nguồn FastAPI, ký hiệu @app.get("/") (Decorator) có ý nghĩa gì? 

A. Khai báo một biến số nguyên cho ứng dụng

B. Định nghĩa một ghi chú (comment) không có giá trị thực thi

C. Điều hướng yêu cầu (routing) từ người dùng truy cập vào trang chủ (web root) để gọi hàm xử lý tương ứng

D. Dùng để cài đặt thư viện FastAPI vào máy tính

Câu 10.7 Khi đang phát triển ứng dụng, lệnh nào sau đây giúp bạn khởi chạy server sao cho mọi thay đổi trong mã nguồn main.py sẽ được tự động cập nhật ngay lập tức mà không cần khởi động lại thủ công? 

A. python main.py 

B. uvicorn main:app 

C. uvicorn main:app --reload 

D. pip install fastapi

Câu 10.8 Giả sử bạn có tập tin mã nguồn tên là api_service.py và biến khởi tạo ứng dụng là my_web_app = FastAPI(). Lệnh đúng để khởi chạy server này bằng Uvicorn là: 

A. uvicorn api_service:my_web_app 

B. uvicorn my_web_app:api_service 

C. python api_service.py 

D. run uvicorn api_service

-----

Bài sau: