APCSP Final Project – Peer to Peer Video Chat

Task 1:

Originally, I was going to create an Arduino pollution detector for my Mother, as she is always freaking out about how the pollution is so bad in Hong Kong. However, after some planning, I realized that none of the items would actually arrive on time from Amazon. Because of this, my Mother gave me a new idea, the idea to create a web chat that she could use with her Mother. My Mother and I have discussed what they need and by when they will need the finished product. We have agreed on me making a Peer to Peer Video Chat with a deadline of the 28th of May, 2018.

Here is a list of what the program must have:

  • A video chat that would have no distractions.
  • The video chat must also have a text chat.
  • Simple to use.
  • In order to maintain focus, only two people can chat at a time.

But before I could begin coding, I had to make sure to go through the design thinking process in order to make sure that my program would be as well created as can be.

  1. The first step in the design thinking process is to have empathy for whoever you are working with. At first, I didn’t understand why my mother needed a web chat program, couldn’t she use skype or facebook? But then I realized why she needed a privately built one. It was because she didn’t want to be distracted from actually talking to her Mother instead of browsing through pictures and not really paying any attention.
  2. This naturally leads to step 2 of the design thinking process. Which is defining the problem. The problem was simple, there are too many distractions while using social media. My Mother wants a simple program to use that would keep her focused. I also asked a bunch of my peers for their opinions on the issue, which they answered in a Google survey.

  1. For the third part of the design thinking process, I thought up of different ways to create this program. At first, I was thinking of using Python and Tkinter, but I quickly realized that it would be very difficult to link an HTML document to Python, so I quickly scrapped that idea. Because of this, I had to go with my second idea, which was using javascript and html to create the program.
  2. The fourth step of the design thinking process is to make a prototype of the program. I did this by creating both pseudocode and a flowchart of the program, both of which can be seen below in Task 2. I also began the programming part of the project, which can be read further upon in the Task 2 section.
  3. The last step to the design thinking process is to test the program. I can be seen doing this by reading Task 4 and also watching Task 3.

Task 2:

A very important part of the process to developing code is to have a good flowchart and/or pseudo code that can give you a general idea on how to put your ideas into a program. Because of this, I made sure to have both a flow chart and pseudo code to help me out on my development process.

Flow Chart:

Pseudo Code:

Blog – 22nd of May

I gathered up some ideas on what to do for my final APCSP project, and I have to decide which one to go with. My first idea is to use Arduino and create a weather pollution detector. My mother gave me this idea and it seems to be pretty interesting. Some issues that I have found are that I would have to buy stuff on Amazon, and there is no telling how long it would actually take to arrive in Hong Kong. Most of the code I would just have to copy and paste too so there wouldn’t be a lot of learning. My second idea is a peer to peer video chat, I saw this on youtube and it seems like a very interesting project and also a great opportunity to remember how to program using HTML and javascript. There aren’t many downsides to this idea as nothing needs to be bought and it could be learned in a short time period.

Blog – 24th of May

Today I did some more research on different ways to code this. It seems that the easiest way to code this program would be using javascript and HTML. I did some more research and found a forum called NPM. NPM is a community of people who share different packages that can be installed via terminal into a package.json file, which would make coding the actual program much easier. As you would already have some functions that would take ages to code. I also found some youtube videos giving tutorials on how to set up a server using NPM and HTML, this would be very useful as I can put the video chat on the website.

Blog – 26th of May

I made a lot of progress on my work today. I started by installing the “NPM” software which includes “node”. This two software would allow me to create a live website that is updated whenever someone types something into the terminal. In order to get to that, I first had to use terminal and create a directory folder which would have my “.json”, “.js”, and “.html” files. After creating this, I then used the “cd apcsp-project” line to be able to edit the inside of the folder. Then I had to use the “npm init” command to initialize the installation process, which pretty much just creates a “.json” file. Then I used “npm install budo watchify —save-dev” to install those two scripts, which are key in order to create a live website. Finally, run “npm start” which starts the scripts and opens the website with the URL of my computer’s IP address followed by “9966”. I ran into many issues along the way and had to spend a lot of time fixing them. One of the sources I was using to help me was actually pretty outdated, so their code looked completely different from mine. But I still managed to get through. It also turns out I had an outdated version of “node”, so I had to update it because the “budo” script required a version of Node that was newer than mine.

The final product of today’s work looks like this:

Next time I plan on creating the actual code for the video chat. This means that I would be spending most of my time editing the “index.js” file.

Blog – 27th of May

Today I primarily worked on the javascript part of the code. What I did was pretty much write the entire script of the program. The first thing I did was to install the “simple-peer” package, which would allow me to make a peer to peer connection program. After this, I started programming the main javascript. What I first did, was to write the line of code that would give the person who ran the website their key.

After this, I wrote the code that would allow the other person to paste this code into their text box in order to get their own code.

After writing this, both people would now be connected. In order to meet one of the requirements by my partner, I had to make a text chat. So I did that by writing this line of code, which displays your message on your peers’ laptop.

Finally, I implemented the actual video chat. This was fairly difficult to learn, so I searched GitHub and found some help on a forum where someone also built a peer to peer video chat. After learning how to do it, I wrote the code for it.

I also wrote the HTML part of the code today, which was probably the easiest part to code. As it only required basic knowledge on how to create a website and how to attack different buttons to commands that have already been written in the javascript file.

Task 3:

Task 4:

For the testing process of my program, I mostly tested it myself during the weekend. Testing pretty much consisted of running the program and seeing if there were any semantical and syntax errors that needed fixing. I found several issues with the code that needed some improvement on. Some of these issues would have prevented me from having a finished project, so I made sure to search online on websites like GitHub to see if anyone else has similar issues.

Some of the issues that I encountered include the following:

  • There were issues while developing the code, the first issue is that my “Node” software was outdated. In order to fix this, I had to download and install the latest version of “Node”. – Fixed May 26

Picture of my Node version after updating:

  • The Key that was supposed to generate by the recipient wasn’t generating, so I had to restructure the HTML code and found that one of the variables I entered was actually incorrect. – Fixed May 27
  • The website wouldn’t show any code, all it said was “index.js error”. I fixed this by reviewing my javascript code and found out that I had misplaced a comma on line 4. – Fixed May 28

Picture of the line I had to fix:

Task 5:

Task 6:

Link to my GitHub: https://github.com/Carlosthemarlos/Peer-to-Peer-Video-Chat/projects/1

 

Guess The Number

Although I did make this code last year, my current computer does not have it, so I had to recode it. Recoding the Guess the Number game wasn’t too hard, and I finished it fairly quickly. Here are some screen shots.

 

APCSP (F to S) – Sorting and Searching Methods

In our recent classes of APCSP, we have been learning different sorting methods. Sorting is an efficient way to re-arrange integers that are put into a list. As can be imagined, sorting can be extremely useful when provided with a list that has a huge amount of integers. For example, if you had a list of only 3 numbers, then re-arranging them would be super easy to do. There would be no need for a sorting algorithm. But if you had a list of 123 different integers, then it would be much faster to use an algorithm to sort them. There are different types of sorting algorithms, these consist of Binary search, Sequential search, Selection sort, Insertion sort, Merge sort, Bubble sort, Quick sort, and many others. In class, we were assigned to research any of these sorting algorithms, we had two classes to do our research and create an interactive presentation. Out of all the sorting algorithms I chose the one that sounded the most interesting to me, the bubble sort.

 

Bubble sort works in a very efficient way. What it does, is checking the numbers in the exact order that you put them in. After doing this, it checks the value of each individual number. If the first number in front of another is less than the other number, it would swap the two. It does this until there is no need for swapping the numbers anymore. Once the algorithm is finished swapping the numbers and sorting them in order, it prints them out so that you have your complete list.

 

First Pass:

( 6 2 5 3 9 ) –> ( 2 6 5 3 9 ), Here, the algorithm compares the first two elements and swaps since 6 > 2.
( 2 6 5 3 9 ) –>  ( 2 5 6 3 9 ), Swap since 6 > 5
( 2 5 6 3 9 ) –>  ( 2 5 3 6 9 ), Swap since 6 > 3
( 2 5 3 6 9 ) –> ( 2 5 3 6 9 ), Now, since these elements are already in order (9 > 6) the algorithm does not swap them.

Second Pass:

( 2 5 3 6 9 ) –> ( 2 5 3 6 9 )
( 2 5 3 6 9 ) –> ( 2 3 5 6 9 ), Swap since 5 > 3
( 2 3 5 6 9 ) –> ( 2 3 5 6 9 )

And so on. At the end, the algorithm would give you the complete list, which is ( 1 2 4 5 8 ) –> ( 1 2 4 5 8 ).

 

Below is a picture of the code for the Bubble Sort, I put annotations throughout to make it easier to understand.

Sources:

“Bubble Sort.” Wikipedia, Wikimedia Foundation, 24 Jan. 2018, en.wikipedia.org/wiki/Bubble_sort.

“5.7. The Bubble Sort¶.” 5.7. The Bubble Sort – Problem Solving with Algorithms and Data Structures, interactivepython.org/runestone/static/pythonds/SortSearch/TheBubbleSort.html.

“Python Data Structures and Algorithms: Bubble Sort.” w3resource, www.w3resource.com/python-exercises/data-structures-and-algorithms/python-search-and-sorting-exercise-4.php.

APCSP – Card Trick Algorithm

In our recent classes of APCSP, we have been focusing on algorithms. A brilliant way to help us understand what an algorithm is and how we can use them, we researched card tricks that used mathematical algorithms. The first step of our research was to actually find a card trick that used algorithms in a clever yet simple way. My research began on youtube, where I looked for different card tricks that seemed to fit all the criteria. The first video I stumbled upon seemed to be really interesting and was overall a really cool card trick. However, no matter how many tries I attempted the card trick, it never worked for me. I was left stumped. Because of that, I decided to search for another card trick. I ended up finding another card trick, that seemed to actually work. Unluckily, this card trick did not utilize algorithms and had no mathematical explanation. After spending around half the class searching for a new trick, I finally found one. This card trick used mathematical algorithms and seemed to be really neat.

I created a video that has both a demonstration of the card trick and an explanation for how it works.

 

 

Link to first card trick: https://www.youtube.com/watch?v=A9Vu9n7YxrI

Link to second card trick: https://www.youtube.com/watch?v=xn1Rlg3X1ds

Link to third card trick: https://www.youtube.com/watch?v=oLjEulT6ssM

APCSP (F) Explore practice class activity

COMPUTATIONAL ARTIFACT:

WordPress won’t allow me to upload the picture. If you want I can show it to you in class.

2a. Provide information on your computing innovation and computational artifact.

Amazon Echo was created to make our lives easier. It makes helps with everyday nuisances by doing them for you. Amazon Echo does this by listening for the owner to say “Alexa”, then the owner can request for amazon to do anything. It does this by using your wifi router to connect to the internet and gather the information to fulfill your request. My artifact demonstrates this quite well as it shows a cycle of a person asking Amazon Echo a question, followed by Echo listening to your question.

2b. Describe your development process, explicitly identifying the computing tools

and techniques you used to create your artifact. Your description must be

detailed enough so that a person unfamiliar with those tools and techniques will

understand your process.

In order to make my artifact, I first searched for online websites that would be able to lend me templates for my poster.

2c. Explain at least one beneficial effect and at least one harmful effect the

computing innovation has had, or has the potential to have, on society, economy,

or culture. (Must not exceed 250 words)

Amazon Echo is a guy help to people around the world. Not only is it helpful, it is a prime example of computing innovation. Amazon Echo has taken voice commands to the next level. Amazon’s new program allows for an accurate voice interpreter that listens to your command and completes it for you. It is definitely more advanced than any voice command technology we had in the past 10 years. This can benefit everyone, if you want something tedious done for you that isn’t physical, Amazon Echo can do it for you. This includes online shopping, sending messages, or even calling others. A downside to Amazon Echo is that recently it has been listening to people’s conversations without being asked to do so. There have been reported cases of the Amazon Echo calling or texting people because it listened to its owner without being prompted by the voice command. This will completely change our society and economy. People will start to rely on technology more and some jobs may be taken because there would simply be no need for them anymore.

(add effects)

2d. Using specific details, describe:

  • the data your innovation uses;
  • how the innovation consumes (as input), produces (as output), and/or transforms data; and
  • at least one data storage concern, data privacy concern, or data security
  • concern directly related to the computing innovation.

(Must not exceed 250 words)

Amazon Echo uses data from google and other services to carry out the command you gave it. This data can be anything from the weather or the data on your phone to call or text someone.

It consumes data in the form of the command you give it. Amazon Echo then transforms this data so that it can be interpreted online to gather the information you require from it. Amazon Echo has had some reported issues of data privacy. People have claimed that Amazon Echo listens to your conversations and accidentally did something that they didn’t want them to do, such as accidentally call a co-worker or text their boss.

Of course there is a limit to what Amazon Echo can do. While it may be able to do some pretty handy things for you. It still can’t do advanced things. It can only do things that’s data it has access to, this explains why Amazon Echo can do simple google searches and phone calls, but may not be able to do something like send a snapchat message.

(add more on the data, expand on second paragraph)

2e. Provide a list of at least three online or print sources used to create your

computational artifact and/or support your responses through in-text citation to

the prompts provided in this performance task.

(cite images)

APCSP (S) – AT&T Field Trip Reflection

  1. What did you know about AT&T before the field trip?

Before the field trip, we had last week, I knew that AT&T was a telecommunications company, that also provides data service plans for people. I also knew that AT&T’s data plans were only available in the United States, I didn’t know that AT&T had locations around the world. I didn’t know what else AT&T does because I only hear about the company when I am traveling in the United States.

  1. List the questions you asked?

Some questions that my classmates and I asked are listed below:

  • In which ways does AT&T collect and use big data?
  • Why did AT&T expand to Hong Kong?
  • Do you collect data from people who use your carrier?
  • How do you improve the speed of your network?
  • Can any higher ranking individual/employee access the data?
  1. What did you find most interesting from the talk?

The talk was more interesting than I expected. Mr. Mulligan gave us a lot of useful information on what happens when browsing the web. He told us that websites like Facebook own time data, meaning they can see who’s active and when. He also told us that Facebook has directed advertisements, and how this is able to be done because of data mining. Facebook collects cache from other websites to see what you are interested in and then puts those adds on your Facebook page.

Another interesting thing Mr. Mulligan told was is how data centers used to be run by many people and had to be run by those people. He then explained to us that nowadays data centers aren’t being run by people, it runs itself using programs. It fascinated me to learn how much technology could advance in such a little time, that people can manage to create programs advanced enough to run themselves. These data centers are usually pitch black as there is no need for a human to be there. The only reason a person would go is if something needed to be fixed manually.

Mr. Mulligan also mentioned a recent case that the NSA and Apple have had weather or not to allow the NSA to be able to see people’s face ID. After a while of debating, Apple is now allowing to do so, which in my opinion, is a big invasion of everyone’s privacy.

The most interesting thing Mr. Mulligan mentioned was how when you are working on big data, you need a team of people to back you up. These people aren’t all programmers, there’s a diversity of jobs. First, you need Analytics, who are the solution managers. Then you need business insights and the business stakeholders. You also need data science and advanced analytics, along with data wranglers and data engineers. Finally, you need a project manager who overlooks the whole project.

  1. How does this company use Big Data?

Mr. Mulligan told us that AT&T uses big data by finding insights and analyzing large volumes of diverse data. Insight is a process which leads to actionable business benefit. Some examples of this are Location data, Real-time analysis, and Hadoop. Location data is simple, AT&T just collects the location of the phones of which they provide data to, they then collect this data for possible improvements to their software. Real-time analysis can be a variety of things, it depends on which context real-time analysis is being used in. Hadoop is a framework used to efficiently process big data.

AT&T uses two different types of data. These two types of data are structured data and unstructured data. Structured data is big data. Unstructured data isn’t big data and can be seen in things like picture and video. AT&T also uses SPARK, a fast, general engine for big data. AT&T also has a specific structure for when they process big data. I mentioned this structure earlier.

  1. Who owns the data and who can get access?

Most people would think that the person who purchases the phone plan from AT&T would own the data. But this is not the case. Mr. Mulligan gave us a really good example of Facebook. Even though your Facebook page has your name, it isn’t really yours, Facebook still owns it. The same can be said for AT&T, the data still belongs to them. They are just simply lending you some of it for a price.

  1. Add some images from the trip and any final thoughts

WordPress isn’t allowing me to upload images, but I can show them to you in class if you want.

Javascript Lesson 2

In today’s class, we learned more about Javascript and how to implement it.

We made a wishlist that would be created by the users input.

Sadly, my partner hasn’t sent me the pseudo code yet, so I can’t show it now.

This is my HTML code. I just made a title for the website and then linked my java script file. Later on, I put the function of my javascript inside the website. I then added a button to the website that would prompt the input.

I first created a list that would be used for the wishlist. This is the function I created for the password. What it basically did was make a variable prompt that would be used. My code then added the input into the list and would print the list. It then asked if you would like anything else. If you type yes, it would print the function again. If not, then the code would end.

Javascript Lesson 1

Today in class we learned about Javascript. We learned how to use it and implement it in our html code.

The first thing we learned is how to use the console.log command. What it basically does is make the console that you can find in inspect element say something.

We first made a timetable, but I couldn’t fully complete the code, so I wasn’t able to complete it. However, I did learn a lot from trying to make it.

The last thing we did in class was to make a password checker. What I did was make a function for the password checker, and then used command inputs to make a variable for the response of the person. It would then be run inside the code to check if the password entered matches the password that was set. The website would then display “access granted”. If you entered the wrong password, it would play the function again. However, I wasn’t able to make a password lockout.

APCSP (S) – Abstraction

Today, we took a summative in ACSP over the topic of abstraction.

 

Our class had three different options to choose from, and I ended up choosing the pizza delivery system. What is supposed to happen is that you can easily order using this device, you will get your desired pizza. In order to build the code for this, we would have to break up the order process into logical steps. If you would ask for the whole pizza, people would get confused because they wouldn’t know the ingredients. But if you have a system that asks them questions about what they want to eat, you can pinpoint and find exactly what would be the perfect pizza for them.

 

This flow chart shows how this pizza system works. It first asks if you would like to order any pizza. If you don’t, the program would stop. If you do, then it would proceed to the next question. The next few questions would follow the same simple process, asking you whether you would like meat or plain and also asking if you are vegetarian or not. Once you have decided your pizza, you could add extra toppings. The lowest level of abstraction in this situation would be to just ask which pizza you would like. But since it’s your first time ordering from here, you don’t know their pizza’s. This flow chart breaks down the stages into simpler questions that will gather information to suggest you a pizza that you would like.

 

This is the original picture of the Euler bridge problem. He was trying to make it so that every time you would cross a bridge, but you can’t cross the same bridge twice. There were six bridges in total. You can see the detail of the picture that it could be quite difficult to comprehend what is going on because of the size of it. So, using abstraction we can simplify it to make it easier to solve it. This is exactly what Euler did.

Euler changed the picture to this, making it much more simple. It is a lot easier to comprehend than the previous one. It also makes the problem easier to solve because of its simplicity. However, Euler made it even easier by making it even more simple.

This is the final representation of using abstraction to its fullest. Knowing the problem, it is really easy to follow the diagram and how it would work.

 

 

I tried to implement Euler’s ways of thinking to also use abstraction to its fullest for my pizza question.

Here I tried simplifying my original to the maximum. Which I did by having a picture shown with different types of pizza. Then a text would show up asking to select a number for a pizza. Then it would ask for a thin or thick crust. Personally, I think this would be the easiest and simplest way of ordering pizza and getting the pizza that you would like. You could even select two pizzas to create a fusion of the selected pizzas. That allows you to create your ideal pizza.

Overall, this was a pretty stressful summative to put together. I struggled to find a way to simplify my original flow chart. But, at the end, I really think I learned how to break things down into more steps and overall making the whole process easier and more abstract.

 

Part 2

The second part to our summative was actually creating a code to our flow charts. We were told to make the code as abstract as possible, using functions and other forms of coding to make our code as simple as possible. This took me the whole class to make and really helped remember how to use some of the harder things in python. We also learned how high-level coding is much easier to understand than low-level coding.

This is probably the simplest line of code, but, it is crucial to making my coding work. I created a list that would be later used to add things to your order list. The point of this is so that the computer reminds you what you ordered, just like in a restaurant.

Functions are by far one of the best examples of abstraction in my coding. The whole point of using a function is to reuse the code without having to re-type the whole thing. Functions are great examples of high-level coding because it makes your code easier to follow and understand. A low-level of coding would be to just copy and paste the same code and code over again, which would make your code huge and extremely hard to understand. This was the first function I made for my code. Inside the function, it asks whether you would want the thick or thin crust. This is done by using if, elif, and else. These three terms are another form of abstraction. These statements make it so that you have to choose one of the valid options to proceed. If you enter anything besides “thick pizza” or “thin pizza”, the program would make you select again because I included the function within itself. I named this function “thickorthin_function()” and if you look carefully, you could even see another function that I haven’t explained yet, that being “pizzaselect_function.”.

This is the second function that I used. I named this function “pizzaselect_function()”. This function is what makes you choose which pizza you would actually want, by making you input numbers 1 through 5, each number corresponding to a type of pizza. This again shows abstraction by using functions, if, and elif. It also uses abstraction by adding the pizza that you ordered to the list I created earlier. Using a list shows abstraction because you don’t have to make the code say something different for each possibility. It just adds it to the list. This also shows high-level coding, making it simpler to write and understand.

This is very similar to the previous text of code that I explained because it’s practically the same thing. I just had to take a separate screenshot because it was too long to fit into one.

Again, this line of code is really similar to the previous two. But, this one is used to be able to create a fusion of pizzas. I use functions, if/elif/else statements, and append; to make this part of my code. Once you finish your order, I made the program tell you your order before it ends.

Thanks to all the previous functions I made, my final line of coding looks tiny. It only has one function listed inside, but, that function has the other functions inside of it, making it really compact. This is the best way to show abstraction and high-level coding. It’s abstract because of how much I simplified the problem and coding. It’s an example of high-level coding because of how compact it is thanks to my previous efforts.

 

Citations:

“Leonard Euler’s Solution to the Konigsberg Bridge Problem.” Leonard Euler’s Solution to the Konigsberg Bridge Problem | Mathematical Association of America, www.maa.org/press/periodicals/convergence/leonard-eulers-solution-to-the-konigsberg-bridge-problem.

“The Art of Abstraction.” Tech Design Forum Techniques, www.techdesignforums.com/practice/technique/the-art-of-abstraction/.

“KS3 Computer Science – Abstraction – Revision 1.” BBC Bitesize, BBC, www.bbc.co.uk/education/guides/zttrcdm/revision.

APCSP – Binary, Denary, Hexadecimal and ASCII

 

Before enrolling in the AP Computer Science Course, I had little to no idea what Binary, Denary, Hexadecimal, and ASCII was. But after conducting research on these topics, I now have a pretty good understanding of what these are and how they function and work in today’s modern technology. My partner and I, split these topics up so that we would research them independently, we then put together a video where we explained the purpose of them and how to translate them. Translating binary to denary and vice versa was at first pretty complicated to learn, but I quickly gained a grasp on learning how to do so and I now feel a lot more confident in my skills. The research process was both really important and interesting. I really enjoyed learning the history of Binary and Denary and how often they are used in everyday life. My friend and partner Sheel also taught me the basics of hexadecimal and ASCII and I found that very interesting too. Creating the video was also a very fun experience because I got to learn a bunch more from my partner and also got to put a fun and creative video together at the same time. Overall this project was a great first topic to learn in ACSP, and I really look forward to what else we will learn to do this year.

This is the video we created together.

 

Sources used:

https://en.wikipedia.org/wiki/Hexadecimal

https://www.khanacademy.org/math/algebra-home/alg-intro-to-algebra/algebra-alternate-number-bases/v/hexadecimal-number-system

https://www.youtube.com/watchv=ES6CRT0_U2g

https://www.cs.umd.edu/class/sum2003/cmsc311/Notes/BitOp/asciiBin.html

http://www.electronics-tutorials.ws/binary/bin_2.html

https://www.khanacademy.org/math/algebra-home/alg-intro-to-algebra/algebra-alternate-number-bases/v/decimal-to-binary

https://techterms.com/definition/denary

https://www.thoughtco.com/definition-of-base-10-2312365