Therefore, it is important to identify children's needs for specific user interface designs, functions, and content, and design a child-centered app that aims to help them face the challenges of the pandemic. This thesis will explore the entire development process of the Love In A Big World app, a content-driven mental health mentor app for children. Due to COVID-19, the LBW team decided to create an online platform for children to receive personalized mental health support.
This platform aims to provide affordable, scalable and appropriate mental health services to middle children (8-14), their families and their educators during and after the pandemic. Since web applications are rarely designed to be used mainly by children, and few of them are for mental health care, we need special UI designs to engage middle childhood users. Secondly, it is difficult to match children's queries with our videos because most of them are not able to finish their problems in few words.
LBW App will not only provide a platform for children to enjoy recommended videos that help solve personal problems during and post the pandemic, but also a virtual mental health mentor to find answers to life's concerns.
Functional Requirements
Unregistered Users’ Use Case Analysis
- Registration
- Video Search
- Select Videos to watch
- Filter Video List by Tag
- Chatbot
The user requests his/her registration in the system by providing email, first name, last name and password. The search results are obtained by calculating the similarity of the entries and comparing it with those of the video transcripts in our database through our machine learning database. Requirements: Allow users to get a list of recommended videos and users can view it in the list or on its detail page.
The user clicks on the video's comments bar on the screen and opens the video's detail screen. The user clicks the play button to play or clicks the full screen mode button at the bottom to play in full screen. The user selects one or more tags and the filtered results will be displayed in a list.
Requirements: Enable users to ask questions about video content and find answers or advice about them.
Registered Users’ Use Case Analysis
- Write Journals
- Comment on videos
- Manage Profile
Administrators’ Use Case Analysis
- Check Chat Records
Non-functional Requirements
Security
Performance
Usability
Maintainability
Scalability
Client Side
Client-Side Scripting
Client-Side Framework
Programmers can design a simple view for each state in an application and React can efficiently update and render the components according to different states. Furthermore, React is component based, so to make complex UIs, it is essential to build encapsulated components that manage states and then compile them all. In this process, rich data can be passed through the application and the state remains out of the DOM.
To better demonstrate the features of our app to stakeholders, the Expo framework is also applied to tweak our React Native app to help develop, build, deploy, and iterate quickly on Android and iOS. It is built around React Native and native platforms and shares the same JavaScript/TypeScript codebase with these platforms, but enables front-end displays by scanning a QR code with the Expo app.
Client-Side Database
We value our customers' privacy, so a database has been set up on the customer side to store private and sensitive user data. This database only allows access to the local user of the device, which is ideal for protecting children's data. After weighing their strengths and weaknesses, we decided to use SQLite, which is ideal for mobile apps.
Firstly, it is possible to integrate it within the application, so users do not have to wait for all the data to be downloaded to enjoy the mobile app. Secondly, for developers it is an ACID compliant database, which implements almost all SQL standards, which means it is easy to interact with this database using SQL commands. Furthermore, SQLite has a file-based library architecture, making it possible to process all data types efficiently.[8] Finally and most importantly, our frontend framework – Expo has an expo-sqlite plugin to manage the data within the mobile application for offline persistence.
Server Side
Server-Side Scripting
Server-Side Framework
Server-Side Database
System architecture refers to the structural design of systems and consists of the development of system components.
System Architecture
React Native Architecture
Database Design
File Structure
Home.js Home.js contains the home component that determines what My Home screen looks like. This file also creates a new Stack container to store the . Mission.js Mission.js controls the display of the My Mission screen to which the Add a New Mission screen is associated.
Life.js Life.js consists not only of the styling, structure and layout of My Life screen, but to enable smart search, asynchronous database. CustomHeader.js This file is a global file that displays the custom layout and styles of the header. FloatingButton.js FloatingButton.js contains the global view and animation of the floating toolbox on each screen.
GPTChatBot.js This file includes the appearance of the chatbot and uses CallGPT.js to send and listen to API calls.
APIs and Libraries
Hugging Face Models
GPT-3
App Structure Implementation
- The Header
- Navigation Bar
- Side Bar
- Main Contents
However, in our case we are building a number of features and both navigators can tell new users what screen they are on and what they can do here. To create a custom bottom tab navigator and custom header, we set up a separate stack and tab navigator for each screen, and include each screen's main content and header in its tab screen so that the header matches the bottom tab. This animation makes the opening look smoother and users can know that the displayed sidebar is in focus when they open the toolbox.
Users can close the sidebar by clicking outside it or clicking the close icon. We add a sidebar instead of an app bar in the header because the header design is already rich in color and content. Compared to an app bar, a sidebar is excellent for placing commonly used tools, and the visual design is also great for attracting users.
This sidebar's stack navigator is created as part of each screen component, meaning that the sidebar on each screen is independent. Each screen's implementations and functions will be discussed in the following sections.
Main App Implementation
Clicking this button will bring up a hover that contains a sidebar that navigates to Journal, Question, and Score screens. There are mainly four categories of them: My House, My Life, My Mission and My Gives. The video is a welcome video introducing our LBW project and how we help children within our app.
The comments list is placed in a vertical FlatList that displays comments on the team members' video. On the My Mission screen, there is a scrollable tab view implemented by the ScrollableTabView fragment. The user can scroll to go from level 1 to another, and can also use the tab in the bottom tab bar to select different levels.
As the tag bar indicates, the videos are divided into four different categories, Me, Family, Community, and Environment. You can filter them by clicking on one or more tags at the top of the screen. Below the bookmarks bar is a smart search bar that works differently than the normal search function.
When you click on a video's comment bar, it will navigate to the video's details screen. This screen displays the video, tips for this video, and a comment input field.
Implementation of Features
- Video List Display
- Smart Search
- Tag Filter
- Chatbot
- Language Filter
- Chatbot
Smart search is activated by simply entering questions or words in the search bar below the label view. When the user selects the icon in the sidebar, the chatbot screen opens. The chatbot will automatically greet the user, briefly state that it is not human, and direct users to ask questions.
The purpose of the chatbot is to provide some suggestions and tips on how to deal with problems that users have and how to cheer them up when they encounter something depressing. The chatbot can be divided into two main functional fragments: language filter and chatbot model. Since the target audience of the LBW app is middle children and the content generated by machine learning models can be threatening to them, it is important to add a language filter to our chatbot to avoid potentially harmful words.
Unlike assigning a toxicity grade, the GPT-3 content filter labels text at 3 levels - "0" for safe text, "1" for sensitive text, and "2" for toxic text. Most of our test data is labeled "1", and when we manually checked the content and tags, the finding is that even one word in a sentence related to the sensitive or protected topics mentioned above, it will be marked "1" for this. sentence. The output from the chatbot will be sent to the two language filters one at a time and then back to the front end.
Researching the conversational AIs on the current market, we find that GPT-2 and GPT-3 are ideal for the application. The purpose of training GPT-2 with this data is to improve the dialog context of the chatbot as well as give it a dedicated personality. For applications that require a lot of understanding of the content, Davinci can produce the best results.
When a setting asks you to assign it a personality, it will keep that personality and answer/ask questions in the person's shoes. In our case, it sends a message to the GPT-3 API and then the results will be added to the message states that will finally be displayed in the GiftChat widget. Future development should carefully consider the experiences of different levels of users.
The cross-platform compatibility of the application will be achieved soon when iOS structure files are added to the front-end.
