Exercise 6 (Developing Web)

I didn’t get around to creating something on my own beginning with how my code wouldn’t work in class. I didn’t really know where the problem was with the code example for the Google maps example, so I missed it.

After class, I tried browsing through the Google maps documentation to figure it out on my own, but I simply got confused. So I thought, why not find another API to study? But the ones that I found that were supposedly easy, like Twitter, were definitely written for people who already knew how to do things, and I was mostly just confused by what was node.js was or how to even fetch data or know if I was fetching data, and I definitely didn’t know how to use the data. It also didn’t help that I just had no idea what to even do with data from Twitter or Google maps or the social APIs. This was when I realized I would probably have no ideas when it comes to the generic APIs so I went looking for stranger ones.

That was how I ended up finding the PokeAPI on a Reddit for cool APIs. But even finding this, their documentation wasn’t exactly beginner friendly–I still had to have some idea of what APIs were and how to use them to use the API. So by the time I went for help and figured it out a little bit, I already figured that I was going to use this for my final project, so essentially, my exercise 6 was the beginning of my final project.

The Seven Sentence Stories (Saphya + ZZ)

The Seven Sentence Stories

192.168.50.184/~zz791/DevWeb_w14-assignment

Idea: A collaborative writing platform, bridging the physical distance and igniting the imaginations of authors around the globe. We wanted the benefit of a social medium focused on writing and idea-making thus TSSS was born. Using this app, people can create new stories, edit existing ones or just read.

Front End:

Jquery Mobile Theme Picker

Screen Shot 2017-05-22 at 10.24.32 PM

using ThemeRoller from JQuery Mobile site

Screen Shot 2017-05-22 at 10.38.08 PM

Screen Shot 2017-05-22 at 10.38.36 PM

 

HTML

changeStory(): this updates another page in our html called “readstory” with the identity of whichever story is clicked on in the main page. Therefore, if you click on “test”, the empty “readstory” page will have the title, story, and collaborator list of “test”.

showStories(): uses the ‘story-list’ get call to list all the stories on the list view page.

filterStories(): uses the ‘story-list’ get call to compare the search input with existing story titles in the database to spit out the stories that exactly match the search.

storyUpdate(): uses the ‘set-story’ get call to add new row in a ‘p’ tag to that page. Also updates the database.

newStory(): uses the ‘set-story’ get call to add a new row for that story to the php database and updates the list of stories on the main page.

 

Back End:

18697733_1519023128119436_1801275045_o

phpMyAdmin

In phpMyAdmin, we made a new database called “collab_fiction”. In it we have a table called ‘stories’ with columns, ‘id’, ‘dates’, ‘author’, ‘sentence’, and ‘storyid’. In our index.php, we have four ‘get commands’:

‘Set-story’: adds a new row to the table

‘Get-stories’: lists all rows in the table

‘Get-story’: list all the rows under that storyid

‘Story-list’: lists all unique storyids in the table

We use the commands for different javascript functions in our html code.

 

Problems:

Although the story updated instantly, the author list did not update unless you refreshed the page. We tried to fix this by placing the portion of code that controlled the author list within the submit button’s “click” function, but this only generated duplicates. We are still seeking to solve this issue.

 

Reflection:

I really enjoyed this project because I got to work with phpMyAdmin and MySQL, both of which I’ve heard about but have never seen in action. After making the database and learning the correct jargon to pull information from that database, it was relatively easy to make a for loop in a .getJSON method in our HTML. Then it just became a matter of displaying the specific part of that json, which required a lot of tweaking and still does til this day to perfect. I am satisfied with the work we were able to produce in such a limited time. TSSS works fine individually on your personal devices, if you are able to make a database of the same name with the same table, however this is not ideal. I still want to learn how to put this online, but that is a future challenge.

Embedded API

I almost forgot about publishing this one exercise!

The exercise is in this site: http://192.168.50.184/~bco220/API_Embedded/about.html

In this particular exercise, I tried to find an appropriate API to make a simple webpage with it. However, I tried with tumblr API, SoundCloud API, and twitter API, but I failed miserably to use those API’s since the key required some time (half a year) to be received or the documentation of the site does not explicitly show you the steps to embed such and must become a development member. Hence, I decided to use our trusty Google Map API, since that was what we learned in class. I implemented this API in my midterm project website, and I found that the positioning of the map was a bit challenging to place, such that it does not look quite cramped. I believe it can look better than it is now, but for the most part I am glad that I successfully placed the API inside.

屏幕截图(56)

Developing Web (All Documentation) by Tyler Rhorick

 

  1. Fan Website and Code Academy (http://ima.nyu.sh/documentation/2017/02/22/fan-website-and-code-academy/)
  2. Video Embedding (http://ima.nyu.sh/documentation/2017/03/08/video-embedding-by-tyler-rhorick/)
  3. Giphy Galaxy (API Assignment) (http://ima.nyu.sh/documentation/2017/04/26/giphy-galaxy-by-tyler-rhorick-developing-web-api-assignment/)

Code Academy (Java and JavaScript)

Screen Shot 2017-05-24 at 5.57.02 PM

Reflection: After having completed all of the assigned CodeAcademy, I must say that there are real serious pros and cons to these lessons. One of the biggest pros I would say in using these lessons was a development of base understanding. After having done all of these lessons, I can confidently say that I can look at a section of code and have an idea of what is happening in the code. With that said, I wish these lessons had more practical examples. Often the courses make you do a task that seems pointless because it would not be used that commonly in practice. For instance, there was one memorable part where they were trying to force me to make a counting function. I thought that having more useful examples would be helpful.

 

Responsive Website

For my responsive website, I decided to make a responsive portfolio, since this was going to be a requirement for my senior capstone. Drawn to dark colors that would allow the vibrancy of my work to stand out, I decided to go with a black and grey theme. Also, in order to get a good understanding of how to code the website, I avoided any frameworks like bootstrap, etc. Here is what the current website looks like on a larger browser:

Screen Shot 2017-05-24 at 6.29.00 PM

And here is how it comes responsive:

Screen Shot 2017-05-24 at 6.29.07 PM

After receiving feedback, I decided that I needed to do a better job at figuring out the spacing and design of the top header, since many people thought it might be confusing. I also got recommended to maybe include a bit of color and that the pictures might look better without the borders. With these critiques I decided to make modifications and created what in the end became my portfolio shown below:

Screen Shot 2017-05-24 at 6.32.23 PM

 

The original project can be accessed on the NYU server at http://192.168.50.184/~tpr226/responsiveport/

And my finalized capstone portfolio can be seen at https://trhorick.github.io/ 

Final Project Documentation:

 

Project: pauseWatch app

Website Link: http://web.nyu.sh/pausewatch/start.html

Project by:

Tyler Rhorick and Rewant Prakash

Project description: pauseWatch is an assistive technology device for people with mental disorder. The interface for pauseWatch relies on using different sensors and arduino mkr1000 to calculate body vitals, and if the body vitals are not in range, it triggers an api that redirects users to a web app that helps them calm down.

 

This app, for the time being, allows the user to be redirected to two different youtube playlists– 1. The Meditation playlist, 2. Humor playlists. When the playlists are triggered, the app shuffles the songs in the playlist, giving its users access to different order of playlist every time. Furthermore, the app also triggers a email to someone the user designates while setting up this app, giving users a lot of accessibility and variety of options based on their personal preference.

 

Tools:

Pushingbox API, pushbullet API, arduino mkr1000, php server and youtube embedding

 

Ideation & prototyping:

We first came up with idea to develop pauseWatch app while discussing the possible future impact of pauseWatch. pauseWatch interface relies on using several different APIs such as pushingbox API, pushbullet API, and IFTTT API. While the APIs were successful in performing the intended functions, we wanted to give users option to choose their preference and interaction when they first set up the app, instead of the different APIs functioning independently. We believe that any or every user has the ability to make their own decisions, therefore we wanted to give the users an option to set their preference single or multiple times.

 

In our current design, the user downloads the app and sets up their user preferences. These preferences allow the user to input their name, the emails they wish to be notified if their pauseWatch is activated, and the frequency that they would be asked how they would like to de-stress (once or every time the watch is activated).

Screen Shot 2017-05-24 at 4.31.43 PM Screen Shot 2017-05-24 at 4.32.30 PM

 

 

Once the pauseWatch app is setup the user is ready to use their pauseWatch. After the pauseWatch app is set up, their pauseWatch watch will monitor the user’s vitals when they wear it. Looking for an increase in temperature and heart-rate, the pauseWatch will activate when these vitals indicate that the user might be stressed out. Encouraging the user to take a pause and relax, the pauseWatch will interact with the pushbullet API to send a phone notification to the user. This phone notification will link the user to the pauseWatch app, which will respond to the user’s chosen settings and send the required emails upon opening. If the user has chosen to pick how they would like to destress every time, they will get to pick how they want to destress with pushbuttons that will link to options to de-stress.

 

Screen Shot 2017-05-24 at 4.33.12 PM

Otherwise, if the user picked to just be asked once how they’d like to de-stress, it will go to the page related to how they want to destress. Once on the page related to how they should de-stress, they will see a randomly generated youtube video related to their prefered way of destressing.

Screen Shot 2017-05-24 at 4.33.46 PM

Challenges:

While building this app, we had a few challenges.

  1. Php to send email to a designated user
    1. One of our biggest problems was trying to figure out why our PHP code wasn’t working to send emails to the users. We ended up figuring out that the problem was because we were hosting our pages locally. After talking to Matt, we got the email functionality to work when the website is hosted on the IMA webpage, but a current issue is still with the string parsing. We want to look back in this more detail soon to see if we can remedy these issues.
  2. Responsive youtube embedding
  3. pauseWatch device integration with the app

 

Future Iterations:

  1. More variety of content in the app
  2. Using push notification triggers and redirections from the app itself
  3. Launching an app on google play store/ ios app store

 

Tyler’s Reflection


What I enjoy most about working on this project is how it was able to use everything we learned in class. From incorporating our lesson on forms, to mobile and responsive websites, php, and connecting a website to an arduino, I think we accomplished a lot with this project. In the end, I think our project is commendable because it works and is a valuable asset to Rewant’s capstone project. What I think may need to be improved in later iterations is the design. One thing that we didn’t talk about in class that I might have wanted to discuss more is how to make an appealing phone app. We chose to go for a simple look to not overcrowd the space on the phone, but I question if this is the best decision. Should we have added more? What design elements could we have changed. I think another thing that was an important lesson I learned from this project was the limitations of hosting a website locally. I feel like often times when things don’t work out I automatically assume it must be something in the code I wrote. What this taught me is that with web development it is also important to look at the way you are using the code to make sure that it is actually the code that is the problem and not the permissions. Overall, it was a great project as my last project in IMA and I had a great time working with Rewant, which is something I suprising hadn’t gotten to do yet in IMA.

 

 

Rewant and Tyler- pauseWatch App

Project: pauseWatch app

Website Link: http://web.nyu.sh/pausewatch/start.html

Project by:

Rewant Prakash and Tyler Rhorick

Project description:
pauseWatch is an assistive technology device for people with mental disorder. The interface for pauseWatch relies on using different sensors and arduino mkr1000 to calculate body vitals, and if the body vitals are not in range, it triggers an api that redirects users to a web app that helps them calm down.

This app, for the time being, allows the user to be redirected to two different youtube playlists– 1. The Meditation playlist, 2. Humor playlists. When the playlists are triggered, the app shuffles the songs in the playlist, giving its users access to different order of playlist every time. Furthermore, the app also triggers a email to someone the user designates while setting up this app, giving users a lot of accessibility and variety of options based on their personal preference.

Tools:
Pushingbox API, pushbullet API, arduino mkr1000, php server and youtube embedding

 

Ideation & prototyping:
We first came up with idea to develop pauseWatch app while discussing the possible future impact of pauseWatch. pauseWatch interface relies on using several different APIs such as pushingbox API, pushbullet API, and IFTTT API. While the APIs were successful in performing the intended functions, we wanted to give users option to choose their preference and interaction when they first set up the app, instead of the different APIs functioning independently. We believe that any or every user has the ability to make their own decisions, therefore we wanted to give the users an option to set their preference single or multiple times.

In our current design, the user downloads the app and sets up their user preferences. These preferences allow the user to input their name, the emails they wish to be notified if their pauseWatch is activated, and the frequency that they would be asked how they would like to de-stress (once or every time the watch is activated).

Screen Shot 2017-05-24 at 4.31.43 PMScreen Shot 2017-05-24 at 4.32.30 PM

 

 

Once the pauseWatch app is setup the user is ready to use their pauseWatch. After the pauseWatch app is set up, their pauseWatch watch will monitor the user’s vitals when they wear it. Looking for an increase in temperature and heart-rate, the pauseWatch will activate when these vitals indicate that the user might be stressed out. Encouraging the user to take a pause and relax, the pauseWatch will interact with the pushbullet API to send a phone notification to the user. This phone notification will link the user to the pauseWatch app, which will respond to the user’s chosen settings and send the required emails upon opening. If the user has chosen to pick how they would like to destress every time, they will get to pick how they want to destress with pushbuttons that will link to options to de-stress.

 

Screen Shot 2017-05-24 at 4.33.12 PM

Otherwise, if the user picked to just be asked once how they’d like to de-stress, it will go to the page related to how they want to destress. Once on the page related to how they should de-stress, they will see a randomly generated youtube video related to their prefered way of destressing.

Screen Shot 2017-05-24 at 4.33.46 PM

Challenges:

While building this app, we had a few challenges.

  1. Php to send email to a designated user
    1. One of our biggest problems was trying to figure out why our PHP code wasn’t working to send emails to the users. We ended up figuring out that the problem was because we were hosting our pages locally. After talking to Matt, we got the email functionality to work when the website is hosted on the IMA webpage, but a current issue is still with the string parsing. We want to look back in this more detail soon to see if we can remedy these issues.
  2. Responsive youtube embedding
  3. pauseWatch device integration with the app

Future Iterations:

  1. More variety of content in the app
  2. Using push notification triggers and redirections from the app itself
  3. Launching an app on google play store/ ios app store

Reflection:
I had a great time working with tyler on this project as a continuation to my capstone. I found some parts incredibly challenging, the biggest being making youtube embedding responsive. It took me the longest time to figure out the perfect way to make the embedding responsive to the mobile platform. The other hard part was figuring out the email functionality using PHP, but Matt was very helpful in helping us to fix it and make it functional. All in all, I found this project fun and challenging, but also a perfect encapsulation of my web development class!

Developing Web| Asiya Gubaydullina|API Project

For this project, we were required to create a project using an API. I decided to work with Google Maps as I previously had experience working with it. I have sent the link to Matt on the date of the supposed submission due to the inability to access the IMA blog. So now, I am going to talk about the project in detail.

This is a story of Ruby Red (click on the name to go to the website), a girl whose father was an explorer and unexpectedly died leaving her to find the rest of the time traveling watch. So she travels through Constantinople, London, Paris, and Venice. Now, when I worked on this project before, we were using Evothings Studio to make it an app. However, I decided to adjust it for the web. This is where the issues start.

The biggest one is the problem with maps itself. Despite explicitly stating the coordinates where the map should load to, I kept being thrown to Fujian road. That’s what I didn’t realize about Google Maps is that China shifts the coordinates as a protection and they are not reliable. That’s why the overlay on maps either absolutely refused to show up or showed up in a different location. So, as I previously mentioned to Matt, the coordinates are skewed. Therefore, the project worked from time to time. Pure luck. Sometimes the overlays showed up and sometimes it simply didn’t. The rest of the project parts worked perfectly fine. Here is the recording of it.

Developing Web : Final Project : Starfox!

Objective:

Create a Starfox game that can be controlled using a game controller app! Ok well, in reality, I had mistakenly thought previously that one of our assignments would be to create a simple game. Knowing that my stubbornness and ambition would likely get the better of me I started early on creating a Starfox game. However, due to time constraints and the way that the class ran, we somewhat condensed some of the projects and ended up just doing an app for our final project. That being said, I still had a 75% finished Starfox game so I decided to try and intertwine the two projects.

Coding:

I utilized three.js for most of the Starfox game, loading a 3D model into the sketch and then using GL points to create asteroids that reset as they whiz past the camera. Using raycasters I was able to track when the asteroids are clicked on in 3D space.

Using socket.io I was able to create a socket connection and allow for my webapp to communicate with my game sketch. I modified the jQuery mobile example we had and combined it with the socket.io api. The web-app was designed as a controller for the game. Due to some weird unexplained latency issues it simply doesn’t work 100% as intended while on mobile, but works fine when used from desktop.

Since the game wasn’t really the point of the assignment, progress on the game was halted in exchange for progress on the app portion. Thus technically the game doesn’t function fully as a game yet, still there are functions in place that record the elapsedTime which basically act as a score and are stored on the webserver to be called upon as highscores.

IMG_2682

Above is an image of the web app downloaded onto my screen with a custom icon.

Api practice- Jarred Kubas

For this assignment, we were tasked with using an api. I chose to to use the good maps api in order to add to my hamburger fan page. It was a good fit for the purposes of my website being a food blog. Naturally having the location marker on the location of the restaurant would aid viewers in finding direction. With this screen shot users can see the nearest metro station.

Screen Shot 2017-05-23 at 2.28.15 PM