5 things I contributed:
- Assigned roles and kept the burndown list up to date.
- API Endpoint Setup- built the first, which helped our backend admin go in and do the rest of the endpoints.
- Deployment- Followed the directions given in class and set up deployment for our website. I then taught some of the general commands and helped out the others in our group that did not initally do the deployment.
- Frontend- Initial setup: Created all the subsections in our website (Africa, Asia, South America, San Diego) then passed it off to Claire, Zoe, and Sanya to do formatting and making things pretty
- Found accesable premade API from the internet and figured out how to connect this to our website. This made our features more interactive and useful, opposed to the typical posting.
N@TM Feedback:
- Improve: People recommended to add more features, as some of them may seem repetitive or not as intereseting. They also gave critisim on the overall presentation, and said that it would’ve been done more smoothly. This will defintley help for when we make the College Board video, and the next step would be to address these concerns.
- Keep: People liked the organization of our website, and thought some of our features were fun to play aroundn with. The color scheme was also complemented, people said it suits the theme of our website.
One of my favorite projects from N@TM was Pawnsy, from period 4. I thought it was so impressive how they managed to move chess pieces. I was even more blown away when you could upload a file from your game and the computer will show all the moves you amd. I can’t even begin to imagine doing something that insane.
Induvidual Feature FRQ
Posting features on a platform involves implementing a structured system that allows users to submit content while ensuring proper data handling and accessibility. This process requires defining parameters such as text fields, image uploads, and metadata storage, ensuring that each post meets specific criteria before being published. A well-designed feature should incorporate conditional logic to validate user input, manage permissions, and display content dynamically based on user interactions. In our website, both Admin and Users have the ability to post. Additionally, we used PythonURI’s to ensure that our fetching mechanism would continue to work even after moving away from the localhost. The system should also be optimized for efficiency, minimizing load times and ensuring seamless retrieval of stored posts. Since our posts show up directly beneath the feature, users can easily keep track of what they posted. Finallly, implementation of posting features needs between functionality and usability, requiring iterative refinement based on user feedback and performance analysis, which we gathered at N@TM.
Final Thoughts/ Reflection
- This trimester challenged me a lot more than trimester 1, I noticed that I was starting to fall behind a lot more once the API stuff got introduced. My weakness of not knowing the fundementals of a computer were really starting to show.
- But, I was able to keep perservering, which was a strenght that I had to work hard on this tri. That also led me to be learn how to ask for help, and learn/rely on others.
-
For the future, I will for sure be planning on taking CS workshops or classes outside of school, and my career will be in the general area of technology and engineering.
- I don’t think I deserve a full 10/10, since I can tell that I’m much behind on things like CPT and CollegBoard vocab, and that’s a core requirement for “Full Stack Project Demo.” I also struggled a lot with learning very basic concepts like running sudo or nginx during Deployment. Also, after looking at other people’s project in N@TM, I can tell that ours really needs a lot more work and improvement to be on par with the rest of the CSP class, which is not a good thing considered we’re more than halway done with the year.
- However, I think I deserve a 9/10 because I’ve been keeping up with my work, I always try to do the live reviews first/ ahead of time. Collobration is also important to me, and I try to help others whenever I can to the best of my ability.
MCQ Reflection
Total Score: 58/67 Time Spent: 1 hr 20 mins
- Mistakes: Overall, I noticed I had difficulty with the arithmetic ascpet of CSP, including things like bits and binary code. (Q11, Q12, Q49,). I also had some difficulty understanding larger flowcharts or code chunks (Q23, Q35, Q39, Q67). When the diagrams are really long with multiple parts, it takes longer for me to process and I end up getting the question incorrect.
-
Improvements: Compared the last exam, I was able to understand some of the terms a lot better. Vocab like packets, IP, and encryption, database, and more were easy to understand, and I was able to decode what the question was asking. I also did this quiz a lot faster than the first MCQ, and I got a better grade so there is definetely a significant amount of improvement.
-
Future Plan: As I am still struggling with visual representations of code, I will try to find videos that break down how flowcharts work. I can also just look around the classroom and try to understand the various posters made by previous students. Lastly, I am going to understand things like binary and bits, most likely using college board videos. All in all, I should focus on 4.C (Evaluate and test algorithms and programs) and 2.B (Develop and implement algorithms).
INDUVIDUAL CORRECTIONS
Q6: Correct Answer: C, I put B
- Program 1 repeats twice, which is what I failed to notice when I first took the test. Since Program 1 repeats twice, it will reach the grey box, in addition to Program 2.
Q11: Correct Answer: A, I put C
- Binary Code uses 2^x, and when you translate 11111111 to binary, it will give you 225. (2^7, 2^6, 2^5, etc).
Q12: Correct Answer: C, I put D
- Same as above, Binary code uses 2^x. We use the same process to translate the binary code into decimal form.
Q23: Correct Answer: D, I put B
- The mistake in this was the greater than and less than signs. The program only needs to be atleast 20 miles, not greater than 20 miles.
Q35: Correct Answer: B, I put C
- The question isn’t asking for a whole other program that follows the pattern as the example, it’s asking to explain how it works.
Q49: Correct Answer: C, I put A
- Bits also use 2^x, similar to binary code. Since there are a total of 100 employees, we need to plug in the answer choices to 2^x. 2^7= 128, which satisfies the minimum requirement.
Q54: Correct Answer: C, I put A
- The APPEND command means that the dataset will be linked. The even values getting added to the list will appear in the same relative order as before.
Q67: Correct Answer: A and B, I put B and C
- This program resets everytime a target word is reached. In answer choice C, the program reaches the number 1, but never returns to zero, which is what we want.
PPR
PPR requires 4 blocks of code:
- A list being created/ stored in a list
- A list being processed
- A function with parameters and sequencing, selection, iteration
- A call to function
- List Creation
with app.app_context(): """Create database and tables""" db.create_all() """Tester data for table""" chinas = [ China(title='Hakamarut', comment='Very delicious', content={'type': 'announcement'}, user_id=1, group_id=1), China(title='Sakura Restaurant', comment='Smelled and looked delicious', content={'type': 'announcement'}, user_id=2, group_id=2), China(title='Tokyo Cafe', comment='Had amazing drinks too!', content={'type': 'announcement'}, user_id=3, group_id=3,), ]Explanation:
chinasis what defines the list, and each parameter is accepted under the China class within the list. The data of the restaurants have been stored in this list. - List Processing / Using
for i in chinas:
print(f"Attempting to create record: {repr(i)}")
try:
i.create()
print(f"Record created: {repr(i)}")
except IntegrityError:
'''fails with bad or duplicate data'''
db.session.remove()
print(f"Records exist, duplicate email, or error: {i._title}")
Explanation: This code iterates through the list using the for loop, and accesses all data through the print option. Lastly, i.create() preforms an operation using the given data by creating a table, which shows how it uses pre-existing data to make something original.
- A Function
async function fetchChannels() {
try {
const groupName = 'Chile';
const responseData = {
group_name: groupName,
};
// add filter to get only messages from this channel
const response = await fetch(`${pythonURI}/api/channels/filter`, {
...fetchOptions,
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(responseData)
});
if (!response.ok) {
throw new Error('Failed to fetch channels: ' + response.statusText);
}
const channels = await response.json();
container.innerHTML = "";
channels.forEach(channel => {
const card = document.createElement("div");
card.classList.add("card");
const title = document.createElement("h3");
title.classList.add("card-title");
title.textContent = channel.name;
const description = document.createElement("p");
description.classList.add("card-description");
description.textContent = channel.attributes["content"];
card.appendChild(title);
card.appendChild(description);
container.appendChild(card);
});
} catch (error) {
console.error('Error fetching channels:', error);
}
}
Explanation: fethChannels() is defining the procedure, and establishes that it returns/ retrieves API endpoint data. It has parameters like the groupName that filter out parts of the given data, and affect functionality. Sequencing is shows through first the fetching of API data, and then the dynamic display. Selection is the error catching feature, and iteration is the for loop that updates the frontend UI.
- Function Calling
try { const response = await fetch(`${pythonURI}/api/channel`, { ...fetchOptions, method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(channelData) }); if (!response.ok) { throw new Error('Failed to add channel: ' + response.statusText); } fetchChannels(); document.getElementById('channelForm').reset(); } catch (error) { console.error('Error adding channel:', error); alert('Error adding channel: ' + error.message); } fetchChannels();Explanation:
fetchChannels()is used again at the very end of the code and is called to ensure that the data is updated and displayed properly.
CPT Requirements
-
Big Idea 1.1 & 1.2
- Induvidual: Created the To-Do list on the Kanban board to ensure proper organiization and the use of the SCRUM method.
- Team: As a team, we focused on using the agile method and things like CRUD
-
Big Idea 1.3
- Induvidual: Contributed to the overall frontend appeal of the website. I focused on adding things like emojis or specific fonts to make our website organized.
- Team: Worked on the Figma together, creating an overall outline of what we need to code.
-
Big Idea 1.4
- Induvidual: Created tester data in our backend that allowed us to execute the ./scripts/db_init.py and other SQLite3 related commands. Example of tester data below:
- Group: As a team, we all took turns using and learning Postman.
japans = [
Japan(title='Hakamarut', comment='Very delicious', content={'type': 'announcement'}, user_id=1, group_id=1),
Japan(title='Sakura Restaurant', comment='Smelled and looked delicious', content={'type': 'announcement'}, user_id=2, group_id=2),
Japan(title='Tokyo Cafe', comment='Had amazing drinks too!', content={'type': 'announcement'}, user_id=3, group_id=3,),
]
-
Big Idea 2
- Induvidual: I figuired out the where and how the backup and restore commands are, and how this can help us store data that we get from users. Below is the backup optiont that we have in our website.
- Group: We all navigated databse maagemnet and were able to run the basic commands on every machine. (Everyone was able to create new tables, backup, and restore)
import sys
import os
# Add the directory containing main.py to the Python path
sys.path.append(os.path.abspath(os.path.join(os.path.dirname(__file__), '..')))
from main import app, backup_data
def main():
# Step 1: Backup the old database
with app.app_context():
backup_data()
if __name__ == "__main__":
main()
-
Big Idea 4
- Induvidual: Ensured that the Python URI was working for all of our features. Below is an example of a working Pyhton URI fetch option from our website.
- Group: We all learned how to use AWS to deploy, our main deployment admins are now able to easily naviagate cockpit, even if they weren’t the ones that originally started off the deployment process.
try { const response = await fetch(`${pythonURI}/api/channel`, { ...fetchOptions, method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(channelData) });