By Lu Yao
As a landscape photographer, capturing a spectacular sunrise and sunset is essential. The more energetic will wait after sunset, hoping for the stars. Behind this seemingly simple shooting plan, there are bound to be several problems in practice:
Where should I shoot? What time does the sun set? In which direction will the sun set? What time will the stars appear? Where is the Milky Way?
These problems are the first landscape photography will inevitably step on the pit.
I am both a landscape photographer and a personal developer. I understand the needs of photographers and can use technology to meet their needs. “Tortoise’s Landscape Photography Assistant” was born to solve these problems.
“Turtle’s scenery photography assistant” provides the sun and moon time, moon phase, the rise and fall of the Milky Way and other information, but also provides the exposure calculation, light brush, weather forecast and tide query and other practical functions, to help landscape photography enthusiasts easily arrange the shooting plan.
The first version of the mini program was developed in just five days with the support of the cloud platform. After the launch, it has served more than ten thousand scenery photographers and won the 2020 Best Creative Award of Knowing Cloud.
It’s not statistically significant, but for me, it’s really encouraging. So how does this work?
Friendly + Efficient
To achieve “friendly + efficient” this point, we need to start from the display of functions and user experience.
First of all, at the beginning of the design, it is required that most functions are completed within three clicks, and the page level must not exceed five pages. As a small program with function aggregation, it should clearly show the function classification at the first home page, and the user can see the most important information by clicking, rather than throwing everything to the user at once, so that the screen is full of key points and the user does not know which is the key point. In addition, considering that users may be wearing gloves for outdoor photography, the touch area of the functional panel is also set to be very large for easy operation.
Second, there is clear navigation. Most small programs will use custom navigation bar. At this time, wechat will keep the menu button in the upper right corner but will not provide a unified back button, which happens to be a very insignificant and easy to forget to do function. Although wechat officially supports right-swiping on the screen to exit, this function can’t be missed on the screen, because its swiping interaction may conflict with page operations. On the map page, for example, the slide to exit triggers the slide of the map. To avoid misoperations, it’s better to put the return key directly on the screen.
Third, for some relatively complex features that cost a little to learn, there are simple tutorials that can be read directly, rather than full-screen pop-ups or step-by-step tutorials that force users to click through.
Stable + reliable
Stable and reliable service. This needs to be addressed not only in terms of interaction, but also from a front and back development perspective. As a front-end developer, it’s a big problem how to deliver an online service to users with very little back end support. The first difficulty is that the number of built-in images causes the small package to exceed the capacity limit. If you suppress the picture, the loss of quality is great, so you must put the picture resources online. Fortunately, the cloud provides the function of static resources, and you can quickly get the desired image size directly 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 usable background system. In order to make the service more fast and stable, the cost of purchasing cloud host every year is not low. The most troublesome (in fact, it is lazy) is to write the interface by myself. The good news is that knowing the cloud provides a package Serverless solution that allows you to get the designed data structures directly from the front end, saving a lot of work.
The code field
Take “location favorites” as an example. This feature is designed to record and share location information with photographers. In this function, contains the data to add, delete, modify, query four basic operations. When building the page structure, we can start from the user’s action sequence.
Let’s start by analyzing our product operation process: users create a place, which is a piece of data. The creator can edit or delete the site, or share the site. When someone clicks on “Collect” the location when they open it through sharing, the data is copied to the name of the collector, and the collector can see and modify his or her record in his or her favorites folder.
Once the process is clear, we create a data table in the background of the cloud and set user permissions. Our location can be edited by the creator, but others can only see it (copy this record to edit), so set the ACL permissions as follows:
Then we design the table fields according to the content of each record: Title (string), multiple images (Img, array), Location (geojson), Source (string), star (Level, Integer), and other information (Info, String type), Owner (number type), and the ability to add reserved fields for labels, comments, and so on, depending on future functionality plans. It is important to think carefully when creating the field. Once it is created, it is difficult to change some of its properties (such as changing the data type).
Then we start drawing pages and interfaces based on our assumptions. Building a page from a prototype is very simple and won’t be expanded here. In the final save button, the normal string and number fields such as title, star, and other information can be saved directly into the data table, and three fields need to be processed separately.
One is the uploading of pictures. We need to add a new category “machine location” under the “file” module in the background of cloud awareness, where the pictures uploaded by users will be stored.
Then according to the document, it only takes a few lines of core code to encapsulate a public method for uploading images in bulk. After uploading, we save the id or URL of the image in the data table (using the UniApp framework) :
The second is geography. First of all, we need to know that the international standard for WGS84, and China’s national survey bureau standard for GCJ02, these two coordinate systems in use when there is a conversion process. In the small program, in order to ensure the accuracy of the calculation of sunrise and sunset, which involves coordinates, wGS84 standard is uniformly used. While the geographical coordinates of Tencent map are selected by GCJ02, so when the user selects the location and clicks OK, It needs to be converted to WGS84 (I used the NPM package of CoordTransform2 here). In app. Will this package directly set as global onLaunch method, directly by enclosing coordtransform. Gcj02towgs84 (latitude and longitude) use this form:
Finally, when saving the data, since you are storing the geoJSON type, and javascript itself does not have this type, remember to convert it by knowing that the cloud provides a method for creating a location object:
After successful preservation, we can see such geo-location data when we know the cloud background:
The third is the Owner field. The difference between this field and the Created_by field is that when the user collects someone else’s location, the Owner points to the user, so that the user can tell whether the data was created by the user or saved from someone else.
With this data in hand, the rest is very simple. The user can query the location he can see directly based on the Owner field equal to the id of the current user:
When clicking “Save”, copy this data and change the Owner to its own ID and save it to the name of the current user:
One by one, through a small amount of code to complete the implementation of a fission function. In this process, we use the off-the-shelf file upload API and WX. BaaS method to access and operate the data table, and ensure the control of the data permission by setting the ACL permission. It can be done without any support from the back end. We put more limited energy on the implementation of the product logic. Very friendly for individual developers like me.
My share is these, hope the train of thought is helpful to you; I also hope that you can try serverless development in this form, to create more highly innovative products, better service users.
Xiaobian has the words:
As a developer as well as a user, the author can better stand in the user’s point of view, and achieve the ultimate function and user experience of “Tortoise’s scenery photography assistant”. The small program has a good visual effect, complete functions, simple operation, can become photography enthusiasts anytime and anywhere can use the tool.
If you think the author shared and developed a small program useful to you, please forward the article and the small program to give the author more encouragement ~
Understand the original intention of cloud, is to provide Serverless no-service architecture, so that developers do not need to master the tedious back-end development, do not have to build servers, complete the domain name record, just focus on the realization of business logic, so as to quickly and cheaply launch small programs. I am honored to provide support in the development of “Landscape Photography Assistant of Tortoise”. I hope to know that Yunyun service can continue to help more developers to quickly implement their ideas.
If you have any suggestions or ideas, please leave a message at the end of this article or send a private message to Xiao Xiaoyun. We will be the first to communicate your information to the author. You are also welcome to share “the story behind your small program”.