Build a Banking App Part 3: Methods of Fetching and Using Data

Think about the Enterprise’s computer in Star Trek - when Captain Picard asks for ship status, the information appears instantly without the whole interface shutting down and rebuilding itself. That seamless flow of information is exactly what we’re building here with dynamic data fetching. Right now, your banking app is like a printed newspaper - informative but static. We’re going to transform it into something more like mission control at NASA, where data flows continuously and updates in real-time without interrupting the user’s workflow. You’ll learn how to communicate with servers asynchronously, handle data that arrives at different times, and transform raw information into something meaningful for your users. This is the difference between a demo and production-ready software.

⚡ What You Can Do in the Next 5 Minutes

Quick Start Pathway for Busy Developers - Minute 1-2: Start your API server (cd api && npm start) and test the connection - Minute 3: Create a basic getAccount() function using fetch - Minute 4: Wire up the login form with action=“javascript:login()” - Minute 5: Test login and watch account data appear in the console Quick Test Commands: Why This Matters: In 5 minutes, you’ll see the magic of asynchronous data fetching that powers every modern web application. This is the foundation that makes apps feel responsive and alive.

🗺️ Your Learning Journey Through Data-Driven Web Applications

Your Journey Destination: By the end of this lesson, you’ll understand how modern web applications fetch, process, and display data dynamically, creating the seamless user experiences we expect from professional applications.

Pre-Lecture Quiz

Pre-lecture quiz

Prerequisites

Before diving into data fetching, ensure you have these components ready: - Previous Lesson: Complete the Login and Registration Form - we’ll build on this foundation - Local Server: Install Node.js and run the server API to provide account data - API Connection: Test your server connection with this command: This quick test ensures all components are communicating properly: - Verifies that Node.js is running correctly on your system - Confirms your API server is active and responding - Validates that your app can reach the server (like checking radio contact before a mission)

🧠 Data Management Ecosystem Overview

Core Principle: Modern web applications are data orchestration systems - they coordinate between user interfaces, server APIs, and browser security models to create seamless, responsive experiences.

Understanding Data Fetching in Modern Web Apps

The way web applications handle data has evolved dramatically over the past two decades. Understanding this evolution will help you appreciate why modern techniques like AJAX and the Fetch API are so powerful and why they’ve become essential tools for web developers. Let’s explore how traditional websites worked compared to the dynamic, responsive applications we build today.

Traditional Multi-Page Applications (MPA)

In the early days of the web, every click was like changing channels on an old television - the screen would go blank, then slowly tune into the new content. This was the reality of early web applications, where every interaction meant completely rebuilding the entire page from scratch. Why this approach felt clunky: - Every click meant rebuilding the entire page from scratch - Users got interrupted mid-thought by those annoying page flashes - Your internet connection worked overtime downloading the same header and footer repeatedly - Apps felt more like clicking through a filing cabinet than using software

Modern Single-Page Applications (SPA)

AJAX (Asynchronous JavaScript and XML) changed this paradigm entirely. Like the modular design of the International Space Station, where astronauts can replace individual components without rebuilding the entire structure, AJAX allows us to update specific parts of a webpage without reloading everything. Despite the name mentioning XML, we mostly use JSON today, but the core principle remains: update only what needs to change. Why SPAs feel so much better: - Only the parts that actually changed get updated (smart, right?) - No more jarring interruptions - your users stay in their flow - Less data traveling over the wire means faster loading - Everything feels snappy and responsive, like the apps on your phone

The Evolution to Modern Fetch API

Modern browsers provide the Fetch API, which replaces the older XMLHttpRequest. Like the difference between operating a telegraph and using email, Fetch API uses promises for cleaner asynchronous code and handles JSON naturally. The bottom line: - Works great in Chrome, Firefox, Safari, and Edge (basically everywhere your users are) - Only Internet Explorer needs extra help (and honestly, it’s time to let IE go) - Sets you up perfectly for the elegant async/await patterns we’ll use later

Implementing User Login and Data Retrieval

Now let’s implement the login system that transforms your banking app from a static display into a functional application. Like the authentication protocols used in secure military facilities, we’ll verify user credentials and then provide access to their specific data. We’ll build this incrementally, starting with basic authentication and then adding the data-fetching capabilities.

Step 1: Create the Login Function Foundation

Open your app.js file and add a new login function. This will handle the user authentication process: Let’s break this down: - That async keyword? It’s telling JavaScript “hey, this function might need to wait for things” - We’re grabbing our form from the page (nothing fancy, just finding it by its ID) - Then we’re pulling out whatever the user typed as their username - Here’s a neat trick: you can access any form input by its name attribute - no need for extra getElementById calls!

Step 2: Create the Account Data Fetching Function

Next, we’ll create a dedicated function to retrieve account data from the server. This follows the same pattern as your registration function but focuses on data retrieval: Here’s what this code accomplishes: - Uses the modern fetch API to request data asynchronously - Constructs a GET request URL with the username parameter - Applies encodeURIComponent() to safely handle special characters in URLs - Converts the response to JSON format for easy data manipulation - Handles errors gracefully by returning an error object instead of crashing Why this matters: - Prevents special characters from breaking URLs - Protects against URL manipulation attacks - Ensures your server receives the intended data - Follows secure coding practices

Understanding HTTP GET Requests

Here’s something that might surprise you: when you use fetch without any extra options, it automatically creates a GET request. This is perfect for what we’re doing - asking the server “hey, can I see this user’s account data?” Think of GET requests like politely asking to borrow a book from the library - you’re requesting to see something that already exists. POST requests (which we used for registration) are more like submitting a new book to be added to the collection.

Step 3: Bringing It All Together

Now for the satisfying part - let’s connect your account fetching function to the login process. This is where everything clicks into place: This function follows a clear sequence: - Extract the username from the form input - Request the user’s account data from the server - Handle any errors that occur during the process - Store the account data and navigate to the dashboard upon success

Step 4: Creating a Home for Your Data

Your app needs somewhere to remember the account information once it’s loaded. Think of this like your app’s short-term memory - a place to keep the current user’s data handy. Add this line at the top of your app.js file: Why we need this: - Keeps the account data accessible from anywhere in your app - Starting with null means “no one’s logged in yet” - Gets updated when someone successfully logs in or registers - Acts like a single source of truth - no confusion about who’s logged in

Step 5: Wire Up Your Form

Now let’s connect your shiny new login function to your HTML form. Update your form tag like this: What this little change does: - Stops the form from doing its default “reload the whole page” behavior - Calls your custom JavaScript function instead - Keeps everything smooth and single-page-app-like - Gives you complete control over what happens when users hit “Login”

Step 6: Enhance Your Registration Function

For consistency, update your register function to also store account data and navigate to the dashboard: This enhancement provides: - Seamless transition from registration to dashboard - Consistent user experience between login and registration flows - Immediate access to account data after successful registration

Testing Your Implementation

Time to take it for a spin: 1. Create a new account to make sure everything’s working 2. Try logging in with those same credentials 3. Peek at your browser’s console (F12) if anything seems off 4. Make sure you land on the dashboard after a successful login If something’s not working, don’t panic! Most issues are simple fixes like typos or forgetting to start the API server.

A Quick Word About Cross-Origin Magic

You might be wondering: “How is my web app talking to this API server when they’re running on different ports?” Great question! This touches on something every web developer bumps into eventually. In our setup: - Your web app runs on localhost:3000 (development server) - Your API server runs on localhost:5000 (backend server) - The API server includes CORS headers that explicitly authorize communication from your web app This configuration mirrors real-world development where frontend and backend applications typically run on separate servers.

Bringing Your Data to Life in HTML

Now we’ll make the fetched data visible to users through DOM manipulation. Like the process of developing photographs in a darkroom, we’re taking invisible data and rendering it into something users can see and interact with. DOM manipulation is the technique that transforms static web pages into dynamic applications that update their content based on user interactions and server responses.

Choosing the Right Tool for the Job

When it comes to updating your HTML with JavaScript, you’ve got several options. Think of these like different tools in a toolbox - each one perfect for specific jobs:

The Safe Way to Show Text: textContent

The textContent property is your best friend when displaying user data. It’s like having a bouncer for your webpage - nothing harmful gets through: Benefits of textContent: - Treats everything as plain text (prevents script execution) - Automatically clears existing content - Efficient for simple text updates - Provides built-in security against malicious content

Creating Dynamic HTML Elements

For more complex content, combine document.createElement() with the append() method: Understanding this approach: - Creates new DOM elements programmatically - Maintains full control over element attributes and content - Allows for complex, nested element structures - Preserves security by separating structure from content Risks of innerHTML: - Executes any