Assignment Submission Tool

Our proposal for the course management theme of the hackathon is to focus on the implementation of assignment submission feature. Since we should provide both a mobile application and a website, the way we decide to carry our ideas out is the following:

• Mobile Application: The tool displays the professor’s account. The professor has access to the courses he is teaching. When he clicks on one of the courses, he gets a list of the assignments available for that course. He can navigate to the assignment page and have an overall number of submissions. He can see the amount of students who submitted their assignments on time and the ones who submitted it after the deadline. After opening the assignment page of a student, the professor can give a grade to that student and leave a comment on the work submitted.
• Website: The site display’s the students account. The student is prompted with all the courses he is registered in. After navigating to the page of a course, the student can see the list of assignments due and the time limit for those submissions. The student can then go to the assignment’s page and submit his assignment as a PDF file. If the student tries to upload another file format, he gets an error message telling him that the submission engine only supports files of a PDF format.

→ The first step in making our tool was naturally brainstorming. The team members spent a little bit of time discussing ideas and sharing opinions to decide on what exactly we were going to implement. This led us to agree on one topic that everyone liked and to write down on a paper what kind of attributes our idea should include to make it stand.

→ After making a primary rough draft of what we are expecting to produce, we wanted to tackle the sustainability aspect of our idea and link it to a couple of SDGs that it targets.

• SDG 4: Quality Education

Target 4.3: By providing a robust digital platform for assignment management, the system supports inclusive and equitable quality education.

Target 4.4: The platform enhances the use of information and communications technology (ICT) in education, equipping students with relevant digital skills.

• SDG 9: Industry, Innovation, and Infrastructure

Target 9.1: Developing a mobile application and website supports resilient infrastructure and promotes sustainable industrialization.

Target 9.5: The project fosters innovation in the educational technology sector.

• SDG 12: Responsible Consumption and Production

Target 12.5: By reducing paper consumption through digital submissions, the system contributes to substantially reducing waste generation.

• SDG 13: Climate Action

Target 13.3: By reducing the carbon footprint associated with paper production and transportation, the system supports efforts to combat climate change.

1. Our experience with the backend guidelines

→ Now that we were set on a plan, we had to delve into the different guidelines provided to be able to create our project. The first thing we wanted to do is to set up a Google Cloud account since this will be the baseline to host our platform. While going through the guidelines, we made sure to incorporate some slight modifications in the phrasing of some instructions to provide better clarity to the reader. In addition to that, we also noticed that some of the steps we had written down before were not relevant anymore because of updates in the Google Cloud Platform. We made sure to modify those guidelines accordingly to make everything to the utmost clear.

The modifications brought can be seen through the following:

• Added a new section called “sign in and set up billing” with additional steps separated from the “create a new project” section

• Added an additional step +screenshot image for better understanding where to find the button to create a new project on Google Cloud (Step number 2)
• Added an additional step + screenshot image for better understanding where to find the new created project and navigate to it’s page (Step number 5)
• Removed a single step of linking the account to a billing account and added more detailed instructions in the separately created above section

• Changed the wording of the first step for better understanding
• Added a note to step 1 to provide different methods to try if the page fails to load
• Bolded a name in step 3 to avoid confusion in the selection of the right product
• Added clarification in step 4

• Brought more clarification to the phrasing of step 1

• Added clarification to the windows setup instructions

• Modified some instructions base on the updates and changes in the way the platform handles commands now

• Added step number 4 stating the use of a necessary command before some other ones

• Added a guideline to specify where should the next part of code be inputed

• some extra steps were missing which would induce errors and prevent the app from deploying. The issue has been fixed by adding more instructions

2. Our experience with the mobile frontend guidelines

→ Now that we have our backend set and working perfectlly, we decided to tackle the mobile frontend section and start working on the creation of our phone application. WGoing through the guidelines left us with some comments. Not all the remarks are bad, some of them being positive observations and others being suggestions.

• The first thing that we noticed after the introduction is a link to a youtube Playlist for a Flutter Beginner Course. The link seems helpful and well detailed, but it would be nice to mention that the technologies quickly update; and the videos being 4 years old, some features or functionalities might have became different.

3. Our experience with the web frontend guidelines

Ideation Phase

→ Our next step was to get familiar with the tools that we needed to use for designing our website. We were nicely surprised by how well formated the guidelines were and how easy it was to follow them. We still took notes of some suggestions that we thought we could provide to make the guidelines even more flawless. Those are the notes we came out with:

In the guideline: “Manage the codebase using GitHub for the purpose of collaborative development, we recommend GitHub Desktop for beginners”

• [Minor Issue] It would be nice to have a link here on github usage
  • There is a section on using github projects and version control further down in the page
  • It would be beneficial to add this information/ link to the portion where GitHub is initially mentioned, or mention there are additional resources on GitHub usage in x section. Otherwise students may waste time finding resources that are lacking when GitHub was first mentioned, not knowing there are additional resources provided elsewhere in the guide

In the guideline “VScode is the recommended IDE because of its ease of use and global acceptance”

• [Minor Issue] A link to download VS Code should be added
• [Minor Issue] A link on VS Code usage should be added at this section
  • The guidelines should assume the user is not familiar with these technologies, even if they are basic. It would be helpful to include resources when they are first mentioned, or mention where in the guidelines more information can be found at.

In the guideline “Use MaterialUI for designing your Web Application and for making it accessible to variety of users with possible different impairments (visual impairment) and different use cases (PC, laptop, smart phones of different sizes, tablets) MaterialUI's already ready components increase the development speed and lead to a cleaner, more understandable code”

• [Minor Issue] An information link on how to use MaterialUI should be included

For the Planning section:

• [Minor Issue] It should be mentioned that the linked adobe software has a free trial for students, but is otherwise a paid service

In the guideline “Use Agile Methodology: Break your project into small, manageable tasks (sprints). Regularly review progress and adjust plans as needed.”

• [Minor Issue] It should be assumed users are not familiar with agile. A more in depth description on what agile methodology is should be added. Examples, or links on using agile would be helpful

*Designing Solution Phase In the section “Option 1: Balsamiq (https://balsamiq.com)” * [Issue] This link (in the wiki), is not clickable. It should be added as am embedded link In the section “Option 2: Figma (https://figma.com)” * [Issue] This link (in the wiki), is not clickable. It should be added as am embedded link Setting up Development Environment Phase [Minor Issue] More information on GitHub is added here. As mentioned previously, this would have been helpful where git was first mentioned in these guidelines Implementing Planning Phase [Minor Issue] It would be nice to have more information on how to reach the coding step. It jumps directly into it * Such as opening the folder created by React to see the files In the section about “creating a new repository” * [Minor Issue] Should have steps on how to navigate to this section of git (assuming the individual has never used it) * [Issue] The wiki mentioned some basic steps like adding a name and description for the git repo. If small details like that are added, other information on the mandatory settings for the git should also be added. It should either not discuss the steps, or discuss them all (as randomly skipping some is confusing) * Example, does it matter if the git is private or public? Should the user add a git ignore? ————————————————————————————————————————————— =====Measuring the footprint of the solution===== → While we were getting set with the development part, a very important phase that needed to be incorporated is the measurement of how green our tool is. In order to do that, we were welcomed with another set of tools and guidelines to help us do our assessment. Our experience with the varied tools were the following: 1. Our experience using the mobile green measurement tools * The Android Studio Profiler tool was introduced to help you measure your real-time data on CPU, memory, network, and battery usage of your mobile application. However, the tool only works for Android devices and not on IOS ones; which are usually the most developed for applications in Flutter. * Flutter Dev Tools was still introduced as another option that works for both operating systems. However, there were no clear instructions on how to launch the tool and make it work apart from the sentence 'DevTools can be launched from the command line' * When it comes to Green Spector, I would say that we don't understand at all how to use this platform. First, we were a little bit confused while googling the name and were not sure if we landed on the right website, so it would have been better to have a link for quick and easy access. Nevertheless, the website has many info pages and no clarity on how to use the tool. Even the steps provided within the guidelines did not match any page on the website, or at least we were not able to find where we could carry out those steps. So in our opinion, we believe that this tool could be introduced better if wanting to be used 2. Our experience using the web green measurement tools 3. Our experience using the backend green measurement tools**