HarmonyOS Code Lab: Step-by-Step Algorithm Visualization with Playback Control

The article concludes the "HarmonyOS Meta Service 7-Day Tour" with a deep dive into the "Code Lab" meta service, an educational tool that visualizes algorithms and data structures through interactive, controllable playback.

01 Pause at a Single Comparison

The Algorithms module offers bubble sort, quick sort, and merge sort, all starting from the same fixed teaching dataset. The visualization uses color coding: amber for elements being compared, pink for swaps, and green for sorted completion. Playback speed can be set to 0.5×, 1×, 2×, or 4×. Pressing "Next Step" advances one operation while the code panel highlights the corresponding core statement in Python or Java (the actual execution is driven by ArkTS, not by running Python/Java in the meta service). Pressing "Replay" restarts from the beginning.

02 Linked List Requires True State Rollback

The Data Structures module covers arrays, linked lists, binary trees, and graphs. The linked list demo traverses 10→20→30→40→50, inserts 25, then deletes 50. Crucially, pressing "Previous Step" after deletion restores node 50 by rebuilding the entire state from the initial data and replaying operations up to the previous step, rather than merely decrementing a progress counter. Binary trees display pre-order visit order; graphs show breadth-first traversal. Node values, connecting lines, and visit numbers update together, making the current position unambiguous.

03 Class Relationships in Design Patterns

The Design Patterns module presents Singleton, Observer, and Factory patterns as interactive class diagrams. Clicking a class card reveals its role and relationships. For Observer, the visualization shows who maintains the subscription list and how notifications propagate to subscribers. Side-by-side Python and Java snippets illustrate the core syntax; running the examples independently would require adding helper types and entry points.

04 Why Visualization, Progress, and Code Highlighting Stay in Sync

Generate steps first, then decide which step to show. AlgorithmData records each operation (compare, swap, insert, delete, access) with involved positions, resulting values, and a description. Each sorting algorithm produces its own step sequence. PlaybackModel maintains a cursor indicating how many steps have been executed. Play, pause, step forward, and step backward all manipulate this cursor.

On rollback, rebuild current state from initial data. When the cursor moves to a specific step, the model takes the initial dataset and re-executes all prior operations. Consequently, values revert to pre-swap state, deleted linked list nodes reappear, and visit orders and colors are recalculated identically. Simply decrementing a counter would leave the visual representation stuck at a later step.

Visualization and code highlighting read the same playback state. AlgorithmStage renders nodes, bars, and canvas lines, while the code panel displays the core statement for the current step. Both components share the cursor and model, so pausing stops both animation and code highlighting simultaneously. Node values, colors, and visit numbers participate in observable state updates: after the code computes new values, the UI must actually render them, not just advance a progress bar.

Switching modules stops the previous timer and resets to the new module's start. When the app goes to the background, the current module, step, and speed are retained but playback pauses; returning while the process is alive requires pressing "Play" to resume. A full process restart returns to the default array view.

05 Adding Inorder Traversal to the Binary Tree

As an extension exercise, the article suggests adding an "Inorder Traversal" option. This involves defining a new step sequence and the expected visit order, then reusing the existing PlaybackModel. The new module must be tested for pause, previous step, reset, and code highlighting to ensure it adheres to the established control scheme.

The project also provides 2×2 and 4×4 desktop card entry points. Whether these can be added and whether tapping them requires a system account depends on the device's desktop meta service capabilities; the meta service itself has no login flow and does not call an online question bank.

Seven Days Done — Pick One to Continue

The series covered airport navigation, friend gathering roulette, cinema seat selection, the Four Seasons collection, pixel drawing board, smart home console, and finally the Code Lab that breaks execution into verifiable steps. For practical life tools, the author recommends starting from airport navigation, adventure roulette, cinema seats, or Four Seasons. For drawing and visualization, continue with the pixel board, smart home, or Code Lab. The advice: start small, pick a scenario you'll reuse, change one rule, run it on a device, then iterate.

Source Code and Practice Steps

A QR code links to the Code Lab source code and practice instructions. Clicking "Read Original" leads to the HarmonyOS Development Practice Center, where an online development platform and AI-guided steps for each case serve as entry points for further hands-on work.