Lesson Programming the Mobile App - Software Engineering - ثالث ثانوي

Link to digital lesson Lesson 3 Programming the Mobile App Programming Applications in App Inventor www.ien.edu.sa Before developing applications with the codeblocks, there are certain concepts and commands that need to be explained, such as working with variable data, and implementing logic and program flow. Variables in App Inventor App Inventor allows you to create and interact with variables. Variables can be initialized with multiple data types, like floating point numbers and strings. Variables in App Inventor can have the following scopes: • Global: The variables are accessible by all control and procedure codeblocks. ● Local: The variables are accessible only by the procedure that includes them. Local variables are used to save the memory of the device because they are created and accessed when their procedure needs them. For the purposes of this project, you will use only global variables because you will not create complex procedures that need local variables. Lists in App Inventor Lists are a simple and useful data structure that you can use to implement your application logic. App Inventor also offers methods to interact with and manipulate the data on the lists. Initializing a global variable initialize global x to Getting a global variable get global x Setting a global variable set global x to Creating an empty list ✡ create empty list Initializing a list with data test ✪ make a list Item #1 Item #2 وزارة التعليم Ministry of Education 2024-1446 make a list Item #1 Item #2 item list item item item In order to set the number of items of the list, click on the gear icon and drag and drop items to remove and add list items. 153

The ListPicker Component The ListPicker allows you to create custom application logic depending on the selection that you have made. When you click on a ListPicker component, the screen changes its appearance to show the list contents. The property of the component that stores the list data is called Elements. Accessing ListPicker elements test list Elements A ListPicker will take a variable which contains a list as elements. Initializing a ListPicker Elements with list Data initialize global items to make a list Item #1 Item #2 Item #3 when test_list BeforePicking do set test list Elements to get global items Interacting with the ListPicker element selection The application will when test_list.AfterPicking do open another screen screenName test list▾ Selection open the screen that has the name of the ListPicker selection. Sending Variables to Another Screen You want to send the value of the language variable to the next screen in order to initialize the text in the appropriate variable. In App Inventor, when you use a command to open another screen, you can send an initializer value that can be accessed by the next screen. initialize global language to en when test button- Click do open another screen with start value screenName Screen2 startValue get global language Conditional If Statements in App Inventor If codeblock statements in App Inventor are constructed similarly to lists. You can add else if or else statements to the codeblock using the gear icon. Simple if statement if then وزارة التعليم Ministry of Education 154 2024-1446 Adding an else statement if the else else if if else else Adding an else if statement if then else if then else if if else if else

The VerticalScroll Arrangement Component The VerticalScroll Arrangement component is used to format other components on the vertical axis and make a container for alignment. It also supports scrolling for the components that do not completely fit onto the screen. The alignment of the components inside the container can be changed with the following codeblocks. set VerticalArrangement1 set VerticalArrangement1 AlignHorizontal to HorizontalAlignment Left AlignVertical to VerticalAlignment Top The HorizontalArrangement Component The HorizontalArrangement component is used to format other components on the horizontal axis and make a container for alignment. The alignment of the components inside the container can be changed with the following codeblocks. set HorizontalArrangement1 set HorizontalArrangement1 AlignHorizontal to HorizontalAlignment Left AlignVertical to to VerticalAlignment Top Programming the Home Screen The Home screen (Screen1) will send the user to the Cities screen and define the language that will be used on the next screens as well. Programming Language Support Buttons You will now program the two language buttons to change the text on the home page and store a variable for the next screen to know in which language to initialize the text. Each page will default to the English language. To program the two language buttons in the home screen: > Select the when.Click block for the discover_button_en component. > Select the Control group and open the screen Cities with a startValue. 2 > Set the startValue to "en". 3 > Repeat the above step for the discover_button_ar and set the startValue to "ar". 4 وزارة التعليم Ministry of Education 2024-1446 Figure 3.34: Initial blocks page +00 155

MIT Projects Connect▾ Build Settings Help APP INVENTOR Visit_SA_App Blocks Built-in Control Logic Screen1 Add Screen ... Remove Screen Publish to Gallery Viewer when discover_button_en.Click do 1 Math Text when discover_button_en GotFocus do Lists Dictionaries Colors Variables when discover_button_en .LangClick do Procedures when discover_button_en LostFocus when discover_button_en .Click do MIT Projects - Connect Build- Settings - Help My Projects View Trash Guide Report an Issue APP INVENTOR Visit_SA_App Blocks @ Built-in Control Screen1 Add Screen... Remove Screen Publish to Gallery Viewer then else Logic Math Text do Lists Dictionaries Colors Variables Procedures Screen1 eVerticalArrangement1 discover_button_en discover_button_ar result evaluate but ignore result open another screen screenName Cities open another screen with start value screenName Any component Pensme Delete وزارة التعليم Ministry of Education 156 2024-1446 get start value when discover_button_en Cities startValue Click 2 F-_. do open another screen with start value screenName Cities startValue

MIT Projects Connect▾ Build Settings Help ▾ APP INVENTOR Visit_SA_App Screen1 Add Screen... Remove Screen Publish to Gallery Viewer Blocks Built-in Control 3 Logic Math join Text Lists Dictionaries length Colors Variables when discover_button_en .Click do open another screen with start value screenName Cities startValue en when discover_button_ar .Click do open another screen with start value screenName Cities startValue ar 4 Figure 3.35: Programing the two language buttons in the home screen The Complete Code for the First Screen (Screen1) when discover_button_en .Click do open another screen with start value screenName when discover_button_ar .Click Cities startValue en do open another screen with start value screenName وزارة التعليم Ministry of Education 2024-1446 Cities startValue ar Figure 3.36: Complete code for the first screen 157

Programming the Cities Screen As mentioned earlier, the home screen will send the user to the Cities page and define the language that will be used on the next screens as well. Creating the Content for the ListPicker You want to fill the ListPicker Elements with the appropriate text depending on the language. The first step is to define the lists of the highlights for a destination both in English and in Arabic. The second. step is to initialize the ListPicker components with the corresponding language. To create the content lists: > Create a new variable named riyadh_highlights_en. 1 > Create a make a list block and place it on the riyadh_highlights_en variable. 2 > Fill the list with highlight names in English. 3 > Repeat the process for a variable named riyadh_highlights_ar. MIT Projects Connect▾ Build APP INVENTOR Visit_SA_App Blocks e Built-in Cities Add Screen... Remove Screen Viewer initialize global name to 1 Control Logic get Math set Text Lists Dictionaries Colors Variables Procedures Cities initialize local name to initialize global riyadh_highlights_en to initialize local name to Visit_SA_App Cities Add Screen... Remove Screen Blocks Built-in Control Logic Math Text Viewer □ create empty list make a list 2 add items to list list Lists Dictionaries Colors is in list? thing وزارة التعليم Ministry of Education 158 2024-1446 item initialize global riyadh_highlights_en to make a list

LMIT Projects Connect Build Se APP INVENTOR Visit_SA_App Blocks Built-in Control Logic Cities Add Screen... Remove Screen F Viewer Math join Text Lists Dictionaries length Colors Variables Procedures is empty initialize global riyadh_highlights_en to make a list Al Masmak Boulevard Riyadh City 3 initialize global riyadh_highlights_ar to make a list المصمك بوليفارد الرياض Figure 3.37: Creating the content lists 4 The if-then block is used to program the menu item so that when pressed it opens the screen associated with it. If we click on Al Masmak, the corresponding page should open. To select the content for the list: > Select the Before Picking block for the riyadh_list component. 1 > Create an if else if statement. ② > Add one equals condition on the if and one on the else if statements. > Add the get start value variable on the left side of the two equals clauses. 4 > Add the "en" in the right side of the first equals clause and "ar" in the right side of the second equals clause. ⑤ > Select the Set Elements to command of the riyadh_list. 6 > Add the appropriate list variables for the above command. 7 > Add the if else if codeblock to the BeforePicking event. وزارة التعليم Ministry of Education 2024-1446 159

MIT APP INVENTOR Visit_SA_App Projects Connect Build Settings Help Cities Add Screen.. Remove Screen Publish to Gallery Blocks Viewer when riyadh list BeforePicking do Built-in Control when riyadh_list AfterPicking do Logic Math Text Lists Dictionaries Colors Variables when riyadh_list BeforePicking do 1 when riyadh_list GotFocus do Procedures when riyadh list LostFocus Cities do MIT Projects ▾ Connect Build APP INVENTOR Visit_SA_App Blocks 8 Built-in Control Cities Add Screen... Remove Screen Viewer else if if else if if then else 2 Logic Math Text if Lists then Dictionaries Colors else Variables Procedures MIT APP INVENTOR Projects Connect + Build Visit_SA_App Blocks Built-in Cities Add Screen... Remove Screen Viewer Control Logic Math true▾ false Text not Lists Dictionaries Colors Variables Procedures 0 and ليم وزارة الق Ministry of Education 160 2024-1446 if then else if then then if else if 3 then

MIT Projects Connect Build Settings Help - My Projects Vi APP INVENTOR Visit_SA_App Blocks Built-in Control Cities Add Screen... Remove Screen Publish to Gallery Viewer for each item in list do for each key with value in dictionary Logic Math do Text Lists Dictionaries while test do Colors Variables Procedures then Cities else A discover_label eVerticalArrangement1 Acities_label riyadh list jeddah_list Any component do result evaluate but ignore result ✪ if get start value then else if get start value then open another screen screenName AIMasmak Rename Delete open another screen with start value screenName AlMasmak startValue Media almasmak.jpg get start value 4 MIT APP INVENTOR Projects Connect ▾ Buil Cities Add Screen... Remove Visit_SA_App Blocks Viewer Built-in Control Logic Math ✪ join Text Lists Dictionaries length Colors وزارة التعليم Ministry of Education 2024-1446 5 if get start value en then else if get start value ar then 161

MIT Projects Connect▾ Build APP INVENTOR Settings Help My Projects View Trash Guide Visit_SA_App Blocks e Built-in Control Logic Math 0 Text Lists Dictionaries Colors Variables Procedures Cities Adiscover_label VerticalArrangement1 Cities Add Screen... Remove Screen Publish to Gallery Viewer set riyadh_list BackgroundColor to riyadh_list Elements set riyadh_list Elements to 6 to set riyadh_list. ElementsFromString riyadh_list Enabled if get start value en then set riyadh_list Elements to else if get start value ar then > set riyadh_list▾ Elements ▾ to MIT Projects Connect Build Settings▾ Help APP INVENTOR Visit_SA_App Blocks e Built-in Control Cities Add Screen.. Remove Screen Publish to Gallery Viewer initialize global name to Logic Math get Text Lists Dictionaries 7 set to 0 if get start value en then set riyadh_list Elements to get global riyadh_highlights_en else if get start value ar then set riyadh_list Elements ▾ to get global riyadh_highlights_ar زارة التعليم Ministry of Education 162 2024-1446

8 when riyadh_list▾ BeforePicking do if get start value en then set riyadh_list ▾ Elements▾ to get global riyadh_highlights_en else if get start value ar then set riyadh_list ▾ Elements to get global riyadh_highlights_ar Figure 3.38: Initializing the ListPicker content Opening a New Page from the ListPicker You have the list of highlights from the city you choose and you want to open a specific highlight. Each highlight will have its unique page. Each selection from the ListPicker will detect the highlight and then open it. The page for each highlight will also support English and Arabic language. To get the new highlight page name from the ListPicker selection: > Create a new variable named selection. 1 > Add an empty string on the selection variable. ② > Select the After Picking event for the riyadh_list component. 3 > Add the selection variable inside the AfterPicking event. > Set the selection variable to the Selection property of the riyadh_list. > Add an if codeblock inside the AfterPicking event. ⑥ MIT Projects ▾ Connect Build Settings Help - APP INVENTOR Visit_SA_App Blocks Built-in Cities Add Screen.. Remove Screen Publish to Gallery Viewer Control initialize global name to 1 Logic Math get Text Lists set to Dictionaries Colors variables initialize local name to Procedures in Cities فزارة التعليم Ministry of Education 2024-1446 initialize global selection to 163

ليم MIT APP INVENTOR Visit_SA_App Blocks Built-in Projects Connect ▾ Cities- Add Screen Remo Viewer Control Logic 2 initialize global selection to Math join Text Lists Dictionaries Colors MIT APP INVENTOR Visit_SA_App Blocks a Built-in length Projects Connect Build Settings Help Cities Add Screen Remove Screen Publish to Gallery Viewer Control Logic when riyadh_list AfterPicking do 3 Math Text Lists Dictionaries do Colors Variables Procedures when riyadh list BeforePicking when riyadh_list do GotFocus when riyadh_list▾ AfterPicking do Cities A discover_label VerticalArrangement Acities_label when riyadh_list LostFocus riyadh_list jeddah_list do Any component MIT Projects Connect Build Settings Help APP INVENTOR Visit_SA_App Blocks Cities Add Screen... Remove Screen Publish to Gallery Viewer when riyadh_list AfterPicking do set global selection to Built-in Control initialize global name to Logic Math get Text Lists set to 4 Dictionaries Colors Variables initialize local name to Procedures חו Cities وزارة Ministry of Education 164 2024-1446

when riyadh_list.AfterPicking do set global selection to riyadh_list Text LISTE Dictionaries riyadh list ItemBackgroundColor Colors Variables Procedures set riyadh list▾ ItemBackgroundColorto Cities discover Jabel Vertebrangement Alcibes label ipadth 5 jedda Any component riyadh list Item TextColor set riyadh list Item TextColor riyadh list Selection set riyadh list Selection to Selection▾ MIT when riyadh_list AfterPicking Projects ▾ Connect APP INVENTOR do set global selection to riyadh_list Selection Visit_SA_App Cities Add Screen..... if Blocks Viewer Built-in Control if Logic 6 then Math Text Lists if Dictionaries then Colors Variables else Procedures Cities then The if clause will be used to determine which page to redirect the application to. Figure 3.39: Selecting the page from the ListPicker Opening the Appropriate Page for the ListPicker Selection A new page for a highlight will be displayed depending on the selection of the ListPicker, and the codeblock will recognize the destination whether it is in English or Arabic. The codeblock will also send language. configuration to the screen as well. To open the appropriate page from the ListPicker selection: > Add an or clause that contains two more equals clauses and put them in the if statement inside the AfterPicking event. 1 > Add the selection variable to the left side of the equals clauses. 2 >> Add the empty strings of the Al Masmak highlight both in English and in Arabic on the right side of the equals clauses. 3 التعليم • >Open the Al Masmak screen with the startValue being the one you used in the previous screen. Ministry of Education 2024-1446 165

MIT Projects Connect Build Sett APP INVENTOR Visit_SA_App Blocks Cities Add Screen... Remove Screen Pul Viewer when riyadh_list ⚫.AfterPicking true▾ do set global selection to riyadh list Selection ✪ if or e Built-in Control Logic Math false Text Lists not Dictionaries Colors Variables EDH Procedures Cities and A discover_label eVerticalArrangement] A cities_label riyadh list jeddah_list then 1 or MIT Projects ▾ Connect Build- Settings Help APP INVENTOR Visit_SA_App Blocks Built-in Cities Add Screen... Remove Screen Publish to Gallery Viewer initialize global name to Control Logic Math 2 get Text Lists set to Dictionaries Colors Variables initialize local name to Procedures in Cities when riyadh list do set global selection then if وزارة التعليم Ministry of Education 166 2024-1446 AfterPicking to riyadh_list Selection get global selection or get global selection

MIT Projects Connect APP INVENTOR Visit_SA_App Blocks e Built-in Control 3 Logic Math Text Lists Dictionaries Colors Cities Add Screen... Remo Viewer join length when riyadh_list AfterPicking do set global selection to riyadh_list Selection ✪ if 0 get global selection then Viewer then else do result evaluate but ignore result open another screen screenName or Al Masmak get global selection AIMasmak open another screen with start value screenName get start value AIMasmak startValue 4 when riyadh_list AfterPicking do set global selection ta riyadh_list Selection σ if 回 get global selection or Al Masmak get global selection then open another screen with start value screenName startValue AlMasmak get start value وزارة التعليم Ministry of Education 2024-1446 المصمك المصمك Figure 3.40: Opening the appropriate page from the ListPicker selection 167

The Complete Code for the Second Screen (Cities) initialize global selection to Initialize global riyadh_highlights_en to make a list Al Masmak Boulevard Riyadh City Initialize global riyadh_highlights_ar to make a list المصمك بوليفارد الرياض when riyadh_list BeforePicking do if then set riyadh_list get start value en Elements to get global riyadh_highlights_en else if get start value ar then set riyadh_list Elements to get global riyadh_highlights_ar when riyadh_list AfterPicking do set global selection to riyadh_list Selection if 0 or get global selection Al Masmak get global selection then open another screen with start value screenName AIMasmak startValue get start value Figure 3.41: Complete code for the second screen المصمك Programming the Highlight Screen (Al Masmak) A highlight screen will change the language and the formatting of the text depending on the selection of the home page and will also offer the option to display an interactive map with the location of the highlight. Dynamically Changing the Language for the Highlight Page The user will be directed to a page that contains text and an image for the selected highlight. The text language will change according to the selected language. The text will also need to be aligned correctly depending on the original language selection on the home page. If the language selection is English, the text will need to be aligned to the left, and if it is Arabic, the text will need to be aligned to the right. وزارة التعليم Ministry of Education 168 2024-1446

To change the language dynamically: > Create variables for the label texts. 1 > Add empty string for the title and description labels for the Al Masmak highlight both in English and in Arabic. > Select the Initialize event for the Al Masmak screen. 3 > Add an if else if codeblock inside the Initialize event. 4 > Add an equals clause inside each if statement. > Add the get start value on the left side of each of the two equals clause. 6 > Add the "en" in the right side of the first equals clause and "ar" in the right side of the second equals clause. ⑦ > Set the Text property of the title_label to the title variable of the appropriate language. 8 > Set the Text property of the description_label to the description variable of the appropriate language. 9 > Set the AlignHorizontal property of VerticalArrangement1 to the text direction of the appropriate language. 10 MIT Projects Connect Build APP INVENTOR Visit_SA_App Blocks AlMasmak Add Screen Remove Scree Viewer e Built-in Control Logic initialize global name to 1 get Math set Text Lists D initialize local name to initialize global title_en to Dictionaries Colors initialize global title_ar to Variables initialize local name to Procedures AIMasmak وزارة التعليم Ministry of Education 2024-1446 initialize global description_en to initialize global description_ar to 169

MIT Projects ▾ Connect Build APP INVENTOR Visit_SA_App Blocks Built-in Control 2 Logic Math Text Lists AlMasmak Add Screen Rem Viewer ✪ join Dictionaries Colors Variables Procedures length is empty initialize global description_en to initialize global description_ar to MIT APP INVENTOR Visit_SA_App Blocks Built-in Control Logic Math Text Search the Internet for descriptions of the Al Masmak castle both in English and in Arabic. initialize global title_en to initialize global title_ar to Al Masmak المصمك Located in the heart of the old quarter in Riyad... ... يقع قصر المصمك في وسط مدينة الرياض، وهو عبارة عن Projects Connect Build Settings Help AlMasmak. Add Screen Remove Screen Publish to Gallery Viewer when AIMasmak BackPressed do Lists when AlMasmak▾ ErrorOccurred Dictionaries component functionName errorNumber message Colors Variables do Procedures AlMasmak when AlMasmak .Initialize discover_label 3 VerticalArrangement! Atitle_label do وزارة التعليم Ministry of Education 170 2024-1446 when AlMasmak.Initialize do

MIT Projects Connect B when AIMasmak .Initialize APP INVENTOR do if Visit_SA_App AIMasmak Add Screen... R then Blocks @Built-in Control Viewer else Logic 0 if then then else if if else if Math Text Lists if Dictionaries then Colors 4 else Variables else Procedures MIT APP INVENTOR Visit_SA_App Projects Connect Build AIMasmak Add Screen... Remove Viewer Blocks Built-in Control true Logic Math false Text Lists not Dictionaries Colors Variables Viewer then else Procedures do result evaluate but ignore result open another screen screenName when AIMasmak Initialize do then if else if then 5 AIMasmak open another screen with start value screenName 6 ليم get start value Ministry of Education 2024-1446 AIMasmak startValue when AIMasmak .Initialize do if get start value then else if get start value then 171

MIT Projects Connect Build when AIMasmak▾ .Initialize APP INVENTOR do if Visit_SA_App AlMasmak get start value en Add Screen... Remove Screer then Blocks Viewer else if Built-in get start value ar 7 Control then Logic Math join Text --> Lists Blocks Dictionaries Colors Variables Procedures Math Text Lists Viewer length is empty title label Height Dictionaries Colors Variables Procedures AIMasmak discover_label eVerticalArrangement1 A title_label set title label▾ Height to set title label ▾ HeightPercent to title label Text▾ image A description_label set title label▾ Text to HorizontalArrangem title label TextColor▾ map_button set title_label TextColor to Map1 Any component وزارة التعليم Ministry of Education 172 2024-1446 8 when AIMasmak .Initialize do if get start value en then set title_label Text to get global title_en else if get start value ar then set title_label Text to get global title_ar

MIT Projects Connect▾ Build Settings. Help▾ APP INVENTOR Visit_SA_App Blocks Math Text AIMasmak. Add Screen ... Remove Screen Publish to Gallery Viewer Lists Dictionaries Colors Variables Procedures AlMasmak A discover_label VerticalArrangement1 A title_label image description_label set description_label set description_label description_label set description_label description_label Height Height to Text HeightPercent to Text to 9 description_label HorizontalArrangem TextColor▾ map_button Map1 Any component set description_label T TextColor▾ to وزارة التعليم Ministry of Education 2024-1446 when AIMasmak Initialize do if get start value en then set title_label set description_label Text to get global title_en Text to get global description_en else if get start value ar then set title_label Text to get global title_ar set description_label▾ Text to get global description_ar 173

MIT Projects Connect Build Settings Help APP INVENTOR Visit_SA_App Blocks AlMasmak Add Screen... Remove Screen Publish to Gallery Viewer AlignHorizontal to HorizontalAlignment Left Math VerticalArrangement1 AlignHorizontal Text Lists set VerticalArrangement1 Dictionaries Colors Variables Procedures AlMasmak discover_label VerticalArrangement] VerticalArrangement1 AlignVertical 10 set VerticalArrangement1 AlignVertical to VerticalAlignment Top VerticalArrangement1 title_label image description_label HorizontalArrangem BackgroundColor set VerticalArrangement1 BackgroundColor to when AIMasmak .Initialize do if get start value en then set title_label Text to get global title_en set description_label▾ set VerticalArrangement1 ▾ Text▾ to get global description_en AlignHorizontal to HorizontalAlignment Left else if get start value ar then set title_label ▾ Text to get global title_ar set description_label▾ Text▾ to get global description_ar set VerticalArrangement1 9 .AlignHorizontal to HorizontalAlignment Right وزارة التعليم Ministry of Education 174 2024-1446 Figure 3.42: Changing the language dynamically

Programming the Interactive Map The application will open the interactive map when the user presses the map button. The map will be initialized to the coordinates of the respective highlight. To program the interactive map: > Add a new variable named coordinates. 1 > Add the following text to the coordinates variable: 24.6312, 46.7134. 2 > Select the Click event for the map_button component. > Set the CenterFromString property of the map component to the coordinates variable. > Set the Visible property of the map component to a true codeblock. MIT Projects ▾ Connect Build Settings Help APP INVENTOR Visit_SA_App AlMasmak Add Screen Remove Screen Publish to Gallery Blocks Viewer Built-in Control Logic initialize global name to 1 Math get Text Lists set to Dictionaries Colors Variables initialize local name to initialize global coordinates to Procedures in AIMasmak MIT Projects - Connect Build APP INVENTOR Visit_SA_App Blocks Built-in Control AIMasmak Add Screen... Rem Viewer 2 Logic Math join Text Lists Dictionaries length initialize global coordinates to 24.6312, 46.7134 Colors Variables Procedures is empty Ministry of Education 2024-1446 175

MIT Projects Connect Build Settings Help - APP INVENTOR Visit_SA_App Blocks AlMasmak Add Screen... Remove Screen Publish to Gallery Viewer Math Text Lists Dictionaries Colors Variables Procedures when map_button .Click do when map_button .GotFocus do AIMasmak Adiscover_label eVerticalArrangement? A title_label image A description_label HorizontalArrangem map_button when map_button .LongClick do when map_button .LostFocus do 28 Март MIT APP INVENTOR Visit_SA_App Blocks Projects Connect Build Settings. Help AlMasmak Add Screen.. Remove Screen Publish to Gallery Viewer Math Text Lists Dictionaries Colors Variables ташице longitude zoom call Map1▾ Save when map_button .Click -7 do 3 path Procedures AIMasmak A discover_label Map1 BoundingBox eVerticalArrangement1 A title_label image A description_label HorizontalArrangem map_button Map1 Any component Map1 set Map1▾ BoundingBox to 4 set Map1▾ CenterFromString to EnablePan وزارة التعليم Ministry of Education 176 2024-1446 when map button map_button do set Map1 T Click CenterFromString to get global coordinates

MIT APP INVENTOR Visit_SA_App Blocks Projects ▾ Connect Build Settings Help ▾ AlMasmak Add Screen... Remove Screen Publish to Gallery Viewer Math Text Lists Dictionaries ινιαμί GLOW20011 set Map1▾ ShowZoom to UserLatitude Colors Map1 Variables Procedures Map1 UserLongitude AIMasmak A discover_label Map1 Visible VerticalArrangement! A title_label set Map1 Visible to 5 image description_label HorizontalArrangem Map1 Width map_button 3 Март set Map1 Width to Any component وزارة التعليم Ministry of Education 2024-1446 when map_button .Click do set Map1 CenterFromString to get global coordinates set Map1 Visible to true▾ Figure 3.43: Programming the interactive map 177

The Complete Code for the Third Screen (Al Masmak) initialize global title_en to Al Masmak initialize global description_en to initialize global description_ar to Located in the heart of the old quarter in Riyad... ... يقع قصر المصمك في وسط مدينة الرياض، وهو عباره عن initialize global title_ar to المصمك initialize global coordinates to 24.6312, 46.7134 when AlMasmak Initialize do if get start value en then set title_label Text set description_label to get global title_en Text set VerticalArrangement1 to get global description_en AlignHorizontal to HorizontalAlignment Left else if get start value then set title_label Text▾ to set description_label set VerticalArrangement1▾ ar get global title_ar Text▾ to get global description_ar AlignHorizontal to HorizontalAlignment Right when map_button Click do set Map1 set Map1 CenterFromString Visible to to get global coordinates true Figure 3.44: Complete code for the third screen The software is ready and you have to test it. For this you can use the Android Emulator, or you can download a package format for deployment and run it on your Android device. You can also scan the QR code with the Android device to preview. In the pictures below, the screens of your application are shown when you run the program using the Emulator. وزارة التعليم Ministry of Education 178 2024-1446

Android Emulator-Appinventer:1554 7.10 G Discover 2:40 G Discover Saudi Arabia Cities RIYADH JEDDAH Android Emulator-Appinventor 5554 7:11 G Al Masmak Boulevard Riyadh City Here are the screens shown when pressing the Arabic button: Android Emulator-Appinventar5554 7:10 G Discover استكشف وزارة التعليم Ministry of Education 2024-1446 1 2:40 G M 411 Discover Saudi Arabia Cities 7:10 G RIVADH JEDDAH المصمك بوليفارد الرياض Android Emulator Appinventor1554 711 G# Discover Saudi Arabia Al Masmak Android Emutter-Appinventor554 7:11 G# Discover Saudi Arabie Al Masmak Located in the heart of the old quarter in Riyadh city, Al Masmal -the word means a high, strong and thick building-was buit during the reign of imam Abdullah bin Faisal bin Turki Al Saud Al-Masmak Fortress is one of the most prominent national monuments still standing to this day. The fortress played an Integral role in the Unification of Saudi Arabia Located in the heart of the old quarter in feyadh city, Al Mama -the word means a high, strong and thick building-was built during the reign of imam Abdullah bin Faisal bin Turki Al Saud Al-Masmak Fortress is one of the most prominent national monuments still standing to this day. The fortress played an tegral role in the Unification of Saudi Arabia 7:13 G Ciscover Saudi Arabia المصنيك 7:13 G Discover Saudi Arabia المصمك بو الصبر المحطة في وسط مدينة الرياض وهو عبارة عن حصن كثير ومواقع تم بارة في عهد الإمام عبد الله بن فيصل بن تركي آل سعود أبرز المعالم الوطنية التي لا تزال القائمة حتى يومنا هذا، ولقد لعب دورا أساسيا في لوحيد المملكة العربية السعودية يلو قمر انصحك في وسط مدينة الرياض وهو عبارة عن حضن كبير ومواقع تمر بدلوه في عهد الإمام عبد الله بن فيصل بن تركي آل سعود تدبر قصر السيف من أبرز المعالم الوطنية التي لا تزال قائمة حتى يومنا هذا والله لعب دورا أساسيا في Figure 3.45: Testing the application in the Emulator لوحيد المملكة العربية السعودية 179

1 Exercises In each destination, add more options for highlights and create more pages for each highlight. Search the Internet for photos and information for each new highlight. 2 Add two new navigation buttons on each page. One button will take the user to the home screen and the other will take the user to the previous screen. وزارة التعليم Ministry of Education 180 2024-1446

3 Add another row with two buttons that change the language between English and Arabic and modify each page's code to accommodate this feature. 4 On a highlight page, add a new text label that will display the coordinates of the interactive map component. You can find the coordinates properties by clicking the map component on the blocks page. 5 On a highlight page, add two new buttons that will change the type of the interactive map between Aerial and Road views. You can find the map type properties by clicking the map component on the blocks page. وزارة التعليم Ministry of Education 2024-1446 181