Things To Do Before Coding Your App

Plan Your App Like a Boss!

Programming Advice
The Coders’ Cave
4 min readJan 15, 2024

--

Before you dive into typing lines of code that is going to get erased anyway, back up and plan your app. Planning is a process people often forget about when it comes to developing anything. You can start coding your app right away, but you risk wasting time. So, what are we waiting for? Let’s start planning together.

Photo by Jexo on Unsplash
Photo by Jexo on Unsplash

Use Case Diagram

My terrible drawing of a use case diagram
picture of a use case diagram

A use case diagram is a visual representation of a user’s interaction with a system.

When trying to piece together my app, I am surprised how much creating a use case diagram helped me. Not only did it give me an idea of the screens my user will interact with, but the diagram allowed me to put my ideas on paper.

Before creating a use case diagram you got to know how to read one.

Actors

The actors of a use case diagram are the system’s users. The actors are represented by stick figures seen in the picture above.

The users that interact with a system. An actor can be a person, an organization, or an outside system that interacts with your application or system. They must be external objects that produce or consume data. (Source)

In this case, the actor is our app user.

Use Cases

Each actor must be linked to a use case, although not all use cases are linked to actors. So, what is a use case? You see those ovals in the pictures above or below? Well, usually those ovals contain a system function. In short, the use case must do something. For example:

A picture of a use case diagram with use cases
Use Cases

Extend, Include

You use extend to show optional functionality or system behavior. On the other hand, include is used to add additional information not specified in the base use case.

Example of extend:

Example of extend being used
Example of extend

Entity Relationship (ER) Diagram

Empty ER diagram
Empty ER Diagram

An ER diagram is used to show how entities (people, objects, or concepts) relate to each other in a system. Creating an ER diagram for your project can be useful for showing where data goes in your project’s database.

Let’s go over what makes an ER diagram.

Entities

Entities are represented by rectangles in an ER diagram. They are objects and components of data. In this example, we are going to use the entities member and group. A member can be apart of more than one group in most cases, and a group has multiple members.

Adding entities to the ER diagram
Adding entities to the ER diagram

Attributes

The attributes are pretty much the property of the entity. In other words, the fields in our database’s table/collection. They are represented by an oval.

ER diagram with attributes
ER diagram with added attributes

Relationships

Now, we need to show the relationship between entities. A relationship is represented by a diamond in an ER Diagram. A member joins a group.

ER diagram with relationship addressed
ER Diagram with relationship

Wireframes

Photo by Kelly Sikkema on Unsplash
Photo by Kelly Sikkema on Unsplash

A Wireframe is a visual guide that represents a website or app’s skeleton. People often mistake this as a first step.

Wireframes are an essential part of any web/app project. It’s a key step in the design process. Sometimes the designer isn’t separate from the developer. In some cases, you have one person doing both.

You can use tools like Figma to make wireframing easier, although pencil and paper would do just fine.

That concludes this article about things to do before you code your app. Clap if you found this useful and respond if you have any questions.

Happy Coding!

--

--

Programming Advice
The Coders’ Cave

Who here has looked all over to solve simple programming problems or figure out how to do something in a programming language? Here's some programming advice.