3 Taking an app from concept to code

 

This chapter covers

  • Defining the scope of an application
  • Designing the user interface
  • Organizing the code for an app
  • Streamlit's workhorse input widgets

In my beginning days as a software engineer, I was often surprised by how much of my time was spent on activities other than writing code. I'd spend multiple days or even weeks simply understanding the problem I was trying to solve and even more time in design, all before typing a single line of code.

At the time, I felt anxious because I didn't feel productive. Scribbled meeting notes and design docs didn't do anything. With time, I realized that those days and weeks weren't actually wasted; they made the end-product better because of how deeply I'd thought about what I was trying to do.

Likewise, this book is not just about teaching you to write Streamlit code. It's about helping you learn to develop apps in the real world. Planning and design are inescapable parts of this process.

Though we don't have weeks to spend on these topics, this chapter will give you a taste of the end-to-end experience of developing an app.

We'll start with the concept for an app and convert it into a set of requirements. We'll then come up with a design that meets those requirements, working backwards from the user experience, and also think about code organization.

3.1 Concept to code: A six-step process

3.2 Stating our concept: A unit converter

3.3 Defining the requirements

3.3.1 Defining what the app won't do

3.4 Visualizing the user experience

3.4.1 Creating a mock

3.4.2 Getting the user experience right

3.5 Brainstorming the implementation

3.5.1 Performing the actual unit conversion

3.5.2 Tracking units and conversion factors

3.5.3 Mapping the flow of logic

3.5.4 The backend API

3.6 Writing code

3.6.1 Creating the configuration file

3.6.2 Implementing the API

3.6.3 Implementing the frontend

3.7 Iterating on our app

3.7.1 Rounding our conversion results

3.7.2 Getting rid of the button

3.8 Summary