Author｜Lu Yao
As a landscape photographer, being able to capture a magnificent sunrise and sunset is a basic skill. Those who are more energetic will continue to wait after sunset, looking forward to a sky full of stars. Behind this seemingly simple shooting plan, in practice, you will definitely encounter several problems:
Where should I go to shoot? what time does sunset In which direction will the sun set? What time will the starry sky appear? Where is the galaxy?
These problems are the pitfalls that you will inevitably step on when you first enter landscape photography.
I am a landscape photographer and an individual developer. I understand the needs of photographers and meet them through technology. "Gusi's Landscape Photography Assistant" was born to solve these problems .
"Gusi's Landscape Photography Assistant" provides information such as sun and moon time, moon phase, and Milky Way rise and fall. It also provides practical functions such as exposure calculation, light painting pen, weather forecast, and tide query, helping landscape photographers easily arrange shooting plans .
The development of the first version of the mini program took only 5 days with the support of Zhixiaoyun platform. Since its launch, it has been spread entirely by word of mouth, and has served more than 10,000 landscape photographers. At the same time, it also won the 2020 Zhixiaoyun Best Creative Award.
Although the data is not eye-catching, it is indeed a lot of encouragement for me. So how did all this work?
friendly + efficient
To achieve "friendliness + efficiency", we need to start from functional display and user experience.
First of all, at the beginning of the design, most of the functions are required to be completed within three clicks, and the page level must not exceed five pages. As a function-aggregated applet, on the first opened homepage, it is necessary to clearly display the function classification, and the user can see the most important information with one click, instead of throwing everything to the user at once, causing the screen to be full of So much so that the user doesn't know which is the point. In addition, considering that outdoor shooting users may wear gloves, the touch area of the function panel is also set very large for easy operation.
Second, there is clear navigation. Most of the mini programs will use a custom navigation bar. At this time, WeChat will retain the menu button in the upper right corner but will not provide a unified return button, and the return function happens to be very inconspicuous and easy to forget to do. Although WeChat officially supports sliding right on the screen to exit, this function cannot be missed on the screen, because its sliding interaction may conflict with page operations. For example, on the map page, when you swipe to exit, it actually triggers the swipe operation of the map. From the perspective of avoiding misuse, it is best to directly place the return button on the screen.
Third, for some relatively complex functions that require a little learning cost, directly provide simple tutorials that can be referred to, instead of using full-screen pop-up windows or step-by-step teaching to force users to click step by step to use.
Stable + Reliable
Stable and reliable service. This not only requires interaction, but also needs to solve problems from the perspective of front-end and back-end development. As a front-end developer, how to provide users with an online service with almost no back-end support is a big problem.
The first difficulty encountered is that too many built-in pictures cause the small program package to exceed the capacity limit. If the picture is suppressed, the quality loss will be great, so the picture resource must be put online. Fortunately, Zhizhiyun provides the function of static resources, and can directly and quickly obtain the desired image size through URL mapping.
The second difficulty is the stability of online services. For me, it takes a lot of energy to build and maintain a complete and available background system, and in order to make the service faster and more stable, the annual cost of purchasing cloud hosts is not low, the most troublesome (in fact, lazy) It is necessary to write the interface yourself. Fortunately, Zhizhiyun provides a package of serverless solutions, which can directly obtain the designed data structure from the front end, which greatly saves the workload.
Code combat
Take "Camera Favorites" as an example, this function is designed to record and share camera locations for photographers. In this function, four basic operations of adding, deleting, modifying and querying data are included. When building the page structure, we can start from the order of the user's operations.
First analyze our product operation process: a user creates a location, that is, a piece of data. The creator can edit or delete this place by himself, and can also share this place. When others open it through sharing, click to bookmark this location, then this piece of data will be copied to the collector's name, and the collector can see and modify his own record in his favorites.
After clarifying the process, we create a data table in the background of Zhizhiyun and set user permissions. Our location can be edited by the creator, but others can only view it (editing can only be done after copying this record), so set the ACL permission as shown below:
Then we design the table fields according to the content of each record: title (Title, string type), multiple pictures (Img, array type), location (Location, geojson geographic coordinate type), source (Source, string type) , star rating (Level, Integer type), other information (Info, string type), owner (Owner, number type), and then add tags, comments and other reserved fields according to future function planning. Here, you must think carefully when creating a field. Once it is created, it will be very troublesome to change some of its attributes (such as changing the data type).
Then we started to draw the page and connect the interface according to the idea. The construction of the page according to the prototype diagram is very simple, so there is not much to expand here. In the last save button, ordinary string and number fields such as title, star rating, and other information can be directly saved in the data table, and three fields need to be processed separately.
One is to upload pictures. We need to add a new category "Camera" under the "File" module of Zhizhiyun background, and the pictures uploaded by subsequent users will be stored here.
Then according to the documentation, only a few lines of core code are needed to encapsulate a public method for uploading pictures in batches. After uploading, we save the id or url of the picture in the data table (using the uniapp framework):
The second is geographical location. First of all, we need to know that the international standard is wgs84, while the standard of my country's national survey bureau is gcj02. There is a conversion process between these two coordinate systems. In the applet, in order to ensure the accuracy of calculations involving coordinates such as sunrise and sunset, the wgs84 standard is uniformly used, and the geographical coordinate selection of Tencent Map is gcj02, so when the user selects a location and clicks OK, it needs to be converted into wgs84 (here I use the npm package of coordtransform2 ). You can directly set this package as a global method in app.onLaunch, and use it directly in the form of this.coordtransform.gcj02towgs84(latitude, longitude):
Finally, when saving the data, since the type of geojson is to be stored, and javascript itself does not have this type, remember to convert it through the method of creating a geographic location object provided by Zhizhiyun:
After the save is successful, we can see such geographic location data in the Zhizhiyun background:
The third is the Owner field. The difference between this field and the Created_by field is that when a user collects other people's places, the Owner points to the user himself, so that it can be distinguished whether the data is created by the user himself or collected by others. .
After having the data, the rest is very simple. When viewing, the user directly queries the places he can see according to the Owner field equal to the current user's id:
Copy this piece of data when you click Favorites, replace the Owner with your own id and save it under the current user name:
One to two to complete the realization of a fission function through a small amount of code. In the middle, we use Zhizhiyun's ready-made file upload api and wx.BaaS method to access and operate the data table, and ensure the control of data permissions through the permission setting of ACL, which can be done without any back-end support at all. It is very friendly to individual developers like me to focus more on the realization of product logic with limited energy.
That’s all for my sharing, I hope the ideas are helpful to you; I also hope that everyone can try serverless development to create more creative products and better serve users.
The editor has something to say:
As a developer and also a user, the author can better stand on the user's point of view and maximize the functions and user experience of "Gusi's Landscape Photography Assistant". The applet has good visual effects, complete functions, and simple and clear operation. It can become a tool that photography enthusiasts can use anytime and anywhere.
If you think the mini program shared and developed by the author is useful to you, please forward the article and like the mini program to give the author more encouragement~
The original intention of Zhizhiyun is to use the serverless architecture provided so that developers do not need to master tedious back-end development, build servers, and complete domain name filing, but only need to focus on the realization of business logic, which is fast and saves time. Online applet. It is a great honor to be able to provide support in the development of "Gusi's Landscape Photography Assistant". I hope that Yunyun service can continue to help more developers quickly implement their ideas.
If you have any suggestions and ideas, you are welcome to leave a message at the end of the article or send a private message to Xiaoyun, we will convey your information to the author as soon as possible, and you are also welcome to share "the story behind the applet you developed".