Coding All-in-One For Dummies. Nikhil Abraham

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.

      Many responsive app designs and templates can be found on the Internet and used freely. For specific examples, see Book 4, Chapter 1, or search Google using the query responsive website design examples.

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.

      Balsamiq is a popular tool used to create wireframes, and Photoshop is a popular tool to create mockups. However, you can avoid paying for additional software by using PowerPoint (PC), Keynote (Mac), or the free and open-source OpenOffice to create your app designs.

      Professional designers create mockups with Adobe Photoshop and use layers, which isolate individual site elements. A properly created layered Photoshop file helps developers more easily write the code for those website elements.

      In addition to visual design, complex apps also have technical designs and decisions to finalize. For example, if your app stores and retrieves user data, you need a database to perform these tasks. Initial decisions here 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, 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 for how to implement these features.

      Coding your app

      With research and design done, you’re now ready to code your application. In everyday web development, you 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 main menu and then later create the drop-down menu.

      Projects can involve front-end developers, who write code to design the appearance of the app, and back-end developers, who 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 that the project finishes on time.

      Debugging your code

      Debugging is going to be a natural part of creating an application. The computer always follows your instructions exactly, 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

      ❯❯ Syntax errors: These are errors caused by misspelling words/commands, by omitting characters, or by including extra characters. Some languages, such as HTML and CSS, are forgiving of these errors, and your code will still work even with some syntax errors; whereas other languages, such as JavaScript, are more particular, and your code won’t run when even one such error is present.

      ❯❯ Logic errors: These are harder to fix. With logic errors, your syntax is correct, but the program behaves differently than you expected, such as when the prices of the items in the shopping cart of an e-commerce site don’t add up to the correct total.

      ❯❯ Display errors: These are common mainly in web applications. With display errors, your program might run and work properly, but it won’t appear properly. Web apps today run on many devices, browsers, and screen sizes, so extensive testing is the only way to catch these types of errors.

      The word debugging was popularized in the 1940s by Grace Hopper, who fixed a computer error by literally removing a moth from a computer.

Picking Tools for the Job

      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 haven’t done any coding before, I strongly recommend that you code with access to an Internet connection using the Codecademy.com platform, because you don’t have to download and install any software to start coding, you don’t have to find a web host to serve your web pages, and you don’t need to upload your web page to a web host. As you code, the Codecademy.com platform does these tasks for you automatically.

      Working offline

      To code offline, you need the following:

      ❯❯ Editor: This refers to the text editor you use to write all the code this book covers, including HTML, CSS, JavaScript, Ruby, Python, and PHP.

      The editor you use will depend on the type of computer you have:

      • PC: Use the preinstalled Notepad or install Notepad++, a free editor available for download