Author: | lu yao
As a landscape photographer, it is essential to be able to capture a spectacular sunrise or sunset. Those who are more energetic will keep waiting after sunset, hoping for a starry sky. Behind this seemingly simple shooting plan, in practice, there will be several problems:
Where should I shoot? What time does the sun go down? In which direction will the sun set? What time does the starry sky appear? Where is the Milky Way?
These questions are the pits that you will inevitably step into when you first get into landscape photography.
I am both a landscape photographer and a solo developer who understands the needs of photographers and meets the needs of photographers through technology, and Turtle’s Landscape Photographer Assistant was created to address these issues.
“Guisi Landscape Photography Assistant” provides information about the time of the sun and the moon, the phases of the moon, the rise and fall of the Milky Way, as well as practical functions such as exposure calculation, light pen, weather forecast and tidal query, to help landscape photography lovers easily arrange their shooting plans.
The development of the first version of the small program, with the support of the know-cloud platform, took only 5 days. After its launch, it has served more than ten thousand landscape photographers by word of mouth, and also won the best creative award of know-cloud in 2020.
Although the data is not significant, but for me, it is a big encouragement. So how does this work?
Friendly + Efficient
To achieve the “friendly + efficient” point, we need to start from the functional presentation and user experience.
First of all, at the beginning of the design, most functions are required to be completed within three clicks, and the page level must not exceed five pages. As a small program of function aggregation, it should clearly show the function classification on the first page just opened, and the user can see the most important information with a click, instead of throwing everything to the user, causing the screen to be full of key points so that the user does not know which one is the key. In addition, considering that the user may wear gloves for outdoor shooting, the touch area of the function panel is also set very large for easy operation.
Second, have clear navigation. Most applets use a custom navigation bar, and WeChat retains the menu button in the upper right corner but does not provide a unified back button, which happens to be a very humble and easy to forget to do. Although WeChat officially supports right-swipe exit, it can’t be left out of the screen, because its swipe interaction can interfere with the page operation. For example, when you swipe out of a map page, it actually triggers a swipe of the map. To avoid this, it’s best to place the Back button directly on the screen.
Third, for some relatively complex functions that require a little learning cost, simple tutorials can be provided directly, instead of using full-screen pop-ups or step teaching to force users to click step by step before using them.
Stable + reliable
Stable and reliable service. This needs to be addressed not only in terms of interaction, but also from a front-end development perspective. As a front-end developer, how to provide an online service to users with very little back-end support is a real problem. The first difficulty was that too many built-in images caused the small package to exceed its capacity limit. If you suppress the picture, the loss of quality is very big, so you must put the picture resources on the line. Fortunately, knowing that the cloud provides the function of static resources, but also through the URL map to directly and quickly get the size of the picture you want.
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 rapid and stable, the cost of purchasing cloud host is not low every year. The most troublesome (actually lazy) is that I need to write my own interface. Fortunately, KnowCloud provides a package of Serverless solutions, which can directly obtain the designed data structure from the front end, greatly saving the workload.
The code field
Take “Favorites” for example, a feature designed to record and share plane positions with photographers. In this function, includes the data of the new, delete, modify, query four basic operations. When building the page structure, we can start from the order of the user’s actions.
First we analyze our product process: the user creates a place, which is a piece of data. Creators can edit or delete the site themselves, or share the site. When others open it through sharing, click the “Favorite” site, then the data will be copied to the name of the collector, and the collector can see and modify the record in his favorite folder.
After the process is defined, we create a data table in the background of the cloud and set the user permissions. Our site can be edited by the creator, but others can only view it (copy this record before editing), so set the ACL permissions as shown in the following image:
Then we design the table fields according to the contents of each record: Title (string type), multiple images (IMG, array type), Location (Location, GeoJSON geographic coordinate type), Source (Source, string type), star (Level, Integer type), other information (Info, String type), Owner (Owner, number type), and then you can add reserved fields for labels, comments, etc., based on the planning of future functionality. It’s important to be careful when creating a field, because once it’s created, it can be difficult to change some of its properties (such as changing the data type).
Then we started drawing the page and connecting the interface according to the idea. Setting up the page from the prototype diagram is very simple, not much to do here. In the last save button, ordinary string and number fields such as title, star level and other information can be directly saved to the data table, and three fields need to be processed separately.
One is picture uploading. We need to add a classified “machine position” under the “file” module of the cloud background, and the pictures uploaded by subsequent users will be stored here.
Then, according to the documentation, it only takes a few lines of core code to encapsulate a public method for bulk image uploading. 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 should know that the international standard is WGS84, while the standard of China’s National Survey Bureau is GCJ02. There is a process of conversion between the two coordinate systems when they are used. In the applet, the WGS84 standard is used to ensure the accuracy of the calculation of coordinates such as sunrise and sunset, while the geographic coordinates of Tencent map are selected by GCJ02, so when the user selects a place and clicks OK, You need to convert to WGS84 (here I’m using the NPM package of CoordTransform2). 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’re storing the GeoJSON type, which JavaScript itself does not have, remember to convert by knowing the cloud’s method for creating a geolocation object:
After the successful saving, we can see such geographical location data in the background of knowing cloud:
The third is the Owner field. The difference between this field and the Created_by field is that when a user bookmarks a location, the Owner points to the user himself, and can tell whether the user created or bookmarked the location.
With the data in hand, the rest is fairly simple. When the user looks up the location he can see, the Owner field is equal to the current user’s ID:
When clicking Favorites, copy this data, change the Owner to his own ID and save it to the current user name:
One by one, a fission function is achieved with a small amount of code. In the middle of this, we use the existing file upload API of the cloud, wx.BaaS method to access and operate the data table, through the ACL permission setting to ensure the control of the data permission, do not need any support of the back end can do, put more limited energy on the implementation of the product logic. It’s very friendly for individual developers like me.
My share is these, hope the train of thought is helpful to you; Also hope that we can try this form of serverless development, to create more creative products, better service users.
Xiaobian has to say:
As a developer as well as a user, the author can better stand in the user’s perspective and make the functions and user experience of “Guisi’s scenery photography assistant” to the extreme. Small program has a good visual effect, complete functions, simple and clear operation, can become photography enthusiasts anytime and anywhere can use the tool.
If you find the author’s shared and developed applet useful to you, please forward the article and give the applet a “like” to give the author more encouragement
The original intention of knowing cloud is to provide Serverless service architecture, so that developers do not need to master the tedious back-end development, do not have to build a server, complete the domain name filing, just focus on the implementation of business logic, so as to quickly and easily online small programs. It is a great honor to provide support in the development of “Guisi’s Landscape Photography Assistant”. I hope to know that Yunyun service will continue to help more developers to quickly implement their ideas.
If you have any suggestions and ideas, please leave a message at the end of this article or send a private message to Xiao Xiaoyun. We will communicate your information to the author as soon as possible, and you are also welcome to share the “story behind the small program you developed”.