Chapter 3
In This Chapter
Learning the process programmers follow when coding
Seeing the different roles people play to create a program
Picking tools to starting coding offline or online
The way to get started is to quit talking and begin doing.
—Walt Disney
Programming is a skill that can be learned by anyone. You might be a student in college wondering how to start learning, or a professional hoping to find a new job or improve your performance at your current job. In just about every case, the best way to learn how to code is to
In this chapter, you discover the process every programmer follows when programming, and the different roles programmers play to create a program (or, more commonly these days, an “app”). You also learn the tools to use when coding either offline or online.
Writing code is much like painting, furniture making, or cooking — it isn’t always obvious how the end product was created. However, all programs, even mysterious ones, are created using a process. Two of the most popular processes used today are
Let me describe a specific scenario to explain how these two process work. Imagine you want to build a restaurant app that does the following two things:
Using the waterfall method, you’d define everything the app needs to do: You’d design both the information-display and the reservation parts of the app, code the entire app, and then release the app to users. By contrast, using the agile method, you would define, design, and code only the information-display portion of the app, release it to users, and collect feedback. Based on the feedback collected, you would then redesign and make changes to the information-display to address major concerns. When you were satisfied with the information-display piece, you’d then define, design, and build the reservation part of the app. Again, you would collect feedback and refine the reservation feature to address major concerns.
The agile methodology stresses shorter development times, and has increased in popularity as the pace of technological change has increased. The waterfall approach, on the other hand, demands that the developer code and release the entire app at once, but since completing a large project takes an enormous amount of time, changes in technology may have occurred before the finished product arrives. If you used the waterfall method to create our restaurant-app example, the technology to take user reservations may have changed by the time you get around to coding that portion of the app. Still, the waterfall approach remains popular in certain contexts, such as with financial and government software, where requirements and approval are obtained at the beginning of a project, and whose documentation of a project must be complete.
Regardless of whether you pick the agile or waterfall methodology, coding an app involves four steps:
These steps are described in the sections that follow. You’ll use this process when you create your own app in Chapter 10.
You have an idea for a web or mobile application, and usually it starts with “Wouldn’t it be great if … ” Before writing any code, it helps to do some investigating. Consider the possibilities in your project as you answer the following questions:
To illustrate, consider the restaurant app I discussed earlier. When conducting market research and answering the three questions above, searching using Google is usually the best resource. Searching for restaurant reservation app shows existing restaurant apps that include OpenTable, SeatMe, and Livebookings. OpenTable, for example, allows users to reserve a table from restaurants displayed on a map using Google Maps.
In the restaurant app example, you’d want to research exactly what kinds of restaurant information you’d need to provide, and how extensive the reservation system portion of the app should be. In addition, for each of these questions you must decide whether to build the feature from scratch or use an existing provider. For example, when providing restaurant information do you want to just show name, cuisine, address, telephone number, and hours of operation, or do you also want to show restaurant menus? When showing restaurant data, do you prefer extensive coverage of a single geographical area, or do you want national coverage even if that means you’d cover fewer restaurants in any specific area?
Your app’s visual design incorporates all of your research and describes exactly how your users will interact with every page and feature. Because your users will be accessing your site from desktop, laptop, and mobile devices, you’d want to make sure you create a responsive (multi-device) design and carefully consider how your site will look on all these devices. At this stage of the process, a general web designer, illustrator, or user interface specialist will help create visual designs for the app.
There are two types of visual designs (see Figure 3-2):
In addition to visual design, complex apps will also have technical designs and decisions to finalize. For example, if your app stores and retrieves user data you will need a database to perform these tasks. Initial decisions here will include the type of database to add, the specific database provider to use, and the best way to integrate the database into the application. Additionally, developers must design the database by choosing the fields to store. The process is similar to the process of creating a spreadsheet to model a company’s income — you first decide the number of columns to use, and whether you’ll include fields as a percentage of revenue or a numerical value, and so on. Similarly, other features like user logins or credit card payments all require you to make choices on how to implement these features.
With research and design done, you are now ready to code your application. In everyday web development, you would begin by choosing which pages and features to start coding. As you work through the projects in this book, however, I will guide you on what to code first.
Knowing how much to code and when to stop can be tough. Developers call the first iteration of an app the minimum viable product — meaning you’ve coded just enough to test your app with real users and receive feedback. If no one likes your app or thinks it’s useful, it’s best to find out as soon as possible.
An app is the sum of its features, and for any individual feature it’s a good idea to write the minimum code necessary and then add to it. For example, your restaurant app may have a toolbar at the top of the page with drop-down menus. Instead of trying to create the whole menu at once, it’s better to just create the menu, and then later create the drop-down menu effect.
Projects can involve front-end developers, who’ll code the appearance of the app, and back-end developers, who’ll code the logic and create databases. A “full stack developer” is one who can do both front-end and back-end development. On large projects it’s more common to see specialized front-end and back-end developers, along with project managers who ensure everyone is communicating with each other and adhering to the schedule so the project finishes on time.
Debugging is going to be a natural part of any application. The computer always follows your instructions exactly and yet no program ever works as you expect it to. Debugging can be frustrating. Three of the more common mistakes to watch out for are
Now you’re ready to actually start coding. You can develop websites either offline, by working with an editor, or online, with a web service such as Codecademy.com. Especially if you have never done any coding before, I would strongly recommend you code with access to an Internet connection using the Codecademy.com platform because you do not have to download and install any software to start coding, you do not have to find a web host to serve your web pages, and you do not need to upload your web page to a web host. As you code, the Codecademy.com platform will do these tasks for you automatically.
To code offline, you’ll need the following:
Codecademy.com is the easiest way to start learning how to code online, and lessons from the site form the basis of this book. The site doesn’t require you to install a code editor or sign up for a web host before you start coding, and it’s free to individual users like you.
The site can be accessed using any up-to-date modern browser, but Google Chrome or Mozilla Firefox is recommended.
After signing up or signing into the site, you will either see an interactive card or the coding interface, depending on the content you learn. (See Figure 3-3.)
The interactive cards allow you to click toggle buttons to demonstrate effects of pre-written code, whereas the coding interface has an coding editor and a live preview window that shows you the effects of the code entered into the coding editor.
The coding interface has four parts:
The interactive cards have three parts:
If you run into a problem or have a bug you cannot fix, try the following steps
18.219.22.107