From here on, I would be writing a series of blogs conveying my trials and experiences developing for the frontend of my current project using Vue.js. The title of my blog posts after this one would follow a similar pattern to the one above, partly because I’m running out of blog posts titles ideas as well. Let’s get started then.
Last week, I talked about making some changes to the backend of the application, given our new way of dealing with databases. But now, my attention and focus have shifted once again to the frontend development. I hope that I would not having to change anything else in the backend after this. There is still lots of work to be done.
Trying to take things one at a time, I decided to work on developing a user interface that enables them to configure their cloud storage service, which will be used to save their projects in and of course our application’s database as well. They would need to configure their storage when they login for the first time, using a new browser or want to add in a new storage service to use. That being said, the user could configure multiple storage services and switch between them interchangeably when using the application. However, if they were to switch to another browser or use a different device, then they would need to configure those storage services again, which is how the application works at the moment.
So far the application is only supporting SSHFS protocol to connect to a remote storage service. Support for more protocols would be added in subsequent versions. The user would be guided through some steps during storage configuration. In the first step, they would need to select their desired cloud storage service. Here’s a peek of what it looks like for now:
Don’t mind the icon, title and caption of that single cloud service above. It would be subjected to changes later.
As support for more protocols and services are added, each of them would be placed as a tile one after another, forming a grid list kind of look. Once a service is selected, the user could then proceed to the next step, where they would have to fill in a short form regarding their storage details. The form may vary for each and every service. This is for SSHFS at the moment:
Well it didn’t look like this at first. When I first started, it was less user friendly than the one above. Fortunately, Dr Shawn was able to point out the errors of my ways.
Having filled in the necessary details, the user then submits the form and the inputs are validated. But what the application actually does after that is it takes the given information and forms a URI, which would be used as part of a request to a REST API endpoint in the backend that will attempt to connect and mount the remote filesystem. This is what the user would see when the connection is taking place:
Upon a successful connection, the application would immediately direct the user to the dashboard, where they can see their saved projects and registered boards. The configuration procedure has ended, congratulations to the user. On the other hand, for any error occurred, the user would see RED:
At this point, the user could return back to the form and make amendments, or even go back to the first step to choose another storage service maybe, by clicking on any of the stepper steps.
That’s all I have to show for this week. Stay tuned for the following blog posts to come.
0 Comments