Lesson Analysis - Software Engineering - ثالث ثانوي

2. Prototyping In this unit, students will be able to compare the various ways of collecting the user requirements for a new system. Students will explain what a workflow diagram is, and they will learn to design a diagram with workflow processes. Finally, they will also learn how to prototype a mobile app using Pencil Project. Ministry of Education 62 2024-1446 Learning Objectives In this unit, you will learn to: > Recognize the requirements collection methods. > Recognize the types of charts used in the analysis phase. > Explain what analysis is. > Classify the functional and non-functional requirements. > List the data collection methods. > Describe workflow diagrams. > Use Pencil Project to design a workflow diagram. > Explain the human-computer interaction (HCI). > Illustrate the difference between user interface (UI) and user experience (UX) design. > Describe the basic functions/uses of mobile devices and desktop computers. > Identify the advantages and disadvantages of mobile devices and desktop computers. > Prototype a mobile app. Tools > Pencil Project

Lesson 1 Analysis Link to digital lesson www.ien.edu.sa Analysis Phase of the SDLC As we have already mentioned in the previous lesson, SDLC can be broken down into five stages, the first of which is the Analysis phase. During the analysis stage, the system analyst meets with the users to determine exactly what the user wants and undertakes feasibility studies. In the analysis stage, the details of the required system or any requirements raised by the customer are searched for, which are divided into two parts: 1. Functional requirements 2. Non-functional requirements Functional Requirements The official definition of a functional requirement is that it essentially specifies something the system should do. Some of the more typical functional requirements include: • Business Rules and Administrative functions • Transaction corrections, adjustments and cancellations • Authentication and Authorization levels for the system • External Interfaces for the system Certification Requirements for the system • Reporting Requirements Examples of functional requirements are: 1. The system must send a confirmation email whenever an order is placed. 2. The system must allow users to verify their accounts using their phone number. 3. The system must allow blog visitors to sign up for the newsletter by leaving their email. وزارة التعليم Ministry of Education 2024-1446 10000 8000 6000 4000 2000 0 -2000 4000 6000 PODO Λ Jan Fel Technology 63 ation Tal

Non-Functional Requirements Non-functional software requirements are a set of constraints or criteria that define how a software system should behave, perform, or operate beyond its basic functional requirements. Some of the more typical non-functional requirements include: • Performance: Requirements related to the speed, responsiveness, and scalability of the software system, such as response time, throughput, and resource usage. • Security: Requirements for protecting sensitive data, such as user authentication, encryption, and access control. • Usability: Requirements for ease of use and user experience, such as navigation, user interface design, and accessibility. • Reliability: Requirements related to the software system's availability and stability, such as error handling, failover, and recovery. • Compatibility: Requirements related to the compatibility of the software system with other systems, platforms, or devices, such as browser compatibility, mobile compatibility, and interoperability. Examples of non-functional requirements are: 1. The ability of the system to recover unsaved data when a sudden power outage occurs. 2. The system works effectively when used by up to ten thousand users at the same time. Now that the requirements have been defined, we can see how the gathering of these requirements can be realized and by which methods. Requirements Gathering An important point of analysis involves finding out what people want from the new proposed system or looking at the existing system to find out how it works and might be improved. There are several methods of data collection: Questionnaires Interviews وزارة التعليم Ministry of Education 64 2024-1446 Observation Examination of existing documentation O O O O O O

Questionnaires A questionnaire could be given to each user and left with them for completion. Questions should be about how the job is done now and not about the overall running of the system. It could also be about the information the new system needs to give them. Characteristics of Using Questionnaires: • It is usually collected without identifying the user to get more credible answers. • It takes less time compared to interviews. • It can be analyzed automatically through the use of electronic forms and specialized software. Challenges of Using Questionnaires: • Incorrect answers are more likely due to unclear questions or the respondent's lack of interest. • The questionnaires do not serve to collect descriptive data. Interviews Interviews take longer than questionnaires, so this method is appropriate when there are only a few users of the system. People at different levels in the organization, who will use the new system, should be interviewed. At these interviews you can find out how the existing system works and what is required from the new system. Characteristics of Using interviews: • An immediate explanation of the questions can be given by the interviewer when needed. • Questions can be modified or changed to suit the team members being interviewed. • People usually take an interview more seriously than a questionnaire. Challenges of Using Interviews: • Interested persons may get nervous during the interview, which affects the accuracy of the information provided. • Interviews are expensive due to the need to visit people's whereabouts and disrupt their regular work. Arranging and conducting interviews takes a lot of time, especially when many people need to be interviewed. وزارة التعليم Ministry of Education 2024-1446 65

Observation In this method, an observer is with a user who is actually doing the job the new system is designed to do. Then the observer sees the problems encountered with the old system as well as talks to the user about what the new system must be able to do. Characteristics of Using Observation: • We can instantly identify the processes involved within the system. • The analyst gets acquainted with accurate details in the current system that are difficult to obtain through questionnaires and interviews. • It is less expensive than interviews as it does not require users to be interrupted while performing tasks. Challenges of Using Observation: Using this method requires knowledge of the current system and the new system. • The person being observed may act differently than they normally would during the observation. Examination of Existing Documentation This method of data collection involves examining any paperwork involved with the current system. This would include documents such as order forms, lists of stock, and so on. We can also look at the records that are kept in filing cabinets Characteristics of Using Examination: • It saves a lot of time, especially in the case of previous system analysis documents. • The documents provide a clear picture of the process of data flowing through the system. • The documents allow the person doing the analysis to determine the size of the system needed by looking at order volume, invoices, etc. • The documents provide a clear picture of the current input and output designs of the system. Challenges of Using Examination: • It depends greatly on the quality of the documents in the organization and the accuracy of the data it provides. The process of collecting and analyzing documents is expensive and requires a lot of effort from ...those who carry out the collection and analysis. وزارة التعليم Ministry of Education 66 2024-1446

Here is a comparison of the advantages and the disadvantages of the different ways to collect the requirements of the system in the Analysis phase. Table 2.1: Comparison of the ways of collecting user requirements Methods Disadvantages Advantages Users can be honest when they answer anonymous questionnaires. Questionnaires may not be clear or well understood. Questionnaires It takes less time to collect information from a lot of people. You cannot collect all the information you want via a questionnaire. The questions can be adjusted for specific users depending on their position or other criteria. Users may not give honest answers since there is no anonymity. Interviews The participants (users) will take the interview or the focus group seriously. Interviews are time consuming for the analysts but also for the users that will need to be taken away from their job. You cannot interview a lot of people, owing to it is an expensive process. Observation وزارة التعليم Ministry of Education 2024-1446 The analyst can get a real understanding of the existing system. The users can continue working. Users may not work in a normal way as observation may be intimidating. It is important to note that the criteria for choosing the method of data collection may differ according to the nature of the organization's work, the number of people targeted in the data collection process, etc. Usually, more than one method is used to collect data to obtain accurate and realistic outputs. 67

Using Diagrams in the Analysis Phase Diagrams and charts are useful tools that can help us in the Analysis phase, especially workflow diagrams. But, before we start working with workflow diagrams, let's think about what exactly a diagram is. A diagram is a visualized representation of information, using shapes and arrows to show arrangements and relations. Why Do we Use Diagrams Through diagrams, we can better explain statistical data, system functions, organization charts and other processes. The visual representation of such information is more effective. For example, using shapes and different colors in a diagram, makes it easier for the reader to compare data and differentiate each result. Diagrams are used in a wide range of applications. We can use a diagram to show the organization chart of a company, the flow of the processes for a task to be completed or how network components are connected and related. 328 Customer dayroom Aundats a وزارة التعليم Ministry of Education 68 2024-1446 Ulass repairs 131 Create claim Damage clam Assign damage? Exfed X Send claim onine vie app Send invoice t customer Send invoice t insurance H Rejection Fayment received Partial payment received Fejection received Payment received Test report required? Bas whether X Commission test report X Carry Close dam required subayment 田 Clam sed Venty entiberent to benefits X test report Send written rejection Figure 2.1: Diagramming a process

Different Diagram Examples There are many different kinds of diagrams we can use during the different phases of a Software development life cycle. Some of them are: Workflow Diagram We can say that the Workflow diagram is similar to the flowchart diagram you learned to design in order to describe the algorithm of a program. Typically, it consists of a set of symbols representing actions and processes connected by arrows indicating the flow from one to another. We can use workflow diagrams to show the flow of tasks during each phase of a SDLC. Tree Diagram A Tree diagram represents the hierarchical nature or organization of a structure in a graphical form. The root is usually at the top and the tree elements, called nodes, at the bottom. It is widely used to show how a company or the tasks of a project are organized. It can also be used to represent conditional probabilities in mathematics. وزارة التعليم Ministry of Education 2024-1446 Data Processing Workflow Confirm with customers Customers consult and request service Analyze customer demand Design and make samples Sign agreement/contract Learn detail requirements Lay out and transform data format Create & Review Improve workflow and make plans Export data CD Delivery Customers Payment Customer service Quality assurance Email Linear Figure 2.2: Workflow diagram Data Structures Stack Queue Linked List NonLinear Tree Graph Figure 2.3: Tree diagram 69

Wireframe Diagram A Wireframe diagram is a visual representation of the framework of a website or an online App. This chart usually lacks typographic style or graphics, since its purpose is to focus on the content's structure and functionality. It is widely used in website and applications development. Home Products Dental Buy Now Sippt bad Us Search Top Story Hoad Text description.. Image Image Social Share & Links Navigate Download Purchase • Item Name Amorted uff to you by (Cumpar Named Item Name Item Name Item Name Image Image Image Image Wf Image very User Reviews V Image 1 y botla Vit. bout Inge very Va 1 Issue Image very Figure 2.4: Wireframe diagram Use Case Diagram A Use Case diagram is a type of diagram that represents the different ways a user might interact with a system. Use case diagrams are very helpful to represent the gathered requirements of a system during the Analysis phase of a SDLC. Student Management Use Case Teaching Affairs Administrator Login System Basic Data Management Student Management Class Management Cource Management Term Management وزارة التعليم Ministry of Education 70 2024-1446 User Score Management Score Preview System Administrator Table User Management Query Statistics Score Distribution Figure 2.5: Use case diagram Diagram

P Using Pencil Project to Design a Workflow Diagram Pencil Project is a free and open-source GUI (Graphical User Interface) prototyping tool for making diagrams, using built-in drawing features and shape collections. We can use Pencil Project to create almost every type of diagram, such as flowcharts, workflows and wireframes. Shapes Panel Unsaved document - Pencil = PENCIL Sh... M.. Cli... Search for shapes Common Shapes Basic Web Elements 田 EB Desktop- GTK EDIT Common Shapes 。 Collection of general shapes Abc Au destar Plain Text Rich Text Widgets Ve Rectangle ectang Desktop Sketchy GUI EE 田 Gradient Desinop- Windows XP Widgets BE Bitmap Image N-Patch Scalable Flowchart 用 EB Mobile- Android ICS Straight line Triangle Abc O 100% 0 * Unsaved document Free Line Balloon Untitled Page وزارة التعليم Ministry of Education 2024-1446 Shape selector Font Editor Design Canvas SAME SEES & SPACES T Anal Save/Edit Project Name Figure 2.6: The Pencil interface TEXT STYLE 13 INFORMATION In addition to the built-in shapes included in the program, more shapes and cliparts can be imported from the Internet to enrich the existing library shapes. CONORS Filter Add Page... ☐ X Properties 71

Basic Shapes of a Workflow Diagram There are different symbols we can use to represent different aspects of a workflow diagram. For example, a process is represented by a rectangle while a diamond is used to represent a decision. The following table shows some basic shapes which are usually used in a workflow diagram. Table 2.2: Basic shapes of workflow diagrams Symbol Name Description Start / End Represents a start or an end point for the workflow. Process Decision Document Represents a repeatable set of steps. Represents a decision needed to be made, leading to a process or another decision. Represents a document such as error reports or other types of reports and outcome documents. Input/Output Arrows Represents the input or output of Data. A connector that shows relationships between the processes. Located at Site Patient Personal Information Creating a New Diagram In this lesson, we will use Pencil Project to create a workflow diagram; the diagram will outline the maintenance of the application about the KSA tourist guide for elderly people with vision problems, which we will create later. Work at Physician وزارة التعليم Ministry of Education 72 2024-1446 Contact Information Blood data Medical Record Medical history by Medical Sessions Vital signals Contributes Lab values Medical notes Plan Prescription Drug/medicine Figure 2.7: Application workflow diagram

To create a workflow diagram: > Open Pencil program and click Create a New Document. 1 > On the Shapes panel click the Flowchart section to add a shape. 2 > Drag and drop the Terminator shape into the canvas to set the starting point of the diagram. 3 > The starting point of the diagram has been created. 4 Pencil PENCIL * Sha... Search for shapes Common Shapes My.... Clip... Common Shapes Collection of general shapes Abc Basic Web Elements A mundu deltannito abscid Plain Text Rich Text Desktop- GTK Widgets Unsaved document - Pencil PENCIL O Sha... Search for shapes 2 田 Flowchart My... Clip... Flowchart Flowchart drawing 田 Mobile- Android Straight Muit- Connect segment ICS 田 Mobile- 105 U Stencils 田 Mobile- Curvy connect Connect 105 Process Wireha 3 وزارة التعليم Ministry of Education 2024-1446 Decision 1 Open a Document... Create a New Document You can adjust the zoom of the diagram by using the Zoom In and Zoom Out buttons. You can use the shape's pointers to resize it. Termina *Unsaved document Untitled Page Figure 2.8: Creating a new workflow diagram 4 - Select objects in the canvas to edit properties. Properties Backgrou Border Text Adobe A Option Texts Adobe A Filter Add Page... 213 73

To add text to the shape: > Double click the shape you want to add text to, and then type the text you want. 1 Unsaved document - Pencil PENCIL Sha... My.. Search for shapes EB Flowchart Flowchart Flowchart drawing stencils E Mobile Android Straight Connect 103 田 Mobile 105 U Stancis Mub seament Curvy Connect connect 1 Request updates for the application Helvetics Figure 2.9: Adding text to a shape 1 ㅁ Backgrou Border Text Adde Option × Properties Adding New Shapes to the Chart We can add new shapes that represent decisions, processes, documents, or any other information we want to add to the workflow diagram. To add new shapes to a diagram: > To add a process, go to the Shapes panel, click the Flowchart section ① and then drag and drop the Decision shape into the canvas. > The shape has been added to the diagram. 2 You can copy any shape or text field. In the same way, you can add an operation or a document to the chart. وزارة التعليم Ministry of Education 74 2024-1446 Search for shapes Flowchart Flowchart drawing Windo Connect 1 田 Ronchart EEE Cuny Connect 100 EEE Process Alternate Роско Devin Predefin Docum Process Request updates for the application 2 Technical issues Unsaved document Untitled Page Features issues Select the camar to edit properties Design issues Piter &Add Page... Figure 2.10: Adding new shapes to a diagram Proper

Adding Links and Texts It is necessary to add links to represent the connection and relationships between the different shapes of the diagram, and we can add simple text when needed to explain or analyze the different outputs of a decision, process, or any other related form within the diagram. To connect two shapes: > On the Shapes panel, click the Flowchart section and drag and drop a Multi-segment Connector into the canvas. 1 > Use the connector pointers to connect the starting point of the diagram with the next three decisions. 2 > Continue connecting all the shapes of the diagram with the appropriate connectors. To make the diagram fit on the canvas, you just have to resize the canvas by right- clicking on it and choose one of the three options: Fit Content Fit Content with Padding... Fit Screen *Unsaved document - Pencil = PENCIL EDIT ASIGNAIENT SAME SIZES & SPACES TEXTSTVED COLORS 12 Sha... My... Clip... Search for shapes Flowchart Flowchart drawin Sketchy GUI stencils 1 Desktop- Windows XP Widgets Straight Connect EB 田 Flowchart Multi- segment Curvy Connect connect Mobile Android ICS E Mobile- los ul Stencils Process Alternate Process 田 Decision Termina Mobile- 106 Wirefra 2 Yes Yes No geting ocum Process * Unsaved document Untitled Page وزارة التعليم Ministry of Education 2024-1446 No Yes D No Figure 2.11: Connecting shapes in the diagram 3 te Ho No Filter Add Page... 75

To add a text block to the diagram: > On the Shapes panel click the Common Shapes section and drag and drop a Rich Text field into the canvas. 1 > Place the text field in the desired position inside the diagram and type the text you want. ② 2 > The text block has been added to the diagram. 3 > From the Shapes panel, click the Common Shapes section, drag and drop the Plain Text field onto the canvas, 4 to insert Yes/No options at the graph's Decisions. 5 You can change the size of the text to make it more clear from the text style section. Unsaved document - Pencil =PENCIL Sha 1 for shapes Common Shapes Common Sh Collection of Abc 2 田 5 Fix Bug issues 3 Arial Application Maintenance Workflow Error Resort 033 300 No Yes Yes Upoace Test Changes issues Resolved? Eor Report Pain Test Rich Th Technical issue 0TV Wogett 4 Rectang Decresa GU Request updates EE Gradient Rectangle Oval for the application Des 12 Woget EE N-Panch Scalable 田 Shaight Tange Andianal 田 Craniatis EE Free Line Abc No Yes Features issues Fix Security Modify features No New feat No Test App Bata Version Issues Resolved? Error Report No Yes Test Changes issues Resolved? Error Report No Yes Yes improve U& Design issue Test Changes issues Resolved? No Triangie Unsaved document Untitled Page وزارة التعليم Ministry of Education 76 2024-1446 Figure 2.12: Adding a text block to the diagram Yes Reesse New App Version Fiter Add Page...

Saving the Diagram and Export Options When the final diagram is finished, we can save the file and export it in various formats such as Image (PNG), PDF, Document or a Web Page. 2 To save a diagram project: > Click the main menu 1 and click Save as. 2 > In the appearing window type a name 3 for the file to save and click Save. 4) > The diagram has been saved. 1saved document - Pencil PENCIL New Document Ctri-N Open... Save COFF CALIGEMENT SAME SIZES & SPACES TEXT STYLE COLORS 30 Clip... Ctrl-O Ctrl+S Save As.. Ctrl-Shift-S Export... Ctrl-Shift-E Print.... Ctrl+p shapes ✡ general × Close Ctrl-Shift-W Recent files A mundu del tarining ascid Rich Text Technical issue ✡Settings... Tools About... Exit Ctrl-Q mectangie Rectang iz No Fix Bug issues Application Maintenance V Error Report OU No Yes Update Hardware Requirements Test Changes Issues Resolved? Fox Security issues Save as X 个 This PC Documents 0 Search Documents Organize▾ New folder ? Name Status Date modified Quick access Desktop No items match your search. Downloads Documents Pictures Music Videos File name: Workflow Diagram 3 Save as type: Pencil Document (GZip Compressed) 4 Save Hide Folders وزارة التعليم Ministry of Education 2024-1446 Figure 2.13: Saving a diagram project Cancel 77

To export the project: > Click the main menu 1 and click Export. 2 > In the Export Document window, click the Output Type to select the type of the exported diagram. 4 > Select the type you want (e.g. PDF) and click Export. 5 1 rkflow Diagram - Pencil = PENCIL New Document Ctri-N Open... Save Ctrl-O Ctrl-S Clip... Save As... Ctrl-Shift-S 2 Export... - Print... × Close Recent files ✡Settings... Ctrl+Shift+E Ctrl+p shapes ✡ Ctrl-Shift-W general Amundu del tanning Tools Rich Text About... Exit Ctrl-Q Rectang... Export Document Select source pages and target output format with options Select pages: Untitled Page وزارة التعليم Ministry of Education 78 2024-1446 CALIGAMENT SAME SIZES & SPACES E Technical issue No Yes Fix Bug issues Update Hardware Requirements Fox Security issues 3 Output type: Rasterized graphics (PNGs) Rasterized graphics (PNGs) Single web page 4 Portable Document Format (PDF) Print Multi-layer vector graphics (SVG) OpenOffice.org document (ODT) mages 5 Cancel Export Figure 2.14: Exporting a diagram project TEXT STYLE COLORS 30 Application Maintenance V Error Report No Test Changes Issues Resolved?

Exercises 1 Open Pencil Project and see what the following shapes represent: Start / End Point 1 О Document 2 О Process 3 О Input/Output Data 4 О وزارة التعليم Ministry of Education 2024-1446 Decision 5 Connector 6 О 79

وزارة التعليم Ministry of Education 80 2024-1446 2 Match each of the following requirements with their examples: О Security О Administrative functions Functional 1 requirement О External Interfaces for the system О Reporting Requirements Non-Functional requirement 2 О О О Performance Certification Requirements for the system Reliability

3 Read the sentences and tick ✓ True or False. 1. The identity of the interviewee can be kept anonymous. 2. The observation process must take place while users are using the system. 3. Examination of existing system documentation can show current output and input designs. 4. Inadequate answers regarding system functions can be obtained by examining the existing documentation. 5. The answers provided through questionnaires are more realistic. 6. An additional explanation of the questions can be provided during the questionnaires if the person has difficulty understanding the meaning of a question. 7. The person to be observed may act differently from his nature during the observation. وزارة التعليم Ministry of Education 2024-1446 True False 81

4 Match each of the following requirements with their examples: Default Ne Default Nime Default Name Def milt Name Default Ne Default Name Default Name Default Nome Employee Default Heme Defimit New Default Name Wireframe diagram Tree diagram о Wireframe diagram о وزارة التعليم Ministry of Education 82 2024-1446 Use case diagram Supper Default Name Workflow diagram О Workflow diagram Tree diagram О О Product Purchashing Receiving Manufacturing Distribution Packaging Inventory Delivery Customer Customer Service Sales Marketing Workflow diagram О Quality Assurance Tree diagram О

5 List one use for each of the following diagrams: 1. Workflow diagram: 2. Use case diagram: 3. Tree diagram: 4. Wireframe diagram: وزارة التعليم Ministry of Education 2024-1446 83