[JAVA] [API NuxtJS x Rails] J'ai étudié la programmation à partir de zéro, j'ai donc créé une application d'anniversaire pour mon personnage préféré.

Auto-introduction

Je m'appelle yuki et je suis un ingénieur web, un magicien, un tuteur en ligne, un organisateur d'événements, etc. J'ai appris la programmation à partir de janvier de cette année, et après m'être inscrit à DMMWEBCAMP, j'ai travaillé comme ingénieur et environ 4 mois se sont écoulés.

Ce que vous avez appris dans le passé est résumé dans cet article, alors jetez un œil. [Alumni] Ce que je veux dire aux gens qui se demandent s'ils doivent participer au DMM WEB CAMP

Livrables

NuxtJS/RailsAPI/AWS/Firebase [Application Web] https://tokidosaya.com 【GitHub】https://github.com/yuki-snow1823/project-saya Le code a été revu par un ingénieur qui nous est redevable et est en cours de refonte. S'il vous plaît, pardonnez-moi.

Ce que vous pouvez obtenir en lisant cet article

** [Aspect technique] **

--NuxtJS × Rails API La création d'une application Web a trébuché et un exemple de contre-mesures

• L'histoire de la demande d'utilisation de l'API Twitter --Autres conseils que vous avez appris

** [De côté] **

――Le flux de la programmation inexpérimentée à la célébration de votre anniversaire préféré ――Mon poème sur "l'idée et la programmation"

Si quelqu'un souhaite continuer à lire, merci.

Présentation du dieu qui a coopéré avec le personnage recommandé avant cela

Cette fois, je voudrais vous présenter deux personnes qui étaient d'accord avec mon projet fou. Illustrateur Kraris et concepteur Web Momoringo.

Ils ont dessiné de jolies photos, réfléchi au design des pièces, proposé des idées pour ajuster la taille, donné des conseils sur les couleurs, etc. Quoi qu'il en soit, ils ont pleinement coopéré. ..

En relation, Kraris est un junior de mon ancien emploi à temps partiel, et Momo Ringo est un senior de DWC. Encore une fois, je tiens à les remercier.

Recommandation: Saya Tokido de Little Busters EX

　　　　 Illustration by Kraris

C'est un enfant blond. Joyeux anniversaire. (21/10) Je n'écrirai pas de scénario détaillé ici, mais c'est un peu ** personnellement trop ingrat ** Je veux que vous soyez heureux d'une manière ou d'une autre, j'ai donc décidé de créer cette application Je suis arrivé. Au fait, le garçon est le personnage principal, Riki. Faites-en l'expérience avec Little Busters et Little Busters EX, des animations et des jeux.

Histoire de la technologie - NuxtJS x Rails API Pierre d'achoppement lors de la création d'une application et un exemple de contre-mesures

Voici un résumé des erreurs et des contre-mesures rencontrées lors de la création, autres que l'API Twitter.

[Rails] gem'active_model_serializers' ne peut pas être installé

J'ai décidé d'utiliser des sérialiseurs de gem pour renvoyer json du côté de l'API des rails. Cependant, l'installation de l'ensemble n'a pas réussi du tout et l'erreur suivante s'est affichée.

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

Ce problème a été résolu en exécutant spring stop, puis en exécutant à nouveau l'installation du bundle.

Il y a pas mal d'erreurs autour de l'installation du bundle, mais d'après mon expérience jusqu'à présent, j'ai l'impression que la spécification du chemin est souvent incorrecte. Je pense que c'est une bonne idée de faire quel paquet et de le supprimer une fois.

[Rails] Miss: J'ai fait le même nom de méthode de classe et de colonne

Je peux seulement dire que c'est stupide, mais après avoir créé une table appelée Table Counter, j'ai changé la spécification du nom de colonne en count. Si vous y réfléchissez bien, ruby avait à l'origine une telle méthode ...

counter_controller.rb

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

J'ai écrit un code horrible comme celui-ci, mais cela a bien fonctionné. Nous ferons de notre mieux pour refactoriser et mieux implanter. Je voudrais vous dire qu'il n'y a pas de contre-mesure à ce sujet et que vous devez faire attention à la dénomination.

[Nuxt] Si vous pensez que les spécifications de ligne et de colonne ne fonctionnent pas dans Vuetify ...

Je concevais avec une bibliothèque appelée Vuetify, mais parfois le système de grille ne s'appliquait pas comme prévu. Après m'être inquiété pendant un moment, j'ai cherché et j'ai trouvé un article comme celui-ci.

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

(Je cite.)

v-app est un élément essentiel pour utiliser Veutify. Les composants Vuetify doivent toujours être écrits dans l'élément v-app. Si vous utilisez des composants Vuetify sans les inclure dans v-app, vous obtiendrez un comportement ou un affichage inattendu. Insérez le composant Vuetify dans v-app comme indiqué ci-dessous.

(　ω) ^ ^ Effectivement, je ne l'ai simplement pas enfermé dans <v-app>. C'est devenu un commandement de l'utiliser après avoir lu attentivement le guide.

L'histoire de la demande et de la mise en œuvre de l'API Twitter

Ce fut le choc du projet 1 cette fois, mais j'ai pensé que je devais utiliser le widget officiellement fourni pour "collecter des tweets de hash tags". Cependant, lorsque je l'ai recherché, j'ai constaté que le support avait expiré en 2018 et que je devais m'inscrire en tant que développeur Twitter et créer moi-même la fonctionnalité.

Cependant, comme c'était une fonction que je voulais vraiment implémenter, j'ai décidé d'enquêter à partir de zéro et d'appliquer.

[Articles auxquels j'ai fait référence] https://qiita.com/kngsym2018/items/2524d21455aac111cdee

Merci beaucoup. L'interface utilisateur du côté Twitter a changé, mais je l'ai fait presque exactement comme ça. En ce qui concerne l'anglais, j'étais pressé, alors ** j'ai tout entré en japonais, puis Google traduit (j'ai été surpris de la précision récente), corrigé la partie étrange et appliqué ** ..

J'y suis allé dans environ 3 jours, mais quand j'ai fait une phrase qui mettait l'accent sur ** l'utiliser comme passe-temps (pas d'argent impliqué) ** et ** ne pas faire d'actes dangereux **, c'était facile pour moi. J'ai l'impression d'avoir réussi.

L'histoire technique se termine ensuite, mais j'écrirai un autre article sur la façon de collecter des tweets de hashtag en utilisant gem twitter! Je veux aussi le faire dans le tutoriel!

Autres conseils que j'ai appris

Carte lors du tweet? Je veux publier quelque chose comme ça.

Je ne connaissais pas le nom de la chose qui apparaît lorsque je tweet le lien, mais j'ai réussi à l'implémenter. Le nom semble être ** Twitter Card **. Je me demandais comment implémenter Nuxt en mode SPA, mais ce merveilleux article m'a sauvé.

Je veux définir l'image OGP pour le partage Twitter avec Nuxt (mode SPA) + Firebase.

Et vous pouvez vous enregistrer en temps réel en utilisant ce Site.

Je souhaite ajouter une animation douce à l'apparence des illustrations

J'espérais que l'illustration sortirait doucement, mais mon ami m'a dit quelque chose qui s'appelait Animate.css. Cette fois, je n'avais pas l'intention d'écrire un recodage des tripes et d'ajouter une animation, alors je l'ai juste introduit avec CDN et lui ai donné un nom de classe, et une animation pelucheuse a été ajoutée. Merci!

De côté

À partir de là, je voudrais résumer les pensées et les poèmes qui m'ont conduit à ** faire ce que je veux faire complètement ** en tant qu'ingénieur par inexpérience. Puisqu'il s'agit d'auto-satisfaction, veuillez ne procéder qu'à ceux qui sont généreux et non frustrés.

Passer de la programmation inexpérimentée à la célébration d'un anniversaire recommandé (avec concepteur WEB, illustrateur)

Je veux créer l'application d'anniversaire d'un personnage! Après réflexion, il a été terminé dans l'ordre suivant.

① Découvrez ce qu'est l'anniversaire d'un personnage

** La conclusion ici était d'afficher une illustration ou d'écrire un message de félicitations **. Par conséquent, je voulais inclure la fonction de collecte et de publication de tweets avec des balises de hachage.

② J'ai besoin d'une illustration, alors trouvez un illustrateur et demandez-le.

Je ne pouvais pas dessiner et je voulais voir les dessins mignons de Saya et Riki, alors j'ai demandé à Kraris, qui travaillait depuis longtemps.

③ Lors de l'examen de la disposition des objets, il était nécessaire de chercher quelqu'un qui en savait plus que Kraris ou moi-même.

Kraris avait également des connaissances sur la disposition et la couleur des articles, mais après avoir parlé avec lui, il est arrivé à la conclusion qu'il recevrait également des conseils de personnes actives en tant que concepteurs de sites Web et a participé à Momo Ringo, un senior de DWC. Je l'ai reçu.

④ Sachez que vous devez demander à Twitter Developer de collecter des tweets de hashtag

J'ai postulé dans un anglais inconnu, lu le document anglais et réussi à l'implémenter en utilisant gem twitter Encore une fois, j'ai été pris en charge par mon ingénieur principal.

⑤ Je veux séparer l'avant et l'arrière, alors retirez le Nuxt JS.

Je l'ai publié plusieurs fois, mais grâce à ce tutoriel. https://qiita.com/saongtx7/items/d97ef5aec393e704fd3f

Tout était un processus de ** besoin de quelque chose → d'agir, d'étudier **. J'ai beaucoup appris de cette implémentation, donc j'aimerais continuer à me développer personnellement en tant que sortie.

Mon poème sur «l'idée et la programmation»

Je pense que ma force est la créativité. Jusqu'à présent, je suis un peu fier de faire diverses choses auxquelles les gens ne peuvent pas penser, des choses auxquelles les gens ne peuvent pas penser et des choses trop ennuyeuses à faire. Cependant, même si je voulais en faire une forme, j'ai eu l'expérience d'être frustré parce que je ne pouvais pas le faire.

Cela fait environ six mois que j'ai commencé à apprendre la programmation, et je sens que je donne à nouveau ** «le pouvoir de façonner mes idées» **. Dans le même temps, on a de plus en plus le sentiment que la programmation seule ne suffit pas.

Parce qu'il y a des designers, l'application est meilleure, parce qu'il y a des illustrateurs, vous pouvez transmettre vos pensées à travers des images, parce qu'il y a des vendeurs, vous pouvez vendre ce que vous faites, et comme il y a des managers et des réalisateurs, vous vous concentrez sur la création Je peux le faire ... ** J'ai appris à nouveau cette fois que j'ai créé des applications et des produits merveilleux parce que diverses personnes travaillent dur avec diverses idées.

J'apprécie vraiment les gens autour de moi. Merci beaucoup.

à la fin

J'ai été choqué quand j'ai joué à un jeu appelé Little Busters et que j'ai vu la fin suivie par Saya Tokido et Riki, le personnage principal. ** Bien sûr, cela n'existe pas réellement, mais "Je veux que ces deux personnes soient heureuses." "Je pense qu'il n'y a pas beaucoup de gens qui créent des applications pour l'anniversaire du personnage. → Faisons-le!" ** C'était complété par la pensée.

Je suis reconnaissant de pouvoir façonner ce que je veux faire.

Je vais continuer à faire ce que j'aime! Si je ne peux pas programmer, mais ... je veux fêter mon anniversaire préféré! Si vous avez des questions, n'hésitez pas à nous contacter. Je voudrais soutenir ceux qui veulent façonner ce qu'ils veulent faire.

Et, si par hasard il y a un homme féroce qui aime Saya Tokido et Riki et a lu jusqu'ici ... Faisons Saya After! !