A miniprogram to celebrate 20th anniversary of my highschool - SCIE

It was a normal Tuesday when I was contacted by the Pastoral Support Office. One of the teachers asked if I was Jingcheng, I said yes. She told me that she knew about my programming skills and wanted to invite me and my club (SCIE Developers) to work on an application for the impeding 20th anniversary of SCIE.

Although I agreed, I wasn't sure how I could make an app out of it. The school told me they wanted the app to connect the thousands of alumni around the world, and to celebrate SCIE in good will. Perhaps we could make a miniprogram where anyone can send their best wishes to the school. A mini program is similar to an app except it runs within WeChat, the primary social platform in China. This allows it to be easily shared around and viewed by others.

I asked the designer of our Developers Club, Charles, to draw a rough sketch based on the feedback we have. It includes a countdown to the anniversary, a map to showcase all the places where people have sent their greetings, as well as moving text that displays some of the greeting.

SCIE has a house system, divided into Metal, Wood, Fire, Water, the four fundamental elements Chinese mythology. We chose to honor that by allowing each user to send the wish based on their chosen house, which is reflected by both the moving texts and the map. In the Botton, there is also a counter showing the wishes sent by each house.

The hardest part would have been to implement the code. I have actually never written a miniprogram before. It turned out that miniprograms work similar to websites in that they use a modified version of HTML and CSS, alongside Javascript. Thus I began to pick up pace once getting a hold of it.

The miniprogram is also bilingual, in Chinese and English. This was so that Chinese parents and faculties as well as our teachers could all celebrate this together. It's done through detecting the system language, which then displays the right text onto the screen.

Because we wanted an app to record all the wishes sent by people, we needed a server that can handle this request. Luckily, Tencent (developer of WeChat) provides something called a Serverless Function, which is a snippet of code that operates on the cloud without an explicit server. This allows for it to be scaled dynamically. By implementing some simple database codes, I was able to get the backend of the app working.

The moving text isn't as easy as it seems. It's always more difficult when you have to work with moving elements in HTML, especially when this is a miniprogram (certain features are not supported). But after some experiments, I was able to get it working.

The last request was that, once someone has sent their greeting, a unique poster would be generated.

The poster would look something like this. On the top right would be the anniversary logo. The poster would be filled by an image of the SCIE campus. On the bottom, it will display the location of the user, as well as the place of person's greeting. In the image, the person was the 4924th person to sent a greeting from his location in China. 

This poster, for example, has London, UK as the location. We also made several improvements to the poster, such as a QR code to access the miniprogram, allowing anyone who saw this poster to access this program.

With all of that in place, and with extensive testing, I wish my school a very best 20th anniversary.