Microsoft University College London IXN Project Resourcium

by | Mar 31, 2021 | Technology | 0 comments

This article is contributed. See the original author and article here.

rescorucim.png


 


University College London project Resourcium


 


Guest blog by the IXN Resourcim team:

Hemil Shah – https://www.linkedin.com/in/hemil-shah-58747b161/
Louis De Wardt – https://www.linkedin.com/in/louis-d-a3a351124/


Pritika Shah – https://github.com/pritsspritss



Project Introduction



To start off with, our project is aimed at students which centralises resources for them on a single portal. It also includes data collection on student sentiments and areas that they need additional help on so that the teaching and learning teams as well as course reps can see what help can be provided to students. The aim of the application is to provide as much help as possible to the students via the surfacing of resources and a Question & Answer bot.



What was the problem?


The University College London academic team, emphasized how universities had no real way of viewing/measuring student engagement due to the current situation of COVID.  The University places a strong emphasis on using a SharePoint site as the means of data storage as well as a dashboard on the SharePoint site to view this data for analysis. The University wanted the student IXN project team, to find ways in which students can be supported in their education and beyond via the provisioning of resources. According to our Universities admin team, this was an issue that many universities faced, hence we had to make the system design as generic as possible and become a open sourced scaffolded project for any institution across the globe to reimplement and build upon.


 


How we team approached the challenge?


Firstly, it was necessary for the team to research the existing technologies they would use to develop this application. After researching into the frameworks to use, they then had to investigate SharePoint sites which was an entirely different concept to standard web development. The key questions then came forward as to how we automate this data to SharePoint and how do we present this data to the user. It was also necessary to find resources that universities would typically provide a student with for FREE, that would be surfaced by the application. Finally, they also needed to research how to setup deployment scripts that would create the Azure resources and other dependencies that our system would have. With regards to the research about the above and more, all this information can be found at: https://resourcium.github.io/research/


 


What technical solution did we build?


The solution consists of a React web application that is accessible to students via a student login. They have utilised live login which enables students to login to our application through their university m365 user account/details. This did not only make it easier for them as developers as it saved us time making the database for the login system, but students do not need to remember an extra set of passwords. A link on a blog post we wrote on how to make a live login can be found here: Implementing SSO with Microsoft Accounts (for Single Page Apps) – Microsoft Tech Community



The project time frame was approx. 8 weeks.


 


System architecture diagram that simplifies our entire system:


 

Rescourium.png



key technologies our system uses (this can also be seen on the architecture diagram):



  • React.js

  • HTML/CSS/JS

  • Azure services (functions, QnA bot and user settings)

  • Microsoft Graphs

  • Microsoft Forms

  • Microsoft SharePoint

  • Microsoft PowerApps

  • Microsoft Flows

  • PowerBI



Site map of our entire system:


 

AppMap.png



Application Demo


 


Microsoft technologies that we used:



  • The two-factor authentication (2FA) system: when users are registering their attendance for classes it is important that lecturers know that each student is registering themselves rather than someone else. To mitigate this concern, our client, wanted us to implement a two-factor authentication system. On the registration page if students are registering for the first time it will detect that they are yet to setup two-factor authentication. It will present a button that the user can press to generate a new secret. This method utilises Microsoft Azure functions to generate the secret and update the user’s information in Microsoft Cosmos DB. Once the secret has been generated the app will present the user with a QR code they can use to add our app to their favourite 2FA app. The user is asked to enter the current TOTP token to verify that they have setup the app correctly. If the verification token matches the Azure function will update the DB to mark the user as “verified”. From then on we are able to securely authenticate user’s registration of attendance to a lecture.

  • The Wellbeing section: This section consists of forms for students to fill out to describe their sentiments and things they would require help in. The additional help form is aimed at storing information about the student so resources can be provisioned to them via the teaching and learning team. The stress form is an anonymous form for students to describe their feelings and course blockers. Microsoft Flows automates this forms data to a centralised SharePoint site where the data is presented as a dashboard. To ensure data can be analysed to the best extent, the stress form data is sent to PowerBi using another Microsoft Flow, and reports generated within PowerBi is embedded within our SharePoint site.

  • The Student Help Page (LinkedIn Learning & MS Learn): This section aims to surface resources to students that they may not have known they have access to. We have made use of the Microsoft Learn API and LinkedIn Learning API to present results to students according to their input. Since the Microsoft Learn API cannot directly be filtered for resources, we must save a cached copy of the catalogue of results and manually filter that for the resources. This has given it an edge however, enabling almost instantaneous searching for results. The LinkedIn Learning API requires a client secret and key, which is only available for organisations and must be requested through them. In our case, we asked the UCL teaching and learning team for this access. If universities would like to deploy our application for their own system, they would need a subscription to LinkedIn Learning and would need to provide the client secret and token during deployment, this is normally a given as it falls under Microsoft.

  • The Student Help Page (QnA Bot): This subsection is aimed to allow students to ask questions that may not be solved by the other two APIS above. The QnA bot utilises a QnA maker resource from Azure and a knowledgebase. If you are interested in setting up a simple QnA Bot please visit this site: https://docs.microsoft.com/en-us/learn/modules/build-faq-chatbot-qna-maker-azure-bot-service/.


What we have done here is enabled the teaching and learning team to easily setup questions within this QnA Bot via a SharePoint list. All they would need to do is submit a question and answer to a SharePoint list and via a Microsoft Flow we would automate these QnA pairs to the knowledgebase of the bot. We also have setup another flow that allows these QnA pairs to be easily deleted too, they just need to delete the record from the SharePoint list.



  • The Settings Page (user customisations): For the user’s customisation to persist across multiple devices, instead of storing data locally, we use Azure Cosmos DB. Once the user authenticates their Microsoft account to our Settings endpoint, we retrieve their user ID and look up their settings in the database. The app then takes these settings to change how certain pages are rendered. Similarly, when the user goes to the Settings page it communicates the desired configuration to our Azure functions which update the database.

  • The deployment of our application: With regards to the SharePoint deployment, we have written a site script that would automatically deploy the lists to a SharePoint site, but not the front-end view, this would be a limitation of the site-script itself. To make deployment for the SharePoint side as easy as possible, we have written an extensive guide consisting of videos on how the flows can be setup to work for any environment. Due to the composability and extensive API provided by Azure we can use Terraform to describe our entire Azure cloud environment including everything from the App Registration to the function’s app deployment.


What have we learnt?


We have come a long way as a team as initially two out of three of our members had no web development experience. This means we had to learn HTML/CSS/JS/React technologies from scratch which was quite time consuming. We also had to tread new depths as we learnt new Microsoft tools and technologies like MS Flows and SharePoint, again which was an entirely new concept. Additionally, we learnt how deployment of azure resources works through scripting like Terraform or ARM Templates.


 


How can this project be taken forward?


Our project provides the basis of a new paradigm of university centric app platforms. It solves the problem of engagement on two fronts that lecturers and other teaching staff have encountered as they adapt to online and remote learning. The first is that it provides students with direct access to information that universities already had but struggled to publicise. Secondly it provides a whole new means of understanding engagement with lectures. While what we achieved will inevitably prove useful with teaching, the current version of our app is only the first step along this path.


 



  • Due to the time constraints, we were unable to make truly native mobile apps while also proving a version accessible from the web. Currently we have a responsive website that works well on both desktop and mobile devices, but it is currently not perfect on either. Future work would make truly independent versions optimised for mobile and desktop individually.

  • There needs to be a way for admins to help students if they lose access to their second factor devices. Currently it is a manual process to reset them.

  • We could more deeply integrate with a student’s calendar to make it more clear which events they are registering for and even provide lecturers with live dashboards of their student engagement.

  • In future another team could implement sentiment analysis on the forms that our app directs students to which would help teaching staff understand what students need help with.


Resources/GitHub Repo


If you are interested in all the flows setup in our application as well as the deployment, please check out the following link which contains video guides on these flows and the deployment of the flows themselves as well as the SharePoint: site: https://github.com/hemilshah17/team29webappflows


 


The code for how we implemented the above system and technologies is available in our GitHub repository:


https://github.com/hemilshah17/team29webapp

Brought to you by Dr. Ware, Microsoft Office 365 Silver Partner, Charleston SC.

Submit a Comment