Building a Meeting App, Day 4: How We Use Code to Make Ideas Real
This is day 4 of the Building a Meeting App series, in which we create a functional meeting app from scratch in six days. We’ll be documenting every step of the process and will launch the final product on day 6 (Wednesday, September 6), ready for you to get your hands on.
As we are getting closer to launch day, it’s time to get our hands dirty and write some code. This is generally when people get confused — and with good reason. Programming can be quite intimidating when you have no knowledge about what’s actually going on. That’s why, in this article, I’ll try to illustrate how programming works as concretely as possible, and how we’re using it to make our app come to life.
Before we get started, you should know that I don’t see myself as a programmer. I dropped out of computer science after two months, because I realized it was not the thing I wanted to focus on. I see programming as a tool to get an idea from an abstraction to a concrete product that people can use. I have no intentions of telling you how to code, as there are many people much more qualified than me to do so. Instead, I want to give you a high-level understanding of how we would go about developing this product. Hopefully, it will make it a little more concrete and less intimidating.
Where to start: the basic structure
Let’s define how the internet works first. There are mainly two actors: a server and a client. The client is the web browser you use to display content (files, images, documents that contain code: anything that makes up a website) that you receive from a server, which is nothing more than a computer that sends you the files you need when you ask for it.
Now, your app will need to display and do certain things. That logic can be separated into front-end and back-end. Front-end refers to the code that is executed in your browser. For example, when you click a button, the browser executes a bit of code that tells the browser what to do when that button is clicked. However, if you close your browser window, everything gets lost. That’s where the back-end comes in. This refers to code or a database running on your server. Say you enter a certain transaction in Moneylist — that data should be saved so that next time you load the app, you pick up right where you left off last time. And so whenever you add a transaction, the client (your browser) tells the server (a computer somewhere else) to save that data. The next time you open the app, the client gets the data from the server, and presents it to you like nothing happened.
Three languages: each with a different purpose
When we apply this to our meeting app, we’re in luck: we don’t need a database, because no data gets stored. Our app allows you to provide information, that gets sent out in an organized way via e-mail. There’s no need to store anything for your next visit, because you’ll want to start from scratch again as you organize a new meeting. All we need is a server to send the app to the client — no database or back-end code necessary.
We will be programming in three languages: HTML, CSS and Javascript (even though only Javascript is considered a programming language). We will use React as a library for Javascript, meaning that it will add some things to Javascript that will make our work a little easier (which are beyond the scope of this article). HTML gets used to define the elements, or blocks, of the app. You might make a menu block, a title block, a note block — it lets you define the lay-out of the app. However, you’ll still need a way to tell the browser to make a title purple. That’s what you use CSS for. With CSS, you add styles to the blocks you defined in HTML. It lets you make your menu bar have a blue font and a little shadow beneath it. HTML is about the elements on the page, CSS is about how those elements look.
Now that we’ve defined what elements our meeting app should have, and made them look nice, there’s one more piece to the puzzle. Our app doesn’t actually do anything. That’s where Javascript and React come in: they add logic to our app. It allows you to change something in the app when you click a button or press enter. In our meeting app, we start by asking the user to fill in the email addresses of the participants. With Javascript, we show the next step as soon as the user presses enter, and remember those email addresses for later (when tagging people or sending the summary). Javascript enables us to guide the user through the different steps, to validate input (e.g. when a user fills in “abc” as an email address, we can determine that that’s an invalid email and display an error message) and to send the final email summary of the meeting.
Where we go from here
Now that we covered some of the basics of programming a web app like the one we are building, I’ll show you some bits of code we are actually writing for our meeting app. I hope it will give you a better idea of how these kinds of apps are built, and maybe even inspire you to create something of your own. See you tomorrow for day 5, as we’re really getting close to launch.
Would you like to receive a short update in your inbox every Friday, with this week’s articles from Jeroenrs.com and other great weekend reads on product design? Great! Subscribe here, and I’ll send you the very next one.
