CN107423049A - 实现在线编程的方法、浏览器和终端设备 - Google Patents

Abstract

本申请提供了一种实现在线编程的方法、浏览器和终端设备，该浏览器包括：显示交互接口，用于在浏览器页面中接收针对图形的编程操作并显示对应的图形；在线编程模块，用于保存图形与模块化代码之间的对应关系，确定编程操作对应的模块化代码；JS解释引擎，用于对在线编程模块确定的模块化代码进行解释，并将解释结果返回在线编程模块；Canvas元素接口，用于接受在线编程模块的调用，根据解释结果绘制显示交互接口对应的编辑面板、显示面板和图形并由显示交互接口进行显示。降低了在线编程的实现门槛，不需要搭建IDE，利用不同的浏览器内核即可实现跨平台。

Description

实现在线编程的方法、浏览器和终端设备

技术领域

本申请涉及程序开发技术领域，尤其涉及一种实现在线编程的方法、浏览器和终端设备。

背景技术

未来科技趋势需要每个人都有一定的程序开发能力，编程或将作为一种基本生活技能。当前编程教育非常火热，教育形式主要是课堂进行编程学习。普遍的学习内容是C，Java，等代码类编程，无基础入门难度大，而且需要在面对对象、面对过程中反复转换思维模式，而且编程产物多为字节码，运行时多为控制台，不利于编程兴趣培养。

为了避免编程学习过程中的枯燥乏味，图形化编程越来越流行。当前主流图形化编程主要是如下几类：(1)基于flash的绘图，存在以下缺点：性能差，漏洞多，兼容性差，跨平台能力差，而且flash即将面临淘汰；(2)基于集成开发环境(Integrated DevelopmentEnvironment，IDE)的图形用户界面(Graphical User Interface，GUI)编程，其缺点是IDE内存占用大，环境配置入门难，便携性差，跨平台性差，依赖基础编程语言的开发能力。

基于IDE的GUI编程，例如swing，Tkinter等。其目的是实现当前平台的程序的图形化。当然，几乎所有的IDE通过原生或通过插件实现图形化编程，其实质依然是代码编程。只是预定义了部分图形与代码块的对应关系。其实际的工作机制依然是依赖于代码进行图形的定义和实例化。所以如果对代码理解不深，仅对图形进行操作，仍然很难实现正常功能，甚至会遇到各种报错，入门难度比较大。而且IDE普遍集成了很多模块，结构比较庞大，对环境配置都有一定的要求，一般的移动终端难以承载，便携性基本为零。而且对于不同操作系统，同一套IDE肯定是不能跨平台运行的。

例如使用基于IDE的swing GUI编程时，首先在Windows环境下配置好Java开发环境，进入IDE中安装swing插件。重启IDE使配置生效。就有了swing的图形控件面板。用代码定义并实例化其中的图形，生成Java工程。使用配置好的编译器进行编译，编译后生成字节码。在Java虚拟机中运行字节码，虚拟机自动调用系统的图形应用程序编程接口(Application Programming Interface，API)，最终使图形化工程显示在屏幕上。

不同的操作系统拥有不同的图形API，同一套图形代码很难通用所有操作系统。并且，在开发前期需要进行开发环境的配置搭建，对于新手而言这个过程非常磨灭编程兴趣。

发明内容

有鉴于此，本申请实施例提供了一种在线编程的方法、浏览器和终端设备，用以解决现有技术中搭建IDE对新手而言过于复杂并且不能跨平台运行的技术问题。

根据本申请实施例的一个方面，提供了一种实现在线编程的浏览器，包括：显示交互接口，用于在浏览器页面中接收针对图形的编程操作并显示对应的图形；在线编程模块，用于保存图形与模块化代码之间的对应关系，确定编程操作对应的模块化代码；JS解释引擎，用于对在线编程模块确定的模块化代码进行解释，并将解释结果返回在线编程模块；Canvas元素接口，用于接受在线编程模块的调用，根据解释结果绘制显示交互接口对应的编辑面板、显示面板和图形并由显示交互接口进行显示。

根据本申请实施例的另一方面，提供了一种实现在线编程的方法，适用于第一终端设备，所述方法包括：检测到打开在线编程页面的操作时，确定初始化函数对应的模块化代码；对初始化函数对应的模块化代码进行解释，得到第一解释结果；根据第一解释结果绘制初始化的编辑面板和显示面板；在在线编程页面中显示编辑面板和显示面板。

根据本申请实施例的另一方面，提供了一种服务器，包括：处理器；用于存储处理器可执行指令的存储器；其中，所述处理器被配置为：控制本申请实施例所述的浏览器执行本申请实施例提供的实现在线编程的方法。

本申请实施例的有益效果包括：在浏览器的在线编程模块中建立图形与模块化代码的对应关系，由JS解释引擎对图形对应的模块化代码进行解释，Canvas元素接口按照解释结果绘制编辑面板、显示面板以及内部的图形，这种图形化在线编程方式更容易实现，不再需要搭建IDE，利用不同的浏览器内核即可实现跨平台。

附图说明

通过以下参照附图对本申请实施例的描述，本申请的上述以及其它目的、特征和优点将更为清楚，在附图中：

图1是本申请实施例提供的实现在线编程的浏览器的架构示意图；

图2是本申请实施例提供的实现在线编程的方法的流程示意图；

图3是本申请实施例提供的实现在线编程的方法的流程示意图；

图4是本申请实施例的一种应用场景示意图。

具体实施方式

以下基于实施例对本申请进行描述，但是本申请并不仅仅限于这些实施例。在下文对本申请的细节描述中，详尽描述了一些特定的细节部分。对本领域技术人员来说没有这些细节部分的描述也可以完全理解本申请。为了避免混淆本申请的实质，公知的方法、过程、流程、元件和电路并没有详细叙述。

此外，本领域普通技术人员应当理解，在此提供的附图都是为了说明的目的，并且附图不一定是按比例绘制的。

除非上下文明确要求，否则整个说明书和权利要求书中的“包括”、“包含”等类似词语应当解释为包含的含义而不是排他或穷举的含义；也就是说，是“包括但不限于”的含义。

在本申请的描述中，需要理解的是，术语“第一”、“第二”等仅用于描述目的，而不能理解为指示或暗示相对重要性。此外，在本申请的描述中，除非另有说明，“多个”的含义是两个或两个以上。

本申请实施例在浏览器的在线编程模块中建立图形与模块化代码的对应关系，由JS解释引擎对图形对应的模块化代码进行解释，Canvas元素接口按照解释结果绘制编辑面板、显示面板以及内部的图形，并由显示交互接口进行展示，这种图形化在线编程方式更容易实现，不需要搭建IDE，利用不同的浏览器内核即可实现跨平台，并且便于各种移动设备安装使用，提高了图形化在线编程工具的便携性。

图1是本申请实施例提供的实现在线编程的浏览器架构示意图，该浏览器包括显示交互接口10，在线编程模块11，JS解释引擎12和Canvas元素接口13。

浏览器被打开后，利用排版引擎在页面中加载基本页面内容并进行显示，基本页面内容包括：页面整体布局、框架模型、相关的文本及图片等。在整体页面布局中配置有显示交互接口10对应的编辑面板和显示面板的所在位置。编辑面板用于响应编程操作(对预定义图形进行的组合)，显示面板用于展示图形化编程的运行结果。显示交互接口10的编辑面板、显示面板及编辑面板和显示面板内部的图形由Canvas元素接口13绘制。

在线编程模块11保存有图形与模块化代码之间的对应关系，根据在编辑面板进行的编程操作所形成的图形组合，确定该图形组合整体对应的模块化代码。该模块化代码可视为JavaScript脚本。

在线编程模块11将图形组合对应的模块化代码交由JS解释引擎12进行解释。JS解释引擎12能够读懂其中的JavaScript脚本代码，并准确地给出JavaScript脚本运行结果(即解释结果)。JS解释引擎将解释结果返回在线编程模块11，在线编程模块11根据模块化代码与图形之间的对应关系确定JavaScript脚本运行结果对应的图形及其属性、方法等，然后调用Canvas元素接口13进行绘制。Canvas元素接口13用于在浏览器页面上绘制图形，Canvas元素可以直接在超文本标记语言(HyperText Markup Language，HTML)上进行图形操作，因此在编辑面板针对图形进行编程操作时显示的图形以及在显示面板中显示的运行结果图形都可以由Canvas元素进行绘制和渲染。Canvas元素接口13根据解释结果对应的图形及其属性、方法绘制出相应的图形，还可以根据初始化函数返回的解释结果在页面的相应位置绘制出预定义大小的空白的编辑面板和显示面板。Canvas元素接口13绘制出的编辑面板、显示面板和图形由显示交互接口10进行显示。

利用浏览器的排版引擎，对预定义的图形化界面进行渲染排版，再通过对图形进行属性、方法的定义，建立与模块化代码之间的对应关系，使浏览器具备图形化编程的能力。同时利用JS解析器，对图形组合对应的目标代码进行解释，然后由浏览器的Canvas元素接口按照解释结果绘制对应的显示内容，实现图形化的编程操作和运行结果的展示。目标代码能够采用标准解释器进行解释，使得图形化工程与标准代码工程别无二致，实现门槛低，可适用于不同操作系统的浏览器从而实现图形化在线编程的跨平台应用，可广泛适用于搭载各种操作系统的移动终端从而提升便携性，同时保留底层编程语言(如Java、C++等)的能力。

可用于本申请实施例的图形化在线编程的浏览器内核包括blink(其JS解释引擎为ChromeV8)、Gecko(其JS解释引擎为TraceMonkey或SpiderMonkey)、Presto(其JS解释引擎为Carakan)、Webkit(其JS解释引擎为SquirrelFish Extreme)等，相应的，各种浏览器内核分别对应Chrome、Mozilla Firefox、Opera、Safari等浏览器，从而可适用于不同类型的操作系统，可适配更多类型的终端设备。

在线编程模块11中，初始化函数对应的模块化代码定义了编辑面板、显示面板在页面中的位置、大小等基本属性。此外，与模块化代码建立对应关系的图形包括框架、对象、对象属性和方法。其中，框架可视为对象的容器，在框架区域内进行对象的编辑和显示。对象的各种属性和方法也分别对应着不同图形，在进行编程操作时，可选择与对象相关联的不同图形来确定该对象所具有的不同属性和方法。

针对不同的应用场景，可以将框架的图形配置为背景图片、舞台空间等，在其范围内进行图形化编程操作，例如在儿童编程教学的应用场景下，使用充满童趣的背景图片、舞台空间有助于降低编程教学的枯燥程度、提升编程教学质量。

对象的图形可以是具体的物体，与框架相配合形成风格一致的显示效果；对象的各种属性分别对应不同的图形并且与该物体相关联，能够改变物体的显示效果；对象的方法则能够为该对象附加其他展示效果，包括移动效果、声音效果等，代表不同方法的图形则对应着不同的方法函数，如已封装的坐标移动函数、声音播放函数等。其目的都是为了增强图形化编程的展示效果，以便于配合各种图形化在线编程的应用场景。

利用上述浏览器进行图形化在线编程时包括以下过程，首先要进行图形化编程页面的初始化，如图2所示，初始化过程包括以下步骤。

S20，在检测到打开在线编程页面的操作时确定初始化函数对应的模块化代码；

S21，对初始化函数对应的模块化代码进行解释，得到第一解释结果；

S22，根据第一解释结果绘制初始化的编辑面板和显示面板；

S23，在在线编程页面中显示编辑面板和显示面板。

可通过预设地址直接链接到已保存在终端设备本地的在线编程页面或者链接到远程的在线编程页面。打开该页面时执行页面初始化函数，在线编程模块确定初始化函数对应的模块化代码，交由JS解释引擎进行解释。JS解释引擎将初始化函数的运行结果(即第一解释结果)返回在线编程模块。在线编程模块调用Canvas元素接口，Canvas元素接口按照第一解释结果绘制出编辑面板和显示面板并由显示交互接口进行展示。在初始化过程中，Canvas元素接口还同时绘制浏览器页面的基本页面内容，显示交互接口结合初始化的编辑面板和显示面板进行展示。初始化过程结束后，可在编辑面板内进行图形化的编程操作并在显示面板中显示运行结果，该过程如图3所示。

S24，检测到在编辑面板中针对图形进行组合的编程操作时，确定图形组合对应的模块化代码；

S25，检测到运行图形组合的操作时，对图形组合对应的模块化代码进行解释，得到第二解释结果；

S26，根据第二解释结果在显示面板中绘制图形化的运行结果并显示。

在线编程模块根据编辑面板内的图形化编程操作所形成的图形组合，确定该图形组合中的框架、对象及其属性和方法，进而确定该图形组合整体对应的模块化代码。检测到针对该图形组合的运行指令后，图形组合整体对应的模块化代码交由JS解释引擎执行，接收JS解释引擎执行后返回的运行结果(即第二解释结果)。在线编程模块根据第二解释结果确定其在显示面板中对应的图形并调用Canvas元素接口。Canvas元素接口根据第二解释结果对应的图形在显示面板内完成绘制并由显示交互接口显示，从而让使用者观看到图形化的运行结果。

此外，在初始化完成后，浏览器还可通过超文本传输协议(HyperText TransferProtocol，HTTP)与服务器进行数据交互，获取是否有需要加载的在线工程，在线工程的保存形式为可扩展标记语言(Extensible Markup Language，XML)文件。当存在需要加载的在线工程时，从服务器获取对应的XML文件，在线编程模块根据该XML文件中的元素属性确定对应的模块化代码，经JS解释引擎执行后获取运行结果并调用Canvas元素接口在编辑面板中进行绘制，由显示交互接口在编辑面板中显示出对应的图形。用户可以针对编辑面板中在线工程的图形组合继续进行图形化的在线编程操作，并在显示面板中查看运行结果。

还可以对图形化的在线编程操作所形成的图形组合进行保存，在线编程模块根据图形组合对应的对象以及属性、方法等信息生成XML文件，终端设备通过HTTP上传至服务器。当需要使用或继续编辑该在线工程时，终端设备基于用户的打开操作向服务器发送获取该在线工程的请求并接收到对应的XML文件，在线编程模块根据XML文件的属性信息确认对应的模块化代码后交由JS解释引擎执行，接收JS解释引擎执行后返回的结果(即第三解释结果)。在线编程模块根据第三解释结果确定对应的图形组合后调用Canvas元素接口，由Canvas元素接口在编辑面板中进行绘制并由显示交互接口进行展示。

在如图4所示的在线编程教学场景中，第一终端设备30为讲授者所使用的终端设备，一个或多个第二终端设备31是学习者所使用的终端设备。第一终端设备30和第二终端设备31可以在同一现场(即对应现场教学的场景)，也可以不在同一现场(即对应远程在线教学的场景)。第一终端设备30、第二终端设备31和中央服务器32建立通信连接；如果是现场教学场景，第一终端设备30、第二终端设备31和中央服务器32处于同一以太网内；如果是远程教学场景，第一终端设备30和中央服务器32处于同一以太网内，第二终端设备31设备通过HTTP远程访问中央服务器32。中央服务器32通过实时数据流传输技术实现第一终端设备30与第二终端设备31之间的在线编程页面的数据同步。在这种教学场景下，第一终端设备30可通过中央服务器32控制第二终端设备31在正常模式和教学模式下切换。在教学模式下，第二终端设备31无权限进行图形化在线编程操作，第一终端设备30的在线编程页面数据被同步到第二终端设备31进行显示；切换回正常模式后，第二终端设备31重新获得进行在线编程操作的权限。第二终端设备31可以将本地的在线编程操作形成的图形组合及运行结果以在线工程的方式提交至中央服务器32，第一终端设备30可从中央服务器32获取到第二终端设备31提交的在线工程并在本地查看其中的图形组合及运行结果。

其中，第一终端设备30和第二终端设备31可以是计算机，数字广播终端，消息收发设备，游戏控制台，车载控制台，平板设备，医疗设备，健身设备，个人数字助理等。对于第一终端设备30，作为讲授者使用的终端设备，优选为台式计算机、笔记本计算机、平板设备、教学控制台等，并且优选屏幕尺寸较大(例如大于9英寸)的设备。对于第二终端设备31，为了提高教学方式的灵活性，优选屏幕尺寸较小、便于携带并且具备一定显示效果(例如屏幕尺寸大于4英寸且小于或等于9英寸)的移动设备，特别是在儿童编程教学中，有助于降低编程教学的枯燥程度，激发儿童对编程学习的兴趣。

此外，本申请实施例中，终端设备可以通过硬件处理器(hardware processor)来实现上述各个功能步骤。终端设备包括：处理器，用于存储处理器可执行指令的存储器；其中，处理器被配置为：控制浏览器执行以下指令：检测到打开在线编程页面的操作时，确定初始化函数对应的模块化代码；对初始化函数对应的模块化代码进行解释，得到第一解释结果；根据第一解释结果绘制初始化的编辑面板和显示面板；在在线编程页面中显示所述编辑面板和显示面板。

在一个实施例中，处理器进一步被配置为控制浏览器执行以下指令：

检测到在编辑面板中针对图形进行组合的编程操作时，确定图形组合对应的模块化代码；检测到运行图形组合的操作时，对图形组合对应的模块化代码进行解释，得到第二解释结果；根据第二解释结果在所述显示面板中绘制图形化的运行结果并显示。

在一个实施例中，处理器进一步被配置为控制浏览器执行以下指令：将图形组合和图形化的运行结果同步至第二终端设备；在第二终端设备在线编程页面的编辑面板中显示图形组合，在显示面板中显示图形化的运行结果。

优选的，第一终端设备的屏幕尺寸大于第一预设门限，第二终端设备为屏幕尺寸小于或等于第一预设门限并且大于第二预设门限的移动终端。

在一个实施例中，处理器进一步被配置为控制浏览器执行以下指令：检测到打开在线工程的操作时，从服务器获取到XML形式的工程文件；确定工程文件对应的模块化代码并进行解释，得到第三解释结果；根据第三解释结果在编辑面板中绘制工程文件的图形组合并显示。

其中，所述浏览器包括：显示交互接口，用于在浏览器页面中接收针对图形的编程操作并显示对应的图形；在线编程模块，用于保存图形与模块化代码之间的对应关系，确定编程操作对应的模块化代码；JS解释引擎，用于对在线编程模块确定的模块化代码进行解释，并将解释结果返回在线编程模块；Canvas元素接口，用于接受在线编程模块的调用，根据解释结果绘制显示交互接口对应的编辑面板、显示面板和图形并由显示交互接口进行显示。

在一个实施例中，与模块化代码建立对应关系的图形包括：框架、对象、对象属性和方法。

在一个实施例中，所述框架包括舞台空间、背景图片；所述对象包括被创建的物体，所述对象属性包括物体的图片、大小、形状；所述方法包括已封装的坐标移动函数、声音播放函数。

在一个实施例中，JS解释引擎包括ChromeV8、TraceMonkey、SpiderMonkey、Carakan和SquirrelFish Extreme中的任意一种。

本领域的技术人员应明白，本申请的实施例可提供为方法、装置(设备)、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、装置(设备)和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

以上所述仅为本申请的优选实施例，并不用于限制本申请，对于本领域技术人员而言，本申请可以有各种改动和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (10)

1.一种实现在线编程的浏览器，其特征在于，包括：

显示交互接口，用于在浏览器页面中接收针对图形的编程操作并显示对应的图形；

在线编程模块，用于保存所述图形与模块化代码之间的对应关系，确定所述编程操作对应的模块化代码；

JS解释引擎，用于对所述在线编程模块确定的模块化代码进行解释，并将解释结果返回所述在线编程模块；

Canvas元素接口，用于接受所述在线编程模块的调用，根据所述解释结果绘制所述显示交互接口对应的编辑面板、显示面板和图形并由所述显示交互接口进行显示。

2.根据权利要求1所述的浏览器，其特征在于，与所述模块化代码建立对应关系的图形包括：框架、对象、对象属性和方法。

3.根据权利要求2所述的浏览器，其特征在于，

所述框架包括舞台空间、背景图片；

所述对象包括被创建的物体，所述对象属性包括所述物体的图片、大小、形状；

所述方法包括已封装的坐标移动函数、声音播放函数。

4.根据权利要求1所述的浏览器，其特征在于，所述JS解释引擎包括ChromeV8、TraceMonkey、SpiderMonkey、Carakan和SquirrelFishExtreme中的任意一种。

5.一种实现在线编程的方法，其特征在于，适用于第一终端设备，所述方法包括：

检测到打开在线编程页面的操作时，确定初始化函数对应的模块化代码；

对所述初始化函数对应的模块化代码进行解释，得到第一解释结果；

根据所述第一解释结果绘制初始化的编辑面板和显示面板；

在所述在线编程页面中显示所述编辑面板和显示面板。

6.根据权利要求5所述的方法，其特征在于，所述方法还包括：

检测到在所述编辑面板中针对图形进行组合的编程操作时，确定图形组合对应的模块化代码；

检测到运行图形组合的操作时，对所述图形组合对应的模块化代码进行解释，得到第二解释结果；

根据所述第二解释结果在所述显示面板中绘制图形化的运行结果并显示。

7.根据权利要求6所述的方法，其特征在于，所述方法还包括：

将所述图形组合和图形化的运行结果同步至第二终端设备；

在所述第二终端设备在线编程页面的编辑面板中显示所述图形组合，在显示面板中显示所述图形化的运行结果。

8.根据权利要求7所述的方法，其特征在于，所述第一终端设备的屏幕尺寸大于第一预设门限，所述第二终端设备为屏幕尺寸小于或等于所述第一预设门限并且大于第二预设门限的移动终端。

9.根据权利要求5所述的方法，其特征在于，所述方法还包括：

检测到打开在线工程的操作时，从服务器获取到XML形式的工程文件；

确定所述工程文件对应的模块化代码并进行解释，得到第三解释结果；

根据所述第三解释结果在所述编辑面板中绘制所述工程文件的图形组合并显示。

10.一种终端设备，其特征在于，包括

处理器；

用于存储处理器可执行指令的存储器；

其中，所述处理器被配置为：控制如权利要求1至4任意一项所述的浏览器执行如权利要求5至9任意一项所述的实现在线编程的方法。