meta data for this page
  •  

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
ixc2024:team_3:start [2024/05/28 10:21] – hibaaixc2024:team_3:start [2024/05/28 13:02] (current) – [Measuring the footprint of the solution] jacobwhite
Line 105: Line 105:
  
   * 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 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. 
  
  
Line 110: Line 111:
  
 -> 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: -> 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 Ideation Phase== 
-In the guideline: “//Manage the codebase using GitHub for the purpose of collaborative development, we recommend GitHub Desktop for beginners//”+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   * [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        * 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       * 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//"+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 to download VS Code should be added
   * [Minor Issue] A link on VS Code usage should be added at this section   * [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.       * 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//"+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   * [Minor Issue] An information link on how to use MaterialUI should be included
  
-For the **Planning section**:+==In the Planning section:== 
 +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)
  
 {{:ixc2024:team_3:1000062284.jpg?200|}} {{:ixc2024:team_3:1000062284.jpg?200|}}
- 
-  * [Minor Issue] It should be mentioned that the linked adobe software has a free trial for students, but is otherwise a paid service  
  
 {{:ixc2024:team_3:1000062277.jpg?400|}} {{:ixc2024:team_3:1000062277.jpg?400|}}
  
-In the guideline "//Use Agile Methodology: Break your project into small, manageable tasks (sprints). Regularly review progress and adjust plans as needed.//"+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    * [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 
  
 +==In the Designing Solution Phase==
 +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 
  
 +==In the Setting up Development Environment Phase:==
 +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 
  
 +==In the Implementing Planning Phase:==
 +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)
 +
 +{{:ixc2024:team_3:1000062292.jpg?400|}}
 +
 +{{:ixc2024:team_3:1000062278.jpg?400|}}
 +
 +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)
 +
 +{{:ixc2024:team_3:1000062279.jpg?400|}}
 +
 +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
 +
 +==In the Deployment Phase:==
 +
 +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
 +
 +==In the Resources Section Phase:==
 +
 +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
 +
 +
 +{{:ixc2024:team_3:1000062280.jpg?400|}}
  
 --------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------
Line 149: Line 220:
  
 **__1. Our experience using the mobile green measurement tools__** **__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.  +==Android Studio Profiler== 
-  * **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' +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.  
-  * 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+==Flutter Dev Tools== 
 +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. 
 + 
 +{{:ixc2024:team_3:7.png?400|}} 
 +{{:ixc2024:team_3:8_.png?400|}} 
 + 
 +==Green Spector== 
 +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__** **__2. Our experience using the web green measurement tools__**
  
 +==EcoGrader==
 +- 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:
 +
 +{{:ixc2024:team_3:1.png?400|}}
 +
 +==DigitalBeacon==
 +- 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:
 +
 +{{:ixc2024:team_3:2.png?400|}}
 +
 +==GlobeMallow==
 +-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:
 +
 +{{:ixc2024:team_3:3_.png?400|}}
 +
 +==WebsiteCarbon==
 ++ The tool was easy and straightforward. Our results were the following:
 +
 +{{:ixc2024:team_3:4.png?400|}}
 +
 +==LightHouse==
 +- 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.
 +
 +{{:ixc2024:team_3:6_.png?400|}}
 +
 +- 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
 +
 +{{:ixc2024:team_3:5.png?400|}}
 +
 +==Green Frame==
 +
 +-Should mention the in-depth reporting version is NOT free  
 +
 +==Aalto University - Green Page Analyzer==
 +
 ++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__** **__3. Our experience using the backend green measurement tools__**
 +
 +==Patterns and Energy Consumption==
 +
 +Formatting issue, description only uses half the page 
 +
 +{{:ixc2024:team_3:1000062300.jpg?400|}}
 +
 +==SonarLint==
 +
 +-No information on page, just a direct link
 +
 +==SonarQube==
 +
 +-No information on page, just a direct link
 +
 +== Green Code Categories ==
 +
 +- Formatting error [TEMP]
 +