Author: Li Yidong

【 Play LeanCloud 】 Developer experience sharing:

There is an application for college entrance examination application that needs to be reconstructed. The previous implementation is to retrieve the information of colleges and scores by constructing Laravel RESTful API + Ionic2. However, it is too troublesome for one person to connect the front and back end. So I decided to switch to the Ionic3 + back-end cloud approach to build the application. This way, I don’t have to worry about the CRUD on the back-end, which should be much faster.

Each Page applied in Ionic can be packaged as a component. The Page calls Service (Provider) for data requests and updates, and the obtained data is injected into the component to refresh display data or bubble into the Page for processing. The main requirements include back-end data storage, map presentation, and line charting.

The latter two requirements are not difficult, I have just seen them before. Baidu Map SDK is used to display maps, and Echarts JavaScript SDK is used to draw line charts. In this project, we mainly pay attention to TypeScript calls. Back-end cloud for data storage. Actually, I didn’t use LeanCloud at the beginning. I used something else. I wanted to upload the data from the local database to the cloud, but I found that the data migration function of the cloud doesn’t work at all. I am a free user, so it may not be quick to fix the problem by proposing an issue to someone else, so I’d better find another way. LeanCloud’s data migration is easy to use, so it’s settled.

I exported data from DataGrip to CSV format. Note that you should choose to surround the field values with quotation marks to solve the problem of null values. Mark the field types properly and upload the files in LeanCloud console with one click. In addition, the JavaScript SDK used by others is now changed to LeanCloud’S SDK. In the WWW directory of Ionic project, add the index. HTML file into the script reference of the corresponding CDN. Declare var AV wherever you want to call LeanCloud SDK in your code; It’s not very ocD friendly, so it’s better to configure TypeScript after NPM.

Initialize the SDK and set the ID and Key:

You can then use it in a Service or invoke it in a Page as a Promise.

After that, you can have fun stacking components.

Some potholes, here’s a reminder:

Contains and containedIn are not the same thing. Contains is a string contains, containedIn is an array contains, and contains contains is an array contains.

The refactoring took about four days, 16 pages, 17 Components, and 5 providers, all on time! I hope this article can give you a reference on the rapid construction of small applications