Developing a UI for tribes of Hive

in Proof of Brain4 years ago

image.png

First of all: Hello everyone.

Second: I am the type of person who is interested in multiple topics and is up to date with the different Hive communities, that despite the fact that I am not an ordinary and faithful user of publications. But, I generally open each community website and review trends, consumer to medium sips of content. However, I have noticed that sometimes find it somewhat uncomfortable to be browsing each browser tab (I cannot imagine how users who use alts accounts for different communities will do). Based on that case, started with a little personal problem to get the feed of the different communities and see the value of the content with its respective token.

Then asked myself:

Would anyone else be interested in a similar interface? Would they use the interface to see their posts in the different communities?

I decided to reach out to different Hive users by asking them the same questions and they all thought it was a great idea. Also, from a personal point of view, I think that Hive needs more developers and more interfaces where you can see healthy competition between each one.

Looking for Ideas:

The first step for the development of the new UI was how to propose a new design to access multiple communities without the user feeling disoriented. Researching on UX and design patterns I found several options, and for this case it is not necessary to reinvent the wheel. The design that best suits the new UI is the following:

image.png

What I thought best was that the style would be similar to the Discord app. <<< All or the vast majority who make life in Hive, use Discord >>>

This similarity will allow the user experience to improve in a great sense, because it is an application that is easy to use and at the same time complete.

Comparison of UI with Discord

Starting from the main idea that the design will be like that of Discord, we have a vertical panel on the left where the icons of each community will be displayed.

image.png

Followed by another panel where the different labels can be selected

image.png

In the center the content (Post List, Post)

image.png

Finally, a panel where the information can be toggled: showing additional information of the token or of a user.

image.png


Problems encountered (Possible solutions)

  • The first problem I got in development was the impossibility of getting good documentation for the Hive-Engine api, many of the things are not well defined. So I required a list of the current communities on Hive-Engine with their tokens, but I didn't find a specific filter that could be used. For now there is a static list with the information of each tribe.

  • Order of the communities. This problem arose right after getting the list of communities, and I was wondering in what order the communities should be displayed: By capitalization, post ..? The future solution will be that each user can order the communities to their preference.

  • How to show the content in html. Undoubtedly, this is one of the problems that so far has been a bit complex for me to solve, because both the comments and the publications are made under markwdown formats. But, finally getting a couple of libraries from twitter and checking out how the Hive condenser does it, I was able to get some useful methods to convert markdown to html.

  • Voting Power, this is a point in which I am currently working and so far I have not found much information.

Main issues to be resolved:

  • Publications
  • Comments
  • Wallet

At the moment you cannot perform many actions within the UI, but I am satisfied with what I have achieved so far, since I have little time with development. I also take the opportunity to congratulate @leprechaun with his work on the new POB interface based on the Ecency code. However, sometimes I think that it is more difficult to modify an existing code than to make one from scratch.


Posted via proofofbrain.io

Sort:  

Your post is reblogged and upvoted by me. It is a good post. Thank you @raulmz


Posted via proofofbrain.io

Join the ecency-vision project. You are reinventing the wheel if you are dealing with HTML display. Go to https://github.com/steemfiles/ecency-vision, and create a fork from the POB-vision branch.

It's not just about @leprechaun screens, ecency-vision design is good but it doesn't suit the need to be able to switch between communities, like we do in discord to switch servers.


Posted via proofofbrain.io

I was thinking about this and thought about how the wallet screen https://ecency.steemfiles.com/@leprechaun/hive can switch from hive to POB on the right hand side instead of the left. Suppose we had the same thing in the posts lists view? Except that instead of Hive and Proof of Brain currencies they would be Hive, and Proof of Brain communities and maybe some others that the user could add.

I'm also thinking some ever-green posts for beginners should show up for beginners until they dismiss them. Like the beginner's guide to Proof of Brain and other guides of use to users. I guess there is a way to pin them.

Yes, it would be fine there .. but it doesn't quite convince me, it is a useful space that can be used for many things.

I had not reviewed your progress, but they look great. you still have a problem with the screen going blank. LOL. It has also happened to me.

Have you read about the reactivity of the components?


Posted via proofofbrain.io

I dumped cookies and web data and opened a new tab. Now the problem doesn't appear.

Thank you. Keep those bug reports coming.

Hope you gain some traction with this.


Posted via proofofbrain.io

Thanks.


Posted via proofofbrain.io

This is nice. A great contribution to the Hive ecosystem. I hope to see this new interface up and running soon. Anxious! Great job so far!
😃


Posted via proofofbrain.io

Thanks.. I will continue to report progress.


Posted via proofofbrain.io

Great.!
😊


Posted via proofofbrain.io

Oh this is a nice information. Thanks for sharing


Posted via proofofbrain.io

I came here to see some code snippets and sample to help me develop the next User Interface i am about to code!


Posted via proofofbrain.io

I had the idea to do it but I did not want to do it in this first post I will explain the code later.


Posted via proofofbrain.io

Can't wait for that post.

Posted using Dapplr

contact me in discord Raulmz#3257


Posted via proofofbrain.io

sent a friend request from tazyxelos#3431

Posted via D.Buzz

how can make much POB. Can anyone give a tip or trick?


Posted via proofofbrain.io

Well the POB community has several activities in which you must participate so you would get some extra POBs, you should review your discord group and participate Discord


Posted via proofofbrain.io

Sounds like the dev team needs to still spend more time on documentation. That's going to be critical as Hive grows and more programs want to launch on top of it.


Posted via proofofbrain.io

Yes, I think that the documentation of an API is a fundamental piece for the development of applications..


Posted via proofofbrain.io

Connect

Trade


@raulmz! This post has been manually curated by the $PIZZA Token team!

Learn more about $PIZZA Token at hive.pizza. Enjoy a slice of $PIZZA on us!

Congratulations @raulmz! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s) :

You got more than 1000 replies.
Your next target is to reach 1250 replies.

You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

It sounds very interesting what you say, and it is easy to do, check the github of the tribes called "nitrous", it would only have to be changed in the json of the configuration to which tribe you are calling


Posted via proofofbrain.io

Yes, I checked it. but i think its a good time for a new interface...


Posted via proofofbrain.io

Some links to help ya out ..

To convert the post to markdown:
https://github.com/jonschlinkert/remarkable

To sanitize the html before presenting it, preventing xss:
https://github.com/apostrophecms/sanitize-html

To do the cool slide out the menu bit:
https://slideout.js.org/