I participated in the 2nd Affiliatethon. The preparation and the whole day of the hackathon.

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.

Background Knowledge What is an Affiliate Son?

The project is to create a website using affiliates in one day. Affiliate + Marathon. This year's event is jointly organized by Rakuten, Recruit, and Yahoo, and the requirement is to use each company's API and affiliate services.
At the end of the day, there will be a presentation, where we will evaluate each other's achievements for the day. Then the real competition begins, and affiliates compete for a month's worth of commissions for the month after that. The problem is that it is a short period of time.

First, preparation 6/18-6/21

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 seemed to work. 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.
Set up an instance in AWS and even assign an ElasticIP. Domain name will be obtained after the name is decided. I decided to use a framework for this kind of hackathon, and reviewed how to use cakePHP again. Well, 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 of the site, most of the first round of the project used bootstrap, so I decided to use it as well. It certainly looks stylish, but I hadn't tried it because it wasn't easy to use, 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 we have a team. I've memorized the flow of git add ➡ commit ➡ pushu. I'll use Cacoo online for site planning. I'll use photoshop for screen design.
It now looks as if we can go through the entire process of site planning ➡ mock-up creation ➡ screen creation ➡ server-side creation ➡ release.

On the day 6/22

I really wanted to attend the LT on June 21, the eve of the event, but I couldn't make it due to sudden overtime work. I had to work overtime to make it, but I couldn't make it. I even made slides in keynote, but I'll do it next time. Of course, this was my first attempt at LT.

8:00 Concept is finalized.

I thought about the story again, and the concept was somewhat solidified. I wanted to provide a venue to showcase the passionate story that led up to the exhibit.
Auctions are, by their very nature, usually for used items, but the degree and condition of the used items can be totally different depending on the user's "feelings" about the item. In particular, guitars, cameras, and other items that are strongly oriented toward hobbies are even more so, and there must be a "story" behind the item, such as the background that led to its purchase, thoughts, episodes that occurred during use, and so on. Until now, for example, guitars were selected only by the model year and the type used by whom, etc., and no matter how carefully they were used, they were put in the same ring with other sellers who did not know much about them just because they were "used". Isn't that quite disconcerting for that person? I cared about this person so much! I thought it would be nice to have a place to talk about how passionate I was about this person. Also, for those who are considering bidding, until now the only criteria for selecting a product in a side-by-side line were price, model, location, etc. Moreover, since they do not know who they are bidding against, they do not know what kind of person they are bidding against. Moreover, since they don't know who they are bidding against, they don't know how the item was used, and a certain creepiness arises there. If I read the passionate thoughts and feelings, and if I could "sympathize" with them, or if I could understand the person's "personality" well, wouldn't I be able to bid more comfortably? Moreover, even after winning the bid, I would be able to use it more carefully. The feelings of the previous user came along with it. That's what I 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

Arrived at the venue in Ginza. There were still about 10 people there? I was relieved to see that it was unexpectedly quiet. I heard that there was some kind of team formation at the eve of the festival, so I thought that everyone was already in a team, and that they had already started creating their teams and were already in a state of excitement, 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 we started. Those with red cards got together and discussed whether they wanted to form teams. Since everyone seemed to have somewhat different ideas, it was decided that for now we would start separately, and if it seemed impossible for me to plan my own, I would take advantage of 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 items on other sites, or is there some kind of rule?
Yahoo! was able to add an affiliate link to any listing. Neither seemed to be a problem, so we set to work.
We talked with the people sitting at the same table. We decided to have the people with red cards at the same table. One person came from Aomori, and I am also from Shizuoka, so I felt the scale of this event. I learned 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 they are all unique and attractive in common.

11:30 Work

The first step was to try using the Yahoo! API, which was a bit of a challenge since I still don't fully understand how the API works. Finally, I succeeded in getting the title, image, url, etc. by throwing in the Yahoo! If I put the link on the website with the affiliate link, the affiliate is successful. I think I can do it.

Next, I drew up the site map and screen structure by hand, trying to keep it as simple as possible, since there was only so much I could do in one day. There are four views: the top page, the story creation page, the listings page, and the story viewing page. All of them 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. I wanted to use cakePHP, but I couldn't master it, so I gave it up.
The database is also super simple, using MySQL and only one table. Auction ID, title, hot message, image URL, and listing page URL rows are created.
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. I think I've made it through the whole process so far. I hadn't done any work on the look and feel of the site, so I started decorating the views. Using bootstrap as planned.
I downloaded bootstrap and was going to make it myself from scratch, but after a little work I realized it was going to take too much time, so I gave up. I found a useful sample on the bootstrap site, so I copied it in its entirety and pasted it into all the view files. What a lack of maintainability. Probably the worst thing to do. No, I don't have time to think about it. Kopi pepi pepi pepi...
It looks kind of cool, but I don't understand the minor modifications at all. The buttons are not centered, and the text overlaps with the top menu. It's pretty weird. For now, I'm going to ignore it and make all the view files look like that. I think it's important to make it look like that.

17:00 Last spurt

About 70% concentration. I am getting tired little by little. The overall flow of the project is somewhat completed, so I begin to make minor corrections.
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! Time up after quite a few compromises.

19:00 Presentation and reception

One team at a time presented their work. Most of them were individual creations. It was lodging search, tour search, train search, color search, guitar search... Everyone was interesting in their own way. The technically interesting ones 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), which allows users to arrange panels that were caught in a search in a three-dimensional world and freely change the position and size of the panels in that space. (As expected!). The service is called "GuriGuri" (created by Mr. Mitsuno mentioned earlier!).
I also finished my presentation successfully? I finished my presentation. I couldn't show all the pages because the network wasn't connected, but I hope I was able to talk a little about what is 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 is so good that I can't wait to see the others' presentations.
At the end of the session, we voted for each other on what we thought was the best achievement of the day! Each person had one vote, and two people voted for my service. I was very happy to receive two votes for my service, as it was my first time participating!
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.)
Although technically we were not quite there yet, maybe some of you were dissatisfied with the current auction and sympathized with us. It was a very good encouragement for the future. The real deadline for entries 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.


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 a lot of fun.
I can't wait to use the three.js library recommended by Mr. Mitsuno.