Monday, July 21, 2014

Day 11: The Chirper App

A preview of my Chirper app. Click here to see the full app.

 

 

Project Experience 

 

This week our teacher Alex let us in on a great idea he has for a start up!  People can text or write posts of 140 characters or less and send them to their friends.  Ha!  Actually, this is an obvious rip off of a company not to be named featuring another bird sound.  We created our "Chirper" page using Javascript.  It was our first taste of a group project.

Thursday afternoon we were given about an hour of class time to draw out the structure of our project and name all our objects.  We each have a separate Firebase database to store our "chirps", but use the consistent name to access each other group member's chirps and info in their database.  It was overwhelming at first to think of connecting everyone's together and setting up a structure from scratch that was able to do so many things.  After some thought and group input, I was able to sketch out a rough draft of objects on the white board.  After class I went back over the objects with two of my classmates, Kiyo and Laura, and came up with a more definitive list.  I sent this screen grab to everyone to make sure we organized, spelled, and capitalized everything consistently.


From there the project became more individual.  I found the writing "chirps" pushing them onto my table of "chirps" relatively easily.  It took some thinking to sketch out the code for a Timeline of everyone's chirps.  I went over my thoughts with Alex and he said it sounded good.  Once I nailed down the logic of the Timeline it felt like the rest of the project fell out naturally.

Sunday evening several of our group met at camp to iron out some kinks.  I  gave a few tips to people. I really appreciated Laura sacrificing a good chunk of her time writing a Ajax call just to send me a private message so I could test my code.

Today we presented our projects.  Four of us were able to create Timelines.  Alex said this was the first time he had more than one person in the class achieve this.  I was very impressed with the visual design of several of my classmate's pages.  I even revised mine a bit after seeing theirs.  I was very pleased to be able to achieve full functionality with my project.

Overall, I think this project has been my best experience at camp so far.  It was challenging, interesting and was a great group bonding opportunity.


The Project

 

This is my Chirper App.   The home page is my personal Chirper page.

Note: You cannot add new chirps or update my profile on this site.  I secured the database so that you cannot write into it.  Hopefully that will prevent someone from spamming my database and/or accidentally deleting it.

Cool Things the App Does:

  •  Loads with my home page with profile picture and bio and a table of my chirps
  • Click "Add chirp" and add a new chirp to my table
  • Click "Edit Profile" to change my profile and bio
  • Click "Timeline" to view all my friend's chirps
  • Click the plus/minus sign next to a friend to friend or defriend them
    • Once defriended they no longer show up on your Timeline and you cannot see their profile until you friend them again.
  • Click the person icon next to a friend's name to see their profile and a table of their chirps
    • Laura was the only other person to successfully post her picture and profile on Firebase. I recommend you click on her.  I have a function to show the person's name and 'no bio included' if they did not have a picture and/or bio.
  • Click "Message" under a friend's picture to send them a private message
    • The message is color coded and shows up on the left or right side of the screen depending on who sent it.
    • No one else was able to successfully set up the private messages.  I again recommend clicking on Laura to see the message she sent me so I could test my code.

 

Future Ideas:

The project is basically fully functional right now.  We could always add a Troop group or expand the project in along those lines.  Maybe Chirper games?  We are just beginning to learn AngularJS.  I know form the older groups we will eventually rebuild this app using Angular.  I don't feel comfortable with the framework yet, but I think the code will be a lot cleaner with Angular.