A Design of Interactive Augmented Reality Mobile Learning Application for iOS-Based Device: Phytochemical Screening Material

: Augmented Reality (AR) in the study of phytochemical screening is a technology that combines observation of experimental results in phytochemical screening as virtual objects with real environments. This study aimed to develop interactive learning media for phytochemical screening materials in the Phytochemistry Practicum at the Pharmaceutical and Food Analysis Department of Poltekkes Kemenkes Jakarta II. This interactive learning media application using AR technology was applied to iOS-based smartphones and designed for phytochemistry learning in the laboratory. The methods used in this study were descriptive exploratory for phytochemistry analysis and MultiMedia Development Life Cycled (MDLC) for AR development. 3D objects were resulting from phytochemical screening of Simplicia powder studied by using blender application, with Unity as a game engine and Vuforia as a library. The development of AR technology resulted in iOS-based mobile application named AR Fitokimia that visualized the phytochemical screening results. The application would help improve students' understanding and participation in distance learning. An interactive AR mobile learning application for iOS-based smartphones was designed for the entire class with an iFamily device in handling distance learning of phytochemical screening in the laboratory. Abstrak: Augmented

It is undeniable that Android operating system phones have become a major competitor that continues to pursue iPhone sales with very fast growth. But based on the results of the German Market Research Firmresearch, the loyalty rate of iPhone users is much higher than Android (Kim et al., 2016) (Kapoor & Agarwal, 2017). One of the ideas to optimize the usefulness of smartphones, especially in distance practical learning is to create an interactive learning media using AR technology that can provide more perspective for users. The advantages offered by this technology included being able to bring up text, sound, animation, and video in a real environment (Mustaqim & Kurniawan, 2017).
The development of interactive teaching media using AR technology had been developed among others in the field of chemistry (Maier et al., 2009) to study chemical reactions that occurred between two elements or compounds and Nunez showed chemical structures in three dimensions (Nuñez et al., 2008). A choice must be made among platform possibilities such as Apple's iOS, Google's Android, Microsoft's Windows Mobile, etc. One of the leading platforms among college students is Apple's iOS. For accurate testing, the actual iFamily device is required (Goadrich & Rogers, 2011).
Mobile operating systems developed and distributed by Apple Inc. The operating system was first launched in 2007 for the iPhone and iPod Touch and has been developed to support other Apple devices such as the iPad and Apple TV. Unlike Microsoft's Windows Phone (Windows CE) and Google's Android, Apple does not license iOS to be installed on non-Apple hardware. As of September 12, 2012, the App StoreApple contains more than 700,000 iOS apps, which have collectively been downloaded more than 30 billion times. As of June 2012, iOS accounted for 65% of mobile device web data consumption (including on iPod Touch and iPad). By mid-2012, there were 410 million mobile devices activated. According to Apple as of September 12, 2012, 400 million iOS mobile devices have been sold throughout June 2012. The iOS user interface is based on the concept of direct manipulation using multi-touch gestures. Its interface control elements include sliders, switches, and buttons. iOS is derived from OS X, which has a Darwinian foundation, and therefore iOS is a Unix operating system. iOS is a mobile version of the OS X operating system used in Apple computers (Widianto, 2017).
One of the materials taught in the Phytochemistry Practicum is the phytochemical screening of Simplicia, such as alkaloid screening, glycoside, saponin, and tannin screening. Research on the use of AR technology in phytochemistry learning is still very limited, even the research of designing iOS-based AR applications has not been conducted for the study of phytochemical screening materials. Based on this fact, the problem is about the results of the development of iOS-based AR technology in the study of phytochemistry screening in distance learning. This study aimed to develop alternative interactive learning media by applying AR technology in the laboratory. It was expected that with the application of AR Fitokimia on iOS-based phones, the class or the course could observe objects interactively and efficiently to iOS-based mobile users so that students can see in detail the results of phytochemical screening and make online learning easier and fun.
The result of this research was an iOS mobile application that had a new appeal in the field of learning media, designed with a more interactive concept that would provide a new learning atmosphere for practical learning. This research would be hopefully useful for completing AR-based learning media research data on phytochemical screening results considering the limited reports of online practicum learning in the laboratory.

Phytochemistry Analysis
Text materials, images, animations, 2D/3D objects were obtained from the identification of the chemical content of several simplicia with several chemical reagents for alkaloids, flavonoids, steroid-triterpenoids, glycosides, saponins, and polyphenols or tannins (Sangi et al., 2008). The aim was to collect structural data experimentally to then be used virtually in explaining the observations results of phytochemistry screening to students during practicum learning. The research method was descriptive explorative.

Augmented Reality Development
This research could be categorized as Multi-Media Development Life Cycled (MDLC) to produce a learning media for health education as an innovative technology-based solution. The AR application design process used Unity 2020.2.3f1 software and the Vuforia SDK. This application used AR marker-based tracking method. The first stage began with the selection of model markers (trackable). The marker used must be registered to Vuforia first so that the marker could be read by the system, then the marker was saved into the marker database. The system would track and match markers to display the appropriate information. The result of the marker tracking output would be displayed on the smartphone screen. The information displayed was a 3D object along with material and sound. The design of 3D objects and animations used the Blender 2.9 app. 3D files of objects and animations were saved in. fbx format.

RESULT AND DISCUSSION
Practical learning in vocational institutions would run well if supported by competent resources and infrastructures so that students could become the competent analysts and technologically responsive and adaptable in the new normal era. One thing to consider in the selection of learning media is quality (Carmigniani et al., 2011). The results of phytochemistry screening observations that had only existed in the form of photo documents or images could improve understanding of the imagination by using AR.
In this study, the positive results of phytochemical screening of alkaloid, saponin, glycoside, and flavonoid, as learned in vocational laboratory based on the practical guidelines of the Pharmaceutical and Food Analysis Department in Poltekkes Kemenkes Jakarta II, were used as the markers in the form of observations from experiments / tests of phytochemical screening in the laboratory. The created system allowed students to research the observations from laboratory experiments by moving the marker as desired. The output of the marker tracking was displayed on the smartphone screen [ Fig.1]. The information displayed was a 3D object along with material and sound.

Figure 1. 'AR Fitokimia' Performance in iOS Device
After the "Start" button on the Main Menu [ Fig. 2] was pressed, the system would go to the "Choose One" menu which then displayed the 7 (seven) option buttons as shown in Figure 3.

Information
Phytochemical Screening menu main view:  The 'Alkaloid Screening' button is displaying the results of alkaloid identification  The 'Flavonoid Screening' button is displaying flavonoid identification results  The 'Glycoside Screening' button is displaying the results of glycosides identification  The 'Saponin Screening' button is displaying the results of saponin identification  The 'PK Tannin' button is to display the results of determining the level of tannins  The 'Preliminary Identification' button is to display the results of the color reaction at the initial identification of the Simplicia  The 'Experimental Solution Practice' button is to display how to add the correct and safe experimental solution in the laboratory  The button works to exit the app When the user selected the "Alkaloid Screening" menu, the application displayed the results of an alkaloid screening trial from the brotowali stem. Table 2 described the interface design on the "Alkaloid Screening" menu. There were three experimental results introduced, namely the initial identification results on the watch glass, the results of the deposition test on the test tube, and the results of the color test on the test tube. When the user selected the "Watch Glass" button, the application displays the observation image on the watch glass in three dimensions. A similar thing was indicated when the user selected the "Precipitation Reaction" and 'Color Result' buttons. Users can zoom in on the 3D object to be able to see the deposits at the base of the tube and the color of the solution in the tube more clearly by pointing the camera closer to the marker. When the user 'tapped' or touched the audio, the application played the audio by mentioning the conclusion of the experiment. Along with 3D objects, the material text was displayed in the form of formatted text documents that can be shifted up and down to see the entire text. There was also an option to close the display of the material text. Table 3 described the interface design on the "Saponin Screening" menu. There were two interactive things introduced to the user, namely the matching of the test tube and the addition of HCl 2N. When the user touched the 3D image that appeared after the "Saponin Screening" menu opens, the application displayed the next step in the test procedure, namely the matching of the solution in the test tube vertically for 10 seconds. When the user touched the screen once again, the 3D object displayed was the next test step, namely the addition of HCl 2 N by 1 drop. The app then played the audio by mentioning the conclusion of the end of the experiment. Observation results (3D objects) were displayed together with the text of the material in the form of rich text format.  which serves to display a burette 3D object containing KMnO4 dripped into the Erlenmeyer containing the sample filtrate  The second tap contains the 'shake solution' instruction that serves to display the solution shuffling 3D object inside the Erlenmeyer until a change in the color of the titration endpoint  Buttons serve to play audio  The button serves to return to the main menu Table 4 describes the interface design on the "Tannin Rate Determination" menu. Two interactive things are introduced to the user, namely dripping the titer solution and Erlenmeyer shuffling until there is a change in the color of the titration endpoint. When the user touches the 3D object that appears after the "Tanin Determination" menu opens, the application displays the first instruction result, namely the KMnO4 solution inside the burette dripping slowly into the Erlenmeyer. When the user touches the second instruction button, the application displays the next step in the test procedure, namely the matching of the solution inside the Erlenmeyer until the color of the titration endpoint is reached, which is from blue to golden yellow. The application can generate audio and text of the material simultaneously.
Tables 5, 6, 7, and 8 describe the interface design on the menus of Glycosides Screening, Flavonoid Screening, Preliminary Identification, and Trial Solution. When a 3D object appears, the user can zoom in and out of the 3D object by pointing the camera closer to the marker so that it can observe the results of the experiment more clearly. There is an audio button that explains the conclusion of the experiment. The results of observations (3D objects) are displayed along with the text of the material.   The results of the marker design for AR Fitokimia were as shown in Figure 4. The capacity of the system in detecting markers depends on the quality of the camera, marker, and light. This marker has been registered/uploaded to Vuforia and earned a 5-star rating. This shows that the marker is very easy to detect. If the camera quality and light are adequate, then the system can detect markers up to 50-100cm away. At the beginning of the scan, the camera must be aligned first with the marker, then after the marker is detected, the device can be tilted to a limit of 75°.

Figure 4. iOS-Based 'AR Fitokimia' Markers
Students can observe the results of the experiment from all sides by moving the marker as desired. The minimum specification of mobile devices for iOS-based AR phytochemicals was the iPhone 7 with an iOS 13 system. To run an app on iOS, the users must use a Mac OS device. Then the application will be built using Xcode which was only available on Mac OS, followed by logging in using the apple developer sign key.
Unity is cross-platform. The system could be built in iOS-based smartphones by switching the platform to iOS. The result of the build file from Unity is the Xcode folder. After checking the signing and capability section by selecting the team according to the one in Apple ID, iPhone and macOS devices were connected by using a USB cable. At the final stage, click the build button to compile the app to run on iPhone devices.
In the final stage, testing of the application design was carried out to find out the success rate of the application. Black box testing is usually used to test the internal work of the application. This testing technique is usually applied at all levels of software testing such as unit testing, integration testing, functional testing, and acceptance testing. The main focus in black box testing is knowing the inputs in the system, the expected output, and real results based on inputs from the program (Utomo et al., 2018). User Acceptance Testing (UAT) is a test of the system that has been developed with the tester where a document is produced that can be used as evidence that the user accepts the development and considers the user's needs have been met by the test results. (Mutiara, Achmad Benny, Muslim, A, Oswari, 2014).
For iOS-based app testing, it's required to have an iPhone and Mac OS device because the app can only run on iOS devices after the app is built using mac OS. Black box testing and User Acceptance Testing were not performed on iOS-based phones. The total amount of iPhone users in the Pharmaceutical and Food Analysis Department of Poltekkes Kemenkes Jakarta II was very limited (< 20 people) so usability testing cannot be done on iOS-based devices.

CONCLUSION
Interactive AR mobile learning application for iOS-based smartphones could be designed for college students in the Pharmaceutical and Food Analysis Department, especially in handling distance learning of phytochemical screening in the laboratory.