The purpose of the app is to enable people living in a foreign language environment to make use of the countless new words they meet every day. If the user encounters a new word that he wants to remember, he can type in the word and its meaning, then create or a choose a group where he wants to put the word and save it. On the list tab, he can also choose to display individual groups. The data is stored for offline use locally and is also uploaded to a database for back up and to serve the words to anyone through the DIYDictionary API.

The app is a hybrid application based on the Ionic Framework. Hybrid apps have quite a history, but to sum up they act like browser loading data from a local server, but much faster though. Therefore you can develop web apps using popular JS frameworks that will look like native applications. Of course the platform has its limitations, since it cannot handle super complex large applications fast. However, the Facebook app is also built on a similar platform, which shows the enormous potential in hybrid application.

Learning how to work with the framework took some time, but it also has a little bit of story behind it. Until a couple of months ago, I did not know anything about hybrid apps, when in my graphic design class, my other professor from Mashups mentioned Phonegap as a way to develop native looking apps with HTML, JavaScript and CSS. I immediately got interested in the topic and I looked up what it was, but due to the serious time deficiency I’m suffering from, I did not even try to start a project. But then one day I got a ticket to Shanghai for a weekend to attend a hackathon there. Me and my team set as our goals first of all to spread our CVs, then eat good food, explore the city and also lastly to learn something new. I came up with the idea of creating an app using Phonegap. After nearly 12 hours of work, we had a functioning demo that we presented after which unfortunately we had to come back to Abu Dhabi. Following my great experience in China I knew this is what I wanted to do for my Mashups project combined with my idea of creating a dictionary app for my own needs.

I started my project with some research on the different platforms available and I came to the conclusion that Ionic is currently the most stable and mature of all platforms. I learnt developing for Ionic by googling 3 things: “angular js Lynda”, “ionic framework tutorial”, “ionic framework example work flow”. I found three websites that were particularly useful:

• https://ionicframework.com/docs/
• https://blog.nraboy.com/2015/03/create-todo-list-mobile-app-using-ionic-framework/
• https://www.lynda.com/AngularJS-tutorials/Up-Running-AngularJS/154414-2.html

After finishing the app, I also had to fulfil the requirements of the assignment by creating an Express app with an API route serving some data. This was fairly easy after figuring out how hybrid apps work. The API documentation can be found here.

After going home, I would like to finish off the project by adding a “Quiz” tab, where you can test your knowledge, by creating an Icon, loading screen, and settings page. After that I also want to find a way to import all the words that I previously noted down in another app and then I’ll be ready to use my newly created app every day.

The API is built to serve the data users input. This document explains how the data is structured and how the API works. If you want to read more about the project itself, click here.

diyd.herokuapp.com has an example of data requests through the API.

https://diyd.herokuapp.com/api/all returns all the data stored in the database

https://diyd.herokuapp.com/api/{ID code} returns all the data related to the user with the ID code specified in the URL.

The ID property is the ID number of the user. It is stored 3 times which is not efficient, but I couldn’t find an easy way to get rid of them.

The rev property is needed when updating the database, so you shouldn’t worry about that too much.

The real content is stored in the content property. There is a list of Groups with all the words in it and a property called “langs”, where I store the names of all the groups.

When requesting all data, you receive a list of similar objects with the data for all users.

What, How, Why?

The website makes constantly requests to Instagram trough its API, looking for the most recent images with #money. It send the newest pictures across the screen. Whenever there is a new one, it also spins the globe, which stands for the metaphor “money makes the world go round”. I created the globe with THREE JS. I thought this little metaphor would be a small joke around which the project could be based.

Staying with the theme of money, the globe also present data on wealth distribution and population distribution by continents, which is always interesting to look at. A lot of people have misconceptions about the size and importance of Asia and think that it is unfair that it is becoming the most dominant region of the globe. But when you look at it, it is simply far larger than any other continent.

How does it work?

The Instagram part: After document load I send Ajax requests to the Instagram API every four seconds. In this request I ask for the most recent Instagram pictures with #money. Following that, I check if it is new or not. If yes it puts them in the not new list, I’ll put the image in a div that goes across the screen, and updates a variable that will spin the globe.

THREE JS part: First, I have to set up the scene, camera, renderer. Then I continue adding lights, the sphere, with the correct texture. Then I manually calculated the coordinates where I should put the bars on the globe and their sizes to correspond with the data I want to present. I store this information in an array. Then in a for loop I create all the bars. Following that I have a function for window re-size, which just helps me make the website more responsive. Lastly, I have the animation function where the globe is rendered and rotated.

Design

After the feedback in class, I tried to go for a much cleaner look. I tried the black background, but I didn’t think it fit well with the theme, so I went with white. I kept the map legend as short as possible and made the explanation about the images going across only “New #money”, again to keep it simple and self explanatory.

Challenges and the future

It was a constant challenge to look up how to do something, because there aren’t as many resources as I imagined and the documentation was not easy to navigate in. The other challenge is the design. As I mentioned earlier, the feedback in class was really useful and I tried to act upon it.

#1 What is graphic design?

“Graphic Design is a visual language, a language of cues and puns and symbols and allusions, of cultural references and perceptual inferences that challenge both intellect and the eye.” Helfand summed up nicely in this quote what graphic design means on the outer level, but deep down it is much more than that. It is being aware of cultures and news, being a master of time management, being creative, being a painter, a technical guy, a writer, an amazing communicator and the list does not end there. Graphic design is a many folded area somewhere between art and science.

#2 Create a timeline for everything

If you don’t plan ahead, you lost already. Often success depends merely on the time you dedicate to a project, but sometimes that is not enough. You might get stuck on the brainstorming process for days not realizing that the deadline is in two days. This is why a clear timeline helps. You know how much time you have to dedicate to each step in order to finish everything and also have time for other things.

#3 Always cover yourself

Do you have to print for the class in the morning? Print the day before! Nobody is interested in why the printer didn’t work that morning and your other excuses. If somebody asks you to come up with something, make sure you always have a backup plan and something to deliver. In real life a lot of things go wrong and you have to be prepared to deal with that.

#4 Creativity takes time and effort

I always tried adding an extra step, a creative twist to my assignments, like designing my own website for the blog, adding music to my blog posts, making blog posts out of inDesign files, creating a Google Chrome theme for an assignment instead of just a picture, creating interactive websites for demonstration… Sometimes it just clicks immediately and I have the perfect idea, but sometimes I have to spend hours brainstorming to make the ideas start flowing. It only works though if I’m actually thinking, using creative techniques and sketching. So it’s good to start thinking about the projects weeks before its due date.

#5 Ask!!!

Maybe this is the most important lesson I learnt. Until now I was always told what is expected exactly, but that is not how it goes in real life. You have to ask questions to get to know the needs of the client, to identify the problem. As my professor said, sometimes by talking about the problem, even the solution is revealed.

#6 Simplicity

I tend to overthink my concepts, trying to cramp several ideas into one picture. However, I learnt that this does not result in a good design. Your ideas don’t matter if people don’t get it. Which is easily the case as people do not read everything and they do not think too much when they look at an advertisement, so you have to adapt by making the concept behind your project clear and understandable. You might think this dumbs down the concept, but I think it makes the message more powerful.

#7 You are the doctor

For a long time I did not quite understand why did my professor only want one design per presentation. I thought having more means that you’re creative and you give the choice in the hands of the client so that they can choose what they like. But it doesn’t work like that! The graphic designer is the doctor and the client is the patient. The patient goes to the doctor because he has a sickness, a problem that needs to be solved. The doctor’s task is to cure the disease, and to solve the problem. His job is not to make suggestions, but to identify the symptoms and the needs of the client and adapt the solution to it.

#8 Always the strongest presentation wins

This is probably the most important lesson I learned and maybe the one that I will use the most in the future. During the class I realized always the presentation wins, not the idea. As my professor would say “We are visual mammals” and we decide quite often irrationally based on the visuals instead of the content behind it. Therefore you always have to present your project in the best possible way to persuade the audience about your expertise. This lesson is important to keep in mind when in the future I have to present my ideas to my boss or my sponsor. After taking this class, I would probably not walk in with an ugly black and white A5 presentation in comic sans.