Scribd
Upload
154 views

How To Build A Web Application Without Any Front-Line Coding - by Huixin K. - Medium

The document discusses how to build a web application without any front-end coding using the Streamlit library in Python. It demonstrates creating interactive dashboards with Streamlit, including a histogram, map with geographic data points, and word cloud. The code generates fake sample data and displays it in the app, and also allows users to download the data. The full code is available in a GitHub repository. Streamlit allows creating web apps directly in Python notebooks or scripts without traditional front-end skills.

Uploaded by

Dirga Daniel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
154 views

How To Build A Web Application Without Any Front-Line Coding - by Huixin K. - Medium

The document discusses how to build a web application without any front-end coding using the Streamlit library in Python. It demonstrates creating interactive dashboards with Streamlit, including a histogram, map with geographic data points, and word cloud. The code generates fake sample data and displays it in the app, and also allows users to download the data. The full code is available in a GitHub repository. Streamlit allows creating web apps directly in Python notebooks or scripts without traditional front-end skills.

Uploaded by

Dirga Daniel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

3/8/2021 How to build a web application without any front-line coding | by Huixin K.

| Medium

Huixin K. 1 Follower About Follow Upgrade

How to build a web application


without any front-line coding
Huixin K. Dec 13, 2020 · 2 min read

Streamlit is an open-source app framework for Machine Learning and Data


Science teams. Create beautiful data apps in hours, not weeks. All in pure
Python.

The possibilities with Streamlit library are infinite. Building a dashboard is


probably the simplest thing you can dabble using this library.

You can find the end product over here on Heroku: https://faker-
streamlit.herokuapp.com/
https://hxkoey.medium.com/how-to-build-a-web-application-without-any-front-line-coding-6ff7278a27aa 1/7
3/8/2021 How to build a web application without any front-line coding | by Huixin K. | Medium

Importing the necessary libraries

import streamlit as st
import pandas as pd
from faker import Faker
import random
import plotly.express as px
from wordcloud import WordCloud, STOPWORDS
import base64

After generating 500 data points from the Faker library including latitude
and longitude, it’s time to build our interactive dashboard.

Creating a histogram from plotly express

fig2 = px.histogram(data_country, x=’job’, y=’salary’,


color=’sentiment’, facet_col=’country’, facet_row=’sex’,
histfunc=’sum’, width=900, height=600)

st.plotly_chart(fig2)

https://hxkoey.medium.com/how-to-build-a-web-application-without-any-front-line-coding-6ff7278a27aa 2/7
3/8/2021 How to build a web application without any front-line coding | by Huixin K. | Medium

Creating points on world map


With lat and lon in the dataframe, you can now create quick geospatial
scatterplots with just one line of code. If you need more control, you’ll need
to use st.pydeck_chart which I have not tried.

st.map(modified_data)

https://hxkoey.medium.com/how-to-build-a-web-application-without-any-front-line-coding-6ff7278a27aa 3/7
3/8/2021 How to build a web application without any front-line coding | by Huixin K. | Medium

Creating a wordcloud

fig = px.imshow(wordcloud, width=700, height=700, x=None, y=None)

fig.update_layout(
yaxis=dict(tickvals=[]),
https://hxkoey.medium.com/how-to-build-a-web-application-without-any-front-line-coding-6ff7278a27aa 4/7
3/8/2021 How to build a web application without any front-line coding | by Huixin K. | Medium

xaxis=dict(tickvals=[])
)

st.plotly_chart(fig)

https://hxkoey.medium.com/how-to-build-a-web-application-without-any-front-line-coding-6ff7278a27aa 5/7
3/8/2021 How to build a web application without any front-line coding | by Huixin K. | Medium

Downloading the dataset


To display the dataframe on Streamlit, all it took was just one line of code.
But I thought “Wouldn’t it be awesome if I could download the data onto
my local computer?” It didn’t take me long to find a ready solution on
Google.

### SHOW RAW DATA


if st.sidebar.checkbox('Show raw data',True):
st.subheader('Showing raw data below')
st.write(data)

with st.beta_expander("Expand to download data into CSV"):


tmp_download_link = download_link(data, 'faker-data.csv', 'Click here
to download your data!')
st.markdown(tmp_download_link, unsafe_allow_html=True)

Where to find the code


The code can be found over here: https://github.com/hxkoey/streamlit-
example

https://hxkoey.medium.com/how-to-build-a-web-application-without-any-front-line-coding-6ff7278a27aa 6/7
3/8/2021 How to build a web application without any front-line coding | by Huixin K. | Medium

Final Thoughts
Since I started coding about a year ago, I have been using Jupyter
notebooks on my local computer which has been fantastic so far. As I
progressed along this journey, I came to realise that there are times where I
had to scour the Internet for the same piece of stackoverflow which can get
a little bit frustrating.

So here I am, finally documenting my journey. Like what Gary Vee often
preached, “Document. Don’t create.” 💌

Streamlit Python Programming Web Applications

About Help Legal

https://hxkoey.medium.com/how-to-build-a-web-application-without-any-front-line-coding-6ff7278a27aa 7/7

You might also like