Working all day, finally arrived the most “chicken frozen” moment, waiting for the ringing off the clock…

But it wasn’t long before I heard the familiar yet repulsive message. The end of the day news, not so good. However, I still bravely opened the message sent by the girl operating the company — “Brother Bao, please help us, tomorrow afternoon we will have a promotion activity of a new version of PC knowledge base, and I want to add a questionnaire entry into our knowledge base module to collect users’ experience.”

After reading the above news, at that time my mood is such 👇

I want to pretend not to see, but the news has become read. So I tried to play it cool and texted the girl back, asking her to send me the information she needed to collect from the questionnaire. After a while, the girl sent me the information. After reading it, I was relieved to find that the form was not complicated.

Then, immediately ask the girl to coordinate the resources on the server side. Unexpectedly, the girl replied to me: “Brother Bao, this function is not too complicated. With your technical ability, you should be able to handle it by yourself.” Since the girl said so, I can only say no problem. Then, I communicated with the girl about the requirements and confirmed that the data of the form need not be submitted to our system.

Now that the requirements are clear, all that remains is how to quickly develop the functionality. After thinking about it for a while, a convenient development solution came to mind. I happened to read about MemFire Cloud, an online form designer and a Bass product from Friends. I wanted to use an online form designer to quickly generate form code and then use the MemFire Cloud service to store the data. The general plan was already in place, and IN order to get off work early, I took immediate action.

Drag and drop to create a form

Our new PC knowledge base is based on Vue 2, using the Element UI component library. After some searching, I found an open source project called Form-Generator. The project is a form design and code generator based on Element UI. Currently, the Star number on Github is 5.2k. It is a good open source project.

I have to say that designing a form in a drag-and-drop way still smells good to use. After one action, the form is generated as follows:

Note that the online tool also allows us to configure regular validation for each field of the form. After completing the form design, I downloaded the corresponding VUE file by clicking the export VUE file button. At this point, the function of the questionnaire form has been completed, except for the function of data submission. So next we’ll take advantage of the capabilities provided by MemFire Cloud to quickly generate apis.

Fast API generation

MemFire Cloud provides highly available, automatically scalable back-end Cloud services for application developers. The front-end connects to back-end services (such as cloud database, cloud storage, cloud functions, user management, and statistical analysis) through unified SDK and API to accelerate the development of mobile, Web, IoT, and game applications and reduce operation and maintenance costs.

(Photo: docs.memfiredb.com/)

After a brief introduction to the features of MemFire Cloud, let’s take a look at how to quickly generate apis using the MemFire Cloud platform.

2.1 Creating a Database Account

To use the services provided by MemFire Cloud, we need to register an account. After successful account registration, we can log into the management background of MemFire Cloud platform. Before creating the forms application, we need to create a database account, as shown in the following figure:

2.2 Creating a Form application

After creating the account, we are ready to create the forms application. First click my Application menu on the left, and then click the Create Application button. In the pop-up dialog box, enter the application name and select the newly added database account. Finally, click the Create button to start creating the form application.

2.3 Creating a Data table

After successfully creating the forms application, we can create a new questionnaire to hold the form’s data. First click the newly created form application, enter the form application edit page, then click the left data table menu, and continue to click the New data table button, as shown below:

After clicking the New table button, the form of the new table is displayed in the form of Drawer on the right side of the current page. We then create the fields in the Feedbacks data table from the fields in the generated Vue form file, as shown in the following GIF:

The above GIF just shows how to add the Name field. We’ve added fields like Mobile, POST, Score, and Suggestion via the Add Field button. The detailed configuration information of each field is as follows:

Tip: The ID field in the figure above is generated by default, and its value is constantly increasing.

After some configuration, our questionnaire API has been created, the overall operation is quite convenient. Now we just need to connect to the client SDK to submit the form data.

Integrate JS client SDK

When integrating the JS client SDK, you can install the SDK through NPM or CDN. Here’s how we use NPM:

npm install @supabase/supabase-js
Copy the code

After successfully installing the @Supabase/Supabase-js module, we need to import the module in the form page and then use the information in the form project overview page to create the JS client object. The initialization information for the JS client object is shown below:

After obtaining the initialization information, we can create the JS client object:

import { createClient } from "@supabase/supabase-js";

const supabase = createClient(
  "https://c5s0hnq5g6heb3j9g3gg.baseapi.memfiredb.com".// baseURL
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW" // Public key (only partial excerpted)
);
Copy the code

Now that we have the Supabase client object, we can use the methods provided by the supabase client object to submit the form data as follows:

// src/components/FeedbackForm.vue
export default {
  data() {
    return {
      // Omit other attributes
      submitting: false
    };
  },
  methods: {
    submitForm() {
      this.$refs["elForm"].validate(async (valid) => {
        if(! valid ||this.submitting) return;
        this.submitting = true; // Avoid quick clicks and resubmit data
        const { error } = await supabase
          .from("feedbacks") // The table name of the data table
          .insert(this.formData);  
        const msg = error == null ? "Thank you for your feedback!" : "Server is distracted. Please try again later.";
        alert(msg);
        if(! error)this.$refs["elForm"].resetFields(); // Reset the form
        this.submitting = false;
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields(); ,}}};Copy the code

In the above code, the supabase.FROM method is used to specify the table name of the data table, and the INSERT method is used to insert the new data. Note that the insert method can also take an array of parameters, that is, a batch of data can be inserted. When inserting data, you can also configure the {upsert: true} option to perform the upsert operation.

In addition to the INSERT method, the SDK also provides select (get data), Update (modify data), delete (delete data) and other methods. It also provides powerful modifiers (limit, Order, range, etc.) and filters (filter, OR, not, eq, etc.). If you are interested, you can read the MemFire Cloud JS client document.

After completing the above three steps, our questionnaire function has been developed. The successfully collected questionnaire data can be viewed in the MemFire Cloud Cloud platform management background:

Four,

Using the form-Generator form designer and MemFire Cloud’s easy-to-use and powerful data storage capabilities, I quickly completed the questionnaire for the company’s running girls and avoided the “bad luck” of working overtime. In fact, we can also consider further integration of the two tools, that is, based on the field information generated by the form designer, the corresponding table structure can be automatically created, and the client SDK call code can be automatically generated.

On a daily basis, MemFire Cloud’s database-as-a-service capabilities allow you to quickly develop small tools. For example, if you are interested in a web bookmark collector, you can refer to d2-daily-Chrome-extension. Just replace axios with @supabase/ Supabase-js. You can quickly develop a Web bookmark collector for Chrome. If you have other fun ideas, feel free to leave a comment.

5. Reference resources

  • MemFire Cloud official documentation
  • Lot – form – the generator
  • Lot – d2 – daily – chrome – the extension