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 time I 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 on 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 those days and weeks weren't 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 app concept and convert it into a set of requirements. We'll then develop a design that meets those requirements, working backward from the user experience, and also consider code organization. Finally, we'll walk through our code and logic, introducing some of Streamlit's most common widgets as we go. There's a lot to do, so let's get started!

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.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.6 Writing code

3.6.1 Implementing the frontend

3.6.2 Implementing the backend

3.6.3 Wiring up the frontend and backend

3.7 Iterating on our app

3.7.1 Rounding our conversion results

3.7.2 Getting rid of the button

3.8 Summary