The original article was first published in my blog, welcome to pay attention to ~

About six months ago (November 28, 2017) I opened source PicGo, an open source desktop application based on Electron Vue, on GitHub. The starting point was to improve the difficulty I had in texturing my blog. After half a year of continuous maintenance and some publicity (PicGo: Electron Based Image uploading tool “, “PicGo V1.5 map bed uploading tool update: Support COSv5 version of Tencent cloud, support GitHub map bed, support to rename files before uploading, etc.), on June 12, its star number also finally broke through the level of 1000. I also learned a lot in the process. In the process of communicating with everyone, I found that everyone had these needs, only to find that my initial implementation ideas were not in place and so on. I would like to record in this article my mind process related to PicGo.

Not long ago, there happened to be a developer chyingp’s open source project broke 1000star, also has a similar article, congratulations!

The project was born

When I started my blog, I used to use Qiniu’s graphics platform, so when I wanted to create a texture in Markdown, I had to log in to Qiniu, manually upload the image, find the button to copy the link, and then copy it to MarkDown. To display an image in Markdown I had to go through the above four steps.

My own laptop uses a MAC, so I got my hands on a bed mapping gadget called the iPic. While using it, I also learned about weibo map bed. The features and experience of iPic are really good. However, if I need to use seven cows and other chart beds, I have to pay. If iPic had supported Windows, I would have paid for it. (Because the lab computer is Windows, I usually use Windows to write in the lab). Paying for MAC alone is a little unacceptable to me.

So I was wondering if I could write a tool to simplify the process of uploading pictures. This application can realize dragging and uploading pictures, and then automatically copy the link to the clipboard after uploading, so I just paste it into Markdown. I wanted to write a MAC application in swift and a Windows application in C#. It turns out that the workload is not only huge, but the cost of learning is also high. So he chose to embrace Electron in the end.

At the beginning, I didn’t choose electron mainly because in my impression, the application volume of electron is quite large (over 100MB), so I felt that the volume might be a little unfriendly. However, after I used the electron vue to pack it, I found that the size was in the acceptable range (about 50M for MAC and 38M for Windows), so I decided to use it. The main reason for using electron vue is that I write a lot of VUE and want to learn it at a lower cost. In this way, I only need to learn the electron part.

I started writing the app at the end of last year (late November).

Project released

A series of experiential tutorials on electron-vue development will be given at the end of this article

After more than 20 days of intermittent development, I released version 1.0.0 on December 12. Since it was originally developed on the MAC, version 1.0.0 only supports macOS. At the beginning of the support of the graph bed is not much, only support weibo and seven cattle two graph bed.

Screenshots of version 1.0.0 are as follows:

Basically realized what I expected, like iPic can be uploaded by dragging to the top bar icon. And in order to support Windows in the future (Windows taskbar ICONS do not support drag events), I made a main window with a drag upload area in the main window. Since I have the main window, I also put the map bed configuration in the main window.

There it is, and I want more people to use it. So I posted articles on Bupt forum, CNode, V2EX and Nuggets. However, at the beginning of the few people to see the article is not many people to see and use. Later I posted the same article on Minority and was accidentally recommended to the front page.

This opportunity gave PicGo an unexpected number of users and stars. In the process of communicating with users, I gradually added functions and fixed bugs to PicGo. On January 10, PicGo was updated to support Windows with v1.3.1.

As PicGo began to have users, there were indeed many features missing in the early days of PicGo, such as shortcuts to upload, the absence of other commonly used maps, and so on. So that was the fastest time of PicGo iteration. Through everyone’s feedback in the issue, I am also constantly polishing PicGo. It can be seen that by June 14, there have been 61 closed issues.

The project to improve

User experience is something that developers really don’t think about right away. I learned this from PicGo.

For example, I added the shortcut key upload function. At the beginning, I felt that it was difficult to write a customized shortcut key, so I decided to set a shortcut key that people basically do not use. So I default to command/ CTRL + Shift + P. I don’t have any problems with it myself. As a result, someone gave me feedback that the shortcut key conflicts with some software, can you give a shortcut key custom function? This is a question I cannot avoid. So I started to learn how to add custom shortcuts. And implemented this feature not long after.

Take the issue of customizing link formats. I started by giving you four formats for copying links: Markdown, HTML, URL, and UBB. I thought these 4 formats would be enough for normal use. Later someone raised an issue and asked PicGo if he could customize the link format because he wanted to add some HTML based attributes such as size center etc. I thought there was a use case for this, so I implemented it in a later commit.

Of course, I don’t have to do it just because everyone needs it. There are also some requirements that I feel do not fit my positioning for PicGo, so I will refuse. For example, can you upload video files later? Since PicGo was originally developed for images only, the process (Image -> Base64) does not allow uploading video files. So I said no.

There is another issue that has a profound influence on me and the PicGo project. ZetaoYang proposed an idea:

This advice changed my thinking about the rest of PicGo’s development. I thought about it for a long time and realized that really adding the default chart bed support step by step wasn’t going to last. One is repetitive labor too much (in addition to different protocols and encryption methods, the process of receiving files, transferring them to Base64 and finally uploading them to local is the same), the other is endless graphics support should not actually. By contrast, PicGo would be a much better app for Core+Plugin. The Core part can only do the image receiving and transcoding separately, and reserve some life cycle for different needs to call in the upload process. Parts of Core can be published separately as an NPM package. Plugin can realize the life cycle of access Core, can realize its own upload logic, can realize image compression, watermarking and other functions. PicGo just covers a layer of electron skin on the basis of Core+Plugin for the convenience of ordinary users, while Core and Plugin can be independently removed for the convenience of developers to use and develop. This is what version 2.0 of PicGo will do.

conclusion

In the process of developing PicGo, I also learned deeply that it is not difficult to write a DEMO, but difficult to inject your own mind and soul into the DEMO. PicGo started as a toy app that I wanted to simplify the process of uploading pictures. Now, it has been downloaded more than 7,000 times and become an efficiency tool for many users. In fact, it has not been easy all the way. Nowadays, people have higher and higher requirements for user experience. If you only indulge in your own DEMO, you will only be eliminated by better products.

PicGo has also been a joy to develop. Everybody gives me the appreciation and thanks, is to give me to continue to develop the power. And I found more and more articles that mentioned PicGo. As follows:

  • “Old Driver’s Magic Weapon – Efficiency Tool”
  • PicGo’s Powerful Free Mapping tools
  • PicGo: An Open Source Photo Management Tool
  • PicGo
  • Improving Your Life — Personal Productivity Tools and Recommendations
  • 7 Windows Domestic Software Recommendations

I think it is the greatest affirmation for me to get your recognition and write it into your articles, which makes me more happy than the star number.

In the course of developing PicGo, I also wrote a series of articles on Electron- Vue development. If you also want to learn the development of electron or electric-vue, I hope my article can help you. If you haven’t heard of PicGo before, give it a try; If you think it works, click star