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, to create an app). You also find out about 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. Here are two of the most popular processes used today:
❯❯ Waterfall: A set of sequential steps followed to create a program.
❯❯ Agile: A set of iterative steps followed to create a program. (See Figure 3-1.)
FIGURE 3-1: The waterfall and agile processes are two different ways of creating software.
Let me describe a specific scenario to explain how these two processes work. Imagine that you want to build a restaurant app that does the following two things:
❯❯ It displays restaurant information, such as the hours of operation and the menu.
❯❯ It allows users to make or cancel reservations.
Using the waterfall method, you define everything the app needs to do: You design both the information-display and the reservation parts of the app, code the entire app, and then release the app to users. In contrast, using the agile method, you 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 then redesign and make changes to the information-display to address major concerns. When you’re satisfied with the information-display piece, you then define, design, and build the reservation part of the app. Again, you 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 occur before the finished product arrives. If you use the waterfall method to create the restaurant-app example, the technology needed to take reservations may change 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:
1. Researching what you want to build
2. Designing your app
3. Coding your app
4. Debugging your code
These steps are described in the sections that follow. You’ll use this process when you create your own app in Book 5, Chapter 1.
Researching what you want to build
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:
❯❯ What similar website/app already exists? What technology was used to build it?
❯❯ Which features should I include – and more importantly exclude – in my app?
❯❯ Which providers can help create these features? For example, companies like Google, Yahoo, Microsoft, or others may have software already built that you could incorporate into your app.
To illustrate, consider the restaurant app I discussed earlier. When conducting market research and answering the three preceding questions, using Google to search is usually the best choice. 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 want to research exactly what kinds of restaurant information you 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 to use an existing provider. For example, when providing restaurant information, do you want to show only 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 cover fewer restaurants in any specific area?
Designing your app
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 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):
❯❯ Wireframes: These are low-fidelity website drawings that show structurally the ways your content and your site’s interface interact.
❯❯ Mockups: These are high-fidelity website previews that include colors, images, and logos.
FIGURE 3-2: Wireframes (left) are simple site renderings, whereas mockups (right) show full site previews.
