Tiana Wang

My Senior Independent Project is creating an App for the St. Stephen's learning department to pair tutors with tutees. The goal is to make school peer tutoring programs more accessible and sustainable. Before the Senior independent project began, I met with Ms. Green, Ms. Kennedy, and Ms. Kim to understand current challenges, and needs learned from past experiences. I’ve also met with Ms. Wortham to get advice on the technical side (she is my main technical supporter!). We’ve all decided that ideally the app will include: functions to help pair students, allow students to input offs and choose time-slots and locations, a way to cancel meetings, have qualification control with administrators, include a feedback system and push reminders (add to calendar) for their upcoming sessions. The very end goal would be to make the peer to peer tutoring easy for someone to take on and manage after I graduate so that it is sustainable. 

“Boolean operators,” one of the blocks whose function I just learned:

I then started watching other Youtuber’s tutorial videos about Thunkable, which provided more detailed and complex screens’ tutorials. Thus, I found these to be more applicable to the app I’m trying to make. Furthermore, in addition to the one Thunkable provides, these other Youtuber’s tutorial videos provide more videos that can lead me to create a function of a app (and also sample apps) which allow me to see the results, and how different functions connect together and work. I found this very useful to help me visualize the complicated concepts. 

Example of other Youtubers’ Thunkable tutorial videos:

I also found and explored a google website with slides that teaches people how to use Thunkable. Since it is separated by units and topics such as “Intro to Conditionals,” and “Intro to Procedures,” I found it very easy to navigate, especially as a refresher to all the videos. I’m also looking forward to exploring this website (specifically its unit 5) more in depth as I work on database next week. Ultimately, with me learning many new skills this week, I was able to successfully build the login and sign up screens for my app, which was a significant first step into the coding world (Hooray!). 

Pictures of some of the drag and drop coding & designs I did specifically for my app this week:

Week 2

This week I was mainly focused on getting my simple database work done, which proved to be so much harder than I thought. As I got into the real part of drag and drop coding (where I have to utilize a lot of blocks with different functions), I experienced a bigger learning curve than I anticipated, however, I was able to overcome this by watching several youtube video resources that taught about Firebase database on Thunkable, and I have screenshotted below some of the ones I found most useful below:

I also found Thunkable Docs to be very useful this week in addition to the forum I mentioned in my last week's post, and some of the most useful ones I found for learning database work were: 

1. https://docs.thunkable.com/variables#cloud-variables 

2. https://docs.thunkable.com/variables#connecting-a-firebase-realtime-db-to-your-app

3. https://docs.thunkable.com/v/snap-to-place/realtime-db 

I started my database work with connecting or synchronizing my app with the Firebase database. Then I worked on building the coding blocks that would enable my app to store and retrieve login information like username and password from the Firebase database by following the video tutorials listed above. If this was working correctly, I would be able to sign up an account (let that information store into the database) and be able to sign in into the app through retrieving the information the database stored when I signed up. Though this initially came as a hard task for me, storing and retrieving usernames and passwords from the database later, turned out to be the easier part. There are many resources online for me to learn this. The real obstacle for this week was being able store the type of account (i.e. admin, tutor, tutee) and the birthday (or user's age) into Firebase database, because there are less resources for reference on how to correctly do this. This really required me to be acquainted with drag and drop coding in order to apply the skills to write the codes entirely by myself without online references. However, this caused me to definitely have a firmer grasp on many different new things regarding databases.  Below I have attached pictures showing all the new coding I did the past week and this week, and how the database currently looks after my testings:

I also made some changes to my login page's design after receiving feedback from Ms. Wortham. I simplified the start screen to only include two options (sign up or sign in) rather than the four options I had last week (sign up, admin sign in, tutor sign in, and tutee sign in). Though the design is simple, I will make sure later on that the functions will not be (i.e, different type of account will still lead to different screens) through storing and retrieving informations from my database. Another thing that I newly added is asking for the user's birthday when they sign up, since this app could be used by middle schoolers in the future and it needs to follow The Children's Online Privacy Protection Act. This Act states that we could not use or disclose any personal information from and about children under the age of 13 on the Internet. 

Overall, I am very happy with the progress I made this week, considering how complicated database work can be in app development and just how much more drag and drop hands on coding that I did this week!

Week 3

I started this week working with Ms. Wortham trying to retrieve the date of birth (DOB) information, and this is when we discovered that the database was not working properly according to the code. To solve this problem, I first thought that I might have mistakenly altered the code when I was adding new code to retrieve the DOB information, so I checked my code over and over again and watched videos online to make sure that all my code is written correctly. Realizing that my code is written correctly and functional, I then suspected that there was something wrong with Firebase, the database, so I created multiple databases and projects to test the databases out to ensure that I did not alter the code of one of the databases causing it to be dysfunctional. With multiple tests, I was able to finally trace down the reason behind this problem: there were probably configuration issues on the Firebase side as it worked during one of the testings. I then did a few more testing and they all worked, so my suspicion that Firebase was the problem was correct.

Next, I began to reframe my final goal to make it more realistic through redesigning the app interface. I also rethought through the whole app (how it looks, user experience, and functions) and drew out the new design of the app on a paper wireframe. I then met again with Ms. Wortham to give updates, discuss the structure of the app, and make sure that we’re meeting our goals. I was also able to meet with the learning department this week as well, to give them updates on the app, walk them through what we currently believe the app will do, and ask about their opinions on whether I am heading in the correct direction to be useful for future students.

Knowing that I am heading in that direction, I continued to work on retrieving and testing the database, which is when I discovered that even though the data is now storing the user's email, it is still not working correctly. It is overwriting the user’s unique data (account type and birthday). With this problem, I started watching and reading an abundant number of tutorials and directions on YouTube, Thunkable Docs, and Thunkable community forum to figure out the reason behind why the saved data of user's account type and DOB has been overwritten when new users' data of account type and date of birth comes in.  I finally came to the realization that the key is that Unique User ID is the most important part of Firebase for storing information other than username. The Unique User ID would only generate after you signed up and signed in. With this knowledge, I re-coded the sign up and sign in page in accordance with the correct way that allows Firebase to save users' unique data (other than username, email) without overwriting other users' input. I also created and coded a new page called user profile which will enable Firebase to correctly store the user’s data like account type and date of birth. I further enhanced the functionality of the user profile page through watching a lot of youtube tutorials (ex. like this one) for creating a drop-down list for the account type, as I realized that my previous way of storing the account type (letting the user input their account type through text themselves) is not as good as having a drop-down list. 

Firebase not storing unique user data:

Correct way of Firebase saving unique user data:

New and improved codes:

Overall, this week I was able to discover many limitations of the Firebase database and was able to solve these problems, ensuring that I have a better knowledge of how to successfully save and retrieve data correctly. As the database is one of the single most important components of my app, I was really proud of myself that I was able to finally have an effectual database, which will ensure that I will be successful later on. Now that I have a clearer and more complete understanding of how Firebase database truly work, I also know how and what to proceed with for next week and the necessary steps. This will also serve as good practice for me as I definitely need to debug and troubleshoot the app more as it gets completed, and for when the user starts to try it and give feedback.

Advice to future seniors: 

I'm glad that I got the opportunity to participate in SIP for my senior year. My best advice to future seniors would be that to be successful in completing any project, start planning early and really take the time to write a clear objective and make realistic plans and goals to help accomplish that.

Week 4

I started this week by creating and coding a user profile update page for the app, which gave me a much better understanding of how to read and write to the Firebase database. This user profile update page will allow the user to retrieve their existing data through the user profile page, and be able to modify, save, and store the newly updated data back to the Firebase database. 

Code for the User Profile Update page:

Then I went on to code the tutee home page. This page will open when the app correctly identifies whether or not a return user is a tutee by reading the data inputted from the user profile page when they login again. The tutee home page will ask the user (tutee) to input additional data like subject, grade, name and available time, which will be saved to later be used by the tutor to match tutee with the tutor together. It will also save the information the tutee entered into the database and retrieve it for the tutee to see when they login again. The tutee will be able to see the information they last entered when they re-enters the app , it makes it easier for the user to use this app,  when they want to find another tutor (for another subject or date and time), they will only need to re-enter information that they want to change with everything else staying the same already populated for them. The hardest and one of the most time consuming part for coding this page was making a clean and useful drop-down list for the subjects. The drop down options frequently conflicted with the input function below for all the other information (the drop down options are either being hidden or hides other input functions). 

Code for the tutee home page:

What tutee home page looks like:

See the information they last entered when they login again → able to change their info (ex. use the drop-down list) → info changed & updated

Next, over the weekend, I first redesigned the sign up screen to include last name and first name as I realized that I need this data for all users, not just tutees. I then went on to research how I can retrieve the whole Firebase database’s information for making the tutor home page, and followed with lots of testing using different methods to do that. This was an extremely difficult part/lesson for me. I first researched about JSON structure, and how it is returned from the database, and also how list and text works with database. I decided to go with the strategy of first trying the different methods that I found out (not only JSON), so I started watching videos on how to display data in both text input and list viewer and spent more time understanding the difference between text input and list viewer. With many tests and debugs, I was finally able to get all the information in the Firebase database retrieved correctly. However, as my knowledge increased, I decided to not retrieve the data using JSON and text input as it is way too time consuming, and, more importantly, the user can actually delete and change the text input data as they want. Something that would not be very useful for my app. As I continue to code the tutor page, I encountered another bump as I had to do lots of debugging to get the list viewer to display data since it is different in that it has to take a list, not a text. I then proceeded to work on formatting and aligning the populated information (Subject, Name, Grade, and available time) part of the tutor home page to make sure that it is neat and showed in columns, not disordered and unaligned. Through this work, I learned how to create a function and how to call it in my code, and I learned how the testing process for coding can be really time consuming even for one small thing (ex. I had to test multiple numbers when I was working on spacing the populated information).

Current code for the tutor home page:

What tutor home page currently looks like:

Another thing I did this week was I went ahead to collect user feedback to get a better understanding of whether what I am doing is heading towards the right direction and what people need or want.

Overall, I truly believe that I accomplished a lot during this week. I basically finished the coding aspect of all three pages (though still improvements coming for the UI aspect): the user profile update page, the tutee home page and the tutor home page. With successful completion of the code for at least two of the main pages (tutee and tutor home page) for this app that holds the most important functions of all the pages, I was truly able to see, visualize, and have people try out my app. This successful week also enables me to envision the end product of this app and boost my confidence.