The origin of the story

Based on my love and interest in AI, I embarked on the path of studying machine learning alone. Like anyone who loves AI, I barely made it through a few training sessions with deep learning models on a lonely journey.

One of the most impressive achievements is the affective classification model. He can generate the emotions of the writer based on your words.

I was surprised by the “humanization” of the deep learning model, so I began to think about how to transform its “humanization” into a tool to help people.

Build an upper application on the basis of emotion model, let it add different fireworks to human society.

Based on various considerations, I finally chose to develop a micro channel “emotion” mini program.

The story begins

Before carrying out small program development, it is very necessary for us to do a full understanding of small program.

What is a applets

To put it simply, compared with traditional APPS, wechat applets are a brand new way to connect users and services. It has excellent user experience, and it can be easily obtained and spread in wechat.

History of applets

In fact, applets don’t come out of nowhere. When wechat gradually became popular and became a social tool that almost everyone could not live without, WebView carrying wechat also gradually became the largest mobile Web entrance by magnitude. More webViews are accessed daily than all browsers combined. Although daily active data of wechat WebView cannot be obtained through a third party, this objective fact indirectly promotes the birth of small programs.

In fact, before the small program formally into the sight of people, wechat has long had a similar JS call interface, here to show you a call to wechat JS-Bridge native components to browse the picture example:

WeixinJSBridge.invoke('imagePreview', { current: 'http://inews.com', urls: [// List of urls for all images, Array format 'https://img/1.jpg', 'https://img/2.jpg', 'https://img/3.jpg']}, function (res) {the console. The log (res) err_msg)})Copy the code

In fact, this kind of JS interface is specifically for Tencent internal personnel to call at the beginning, but it was accidentally discovered by many individual developers and used, which has gradually become the standard of wechat web pages.

At the beginning of 2015, wechat officially released a set of toolkit specially for web development, named JS-SDK, which opened dozens of interfaces such as wechat payment, recording, voice recognition and so on. This opens a whole new door for all Web developers that has never been opened before, giving all developers the freedom to use the native capabilities of wechat development, which allows them to do things that were previously impossible or difficult to do.

Js-sdk perfectly inherits the features of WeixinJSBridge, and is open to the outside instead of only to the inside. And it gives all Web developers more ability to operate wechat functions through its exposed wechat call interface. However, this model does not solve the problem of mobile web experience very well:

  • When a user visits a page, there will be an obvious white screen before the page is displayed. Depending on the speed of the network and the performance of different terminals, this problem will become more and more obvious.

As a result, the enhanced version of JS-SDK was born, which has a very important new feature, which is called wechat Web Resources offline storage.

The following text is quoted from the internal document (which was not ultimately made public) :

The offline storage of wechat Web resources is a Web acceleration solution based on wechat for Web developers.

By using wechat offline storage, Web developers can directly load Web resources from wechat locally instead of pulling them from the server by virtue of the resource storage capability provided by wechat, thus reducing the loading time of Web pages and providing better Web browsing experience for wechat users. All Web apps under each public account can cache a maximum of 5M resources.

As you can already see, this is actually an enhanced version of the Application Cache in HTML5.

However, after several tests, it was found that there are still problems that have not been completely solved:

  • Page switching is stiff;
  • The click has the distinct feeling of delay.

Finally, wechat realized that JS-SDK could not deal with these problems, which required a new system to complete, and this system must have the following capabilities:

  • Fast loading speed

  • Native experience

  • Easy to use and secure wechat data opening

  • Both development efficiency and difficulty should be considered

And that’s where applets come in.

The story begins

preface

First of all, please forgive me, this article is not going to teach you how to develop applets from scratch. If you are new to software development. So I suggest you learn some basic JS syntax and the corresponding front-end knowledge.

After mastering the front-end foundation, I believe that with the help of the official documents of the front-end components of small programs, anyone can quickly start developing small programs.

Here I would like to share with you two of the most core, most cost-effective small program development techniques:

  • Build small program cloud development environment;
  • How to invoke the AI model interface using cloud development.

Applets cloud development

When I first started thinking about developing small programs, LIKE you, I had a lot of concerns:

  • Do you need to purchase a domain name or server?

  • Is it expensive to maintain?

With these concerns in mind, I carefully opened the official wechat document. After the brain went through distributed reading, I found the keyword cloud development.

What is cloud development?

The official wechat document explains:

Developers can use cloud development to develop wechat mini programs and games, without building a server, you can use cloud capabilities.

Cloud development for developers to provide complete primary support and the clouds WeChat service support, and weaken the back-end and operational concepts, do not need to set up the server, use the API provided by the platform in terms of core business development, can be realized fast on-line and iteration, this ability at the same time, with the developers are already using cloud services compatible with each other, are not mutually exclusive.

Cloud development provides several basic capabilities to support:

Ability to role instructions
Cloud function No need to build your own server The code running in the cloud, wechat private protocol natural authentication, developers only need to write their own business logic code
The database No need to build your own database A JSON database that can be operated on the front end of an applet and read and write in cloud functions
storage No need to build your own storage and CDN Upload/download cloud files directly in front of the small program, and manage them visually in the cloud development console
Cloud call Native wechat service integration Cloud function-based authentication The ability to use applets to open interfaces, including server-side invocation and access to open data

In short, with cloud development, I can develop a full-stack applet without having to buy a server.

Heh heh, yeah, that’s what I want.

How to build a small program cloud development environment

So how to build a cloud development environment, comprehensive official documents, I summed up a set of minimalist build tutorial, we can refer to.

Four steps for building a minimalist cloud development environment:

  • First, you need to register a small program account, add an administrator/developer wechat account and record the APPID;

  • Then you need to download the applets development tools;

  • Then log in to the development tool using the administrator/developer account and fill in the APPID of the small program, check the cloud development option and click New;

  • Click on the cloud development page and select the free version of the cloud development quota.

What is a cloud function?

With the cloud development environment set up, it’s time to take a look at what cloud functions are.

The official definition is as follows:

A cloud function is a piece of code that runs in the cloud and can be written in a development tool, uploaded and deployed with one click, without the need to manage a server.

Simply put, cloud functions are functions that run in the cloud.

What is the use of cloud functions?

Cloud functions are useful.

With this, we have a “big back end” where all the business logic and operations on the database can be wrapped in cloud functions, which is very convenient.

The first cloud function

With all this talk, it’s time to put it to the test.

Right-click the function of cloud environment (cloudfunctions | XXXXXXX) setting-up a after the test of cloud function:

You can see that the default file (index.js) already has the cloud function code (get the current wechat user context and return the user information) :

// const cloud = require('wx-server-sdk') cloud.init() // cloud function exports.main = async (event, event) context) => { const wxContext = cloud.getWXContext() return { event, openid: wxContext.OPENID, appid: wxContext.APPID, unionid: wxContext.UNIONID, } }Copy the code

Start the command line and run NPM install to install wX-server-sdk (if node_modules is not in the directory, run NPM init first) :

Finally, right-click the cloud function and select Enable local debugging of the cloud function and click the lower right corner to call:

You can see that the function executed successfully and got the return value (openID, etc……).

At this point, congratulations on completing our first cloud function quickly.

How to call AI model quickly in small program

A flash of inspiration from the morning

I’m sure you’re all curious about how I managed to call AI capabilities “at zero cost” in cloud functions.

In fact, I was very upset about this problem at the beginning. Even though the small program has the function of cloud function, it cannot easily call the AI model at “zero cost”. The reasons are as follows:

  • Applets cloud functions currently only support Node.js, and my model call interface code is Python;
  • No matter how “cloud” it is, to run your own AI model you must have a machine with more than 16 gigabytes of memory (at a huge cost);
  • Even if have own server also need domain name record, it is too troublesome;

But one bright morning, I rolled out of bed and had an Epiphany:

  • Can we call Tencent’s own AI open interface to achieve this purpose indirectly?

More ideas than action, so I visited the Natural language processing module of Tencent cloud console.

After opening the service according to the instructions, I entered the API key management and recorded the API key:

So how do you call it in a small program? Once again, I fell into deep meditation……

Cloud functions call the AI model

After a long exploration, I went back to the command line under the test cloud function directory and installed the Tencent cloud service call package:

npm install tencentcloud-sdk-nodejs
Copy the code

Then modify the test cloud function (index.js) :

// const cloud = require('wx-server-sdk') const tencentcloud = require(" tencentcloud-sdK-nodejs "); Cloud. The init () / / cloud function entry function exports. The main = async (event, the context) = > {const NlpClient = tencentcloud. NLP. V20190408. The Client; const models = tencentcloud.nlp.v20190408.Models; const Credential = tencentcloud.common.Credential; const ClientProfile = tencentcloud.common.ClientProfile; const HttpProfile = tencentcloud.common.HttpProfile; let cred = new Credential(event.secretId, event.secretKey); let httpProfile = new HttpProfile(); httpProfile.endpoint = "nlp.tencentcloudapi.com"; let clientProfile = new ClientProfile(); clientProfile.httpProfile = httpProfile; let client = new NlpClient(cred, "ap-guangzhou", clientProfile); let req = new models.SentimentAnalysisRequest(); Let text = event.text let params = '{" text ":\"' + text + '\"}' console.log(' to be forecast string:  ' + text) req.from_json_string(params); Client.SentimentAnalysis(req, function (errMsg, response) {if (errMsg) {console.log(errMsg)} console.log('AI '+ response.positive) console.log('AI forecasting Negative:' + response.negative)})}Copy the code

In this code, I connected the AI emotion prediction interface through the key in Tencent cloud account, and finally printed out the result of emotion prediction.

Next I open the local cloud function call window and pass in the parameters:

  • SecretId (Tencent Cloud API service key Id)

  • SecretKey (Tencent Cloud API service Key)

  • Text (string to be predicted)

Then click call and finally see the prediction result of the AI model:

Finally, I successfully called the free AI open interface using the cloud function

At this time I have tears in my eyes, in addition to touched a small satisfaction, the original cloud development can play so.

The end of the story

At this point, I believe you have understood and mastered the two most important parts:

  • Build a cloud development environment
  • Quick invocation of the AI model

Looking back, the whole process took about three days and two nights, a hackathon sort of thing.

Hackathon, also known as Hackathon Day, Hackathon day or Hackathon day, is a new term among hackers. Hackathons are an activity.

In this activity, computer programmers and others involved in software development, such as graphic designers, interface designers, and project managers, come together to work closely on a software project.

The soul of a hackathon is the collaborative writing of programs and applications. Hackathons typically range in length from a few days to a week.

— Wikipedia

So, after “crazy” development, the rudiment of a diary small program was born.

By the time it was done I didn’t care if anyone was actually using it. Because I have gained from him the joy of devoting myself to development.

And finally, Tey, how about we leave without a “like”? mua

1, give me a thumbs up, can let more people see this article, by the way inspire me, hee hee.

2. Old friends, follow my original wechat public account “Intelligent Test development” and focus on the combination of AI writing and test development (AI + test + development).

I’ll make sure you get something out of it. Hit me if you don’t. Background reply “advanced tutorial”, free to send you a set of advanced tutorials on testing and development.

Author’s brief introduction

Akiko: Hi, I’m Tester, starting with testing, moving on to development, and finally learning AI. Understand the impact of AI on testing and development. , so I applied for a wechat public account “Intelligent Test Development”. Tester is looking forward to your attention and learning with me. Reprint description: Without authorization, reprint is prohibited

Finally, I wish all readers can develop a characteristic AI small program ~