Table of Contents
Introduction 7
1 User Experience Basics 15
User research 15
User research without breaking the bank 17
Defining audiences and scenarios 18
Designing your first responsive web app 23
2 Application Features and Flow 31
Wireframing 31
Sketching out TastyTracker 38
Thinking responsively 43
3 Visual Design Basics 49
The meta-principles: consistency, hierarchy, and personality 49
Using the visual design tools: layout, type, color, imagery, and styled controls 52
Software for your visual design 59
Designing TastyTracker 60
4 Preparing to Code: Installing and Configuring 67
Step 1 Installing the package manager 67
Step 2 Setting up the project directory 70
Step 3 Setting up and running the project configuration files 71
Step 4 Installing dependencies 76
Where are we now? 79
5 Bootstrap 83
Bootstrap basics 84
Editing and compiling SCSS 93
Tracking down errors 96
A few final notes on coding 98
Getting TastyTracker off the ground 100
Adding a modal window 104
6 Getting Started with Angular 109
The way Angular thinks 110
The application module and what imports where 112
The root component 116
The first test (and some troubleshooting) 119
Second time's the charm 123
That's it? 124
7 Coding The App 129
A set of placeholder components 130
We must know our data to make our data services 146
The data services 169
The meal list 189
Totals and trends 197
8 Putting It All Together 213
Breaking up the HTML 214
The meal entry component 218
The totals and trends component 232
The meal list component 241
Restaurants and meals 243
Error feedback 245
Moving forward 251
9 Deployment 255
Downsizing the app 257
SystemJS and relative paths 259
Variations 263
Fixing the router 264
Production mode 267
Taking it further 267
Resources 271
Acknowledgments 274
About the Authors 275
Index 276
