How to use nicegui for beginners？

[zouzhe1]

Description

I am a novice and have not had any experience with web front-end.
I have only studied basic Python.

1，Your website is too simple. Clicking on it in the demo will directly lead to the Github code, and the experience is very poor。

2，The document page provides a very detailed introduction to each component

2.1 For example, for buttons, there is no code example for color in the document, and I have been exploring it myself for a long time

2.2 And then I saw that you said the buttons were learned https://quasar.dev/vue-components/button/#example --Custom colors, for example, I see a gloss label in it, but I don't know how to use it on Nicegui's buttons

2.3 Then, I used Pychar's automatic completion and found that the button had a style (), but I couldn't find any routines and didn't know what to fill in the style ()

3，So, you should launch a tutorial section，Similar to Python tutorials, beginners can figure out how to use nicegui step by step.

4，You mentioned in the feature that it supports jupyter, but I ran the simplest code in jupyterab and reported an error

WARNING:root:auto-reloading is only supported when running from a file
..
RuntimeError: asyncio.run() cannot be called from a running event loop

I searched for the issue record and found that #733 There is a discussion here
But since you mentioned in the feature that you support jupyter, you should not allow users to use special code implementations anymore. You should allow the most ordinary code to run.

5，The current information on your website can only be used by people with front-end development experience. The name I gave you is different from your original intention.

[rodja]

Thanks for your feedback @zouzhe1. Have you seen our recently launched wiki with a list of tutorials: https://github.com/zauberzeug/nicegui/wiki. Of course there could be more. But is it going into the right direction for you?

[falkoschindler]

@zouzhe1

1. Your website is too simple. Clicking on it in the demo will directly lead to the Github code, and the experience is very poor.

What would you suggest for improving the experience?

2. The document page provides a very detailed introduction to each component.

2.1 For example, for buttons, there is no code example for color in the document, and I have been exploring it myself for a long time

Would you like to create a pull request for a demo showing how to set the button color?

2.2 And then I saw that you said the buttons were learned https://quasar.dev/vue-components/button/#example --Custom colors, for example, I see a gloss label in it, but I don't know how to use it on Nicegui's buttons

For UI elements that are based on Quasar components, the NiceGUI documentation links to the relevant Quasar documentation. Sometimes these links are missing. Pull requests for adding missing links are very welcome.

2.3 Then, I used Pychar's automatic completion and found that the button had a style (), but I couldn't find any routines and didn't know what to fill in the style ()

Using an IDE with powerful auto-completion is always a good idea. Indeed, you need some CSS experience for using .style().

3. So, you should launch a tutorial section，Similar to Python tutorials, beginners can figure out how to use nicegui step by step.

See @rodja's comment: "Have you seen our recently launched wiki with a list of tutorials: https://github.com/zauberzeug/nicegui/wiki?"

4. You mentioned in the feature that it supports jupyter, but I ran the simplest code in jupyterab and reported an error

Sure, we could certainly improve the experience for Jupyter users. But we should open a separate discussion for this matter.

5. The current information on your website can only be used by people with front-end development experience. The name I gave you is different from your original intention.

I would argue that you can very well use NiceGUI without significant frontend knowledge. Of course, if you dive deeper, you quickly get in touch with the underlying frameworks, because they are intentionally accessible throughout NiceGUI. Otherwise we wouldn't have been able to build such a powerful tool is such a short time. But we are always open for suggestions on how to improve the implementation, the APIs and the documentation.

[alikalik9]

@zouzhe1 Maybe it wasn't intentional, but your post is a bit passive aggressive. Instead of simply critisizing the devs of a free open source tool, maybe you could provide some ideas how to improve the relevant aspects.