[NuxtJS x Rails API] I studied programming from scratch, so I made a birthday app for my favorite character.

Self-introduction

My name is yuki and I am a web engineer, a magician, an online tutor, an event organizer, and so on. I learned programming from January of this year, and after enrolling in DMMWEBCAMP, I worked as an engineer, and about 4 months have passed.

What you have learned in the past is summarized in this article, so please have a look. [Alumni] What I want to tell people who are wondering whether to attend DMM WEB CAMP

Deliverables

NuxtJS/RailsAPI/AWS/Firebase [Web application] https://tokidosaya.com 【GitHub】https://github.com/yuki-snow1823/project-saya The code has been reviewed by an engineer who has taken care of it and is currently being refactored. Please forgive me.

What you can get by reading this article

** [Technical aspect] **

--NuxtJS x Rails API Web application stumbled part and examples of countermeasures --The story of applying for the use of Twitter API --Other tips that you learned

** [Digression] **

――The flow from inexperienced programming to celebrating your birthday ――My poem about "idea and programming"

If anyone would like to read on, thank you.

Before that, the introduction of the god who cooperated with the recommended character

This time, I would like to introduce two people who agreed with my unexpected project. Illustrator Kraris and web designer Momoringo.

They drew nice pictures, thought about the design of the parts, came up with ideas for adjusting the size, gave me color advice, etc. Anyway, they cooperated fully. ..

In relation, Kraris is a junior of my former part-time job, and Momo Ringo is a senior of DWC. Once again, I would like to thank them.

Recommendation: From Little Busters EX Saya Tokido

　　　　 Illustration by Kraris

This is a blonde child. Happy Birthday. (10/21) I won't write a detailed scenario here, but it's a bit ** personally too unrewarding **, so I want you to be happy somehow, so I decided to make this app. I arrived. By the way, the boy is the main character, Riki. Please experience it with Little Busters and Little Busters EX, anime and games.

Technology story-NuxtJS x Rails API stumbling block when creating an app and examples of countermeasures

Here, we will summarize the errors and countermeasures that were encountered during creation other than the Twitter API.

[Rails] gem'active_model_serializers' cannot be installed

I decided to use gem serializers to return json from the rails API side. However, bundle install did not pass at all, and the following error was displayed.

Could not find case_transform-0.2 in any of the sources
Run `bundle install` to install missing gems.

This issue was resolved by running spring stop and then running bundle install again.

There are quite a few errors around bundle install, but from my experience so far, I have the impression that the path specification is often incorrect. I think it's a good idea to do which bundle and delete it once.

[Rails] Miss: Class method name and column name are the same

I can only say that this is stupid, but after creating a table called Counter table, I changed the column name specification to count. If you think about it carefully, ruby originally had such a method ...

counter_controller.rb

    counter = Counter.find(1)
    counter.count = counter.count + 1

I wrote a horrible code like this, but it worked fine. We will do our best for refactoring and better implementation. I would like to tell you that there is no countermeasure for this matter and that you should be careful about the naming.

[Nuxt] If you think that the row and col specifications do not work in Vuetify ...

I was designing with a library called Vuetify, but sometimes the grid system didn't apply as I expected. After worrying for a while, I looked it up and found an article like this.

https://dev83.com/vue-vuetify-basic/

(I am quoting.)

v-app is an essential element to use Veutify. Vuetify components must always be written inside the v-app element. If you use Vuetify components without enclosing them in v-app, you will get unexpected behavior or display. Enclose the Vuetify component in v-app as shown below.

(　ω) ^ ^ Sure enough, I just didn't enclose it in <v-app>. It became a commandment to use it after reading the guide carefully.

The story of applying for and implementing Twitter API

This was the shock of Project 1 this time, but I thought that I should use the officially provided widget for "collecting tweets of hashtags". However, when I looked it up, I found that the support was cut off in 2018, and I had to register as a Twitter developer and create the function myself.

However, it was a function I really wanted to implement, so I decided to investigate from scratch and apply.

[Articles that I referred to] https://qiita.com/kngsym2018/items/2524d21455aac111cdee

Thank you very much. The UI on the Twitter side has changed, but I did it almost exactly like this. Regarding English, I was in a hurry, so ** I entered everything in Japanese, then Google Translate (I was surprised at the recent accuracy), corrected the strange part and applied ** ..

I went there in about 3 days, but when I made a sentence that emphasized ** using it as a hobby (no money involved) ** and ** not doing any dangerous acts **, it was smooth for me. I feel like I passed.

The tech story ends next, but I'll write another article about how to collect hashtag tweets using gem twitter! I also want to make a tutorial!

Other tips I learned

Card when tweeting? I want to put out something like that.

I didn't know the name of the thing that came out softly when tweeting the link, but I succeeded in implementing it. The name seems to be ** Twitter Card **. I was wondering how to implement Nuxt in SPA mode ... but this wonderful article helped me.

I want to set OGP image for Twitter sharing with Nuxt (SPA mode) + Firebase.

And you can check in real time by using this Site.

I want to add a soft animation to the appearance of illustrations

I was hoping that the illustrations would come out softly, but my friend told me something called Animate.css. This time, I didn't intend to write a guts recode and add animation, so I just introduced it on the CDN and gave it a class name, and it got a fluffy animation. Thanks!

Digression

From here, I would like to summarize the thoughts and poems that led me to ** make what I want to make completely ** as an engineer from inexperience. Since it is self-satisfaction, please proceed only to those who are generous and not frustrated.

The flow from inexperienced programming to celebrating a recommended birthday (with WEB designer, illustrator)

I want to make a character birthday app! After thinking, it was completed in the following order.

① Find out what a character's birthday is like

** The conclusion here was to post an illustration or write a congratulatory message **. Therefore, I wanted to include the function of collecting and posting tweets with hashtags.

② I need an illustration, so find an illustrator and ask for it.

I couldn't draw, and I wanted to see cute Saya and Riki's drawings, so I asked Kraris, who had been working for a long time.

③ When considering the arrangement of items, it was necessary to find someone who knew more than Kraris or myself.

Kraris also had knowledge about the arrangement and color of items, but as a result of talking with him, he came to the conclusion that he would also get advice from people who are active as web designers, and participated in Momo Ringo, a senior of DWC. I received it.

④ Know that you need to apply for Twitter Developer to collect hashtag tweets

I applied in unfamiliar English, read the English document and managed to implement it using gem twitter. Again, I was once taken care of by my senior engineer.

⑤ I want to separate the front and back, so pull out the Nuxt JS.

I've published this many times, but thanks to this tutorial. https://qiita.com/saongtx7/items/d97ef5aec393e704fd3f

Everything was a process of ** needing something → acting, studying **. I learned a lot from this implementation, so I would like to continue to develop personally as an output.

My poem about "idea and programming"

I think my strength is creativity. Until now, I have a little pride in doing various things that people can't think of, and things that people can't think of, and things that are too annoying to do. However, even if I wanted to make it into a shape, I had the experience of being frustrated because I couldn't do it.

It's been about half a year since I started learning programming, and I feel that I've been lending ** "the power to shape ideas" ** again. At the same time, there is a growing feeling that programming alone is not enough.

Because there are designers, the app looks better, because there are illustrators, you can convey your thoughts through pictures, because there are sales people, you can sell what you make, and because there are managers and directors, you concentrate on making it. I can do it ... ** I learned anew this time that I have created wonderful apps and products because various people are working hard with various ideas.

I really appreciate the people around me. Thank you very much.

at the end

I was shocked when I played a game called Little Busters and saw the ending of Saya Tokido and Riki Naoe, the main character. ** Of course, it doesn't actually exist, but "I want these two people to be happy." "I think there aren't many people who make apps for the character's birthday. → Let's do it!" ** I came to the completion with the thought.

I'm grateful to be able to shape what I want to make.

I will continue to make what I like! If I can't program, but ... I want to celebrate my birthday! If you have any questions, please feel free to contact us. I would like to support those who want to shape what they want to make.

And, if by any chance there was a fierce man who liked Saya Tokido and Riki and read it so far ... Let's make Saya After! !