Lecture 01 · Introduction
المحاضرة 01 · مقدمة
Designing a system: mental model, components, the lamp
تصميم نظام: النموذج الذهني والمكوّنات والمصباح
P2 SHOULDP2 مهمHow the course wants you to think before you build anything: problem, mental model, solution. Then the four design questions, asked in a fixed order, applied to one lamp you switch on from Chrome.
كيف يريدك المقرر أن تفكر قبل أن تبني أي شيء: المشكلة، ثم mental model، ثم الحل. بعدها أسئلة التصميم الأربعة بترتيب ثابت، مطبّقة على مصباح واحد تشغّله من Chrome.
Slides 1 to 7 are course logistics and are not on this page. From slide 8 onward the exam material is a short list of definitions and one ordering: the four design questions. Expect a matching item (question to the thing it asks for), a true/false on what a system is, and a short answer on why the client offloads to the server.
الشرائح من 1 إلى 7 تنظيمية ولا تظهر في هذه الصفحة. من الشريحة 8 فصاعداً مادة الامتحان قائمة قصيرة من التعريفات وترتيب واحد: أسئلة التصميم الأربعة. توقّع سؤال توصيل (السؤال وما يسأل عنه)، وسؤال صح أو خطأ عن تعريف system، وسؤالاً قصيراً عن سبب قيام client بنقل العمل إلى server.
Design starts with the right mental model
التصميم يبدأ بالنموذج الذهني (mental model) الصحيح
Slide 8 opens with one sentence: design starts with the right mental model. The claim is about order. You do not jump from a problem to a solution. You first build a simplified picture of how the system works, and then derive the solution from that picture.
تفتتح الشريحة 8 بجملة واحدة: التصميم يبدأ بالـ mental model الصحيح. الادعاء هنا عن الترتيب. لا تقفز من المشكلة إلى الحل مباشرة، بل تبني أولاً صورة مبسّطة لطريقة عمل النظام، ثم تستخرج الحل من تلك الصورة.
المشكلة، ثم mental model، ثم الحل. الحل يُشتق من النموذج الذهني، لا من المشكلة مباشرة.
The slide's boxed definition: a mental model is a simplified internal representation of how a system or process works. Two more lines on the same slide finish the chain. A mental model is constructed using system thinking, and a system is composed of layers and components, with OSI given as the example of a layered system.
التعريف المؤطّر في الشريحة: الـ mental model تمثيل داخلي مبسّط لطريقة عمل نظام أو عملية. وسطران آخران في الشريحة نفسها يكملان السلسلة: النموذج الذهني يُبنى باستخدام system thinking، والنظام يتكوّن من layers وcomponents، ومثالها على النظام الطبقي هو OSI.
- System thinking is the tool: describe the problem as parts, the connections between them, and the levels they sit on.
System thinking هو الأداة: تصف المشكلة على شكل أجزاء، والصلات بينها، والمستويات التي تقع عليها.
- A component is one box with one job. The slides literally draw every component as a box.
الـ component صندوق واحد له وظيفة واحدة. والشرائح ترسم كل component على شكل صندوق حرفياً.
- A layer groups things that sit at the same level of abstraction.
الـ layer يجمع الأشياء التي تقع في مستوى التجريد نفسه.
Slide 8 uses OSI (seven layers) as its example of a layered system, while the rest of the lecture uses the five-layer TCP/IP stack. That is not a contradiction, just two different layered models. Do not let the two layer counts surprise you in an MCQ.
تستخدم الشريحة 8 نموذج OSI (سبع طبقات) مثالاً على النظام الطبقي، بينما تعمل بقية المحاضرة على TCP/IP stack ذي الطبقات الخمس. هذا ليس تناقضاً، بل نموذجان طبقيان مختلفان. لا تدع اختلاف عدد الطبقات يفاجئك في سؤال اختيار من متعدد.
The design problem: a lamp over the Web
مشكلة التصميم: مصباح عبر الويب
Slide 9 states the running problem in one line: controlling a lamp remotely over the Web. The picture is Chrome on the left, a light bulb on the right, and a single double-headed arrow between them.
تطرح الشريحة 9 المشكلة المستمرة في سطر واحد: التحكم في مصباح عن بُعد عبر الويب. الصورة فيها Chrome على اليسار، ومصباح على اليمين، وسهم واحد باتجاهين بينهما.
That arrow is where everything interesting hides. A browser tab cannot switch mains power. It can only send and receive messages over a network. So something has to sit between the tab and the bulb, receive those messages, and turn them into the lamp going on or off. The rest of this page, and the next one, answer one question: what is inside that arrow?
ذلك السهم هو المكان الذي يختبئ فيه كل ما هو مهم. تبويب المتصفح لا يستطيع تشغيل الكهرباء، كل ما يستطيعه هو إرسال الرسائل واستقبالها عبر الشبكة. إذن لا بد من شيء يقع بين التبويب والمصباح، يستقبل تلك الرسائل ويحوّلها إلى تشغيل المصباح أو إطفائه. بقية هذه الصفحة والصفحة التالية تجيبان عن سؤال واحد: ما الذي بداخل ذلك السهم؟
Ad-hoc design versus structured design
التصميم العشوائي (ad hoc) مقابل التصميم المنظّم (structured)
Slide 10. Ad hoc comes from Latin and means "for this" or "for this situation". In current usage it describes something formed or used for a special and immediate purpose, without previous planning. The slide's cartoon is a man thinking "use a sensor": a part chosen before anyone has asked what the system is.
الشريحة 10. كلمة ad hoc لاتينية الأصل وتعني "لهذا" أو "لهذا الموقف". وفي الاستخدام الحالي تصف شيئاً صُنع أو استُخدم لغرض خاص وفوري، دون تخطيط مسبق. والرسم في الشريحة لرجل يفكر "استخدم sensor": قطعة اختيرت قبل أن يسأل أحد ما هو النظام أصلاً.
Slide 11 is the alternative. Design is a structured process, not random, and the outcome of a structured design process is a system that solves a problem. Its diagram is Problem, into a box labelled Structured Design Process, out to System.
الشريحة 11 هي البديل. التصميم عملية منظّمة لا عشوائية، وناتج عملية التصميم المنظّم هو نظام يحل مشكلة. ومخططها: المشكلة تدخل صندوقاً عنوانه Structured Design Process فيخرج منه System.
Ad hoc, slide 10
العشوائي (ad hoc)، الشريحة 10
Made for one immediate situation, with no previous planning.
يُصنع لموقف فوري واحد، دون تخطيط مسبق.
Boxed verdict: might work for small, isolated tasks but fails to scale or integrate with larger systems.
الحكم المؤطّر: قد ينجح في المهام الصغيرة المعزولة، لكنه يفشل في التوسّع أو في الاندماج مع أنظمة أكبر.
Structured, slide 11
المنظّم (structured)، الشريحة 11
A process with a fixed order: questions first, components second, code last. Output is a system.
عملية بترتيب ثابت: الأسئلة أولاً، ثم components، ثم الكود أخيراً. والناتج system.
Boxed verdict: ensures systems can handle complexity, scalability, and integration requirements.
الحكم المؤطّر: يضمن أن الأنظمة قادرة على التعامل مع متطلبات التعقيد وقابلية التوسّع والتكامل.
| Aspectالجانب | Ad hocالعشوائي (ad hoc) | Structuredالمنظّم (structured) |
|---|---|---|
| Planningالتخطيط | Noneلا يوجد | Up frontمسبقاً |
| Fitsيناسب | One small, isolated, immediate taskمهمة واحدة صغيرة ومعزولة وفورية | Systems that must growالأنظمة التي يجب أن تنمو |
| Adding a phone app or a 50th lampإضافة تطبيق هاتف أو المصباح رقم 50 | Another one-off script, reworkسكربت آخر لمرة واحدة، وإعادة عمل | Plug into a named component and interfaceالتوصيل بـ component وواجهة لهما اسم محدد |
| Integration with other systemsالتكامل مع أنظمة أخرى | Failsيفشل | Defined by relationshipsتحدده العلاقات (relationships) |
| Three words to rememberثلاث كلمات للحفظ | Structured design handles complexity, scalability, integrationالتصميم المنظّم يتعامل مع التعقيد وقابلية التوسّع والتكامل (complexity, scalability, integration) | |
The four design questions, in order
أسئلة التصميم الأربعة، بالترتيب
Slide 12 is the structured process itself. It is four questions, and each one has a highlighted keyword. Those four keywords are the whole vocabulary of system thinking in this course.
الشريحة 12 هي العملية المنظّمة نفسها: أربعة أسئلة، ولكل سؤال كلمة مفتاحية مظلّلة. هذه الكلمات الأربع هي كل مفردات system thinking في هذا المقرر.
- What is the system in this design problem?
ما هو الـ system في مشكلة التصميم هذه؟
- What are the components in this system?
ما هي الـ components في هذا النظام؟
- What is the relationship between the components?
ما هي الـ relationship بين المكوّنات؟
- What are the layers in this system?
ما هي الـ layers في هذا النظام؟
The order is forced by dependency, which is how you remember it. You cannot name relationships before you have components to relate, and you cannot group things into layers before you know what the things are and how they connect. This page answers questions 1 and 2 for the lamp. The next page answers 3 and 4.
الترتيب تفرضه الاعتمادية، وبهذا تتذكره. لا يمكنك تسمية العلاقات قبل أن تكون لديك مكوّنات تربط بينها، ولا يمكنك تجميع الأشياء في طبقات قبل أن تعرف ما هي الأشياء وكيف تتصل. هذه الصفحة تجيب عن السؤالين 1 و2 للمصباح، والصفحة التالية تجيب عن 3 و4.
النظام، ثم المكوّنات، ثم العلاقات، ثم الطبقات. للحفظ: S, C, R, L. تحتاج الصناديق قبل الأسهم، والأسهم قبل المستويات.
Question 1: what is a system?
السؤال 1: ما هو النظام (system)؟
Slide 13 redraws Chrome and the bulb inside a rounded box. Chrome is labelled Component 1, the bulb Component 2, the arrow Interactions, and the box itself Environment. Then the definition, with three highlighted words:
تعيد الشريحة 13 رسم Chrome والمصباح داخل صندوق دائري الحواف. Chrome مسمّى Component 1، والمصباح Component 2، والسهم Interactions، والصندوق نفسه Environment. ثم يأتي التعريف بثلاث كلمات مظلّلة:
الـ system بيئة (environment) تحدث فيها تفاعلات (interactions) بين مكوّنات (components) النظام. احذف أياً من الثلاثة ولن يبقى نظاماً.
The ingredient people forget is the interactions. Take the arrows away and you have a pile of parts: a browser that does nothing to a lamp that does nothing. The same two parts with different interactions would be a different system.
المكوّن الذي ينساه الناس هو التفاعلات. احذف الأسهم وسيبقى لديك كومة أجزاء: متصفح لا يفعل شيئاً لمصباح لا يفعل شيئاً. والجزآن نفسهما مع تفاعلات مختلفة يكوّنان نظاماً مختلفاً.
Question 2: what are the components?
السؤال 2: ما هي المكوّنات (components)؟
Slide 14 decomposes the lamp in two refinement steps. Each step adds exactly one idea.
تفكّك الشريحة 14 المصباح في خطوتي تحسين، وكل خطوة تضيف فكرة واحدة بالضبط.
- Separate software from the thing. Chrome and bulb become Application and Device. The application is everything that is software; the device is the physical lamp.
افصل البرمجيات عن الشيء المادي. يصبح Chrome والمصباح Application وDevice. الـ application هو كل ما هو برمجي، والـ device هو المصباح المادي.
- Split the application in two. The client is the user-facing interface. The server processes client requests and communicates with the device. The slide's bullet: "the application is divided into two components, client and server".
قسّم الـ application إلى قسمين. الـ client هو الواجهة التي يتعامل معها المستخدم. والـ server يعالج طلبات client ويتواصل مع device. ونص الشريحة: "الـ application مقسوم إلى مكوّنين، client وserver".
The server is the answer to slide 9's arrow: it is the thing that sits between the tab and the bulb. Note that "client" and "server" are roles, not machine sizes. The server is whatever program answers requests, and on the next page it runs on a small microcontroller board right next to the lamp.
الـ server هو جواب سهم الشريحة 9: هو الشيء الذي يقع بين التبويب والمصباح. ولاحظ أن client وserver أدوار لا أحجام أجهزة. الـ server هو أي برنامج يجيب عن الطلبات، وفي الصفحة التالية يعمل على لوحة microcontroller صغيرة بجانب المصباح مباشرة.
Why split the application: offloading
لماذا نقسّم التطبيق: نقل العمل (offloading)
Slide 15, the client-server application model, highlights one word: offloads. Its three bullets, in order:
الشريحة 15، نموذج تطبيق client-server، تظلّل كلمة واحدة: offloads. ونقاطها الثلاث بالترتيب:
- The client offloads its functionalities to the server because the server provides processing and storage.
الـ client ينقل وظائفه إلى server لأن الـ server يوفّر المعالجة والتخزين.
- The server hosts functionalities, called services.
الـ server يستضيف الوظائف، وتسمّى services.
- The client interacts with these services.
والـ client يتفاعل مع هذه services.
Why not let Chrome do everything? Because a browser tab is a bad place to keep things. When the tab is closed it is not running, so it cannot log energy readings around the clock. A phone and a laptop would each hold their own copy of the lamp state. The server is always on and shared, so it can do both: keep the history and hold one authoritative state for every client.
لماذا لا نترك Chrome يفعل كل شيء؟ لأن تبويب المتصفح مكان سيئ لحفظ الأشياء. عندما يُغلق التبويب يتوقف عن العمل، فلا يستطيع تسجيل قراءات الطاقة على مدار الساعة. وسيحتفظ الهاتف والحاسوب كلٌّ بنسخته الخاصة من حالة المصباح. أما الـ server فهو يعمل دائماً ومشترك، فيستطيع الأمرين: حفظ السجل، والاحتفاظ بحالة واحدة معتمدة لكل clients.
Stays in the client: the page with the on/off button and the energy display. That is the user-facing interface and nothing more.
يبقى في الـ client: الصفحة التي فيها زر التشغيل والإطفاء وعرض الطاقة. هذه هي الواجهة التي يراها المستخدم ولا شيء غيرها.
Offloaded to the server: "set the lamp state" and "read energy use" become services the server hosts. Processing (driving the lamp, summing energy) and storage (the current state, the energy history) live there.
يُنقل إلى الـ server: "ضبط حالة المصباح" و"قراءة استهلاك الطاقة" تصبحان services يستضيفها الـ server. فالمعالجة (تشغيل المصباح وجمع الطاقة) والتخزين (الحالة الحالية وسجل الطاقة) موجودان هناك.
Where this goes next: deciding what to offload and to where (device, edge, fog, cloud) is exactly what the task-mapping pages later in the lecture vary.
إلى أين يقود هذا: تحديد ماذا ننقل وإلى أين (device أو edge أو fog أو cloud) هو بالضبط ما تغيّره صفحات task mapping لاحقاً في المحاضرة.
A system is not a pile of parts. "A system is a collection of components" is false or at best incomplete on this course's definition. The definition needs an environment and interactions. If a true/false statement leaves out interactions, mark it false.
الـ system ليس كومة أجزاء. عبارة "النظام مجموعة من المكوّنات" خاطئة أو ناقصة في أحسن الأحوال حسب تعريف هذا المقرر. التعريف يحتاج environment وinteractions. إن أغفلت عبارة صح أو خطأ التفاعلات فاعتبرها خاطئة.
The server role is not about machine size. The reason to offload is that the server provides processing and storage and is always on and shared. "Because the server is a bigger computer" is the wrong reason; the server here could be a microcontroller board.
دور الـ server لا علاقة له بحجم الجهاز. سبب النقل أن الـ server يوفّر المعالجة والتخزين ويعمل دائماً ومشترك. أما "لأن الـ server حاسوب أكبر" فسبب خاطئ، فالـ server هنا قد يكون لوحة microcontroller.
The order of the four questions is testable. System, components, relationships, layers. A matching or ordering item that puts layers before relationships is wrong.
ترتيب الأسئلة الأربعة قابل للاختبار. system ثم components ثم relationships ثم layers. وأي سؤال ترتيب أو توصيل يضع الطبقات قبل العلاقات خاطئ.
Check yourself
اختبر نفسك
Which is the correct order of the four design questions on slide 12?
ما الترتيب الصحيح لأسئلة التصميم الأربعة في الشريحة 12؟
C. The order follows dependency: you need the system boundary before you can list its components, components before you can relate them, and both before you can group them into layers. B is the tempting one because layers sound "big picture", but you cannot assign things to layers before you know what the things are and how they interact.
الجواب C. الترتيب يتبع الاعتمادية: تحتاج حدود النظام قبل أن تسرد مكوّناته، والمكوّنات قبل أن تربط بينها، وكليهما قبل أن تجمعها في طبقات. وB هو المُغري لأن الطبقات تبدو "صورة كبيرة"، لكنك لا تستطيع توزيع الأشياء على الطبقات قبل أن تعرف ما هي وكيف تتفاعل.
According to slide 13, which statement defines a system?
حسب الشريحة 13، أي عبارة تعرّف الـ system؟
B, the slide's own words with environment, interactions and components highlighted. A is the trap: it describes a pile of parts with no interactions. C is the definition of the server layer from slide 20, not of a system. D describes a layered model such as TCP/IP, which is one way to organise a system, not the definition of one.
الجواب B، وهو نص الشريحة مع تظليل environment وinteractions وcomponents. وA هو المصيدة: يصف كومة أجزاء بلا تفاعلات. وC هو تعريف server layer من الشريحة 20 وليس تعريف النظام. وD يصف نموذجاً طبقياً مثل TCP/IP، وهو طريقة لتنظيم النظام لا تعريفه.
Why does the client offload functionality to the server in the lamp system?
لماذا ينقل الـ client الوظائف إلى الـ server في نظام المصباح؟
D. Slide 15: the client offloads because the server provides processing and storage. A closed tab cannot log energy readings, and two clients would each hold their own state, while the always-on server keeps one history and one state. A confuses a role with a machine size. B is false, sending HTTP requests is exactly what the browser does. C is wrong because the server could run on a board next to the lamp; placement is the question the rest of the course answers.
الجواب D. الشريحة 15: ينقل الـ client الوظائف لأن الـ server يوفّر المعالجة والتخزين. التبويب المغلق لا يستطيع تسجيل قراءات الطاقة، وكل client سيحتفظ بحالته الخاصة، بينما الـ server الذي يعمل دائماً يحفظ سجلاً واحداً وحالة واحدة. وA يخلط بين الدور وحجم الجهاز. وB خاطئ، فإرسال طلبات HTTP هو بالضبط ما يفعله المتصفح. وC خاطئ لأن الـ server قد يعمل على لوحة بجانب المصباح، ومكان التشغيل هو السؤال الذي يجيب عنه بقية المقرر.
A student wires a sensor and a script to one lamp without first asking what the system is. Adding a phone app later needs a rewrite. What is this, and what is its weakness?
طالب يوصل sensor وسكربتاً بمصباح واحد دون أن يسأل أولاً ما هو النظام. وإضافة تطبيق هاتف لاحقاً تحتاج إعادة كتابة. ما هذا، وما نقطة ضعفه؟
A. Choosing a part before the system is ad hoc: for this situation, without previous planning. Slide 10's verdict is that it might work for small, isolated tasks but fails to scale or integrate with larger systems. C overstates it: the slide says it might work for small tasks. B and D describe structured design wrongly; slide 11 says structured design is exactly what handles complexity, scalability and integration.
الجواب A. اختيار قطعة قبل تحديد النظام هو ad hoc: لهذا الموقف، دون تخطيط مسبق. وحكم الشريحة 10 أنه قد ينجح في المهام الصغيرة المعزولة لكنه يفشل في التوسّع أو الاندماج مع أنظمة أكبر. وC مبالغة: الشريحة تقول إنه قد ينجح في المهام الصغيرة. وB وD يصفان structured design وصفاً خاطئاً، فالشريحة 11 تقول إنه بالضبط ما يتعامل مع التعقيد وقابلية التوسّع والتكامل.
In slide 14's final decomposition, which component processes client requests and communicates with the device?
في التفكيك النهائي في الشريحة 14، أي component يعالج طلبات client ويتواصل مع device؟
C. The slide labels the server box "processes client requests and communicates with the device". The client is the user-facing interface, the device is the lamp itself, and the environment is not a component at all: it is the boundary inside which components interact.
الجواب C. تكتب الشريحة تحت صندوق server: "يعالج طلبات client ويتواصل مع device". الـ client هو الواجهة التي يراها المستخدم، والـ device هو المصباح نفسه، والـ environment ليس component أصلاً، بل الحدود التي تتفاعل داخلها المكوّنات.