Hello Carolina !
It will be a pleasure to share some of my experience and difficulties with developing an app using Streamlit.
Well, Iâm 46 years old, Iâm a systems analyst specializing in Oracle. I worked for many years in large companies and had a lot of experience with different users and as a developer I created a lot of programs in different segments which gave me a good experience.
WEB was never my specialty, but itâs the future, PYTHON is the future in my opinion!
Many years ago I tried to do something that Streamlit is currently doing using React, but the learning curve is very big, since you need to know other technologies like HTML5, CSS, JAVASCRIPT, etcâŚ
Based on that, I was looking for a framework that would meet what Streamlit is proposing, but I only came to know it now.
In that time, I got to know a NOCODE tool called Bubble.io from which you can do almost everything in a simple way, using drag and drop and customizing properties, but not everything is flowers.
Bubble, leaves you stuck in choosing the database, locks you in certain operations that should be simple and has some other limitations and one of them is that you donât have full control of what you developed!
I have an App that I developed in Bubble for a kayak factory, of which I will be showing some screens here.
I needed to create a backend PYTHON api to access data from a POSTGRESQL base and because of that I wanted to keep
all the code in Python, both the backend which is already ok and the frontend using Streamlit.
Itâs been a few days since Iâve been working with Streamlit, I really liked the proposal and it matches what I think, but I could see some difficulties in making the screens of my APP.
I would like to try to point out some things that I see that would be important to have in Streamlit.
Primordial to have an easy way to customize components to deliver a nice UIX
where small details make the difference in a final product.
I noticed an initial difficulty of having to know CSS and find the correct tags to be able to customize the screens,
since this can harm Streamlit itself if it wants to rename the CSS classes, as
this will generate errors in the applications of those who are manually customizing through CSS.
I think that some basic formatting is impossible to escape. For example:
- Change font, size, style, color and alignment
- Background color, alignment, border formatting
- spacing
- customization of onclick, mouse over events, etc.
Maybe an alternative would be to create a function like: st.css( id_element, css_tag_name, css_tag_value )
st.title( âmyTitleâ, âThis is an exampleâ )
st.css( âmyTitleâ, âfont-familyâ , âRobotoâ )
st.css( âmyTitleâ, âfont-weightâ, âboldâ )
st.css( âmyTitleâ, âfont-sizeâ , â18pxâ )
st.css( âmyTitleâ, âfont-colorâ , â#FFFFFFâ )
st.image( âmyImageâ, "st.image(âapp\images\logo-kayak-otters-original.jpgâ, use_column_width=True)
st.css( âmyImageâ, âalignâ, âleftâ )
col1, col2, col3=st.columns(3)
st.css( col1, âalignâ , âleftâ )
st.css( col1, âfont-familyâ , âRobotoâ )
st.css( col1, âfont-weightâ , âboldâ )
st.css( col2, âalignâ , âcenterâ )
st.css( col3, âalignâ , ârightâ )
Note: The interesting thing would be a way for the developer to discover the names of tags and possible values!
*** Going further and I think it would also be more productive for the user to be able to copy a html or bootstrap code
that already has a lot of formatted and responsive stuff and introduce it to Streamlit in a way that is possible
customize onclick, onchange, onmouse, etc events for Python functions.
Bootstrap example:
buttons="""
Left
Middle
Right
"""
st.markdown( buttons, unsafe_allow_html= True )
How to assign button click to a Python function ?
st.set_event( âbtn1â, onclick=âmyPythonFunctionâ )
def myPythonFunction():
st.sucess(âButton 1 was pressed !â)
Follow attached a video from my app that I´d like to create with streamlit.
Best, Ricardo Pascoal
(Attachment 20220607_154750.mp4 is missing)