CN113485714A - 数据处理方法、装置、计算机设备以及存储介质 - Google Patents

数据处理方法、装置、计算机设备以及存储介质 Download PDF

Info

Publication number
CN113485714A
CN113485714A CN202110844636.4A CN202110844636A CN113485714A CN 113485714 A CN113485714 A CN 113485714A CN 202110844636 A CN202110844636 A CN 202110844636A CN 113485714 A CN113485714 A CN 113485714A
Authority
CN
China
Prior art keywords
code
area
unit area
segmentation
programming
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202110844636.4A
Other languages
English (en)
Other versions
CN113485714B (zh
Inventor
詹晋楠
刘俊
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Tencent Technology Shenzhen Co Ltd
Original Assignee
Tencent Technology Shenzhen Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Tencent Technology Shenzhen Co Ltd filed Critical Tencent Technology Shenzhen Co Ltd
Priority to CN202110844636.4A priority Critical patent/CN113485714B/zh
Publication of CN113485714A publication Critical patent/CN113485714A/zh
Application granted granted Critical
Publication of CN113485714B publication Critical patent/CN113485714B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/40Transformation of program code
    • G06F8/41Compilation
    • GPHYSICS
    • G09EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09BEDUCATIONAL OR DEMONSTRATION APPLIANCES; APPLIANCES FOR TEACHING, OR COMMUNICATING WITH, THE BLIND, DEAF OR MUTE; MODELS; PLANETARIA; GLOBES; MAPS; DIAGRAMS
    • G09B19/00Teaching not covered by other main groups of this subclass
    • G09B19/0053Computers, e.g. programming

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Business, Economics & Management (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Computer Hardware Design (AREA)
  • Software Systems (AREA)
  • Entrepreneurship & Innovation (AREA)
  • Educational Administration (AREA)
  • Educational Technology (AREA)
  • Management, Administration, Business Operations System, And Electronic Commerce (AREA)
  • Stored Programmes (AREA)

Abstract

本申请实施例公开一种数据处理方法、装置、计算机设备以及存储介质,在编程教学页面中显示N个单元区域;N个单元区域包括代码输入子区域和结果展示子区域,代码输入子区域用于输入分段代码,N为正整数;响应针对N个单元区域中的第i个单元区域所包含的分段代码的运行操作,在第i个单元区域的结果展示子区域中,输出第i个单元区域中的分段代码所对应的分段运行结果,i为小于或等于N的正整数。采用本申请实施例,可以提高编程教学效率。

Description

数据处理方法、装置、计算机设备以及存储介质
技术领域
本申请涉及互联网技术领域,尤其涉及一种数据处理方法、装置、计算机设备以及存储介质。
背景技术
随着人工智能技术的发展,立足于编程工具的编程教育逐渐火爆。现有的编程教育场景中,教师可以启动编程工具,在该编辑工具页面中教学代码编写过程,以实现教学目标。在教学代码编写过程中,教师往往需要对编写的代码进行编译调试,由于现有的编码工具仅支持运行整个脚本文件,当教师想要分步骤讲解知识点时,需要新建多个代码文件,才能将原有的整个代码文件进行拆分,即每次教学代码编写都需要为同一个脚本文件新建多个代码文件,导致教学效率低下。
发明内容
本申请实施例提供一种数据处理方法、装置、计算机设备以及存储介质,可以提高编程教学效率。
本申请实施例一方面提供了一种数据处理方法,该方法包括:
在编程教学页面中显示N个单元区域;N个单元区域包括代码输入子区域和结果展示子区域,代码输入子区域用于输入分段代码,N为正整数;
响应针对N个单元区域中的第i个单元区域所包含的分段代码的运行操作,在第i个单元区域的结果展示子区域中,输出第i个单元区域中的分段代码所对应的分段运行结果;i为小于或等于N的正整数。
本申请实施例一方面提供了一种数据处理方法,该方法包括:
接收用户终端发送的代码运行消息,运行代码运行消息所包含的第i个单元区域中的分段代码,生成第i个单元区域中的分段代码所对应的分段运行结果;第i个单元区域属于编程教学页面中的N个单元区域,N个单元区域包括代码输入子区域和结果展示子区域,代码输入子区域用于输入分段代码,i和N均为正整数,且i小于或等于N;
将第i个单元区域中的分段代码所对应的分段运行结果返回至用户终端,以使用户终端在第i个单元区域的结果展示子区域中,输出第i个单元区域中的分段代码所对应的分段运行结果。
本申请实施例一方面提供了一种数据处理装置,该装置包括:
区域显示模块,用于在编程教学页面中显示N个单元区域;N个单元区域包括代码输入子区域和结果展示子区域,代码输入子区域用于输入分段代码,N为正整数;
结果输出模块,用于响应针对N个单元区域中的第i个单元区域所包含的分段代码的运行操作,在第i个单元区域的结果展示子区域中,输出第i个单元区域中的分段代码所对应的分段运行结果;i为小于或等于N的正整数。
其中,该装置还包括:
多媒体输入模块,用于响应针对第i个单元区域的多媒体输入操作,在第i个单元区域中显示多媒体输入操作所确定的第一多媒体数据;第一多媒体数据用于描述第i个单元区域中的分段代码的功能。
其中,区域显示模块包括:
编程工具显示单元,用于显示一个或多个编程工具;
编程工具选取单元,用于响应针对一个或多个编程工具的选取操作,将选取操作所触发的编程工具确定为目标编程工具,显示目标编程工具对应的编程主页面;编程主页面包括教学模式入口;
单元区域创建单元,用于响应针对教学模式入口的触发操作,显示目标编程工具对应的编码教学页面,在编码教学页面中创建N个单元区域;
代码编辑单元,用于响应针对N个单元区域的代码编辑操作,分别在N个单元区域中显示代码编辑操作所输入的分段代码。
其中,编程教学页面还包括区域模式切换控件;
该装置还包括:
模式切换模块,用于当编码教学页面对应的区域模式为代码区域模式时,响应针对区域模式切换控件的触发操作,将编程教学页面中的代码区域模式切换为多媒体区域模式;
多媒体添加模块,用于获取与N个单元区域相关联的教学多媒体数据,根据N个单元区域中的分段代码所包含的关键信息,对教学多媒体数据进行拆分,得到N个单元区域分别关联的第二多媒体数据,在N个单元区域中分别显示所关联的第二多媒体数据;第二多媒体数据用于描述N个单元区域中的分段代码的功能。
其中,结果输出模块包括:
分段代码发送单元,用于响应针对N个单元区域中的第i个单元区域所包含的分段代码的运行操作,将第i个单元区域中的分段代码发送至服务器,以使服务器运行第i个单元区域中的分段代码,生成第i个单元区域中的分段代码所对应的分段运行结果;
结果分类展示单元,用于接收服务器返回的针对第i个单元区域的分段运行结果,根据第i个单元区域所对应的分段运行结果的结果类型,在第i个单元区域的结果展示子区域中,对第i个单元区域对应的分段运行结果进行分类展示。
其中,结果输出模块还用于:
响应针对N个单元区域中所包含的分段代码的运行操作,按照N个单元区域中所包含的分段代码之间的代码逻辑,依次获取N个单元区域中的分段代码所对应的分段运行结果,在每个单元区域的结果展示子区域中,分别输出所包含分段代码的分段运行结果。
其中,该装置还包括:
单元区域删除模块,用于响应针对第i个单元区域的删除操作,删除编程教学页面中的第i个单元区域,调整编程教学页面中剩余的(N-1)个单元区域的显示位置;(N-1)个单元区域是指N个单元区域中除第i个单元区域之外的单元区域。
其中,该装置还包括:
单元区域新增模块,用于响应编程教学页面中的区域新增操作,在编程教学页面中创建新增单元区域;
新增区域编辑模块,用于响应针对新增单元区域的区域编辑操作,在新增单元区域中显示区域编辑操作所输入的新增代码和第三多媒体数据;第三多媒体数据用于描述新增代码的功能。
其中,编码教学页面还包括代码调试区域;
该装置还包括:
分段代码编译模块,用于当第i个单元区域中的分段代码运行错误时,生成第i个单元区域中的分段代码所对应的编译错误信息,在代码调试区域显示编译错误信息;编译错误信息用于指示用户对第i个单元区域中的分段代码进行修改。
其中,该装置还包括:
代码修改模块,用于响应针对第i个单元区域中的分段代码的修改操作,将第i个单元区域中的分段代码更新为目标分段代码;
运行结果更新模块,用于响应针对目标分段代码的运行操作,获取目标分段代码对应的目标运行结果,在编程教学页面中,将第i个单元区域对应的分段运行结果更新显示为目标运行结果。
其中,该装置还包括:
参数视图显示模块,用于当第i个单元区域的分段代码中包含目标算法参数时,在第i个单元区域中显示目标算法参数对应的参数调整视图,在参数调整视图中显示目标算法参数的第一数值;
参数调整模块,用于响应针对参数调整视图的调整操作,将参数调整视图中的第一数值切换显示为调整操作所确定的第二数值,将第i个单元区域的分段代码中的目标算法参数更新为第二数值。
其中,第一多媒体数据包括视频数据;
该装置还包括:
视频播放模块,用于响应针对视频数据的播放操作,在编程教学页面中播放视频数据。
其中,第一多媒体数据包括页面链接;
该装置还包括:
链接跳转模块,用于响应针对页面链接的触发操作,从编程教学页面切换显示至页面链接对应的页面资源数据。
本申请实施例一方面提供了一种数据处理装置,包括:
消息接收模块,用于接收用户终端发送的代码运行消息,运行代码运行消息所包含的第i个单元区域中的分段代码,生成第i个单元区域中的分段代码所对应的分段运行结果;第i个单元区域属于编程教学页面中的N个单元区域,N个单元区域包括代码输入子区域和结果展示子区域,代码输入子区域用于输入分段代码,i和N均为正整数,且i小于或等于N;
结果发送模块,用于将第i个单元区域中的分段代码所对应的分段运行结果返回至用户终端,以使用户终端在第i个单元区域的结果展示子区域中,输出第i个单元区域中的分段代码所对应的分段运行结果。
其中,消息接收模块包括:
代码运行单元,用于接收用户终端发送的代码运行消息,运行代码运行消息所包含的分段代码,生成代码运行消息对应的代码运行结果;
单元区域确定单元,用于获取代码运行消息所携带的全局标识符,确定与全局标识符相关联的第i个单元区域,将代码运行结果确定为第i个单元区域中的分段代码所对应的分段运行结果。
其中,该装置还包括:
标识符设置模块,用于创建第i个单元区域对应的显示配置对象,构建与显示配置对象相关联的第一通讯程序接口,为第一通讯程序接口设置全局标识符;
标识符传输模块,用于将全局标识符传输至用户终端,以使用户终端创建携带全局标识符的第二通讯程序接口;第二通讯程序接口用于链接至编程教学页面中的第i个单元区域。
本申请实施例一方面提供了一种计算机设备,包括存储器和处理器,存储器与处理器相连,存储器用于存储计算机程序,处理器用于调用计算机程序,以使得该计算机设备执行本申请实施例中上述一方面提供的方法。
本申请实施例一方面提供了一种计算机可读存储介质,计算机可读存储介质中存储有计算机程序,计算机程序适于由处理器加载并执行,以使得具有处理器的计算机设备执行本申请实施例中上述一方面提供的方法。
根据本申请的一个方面,提供了一种计算机程序产品或计算机程序,该计算机程序产品或计算机程序包括计算机指令,该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令,处理器执行该计算机指令,使得该计算机设备执行上述一方面提供的方法。
本申请实施例可以通过在编程教学页面中显示N个单元区域,每个单元区域均包括结果展示子区域,每个单元区域分别包含不同的分段代码,其中N为正整数;通过对N个单元区域中的独立单元区域所包含的分段代码执行运行操作,可以运行独立单元区域中的分段代码,以输出单个单元区域中的分段代码所对应的分段运行结果。可见,可以在同一个编程教学页面的N个单元区域分步骤编写代码,通过对N个单元区域中的分段代码进行单独运行,可以逐步了解每个分段代码所对应的知识点,从而可以提升编程教学效率。
附图说明
为了更清楚地说明本申请实施例或现有技术中的技术方法,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本申请的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1是本申请实施例提供的一种网络架构的结构示意图;
图2是本申请实施例提供的一种编程教学场景示意图;
图3是本申请实施例提供的一种数据处理方法的流程示意图;
图4是本申请实施例提供的一种目标编程工具中的教学模式的界面示意图;
图5是本申请实施例提供的一种目标编程工具中的教学模式的界面示意图;
图6是本申请实施例提供的一种目标编程工具中的教学模式的操作界面示意图;
图7是本申请实施例提供的一种参数调整视图的调整示意图;
图8是本申请实施例提供的一种单元区域中的代码执行流程示意图;
图9是本申请实施例提供的一种数据处理方法的流程示意图;
图10是本申请实施例提供的一种单元区域中的分段代码的运行流程图;
图11是本申请实施例提供的一种创建显示配置对象的流程示意图;
图12是本申请实施例提供的一种显示配置对象的状态同步流程图;
图13是本申请实施例提供的一种交互通信流程图;
图14是本申请实施例提供的一种数据处理装置的结构示意图;
图15是本申请实施例提供的一种数据处理装置的结构示意图;
图16是本申请实施例提供的一种计算机设备的结构示意图。
具体实施方式
下面将结合本申请实施例中的附图,对本申请实施例中的技术方法进行清楚、完整地描述,显然,所描述的实施例仅仅是本申请一部分实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本申请保护的范围。
本申请涉及几下几个概念:
图形化编程:将编程语言封装在图形化积木中,拖动积木块进行搭建即可完成编程,一般应用于青少年或初学者群体的编程学习。
集成开发环境(Integrated Development Environment,IDE):IDE可以是指用于提供程序开发环境的应用程序,一般包括代码编辑器、编译器、调试器和图形用户界面等工具。
集成开发和学习环境(Integrated Development and Learning Environment,IDLE):IDLE是开发Python(一种解释型、面向对象、动态数据类型的高级程序设计语言)程序的基本IDE(集成开发环境),该IDLE可以具备基本的IDE的功能,可以是非商业Python开发的选择。当终端设备中安装好Python以后,IDLE就会自动安装。
Jupyter(一个交互式笔记本):Jupyter可以是基于网页的用于交互计算的应用程序,可以支持运行40多种编程语言。其本质是一个网页应用程序,便于创建和共享文学化程序文档,支持实时代码,数学方程,可视化和Markdown(一种轻量级标记语言,排版语法简洁)。Jupyter的用途可以包括数据清理和转换,数值模拟,统计建模,机器学习等。
脚本:脚本是使用一种特定的描述性语言,依据一定的格式编写的可执行文件,纯文本保存。
请参见图1,图1是本申请实施例提供的一种网络架构的结构示意图。如图1所示,网络架构可以包括服务器10d和用户终端集群,用户终端集群可以包括一个或者多个用户终端,这里将不对用户终端的数量进行限制。如图1所示,多个用户终端具体可以包括用户终端10a、用户终端10b以及用户终端10c等;如图1所示,用户终端10a、用户终端10b以及用户终端10c可以分别与服务器10d进行网络连接,以便于每个用户终端可以通过该网络连接与服务器10d之间进行数据交互。
其中,服务器10d可以是独立的物理服务器,也可以是多个物理服务器构成的服务器集群或者分布式系统,还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN、以及大数据和人工智能平台等基础云计算服务的云服务器。
其中,用户终端10a、用户终端10b以及用户终端10c均可以包括:智能手机、平板电脑、笔记本电脑、掌上电脑、移动互联网设备(mobile internet device,MID)、可穿戴设备(例如智能手表、智能手环等)、车载设备、台式电脑以及智能电视等携带编程工具的终端。例如,以图1所示的用户终端10a为例,用户终端10a中可以安装编程工具对应的客户端,此时的编程工具可以为用于运行一种或多种编程语言的工具,通过启动用户终端10a中所安装的编程工具,可以进入该编程工具的编程教学页面。当然,也可以通过用户终端10a中的浏览器进入网页端编程工具,并显示该网页端编程工具中的编程教学页面。在该编程教学页面中可以创建多个单元区域,在多个单元区域中分步骤编写代码,对于每个单元区域中的分段代码,均可以进行独立运行,得到每个单元区域中的分段代码所对应的分段运行结果,以了解每个单元区域中的分段代码所对应的知识点;其中,编程教学页面中的单元区域可以被创建在代码编辑区域中,一个单元区域可以对应于交互式笔记本Jupyter中的一个单元格,其中,单元格是指交互式笔记本Jupyter中最基本的输入单元,也就是说,单元区域可以是指编程教学页面中可以提供代码输入、运行以及多媒体数据输入功能的基本单元;编程教学页面中的多个单元区域可以在代码编辑区域中进行区别展示;例如,代码编辑区域中的每个单元区域都可以添加边框,或者为相邻的单元区域添加不同的背景颜色,或者为每个单元区域分别设置唯一的标识信息(例如,为每个单元区域设置一个编号),等等。
可选的,编程教学页面的每个单元区域中,还可以编辑用于教学的课件,如编辑文字、上传图片、视频、链接等,即可以在编程教学页面中同时显示分段代码和课件,即在同一个编程教学页面中可以编写可运行的分段代码、编辑可查看的课件,通过对多个单元区域中的分段代码进行分段运行,可以提升编程教学效率。
请参见图2,图2是本申请实施例提供的一种编程教学场景示意图。如图2所示的用户终端20a可以为上述图1所示的用户集群中所选取的任意一个用户终端,本申请实施例以基于Python语言的网页(web)端编程工具为例,对Python语言的教学过程进行具体说明。
如图2所示,用户(用户终端20a的持有者)可以通过用户终端20a中的浏览器进入编程教育平台,对编程教育平台的顶部导航栏中的“编程工具”标签执行触发操作,进入该编程教育平台中的工具显示页面20b,该工具显示页面20b可以用于展示编程教育平台中所包含的所有编程工具(例如,编程工具1、编程工具2、编程工具3、编程工具4等),该编程教育平台中所包含的编程工具可以包括但不限于:创意编程工具、人工智能编程工具、3D编程工具以及各种编程语言所对应的编程工具,每个编程工具均可以采用卡片的形式展示于工具显示页面20b中;例如:编程教育平台中的编程工具1以卡片20d的形式显示于工具显示页面20b中,编程工具2以卡片20e的形式显示于工具显示页面20b中,编程工具3以卡片20f的形式显示于工具显示页面20b中,编程工具4以卡片20g的形式显示于工具显示页面20b中。上述编程教育平台中的每个编程工具都可以理解为是一个集图形化编程和代码编程为一体的web端编程工具。其中,web端编程工具相对于原生的集成开发环境,具有不依赖硬件环境、仅需要网络和浏览器、标准化程度高、易于分享传播等优势,被广泛应用于编程教育平台中。可以理解的是,编程教育平台的顶部导航栏中的“编程工具”标签除了以“编程工具”的文字呈现形式进行展示,还可以采用“实验室”、“工具”等其余文字呈现形式进行展示,本申请对编程工具在编程教育平台的顶部导航栏中的文字呈现形式不做具体限定;可选的,该编程教育平台的顶部导航还可以包括其余标签(例如,标签1、标签2、标签3),每个标签可以对应不同的页面展示内容。
在每个web端编程工具所对应的卡片中,均可以对应一个启动控件,该启动控件可以看成是各个web端编程工具的启动入口;其中,该启动控件可以表示为“开始”、“立即创作”以及“启动”等呈现形式进行展示,如采用“开始”控件作为编程工具启动控件的呈现形式,或者采用“立即创作”控件作为编程工具启动控件的呈现形式,或者采用“启动”控件作为编程工具启动控件的呈现形式,本申请对编程工具所对应的启动控件的呈现形式不做限定。如图2所示,当用户在工具显示页面20b的卡片20e中的“开始”控件执行触发操作时,用户终端20a可以响应针对卡片20e中的“开始”控件的触发操作,进入编程工具2(例如,基于Python语言的web端编辑工具,也可以称为Python编辑工具)。可选的,用户还可以对编程教育平台的顶部导航栏中的“开始”控件20c执行触发操作,在编程教育平台中显示编程工具列表,该编程工具列表可以包括该编程教育平台中所包含的所有编程教学工具,进而从编码工具列表中选择编程工具2,并进入该编辑工具2。可以理解的是,web端编程工具以工具显示页面20b所示的卡片形式来呈现只是举例,还存在其余呈现形式,如图标形式、列表形式等,本申请并不对编程教育平台中的编程工具的呈现形式进行限定。
编程工具2的页面如图2所示的编程主页面20h,该编程主页面20h可以包括代码编辑区域、图形输出区域、文本输出区域,代码编辑区域可以用于输入代码,图形输出区域可以用于输出图形结果,文本输出区域可以用于输出文本结果。用户可以在代码编辑区域中编写代码文件,在代码文件编写完成后,可以运行该代码文件,若该代码文件的运行结果为运算类结果,则该运算类结果可以展示在文本输出区域中;若代码文件的运行结果为图形类结果,则该图形类结果可以显示在图形输出区域中。可选的,编程主页面20h还可以包括顶部导航栏,该顶部导航栏可以包括搜索框、保存控件、发布控件等,通过搜索框可以从编程教育平台中搜索已经存在的代码文件,并在该编程主页面20h的代码编辑区域中显示搜索到的代码文件;通过触发保存控件可以保存编程主页面20h中所显示的代码文件和代码输出结果;通过触发发布控件可以将编程主页面20h中所显示的代码文件和代码输出结果发布至社交平台,以供社交平台中的用户交流学习。
如图2所示,编程工具2的编程主页面20h还可以包括编程切换控件20i,当用户对编程切换控件20i执行触发操作时,可以显示编程模式列表20j,该编程模式列表20j可以包括编码工具2中所包含的编程模式,如编程模式1、编程模式2以及编程模式3等,其中编程模式1可以为代码编程模式,编程模式2可以为积木编程模式(将一些代码封装到积木中,通过移动积木来实现代码的编写过程),编程模式3可以为教学模式。当用户需要讲解编程工具2所对应的编程语言(例如,Python语言)的相关知识点时,可以选择编程模式列表20j中的编程模式3,将编程工具2切换至编程模式3,显示编程教学页面20k;该编程教学页面20k可以包括文件管理区域20k、代码编辑区域20n以及调试区域20p(也可以称为代码调试区域),该文件管理区域20k可以用于展示文件列表,如文件列表可以包括使用Python语言编写的文件1、文件2、文件3、文件4以及文件5等;调试区域20p可以用于显示代码的编译结果(如代码中的变量、调用堆栈、断点以及源文件等编译情况),基于该编译结果可以对代码进行检查,得到可以正常运行的代码。可以理解的是,图2所示的编程教学页面20k的呈现方式只是一个举例,还存在其余呈现形式,如编程教学页面可以对文件管理区域和调试区域进行隐藏展示,或者编程教学页面不包含调试区域,或者代码编辑区域与调试区域呈上下位置进行展示等,在确保代码编辑区域中可以创建单元区域的基础上,本申请并不对编程教学页面的呈现形式进行限定。
当用户打开文件管理区域20m中的新建文件1时,可以在代码编辑区域20n中显示该文件1(新建的文件1可以为空文件),用户可以在代码编辑区域20n中为文件1编写代码。用户在编写代码的过程中,可以在代码编辑区域20n中创建一个或多个单元区域(如图2所示,可以创建单元区域20q和单元区域20r,并通过设置边框来区分各个单元区域),每个单元区域均可以包括代码输入子区域和结果展示子区域,在各个单元区域的代码输入子区域中可以分步骤编写代码。需要说明的是,各个单元区域均可以采用图2所示的单元格形式进行呈现,或者以其余形式进行呈现,例如:单元区域可以采用卡片的形式进行呈现,本申请不对单元区域的呈现形式进行限定。
例如,用户可以在单元区域20q的代码输入子区域1中输入代码1、代码2以及代码3,如代码1可以表示为:a=3,代码2可以表示为:b=2,代码3可以表示为:print(a+b),其中print可以为输出函数;还可以在单元区域20r的代码输入子区域2中输入代码4、代码5、代码6、代码7以及代码8,其中代码4可以表示为:import matplotlib.pyplot as plt(使用缩写形式plt表示matplotlib.pyplot,matplotlib.pyplot是一个有命令风格的函数集合,matplotlib是一个Python的2D绘图库),代码5可以表示为:import numpy as np(使用缩写形式np表示numpy,numpy是Python语言的一个扩展程序库,支持大量的维度数组与矩阵运算),代码6可以表示为:x=np.linspace(-1,0,3),代码7可以表示为:y=-2*x,代码8可以表示为:plt.plot(x,y)plt.show();其中import用于动态加载类和函数;代码6可以表示在范围[-1,0]内返回均匀分布的3个样本点;代码8可以表示调用plot函数绘制函数y=-2*x,并使用plt.show()显示出创建的所有绘图对象。
用户可以对单元区域20q和单元区域20r中的代码进行逐个运行,得到每个单元区域中的代码所对应的运行结果,如通过运行单元区域20q中的代码1至代码3,得到运行结果:5,此时的运行结果可以展示在单元区域20q中的结果展示子区域1中;通过运行单元区域20r中的代码4至代码8,得到运行结果:函数y=-2*x的绘制图像,此时函数y=-2*x的绘制图像可以显示在单元区域20r中的结果展示子区域2中;即单元区域中的结果展示区域既可以用于展示运算类结果,也可以用于展示图形类结果。当然,代码编辑区域20n中还可以为用户提供快捷工具,如插入、删除、复制、剪切、粘贴单元区域,以及运行代码、保存代码等快捷工具。本申请实施例中,通过对N个单元区域中的分段代码进行单独运行,可以逐步了解每个分段代码所对应的知识点,从而可以提升编程教学效率。
请参见图3,图3是本申请实施例提供的一种数据处理方法的流程示意图。可以理解地,本申请提出数据处理方法可以由用户终端执行,该用户终端可以为上述图1所示用户终端集群中的任一个用户终端。如图3所示,该数据处理方法可以包括以下步骤S101-步骤S102:
步骤S101,在编程教学页面中显示N个单元区域;N个单元区域包括代码输入子区域和结果展示子区域,代码输入子区域用于输入分段代码。
具体的,用户可以通过用户终端进入编程教育平台,显示编程教育平台中所集成的一个或多个编程工具,用户可以从一个或多个编程工具中选择满足自身需求的目标编程工具,在该目标编程工具中进行编程语言教学。其中,编程教育平台可以为编程教育客户端,或者为web端编程教育工具,编程教育平台中可以集成一个或多个编程工具。当编程教育平台为编程教育客户端(例如,IDE)时,可以在用户终端中安装该编程教育客户端,在用户启动用户终端中所安装的编程教育客户端时,该用户终端可以响应针对该编程教育客户端的启动触发操作,启动编程教育客户端,并显示该编程教育客户端中的一个或多个编程工具。当编程教育平台为web端编程教育工具时,用户可以在该用户终端的浏览器中输入该web端编程教育工具的网址,使得用户终端可以通过用户所输入的网址,访问上述web端编程教育工具,并在浏览器的网页中显示该web端编程教育工具中的一个或多个编程工具。
其中,上述一个或多个编程工具可以用于编译运行不同的编程语言,如一个或多个编程工具可以包括但不限于:C语言编程工具(C语言可以是一种高级程序设计语言,具有可移植性、绘图能力强等特点)、C++编程工具(C++可以是一种静态数据类型检查的、支持多重编程范式的通用程序设计语言,支持过程化程序设计、数据抽象、面向对象程序设计、泛型程序设计等多种程序设计风格)、JAVA编程工具(JAVA可以是一种撰写跨平台应用软件的面向对象的程序设计语言,具有卓越的通用性、高效性、平台移植性和安全性等特点)、Pascal编程工具、php编程工具(php可以理解为超文本预处理语言,是一种在服务器端执行的嵌入超文本标记语言文档的脚本语言)、c#语言编程工具(c#语言可以是一种面向对象的高级程序设计语言)、Python编程工具、人工智能编程工具、3D编程工具。
当用户从编程教育平台所显示的一个或多个编程工具中选择了任一个编码工具(例如,Python编程工具)时,用户终端可以响应针对一个或多个编程工具的选取操作,将选取操作所触发的编程工具确定为目标编程工具,显示目标编程工具对应的编程主页面(例如,上述图2所对应实施例中的编程主页面20h),该编程主页面可以包括教学模式入口(例如,上述图2所对应实施例中的编程模式列表20j中的编程模式3);当用户对教学模式入口执行触发操作时,用户终端可以响应针对教学模式入口的触发操作,显示目标编程工具对应的编码教学页面,在编码教学页面中创建N个单元区域,并在编程教学页面中显示N个单元区域,其中N可以为正整数,如N可以取值为1,2,……;每个单元区域均可以包括代码输入子区域和结果展示子区域,代码输入子区域可以用于输入代码,结果展示子区域可以用于展示代码运行结果。当用户根据教学需要在N个单元区域中分步骤编写代码时,用户终端可以响应针对N个单元区域的代码编辑操作,分别在N个单元区域的代码输入子区域中显示代码编辑操作所输入的分段代码。其中,N个单元区域中所输入的分段代码可以是不同的(如每个单元区域分别包含不同的分段代码),也可以是相同的(如N个单元区域中的单元区域2是通过复制单元区域1所得到的,此时单元区域1中的分段代码和单元区域2中的分段代码相同)。
可选的,目标编程工具可以包括一种或多种编程模式,该一种或多种编程模式可以包括但不限于:代码编程模式、积木编程模式、教学模式,其中代码编程模式可以适用于具有编程基础的用户,积木编程模式可以适用于编程语言的初学者(尤其是少儿初学者),教学模式可以适用于编程语言的教学课件场景。上述编程教学页面可以是指目标编程工具切换到教学模式后的编程页面,在教学模式下,可以在编程教学页面中体验到单元区域的交互形式,每个单元区域均可以支持代码编写、代码运行等功能。换言之,用户可以在单个独立的单元区域中编写代码,运行用户所编写的代码,并查看代码运行结果。
可选的,编程教学页面中每个独立的单元区域还可以支持图文多媒体展示,即用户可以在单个独立的单元区域中输入多媒体数据(例如,文字、图片、视频、音频等),如用户在N个单元区域的第i个单元区域中输入多媒体数据时,用户终端可以响应针对第i个单元区域的多媒体输入操作,在第i个单元区域中显示多媒体输入操作所确定的第一多媒体数据;其中,该第一多媒体数据可以用于描述第i个单元区域中的分段代码的功能,此处的第一多媒体数据可以是指用于解释第i个单元区域中的分段代码的课件幻灯片/课件文档等(例如,与分段代码相关联的描述文字、展示图片、展示视频等),i可以为小于或等于N的正整数,上述第i个单元区域可以为N个单元区域中的任一个单元区域。
可选的,编程教学页面中的每个单元区域还可以包括多媒体展示子区域,当用户在单元区域中输入多媒体数据时,可以在每个单元区域的多媒体展示子区域中展示用户所输入的多媒体数据,即在编程教学页面的每个单元区域中,可以同时展示用户输入的分段代码、用户输入的多媒体数据,以及分段代码的运行结果。通过在同一个单元区域中展示分段代码以及多媒体数据,可以避免用户对教学内容进行多次切换,进而降低了用户的教学复杂度,同时可以为用户提供“边看边学”的良好学习体验。
请参见图4,图4是本申请实施例提供的一种目标编程工具中的教学模式的界面示意图。如图4所示的用户终端30a为用户所使用的终端设备,该用户终端30a的当前显示界面为目标编程工具在教学模式下的编程教学页面30b,该编程教学页面30b中可以包括文件管理区域30c、代码编辑区域30d以及代码调试区域30e,代码编辑区域30d中所显示的当前文件为:文件1,该代码编辑区域30d可以包括单元区域30f和单元区域30g。其中,单元区域30f可以包括代码输入子区域30h、结果展示子区域30i以及多媒体展示子区域30j,代码输入子区域30h可以用于展示单元区域30f中的分段代码1,结果展示子区域30i可以用于展示分段代码1对应的分段运行结果1,多媒体展示子区域30j可以用于展示与分段代码1相关联的多媒体数据1,该多媒体数据1可以为图片;单元区域30g可以包括代码输入子区域30k、结果展示子区域30m以及多媒体展示子区域30n,代码输入子区域30k可以用于展示单元区域30g中的分段代码2,结果展示子区域30m可以用于展示分段代码2对应的分段运行结果2,多媒体展示子区域30n可以用于展示与分段代码2相关联的多媒体数据2,该多媒体数据2可以为视频。
可选的,编程教学页面中还可以包括区域模式切换控件,当编码教学页面对应的区域模式为代码区域模式(也可以称为代码模式)时,此时编码教程页面中的每个单元区域均可以支持代码编写、代码运行功能,每个单元区域均可以同时展示用户所输入的分段代码,以及分段代码的运行结果;当用户对区域模式切换控件执行触发操作时,用户终端可以响应针对区域模式切换控件的触发操作,将编程教学页面中的代码区域模式切换为多媒体区域模式(如Markdown模式),编程教学页面中的单元区域切换到多媒体区域模式后,可以在单元区域中输入相应的多媒体数据。在同一个编程教学页面中同时展示分段代码和多媒体数据的基础上,还可以通过对单元区域进行区域模式切换,对单元区域中的分段代码和多媒体数据进行分开展示,可以丰富单元区域中所展示内容的展示形式。
需要说明的是,编程教学页面中的每个单元区域处于代码区域模式时,可以在单元区域中编辑并展示分段代码,分段代码运行完成后的运行结果也可以展示在单元区域中,若用户想要在单元区域中输入多媒体数据,则需要将单元区域从代码区域模式切换至多媒体区域模式,多媒体区域模式下的单元区域可以支持用户输入多媒体数据,且多媒体区域模式下的单元区域可以暂时不展示分段代码及运行结果,仅展示用户所输入的多媒体数据;或者,多媒体区域模式下的单元区域中可以同时展示用户输入的分段代码、用户输入的多媒体数据,以及分段代码的运行结果,但在多媒体区域模式下的单元区域不支持代码运行功能。
请参见图5,图5是本申请实施例提供的一种目标编程工具中的教学模式的界面示意图。如图5所示的用户终端40a为用户所使用的终端设备,该用户终端40a的当前显示界面为目标编程工具在教学模式下的编程教学页面40b,该编程教学页面40b中的代码编辑区域40c可以包括单元区域40d和单元区域40e,此时单元区域40d和单元区域40e的当前区域模式可以为代码模式。其中,单元区域40d可以包括代码输入子区域40f和结果展示子区域40g,代码输入子区域40f可以用于展示单元区域30f中的分段代码1,结果展示子区域40g可以用于展示分段代码1对应的分段运行结果1;单元区域40e可以包括代码输入子区域40h和结果展示子区域40i,代码输入子区域40h可以用于展示单元区域40e中的分段代码2,结果展示子区域40i可以用于展示分段代码2对应的分段运行结果2。
该编程教学页面40b的代码编辑区域40c中还可以包括区域模式切换控件40j,当用户对区域模式切换控件40j执行触发操作(例如,点击操作)时,用户终端40a可以响应针对区域模式切换控件40j的触发操作,显示区域模式列表40k,该区域模式列表40k可以包括代码模式和XXX模式(例如,该XXX可以为多媒体区域模式,或者可以称为Markdown模式),若用户选中区域模式列表40k中的XXX模式,则可以在暂时取消各个单元区域中控所显示的分段代码和分段运行结果,如在单元区域40d中输入多媒体数据1,该多媒体数据1可以为图片;在单元区域40e中输入多媒体数据2,该多媒体数据2可以为视频。
可选的,对于N个单元区域中的多媒体数据,用户可以依次在单个独立的单元区域内输入与分段代码相关联的多媒体数据;或者,用户可以在编程教学页面中上传整个教学多媒体数据,用户终端可以获取与N个单元区域相关联的教学多媒体数据,根据N个单元区域中的分段代码所包含的关键信息,对该教学多媒体数据进行拆分,得到N个单元区域分别关联的第二多媒体数据,在N个单元区域中分别显示所关联的第二多媒体数据,该第二多媒体数据可以用于描述N个单元区域中的分段代码的功能,例如:用户可以上传一个完整的课件幻灯片,用户终端在获取到课件幻灯片(教学多媒体数据)后,可以获取每个单元区域中的分段代码所包含的编程知识点(关键信息),根据每个单元区域中的编程知识点,从课件幻灯片中提取与每个单元区域中的编程知识点相关联的幻灯片,并将关联的幻灯片展示在对应的单元区域中,完成单元区域中的多媒体数据的输入操作。可以理解的是,本申请实施例中的第一多媒体数据、第二多媒体数据以及后续提及的第三多媒体数据均为用于辅助理解分段代码,此处的“第一”、“第二”、“第三”并没有实质的语义信息。
可选的,若第i个单元区域中所展示的第一多媒体数据包括视频数据,则用户可以在第i个单元区域中点击播放该视频数据,即用户终端可以响应针对视频数据的播放操作,在编程教学页面的第i个单元区域中播放该视频数据。若第i个单元区域中所展示的第多媒体数据包括页面链接,则用户可以对页面链接执行触发操作,此时的用户终端可以响应针对该页面链接的触发操作,从编程教学页面切换显示至页面链接对应的页面资源数据。
可选的,对于编程教学页面中的N个单元区域,若用户想要删除N个单元区域中的第i个单元区域,则该用户可以选中该第i个单元区域,并对该第i个单元区域执行删除操作,此时的用户终端可以响应针对第i个单元区域的删除操作,删除编程教学页面中的第i个单元区域,进而可以调整编程教学页面中剩余的(N-1)个单元区域的显示位置,其中,(N-1)个单元区域可以是指N个单元区域中除第i个单元区域之外的单元区域。
可选的,若用户想要在编程教学页面中插入行的单元区域,则该用户可以在该编程教学页面中执行区域新增操作,此时的用户终端可以响应编程教学页面中的区域新增操作,在编程教学页面中创建新增单元区域;当用户对新增单元区域执行区域编辑操作时,用户终端可以响应针对新增单元区域的区域编辑操作,在新增单元区域中显示区域编辑操作所输入的新增代码和第三多媒体数据,该第三多媒体数据用于描述新增代码的功能。
可选的,编程教学页面还可以包括代码调试区域(例如,上述图2所对应实施例中的调试区域20p),用户在单元区域中输入代码时,用户可以对输入的代码进行编译,根据编译结果实时修改单元区域中的代码,使得单元区域中的代码符合目标编程工具的编程语言逻辑。当第i个单元区域中的分段代码运行错误时,生成第i个单元区域中的分段代码所对应的编译错误信息,在代码调试区域显示编译错误信息,该编译错误信息用于指示用户对第i个单元区域中的分段代码进行修改。本申请实施例中,编码教学页面可以为用户提供插入单元区域、删除单元区域、编译单元区域中的分段代码等功能,可以增强目标编程工具中单元区域的可操作性。
请参见图6,图6是本申请实施例提供的一种目标编程工具中的教学模式的操作界面示意图。如图6所示的用户终端50a可以为用户所使用的终端设备,该用户终端50a的当前显示界面为目标编程工具在教学模式下的编程教学页面50b,该编程教学页面50b的代码编辑区域50c中已经创建了单元区域50d,该单元区域50d可以展示分段代码1,以及该分段代码1对应的分段运行结果1。
在该代码编辑区域50c中还可以显示快捷工具栏,该快捷工具栏可以包括保存控件50e、插入控件50f、运行控件50g、中断控件50h、重启控件50i、文件运行控件50j、剪切控件50k、复制控件50m、粘贴控件50n、删除控件50p、区域模式切换控件50q等。其中,保存控件50e可以用于保存代码编辑区域50c中所输入的内容;插入控件50f可以用于在代码编辑区域50c中插入新的单元区域;运行控件50g可以用于运行用户选中的单元区域中的分段代码,并向下移动一个单元区域;中断控件50h可以用于中断正在运行的程序代码;重启控件50i可以用于重新启动程序代码;文件运行控件50j可以用于重新启动程序代码后,运行代码编辑区域50c的所有单元区域中的代码;剪切控件50k用于剪切选中的单元区域;复制控件50m用于复制选中的单元区域;粘贴控件50n用于粘贴选中的单元区域;删除控件50p可以用于删除选中的单元区域;区域模式切换控件50q可以用于切换选中单元区域的区域模式。
当用户对插入控件50f执行触发操作时,用户终端50a可以响应针对插入控件50f的触发操作,在代码编辑区域50c中创建单元区域50r,该单元区域50r可以用于展示用户所输入的分段代码2,以及该分段代码2对应的分段运行结果。
可选的,当用户选中单元区域50d,并对删除控件50p执行触发操作时,用户终端50a可以响应针对单元区域50d的删除操作,从代码编辑区域50c中删除单元区域50d,并调整单元区域50r在代码编辑区域50c中的显示位置,如当单元区域50d被删除后,剩余的单元区域50r可以移动至单元区域50d原来的显示位置。可以理解的是,上述单元区域50d和单元区域50r中均可以输入多媒体数据,这里不再进行赘述。
可选的,用户在单元区域中编写代码的过程中,通常需要对代码中的算法参数进行改动,用户可以采用UI(User Interface,用户界面)的方式来调整算法参数,这样可以让算法的调试更加直观。例如,当第i个单元区域的分段代码中包含目标算法参数时,可以在第i个单元区域中显示目标算法参数对应的参数调整视图(UI),在参数调整视图中显示目标算法参数的第一数值;当用户对参数调整视图中所显示的第一数值进行调整时,用户终端可以响应针对参数调整视图的调整操作,将参数调整视图中的第一数值切换显示为调整操作所确定的第二数值,将第i个单元区域的分段代码中的目标算法参数更新为第二数值。
请参见图7,图7是本申请实施例提供的一种参数调整视图的调整示意图。如图7所示,目标编程工具的编程教学页面中可以包括单元区域60a,该单元区域60a中可以输入滑动条所对应的分段代码A,该分段代码A的目的在于通过w=IntSlider()以及display(w,w)绘制滑动条,其中IntSlider()用于表示整数滑动条,display(w,w)表示输出整数滑动条。在单元区域60a中可以显示与分段代码相关联的滑动条60b(上述参数调整视图),以及分段代码A对应的运行结果:滑动条60c;其中,该滑动条60b可以通过交互笔记本(Jupyter)中交互式的控件ipywidget(一个交互式组件)来实现,ipywidget可以用于同步web脚本语言与目标编程工具中的编程语言(例如,Python语言)之间的状态信息,使得分段代码A的调试更加直观。
若滑动条60b中的滑动指针60d处于数值44所在的位置,则在运行分段代码A时,赋予上述w的数值为44,该分段代码A运行得到的结果为滑动指针60e处于数值44所在位置的滑动条60c。其中,滑动条60b中的滑动指针60d是可以进行人为拖动的,而滑动条60c中的滑动指针60e是不可以进行人为拖动的;滑动指针60e在滑动条60c中的位置与滑动指针60d在滑动条60b中的位置是保持同步的。例如,用户对滑动条60b中的滑动指针60d进行拖动,将其拖动至数值66所在的位置,则运行上述分段代码A后,滑动条60c中的滑动指针60e同样会移动至数值66所在的位置。通过在可视化的滑动条60b中调整参数(即滑动指针60d的位置),可以直观地观看分段代码A中参数的调整过程,有利于用户快速理解分段代码A所对应的知识点。
步骤S102,响应针对N个单元区域中的第i个单元区域所包含的分段代码的运行操作,在第i个单元区域的结果展示子区域中,输出第i个单元区域中的分段代码所对应的分段运行结果。
具体的,对于每个单元区域中所输入的分段代码,均可以进行独立运行,如用户对N个单元区域中的第i个单元区域所包含的分段代码执行运行操作时(如上述图6所示,用户可以选中第i个单元区域,并对运行控件50g执行触发操作),用户终端可以响应针对N个单元区域中的第i个单元区域所包含的分段代码的运行操作,将第i个单元区域中的分段代码发送至服务器,以使服务器运行第i个单元区域中的分段代码,生成第i个单元区域中的分段代码所对应的分段运行结果;接收服务器返回的针对第i个单元区域的分段运行结果,根据第i个单元区域所对应的分段运行结果的结果类型,在第i个单元区域的结果展示子区域中,对第i个单元区域对应的分段运行结果进行分类展示。换言之,单元区域执行代码的能力来自于后台服务器,当用户运行第i个单元区域时,可以将第i个单元区域中的分段代码发送至服务器,并等待服务器返回分段运行结果;当用户终端接收到第i个单元区域所对应的分段运行结果时,可以根据分段运行结果所对应的结果类型进行分类展示;例如,结果类型可以包括运算类、图形类等,当分段运行结果为运算类结果时,该分段运行结果可以显示为文本;当分段运行结果为图形类结果时,该分段运行结果可以显示为图形;当分段运行结果同时包含运算类结果和图形类结果时,可以按照结果类型将分段运行结果拆分为属于运算类的第一运行结果和属于图形类的第二运行结果,并将第一运行结果显示为文本,将第二运行结果显示为图形。
可选的,在整个目标代码文件中的所有单元区域的内容(包括分段代码和多媒体数据)均编写完成后,可以通过运行每个单元区域中的分段代码,在每个单元区域的结果展示子区域中输出对应的分段运行结果,进而可以预览整个目标代码文件的最终效果,以完成一个融入了代码和教学多媒体数据(教学课件)的交互式课件。在执行各个单元区域的过程中,用户可以对单个独立的单元区域执行运行操作,以输出每个单元区域所对应的分段运行结果;或者,用户还可以直接对N个单元区域执行触发操作(如上述图6所示,用户可以对文件运行控件50j执行触发操作),此时的用户终端可以响应针对N个单元区域中所包含的分段代码的运行操作,按照N个单元区域中所包含的分段代码之间的代码逻辑,依次获取N个单元区域中的分段代码所对应的分段运行结果,在每个单元区域的结果展示子区域中,分别输出所包含分段代码的分段运行结果。
可选的,当用户对第i个单元区域中的分段代码进行修改时,用户终端可以响应针对第i个单元区域中的分段代码的修改操作,将第i个单元区域中的分段代码更新为目标分段代码;当用户选中第i个单元区域,并对该第i个单元区域执行运行操作时,用户终端可以响应针对目标分段代码的运行操作,获取目标分段代码对应的目标运行结果,在编程教学页面中,将第i个单元区域对应的分段运行结果更新显示为目标运行结果。换言之,用户可以直接对单元区域中的分段代码进行修改,以更新该单元区域中的分段运行结果。
请参见图8,图8是本申请实施例提供的一种单元区域中的代码执行流程示意图。如图8所示,单元区域中的代码执行流程可以通过用户终端与服务器之间的交互来实现,其中,本申请中的用户终端也可以称为前端,服务器可以称为后端。
对于编程教学页面中的任意一个单元区域(例如,第i个单元区域),用户可以在第i个单元区域中输入分段代码,该分段代码可以显示在第i个单元区域的代码输入子区域中,当用户对第i个单元区域中的分段代码执行触发操作时,用户终端可以将第i个单元区域中的分段代码发送给服务器,服务器可以运行第i个单元区域中的分段代码,并将分段运行结果返回至用户终端。当用户终端接收到服务器返回的分段运行结果后,可以在第i个单元区域的结果展示子区域中显示接收到的分段运行结果。若用户通过参数调整视图调整了分段代码中的算法参数,或者直接对分段代码中的算法参数进行了修改,则用户可以将修改后的分段代码(上述目标分段代码)发送给服务器,由服务器运行修改后的分段代码,即运行第i个单元区域中最新的分段代码,并将修改后的分段代码的目标运行结果返回给用户终端,用户终端接收到目标运行结果后,可以将第i个单元区域中的分段运行结果更新显示为目标运行结果。
本申请实施例中,可以在编程工具的编程教学页面中,可以将整段的代码格式切分为多个单元区域的交互形式,在每个单元区域内,可以编写可运行的代码,或者撰写文字、上传图片或视频等多媒体文件,可以降低用户撰写教案、进行授课的复杂程度,使得用户可以将教学课件中的内容和代码融合在同一个编程教学页面中,通过编程教学页面所展示的内容教授编程语言知识点,并演示编写代码过程;与此同时,在N个单元区域中可以分步骤编写代码,通过对N个单元区域中的分段代码进行单独运行,可以逐步了解每个分段代码所对应的知识点,从而可以提升编程教学效率。
请参见图9,图9是本申请实施例提供的一种数据处理方法的流程示意图。可以理解地,本申请提出的数据处理方法可以由服务器(如上述图1所对应实施例中的服务器10d)执行。如图9所示,该数据处理方法可以包括以下步骤S201-步骤S203:
步骤S201,接收用户终端发送的代码运行消息,运行代码运行消息所包含的分段代码,生成代码运行消息对应的代码运行结果。
具体的,在交互式笔记本Jupyter中,一个Jupyter笔记可以由一个或多个单元格组成。Jupyter单元格是交互式笔记本Jupyter最基础的输入单元,该Jupyter单元格可以包括代码模式(也可以称为代码区域模式)和Markdown模式(也可以认为是上述多媒体区域模式);代码模式下的单元格可以包括输入子单元格(即上述代码输入子区域)和输出子单元格(即上述结果展示子区域),输入子单元格可以用于输入代码,输出子单元格可以用于显示所输入代码的执行结果(也可以称为运行结果);Markdown模式下的单元格可以用于输入Markdown格式的文档,该Markdown格式的文档可以用于阐述代码功能。每个单元格均可以在代码模式和Markdown模式之间进行相互切换。
将交互式笔记本Jupyter融入到编程工具中,可以将编程教学页面中的代码编辑区域的代码文件格式切分为多个单元区域,交互式笔记本Jupyter中的一个Jupyter单元格对应于编程教学页面中的一个单元区域,这样的单元区域内不仅可以运行代码,还可以编写多媒体数据。对于编程教学页面中所显示的单元区域,用户可以单独运行一个单元区域中的分段代码,或者运行代码编辑区域中的全部单元区域中的分段代码。例如,当用户想要运行某个单元区域中的分段代码时,可以选中该单元区域并对该单元区域执行运行操作(例如,点击编程教学页面中的运行控件),此时的用户终端可以将用户所选中单元区域中的分段代码封装在代码运行消息中,发送给服务器。服务器在接收到用户终端发送的代码运行消息后,可以运行该代码运行消息中的分段代码,生成该代码运行消息对应的代码运行结果。
步骤S202,获取代码运行消息所携带的全局标识符,确定与全局标识符相关联的第i个单元区域,将代码运行结果确定为第i个单元区域中的分段代码所对应的分段运行结果;第i个单元区域属于编程教学页面中的N个单元区域,N个单元区域包括代码输入子区域和结果展示子区域,代码输入子区域用于输入分段代码。
具体的,代码运行消息可以被分配一个全局标识符,该全局标识符具有唯一性,因此也可以称为全局唯一标识符(Globally Unique Identifier,GUID),用户终端可以将该GUID与单元区域进行关联。因此服务器可以获取代码运行消息所携带的GUID,并确定与该GUID相关联的单元区域为第i个单元区域,此时可以将代码运行结果作为第i个单元区域中的分段代码所对应的分段运行结果。其中,第i个单元区域可以理解为用户触发运行操作的单元区域,在用户终端所显示的编程教学页面中可以包括N个单元区域,第i个单元区域属于N个单元区域,其中N可以为正整数,如N可以取值为1,2,……,i可以为小于或等于N的正整数。编程教学页面中的N个单元区域的呈现方式可以参见上述图3所对应实施例中的步骤S101,这里不再进行赘述。
步骤S203,将第i个单元区域中的分段代码所对应的分段运行结果返回至用户终端,以使用户终端在第i个单元区域的结果展示子区域中,输出第i个单元区域中的分段代码所对应的分段运行结果。
具体的,服务器可以将第i个单元区域中的分段运行结果返回至用户终端,用户终端在接收到分段运行结果后,可以在第i个单元区域的结果展示子区域中,输出第i个单元区域中的分段代码所对应的分段运行结果;该分段运行结果在第i个单元区域中的输出形式可以参见上述图3所对应实施例中的步骤S102,这里不再进行赘述。
请参见图10,图10是本申请实施例提供的一种单元区域中的分段代码的运行流程图。如图10所示的内核可以是指服务器中用于执行代码的内部核心程序,当编程教学页面的代码编辑区域中包含单元区域1和单元区域2(此时的N等于2)时,假设用户选中单元区域2,并对该单元区域2执行运行操作,此时的用户终端可以响应针对单元区域2的运行操作,向服务器中的内核发送代码运行消息,该代码运行消息可以包含单元区域2中的分段代码;通过交互式笔记本Jupyter可以为该代码运行消息分配一个全局唯一标识符(GUID),用户终端可以将该GUID与单元区域2进行关联,即建立该GUID与单元区域2之间的关联关系。内核接收到用户终端发送的代码运行消息后,可以运行该代码运行消息中所包含的分段代码,生成该代码运行消息对应的代码运行结果,并通过代码运行消息对应的GUID,可以确定该运行消息对应的代码运行结果即为单元区域1中的分段代码的分段运行结果,该分段运行结果可以返回至用户终端,并在单元区域2的结果展示子区域中进行展示。
需要说明的是,用户终端发送给服务器的代码运行消息中所包含的分段代码需要满足目标编程工具中的语言编写规范和语言逻辑,若代码运行消息中的分段代码不满足目标编程工具中的语言编写规范,则服务器中的内核可以对分段代码中不满足语言编写规范的代码进行修正,使得修正后的分段代码满足语言编写规范,并运行修正后的分段代码,生成代码运行消息对应的运行结果。若代码运行消息中的分段代码不满足目标编程工具中的语言逻辑,则服务器中的内核可以确定该代码运行消息中的分段代码出现错误,生成代码运行消息对应的运行失败结果。
可选的,在内核运行上述代码运行消息中所包含的分段代码的过程中,可以生成该代码运行消息对应的代码运行结果,该代码运行结果可以产生新的显示元素配置数据,因此可以在服务器的内核中创建显示配置对象(widget),widget可以是指用于描述UI元素的配置数据,widget本身并不是表示最终绘制在用户终端上的显示元素,而只是描述显示元素的配置数据,可以用于描述显示元素的UI控件、UI具体样式(例如,颜色)以及功能等;widget可以是指在任意一个web页面上执行的代码,该widget也可以称为微件。
请参见图11,图11是本申请实施例提供的一种创建显示配置对象的流程示意图。如图11所示,当服务器在内核中创建显示配置对象(widget)时,可以创建一个与显示配置对象(widget)相关联的通讯器1(comm),在通讯器1被创建时,可以为该通讯器1配置一个全局唯一标识符(GUID),此处的GUID可以与上述代码运行消息所对应的GUID相同,也可以不同。通讯器1创建成功后,可以向用户终端发送通讯器创建消息,该通讯器创建消息的元数据可以声明该通讯器1为widget comm(显示配置对象所对应的通讯器),以及与该显示配置对象(widget)相对应的显示配置模型(widgetmodel)类,此处的widgetmodel类可以用于指定对象(widgetmodel对象)的形式,其包含了数据表示法和用于处理数据的方法;定义一个类,本质上是定义一个数据类型的蓝图,可以包括定义了widgetmodel类的对象包括了什么,以及可以在该对象上执行哪些操作,实际上并没有定义任何数据。
其中,显示配置模型(widgetmodel)类可以由模块和名称指定,使用Require.js(一个脚本文件和模块加载器)可以异步加载显示配置模型(widgetmodel)类。上述通讯器创建消息可以触发用户终端创建一个携带与通讯器1具有相同GUID的通讯器2(comm),该通讯器2可以被传递到用户终端的显示配置组件(WidgetManager)中,在该显示配置组件(WidgetManager)中可以创建一个显示配置模型(widgetmodel)类的实例,此时的实例可以称为显示配置模型(widgetmodel)实例,并将显示配置模型(widgetmodel)实例链接到通讯器2。其中,用户终端中的显示配置模型(widgetmodel)实例与内核中的显示配置对象(widget)实例具有相同的配置数据,只是显示配置模型(widgetmodel)实例还可以在用户终端中进行UI展示,显示配置模型(widgetmodel)与显示配置对象(widget)都与上述通讯器1所对应的GUID相关联;通讯器2可以为用户终端所对应的通讯组件中的一个通讯器,如通讯组件可以包括用户终端中的所有通讯器。其中,显示配置模型(widgetmodel)实例可以是指根据显示配置模型(widgetmodel)类创建出来的一个个具体的对象,每个对象都拥有相同的方法,但各自的数据可能不同。
请参见图12,图12是本申请实施例提供的一种显示配置对象的状态同步流程图。如图12所示,当服务器对应的通讯器1和用户终端对应的通讯器2均创建完成后,服务器中的内核可以将显示配置对象(widget)的初始状态异步推送给用户终端,即显示配置对象(widget)和显示配置模型(widgetmodel)始终保持状态一致。例如,内核中的显示配置对象(widget)的初始状态为1,那么用户终端中的显示配置模型(widgetmodel)的状态同样也为1。
服务器中的内核在构建了显示配置对象(widget)之后,可以调用display(用于设置元素应该如何显示),运行显示配置对象(widget)中的repr方法(一个特殊命名的方法,可以把一个对象用字符串的形式进行表示),该repr方法可以通过通讯器1向用户终端发送一条新消息,通过该新消息通知用户终端构造并显示widget。该新消息是对原始的代码运行消息的响应,代码运行消息对应的GUID可以存储在新消息中。当用户终端通过通讯器2接收到该新消息时,可以通知显示配置组件(WidgetManager)需要构造并显示widget,该显示配置组件(WidgetManager)可以将新消息传递给交互式笔记本,由交互式笔记本通过代码运行消息所携带的GUID来确定新视图应该属于第i个单元区域(例如,上述图10中的单元区域2)。随后,用户终端可以使用显示配置模型(widgetmodel)中指定的显示配置视图(WidgetView)类创建显示配置视图(WidgetView)。当用户终端加载了显示配置模型(widgetmodel)中的显示配置视图(WidgetView)类,就会构造一个对应的显示配置视图(WidgetView)实例,并显示在第i个单元区域中,用户终端可以实时监听显示配置视图(WidgetView),以检测显示配置模型(widgetmodel)的更新情况。
综合上述图11至图12,在接收到针对第i个单元区域的代码运行消息,并运行代码运行消息中所包含的分段代码时,服务器可以创建第i个单元区域对应的显示配置对象(widget),构建与显示配置对象(widget)相关联的第一通讯程序接口(例如,上述通讯器1),为第一通讯程序接口设置全局标识符(全局唯一标识符GUID);将全局标识符传输至用户终端,以使用户终端创建携带全局标识符的第二通讯程序接口(例如,上述通讯器2),该第二通讯程序接口用于链接至编程教学页面中的第i个单元区域。通过全局标识符可以快速确定代码运行消息中的分段代码所属的单元区域,并快速且准确地定位到代码运行结果所对应的显示配置对象(widget)在编程教学页面中的显示位置。
可选的,服务器中的内核与用户终端之间可以通过各自创建的通讯器来进行通信,通讯器可以理解为一个通信程序接口(Comm API),通信程序接口(Comm API)是一个对称的、异步的的消息传递应用程序编程接口(Application Programming Interface,API)。通信程序接口(Comm API)可以允许服务器中的内核(后端)和用户终端(前端)之间发送满足轻量级的数据交换格式(JavaScript Object Notation,JSON)的blob对象(BinaryLarge Object,二进制类型的大对象),该通信程序接口(Comm API)可以隐藏webserver(网页服务器)、ZMQ(也可以称为ZeroMQ,是一个基于消息队列的多线程网络库,其对套接字类型、连接处理、帧、甚至路由的底层细节进行抽象,提供跨越多种传输协议的套接字)和websocket(一种网络通信协议)的复杂性,可以提高服务器和用户终端之间的通信效率。
请参见图13,图13是本申请实施例提供的一种交互通信流程图。如图13所示,服务器中的内核所对应的通信程序接口(Comm API)可以为通讯器1,用户终端所对应的通信程序接口(Comm API)可以为通讯器2,服务器和用户终端通过使用通讯器1和通讯器2进行通信,对于内核中的任意一个显示配置对象(widget)实例,在用户终端中都存在一个对应的显示配置模型(widgetmodel)实例。显示配置对象(widget)实例和显示配置模型(widgetmodel)实例可以存储相同的状态,widget框架可以确保显示配置对象(widget)实例和显示配置模型(widgetmodel)之间彼此保持同步。
若用户终端侧的显示配置模型(widgetmodel)进行了更改,则内核中的显示配置对象(widget)也会接收到相同的更改;反之亦然,若内核中的显示配置对象(widget)进行了更改,则用户终端侧的显示配置模型(widgetmodel)也会接收到相同的更改。显示配置对象(widget)和显示配置模型(widgetmodel)具有相同的优先权。需要说明的是,虽然交互式笔记本具有单元格的概念,但显示配置对象(widget)和显示配置模型(widgetmodel)都不绑定到任何单个单元格(单元区域)。
为了让用户在单元区域的基础上与显示配置对象(widget)进行交互,显示配置模型(widgetmodel)可以采用显示配置视图(WidgetView)来表示。任意一个独立的显示配置视图(WidgetView)均可以绑定到单个单元区域。多个显示配置视图(WidgetView)可以链接到一个显示配置模型(widgetmodel),例如:一个显示配置模型(widgetmodel)可以包括显示配置视图1、显示配置视图2、显示配置视图3;一个单元区域可以绑定一个或多个显示配置视图(WidgetView),例如:单元区域1可以绑定显示配置视图1和显示配置视图2,单元区域2可以绑定显示配置视图3。其中,显示配置视图(WidgetView)既可以显示widgetmodel的状态,又可以对其进行操作。如图7所示的滑动条60b,既可以显示数值,又可以允许用户拖动滑动指针60d来更改数值。
本申请实施例中,可以在编程工具中,通过融入支持实时代码运行和图文多媒体展示的交互式笔记本Jupyter,将编程教学页面中的整段的代码格式切分为多个单元区域的交互形式,在每个单元区域内,可以编写可运行的代码,或者撰写文字、上传图片或视频等多媒体文件,可以降低用户撰写教案、进行授课的复杂程度,使得用户可以将教学课件中的内容和代码融合在同一个编程教学页面中,通过编程教学页面所展示的内容教授编程语言知识点,并演示编写代码过程;与此同时,在N个单元区域中可以分步骤编写代码,通过对N个单元区域中的分段代码进行单独运行,可以逐步了解每个分段代码所对应的知识点,从而可以提升编程教学效率。
请参见图14,图14是本申请实施例提供的一种数据处理装置的结构示意图。可以理解地,该数据处理装置可以设置于用户终端(例如,上述图1所对应实施例中的用户终端10a)中;如图14所示,该数据处理装置1可以包括:区域显示模块101,结果输出模块102;
区域显示模块101,用于在编程教学页面中显示N个单元区域;N个单元区域包括代码输入子区域和结果展示子区域,代码输入子区域用于输入分段代码,N为正整数;
结果输出模块102,用于响应针对N个单元区域中的第i个单元区域所包含的分段代码的运行操作,在第i个单元区域的结果展示子区域中,输出第i个单元区域中的分段代码所对应的分段运行结果;i为小于或等于N的正整数。
其中,区域显示模块101,结果输出模块102的具体功能实现方式可以参见上述图3所对应实施例中对步骤S101-步骤S102的描述,这里不再进行赘述。
在一个或多个实施例中,区域显示模块101可以包括:编程工具显示单元1011,编程工具选取单元1012,单元区域创建单元1013,代码编辑单元1014;
编程工具显示单元1011,用于显示一个或多个编程工具;
编程工具选取单元1012,用于响应针对一个或多个编程工具的选取操作,将选取操作所触发的编程工具确定为目标编程工具,显示目标编程工具对应的编程主页面;编程主页面包括教学模式入口;
单元区域创建单元1013,用于响应针对教学模式入口的触发操作,显示目标编程工具对应的编码教学页面,在编码教学页面中创建N个单元区域;
代码编辑单元1014,用于响应针对N个单元区域的代码编辑操作,分别在N个单元区域中显示代码编辑操作所输入的分段代码。
其中,编程工具显示单元1011,编程工具选取单元1012,单元区域创建单元1013,代码编辑单元1014的具体功能实现方式可以参见上述图3所对应实施例中对步骤S101的描述,这里不再进行赘述。
在一个或多个实施例中,该数据处理装置1可以包括:多媒体输入模块103;
多媒体输入模块103,用于响应针对第i个单元区域的多媒体输入操作,在第i个单元区域中显示多媒体输入操作所确定的第一多媒体数据;第一多媒体数据用于描述第i个单元区域中的分段代码的功能。
可选的,编程教学页面还包括区域模式切换控件;
该数据数据处理装置1还可以包括:模式切换模块104,多媒体添加模块105;
模式切换模块104,用于当编码教学页面对应的区域模式为代码区域模式时,响应针对区域模式切换控件的触发操作,将编程教学页面中的代码区域模式切换为多媒体区域模式;
多媒体添加模块105,用于获取与N个单元区域相关联的教学多媒体数据,根据N个单元区域中的分段代码所包含的关键信息,对教学多媒体数据进行拆分,得到N个单元区域分别关联的第二多媒体数据,在N个单元区域中分别显示所关联的第二多媒体数据;第二多媒体数据用于描述N个单元区域中的分段代码的功能。
其中,多媒体输入模块103,模式切换模块104,多媒体添加模块105的具体功能实现方式可以参见上述图3所对应实施例中对步骤S101的描述,这里不再进行赘述。
在一个或多个实施例中,结果输出模块102可以包括:分段代码发送单元1021,结果分类展示单元1022;
分段代码发送单元1021,用于响应针对N个单元区域中的第i个单元区域所包含的分段代码的运行操作,将第i个单元区域中的分段代码发送至服务器,以使服务器运行第i个单元区域中的分段代码,生成第i个单元区域中的分段代码所对应的分段运行结果;
结果分类展示单元1022,用于接收服务器返回的针对第i个单元区域的分段运行结果,根据第i个单元区域所对应的分段运行结果的结果类型,在第i个单元区域的结果展示子区域中,对第i个单元区域对应的分段运行结果进行分类展示。
可选的,结果输出模块102还用于:
响应针对N个单元区域中所包含的分段代码的运行操作,按照N个单元区域中所包含的分段代码之间的代码逻辑,依次获取N个单元区域中的分段代码所对应的分段运行结果,在每个单元区域的结果展示子区域中,分别输出所包含分段代码的分段运行结果。
其中,分段代码发送单元1021,结果分类展示单元1022,结果输出模块102的具体功能实现方式可以参见上述图3所对应实施例中对步骤S102的描述,这里不再进行赘述。
在一个或多个实施例中,该数据处理装置1还可以包括:单元区域删除模块106,单元区域新增模块107,新增区域编辑模块108;
单元区域删除模块106,用于响应针对第i个单元区域的删除操作,删除编程教学页面中的第i个单元区域,调整编程教学页面中剩余的(N-1)个单元区域的显示位置;(N-1)个单元区域是指N个单元区域中除第i个单元区域之外的单元区域。
单元区域新增模块107,用于响应编程教学页面中的区域新增操作,在编程教学页面中创建新增单元区域;
新增区域编辑模块108,用于响应针对新增单元区域的区域编辑操作,在新增单元区域中显示区域编辑操作所输入的新增代码和第三多媒体数据;第三多媒体数据用于描述新增代码的功能。
其中,单元区域删除模块106,单元区域新增模块107,新增区域编辑模块108的具体功能实现方式可以参见上述图3所对应实施例中对步骤S101的描述,这里不再进行赘述。
在一个或多个实施例中,编码教学页面还包括代码调试区域;
该数据处理装置1还可以包括:分段代码编译模块109,代码修改模块110,运行结果更新模块111,参数视图显示模块112,参数调整模块113;
分段代码编译模块109,用于当第i个单元区域中的分段代码运行错误时,生成第i个单元区域中的分段代码所对应的编译错误信息,在代码调试区域显示编译错误信息;编译错误信息用于指示用户对第i个单元区域中的分段代码进行修改。
代码修改模块110,用于响应针对第i个单元区域中的分段代码的修改操作,将第i个单元区域中的分段代码更新为目标分段代码;
运行结果更新模块111,用于响应针对目标分段代码的运行操作,获取目标分段代码对应的目标运行结果,在编程教学页面中,将第i个单元区域对应的分段运行结果更新显示为目标运行结果。
参数视图显示模块112,用于当第i个单元区域的分段代码中包含目标算法参数时,在第i个单元区域中显示目标算法参数对应的参数调整视图,在参数调整视图中显示目标算法参数的第一数值;
参数调整模块113,用于响应针对参数调整视图的调整操作,将参数调整视图中的第一数值切换显示为调整操作所确定的第二数值,将第i个单元区域的分段代码中的目标算法参数更新为第二数值。
其中,分段代码编译模块109,代码修改模块110,运行结果更新模块111,参数视图显示模块112,参数调整模块113的具体功能实现方式可以参见上述图3所对应实施例中对步骤S102的描述,这里不再进行赘述。
在一个或多个实施例中,第一多媒体数据包括视频数据;
该数据处理装置1还可以包括:视频播放模块114;
视频播放模块114,用于响应针对视频数据的播放操作,在编程教学页面中播放视频数据。
可选的,第一多媒体数据包括页面链接;
该数据处理装置1还可以包括:链接跳转模块115;
链接跳转模块115,用于响应针对页面链接的触发操作,从编程教学页面切换显示至页面链接对应的页面资源数据。
其中,视频播放模块114,链接跳转模块115的具体功能实现方式可以参见上述图3所对应实施例中对步骤S101的描述,这里不再进行赘述。
本申请实施例中,可以在编程工具的编程教学页面中,可以将整段的代码格式切分为多个单元区域的交互形式,在每个单元区域内,可以编写可运行的代码,或者撰写文字、上传图片或视频等多媒体文件,可以降低用户撰写教案、进行授课的复杂程度,使得用户可以将教学课件中的内容和代码融合在同一个编程教学页面中,通过编程教学页面所展示的内容教授编程语言知识点,并演示编写代码过程;与此同时,在N个单元区域中可以分步骤编写代码,通过对N个单元区域中的分段代码进行单独运行,可以逐步了解每个分段代码所对应的知识点,从而可以提升编程教学效率。
请参见图15,图15是本申请实施例提供的一种数据处理装置的结构示意图。可以理解地,该数据处理装置可以设置于服务器(例如,上述图1所对应实施例中的用户终端10d)中;如图15所示,该数据处理装置2可以包括:消息接收模块21,结果发送模块22;
消息接收模块21,用于接收用户终端发送的代码运行消息,运行代码运行消息所包含的第i个单元区域中的分段代码,生成第i个单元区域中的分段代码所对应的分段运行结果;第i个单元区域属于编程教学页面中的N个单元区域,N个单元区域包括代码输入子区域和结果展示子区域,代码输入子区域用于输入分段代码,i和N均为正整数,且i小于或等于N;
结果发送模块22,用于将第i个单元区域中的分段代码所对应的分段运行结果返回至用户终端,以使用户终端在第i个单元区域的结果展示子区域中,输出第i个单元区域中的分段代码所对应的分段运行结果。
其中,消息接收模块21,结果发送模块22的具体功能实现方式可以参见上述图9所对应实施例中对步骤S201-步骤203的描述,这里不再进行赘述。
在一个或多个实施例中,消息接收模块21可以包括:代码运行单元211,单元区域确定单元212;
代码运行单元211,用于接收用户终端发送的代码运行消息,运行代码运行消息所包含的分段代码,生成代码运行消息对应的代码运行结果;
单元区域确定单元212,用于获取代码运行消息所携带的全局标识符,确定与全局标识符相关联的第i个单元区域,将代码运行结果确定为第i个单元区域中的分段代码所对应的分段运行结果。
其中,代码运行单元211,单元区域确定单元212的具体功能实现方式可以参见上述图9所对应实施例中对步骤S201-步骤202的描述,这里不再进行赘述。
在一个或多个实施例中,该数据处理装置1还可以包括:标识符设置模块23,标识符传输模块24;
标识符设置模块23,用于创建第i个单元区域对应的显示配置对象,构建与显示配置对象相关联的第一通讯程序接口,为第一通讯程序接口设置全局标识符;
标识符传输模块24,用于将全局标识符传输至用户终端,以使用户终端创建携带全局标识符的第二通讯程序接口;第二通讯程序接口用于链接至编程教学页面中的第i个单元区域。
其中,标识符设置模块23,标识符传输模块24的具体功能实现方式可以参见上述图9所对应实施例中对步骤203的描述,这里不再进行赘述。
本申请实施例中,可以在编程工具中,通过融入支持实时代码运行和图文多媒体展示的交互式笔记本Jupyter,将编程教学页面中的整段的代码格式切分为多个单元区域的交互形式,在每个单元区域内,可以编写可运行的代码,或者撰写文字、上传图片或视频等多媒体文件,可以降低用户撰写教案、进行授课的复杂程度,使得用户可以将教学课件中的内容和代码融合在同一个编程教学页面中,通过编程教学页面所展示的内容教授编程语言知识点,并演示编写代码过程;与此同时,在N个单元区域中可以分步骤编写代码,通过对N个单元区域中的分段代码进行单独运行,可以逐步了解每个分段代码所对应的知识点,从而可以提升编程教学效率。
进一步地,请参见图16,图16是本申请实施例提供的一种计算机设备的结构示意图。如图16所示,该计算机设备1000可以为用户终端,例如,上述图1所对应实施例中的用户终端10a,还可以为服务器,例如,上述图1所对应实施例中的服务器10d,这里将不对其进行限制。为便于理解,本申请以计算机设备为用户终端为例,该计算机设备1000可以包括:处理器1001,网络接口1004和存储器1005,此外,该计算机设备1000还可以包括:用户接口1003,和至少一个通信总线1002。其中,通信总线1002用于实现这些组件之间的连接通信。其中,用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口(如WI-FI接口)。存储器1004可以是高速RAM存储器,也可以是非不稳定的存储器(non-volatile memory),例如至少一个磁盘存储器。存储器1005可选的还可以是至少一个位于远离前述处理器1001的存储装置。如图16所示,作为一种计算机可读存储介质的存储器1005中可以包括操作系统、网络通信模块、用户接口模块以及设备控制应用程序。
其中,该计算机设备1000中的网络接口1004还可以提供网络通讯功能,且可选用户接口1003还可以包括显示屏(Display)、键盘(Keyboard)。在图16所示的计算机设备1000中,网络接口1004可提供网络通讯功能;而用户接口1003主要用于为用户提供输入的接口;而处理器1001可以用于调用存储器1005中存储的设备控制应用程序。
在一个或多个实施例中,计算机设备1000可以是图1所示的用户终端10a;该计算机设备可以通过处理器1001来实现:
在编程教学页面中显示N个单元区域;N个单元区域包括代码输入子区域和结果展示子区域,代码输入子区域用于输入分段代码,N为正整数;
响应针对N个单元区域中的第i个单元区域所包含的分段代码的运行操作,在第i个单元区域的结果展示子区域中,输出第i个单元区域中的分段代码所对应的分段运行结果;i为小于或等于N的正整数。
可选的,在一个或多个实施例中,计算机设备1000可以是图1所示的服务器10d,此时的计算机设备1000的用户接口1003中可以不包括显示屏(Display)、键盘(Keyboard);该计算机设备可以通过处理器1001来实现:
接收用户终端发送的代码运行消息,运行代码运行消息所包含的第i个单元区域中的分段代码,生成第i个单元区域中的分段代码所对应的分段运行结果;第i个单元区域属于编程教学页面中的N个单元区域,N个单元区域包括代码输入子区域和结果展示子区域,代码输入子区域用于输入分段代码,i和N均为正整数,且i小于或等于N;
将第i个单元区域中的分段代码所对应的分段运行结果返回至用户终端,以使用户终端在第i个单元区域的结果展示子区域中,输出第i个单元区域中的分段代码所对应的分段运行结果。
应当理解,本申请实施例中所描述的计算机设备1000可执行前文图3和图9任一个所对应实施例中对数据处理方法的描述,也可执行前文图14所对应实施例中对数据处理装置1的描述,还可执行前文图15所对应实施例中对数据处理装置2的描述,在此不再赘述。另外,对采用相同方法的有益效果描述,也不再进行赘述。
此外,这里需要指出的是:本申请实施例还提供了一种计算机可读存储介质,且计算机可读存储介质中存储有前文提及的数据处理装置1或者前文提及的数据处理装置2所执行的计算机程序,且计算机程序包括程序指令,当处理器执行程序指令时,能够执行前文图3和图9任一个所对应实施例中对数据处理方法的描述,因此,这里将不再进行赘述。另外,对采用相同方法的有益效果描述,也不再进行赘述。对于本申请所涉及的计算机可读存储介质实施例中未披露的技术细节,请参照本申请方法实施例的描述。作为示例,程序指令可被部署在一个计算设备上执行,或者在位于一个地点的多个计算设备上执行,又或者,在分布在多个地点且通过通信网络互连的多个计算设备上执行,分布在多个地点且通过通信网络互连的多个计算设备可以组成区块链系统。
此外,需要说明的是:本申请实施例还提供了一种计算机程序产品或计算机程序,该计算机程序产品或者计算机程序可以包括计算机指令,该计算机指令可以存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令,处理器可以执行该计算机指令,使得该计算机设备执行前文图3和图9任一个所对应实施例中对数据处理方法的描述,因此,这里将不再进行赘述。另外,对采用相同方法的有益效果描述,也不再进行赘述。对于本申请所涉及的计算机程序产品或者计算机程序实施例中未披露的技术细节,请参照本申请方法实施例的描述。
需要说明的是,对于前述的各个方法实施例,为了简单描述,故将其都表述为一系列的动作组合,但是本领域技术人员应该知悉,本申请并不受所描述的动作顺序的限制,因为依据本申请,某一些步骤可以采用其他顺序或者同时进行。其次,本领域技术人员也应该知悉,说明书中所描述的实施例均属于优选实施例,所涉及的动作和模块并不一定是本申请所必须的。
本申请实施例方法中的步骤可以根据实际需要进行顺序调整、合并和删减。
本申请实施例装置中的模块可以根据实际需要进行合并、划分和删减。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程,是可以通过计算机程序来指令相关的硬件来完成,所述的程序可存储于一计算机可读取存储介质中,该程序在执行时,可包括如上述各方法的实施例的流程。其中,所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory,ROM)或随机存储记忆体(Random AccessMemory,RAM)等。
以上所揭露的仅为本申请较佳实施例而已,当然不能以此来限定本申请之权利范围,因此依本申请权利要求所作的等同变化,仍属本申请所涵盖的范围。

Claims (20)

1.一种数据处理方法,其特征在于,包括:
在编程教学页面中显示N个单元区域;所述N个单元区域包括代码输入子区域和结果展示子区域,所述代码输入子区域用于输入分段代码,N为正整数;
响应针对所述N个单元区域中的第i个单元区域所包含的分段代码的运行操作,在所述第i个单元区域的结果展示子区域中,输出所述第i个单元区域中的分段代码所对应的分段运行结果;i为小于或等于N的正整数。
2.根据权利要求1所述的方法,其特征在于,还包括:
响应针对所述第i个单元区域的多媒体输入操作,在所述第i个单元区域中显示所述多媒体输入操作所确定的第一多媒体数据;所述第一多媒体数据用于描述所述第i个单元区域中的分段代码的功能。
3.根据权利要求1所述的方法,其特征在于,所述在编程教学页面中显示N个单元区域,包括:
显示一个或多个编程工具;
响应针对所述一个或多个编程工具的选取操作,将所述选取操作所触发的编程工具确定为目标编程工具,显示所述目标编程工具对应的编程主页面;所述编程主页面包括教学模式入口;
响应针对所述教学模式入口的触发操作,显示所述目标编程工具对应的编码教学页面,在所述编码教学页面中创建N个单元区域;
响应针对所述N个单元区域的代码编辑操作,分别在所述N个单元区域中显示所述代码编辑操作所输入的分段代码。
4.根据权利要求1所述的方法,其特征在于,所述编程教学页面还包括区域模式切换控件;
所述方法还包括:
当所述编码教学页面对应的区域模式为代码区域模式时,响应针对所述区域模式切换控件的触发操作,将所述编程教学页面中的所述代码区域模式切换为多媒体区域模式;
获取与所述N个单元区域相关联的教学多媒体数据,根据所述N个单元区域中的分段代码所包含的关键信息,对所述教学多媒体数据进行拆分,得到所述N个单元区域分别关联的第二多媒体数据,在所述N个单元区域中分别显示所关联的第二多媒体数据;所述第二多媒体数据用于描述所述N个单元区域中的分段代码的功能。
5.根据权利要求1所述的方法,其特征在于,所述响应针对所述N个单元区域中的第i个单元区域所包含的分段代码的运行操作,在所述第i个单元区域中的结果展示子区域中,输出所述第i个单元区域中的分段代码所对应的分段运行结果,包括:
响应针对所述N个单元区域中的第i个单元区域所包含的分段代码的运行操作,将所述第i个单元区域中的分段代码发送至服务器,以使所述服务器运行所述第i个单元区域中的分段代码,生成所述第i个单元区域中的分段代码所对应的分段运行结果;
接收所述服务器返回的针对所述第i个单元区域的分段运行结果,根据所述第i个单元区域所对应的分段运行结果的结果类型,在所述第i个单元区域的结果展示子区域中,对所述第i个单元区域对应的分段运行结果进行分类展示。
6.根据权利要求1所述的方法,其特征在于,还包括:
响应针对所述N个单元区域中所包含的分段代码的运行操作,按照所述N个单元区域中所包含的分段代码之间的代码逻辑,依次获取所述N个单元区域中的分段代码所对应的分段运行结果,在所述每个单元区域的结果展示子区域中,分别输出所包含分段代码的分段运行结果。
7.根据权利要求1所述的方法,其特征在于,还包括:
响应针对所述第i个单元区域的删除操作,删除所述编程教学页面中的所述第i个单元区域,调整所述编程教学页面中剩余的(N-1)个单元区域的显示位置;所述(N-1)个单元区域是指所述N个单元区域中除所述第i个单元区域之外的单元区域。
8.根据权利要求1所述的方法,其特征在于,还包括:
响应所述编程教学页面中的区域新增操作,在所述编程教学页面中创建新增单元区域;
响应针对所述新增单元区域的区域编辑操作,在所述新增单元区域中显示所述区域编辑操作所输入的新增代码和第三多媒体数据;所述第三多媒体数据用于描述所述新增代码的功能。
9.根据权利要求1所述的方法,其特征在于,所述编码教学页面还包括代码调试区域;
所述方法还包括:
当所述第i个单元区域中的分段代码运行错误时,生成所述第i个单元区域中的分段代码所对应的编译错误信息,在所述代码调试区域显示所述编译错误信息;所述编译错误信息用于指示用户对所述第i个单元区域中的分段代码进行修改。
10.根据权利要求1所述的方法,其特征在于,还包括:
响应针对所述第i个单元区域中的分段代码的修改操作,将所述第i个单元区域中的分段代码更新为目标分段代码;
响应针对所述目标分段代码的运行操作,获取所述目标分段代码对应的目标运行结果,在所述编程教学页面中,将所述第i个单元区域对应的分段运行结果更新显示为所述目标运行结果。
11.根据权利要求1所述的方法,其特征在于,还包括:
当所述第i个单元区域的分段代码中包含目标算法参数时,在所述第i个单元区域中显示所述目标算法参数对应的参数调整视图,在所述参数调整视图中显示所述目标算法参数的第一数值;
响应针对所述参数调整视图的调整操作,将所述参数调整视图中的第一数值切换显示为所述调整操作所确定的第二数值,将所述第i个单元区域的分段代码中的目标算法参数更新为所述第二数值。
12.根据权利要求2所述的方法,其特征在于,所述第一多媒体数据包括视频数据;
所述方法还包括:
响应针对所述视频数据的播放操作,在所述编程教学页面中播放所述视频数据。
13.根据权利要求2所述的方法,其特征在于,所述第一多媒体数据包括页面链接;
所述方法还包括:
响应针对所述页面链接的触发操作,从所述编程教学页面切换显示至所述页面链接对应的页面资源数据。
14.一种数据处理方法,其特征在于,包括:
接收用户终端发送的代码运行消息,运行所述代码运行消息所包含的第i个单元区域中的分段代码,生成所述第i个单元区域中的分段代码所对应的分段运行结果;所述第i个单元区域属于编程教学页面中的N个单元区域,所述N个单元区域包括代码输入子区域和结果展示子区域,所述代码输入子区域用于输入分段代码,i和N均为正整数,且i小于或等于N;
将所述第i个单元区域中的分段代码所对应的分段运行结果返回至所述用户终端,以使所述用户终端在所述第i个单元区域的结果展示子区域中,输出所述第i个单元区域中的分段代码所对应的分段运行结果。
15.根据权利要求14所述的方法,其特征在于,所述接收用户终端发送的代码运行消息,运行所述代码运行消息所包含的第i个单元区域中的分段代码,生成所述第i个单元区域中的分段代码所对应的分段运行结果,包括:
接收所述用户终端发送的代码运行消息,运行所述代码运行消息所包含的分段代码,生成所述代码运行消息对应的代码运行结果;
获取所述代码运行消息所携带的全局标识符,确定与所述全局标识符相关联的第i个单元区域,将所述代码运行结果确定为所述第i个单元区域中的分段代码所对应的分段运行结果。
16.根据权利要求15所述的方法,其特征在于,还包括:
创建所述第i个单元区域对应的显示配置对象,构建与所述显示配置对象相关联的第一通讯程序接口,为所述第一通讯程序接口设置所述全局标识符;
将所述全局标识符传输至所述用户终端,以使所述用户终端创建携带所述全局标识符的第二通讯程序接口;所述第二通讯程序接口用于链接至所述编程教学页面中的第i个单元区域。
17.一种数据处理装置,其特征在于,包括:
区域显示模块,用于在编程教学页面中显示N个单元区域;所述N个单元区域包括代码输入子区域和结果展示子区域,所述代码输入子区域用于输入分段代码,N为正整数;
结果输出模块,用于响应针对所述N个单元区域中的第i个单元区域所包含的分段代码的运行操作,在所述第i个单元区域的结果展示子区域中,输出所述第i个单元区域中的分段代码所对应的分段运行结果;i为小于或等于N的正整数。
18.一种数据处理装置,其特征在于,包括:
消息接收模块,用于接收用户终端发送的代码运行消息,运行所述代码运行消息所包含的第i个单元区域中的分段代码,生成所述第i个单元区域中的分段代码所对应的分段运行结果;所述第i个单元区域属于编程教学页面中的N个单元区域,所述N个单元区域包括代码输入子区域和结果展示子区域,所述代码输入子区域用于输入分段代码,i和N均为正整数,且i小于或等于N;
结果发送模块,用于将所述第i个单元区域中的分段代码所对应的分段运行结果返回至所述用户终端,以使所述用户终端在所述第i个单元区域的结果展示子区域中,输出所述第i个单元区域中的分段代码所对应的分段运行结果。
19.一种计算机设备,其特征在于,包括存储器和处理器;
所述存储器与所述处理器相连,所述存储器用于存储计算机程序,所述处理器用于调用所述计算机程序,以使得所述计算机设备执行权利要求1-16任一项所述的方法。
20.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质中存储有计算机程序,所述计算机程序适于由处理器加载并执行,以使得具有所述处理器的计算机设备执行权利要求1-16任一项所述的方法。
CN202110844636.4A 2021-07-26 2021-07-26 数据处理方法、装置、计算机设备以及存储介质 Active CN113485714B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110844636.4A CN113485714B (zh) 2021-07-26 2021-07-26 数据处理方法、装置、计算机设备以及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110844636.4A CN113485714B (zh) 2021-07-26 2021-07-26 数据处理方法、装置、计算机设备以及存储介质

Publications (2)

Publication Number Publication Date
CN113485714A true CN113485714A (zh) 2021-10-08
CN113485714B CN113485714B (zh) 2024-05-14

Family

ID=77942591

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110844636.4A Active CN113485714B (zh) 2021-07-26 2021-07-26 数据处理方法、装置、计算机设备以及存储介质

Country Status (1)

Country Link
CN (1) CN113485714B (zh)

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20040259060A1 (en) * 2001-11-22 2004-12-23 Vivek Kumar System and method for software learning
US20060123028A1 (en) * 2004-12-03 2006-06-08 International Business Machines Corporation Method and apparatus for defining and instrumenting reusable Java server page code snippets for website testing and production
US20120110559A1 (en) * 2009-06-26 2012-05-03 Codeplay Software Limited Processing method
CN107491388A (zh) * 2017-07-28 2017-12-19 深圳市元征科技股份有限公司 一种定位程序代码中bug的方法及装置
WO2019133224A1 (en) * 2017-12-29 2019-07-04 Rose River Software, Llc Interactive learning tool
CN111240673A (zh) * 2020-01-08 2020-06-05 腾讯科技(深圳)有限公司 互动图形作品生成方法、装置、终端及存储介质

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20040259060A1 (en) * 2001-11-22 2004-12-23 Vivek Kumar System and method for software learning
US20060123028A1 (en) * 2004-12-03 2006-06-08 International Business Machines Corporation Method and apparatus for defining and instrumenting reusable Java server page code snippets for website testing and production
US20120110559A1 (en) * 2009-06-26 2012-05-03 Codeplay Software Limited Processing method
CN107491388A (zh) * 2017-07-28 2017-12-19 深圳市元征科技股份有限公司 一种定位程序代码中bug的方法及装置
WO2019133224A1 (en) * 2017-12-29 2019-07-04 Rose River Software, Llc Interactive learning tool
CN111240673A (zh) * 2020-01-08 2020-06-05 腾讯科技(深圳)有限公司 互动图形作品生成方法、装置、终端及存储介质

Also Published As

Publication number Publication date
CN113485714B (zh) 2024-05-14

Similar Documents

Publication Publication Date Title
Rädle et al. Codestrates: Literate computing with webstrates
Hales HTML5 and JavaScript Web Apps
US10019424B2 (en) System and method that internally converts PowerPoint non-editable and motionless presentation mode slides into editable and mobile presentation mode slides (iSlides)
CN114356190B (zh) 基于Web的AI可视化建模流程绘制方法、系统及用途
US20230119466A1 (en) Code block element for integrated graphic design system
CN113326043B (zh) 网页渲染方法、网页制作方法及网页渲染系统
CN112905179A (zh) 移动端h5页面生成方法、装置、电子设备和存储介质
CN113326044A (zh) 一种基于控件库的开发方法、系统及存储介质
Halliday Vue. js 2 Design Patterns and Best Practices: Build enterprise-ready, modular Vue. js applications with Vuex and Nuxt
Paul et al. React Native for Mobile Development
CN113495730A (zh) 资源包的生成及解析方法和装置
WO2023069561A1 (en) Code block element for integrated graphic design system
CN113485714B (zh) 数据处理方法、装置、计算机设备以及存储介质
CN115994517A (zh) 信息处理方法、装置、存储介质、设备及程序产品
CN113296759B (zh) 用户界面处理方法、用户界面处理系统、设备及存储介质
CN114003218A (zh) 构建数据可视化组件库的方法、装置、设备及介质
Gad Building Android Apps in Python Using Kivy with Android Studio: With Pyjnius, Plyer, and Buildozer
CN111694723B (zh) 产品在h5下运行时对节点及组件编辑的方法、存储介质
Muyldermans How does the virtual DOM compare to other DOM update mechanisms in JavaScript frameworks
KR102382703B1 (ko) 어플리케이션 개발을 위한 멀티채널통합플랫폼 저작장치 및 저작방법
KR102529627B1 (ko) 코딩 방법 및 코딩 교육 시스템
US20240126978A1 (en) Determining attributes for elements of displayable content and adding them to an accessibility tree
Barney Developing hybrid applications for the iPhone: using HTML, CSS, and JavaScript to build dynamic apps for the iPhone
Strazzullo Frameworkless Front-End Development
KR100553707B1 (ko) Scorm 기반의 컨텐츠 생성시스템

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
REG Reference to a national code

Ref country code: HK

Ref legal event code: DE

Ref document number: 40052871

Country of ref document: HK

GR01 Patent grant
GR01 Patent grant