Start electronics 
photo credit: @superamit via photopin cc
Hello, this is Bono.
This is the first time I participated in a hackathon, so I documented the preparations I made and the entire day of the event.
コンテンツ
What is a Hackathon?
As I believe no explanation is needed, this term was coined from the words "Hack" and "Marathon.
This is an event where engineers, designers, planners, etc. gather and team up to create something interesting in a short period of time.
What is an affiliate son?
Coined from affiliate + marathon.
This project is a kind of hackathon, where you can create a website using affiliates in one day.
This year's event is jointly organized by Rakuten, Recruit, and Yahoo, and requires the use of each company's API and affiliate services.
At the end of the day, there is a presentation where participants evaluate each other's achievements of the day.
And that's where the real competition comes in: affiliates then compete for a month's worth of commissions for a month. The problem is that it is a short period of time.
Pre-participation state of mind
As this was my first hackathon, I was quite excited to participate.
Six months have passed since I decided to become a Web engineer, and I have studied hard in my own way, but I really feel that the reason I have made it this far is because I truly love the world of the Web.
I know that I still lack technical skills and know-how, but I believe that I will never grow if I say things like, "Not until I have a little more knowledge.
As Takano-san said at the CSS Nite I recently attended, I am reminded of the saying that work always comes with higher skills than one's own (Tamori quote).
So I, too, decided to participate with my best intentions.
Prepared 6/18/2013 - 6/21/2013
Thinking specifically about auctions
In a sense, it was easy to narrow down the search, since the condition this time was to use the services of the above three companies. When we searched, we found that there were many standard items such as lodging search and shopping.
I decided to create a service related to auctions, which I often use in my private life.
As for ideas,
- Auction tree, a tree that grows with the number and amount of bidders
- A collection of only character items, Charaoke
- Sites that use an easy to compare UI
Etc. etc.
Hmmm, none of them are crisp.
While the idea was not solidified, we decided to just make preparations so that the work would proceed smoothly on the day of the event.
Prepare deployment environment and software
Set up an instance in AWS and even assign an ElasticIP. Domain acquisition will be done after the name is decided.
I decided on my own that these hackathons use a framework, and reviewed how to use cakePHP again.
I don't think I can use it at all. I have no choice but to make it with legacy PHP.
As for the look and feel, most of them were using Bootstrap when I looked at the first edition, so I decided to use it myself.
It certainly makes it look stylish, but I hadn't touched it because it wasn't user-friendly, but I tried again. It still feels a little strange. Well, I'll do my best on the day.
I'm going to try using Github in case I have a team. This is also the first time.
I memorized the flow of git add ➡commit ➡push.
Use Cacoo online for site planning.
Screen design is in photoshop.
It now looks as if we can go through the entire process of site planning ➡ mock-up creation ➡ screen creation ➡ server-side creation ➡ release.
Record of the day 2013/6/22
Not able to attend the eve of the festival.
I really wanted to attend the 6/21 LT on the eve of the event, but I couldn't make it due to sudden overtime work.
The location of Shizuoka makes it very difficult to hold the event on a weekday.
I even made slides in keynote, but I'll do it again next time. Of course, this was my first attempt at LT, too.
8:00 Concept solidified just before the start of the event.
I thought about the story again, and the concept was somewhat solidified.
We wanted to provide a venue to showcase the passionate story that led to the exhibit.
Auctions are, by their very nature, used goods, but the degree and condition of the used goods are completely different depending on the user's "feelings" about the item.
Especially for items with a strong hobby orientation, such as guitars and cameras, there should be a "story" behind the purchase, such as the background, thoughts, and episodes that occurred during use.
Until now, for example, guitars were selected only by what year model, who used it, etc., and no matter how carefully they were used, they were put in the same ring with other unfamiliar sellers just because they were "used".
Isn't that quite disconcerting for that person?
I cared about him so much! I thought it would be nice to have a place where I could talk about my passionate feelings.
Also, for those who are considering bidding, until now the only criteria for selecting products lined up side by side were price, model, location, etc.
Moreover, since we don't know who they are, we don't know how they were used, and this is where a certain weirdness arises.
If you read the passionate thoughts and feelings, and if you can "sympathize" with them, or if you know the person's "personality" well, wouldn't you feel more comfortable bidding? Moreover, even after winning the bid, we could use it more carefully.
The feelings of the previous user came with it. That's what we thought.
This is why we came up with the "Story to Auction " service, meaning the story from the time you buy something to the time you put it up for auction.
(By the way, I came up with this name 10 minutes before the presentation on the day of the hackathon and revised it in a hurry.)
10:00 Start
Arrive at the venue in Ginza.
Still about 10 people? It was unexpectedly quiet, which was a relief.
I heard that teams were organized at the eve of the festival, so I thought that everyone was already in a team and had already started creating their own work, but from the looks of it, everyone seemed to be participating individually.
I wanted a teammate, so I dangled a red card and sat down.
First the rules were explained, and then we started.
Those with red cards got together and discussed whether or not they wanted to team up. Since everyone seemed to have somewhat different ideas, it was decided that we would start separately for the time being, and if our own plans seemed impossible, we would take advantage of the others.
11:00 Information gathering and exchange
I asked a Yahoo Auction developer named Mr. Mitsuno if the above concept was feasible. The following two points were questionable.
- Technical Methods for Affiliates Using Yahoo Auction API
- Is it OK to promote your own exhibits on other sites, or is there some kind of rule or regulation?
Yahoo! was able to add an affiliate link to any listing. Neither seemed to be a problem, so we set to work.
Talking with people sitting at the same table.
It was decided that the red card holders would also be at the same table.
Some people came from Aomori, and I am also from Shizuoka, and I felt the scale of this event. I found out later that there was also a person from Hiroshima.
The probability of meeting a freelancer is unusually high in such a place. Well, that's not surprising. But still, it is interesting to see so many different types of people.
And everyone has a unique personality in common, with a glint in their eyes.
11:30 Start of work
The first step is to try using the Yahoo! API.
I had a little difficulty because I still do not fully understand how the API works.
Finally, we succeeded in getting the title, image, url, etc. by throwing in the Yahoo! ID listed on the Yahoo!
If you add your affiliate link to the link there and place it on your website, you have successfully become an affiliate.
Yeah, I kind of feel like I can do it.
12:30 Consider screen structure and site map
Next, the screen structure and site map were hand-drawn.
Since there is only so much that can be done in a day, I tried to keep it as simple as possible.
There are four views: the top page, the story creation page, the list of exhibits page, and the story viewing page.
All the software can be created based on the auction ID, so there is no need to do any authentication work, which is not my favorite thing to do. All the software is written in PHP; I wanted to use cakePHP, but I couldn't master it, so I gave it up.
The database is also super simple, using MySQL, with only one table.
Create the Auction ID, title, hot message, image URL, and listing page URL lines.
In addition to the views, PHP files are created to redirect to the listing page after storing to the database.
15:00 Midway point
The session ended at 7:00 p.m. I was still 90% focused.
Have we made a complete flow so far? I hadn't tinkered with the look at all, so I started working on the view decorations. Use bootstrap as planned.
At first, I was going to just download bootstrap and build it myself from scratch, but after a little work, I realized it was going to take too long, so I gave up.
I found a useful sample on the bootstrap site, so I copied it in its entirety. I copied the whole thing and pasted it into all the view files.
Or rather, what a lack of maintainability.
Probably the most unwise thing to do. No, I don't have time to think about it. Kopi pepi pepi...
It looks kind of cool, but I don't understand the slight modifications at all. The buttons are not centered, and the text overlaps with the top menu. It's pretty weird.
Ignore it for now and make all view files look like that. I think it is important to make it look like a single view file anyway.
17:00 Last spurt
About 70% concentration. I am getting tired little by little.
Now that the overall flow of the project is somewhat complete, we begin to make minor changes.
The font of the title, the tagline of the home page, the description, the placement of the buttons, and the way the image list is arranged.
Hmmm, bootstrap difficult!
The time is up after a considerable compromise!
19:00 Presentation and reception
One team at a time presented their work. Most were created by individuals.
It was lodging search, tour search, train search, color search, guitar search... everyone was interesting in their own way.
The two services that I thought were technically interesting were a service that uses FLASH to introduce the items on display by a girl, and a service called "Guriguri" (created by Mr. Mitsuno mentioned earlier.) It allows users to freely change the position and size of panels in a 3-dimensional world by lining up panels that were caught in a search. (As expected!). The service is called "GURIGURI" (created by Mr. Mitsuno mentioned earlier!).
I also finished my presentation successfully? The presentation was over.
I couldn't show you all the pages because I couldn't connect to the network, but I hope I could tell you a few things that are missing from the current auction.
On the way, Domino's Pizza and beer are delivered, and we listen to other people's presentations while drinking. This time was irresistibly enjoyable.
At the end of the day, the participants voted on what they thought was the best result of the day! The final vote was cast by the participants to determine today's champion.
Each person had one vote, and two people put in two votes for my service. I am happy about this for my first participation!
The best non-developer participant was one person with 4 votes, and I believe there was one person with 3 votes, so let's take a good look at it and say that he was actually in third place (although there were several teams tied for third place). (There were several teams tied for third place, though.)
Maybe some of you were not technically ready yet, but you were frustrated with the current auction and sympathized with us.
It was a very good encouragement for the future.
The real entry deadline is in a week, so I'll try to make the service a little more user-friendly. In the meantime, let's get a domain name. Maybe storyauc.com for short.
We would like to thank everyone who participated in this event for their hard work.
Finally.
So it was a good first hackathon.
After six months of hard work, I finally have at least one foot in the ring.
I would like to improve my skills and knowledge more and become a winner.
But still, web development is fun, isn't it? I can't wait to use the three.js library recommended by Mr. Mitsuno.
＼電子工作歴9年の私のイチ押し！ELEGOOの電子工作キット／
