Capstone Summary

My capstone project was a built-in mini-program for WeChat. WeChat is a Chinese multi-purpose messaging, social media, and mobile payment app. The project aimed to help business owners set up an online shop on WeChat. Any user who owns a WeChat account and who has installed WeChat on their mobile devices can use the mini-program. WeChat can be installed on both iOS and Android. Any user who wants to purchase at the mini-program online store must use WeChat Pay. The mini-program consists of four fundamental parts - main page, category, shopping cart, and user center. The main page is the front look of the online shop, and it contains pictures only. The category page lists a list of goods, including the classified goods pictures and classified goods names. The goods pictures are clickable. When clicking on the pictures, it will navigate from the category page to the goods list page. There is a list of goods, goods photos, and goods prices on the goods list page. Each good is clickable. When clicking on the good, it will navigate to the goods detail page. There are goods names, goods prices, and graphic details of the goods. On the bottom of the goods detail page, there is a Contact Us button, Share button, Cart button that will navigate to the shopping cart page, Add to Cart button, and a Buy button. The shopping cart page consists of a section where users may add their addresses to the page. All of the selected goods will appear on the shopping cart page. Users may pay by clicking on the Pay button. The user page is for users to log in with their WeChat account.

The mini-program must be created and programmed on specified platforms that the WeChat officials designate. The development platform that I used is called Stable Build. I downloaded it from https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html. The system of the device that I used to program is Windows 10. However, Stable Build supports macOS.

The mini-program is primarily involved with front-end development. The programming languages I used were WXML(WeChat Markup Language), WXSS(WeChat Style Sheets), JavaScript, and JSON. Same as HTML and CSS, WXML stands for “nouns,” and WXSS stands for “adjectives” of the program. For every page that displays images or goods information, the data are from some online JSON files that contain all the basic information such as the image source, goods name, goods ID, goods description, etc. Firstly, I must register a DNS server to link the IP address that has the JSON files. However, owning a private DNS server can be costly. Therefore, every IP addresses I used are on ice.truman.edu, and those IP addresses can be found in the JS files. Then, I must request the legal domain name on the WeChat Official Platform to get access. For every icon that appears in the program, I either downloaded them online and stored them under a folder called “icons”, or I generated them through iconfont.cn and copy-pasted the icon sources to styles/iconfont.wxss.

Throughout the project, I worked alone. Since this project is programming-based, all CS classes I took, such as CS 180, 181, 260, 310, that are programming or algorithm-based are beneficial one way or another. However, the Internet Programming class has been the most helpful class because it is involved with front-end development. There are no non-CS classes or topics that I found helpful in my project.

There are three things that I learned throughout the development of my capstone project. First, I learned how to program in WXML and WXSS. They are not taught in the CS classes. I learned them through the WeChat Official Documentation. (https://developers.weixin.qq.com/miniprogram/dev/framework/) as well as some online tutorials. The WeChat Official Documentation contains every aspect of the mini-program that you want to build, including WXML and WXSS. Second, I learned how to cooperate with the front-end and back-end. The back-end aspect contains all of the information about the image source and goods. I managed to learn how to link the mini-program to the back-end. Third, I learned how to build a large project. All of the homework assignments I have done over the past few years are all single or multiple files. However, during the capstone project, I learned how to link different folders’ of files and collaborate them together.

One of the problems I have encountered during the development of my project is how not to hard code on a large program. In the beginning, when I developed the project, I stored all of the images in the program folder. Nevertheless, it can be very inconvenient later when the program gets released because I won’t be able to change anything. However, after searching through the WeChat Official Documentation, I found that I needed to have a private DNS to store all of the data and decode them in my mini-program. Then, I tried to store all of the data in my school public_html folder, and it worked. Later, when the program gets released on WeChat, all I have to do in order to make a change to the system is to revise the data in those JSON files on my own DNS.

My capstone experience has been overall in my expectation of what it might be because I have done a lot of research on the mini-program. Although I had to start to learn many new things, the platform I used was very friendly for programmers. There are many build-in and auto-generated functionality that gives a programmer a hint of what a piece of code does or what I miss. Nevertheless, I hope that I could have studied more about JavaScript as well as Vue. There are a lot of frameworks in Vue that can be used to build the user interface for the mini-program.