[JAVA] [NuxtJS x Rails API] Ich habe das Programmieren von Grund auf studiert und eine Geburtstags-App für meinen Lieblingscharakter erstellt.

Vorstellen

Mein Name ist yuki und ich bin ein Webingenieur, ein Zauberer, ein Online-Tutor, ein Veranstalter und so weiter. Ich habe ab Januar dieses Jahres Programmieren gelernt und nachdem ich mich bei DMMWEBCAMP eingeschrieben hatte, habe ich als Ingenieur gearbeitet und ungefähr 4 Monate sind vergangen.

Was Sie in der Vergangenheit gelernt haben, ist in diesem Artikel zusammengefasst. Schauen Sie also bitte vorbei. [Alumni] Was ich Leuten sagen möchte, die sich fragen, ob sie am DMM WEB CAMP teilnehmen sollen

Ergebnisse

NuxtJS/RailsAPI/AWS/Firebase [Web-App] https://tokidosaya.com 【GitHub】https://github.com/yuki-snow1823/project-saya Der Code wurde von einem Ingenieur überprüft, der uns zu Dank verpflichtet ist und derzeit überarbeitet wird. Bitte verzeih mir.

Was Sie durch Lesen dieses Artikels erhalten können

** [Technischer Aspekt] **

--NuxtJS × Rails API-Webanwendung stolperte Teil und Beispiel für Gegenmaßnahmen

• Die Geschichte der Beantragung der Nutzung der Twitter-API
• Andere Tipps, die Sie gelernt haben

** [beiseite] **

――Der Fluss von unerfahrener Programmierung zur Feier Ihres Lieblingsgeburtstags ――Mein Gedicht über "Idee und Programmierung"

Wenn jemand weiterlesen möchte, danke.

Wir stellen den Gott vor, der zuvor mit dem empfohlenen Charakter zusammengearbeitet hat

Dieses Mal möchte ich zwei Leute vorstellen, die meinem verrückten Projekt zustimmten. Illustrator Kraris und Webdesigner Momoringo.

Sie zeichneten schöne Bilder, dachten über das Design der Teile nach, kamen auf Ideen zur Größenanpassung, gaben Ratschläge zu Farben usw. Wie auch immer, sie arbeiteten uneingeschränkt zusammen. ..

In Bezug darauf ist Kraris ein Junior meines früheren Teilzeitjobs, und Momo Ringo ist ein Senior von DWC. Ich möchte mich noch einmal bei ihnen bedanken.

Empfehlung: Saya Tokido von Little Busters EX

　　　　 Illustration by Kraris

Das ist ein blondes Kind. Alles Gute zum Geburtstag. (21.10.) Ich werde hier kein detailliertes Szenario schreiben, aber es ist ein bisschen ** persönlich zu unbelohnt **, also möchte ich irgendwie glücklich sein, also habe ich beschlossen, diese App zu machen Ich kam an. Der Junge ist übrigens die Hauptfigur, Riki. Bitte erleben Sie es mit Little Busters und Little Busters EX, Animationen und Spielen.

Technologie-Story-NuxtJS x Rails API-Stolperstein beim Erstellen einer App und ein Beispiel für Gegenmaßnahmen

Hier finden Sie eine Zusammenfassung der Fehler und Gegenmaßnahmen, die bei der Erstellung außer der Twitter-API aufgetreten sind.

[Rails] gem'active_model_serializers' kann nicht installiert werden

Ich entschied mich für Gem Serializer, um json von der Rails-API-Seite zurückzugeben. Die Bundle-Installation wurde jedoch überhaupt nicht bestanden, und der folgende Fehler wurde angezeigt.

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

Dieses Problem wurde behoben, indem "Spring Stop" ausgeführt und anschließend die Bundle-Installation erneut ausgeführt wurde.

Es gibt einige Fehler bei der Bundle-Installation, aber aus meiner bisherigen Erfahrung habe ich den Eindruck, dass die Pfadangabe oft falsch ist. Ich denke, es ist eine gute Idee, welches Bundle zu machen und es einmal zu löschen.

[Rails] Miss: Ich habe den Namen der Klassenmethode und den Spaltennamen identisch gemacht

Ich kann nur sagen, dass dies dumm ist, aber nachdem ich eine Tabelle namens Counter table erstellt habe, habe ich die Spezifikation des Spaltennamens in "count" geändert. Wenn Sie sorgfältig darüber nachdenken, hatte Ruby ursprünglich eine solche Methode ...

counter_controller.rb

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

Ich habe so einen schrecklichen Code geschrieben, aber er hat gut funktioniert. Wir werden unser Bestes tun, um zu überarbeiten und besser umzusetzen. Ich möchte Ihnen sagen, dass es in dieser Angelegenheit keine Gegenmaßnahme gibt und dass Sie bei der Benennung vorsichtig sein sollten.

[Nuxt] Wenn Sie der Meinung sind, dass die Zeilen- und Spaltenspezifikationen in Vuetify nicht funktionieren ...

Ich habe mit einer Bibliothek namens Vuetify entworfen, aber manchmal wurde das Rastersystem nicht wie erwartet angewendet. Nachdem ich mir eine Weile Sorgen gemacht hatte, sah ich nach und fand einen Artikel wie diesen.

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

(Ich zitiere.)

v-app ist ein wesentliches Element für die Verwendung von Veutify. Vuetify-Komponenten müssen immer in das v-app-Element geschrieben werden. Wenn Sie Vuetify-Komponenten verwenden, ohne sie in die V-App einzuschließen, wird ein unerwartetes Verhalten oder eine unerwartete Anzeige angezeigt. Schließen Sie die Vuetify-Komponente wie unten gezeigt in die V-App ein.

(　ω) ^ ^ Sicher genug, ich habe es einfach nicht in "" eingeschlossen. Es wurde ein Gebot, es zu benutzen, nachdem man die Anleitung sorgfältig gelesen hatte.

Die Geschichte der Beantragung und Implementierung der Twitter-API

Dies war diesmal der Schock von Projekt 1, aber ich dachte, ich sollte das offiziell bereitgestellte Widget zum "Sammeln von Tweets mit Hash-Tags" verwenden. Als ich es nachschlug, stellte ich jedoch fest, dass der Support im Jahr 2018 abgelaufen war und ich mich als Twitter-Entwickler registrieren und die Funktion selbst erstellen musste.

Da es sich jedoch um eine Funktion handelte, die ich unbedingt implementieren wollte, entschied ich mich, sie von Grund auf zu untersuchen und anzuwenden.

[Artikel, auf die ich mich bezog] https://qiita.com/kngsym2018/items/2524d21455aac111cdee

Vielen Dank. Die Benutzeroberfläche auf der Twitter-Seite hat sich geändert, aber ich habe es fast genau so gemacht. In Bezug auf Englisch hatte ich es eilig, also ** habe ich alles auf Japanisch eingegeben, dann Google übersetzt (ich war überrascht über die jüngste Genauigkeit), den seltsamen Teil korrigiert und angewendet ** ..

Ich war in ungefähr 3 Tagen dort, aber als ich einen Satz machte, in dem es darum ging, ** als Hobby zu benutzen (kein Geld) ** und ** keine gefährlichen Handlungen zu machen **, war es für mich reibungslos. Ich fühle mich wie ich bestanden habe.

Die technische Geschichte endet als nächstes, aber ich werde einen weiteren Artikel darüber schreiben, wie man Hashtag-Tweets mit Gem Twitter sammelt! Ich möchte es auch im Tutorial machen!

Andere Tipps, die ich gelernt habe

Karte beim Tweeten? Ich möchte so etwas herausbringen.

Ich kannte den Namen der Sache nicht, die auftaucht, wenn ich den Link twittere, aber es ist mir gelungen, ihn zu implementieren. Der Name scheint ** Twitter Card ** zu sein. Ich habe mich gefragt, wie ich Nuxt im SPA-Modus implementieren soll, aber dieser wundervolle Artikel hat mich gerettet.

Ich möchte das OGP-Bild für die Twitter-Freigabe mit Nuxt (SPA-Modus) + Firebase festlegen.

Über diese Site können Sie in Echtzeit einchecken.

Ich möchte dem Erscheinungsbild von Illustrationen eine weiche Animation hinzufügen

Ich hatte gehofft, dass die Illustration leise herauskommt, aber mein Freund sagte mir etwas namens Animate.css. Dieses Mal hatte ich nicht vor, eine Mut-Rekodierung zu schreiben und eine Animation hinzuzufügen, also habe ich sie einfach mit CDN eingeführt und ihr einen Klassennamen gegeben, und eine flauschige Animation wurde hinzugefügt. Vielen Dank!

Beiseite

Von hier aus möchte ich die Gedanken und Gedichte zusammenfassen, die mich dazu gebracht haben, als Ingenieur aus Unerfahrenheit das zu machen, was ich komplett machen möchte. Da es sich um Selbstzufriedenheit handelt, wenden Sie sich bitte nur an diejenigen, die großzügig und nicht frustriert sind.

Der Fluss von unerfahrener Programmierung bis zur Feier eines empfohlenen Geburtstages (mit WEB-Designer, Illustrator)

Ich möchte die Geburtstags-App eines Charakters erstellen! Nach dem Nachdenken wurde es in der folgenden Reihenfolge abgeschlossen.

① Finde heraus, was der Geburtstag eines Charakters ist

** Die Schlussfolgerung hier war, eine Illustration zu posten oder eine Glückwunschbotschaft zu schreiben **. Daher wollte ich die Funktion zum Sammeln und Veröffentlichen von Tweets mit Hash-Tags einbeziehen.

② Ich brauche eine Illustration, also finde einen Illustrator und frage danach.

Ich konnte nicht zeichnen und wollte die Zeichnungen von Saya und Riki sehen, also fragte ich Kraris, der schon lange gearbeitet hatte.

③ Bei der Anordnung der Gegenstände musste nach jemandem gesucht werden, der mehr wusste als Kraris oder ich.

Kraris hatte auch Kenntnisse über die Anordnung und Farbe von Gegenständen, kam jedoch aufgrund von Gesprächen mit ihm zu dem Schluss, dass er auch Ratschläge von Personen erhalten würde, die als Webdesigner tätig sind, und nahm an Momo Ringo teil, einem Senior von DWC. Ich habe es erhalten.

④ Wissen Sie, dass Sie Twitter Developer beantragen müssen, um Hashtag-Tweets zu sammeln

Ich bewarb mich in unbekanntem Englisch, las das englische Dokument und schaffte es, es mit gem twitter umzusetzen Wieder wurde ich einmal von meinem leitenden Ingenieur betreut.

⑤ Ich möchte die Vorder- und Rückseite trennen, also ziehen Sie den Nuxt JS heraus.

Ich habe das schon oft veröffentlicht, aber dank dieses Tutorials. https://qiita.com/saongtx7/items/d97ef5aec393e704fd3f

Alles war ein Prozess, ** etwas zu brauchen → zu handeln, zu studieren **. Ich habe viel aus dieser Implementierung gelernt und möchte mich als Ergebnis persönlich weiterentwickeln.

Mein Gedicht über "Idee und Programmierung"

Ich denke, meine Stärke ist Kreativität. Bis jetzt bin ich ein bisschen stolz darauf, verschiedene Dinge zu tun, an die die Leute nicht denken können, und Dinge, an die die Leute nicht denken können, und Dinge, die zu nervig sind, um sie zu tun. Selbst wenn ich es in eine Form bringen wollte, hatte ich die Erfahrung, frustriert zu sein, weil ich es nicht konnte.

Es ist ungefähr ein halbes Jahr her, seit ich angefangen habe, Programmieren zu lernen, und ich habe das Gefühl, dass ich wieder ** "die Kraft zur Gestaltung meiner Ideen" ** verliehen habe. Gleichzeitig wächst das Gefühl, dass Programmieren allein nicht ausreicht.

Weil es Designer gibt, sieht die App besser aus, weil es Illustratoren gibt, können Sie Ihre Gedanken durch Bilder vermitteln, weil es Verkäufer gibt, Sie können verkaufen, was Sie machen, und weil es Manager und Direktoren gibt, konzentrieren Sie sich auf das Machen Ich kann es schaffen ... ** Dieses Mal habe ich erneut erfahren, dass ich wundervolle Apps und Produkte erstellt habe, weil verschiedene Leute hart mit verschiedenen Ideen arbeiten.

Ich schätze die Menschen um mich herum sehr. Vielen Dank.

schließlich

Ich war schockiert, als ich ein Spiel namens Little Busters spielte und das Ende sah, dem Saya Tokido und Riki, die Hauptfigur, folgten. ** Natürlich existiert es nicht wirklich, aber "Ich möchte, dass diese beiden Menschen glücklich sind." "Ich denke, es gibt nicht viele Menschen, die Apps für den Geburtstag des Charakters erstellen. → Lass es uns tun!" ** Es wurde mit dem Gedanken abgeschlossen.

Ich bin dankbar, dass ich gestalten kann, was ich machen möchte.

Ich werde weiterhin machen, was ich mag! Wenn ich nicht programmieren kann, aber ... möchte ich meinen Lieblingsgeburtstag feiern! Wenn Sie Fragen haben, können Sie sich gerne an uns wenden. Ich möchte diejenigen unterstützen, die gestalten wollen, was sie machen wollen.

Und wenn es zufällig einen wilden Mann gibt, der Saya Tokido und Riki mag und so weit gelesen hat ... Machen wir Saya After! !