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.
For my final project, I chose to take an old wireframe built earlier in the semester for a UX Design course and take it the next step into a mobile app. The wireframe is seen below:
The basis behind the app was to create a female hygiene application with built in functionality to subscribe to relevant monthly product deliveries. These deliveries would sync with the inputted health data. Through making my UX development project into an actual mobile app, the medium through which i hoped my audience would interact with the project, I was able to to become quite comfortable within the jquery mobile framework. Although, given the complexity of some of the functions, mainly the predictive menstrual tracking algorithm, I was not able to make a perfect copy of my wireframe. As a business and finance student, I gained the furthered ability to understand at a high level what goes into making ideas into a reality within the tech space.
The jquery mobile features that I used the most were grids. As my app features a product page, organization was challenging. For this I would lay grids inside of grids in order to maintain consistent spacing and organization. The logic behind this took some time to understand, but in the end my project page was a success. Seen below is my grid system without CSS.
Additionally, I used the jquery mobile datepicker. This was another challenge as the code for the datepicker came from a third party. Originally the css for the datepicker was nowhere to be found. However, this problem was solved by inspecting the source code for the Jquery mobile website.
In total I made a 5 page app that included a home page, community page, health data page, product page, and subscription/payment/shipping page. Once my app wireframe had been remade with Jquery mobile, the next step was to use an API. Deciding on an api was not easy. Originally, I had looked for an API that would do the menstrual tracking algorithm and in order to help predict shipments. Although i did find this, the complexity of the API was not practical for the project. From here I looked for wechat pay and alipay api’s. Again, I ran into a similar issue. The wechat documentation was all in chinese, and alipay required a extensive registration process. In the end I used the google calendar api. The api operates by connecting to a google account and extracting the preentered dates and presenting them within the app. Although there is no predictive health tracking with the api, in the future the notification of upcoming events relevant to the menstrual cycle is really practical.
In the end, I am glad i chose to do this as my final project. It was a practical app that has the potential to go much further. At this point, I have a great prototype to pass on to potential users and developers.
note: api does not work on the nas, but works on the localhost
Send Love is a web app that allows people in long distance relationships to communicate with each other physically. This app is able to control Arduino Yún remotely and gets data back from it. Besides that, it can also update weather information in real time around the world.
It mainly has 3 functions:
- Get a city’s weather information by entering city’s name with customized icon;
- Press “Send Some Love!” in the App to turn on LED light remotely;
- Press the physical button beside the LED to send alert “Your love has been received!” back to the App page as a user feedback.
PHP servor, Arduino Yún, Weather API, Photoshop
Different Design section:
- Weather API: I used the world weather api in class to complete this project. I used “Postman” to check the api’s status and complete the json code. As I only drew 6 weather icons, which were not as detailed as the api’s data, I organized their weather code to fit in my 6 categories. And in my code, I was not getting the weather’s name but the code instead:
Thunder: 389, 386, 200
Cloudy: 143, 122, 119, 116
Rainy: 359, 356, 353, 314, 311, 308, 305, 302, 299, 296, 293, 284, 281, 266, 263, 185, 176
Snowy: 395, 392, 377, 374, 371, 368, 365, 362, 350, 338, 335, 332, 329, 326, 323, 320, 317, 230, 227, 182, 179
Windy: 260, 248
- PHP Server: Mostly the knowledge we learnt in class with MAMP.
- Others: I bought some materials to decorate my LED into a little heart ❤️
- Working with Json to control Arduino;
- Finding effective with api;
- Slow reaction from Arduino;
- Short time (bc I wanted to finish before semester show, which I did).
(more pictures and videos need to be uploaded here!!!)
Although this app is still very basic, I have fun creating it. I consider it a cute but meaningful project that worth working on. I truly had a good time when developing web and found my self-value in it.
Link to project and related Arduino code on NAS: http://192.168.50.184/~ys1664/API_Project/
Impressed in class by the power of REST API from Arduino YUN, I decided to take the chance of my project to further experiment on REST API.
This small fun project is a “B-Box Practicing” application, it simply contains a few buttons to play four tracks of b-box drops. So far I haven”t managed in adding in fancy visual effect using REST API, instead I just introduced in four LED indicators as signaling for different difficulty levels of the b-box drop that’s being playing.
Technically speaking I might have over-complicated the process by not directly playing the sound through a mobile’s speaker. However, considering the mobile’s holder might want the sound to populate over all areas with covered by a common wifi, I decided to use YUN as the device of playing the sound and I matched YUN to a USB-driver amplifier for a better B-boxing effect.
The mentioned above has led me to learning how to accessing Arduino YUN’s Linux system for more operations. As a Windows user, I had to reply on some third-party software called “PuTTY” which allowed me to access the system of YUN through SSH(Security Shell). Next, an external package called “madplay” was installed on Arduino YUN through SSH, and after which I was able to use YUN as the sound source.
Besides the time spent on SSH, I also got a better understanding of how YUN’s REST API works through digesting the example code in Bridge.ino. I was trying hard experimenting on different methods in API such as (Process).runShellCommandAsynchronously() and (Process).runAsynchronously() in order to achieve playing multiple sound tracks at the same time, but it might be the cause of package “madplay”, simultaneous playing didn’t work out.
As I have an Arduino YUN back home, I’m gonna spend some time this summer exploring the functionality of REST API, looking forward to get more entertaining potential digged out.
Below is a demo video of this little app, I hope you enjoy 😀
It’s that time of year folks, bring you the latest in mass posts, what waits ahead of you are a conglomeration of all things I have accomplished in Developing Web seeing as how I do not think I have managed to do a single documentation since the time we first made our basic web page. This semester I have found documentation to be a struggle and it was not that the work was not done on time it was simply the documentation that wasn’t and thinking back that is truly something foolish to do, and in the future I will endeavor to begin the documentation process as soon as I begin the project itself so both things will end up done around the same time, but anyway without further ado I present “Tyler Develops the World Wide Web of Pokemon and other Miscellaneous things”.
The Seven Sentence Stories
Idea: A collaborative writing platform, bridging the physical distance and igniting the imaginations of authors around the globe.
Jquery Mobile Theme Picker
changeStory(): in order to make the story page dynamically (so that we don’t need to manually create new pages when there’s new story being created), we wrote the function called changeStory() where we built a basic structure(title, sentence, author, and time) that will be autofilled with json data.
showStories(): lists all the stories on the list view page
filterStories(): shows all or shows only certain stories whose titles contain a certain word or phrase that users can type in
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.
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
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.
For this final project, I paired up with Sidra and started working together with some ideas in mind. Some ideas we suggested were using the limited edition cards from the Bai Qi pockies to make a game, using them to report the weather’s situation of the week, or making an automaton monkey using servos. We decided to do the latter, since we would need to buy many pockies in order to get the cards, which would be somewhat expensive. Regarding on the project, the automaton monkey will move its limbs according to the commands given through a webapp, such commands are dancing, jumping, waving, etc. Since we do not have much time, we decided to break the workload into two parts: the overall skeleton of the monkey connected to the arduino yun, and the code behind the framework of the monkey.
Sidra decided to do the latter, while I did the design for the monkey, even though we ended helping each other in our tasks afterwards. We agreed that the design will be laser cut rather than 3D printed, since that process takes less time. At that time, I pondered how should the monkey “stand” on a surface while it is showing its moves. I thought of some iterations: a pole stuck on the surface connected in the back of the monkey, and a base that connects with the monkey’s tail. I decided to do the latter and made a wooden framework similar to those wooden “do-it-yourself” toys. The monkey would be hanging on its tail on a triangular base with consideration of the monkey’s center of mass. The design is the following: Monkey
Overall, we had some difficulties such as using non-working servos, having unexpected errors that we later fixed, and burning oneself with hot glue. However, this final project was a great experience to understand how a webapp can communicate with a device outside of its local connection. Here’s the LINK for the site.
Team: Billy & Sidra
Link to the app: http://192.168.50.184/~sm6450/speechapp/
We started off by creating the web app and laser cut monkey. The biggest issue in creating the app was positioning the various elements onto the page. Since this was being created for a phone and a desktop, we needed to make sure that the positioning of the various elements was just right for both screen sizes. After some trial and error, we figured out the final layout for the app.
After this, we worked on the jquery and Arduino codes for the app. In jquery, we created a function “onChange()” that would analyse the input text and figure out if it matched any of our preset dictionary words (like dance or jump). If it did, it would then carry out a command based on which word was matched. For each word, it would send out a command that would turn on and off specific pins (11, 12, 13, 5). The commands were sent through ajax in the form of a url (e.g. http://speechapp/arduino/digital/11/1). This url was then read by the Arduino Yun to turn on and off it’s specific pins. Based on these pins, the Arduino code had conditionals set with it to move the different servos to different positions. For example, the word “jump” would turn on pin 12 and turn off all the other pins on the Arduino. And based on this command, the Arduino would move the leg servos of the monkey up and down to imitate a jump.
After figuring out the code, we started to assemble our monkey with the servos. At this point, we had a lot of problems. Firstly, two of our servos were broken and so did not read any commands that we sent them. After replacing them, we hot glued all the monkey parts to each servo head and fixed them on top of the servos. We did not screw the servo heads into the servos and as a result, every time when the servos moved, the monkey’s limbs fell off. Here’s a sad video as an example:
After realising this problem, we used a heat gun to remove the hot glue and first screwed the servo heads on top of the servos before hot gluing the limbs back on. This was our finished monkey:
This was the back with the servos:
After assembling everything and tweaking the code with different commands, we tested our monkey. It took some trial and error to figure out the exact angles that we wanted to move the monkey based on the commands; however, eventually, we got it to move perfectly.
Here are videos of it waving and jumping:
This project was a lot of fun to make and taught me a lot about how to establish communication between a web application and an Arduino. I think my favourite part of the whole project was actually seeing the text commands transform into a physical output. Through this, we can introduce a new level of interaction in our web applications which I definitely want to explore more in the future.
Arduino Yun Code: