Development of Hybrid Mobile Application —EEE 27 Li Jiaqi Raffles Institution Koh Rei Min Ashley Victoria Junior College Prof. Perry Ping Shum Nanyang Technological University
Introduction
What are hybrid mobile applications? Hybrid mobile applications Native mobile applications 1. Not exclusive to any operating server. 1. Built to work on a specific mobile 2. Built with a combination of web operating system with the necessary tools technologies like Hypertext Markup for developers to use to create an app. Language (HTML), Cascading Style E.g. Apple IOS app has to be written in Sheets (CSS), and JavaScript as well as Xcode using Swift or Objective C languages native applications. and it only works on Apple products 3. Utilises a WebView of a mobile platform enabling access to the device’s capabilities and facilities such as the accelerometer, camera, contacts, and more.
Advantages of hybrid mobile applications 1. For developers, the origination cost is of hybrid mobile apps is lower and initial speed is faster.
What is Augmented Reality(AR)?
Augmented reality (AR) is a technology that superimposes a computer-generated image on a user's view of the real world, thus providing a composite view. Less than 25% of the AR world is consisted of digital images.
Applications of AR —Education Blippbuilder — AR learning platform
Applications of AR — Entertainment Movie scenes showing AR technology in the future Popular AR game - Pokemon Go
Applications of AR — Medication Use AR in surgery
Therefore, ... while a considerable amount of resources and effort has been put into research of augmented reality and its application in various domains, such as aforementioned entertainment , education and medication ,
the shopping environment has yet to be well explored. Thus this gap in the current market spurred us to explore in this direction.
Overview of This research will explore the potential use and development of MAR in a shopping environment by developing a hybrid our research AR shopping assistant mobile application — ARShop .
Aims and Objectives
“ARShop” mobile application Function 1 : providing additional Function 2: enabling sellers to put various computer-generated perceptual information that is animated tags on commodities that can difficult to be presented on normal 2D packaging, attract shoppers attention when they scan such as videos, audios, to shoppers. through shelves. Built with Placenote SDK Built with Unity-Arkit-Plugin
Methodology
DEVELOPMENT SOFTWARE USED UNITY: ARKIT 2.0: PLACENOTE: - Cross-platform game engine - Allows for quickly build cloud-based AR - Can be used to create both 3D and 2D apps that permanently save AR content - Combines device motion tracking, games as well as simulations for its in physical locations. camera scene capture, advanced many platforms. - Lets users scan any space and turn it scene processing, and display - easily accessible into a smart canvas for positioning AR conveniences to simplify the task of - Most widely used AR and VR objects. building an AR experience. development platform - Integrates with ARKit on iOS devices - Offers full 2D image tracking - Has a highly optimized rendering pipeline and rapid iteration capabilities.
FUNCTION 1 — “Scanning” PROVIDING ADDITIONAL PERCEPTUAL INFORMATION
BUILDING PROCESS Import reference image (Covers of CDs or Games) This will be the image target. Duplicate plane of image target. Insert trailer/animation onto the duplicated plane. This will be called upon when the image target is captured on camera Create new scene in For 3D animation, build Unity animations in Unity with animation player function
End Result Video of trailer of the album 3D animation demonstrating the gaming process 3D animation of how the board game is played will show up when the camera in the app recognises the image target (board game packaging) Trailers of songs and movies will be played when the camera in the app recognises the image target.
FUNCTION 2 — “Trial” 1) ALLOW SELLERS TO SCAN SHELVES AND ADD TAGS 2) ALLOWS CUSTOMERS TO LOAD MAPS WITH TAGS ADDED TO COMMODITIES
INTRODUCTION TO PLACENOTE Placenote allows users to scan any space and turn it into a smart canvas for positioning AR objects. Shelves within a certain space space in supermarkets or stores Animated tags to attract AR objects consumers’ attention
DEVELOPMENT OF INTERFACE FOR SELLERS
1) Sellers start a new map Start a new map button for sellers Feature points
FEATURE POINTS ● Embedded function of Placenote SDK. ● Created by scanning through the space. ● Allow the space to be relocated when the map is reloaded by API key.
2) Adding tags to commodities When a hit test was activated on the screen, a new tag would be created at the nearest plane detected and a new info list of this tag would also be created. Position Rotation type
● 5 types of tags sellers can choose to put on commodities. ● Users can click on the bottom at the button of the screen to switch type of tags added.
TAGS E.g. “Recommend” Tag E.g. “Discount” Tag
3) Save Map with Name ● Built with embedded function of Placenote SDK. ● Sellers can assign a name for the map to help consumers find the correct map when they reload it.
End Result —Sellers
DEVELOPMENT OF INTERFACE FOR CONSUMERS
ENABLING CUSTOMERS TO VIEW MAPS ➔ We made reference to the scripts in the example. These included loading a map list from API key online and loading the chosen map by On Load Map Clicked function.
End Result Animated tags attached to board games with sparkles emerging from them to attract consumers’ attention
INTEGRATING THE 2 FUNCTIONS ➔ We created a Home page scene in Unity which appears first when consumers launch the app Switch between functions Function 1 Function 2 Subsequently, we built this Unity project in Xcode and Android Studio, enabling the app to be installed onto the selected iOS and Android devices.
End Result —Consumers
1) AR hybrid app as a means to help consumers make a better decision Results 2) AR hybrid app as a means to achieve more enjoyable shopping experience
1) App facilitates information transfer and provides customers with an interesting shopping experience Conclusion 2) Other potential developments: AR trying on of clothes
REFERENCES Wei Zhu (2006, November). Recent advances in augmented reality. Retrieved on December 25, 2018, from https://apps.dtic.mil/dtic/tr/fulltext/u2/a606245.pdf Bristowe, J. (2015, March 2519). What is a Hybrid Mobile App?. Retrieved September 1, 2018, from https://developer.telerik.com/featured/what-is-a-hybrid-mobile-app/ Vector Icons by Matthew Skiles Connolly, P., Chambers, C., Eagleson, E., Matthews, D., & Rogers, T. (2010, October). Augmented reality effectiveness in advertising. In proc. 65th Midyear Conference on Engineering Design Graphics Division of ASEE.
Acknowledgement We would like to take this opportunity to thank our mentor, Professor Shum Ping, for his constant support throughout the whole of this project. We would also like to thank our teacher-in-charge Dr. Lena Lui Wai Yi and Mr Chan Soo Heong Julius for their guidance and support.
Thank You Any questions?
Recommend
More recommend
