عرض عملي: تطبيق واحد بأجزاء كثيرة: تطبيق جوال وموقع ويب وbackend

Written Explanation

The plan of the demo

You will do the demo in five short steps. For each step, there is something to do, something to look for, and something to say, meaning the explanation you should be able to give.

  Step 1  Use the app            -> create something (a basket, a note, a favorite)
  Step 2  Open the website       -> the same thing appears
  Step 3  Name the pieces        -> app, website frontend, backend
  Step 4  Switch off the network -> what still works, what does not
  Step 5  The planned mistake    -> "the website is the backend": correct it

If you can follow along on your own devices, do so. If not, read each step and answer the questions as if you were watching it. Everything here must be hedged for your own product: apps differ, and what exactly appears or fails depends on how each product is designed. Describe what you observe, not what you expect.

Preparation

Choose a product that has:

• A mobile app on your phone (or a tablet).
• A website that you can open in a browser on a computer or the same phone.
• An account that works in both.

Examples of the sort of thing that works: a notes or to-do tool, a music or video service where you can save a favorite, an online shop where you can add items to a basket without buying. Choose something where you can create a harmless item.

Write down the product name and the device you use. Open your notes tool or a piece of paper for observations. A table helps:

Step 1: Use the app and create something

On the mobile app, sign in and create something harmless: add an item to a basket, save a favorite, write a note called "Demo 1".

Look for: the item appears in the app straight away.

Say: the app on my phone is software installed on my phone. It displays what I created. But where is the item stored? So far, I only know that the app shows it. The next step provides evidence.

Step 2: Open the website with the same account

On a computer (or in your phone's browser), open the product's website and sign in with the same account.

Look for: whether "Demo 1" (or your basket item, or your favorite) appears here. If the product syncs, it will, although some products refresh only after a moment, or after you reload the page.

Say: I created the item on the phone and never typed it into the website. It still appears. So the item cannot be stored only on my phone, and it is not stored only in the browser. It is stored somewhere both can reach. That somewhere is the backend: a service on a server that keeps the data and gives it to whichever frontend asks.

If the item did not appear, write that down too. Possible reasons: the product does not sync that kind of item, you used a different account, it needs a refresh, or the sync is delayed. Do not force the conclusion. State what you saw.

Step 3: Name the pieces

Now say what each piece is. Fill in this table for your product:

Draw the diagram on paper:

   Phone app -----\
                    >----  Backend  ---- stores the account and the items
   Website   -----/
   (browser)

Notice that you never saw the backend. You saw its effects. That is what it means for a backend to be hidden: it is the part behind the front, in the kitchen.

Step 4: Switch off the network

This step is about seeing which parts depend on the backend. Do it on the phone only. Ways to cut the connection differ between phones, so look in your phone's settings or quick-settings panel for options such as airplane mode, or turn off both mobile data and Wi-Fi. The menus differ between systems and versions, so use whatever your phone provides. Remember to turn the network back on afterward.

With the network off, try these in the app:

1. Look at what you already see. Does the app still show "Demo 1"?
2. Create something new. Does it let you? What message appears?
3. Refresh or open another section. What happens?

Look for: some apps keep a copy of recent data on the phone and let you read it. Some let you write while offline and send it later when the connection returns. Others stop completely and show an error. Which of these does your product do?

Say: what still works lives on my device (recent data kept in storage or in RAM, and the app's own instructions). What stopped needs the backend. The pieces are separate, and the app needs the other piece to do all of its work. Different products make different choices about how much to keep on the device, and I only know my product's behavior from what I observed.

Now turn the network back on and watch the app. Does an item you tried to create while offline appear on the website? If it does, the app kept it and sent it to the backend once the connection returned. If it does not, the app did not keep it, or the attempt failed. Either result is informative: describe what you saw, without guessing at the cause.

Step 5: The planned mistake, and the correction

Here is a deliberate mistake, for you to catch. Imagine someone says:

"The website is the backend. I opened the website and I can see all my data, so the website is where my data lives."

Correct it with the evidence you have gathered.

• The website is a web frontend. It runs in the browser, on your computer, and shows a page.
• The phone app showed the same data, but the app is not the website. So the data does not live in either of them.
• The data lives in the backend, a separate service on a server, which both the app and the website ask.
• You can see the website. You never saw the backend. That alone shows they are different things.

If the speaker answers "but the website loads from a server", the answer is: yes, the page itself is downloaded from a server (a web server, as MDN describes it, software that waits for requests and answers them). But the part that stores and decides your data, the backend, is a different piece of software, even if the same company runs it, and sometimes even on the same machine. The word "backend" refers to what the software does (hold data and apply rules), not to where the page is downloaded from.

Optional: peek behind the website with developer tools

This extra step shows the website talking to its backend. It is optional and the exact menus depend on your browser and version, so look in your browser's menu for something called "Developer tools", "Web developer tools", or "Inspect". Many browsers also open them with a keyboard shortcut such as F12, but this varies, so check your browser's help.

1. Open the tools and find the tab usually called Network. It lists the requests that the page makes.
2. Reload the page with the tools open.
3. Look at the list. You will see many requests: for the page, pictures, and styling. Some of them may bring your data, such as the list of items. Click an entry to see where it was sent and what status came back.
4. Do not copy, share, or post what you see. Requests can contain personal information, such as account tokens. Treat everything you see as private.

Look for: the idea of request and response from lesson 3: your browser (the client) sends requests, and a server answers with responses. What you read in the list depends on the product, and I cannot predict which requests you will see. Describe what you see, and do not guess about what is not visible.