Visualisering av referenser i Python – Utvecklandet av LearnyPy, en webbapplikation för att främja undervisningen av programmering
Abstract
Att förstå hur variabler och objekt relaterar till varandra kan vara svårt för nybörjare
inom programmering. Behovet av utbildade programmerare växer och effektiva redskap
för att undervisa programmering är därför önskvärt. Syftet med detta projekt
är att tillhandahålla ett redskap som förenklar processen att undervisa referenser i
Python till nya programmerare. Den tänkta målgruppen för verktyget är både de
nya inom programmering och de som lär ut det. Verktyget ska kunna hantera indata,
i form av Pythonkod, från användare och illustrera hur varje kodrad påverkar
referenserna. Avsikten med denna illustration är att bidra till en bättre förståelse
för resultaten från exekvering av koden.
Den resulterande produkten, LearnyPy, är en webbplats som innehåller en kodeditor
där användaren kan mata in Pythonkod de vill visualisera. LearnyPy har också ett
menyfält som låter användaren exekvera hela koden i ett svep eller i steg. Exekveringen
av koden hanteras av Skulpt, en webbaserad implementering av Python. För varje
exekvering visualiseras det aktuella tillståndet med en graf, hanterat av biblioteket
d3-graphviz. Grafen innehåller alla variabler och objekt som noder och referenser
som riktade kanter. En terminal finns också för att visa utdata och eventuella felmeddelanden.
Då LearnyPy är implementerat som en webbplats är den tillgänglig
för allmänheten. Användargränssnittet för webbplatsen är byggt med JavaScriptbiblioteket
React. Projektet har genomförts med intentionen att stödja ytterligare
utveckling av kodbasen. Resultatet visar är att projektet till stor del uppfyller syftet.
Det finns utvecklingspotential och förslag till vidare arbete för att förbättra
användarupplevelsen.
Degree
Student essay
Other description
Understanding how variables and objects are connected can be difficult for novice
programmers. The need for educated programmers is growing and effective tools to
teach programming are therefore desirable. This project aims to provide a tool to
simplify the procedure of teaching references in Python to new programmers. The
target group for using the tool is both those new to programming and those teaching
it. The tool should be able to handle user input containing Python code and
illustrate how each line of code affects the references. The intention with this illustration
is to contribute to a better understanding of the results from executing the code.
The resulting product, LearnyPy, is a website containing a code editor where the
user can enter Python code they want to visualize. LearnyPy also has a toolbar that
allows the user to execute the whole code all at once or in steps. The execution of
the code is handled by Skulpt, an in-browser implementation of Python. For each
execution the current state is visualized by a graph, using the library d3-graphviz.
The graph contains all variables and objects as nodes and the references are shown
as directed edges. A terminal is also provided to show output and possible error
messages. Because LearnyPy is implemented as a website it is accessible to the public.
The user interface of the website is built using the JavaScript library React.
The project is conducted with the intention to support further work on the codebase.
The result shows that the project meets the purpose to a large extent. There
is opportunity for improvement and further work is encouraged regarding the user
experience.
Collections
View/ Open
Date
2023-03-03Author
Berglund, Moa
Hassellöf, Saga
Johansson, Simon
Phu, Alex
Svensson, Vera
Wang, Yenan
Keywords
Undervisning
Python
Skulpt
referens
programmering
webbapplikation
graf
visualisering
Language
swe