基于图形化编辑器的编程实现方法、装置及设备

摘要

本发明公开了一种基于图形化编辑器的编程实现方法、装置及设备，该方法包括：通过图形化编辑器的前端获取用户输入的代码；所述代码为python代码或图形化积木；检测到代码输入完毕且运行指令被触发，则根据输入的代码导入对应的资源；根据对应的资源将python代码编译成js代码，并将所述js代码传输至js实现的python运行环境；获取js代码的执行结果，根据执行结果的类型执行对应的操作，完成编程。本发明实施例可实现让学生通过在线平台深入学习python语言，同时，通过代码与图形积木的相互映射；降低了学生的认知难度及进入门槛。

说明书

技术领域

本发明涉及编程技术领域，尤其涉及一种基于图形化编辑器的编程实现方法、装置及设备。

背景技术

Python是一种跨平台的计算机程序设计语言。是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。最初被设计用于编写自动化脚本(shell)，随着版本的不断更新和语言新功能的添加，越多被用于独立的、大型项目的开发。

由于Python学习的属性和特点，Python编辑器使用频率及使用需求更高，在现有技术中，Python编辑器只能编写代码，不能编译成可视形式的图形化积木形式，以及应用于硬件上。为了初学者学习python编程以及编程基础普及，python编程需要进行技术降维，并符合使用者认知习惯。因此，需要有一个能编译成图形化积木以及应用于硬件的Python编辑器。现有的python编辑器学习难度高，不利于初学者学习使用。

因此，现有技术还有待于改进和发展。

发明内容

鉴于上述现有技术的不足，本发明的目的在于提供一种基于图形化编辑器的编程实现方法、装置及设备，旨在解决现有技术中python编辑器学习难度高，不利于初学者学习使用的技术问题。

本发明的技术方案如下：

一种基于图形化编辑器的编程实现方法，所述图形化编辑器可实现将python代码与图形化积木相互转换；所述方法包括：

检测到用户登录成功后，通过图形化编辑器的前端获取用户输入的代码；所述代码为python代码或图形化积木；

检测到代码输入完毕且运行指令被触发，则根据输入的代码导入对应的资源；

根据对应的资源将python代码编译成js代码，并将所述js代码传输至js实现的python运行环境；

获取js代码的执行结果，根据执行结果的类型执行对应的操作，完成编程。

进一步地，所述根据执行结果的类型执行对应的操作后，完成编程前，包括：

获取js代码对应的操作指令，判断是否进行循环和/或延时操作；

若进行循环和/或延时操作，则通过递归调用控制循环和/或延时操作后，运行js代码；

若不进行循环和/或延时操作，则运行js代码。

进一步优选地，所述若执行结果的类型为需要输入，则根据执行结果的类型执行对应的操作,包括：

调用输入函数，通过命令行进行输入。

进一步优选地，若执行结果的类型为需要输出，则根据执行结果的类型执行对应的操作,包括：

调用输出函数，通过命令行进行输出。

优选地，若执行结果的类型为绘图，则根据执行结果的类型执行对应的操作,包括：

调用canvas绘制图形，并通过监听事件实现交互。

进一步地，所述获取js代码的执行结果，根据执行结果的类型执行对应的操作，完成编程后，还包括：

获取用户在本地的编程作品，对编程作品进行打包，处理为对应的二进制数据包，将所述二进制数据包上传至服务器。

进一步地，所述通过图形化编辑器的前端获取用户输入的代码，包括：

获取当前的编程模式，若当前的编程模式为协同模式，则通过图形化编辑器的前端获取多个在线用户输入的代码。

本发明的另一实施例提供了一种基于图形化编辑器的编程实现装置，所述图形化编辑器可实现将python代码与图形化积木相互转换；装置包括：

输入代码获取模块，用于通过图形化编辑器的前端获取用户输入的代码；所述代码为python代码或图形化积木；

资源导入模块，用于检测到代码输入完毕且运行指令被触发，则根据输入的代码导入对应的资源；

编译模块，用于根据对应的资源将python代码编译成js代码，并将所述js代码传输至js实现的python运行环境；

运行模块，用于获取js代码的执行结果，根据执行结果的类型执行对应的操作，完成编程。

本发明的另一实施例提供了一种基于图形化编辑器的编程实现设备，所述设备包括至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行上述的基于图形化编辑器的编程实现方法。

本发明的另一实施例还提供了一种非易失性计算机可读存储介质，所述非易失性计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行时，可使得所述一个或多个处理器执行上述的基于图形化编辑器的编程实现方法。

有益效果：本发明实施例可实现让学生通过在线平台深入学习python语言，通过代码与图形积木的相互映射；降低了学生的认知难度及进入门槛。

附图说明

下面将结合附图及实施例对本发明作进一步说明，附图中：

图1为本发明一种基于图形化编辑器的编程实现方法较佳实施例的流程图；

图2为本发明一种基于图形化编辑器的编程实现装置的较佳实施例的功能模块示意图；

图3为本发明一种基于图形化编辑器的编程实现设备的较佳实施例的硬件结构示意图。

具体实施方式

为使本发明的目的、技术方案及效果更加清楚、明确，以下对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。以下结合附图对本发明实施例进行介绍。

本发明实施例提供了一种基于图形化编辑器的编程实现方法。请参阅图1，图1为本发明一种基于图形化编辑器的编程实现方法较佳实施例的流程图。所述图形化编辑器可实现将python代码与图形化积木相互转换；如图1所示，其包括步骤：

步骤S100、检测到用户登录成功后，通过图形化编辑器的前端获取用户输入的代码；所述代码为python代码或图形化积木；

步骤S200、检测到代码输入完毕且运行指令被触发，则根据输入的代码导入对应的资源；

步骤S300、根据对应的资源将python代码编译成js代码，并将所述js代码传输至js实现的python运行环境；

步骤S400、获取js代码的执行结果，根据执行结果的类型执行对应的操作，完成编程。

具体实施时，本发明实施例的通过图形化编辑器包括图片资源管理模块、文件资源管理模块、项目打包模块、代码编辑模块、UI功能管理模块，图形资源管理模块包括以下功能：本地导入，在线编辑、删除、复制、修改名称；文件资源管理模块功能如下：本地文件导入，文件下载到本地，创建文件，文件改名，删除文件；项目打包模块功能如下：打包文件和图片资源到服务器，从服务器读取项目解析到浏览器；代码编辑模块功能如下：代码编辑，代码高亮，代码提醒；UI功能管理模块功能如下：主题换肤，页面模块大小可调整。

基于上述的图形化编辑器，检测到用户登录后，前端获取用户输入的代码，对输入的代码进行高亮提示；代码输入完成后，检测到运行指令，则导入模块插件及文件及图片资源；将python代码编译成js代码；将js代码传输至js实现的python运行环境；获取代码的类型，根据类型执行对应的操作，完成一次编程。

本发明实施例提供的图形化编辑器通过React前端库搭建的单页面应用。代码编辑部分使用的是Ace编辑器实现代码的输入，高亮，和代码提示。代码编译部分通过封装Python标准库来实现python代码的在线编译及运行。可以通过python的turtle,pygame,库来绘制图形和使用图片资源，图片资源可以本地导入，也可通过图片编辑器修改图片。图片编辑器通过canvas导入图片来展现和处理图片变形，裁剪，绘制等功能。打开本地的页面通过input选择文件，通过FileReader读取文件。其中：input是html中上传文件的控件，FileReader：是浏览器封装的系统函数，将文件流转义为数据流，是本地读取文件的常用解决方案，我们在其中加入了文件校验、过滤、压缩等功能。

图形化编辑器中文件下载到本地通过构建文件和本地的URL下载到用户的计算机。打开的页面可以修改文件名和删除文件，可以把文件和图片资源打包为项目存储到服务器，也可从服务器读取项目还原到浏览器。

图形化编辑器可以加载python的第三方库，编译前从远程服务器下载或者加载本地文件，编译前导入需要的库就可以正常编译。在UI上通过改变配色来换肤，通过拖动可以改变编辑器各模块的大小。

本发明实施提供的图形化编辑器，通过模块化编译代码，应用到硬件、作品分享、以及多人改编作品。有效解决了市面上同类编辑器对Python的可视化，模块化编程，第三方python库导入，项目所用资源编辑存储，和项目管理的支持不足的问题。

本发明通过对比python语法特性，进行JavaScript的语义对应转换，默认封装了市面上常用的python库，如Pygame、numpy、urllib、urllib2、requests等，分别对用了python开发中的科学计算、网络爬虫、图形图表、文件访问等，让学生通过一个在线平台深入学习python语言。同时，通过代码与图形积木的相互映射，可以从代码转化为以SVG技术生成的图形化积木或从图形化积木转换位python语言。降低了学生的认知难度及进入门槛。

在一些其他的实施例中，图形化编辑器还可以实现模块化编译代码。具体地，通过python关键字[import]识别导入模块，该模块可以是学生自己定义的模块，也可以是第三方成熟的Python模块，当系统识别模块名称时，从服务器拉取模块对应的JavaScript转义后的模块，进行本地即时编译运行。

进一步地，根据执行结果的类型执行对应的操作后，完成编程前，包括：

获取js代码对应的操作指令，判断是否进行循环和/或延时操作；

若进行循环和/或延时操作，则通过递归调用控制循环和/或延时操作后，运行js代码；

若不进行循环和/或延时操作，则运行js代码。

具体实施时，获取js代码对应的操作指令，判断是否进行循环和/或延时操作，若需要进行循环和/或延时操作，则通过递归调用控制循环和/或延时操作后，运行js代码，若在延时过程中，检测到终止指令，若代码运行终止。

进一步地，若执行结果的类型为需要输入，则根据执行结果的类型执行对应的操作,包括：

调用输入函数，通过命令行进行输入。

进一步地，若执行结果的类型为需要输出，则根据执行结果的类型执行对应的操作,包括：

调用输出函数，通过命令行进行输出。

进一步地，若执行结果的类型为绘图，则根据执行结果的类型执行对应的操作,包括：

调用canvas绘制图形，并通过监听事件实现交互。

具体实施时，代码对应的执行结果可能是需要输入、需要输出或绘图中的一种。若执行结果是需要输入，则调用对应的输入函数，通过命令行进行输入；

若执行结果是需要输出，则调用对应的输出函数，通过命令行进行输出；

若执行结果是绘图，则使用canvas绘制图形，并通过事件监听实现交互。

进一步地，获取js代码的执行结果，根据执行结果的类型执行对应的操作，完成编程后，还包括：

获取用户在本地的编程作品，对编程作品进行打包，处理为对应的二进制数据包，将所述二进制数据包上传至服务器。

具体实施时，通过对学生作品的本地打包后，编辑为二进制数据包，存储于中心服务器。该作品可在任何时间，任何地点，在任何客户端进行重新打开，编辑，编译，运行，同时，通过社区展示、微信分享、朋友圈进行代码的完整截图，生成图片，同时，也可直接分享可运行的结果，进行分享。可以是一个可互动的小游戏，可以是一个小工具，可以是一个解决问题的方案等。

降低了对于编程环境的依赖，同时以中心服务器的方式组织存储项目源文件，在任何设备上进行存储，提取，运行，学生可以进行登入账号后的个人存储空间，进行项目的分发、分享、协同，降低了学生开发难度，学习难度、学习成本、兴趣成本。更好的将Python学习融入到日常生活中。

进一步地，通过图形化编辑器的前端获取用户输入的代码，包括：

获取当前的编程模式，若当前的编程模式为协同模式，则通过图形化编辑器的前端获取多个在线用户输入的代码。

具体实施时，通过Websocket协议，在老师带领下，以小组的方式进行多方协同开发同一个项目，同时调试，同时编写代码，同时可以对代码进行多方代码标注，同时查看运行效果，保证实时的网络延迟率低于5毫秒。进一步，通过激励方式，让其他用户开放自己的源代码，让更多的学生可以通过开放的源代码进行二次改变，形成一个改编数据链，形成一个开源的氛围。

在进一步的实施例中，图形化编辑器还可实现代码逐步调试功能，通过对python的封装，实现逐步运行，查看堆栈和变量；新增项目组，实现多人协作编程，以及版本管理；提供更多的案例；提供更多的换肤主题；优化命令行，可以支持简单的命令。

本发明还提供了一种基于图形化编辑器的编程实现方法的具体应用实施例，步骤如下：

通过账号登录到python编辑器；

在自己的账号下进行创作，保存，分享，打开已存储方案，打开本地python的代码等；

在代码中可嵌入图片，声音、文件资源，图片通过一个在线图片编辑器进行编辑；

点击运行，可运行效果一种为控制台的文字输出，一种为图像化界面的运行输出；同时，我们加入编辑器的基本设置，例如白天，黑夜模式，文字大小调整等。同时输入项目名称，将通过服务器存储的方式组织保存学生的作品，与现有技术相比，流程化并系统的解决项目文件最终的组织方式，及存储方式。

由以上方法实施例可知，本发明提供了一种基于图形化编辑器的编程实现方法，实现利用较小的资源完成课程的讲授，用一个工具解决图形化转Python代码的问题。Python和Javascript是非常不同的语言，它们的类型不同，作用域规则也不同。编译器运行环境使用Javascript实现全局变量，局部变量，上下文和错误处理，再将python翻译成相应的Javascript代码在其中运行。模块引入会触发read事件，read将会遍历文件路径，以找到文件。我们可以在这儿将模块或者第三方库导入，遍历模块时返回的就是定义好的python代码。第三方库可以选择从服务器上下载，常用的包放在本地，自动加载。

需要说明的是，上述各步骤之间并不必然存在一定的先后顺序，本领域普通技术人员，根据本发明实施例的描述可以理解，不同实施例中，上述各步骤可以有不同的执行顺序，亦即，可以并行执行，亦可以交换执行等等。

本发明另一实施例提供一种基于图形化编辑器的编程实现装置，如图2所示，装置1包括：

输入代码获取模块11，用于通过图形化编辑器的前端获取用户输入的代码；所述代码为python代码或图形化积木；

资源导入模块12，用于检测到代码输入完毕且运行指令被触发，则根据输入的代码导入对应的资源；

编译模块13，用于根据对应的资源将python代码编译成js代码，并将所述js代码传输至js实现的python运行环境；

运行模块14，用于获取js代码的执行结果，根据执行结果的类型执行对应的操作，完成编程。

具体实施方式见方法实施例，此处不再赘述。

本发明另一实施例提供一种基于图形化编辑器的编程实现设备，如图3所示，设备10包括：

一个或多个处理器110以及存储器120，图3中以一个处理器110为例进行介绍，处理器110和存储器120可以通过总线或者其他方式连接，图3中以通过总线连接为例。

处理器110用于完成，设备10的各种控制逻辑，其可以为通用处理器、数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)、单片机、ARM(Acorn RISCMachine)或其它可编程逻辑器件、分立门或晶体管逻辑、分立的硬件组件或者这些部件的任何组合。还有，处理器110还可以是任何传统处理器、微处理器或状态机。处理器110也可以被实现为计算设备的组合，例如，DSP和微处理器的组合、多个微处理器、一个或多个微处理器结合DSP核、或任何其它这种配置。

存储器120作为一种非易失性计算机可读存储介质，可用于存储非易失性软件程序、非易失性计算机可执行程序以及模块，如本发明实施例中的基于图形化编辑器的编程实现方法对应的程序指令。处理器110通过运行存储在存储器120中的非易失性软件程序、指令以及单元，从而执行设备10的各种功能应用以及数据处理，即实现上述方法实施例中的基于图形化编辑器的编程实现方法。

存储器120可以包括存储程序区和存储数据区，其中，存储程序区可存储操作装置、至少一个功能所需要的应用程序；存储数据区可存储根据设备10使用所创建的数据等。此外，存储器120可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实施例中，存储器120可选包括相对于处理器110远程设置的存储器，这些远程存储器可以通过网络连接至设备10。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

一个或者多个单元存储在存储器120中，当被一个或者多个处理器110执行时，执行上述任意方法实施例中的基于图形化编辑器的编程实现方法，例如，执行以上描述的图1中的方法步骤S100至步骤S400。

本发明实施例提供了一种非易失性计算机可读存储介质，计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行，例如，执行以上描述的图1中的方法步骤S100至步骤S400。

作为示例，非易失性存储介质能够包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦ROM(EEPROM)或闪速存储器。易失性存储器能够包括作为外部高速缓存存储器的随机存取存储器(RAM)。通过说明并非限制，RAM可以以诸如同步RAM(SRAM)、动态RAM、(DRAM)、同步DRAM(SDRAM)、双数据速率SDRAM(DDR SDRAM)、增强型SDRAM(ESDRAM)、Synchlink DRAM(SLDRAM)以及直接Rambus(兰巴斯)RAM(DRRAM)之类的许多形式得到。本文中所描述的操作环境的所公开的存储器组件或存储器旨在包括这些和/或任何其他适合类型的存储器中的一个或多个。

本发明的另一种实施例提供了一种计算机程序产品，计算机程序产品包括存储在非易失性计算机可读存储介质上的计算机程序，计算机程序包括程序指令，当程序指令被处理器执行时，使处理器执行上述方法实施例的基于图形化编辑器的编程实现方法。例如，执行以上描述的图1中的方法步骤S100至步骤S400。

以上所描述的实施例仅仅是示意性的，其中作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际需要选择其中的部分或者全部模块来实现本实施例方案的目的。

通过以上的实施例的描述，本领域的技术人员可以清楚地了解到各实施例可借助软件加通用硬件平台的方式来实现，当然也可以通过硬件实现。基于这样的理解，上述技术方案本质上或者说对相关技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存在于计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机装置(可以是个人计算机，服务器，或者网络装置等)执行各个实施例或者实施例的某些部分的方法。

除了其他之外，诸如"能够'、"能"、"可能"或"可以"之类的条件语言除非另外具体地陈述或者在如所使用的上下文内以其他方式理解，否则一般地旨在传达特定实施方式能包括(然而其他实施方式不包括)特定特征、元件和/或操作。因此，这样的条件语言一般地还旨在暗示特征、元件和/或操作对于一个或多个实施方式无论如何都是需要的或者一个或多个实施方式必须包括用于在有或没有输入或提示的情况下判定这些特征、元件和/或操作是否被包括或者将在任何特定实施方式中被执行的逻辑。

已经在本文中在本说明书和附图中描述的内容包括能够提供基于图形化编辑器的编程实现方法及装置的示例。当然，不能够出于描述本公开的各种特征的目的来描述元件和/或方法的每个可以想象的组合，但是可以认识到，所公开的特征的许多另外的组合和置换是可能的。因此，显而易见的是，在不脱离本公开的范围或精神的情况下能够对本公开做出各种修改。此外，或在替代方案中，本公开的其他实施例从对本说明书和附图的考虑以及如本文中所呈现的本公开的实践中可能是显而易见的。意图是，本说明书和附图中所提出的示例在所有方面被认为是说明性的而非限制性的。尽管在本文中采用了特定术语，但是它们在通用和描述性意义上被使用并且不用于限制的目的。