Week 1
Feeling a bit disorganized as a group and little confused. So far we have created a plan and each table is creating their own site, however there is some arguements from people that we are all meant to work on one big site. It is currently unknown whether or not this is true. Whatever the case I have worked on our projects backend. Our website is a simple idea, similar to Instagram where we have a site that has a feed and a header. We have a upload picture button at the top that is locked for a unspecified amount of time. After it is unlocked you can upload a picture of yourself and it will show up in the feed.
I decided to take up the respobsibility of backend and got Abby to do it with me. This was a decision based on the idea that the backend would likely be much more difficult than the frontend and therefore should let the more experienced programmers handle it rather than the less experienced Shriya and Nathan. I had decided to work on the camera and a GUI that would appear when pressing the upload media button and had to learn how to access the camera.
I decided to use an easy to access resource known as ChatGPT to learn how to use the navigator API in order to request access to a camera and assign that a source to a video element on the screen. Then would pressing the capture button it would copy that image to a canvas on the page and would then use the canvas a source for an image element on the screen.
Although the base was done by ChatGPT I made sure to understand what I was reading and writing as well. Making queries to ChatGPT about each part such as what ‘navigator.mediaDevices.enumerateDevices()’ was and what it output. I had learned that this function goes through each device on the computer that acts as an output or input and lists them in an object. It would then use a ‘.then()’ which would run a function using the object output by ‘navigator.mediaDevices.enumerateDevices()’ as it’s input, checking whether or not each item in the list was a video input device and if so use DOM (document manipulation, something I did understand thank goodness) to add to a select element on the page in order to choose a camera.
After beginning to understand the code for myself I removed what ChatGPT had written and based new code upon it, while it may have been less efficient I put in more effort and gained a greater understanding. I also had more control and ability to manipulate the code. One of the issues with ChatGPT’s code that I immediately noticed was that the camera was never off. This bothered me as some users may feel that this is bad or wrong so I worked to figure out how to fix this issue. I realized that the best way to do this was to turn on the camera on the selection of a device and thus rebinded the initalization of the camera to the selection of a camera created using ‘.forEach’ which is a JavaScript iteration tag. Similar to a Python for loop it would iterate over each part of the object run a function for each index.
The following day I worked with Abby to determine how to improve it further, offering a retake button. I quickly added this feature according to her views and then began to check on Shriya and Nathan in their progress on the Frontend. I knew that they would likely struggle considering that they had little to no experience in the frontend but they had done good work and created a design. I talked with them and discussed how they could implement each part. I then delegated the styling of the page to Nathan and the creation and formatting of the page Shriya, and proceeded to assist Shriya in creating a header. I explained how there should be a div as the header so it is easier to style and how inside the div there should be two more divs, one for the image and the other for remainging text. Explaining this would make it easier to style in the future. I then mentioned that she would have to create another div for the post feed.
I also talked to Abby about what to do and we were both a little confused on how to begin the backend so we decided that for now we should focus on the page assembly then focus on how to communicate with a backend. I mentioned that we should attempt to use OOP (obhect oriented programming) for the posts as it would make it a lot easier using a constructor for each post rather than redeclaring the variables and functions you’d likely need to create a post on the front page. After working together to remember the OOP principles we had both learned in CSSE and creating a constructor for our Post object I realized we should add a build post function to the object. I talked about it with Abby and mentioned that it would likely involve DOM and referencing the variables that would be included in the posts and decided to leave my trust in her to figure out the process, stating that if she needed help she could Slack me.