Method, medium and computer device for previewing task completion effect

Abstract

A task completion effect preview method, medium and computer device, the method applied to a browser comprises: obtaining description information of a target page, the target page being used to display a task completion effect of a target task, the description information being obtained by recording the target page; obtaining user information of a target user accessing a preview page; displaying a preview picture corresponding to the target page on the preview page based on the description information and the user information, the preview picture showing the task completion effect of the target task, the task completion effect being generated based on the user information.

Description

Technical Field

[0001] This disclosure relates to the field of data processing technology, and in particular to methods, media, and computer devices for previewing the results of task completion. Background Technology

[0002] In some scenarios, tasks are assigned to users. After completing the task, users receive corresponding completion effects. To guide users in completing tasks, two methods are typically used. One is to provide users with task introduction materials such as images, text, or videos, allowing them to understand the completion effects. However, the task introduction materials provided to all users are homogeneous, making it impossible to display different completion effects to different users. The other method is to develop a new page and add user-relevant task completion effects to the new page. However, this method involves a larger development workload. Summary of the Invention

[0003] In a first aspect, embodiments of this disclosure provide a method for previewing the completion effect of a task, applied to a browser. The method includes: obtaining description information of a target page, the target page being used to display the completion effect of a target task, the description information being obtained by recording the target page; obtaining user information of a target user accessing the preview page; and displaying a preview screen corresponding to the target page on the preview page based on the description information and the user information, the preview screen displaying the completion effect of the target task, the completion effect being generated based on the user information.

[0004] Secondly, this disclosure provides a method for previewing the completion effect of a task, applied to a server. The method includes: obtaining description information of a target page; the target page is used to display the completion effect of a target task, and the description information is obtained by recording the target page; obtaining user information of a target user accessing the preview page; sending the description information and the user information to a browser, so that the browser displays a preview screen corresponding to the target page on the preview page based on the description information and the user information, the preview screen displaying the completion effect of the target task, and the completion effect being generated based on the user information.

[0005] Thirdly, embodiments of this disclosure provide a computer-readable storage medium having a computer program stored thereon that, when executed by a processor, implements the methods described in any embodiment of this disclosure.

[0006] Fourthly, embodiments of this disclosure provide a computer device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the method described in any embodiment of this disclosure.

[0007] In this embodiment, by recording the target page that displays the task completion effect, descriptive information of the target page is obtained, and the target page can be reproduced based on this descriptive information. This eliminates the need to develop a new page to display the task completion effect, reducing development workload. Furthermore, this embodiment can also generate the task completion effect based on the user information of the target user accessing the preview page, and display the task completion effect in the preview screen corresponding to the target page, thus allowing different task completion effects to be displayed to different users.

[0008] It should be understood that the above general description and the following detailed description are exemplary and explanatory only, and are not intended to limit this disclosure. Attached Figure Description

[0009] The accompanying drawings, which are incorporated in and form part of this disclosure, illustrate embodiments consistent with this disclosure and, together with the description, serve to illustrate the technical solutions of this disclosure.

[0010] Figure 1 This is a flowchart of a method for previewing the task completion effect according to an embodiment of this disclosure.

[0011] Figure 2A This is a schematic diagram of a preview page of an embodiment of this disclosure.

[0012] Figure 2B This is a schematic diagram of the configuration backend of an embodiment of this disclosure.

[0013] Figure 3 This is a schematic diagram showing a preview of an embodiment of this disclosure.

[0014] Figure 4 and Figure 5 This is a general flowchart of an embodiment of the present disclosure.

[0015] Figure 6 This is a flowchart of a method for previewing the task completion effect according to another embodiment of this disclosure.

[0016] Figure 7 This is a schematic diagram of a computer device according to an embodiment of the present disclosure. Detailed Implementation

[0017] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numerals in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this disclosure. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this disclosure as detailed in the appended claims.

[0018] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, data stored, data displayed, etc.) involved in this disclosure are all information and data authorized by the user or fully authorized by all parties. Furthermore, the collection, use and processing of the relevant data must comply with the relevant laws, regulations and standards of the relevant countries and regions, and corresponding operation portals are provided for users to choose to authorize or refuse.

[0019] The terminology used in this disclosure is for the purpose of describing particular embodiments only and is not intended to be limiting of the disclosure. The singular forms “a,” “the,” and “the” as used in this disclosure and the appended claims are also intended to include the plural forms unless the context clearly indicates otherwise. It should also be understood that the term “and / or” as used herein refers to and includes any or all possible combinations of one or more of the associated listed items. Additionally, the term “at least one” herein means any combination of at least two of any one or more of a plurality.

[0020] It should be understood that although the terms first, second, third, etc., may be used in this disclosure to describe various information, such information should not be limited to these terms. These terms are used only to distinguish information of the same type from one another. For example, without departing from the scope of this disclosure, first information may also be referred to as second information, and similarly, second information may also be referred to as first information. Depending on the context, the word "if" as used herein may be interpreted as "when," "when," or "in response to determination."

[0021] To enable those skilled in the art to better understand the technical solutions in the embodiments of this disclosure, and to make the above-mentioned objectives, features and advantages of the embodiments of this disclosure more apparent and understandable, the technical solutions in the embodiments of this disclosure will be further described in detail below with reference to the accompanying drawings.

[0022] In some scenarios, tasks are issued to users. For example, in e-commerce, authentication tasks or activity participation tasks are issued to merchants or buyers. Taking merchants as an example, authentication tasks may involve verifying certain information about a merchant (e.g., whether it is a listed company, number of employees, number of partner manufacturers, etc.). After submitting information to the server, merchants can further submit materials to the server for authentication of the above information, so that the server can authenticate the information submitted by the merchant based on the submitted materials. Activity participation tasks may involve inviting merchants to participate in promotional activities. Merchants can submit information related to the promotional activities to the server, such as the participation period of the promotion, product discount information, and the categories of products participating in the promotion. After completing the task, merchants can obtain task completion results. Task completion results can include image effects and / or text effects. For example, after completing an authentication task, a certificate image and / or specific information about the merchant's authentication can be displayed. When buyers browse certain pages, if a merchant has completed the task, the merchant's information can be displayed on that page, thereby driving traffic to merchants who have completed the task.

[0023] In other scenarios such as gaming and multimedia information viewing, tasks can also be assigned to users. For example, in a gaming scenario, game tasks can be assigned to players. After completing these tasks, players can obtain in-game items. Similarly, in a multimedia information viewing scenario, multimedia information viewing tasks can be assigned to readers (such as tasks requiring a preset viewing time or tasks requiring the viewing of a specific type of multimedia information). After completing these tasks, readers can obtain certain titles.

[0024] Besides the application scenarios and task types listed above, there may be other application scenarios where task publishing is required, and the published tasks are not limited to the task types described in the above embodiments. For the sake of brevity, this disclosure will not list all application scenarios and task types.

[0025] To guide users in completing tasks, a task education page is typically provided. This page introduces or explains the task content and objectives, aiming to explain the task's purpose, benefits (i.e., the outcome of task completion), and how to complete it. Related technologies usually employ two methods. One is to use text, images, or videos to introduce the task completion outcome. In this method, the task information provided to all users is homogeneous, making it impossible to display different task completion outcomes to different users. The other method is to develop a new page and add user-relevant task completion outcomes to that page. However, this method involves a significant development workload. In conclusion, related technologies struggle to dynamically display different task completion outcomes to different users without significantly increasing development workload.

[0026] Based on this, this disclosure provides a method for previewing task completion results, applied to a browser, see [link to relevant documentation]. Figure 1 The method includes:

[0027] Step S12: Obtain the description information of the target page. The target page is used to display the task completion effect of the target task. The description information is obtained by recording the target page.

[0028] Step S14: Obtain the user information of the target user who accesses the preview page, and display the preview screen corresponding to the target page on the preview page based on the description information and user information. The preview screen shows the task completion effect of the target task, and the task completion effect is generated based on the user information.

[0029] On the one hand, this embodiment of the disclosure obtains the description information of the target page by recording the target page, and generates a preview screen corresponding to the target page based on the description information, thus eliminating the need to develop a new page. On the other hand, by obtaining user information and generating task completion effects based on the user information, different task completion effects can be dynamically displayed to different users in the preview screen. The following provides an example illustration of the solution in this embodiment of the disclosure.

[0030] In step S12, a task may include two states: completed and incomplete. At least one condition required to complete a task can be pre-configured. If all conditions required to complete a task are met, the task is in a completed state. If at least one condition required to complete a task is not met, the task is in an incomplete state. These conditions may include, but are not limited to, at least one of the following: submitting information, accessing a page, participating in an activity, purchasing goods, playing multimedia information, etc. The task state can be associated with user information, and different users may have different states for the same task. Assuming the target task is denoted as task A, user X may have completed task A, while user Y may not have completed task A. Therefore, the task state of task A associated with user X is completed, while the task state of task A associated with user Y is incomplete. The browser can obtain the state of the target task from the server. Specifically, the server can associate user information with the states of each task. The browser can send a task state query request carrying user information to the server. The server can respond to the task state query request, query the states of each task associated with the user information carried therein, and return the queried task states to the browser.

[0031] At least one target task can be displayed on the preview page. The preview page can be a task information page or other pages. After a user logs into the preview page, user information of the logged-in user (referred to as the target user), such as account number or mobile phone number, can be obtained. Based on the obtained user information, the target task associated with the target user can be determined. In some embodiments, the preview page can be used to display at least one candidate task in an incomplete state. The task selected by the target user from at least one candidate task can be determined as the target task. Thus, a user can obtain one or more target tasks on the same preview page. In other embodiments, preview pages can correspond one-to-one with target tasks, and users can obtain different target tasks by accessing different preview pages. The task corresponding to the preview page accessed by the target user can be determined as the target task.

[0032] In some embodiments, the task completion effect can be displayed on the target page. The target page is a page that displays the task completion effect after the target task is completed. The target task can include tasks in a completed state or tasks in an incomplete state. If the target task is in an incomplete state, the target page can display the task completion effect after the target task is completed, but not before the target task is completed. If the target task is in a completed state, the target page can directly display the task completion effect. After the server returns the task status, the browser can render the corresponding display effect on the target page based on the task status returned by the server, for example, rendering and displaying the task completion effect of a completed task. This embodiment of the disclosure directly uses the target page to display the task preview effect, ensuring that the presentation effect of the preview effect is consistent with the presentation effect after the task is completed.

[0033] Currently, web page development generally employs an engineered approach. Developers need to use build tools (such as Webpack and Parcel) to bundle and process code and resource files, and utilize various preprocessors (such as Sass and Less) and compilers (such as Babel) to process the code. They may even use modularization schemes (such as ES6 modules and CommonJS) to organize the code structure. Therefore, in related technologies, if it is necessary to reproduce a page identical to the target page to demonstrate the completion of a task, developers need to reuse the components and styles of the target page and re-bundle and build the target page's code, resulting in a significant workload.

[0034] To address the aforementioned issues, this embodiment of the disclosure obtains the descriptive information of the target page by recording it, and then generates a preview screen corresponding to the target page based on the descriptive information. Specifically, a recorder can be deployed in the browser used to access the target page, and the target page can be recorded by the recorder to obtain the descriptive information of the target page. The recorder can be a JSSDK. The JSSDK can listen for browser access requests to the target page, and if detected, it responds to the access request by obtaining the descriptive information of the target page. In some embodiments, the descriptive information of the target page includes, but is not limited to, the HyperText Markup Language (HTML) code, interface requests, style information and static resources, AJAX (Asynchronous JavaScript and XML), and JSONP (JSON with Padding) of the target page.

[0035] HTML code uses a series of tags to define different types of content, such as paragraphs, headings, images, and links. The target page's style information can include the target page's JavaScript (JS) and / or Cascading Style Sheets (CSS). JS is a high-level, interpreted programming language widely used in web development to implement dynamic effects, interactive behaviors, data processing, and other functions. Through JS, web pages can respond to user actions, modify page content, and communicate with the server. JS enables web pages to have richer interactivity and dynamism. The target page's API requests are used to implement data communication between the target page and the backend. CSS is a style sheet language used to describe document styles, layouts, and display methods. Through CSS, you can define the size, color, font, layout, and other styles of elements, as well as adapt to different devices. The target web page's static resources may include, but are not limited to, image files, font files, video files, and / or audio files. AJAX is a technology used to create asynchronous requests, which allows updating parts of a web page's content by exchanging data with the server without refreshing the entire page. AJAX uses JavaScript to send and receive data and communicate with servers. JSONP is a technique used in cross-domain requests that allows data to be retrieved from different domains without being restricted by the same-origin policy.

[0036] An interceptor can be deployed in the browser. When the browser accesses the target page, the interceptor can intercept the browser's access request and, in response, retrieve the description information recorded by the recorder. The interceptor can then store this description information in an Object Storage Service (OSS). When a preview of the task completion effect is needed, the description information can be retrieved from the OSS. In this way, no web page development is required; simply reading the description information of the target page from OSS is enough to generate a preview of the target page when the task is completed, reducing development costs.

[0037] The aforementioned interceptors and recorders can be deployed in the browser on the development side. After obtaining the description information of the target page, the description information can be sent to an object storage service or database for storage via the browser on the development side. When a task preview is needed, the browser on the target user side can send a preview request to the server. The server can respond to the preview request by retrieving the description information of the target page from the object storage service or database and sending the retrieved description information to the browser on the user side.

[0038] In step S14, the preview page can be a task education page. The preview page may include multiple selection components, each corresponding to a candidate task. Selection components have selected and unselected states. Users can interact with the selection components using mouse clicks or touchscreens to change their state. When a selection component is in the unselected state, the corresponding candidate task is selected and thus identified as the target task. Figure 2A As shown, the preview page includes six selection components, corresponding to candidate tasks used to verify six pieces of information: "Whether it is a listed company," "Number of its own brands," "Number of employees," "On-time delivery rate," "Number of partner factories," and "Warehouse area." Each selection component is a checkbox, as shown by the square in the image. Users can check the checkboxes to designate the corresponding candidate task as the target task. For example, when the user checks the checkbox for "Number of employees," the candidate task used to verify the number of employees becomes the target task.

[0039] See also Figure 2A The system allows for the categorization of candidate tasks, and displays each candidate task and its corresponding selection component in blocks on the preview page according to its category. The categories of candidate tasks can be set as needed. For example, in... Figure 2A The candidate tasks are categorized into two types: "Reputation Capability" and "Company Size and Operating Data." The "Reputation Capability" category includes candidate tasks and their corresponding selection components for verifying "Whether it is a listed company" and "Number of its own brands." The "Company Size and Operating Data" category includes candidate tasks and their corresponding selection components for verifying "Number of employees," "On-time delivery rate," "Number of partner factories," and "Warehouse area." The candidate tasks in the "Reputation Capability" category and their corresponding selection components are displayed in the upper section of the preview page, while the candidate tasks in the "Company Size and Operating Data" category and their corresponding selection components are displayed in the lower section of the preview page. It is understood that the specific categories and the total number of categories can be configured according to actual needs and are not limited to the situation shown in the figure.

[0040] In some embodiments, task configuration parameters for candidate tasks can be obtained, and based on these parameters, the candidate tasks can be displayed on the preview page. A code conversion tool can be used to extract the HTML description of the candidate tasks from the target page, and then the task configuration parameters can be parsed from the HTML description. The code conversion tool can be a visual selection tool, providing a user-friendly interface that allows users to select and manipulate objects through an intuitive graphical interface without writing code. See also Figure 2B You can select components in the configuration backend to choose a list area from the entire page. Figure 2B The tool displays multiple list areas, including those for "Whether it's a listed company," "Number of proprietary brands," "Number of employees," "On-time delivery rate," "Number of partner factories," and "Warehouse area." Simply hover the mouse over a list area; once highlighted, confirm the selection to obtain the code for that area. Alternatively, you can select a candidate block corresponding to a task from the target page. This code conversion tool can then convert the candidate block into DOM structure code, and further convert the DOM structure code into HTML description. This way, operators (such as managers) only need to select the corresponding block on the target page to obtain the task configuration parameters, without needing to understand the target page's code.

[0041] Since HTML descriptions can originate from both API requests and HTML code, and different data sources require different parsing methods, the target parsing method can be determined based on the data source corresponding to the HTML description, and then the HTML description can be parsed accordingly. If the data source for the HTML description is an API request, then the parsing method corresponding to API requests is used to parse the HTML description; if the data source for the HTML description is HTML code, then the parsing method corresponding to HTML code is used to parse the HTML description.

[0042] In some embodiments, since the description information of the target page includes the HTML code and the interface request, the HTML description can be matched with the HTML code included in the description information to obtain the probability of a match. If the probability is greater than a preset probability value, the data source corresponding to the HTML description is determined to be HTML code; otherwise, the data source corresponding to the HTML description is determined to be an interface request. Alternatively, the HTML description can be matched with the interface request included in the description information to obtain the probability of a match. If the probability is greater than a preset probability value, the data source corresponding to the HTML description is determined to be an interface request; otherwise, the data source corresponding to the HTML description is determined to be HTML code. The HTML description can also be matched with both the HTML code included in the description information and the interface request simultaneously. If the matching result indicates that the probability of a match between the HTML description and the HTML code included in the description information is greater than a first probability, and the probability of a match between the HTML description and the interface request included in the description information is less than a second probability, then the data source corresponding to the HTML description is determined to be HTML code. If the matching result indicates that the probability of a match between the HTML description and the interface request included in the description information is greater than a first probability, and the probability of a match between the HTML description and the HTML code included in the description information is less than a second probability, then the data source corresponding to the HTML description is determined to be an interface request. The first probability is greater than the second probability. In some embodiments, the matching operation described above can be implemented based on a neural network. For example, in the example of matching HTML descriptions with HTML code included in the description information, the HTML descriptions and HTML code included in the description information can be input into a pre-trained neural network, and the probability of a match between the two can be obtained from the output of the neural network.

[0043] After obtaining the task configuration parameters, they can be encapsulated into a preset format (e.g., JSON format) and stored in a database (DB). In some embodiments, the task configuration parameters may include an HTML description, the identifier of the data source corresponding to the HTML description, and the field value corresponding to the HTML description. The HTML description can be a string representing the business meaning of the candidate task. The data source identifier indicates whether the data source corresponding to the HTML description is HTML code or an API request. The field value corresponding to the HTML description can be empty and provided by the user when submitting the preview request. A JSON key-value pair can be generated using the field identifier (usually a custom string) as the key and the HTML description, the identifier of the data source corresponding to the HTML description, and the field value corresponding to the HTML description as the value, and then stored in the database. When previewing the task completion effect, the key-value pair can be extracted from the database, and the candidate task can be displayed on the preview page based on the extracted key-value pair.

[0044] In some embodiments, multiple candidate task configuration parameters can be parsed from the target page. In response to receiving a selection operation on these multiple candidate task configuration parameters, the task configuration parameters for each candidate task can be determined from the multiple candidate task configuration parameters. For example, if the candidate task configuration parameters from the target page include "Number of Employees" and "Number of R&D Personnel," only "Number of Employees" can be selected, without selecting "Number of R&D Personnel." In this way, the candidate tasks only include tasks used to verify the number of employees, excluding tasks used to verify the number of R&D personnel. The above process can be performed by operations in the configuration backend.

[0045] When the required task configuration parameters are updated, the system can receive selection operations for the updated task configuration parameters. Based on these selection operations, the candidate tasks that need to be rendered to the preview page are repackaged, and the repackaged task configuration parameters are passed as one of the input parameters to the sandbox in the rendering page. This eliminates the need for visual designers to design mockups, improves the efficiency of updating task configuration parameters, and reduces the development difficulty in the process of updating task configuration parameters.

[0046] Task configuration parameters can be pre-configured by operations personnel. These parameters can be uploaded to the server, which then sends them to an object storage service or database for storage. When a preview of the task completion effect is needed, the user's browser can request the task configuration parameters from the server. The server responds by retrieving the parameters from the object storage service or database and sending them to the browser, allowing the browser to display candidate tasks on the preview page based on these parameters.

[0047] After a user selects a target task, user information and a description of the target page can be retrieved. User information may include the user's login information and other information associated with the target task. For example, if the target task is to verify the number of employees, the user information may include the specific number of employees. If the target task is to verify the number of partner manufacturers, the user information may include the specific number of partner manufacturers. This user information may be pre-submitted by the user before previewing the task completion results but not yet verified, or it may be submitted by the user during the task completion results preview. Other pre-submitted information can be linked to the user's login information. If the user is logged into the preview page, other information linked to the user's login information and associated with the target task can be retrieved. If not retrieved, an information retrieval entry can be displayed on the preview page to allow users to retrieve the information submitted by the user.

[0048] In some embodiments, a sandbox is deployed on the preview page. Description information and user information can be encapsulated as input parameters and passed to the sandbox. The sandbox then plays a preview of the target page based on the description information in the input parameters and displays the task completion effect in the preview based on the user information. In this way, a preview displaying the task completion effect can be generated simply by rewriting the description information using the user information. Specifically, an interceptor can be deployed in the browser. When the browser accesses the target page, the interceptor can intercept the browser's access request to the target page, retrieve the description information and user information in response to the access request, and encapsulate the description information and user information as input parameters.

[0049] In the above embodiments, a preview screen corresponding to the target page is generated using description information recorded from the target page, and the task completion effect is displayed on the preview screen without the need to redevelop the page. Since the target task is currently in an incomplete state, it is impossible to directly obtain a preview screen including the task completion effect based on the recorded description information. Therefore, user information is obtained and added to the description information; both are used as input parameters and passed to the sandbox. In this way, a preview screen including the task completion effect can be played through the sandbox.

[0050] In some embodiments, the preview screen can be displayed in a block on the preview page, which can be located on the left, right, top, or bottom of the preview page. Further, there can be multiple target pages. Description information recorded from each target page can be obtained as described above, and user information and the description information recorded from each target page can be encapsulated into input parameters to obtain multiple sets of input parameters. Different preview screens are generated based on different input parameters. Each preview screen can be located in a different block on the preview page, or it can be located in the same block on the preview page. The user can switch to different preview screens by swiping the block.

[0051] Figure 3The diagram illustrates the task preview effect in some embodiments of an e-commerce scenario. Assuming the target task includes verifying the "number of private label brands," "number of employees," and "on-time delivery rate," the specific values ​​for the number of private label brands, the number of employees, and the on-time delivery rate from the user information can be obtained. This information can be used as field values ​​in the JSON-formatted task configuration parameters described in the previous embodiments and passed to the JSON-formatted task configuration parameters. A preview screen can be displayed in the right-hand area of ​​the preview page, showing the field values ​​matching the user information. For example, the number of private label brands is 14, the number of employees is 123, and the on-time delivery rate is 37%. These specific parameter values ​​are related to the target user, and the information may differ for different target users. The above information is related to the target task. In addition to this information, general information about the target user can also be displayed in the preview screen, such as the target user's avatar, username, location, and store opening time.

[0052] In some embodiments, images corresponding to the task completion effect can be generated, task description information of the target task can be obtained, and a task report for the target task can be generated based on the images and task description information. The images corresponding to the task completion effect can be obtained by taking screenshots of the task completion effect or rendering them as static images. By obtaining the images corresponding to the task completion effect, the visual content of the preview can be fixed. The task description information may include the benefits of completing the target task, a description of the steps, and guidance for subsequent actions. By combining the static preview images and the operational description, the system integrates these elements into a complete report. The task report can be in PDF format, web page format, or other electronic document formats, making it easy to share with target users via email or other communication tools. The generated task report will provide target users with a clear and professional display of the task completion effect, increasing the authority and persuasiveness of the task promotional materials. As an integrated document, the task report can be easily shared by operations personnel or target users with other decision-makers or team members, expanding the reach of the preview effect. Target users receiving a customized task report containing personalized data can increase their motivation to complete the task. Through the above mechanisms, this disclosure not only provides real-time and personalized task preview effects, but also effectively presents and conveys the task preview effects and task description information to the target users in the form of task reports, thereby effectively enabling the target users to understand and recognize the effects after the target task is completed, and thus improving the task completion rate.

[0053] Figure 4 and Figure 5A general flowchart of an embodiment of this disclosure is shown. First, descriptive information is collected. An operations team can create a preview project and add a target page. Developers can incorporate a data collection SDK (i.e., the JSSDK in the aforementioned embodiment, which functions as a recorder) into the target page. When a browser accesses the target page, the data collection SDK can collect descriptive information from the target page, such as HTML code, JS / CSS, static resources, and API requests. After structuring this descriptive information, it is stored in a database or object storage service.

[0054] Then, operations can set business rules. Operations can select a target page. If the target page does not exist, a preview project is created and the target page is added. If the target page exists, a preview block is selected from the target page, and a code conversion tool is used to convert the preview block into DOM structure code, then the DOM structure code is converted into HTML description, and then it is determined whether the HTML description can be mapped to a data source. For example, block A in the target page can be mapped to HTML code, and block B in the target page can be mapped to an interface request. If so, the task configuration parameters are parsed from the HTML description. The task configuration parameters may include multiple fields. Operations can select target fields from multiple fields according to actual needs, encapsulate them into JSON format, and store them in a database or object storage service. If no data source can be mapped, the process ends. Developers can integrate the preview SDK into the preview page. The preview SDK can pull the task configuration parameters from the database or object storage service and render a user operation panel based on the task configuration parameters. The user operation panel includes various candidate tasks and their corresponding selection components.

[0055] During the user preview phase, users can select the field corresponding to the target task from the user operation panel. The preview SDK can retrieve the description information of the target page from the database or object storage service, obtain user information related to the target task, rewrite the description information of the target page based on the user information, and pass the rewritten description information to the sandbox so that the sandbox can render a preview screen showing the task completion effect.

[0056] This disclosure provides a visual preview scheme for task completion effects, allowing users to preview the results in a simulated window (such as...) by simply checking boxes and combining the user information of the currently logged-in user. Figure 3 The right-hand area (used to display the preview screen) shows the actual online effect after the task is completed, greatly improving the credibility of the task and the user experience, and further increasing the user's task completion rate. At the same time, this disclosure can be flexibly configured and quickly integrated according to various application scenarios.

[0057] This disclosure has the following advantages:

[0058] (1) In this disclosure, the preview effect after the task is completed is displayed by combining the target user’s general user information or relevant information related to the task. The user sees a personalized effect, which is more intuitive.

[0059] (2) To address the high cost of customized development preview capabilities, the target page for the task preview effect presented in this disclosure does not require secondary development. After deploying the JSSDK in the browser environment, the description information of the target page will be automatically collected. The collected information can be executed through an iframe to restore the target page. Newly added user information can also be displayed simply through data configuration without writing code, thus reducing the cost and complexity of customized development.

[0060] (3) When an existing task is updated, no visual designer is needed to design the mockup. The operations team selects the new field in the configuration backend, notifies the development team to add the encapsulated parameters, and then publishes. If the development team has already passed in the parameters, the operations team only needs to select the new field in the configuration backend, without any development intervention. This enables rapid updates of the preview effect after a task is updated, improving efficiency.

[0061] See Figure 6 This disclosure also provides a method for previewing the task completion effect, applied to the server side, the method including:

[0062] Step S22: Obtain the description information of the target page and the user information of the target user who accesses the preview page; the target page is used to display the task completion effect of the target task, and the description information is obtained by recording the target page;

[0063] Step S24: Send the description information and the user information to the browser so that the browser displays a preview screen corresponding to the target page on the preview page based on the description information and the user information. The preview screen displays the task completion effect of the target task, and the task completion effect is generated based on the user information.

[0064] For details of the methods executed by the server and browser in this embodiment, please refer to the foregoing embodiments, and they will not be repeated here.

[0065] This disclosure also provides a computer device, which includes at least a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the methods described in any of the foregoing embodiments.

[0066] Figure 7This illustration shows a more specific hardware structure diagram of a computing device provided in an embodiment of the present disclosure. The device may include: a processor 602, a memory 604, an input / output interface 606, a communication interface 608, and a bus 610. The processor 602, memory 604, input / output interface 606, and communication interface 608 are interconnected internally via the bus 610.

[0067] The processor 602 can be implemented using a general-purpose central processing unit (CPU), microprocessor, application-specific integrated circuit (ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the technical solutions provided in the embodiments of this disclosure. The processor 602 may also include a graphics card.

[0068] The memory 604 can be implemented in the form of read-only memory (ROM), random access memory (RAM), static storage device, dynamic storage device, etc. The memory 604 can store the operating system and other applications. When the technical solutions provided in the embodiments of this disclosure are implemented by software or firmware, the relevant program code is stored in the memory 604 and is called and executed by the processor 602.

[0069] The input / output interface 606 is used to connect input / output modules to enable information input and output. Input / output modules can be configured as components within the device (not shown in the figure) or externally connected to the device to provide corresponding functions. Input devices may include keyboards, mice, touchscreens, microphones, various sensors, etc., while output devices may include displays, speakers, vibrators, indicator lights, etc.

[0070] The communication interface 608 is used to connect the communication module (not shown in the figure) to enable communication between this device and other devices. The communication module can communicate via wired means (such as USB, Ethernet cable, etc.) or wireless means (such as mobile network, WIFI, Bluetooth, etc.).

[0071] Bus 610 includes a pathway for transmitting information between various components of the device, such as processor 602, memory 604, input / output interface 606, and communication interface 608.

[0072] It should be noted that although the above-described device only shows the processor 602, memory 604, input / output interface 606, communication interface 608, and bus 610, in specific implementations, the device may also include other components necessary for normal operation. Furthermore, those skilled in the art will understand that the above-described device may only include the components necessary for implementing the embodiments of this disclosure, and not necessarily all the components shown in the figures.

[0073] This disclosure also provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the methods described in any of the foregoing embodiments.

[0074] Computer-readable media includes both permanent and non-permanent, removable and non-removable media that can store information using any method or technology. Information can be computer-readable instructions, data structures, modules of programs, or other data. Examples of computer storage media include, but are not limited to, phase-change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape, magnetic magnetic disk storage or other magnetic storage devices, or any other non-transferable medium that can be used to store information accessible by a computing device. As defined herein, computer-readable media does not include transient computer-readable media, such as modulated data signals and carrier waves.

[0075] As can be seen from the above description of the embodiments, those skilled in the art can clearly understand that the embodiments of this disclosure can be implemented by means of software plus necessary general-purpose hardware platforms. Based on this understanding, the technical solutions of the embodiments of this disclosure, in essence or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product can be stored in a storage medium, such as ROM / RAM, magnetic disk, optical disk, etc., and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute the methods described in various embodiments or some parts of the embodiments of this disclosure.

[0076] The systems, devices, modules, or units described in the above embodiments can be implemented by computer devices or entities, or by products with certain functions. A typical implementation device is a computer, which can take the form of a personal computer, laptop computer, cellular phone, camera phone, smartphone, personal digital assistant, media player, navigation device, email sending and receiving device, game console, tablet computer, wearable device, or any combination of these devices.

[0077] The various embodiments in this disclosure are described in a progressive manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, the device embodiments are basically similar to the method embodiments, so the description is relatively simple; relevant parts can be referred to the descriptions in the method embodiments. The device embodiments described above are merely illustrative. The modules described as separate components may or may not be physically separate. When implementing the embodiments of this disclosure, the functions of each module can be implemented in one or more software and / or hardware. Alternatively, some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs. Those skilled in the art can understand and implement this without creative effort.

[0078] The above description is merely a specific implementation of the embodiments of this disclosure. It should be noted that for those skilled in the art, several improvements and modifications can be made without departing from the principles of the embodiments of this disclosure, and these improvements and modifications should also be considered within the protection scope of the embodiments of this disclosure.

Claims

1. A method for previewing task completion results, applied in a browser, the method comprising: Obtain the description information of the target page, which is used to display the task completion effect of the target task, and the description information is obtained by recording the target page; Obtain user information of the target user who accesses the preview page, and display a preview screen corresponding to the target page on the preview page based on the description information and the user information. The preview screen displays the task completion effect of the target task, and the task completion effect is generated based on the user information.

2. The method according to claim 1, wherein the description information is obtained by recording the target page using a recorder deployed in the browser.

3. The method according to claim 2, wherein the browser further comprises an interceptor; after the interceptor intercepts the browser's access request to access the target page, the description information is obtained in response to the access request by the recorder and stored in the object storage service. The process of obtaining the description information of the target page includes: Obtain the description information stored in the object storage service.

4. The method according to claim 1, wherein the description information includes the HTML code of the target page, interface requests, style information, and static resources.

5. The method according to claim 1, wherein the target task is a task in an incomplete state, and the target page is used to display the task completion effect of the target task after the target task is completed; the method further includes: The preview page displays at least one candidate task that is in an incomplete state; The task selected by the target user from the at least one candidate task is determined as the target task.

6. The method according to claim 5, wherein displaying at least one candidate task on the preview page comprises: Based on the task configuration parameters of the candidate tasks, the candidate tasks are displayed on the preview page; The task configuration parameters are obtained by parsing the HTML description of the candidate task. The HTML description is obtained by converting the candidate block corresponding to the candidate task on the target page into DOM structure code by a code conversion tool, and then converting the DOM structure code.

7. The method according to claim 6, wherein the task configuration parameters are parsed from the HTML description based on a target parsing method, the target parsing method being determined based on the data source corresponding to the HTML description, and the data source including HTML code and interface requests.

8. The method according to claim 7, wherein the description information of the target page includes the HTML code and the interface request; the data source corresponding to the HTML description is obtained by matching the HTML description with the HTML code and / or the interface request included in the description information.

9. The method according to claim 1, wherein a sandbox is deployed on the preview page; the step of displaying a preview screen corresponding to the target page on the preview page based on the description information and the user information includes: The description information and the user information are encapsulated into input parameters; The input parameters are passed to the sandbox, so that the sandbox plays a preview of the target page based on the description information in the input parameters, and displays the task completion effect of the target task in the preview based on the user information.

10. The method according to claim 9, wherein an interceptor is deployed in the browser used to access the target page; the step of encapsulating the description information and the user information into input parameters includes: When the browser accesses the target page, the interceptor intercepts the browser's access request to the target page, obtains the description information and the user information in response to the access request, and encapsulates the description information and the user information into input parameters.

11. The method according to claim 1, further comprising: Generate an image corresponding to the completion effect of the task; Obtain the task description information of the target task; A task report for the target task is generated based on the image and the task description information.

12. A method for previewing task completion results, applied on a server-side, the method comprising: Obtain the description information of the target page; The target page is used to display the task completion effect of the target task, and the description information is obtained by recording the target page; Obtain user information of the target user who accesses the preview page; The description information and the user information are sent to the browser so that the browser can display a preview screen corresponding to the target page on the preview page based on the description information and the user information. The preview screen displays the task completion effect of the target task, and the task completion effect is generated based on the user information.

13. A computer-readable storage medium having a computer program stored thereon that, when executed by a processor, implements the method of any one of claims 1 to 12.

14. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor, when executing the program, implements the method of any one of claims 1 to 12.

Images