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 11:17] – hibaaixc2024:team_3:start [2024/05/28 13:02] (current) – [Measuring the footprint of the solution] jacobwhite
Line 126: Line 126:
  
 ==In 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)
-[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|}}
Line 133: Line 132:
 {{: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 
  
-**Designing Solution Phase** +==In the Designing Solution Phase== 
- +1. In the guideline "//Option 1: Balsamiq (https://balsamiq.com)//"
-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    * [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)//"+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    * [Issue] This link (in the wiki), is not clickable. It should be added as am embedded link 
  
-**Setting up Development Environment Phase**+==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 
  
-[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 
-**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   * Such as opening the folder created by React to see the files
  
-In the section about "//creating a new repository//"+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)   * [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)   * [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)
Line 161: Line 157:
   * 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)    * 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) 
  
-[Critical Issue] The git desktop page does not correspond to the instructions (see below image)+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:1000062292.jpg?400|}}
Line 167: Line 163:
 {{:ixc2024:team_3:1000062278.jpg?400|}} {{:ixc2024:team_3:1000062278.jpg?400|}}
  
-In the section+4. In the section
   * "// 5. Create beaches for each new feature//   * "// 5. Create beaches for each new feature//
   * //  6. Regularly commit your changes//"   * //  6. Regularly commit your changes//"
       * [Minor Issue] Reasoning behind these steps and more information on how to complete them should be added       * [Minor Issue] Reasoning behind these steps and more information on how to complete them should be added
  
-In the section "//In the git link “Install homebrew if you don't already have it, then://”+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   * [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   * 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
Line 178: Line 174:
  
  
-[Minor Issue - Formatting] The - Import and -Open should not be in the code block (see below image)+6. [Minor Issue - Formatting] The - Import and -Open should not be in the code block (see below image)
  
 {{:ixc2024:team_3:1000062279.jpg?400|}} {{:ixc2024:team_3:1000062279.jpg?400|}}
  
-[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+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
  
-**Deployment Phase**+==In the Deployment Phase:==
  
-In the section "//https://www.netlify.com)//"+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    * [Issue] This link (in the wiki), is not clickable. It should be added as am embedded link 
  
  
-In the section "//Register using your email and use password generator because Netlify has high requirements for password strength//"+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    * 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 
  
-In the section "//6) Go to the / /Sites/ / tab and opt for manual deployment//" +3. In the section "//6) Go to the / /Sites/ / tab and opt for manual deployment//"
   * Minor Issue - Formatting]  / /Sites/ / instead of //Sites//   * Minor Issue - Formatting]  / /Sites/ / instead of //Sites//
  
  
-In the section "//10) Go to the / /Site configuration/ /n tab//"+4. In the section "//10) Go to the / /Site configuration/ /n tab//"
   * [Minor Issue - Formatting] / /Site configuration/ /n instead of //Site configuration//   * [Minor Issue - Formatting] / /Site configuration/ /n instead of //Site configuration//
  
  
-[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 +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 
-[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+ 
 +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
    
-In the section "//For further deployment and development go to / /Deploys/ / tab//"+7. In the section "//For further deployment and development go to / /Deploys/ / tab//"
   * [Minor Issue - Formatting] / /Deploys/ / tab instead of //Deploys// tab   * [Minor Issue - Formatting] / /Deploys/ / tab instead of //Deploys// tab
  
-**Resources Section Phase**+==In the Resources Section Phase:==
  
-In the section "//React: [React Documentation](https:/ /reactjs.org/docs/getting-started.html//"+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   * [Critical Issue] One of the resources linked is outdated, and should be updated or removed
  
Line 216: Line 212:
 {{:ixc2024:team_3:1000062280.jpg?400|}} {{:ixc2024:team_3:1000062280.jpg?400|}}
  
 +---------------------------------------------------------------------------------------------------------------------------------------
  
  
 +=====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__**
 +==Android Studio Profiler==
 +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. 
 +==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__**
  
 +==EcoGrader==
 +- There is no link to the software provided
  
-=====Measuring the footprint of the solution===== ++ 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:
--> 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:+
  
 +{{:ixc2024:team_3:1.png?400|}}
  
-**__1. Our experience using the mobile green measurement tools__** +==DigitalBeacon== 
-  * 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.  +- There is no link to the software provided
-  * **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+
  
 ++ 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:
  
-**__2. Our experience using the web green measurement tools__**+{{: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]
 +