Pair Up Express

group pic

by Tyla Smart, Mailot Guerrero, and Cedric Mendes

The Problem

We are addressing the issue of teenagers not knowing what to wear in the morning because of issues of the weather. 

Our Solution

We will build an app that will detect the weather for the day and then suggest what to wear for the day. It will also allow you to choose different options in order to personalize the app for the user’s preference. 

Technology & Modules Utilized

list 3 modules here and your reasons for using them

  • Computer Programming – We are using computer programming to build the app. 
  • Graphic Design – We are using graphic design so people can be visually drawn to the app.
  • User Interface Design – We are using user interface design so the user can make the app their own, through personal preferences. 

Concepts & Design
Avatars

Untitled

ww

Materials Needed

  • Ruby (language)
  • Xcode
  • Swift (language)
  • Gimp
  • Objective C (language)
  • iOS Simulator

The Audience / Consumer

The audience we are trying to reach are teenagers. Teenagers are always glued to their technology, and sometimes it causes them to not be aware of certain things, like the weather. This app will help them plan out what to wear for the day and also check the weather at the same time. 

Update Log / Journal

  • 07/08/2014 — We started the day off with a project idea for an app, but after our design review and our revision process, we decided to drop our project and come up with a new idea.  
  • 07/09/2014 — Today we completed our Imagine packet and we started to build our prototype. 

Imagine Worksheet:

  1. The issue we are addressing is not knowing what to wear in the weather. 
  2. We will build an app that detects the weather and then suggests what to wear for the day.
  3. This app will be geared towards teenagers.
  4. It will help teens come to a decision on what to wear in the morning.
  5. The 3 most important things it will do is it will retrieve weather data, it will have an avatar that will show the user what they should wear, and it will use user interface design to have the user personalize the app.

Explore Sheet

10 questions about Pair Up Express that need answering

1. What programming language are we using?

2. Are we going to have a completed prototype by wednesday?

3. Will there be a boys or girls version of the application?

4. Who is the app for?

5. How are we putting the avatars into the application?

6. Do we need any external devices, (like a barcode scanner for the clothes)?

7. If we are stuck on a certain part of the project, who will we go to?

8. How will we keep users motivated into?

9. Will we add animations to the avatars world?

10. How do we convert the background to a specify wallpaper dependent on the weather.

5 keywords to google about Pair Up Express

Closet, Organizer, Weather, Manager, Pair

3 examples of products that have parts like Pair Up Express

1. What’s In My Closet App

2. Touch Closet App

3. Netrobe Abb

Find at least 3 DIY projects that the Pair Up Express can “steal” from

What is it: An simple 2d airplane game

What parts of it can be used: We can use the part that teaches us how to implement a sprite into our app.

Codefellows

What is it: a way to go from one window to another

What parts can we use: we want to learn how to use the button to go to a settings page.

Button Mash

What is it: An small application that presents a ios banner notification the on the top the iphone after 5 seconds

What we can use from it: we will get the notification to remind the user to use the app when they are awake.

How to display iOS notification banner objective-c | The Agile Warrior

Find at least 3 Internet sites that have technical information Pair Up Express 

We need a basic introduction on how to use the spritekit.

Sprite Kit Programming Guide: About Sprite Kit

This is what drove our prototype to success.

raywenderlich

http://www.raywenderlich.com/55386/ios-7-best-practices-part-2

A basic tutorial on how to use and make sprites.

http://www.raywenderlich.com/42699/spritekit-tutorial-for-beginners

  • 07/10/2014 — Today, we worked on digitalizing the sketches of the avatars that were drawn. We made a powerpoint encompassing all of the key elements of our app (prototype). We also made a prototype of our weather app, using Xcode and Objective C to show how we would pull our weather information from a database. 
  • Weather 1                      Weather 2
  • 07/14/2014 — Today, we worked on polishing the prototype with following : Rain particles, test to see if the weather feed works on the iphone, and create a sprite kit that will utilize the avatar. We also updated the wiki with more avatars, and we started brainstorming ideas on what notifications to use.
  • afro boy                         bald white guy                    indian boy
  • 07/15/2014 — Today, we are working to make sprites interact with the weather feed of the app. We are also working to create an alarm & notification system for the program. We are working towards creating an array of 2-D avatars using Inkscape to insert into our program. 
  • Notifications
  • 07/16/2014 — Today, we tried to get the sprites into the program, but failed. We then moved on to putting the images in the program and that failed too. We also did our design review and started to edit our design based on the suggestions we got. 
  • Project Feedback:

     

    Should the users of the app be able to customize the avatars themselves, or would the program be better to ship with them already installed?

    What would make you want to use the app more so than others?

    Do you want to have animations, and if so, what type of animations would you want to see?

     

    • You may not need to actually make it so people could develop their own avatars. It could ship with its own range of images that a user could select from
    • I like the idea of having the dynamic wallpapers which interact with the avatar.
    • You could potentially if you did want to make their own avatar make it so you could select from elements like faces
    • What if you could turn our self image into an avatar to use
    • You may want to think about the service you are using because a lot of weather services have not the best service in New England
    • How far in depth could you go with customizing the weather app?
    • Would the application cache weather data so that the app would still be able to be used even if the phone or tablet was offline?
    • How would the app know what was in the closet?
  • 07/17/2014 — 
  • We added text to the app
  • We added our first avatar to the app and made it compatible to the weather feed
  • We added our first weather feed
  • We fixed the notification code
  • 07/21/2014 — 
  • We added a separate box to hold avatar images
  • We started the process of converting our code from objective c to swift
  • We created a responder program to replace the notifications system 
  • We debugged and trimmed the fat off the program
  • Main Screen   Displays the start up page
  •  Wake Up    Displays the wake up command
  • 07/22/2014 — 
  • We tried to insert gifs into the program, but that didn’t go so well
  • We started to convert the code from objective c to swift
  • We created shirts and hoodies for the avatars
  • purple shirt            red hoodie            light blue dress shirt
  • 07/23/2014 —
  • We created new clothes like dress shirts and baseball tees
  • We created under clothes like pants and shorts
  • We started to program the beginning survey using swift
  • We figured out how implement the app into our mobile devices 
  • 07/29/2014 —
  • We have completed the notification portion of the app
  • Tyla still needs to complete the girl avatars 
  • We still need to complete the grls clothing
  • We have figured out how to implement other specific avatars and clothing items into the app
  • 08/8/2014
  • We have designed new and improved girl avatars
  • We have implemented if/else statements in the code
  • We have had some tutorials with becket for swift programing
  • We will come tomorrow at 12:00 to work on project building
  • converse red girl avatar 2light blue tanktopblue shirt

8/11/14

  • We converted our application from Objective-C to swift, allowing us to make our code shorter with a alot less classes and swift is easier to use in general
  • Our app went from the objective-c form you saw above, to this: 

Viewcontroller.swift

Screen Shot 2014-08-15 at 4.09.42 PM

 

  • All the location features that were created in objective-c were easily able to convert to swift.
  • We were also able to able gifs (which you can only see in the app)
  • The coding has been reduced from 256 lines to only 46 lines. which is great since it also reduced the size of our app file.

Screen Shot 2014-08-15 at 4.39.33 PM

8/12/14

  • we added 3 new view controller A.K.A screens to the program [welcome.swift, survey.swift, avatar.swift]
  • Which each view controller we took time to see where wanted everything to fit into the view controller.

welcome.swift

 

Screen Shot 2014-08-15 at 4.21.45 PM

survey.swift

Screen Shot 2014-08-15 at 4.20.24 PM

avatar.swift

Screen Shot 2014-08-15 at 4.26.09 PM

 8/13/14

  • We began coding some more today. a few updates
  • Added switch variables to the survey, that way the switches on the survey work.

Screen Shot 2014-08-15 at 4.51.18 PM Screen Shot 2014-08-15 at 4.51.26 PM

 

  • We also added the code to the Avatar.swift class so that the avatar reacts to the switches being on or off.

Screen Shot 2014-08-15 at 4.51.18 PM Screen Shot 2014-08-15 at 4.51.26 PM

 

  • Now when we add sunglasses in,

Screen Shot 2014-08-15 at 5.11.27 PM

  • She has them on :D

Screen Shot 2014-08-15 at 5.12.47 PM

  • Now when we don’t have sunglasses.

Screen Shot 2014-08-15 at 5.11.14 PM

  • She doesn’t have sunglasses on D:

Screen Shot 2014-08-15 at 5.13.47 PM

 

8/14/14

  • We were able to successfully transfer data from one variable to another with the prepareforsegue command.

Screen Shot 2014-08-15 at 5.24.10 PM

 

8/15/14

  • We also had some of the avatar images fixed as some had white backgrounds.
  • Here’s a preview of the final product so far… 

 

Screen Shot 2014-08-15 at 5.40.27 PM Screen Shot 2014-08-15 at 5.40.44 PM Screen Shot 2014-08-15 at 5.40.55 PM Screen Shot 2014-08-15 at 5.41.22 PM

Reference Links

Leave a Reply