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.
• The second and last comment that we have is an overall observation about the overall guideline page for the “mobile-frontend how to”. The guideline is divided into many sections, and each one of them consist of the resources that needs to be used + links to the website documentation of those resources. While the original website guidelines of those resources are sufficient, they still might be a little confusing, not very clear sometimes or hard to go through, especially for indivials with not alot of experience. We personally also found some difficulties following them, so we believe that it would have been nicer to have a step by step little guide alongside the resources’s documentation links instead of trying to figure out on our own how to set our tools.

3. Our experience with the web frontend guidelines

→ 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:

1. 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

2. 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.

3. 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

1. [Minor Issue] It should be mentioned that the linked adobe software has a free trial for students, but is otherwise a paid service (see below image)

2. 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

1. In the guideline “Option 1: Balsamiq (https://balsamiq.com)”

• [Issue] This link (in the wiki), is not clickable. It should be added as am embedded link

2. In the guideline “Option 2: Figma (https://figma.com)”

• [Issue] This link (in the wiki), is not clickable. It should be added as am embedded link

1. [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

1. [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

2. 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?
• [Minor Issue] Information on linking the git repository to VS Code at this section would be helpful
  • Information was added later on, however it would have been useful in the initial talk about configuring the wiki
• More information on git instructions is available here, but as mentioned, I feel like they are added too late (as in, I saw them after I felt I needed to know this info, and thus it could make some of it irrelevant)

3. [Critical Issue] The git desktop page does not correspond to the instructions (see below image)

4. In the section

• “ 5. Create beaches for each new feature
• 6. Regularly commit your changes”
  • [Minor Issue] Reasoning behind these steps and more information on how to complete them should be added

5. In the section “In the git link “Install homebrew if you don't already have it, then:”

• [Minor Issue]It might be nice to have a mention of additional softwares you need to download in the wiki for different OS (such as home-brew
• Additionally, as mentioned previously, it would be nice should say that react creates a folder, and this is what you should open and work with in VS Code
  • Assume the user has never used react before

6. [Minor Issue - Formatting] The - Import and -Open should not be in the code block (see below image)

7. [Critical Issue] There is no download link for git desktop, only regular git. Yet git desktop is referenced for usage, and the steps in the guidelines are for git desktop. Therefore they are currently incorrect, assuming the individual uses the links provided. The link https://desktop.github.com/ should be used instead

1. In the section ”https://www.netlify.com)“

• [Issue] This link (in the wiki), is not clickable. It should be added as am embedded link

2. In the section ”Register using your email and use password generator because Netlify has high requirements for password strength“

• If it’s suggested to use a password generator, it might be good to also have a suggestion of a reliable password generator that can be used, in case the individuals are not familiar with one

3. In the section ”6) Go to the / /Sites/ / tab and opt for manual deployment“

• Minor Issue - Formatting] / /Sites/ / instead of Sites

4. In the section ”10) Go to the / /Site configuration/ /n tab“

• [Minor Issue - Formatting] / /Site configuration/ /n instead of Site configuration

5. [Critical Issue] In the Deployment section, it was overlooked that the user needs to run ‘npm run build’ prior to deploying on netlify, or it will not work

6. [Critical Issue] In the deployment section, it is stated to add the entire project folder to netlify. This is incorrect, and will not work. Only the build folder should be added

7. In the section ”For further deployment and development go to / /Deploys/ / tab“

• [Minor Issue - Formatting] / /Deploys/ / tab instead of Deploys tab

1. In the section ”React: [React Documentation](https:/ /reactjs.org/docs/getting-started.html“

• [Critical Issue] One of the resources linked is outdated, and should be updated or removed

→ 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 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.

This 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'. We still managed to use it at the end. We found that it is very comprehensive for monitoring the performance of an app. It has tools for memory, CPU, UI, network and many more. The only downside is that it is a bit overwhelming. Adding a step by step tutorial explaining how it works will be useful to the students.

For this one, 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

- There is no link to the software provided

+ We were still able to find the website and use it to measure how green our website is. It is a very nice website that gives alot of useful info such as the performance impact, the climate impact, the page weight ect. The results we came out with are the following:

- There is no link to the software provided

+ We were still able to find the website and use it to measure how green our website is. The results we got are the following:

-There is no link to the software provided

- When queried in google, the correct globemallow is not one of the first sites to appear. This is not user friendly, and can lead users to incorrect, and potentially harmful sites

- It appears this is not a good software to use via Mac. It works with chrome/ edge and prompts users to download chrome. It is not clear how it could be used with Safari, if it can be used at all. Therefore this service may not be helpful for people using a Mac.

+ After downloading the extension on a chrome browser, we were able to use it easily to get our green measures:

+ The tool was easy and straightforward. Our results were the following:

- There is no link to the information page (or further details page) software provided

- When queried in google, any page with correct information is near impossible to find via searching “lighthouse”, as this is a common word. Further, even when specifying “lighthouse sustainability” or “lighthouse website measurement”, for example, it still does not appear. Due to this error in the guidelines, this software is very difficult to find and can lead users to incorrect, and potentially harmful sites

- We were also not able to find this tool on any other browser apart from GoogleChrome

- We discovered that you can implement lighthouse directy to the production build on Netlify. Netlify was the recommended software by the web development guidelines team. Therefore it would have made more sense to recommend users to implement it this way, rather than the browser version that is not compatible with many broswers, and thus cannot be utilized by many users.

- Even after figuring out how to use the tool, our results were looking weird and not really understandable. We weren't able to interpret them at all. It would have been nice to have some guidelines explaining how the tool works exactly

-Should mention the in-depth reporting version is NOT free

+This tool was quite useful, and helped show the various impacts of the application, as well as how specific compartments of the application impact the sustainability report (such as details on specific inmages)

3. Our experience using the backend green measurement tools

Formatting issue, description only uses half the page

-No information on page, just a direct link

-No information on page, just a direct link

- Formatting error [TEMP]