DEV Community: Takeo

- Cyber Muse - Music submission app has been released! (Personal Development)

Takeo — Fri, 27 Nov 2020 21:13:20 +0000

Introduction

I developed a music submission app!

Website: https://cyber-muse.com

Apple Store: https://apps.apple.com/app/id1511131064

Google Play:https://play.google.com/store/apps/details?id=com.front_music

We use React and React Native as our development languages.

I have done everything from development to operation on my own.

Impressions about React & React Native

It's been about a year since I started writing React, and it was my part-time job that inspired me to learn React. Before that, I wasn't really interested in front-end stuff, and I wrote a lot of Python. My part-time job was mainly in React (JS), so I started learning it after I got an interview. The frequency of my part-time job was about 8 hours a day, twice a week.

React.

React is very easy to write in my opinion. Personally, I didn't like to write js in script in html or in a js file independent of UI. Isn't it hard to see?
If there's one thing you can stumble upon in React, it's the concept of state.
It's hard to understand the concept around hooks. I'm not sure if there is a better article in Japanese on this subject.
You can read it here: https://iqkui.com/ja/a-complete-guide-to-useeffect/
The other thing is an exception, but it's file uploader-related. There is no file uploader that can be used for GraphQL, which connects the back-end and front-end. I don't think it's a good idea to upload files through GraphQL in the first place. In the back end, I used Prisma or [Docker](https:// I've been using Prisma or Docker on the backend, so what's the point?
I won't write about the backend in this article because I don't want to write about it.
I'm going to write React Native as well, after getting used to React.

React Native.

I think the most difficult part of React Native is the preparation before writing the code. If you don't know the settings of Xcode or Pod for iOS, the build will fail. My part-time job was operating an app, so I had to build something that was already completed. The build time was about 5 to 10 minutes. So if you're not used to it, you might fail to build it when you're not close to it. If you're not used to it, you might fail to build and get stuck in the middle.
　So, in the beginning of my mobile app development, I had a lot of problems, but now that I'm able to develop both iOS and Android apps, I feel it's OK.
　Yes, this is the advantage of React Native, in my opinion. If I wanted to develop iOS and Android in a native language, I'd have to learn both swift and java; with React Native, there's almost no need to tinker with the UI, although there are certainly some differences. All you have to do is learn how to build and release. The only thing I'd like to mention is that it's time to manipulate files within the app. Selecting and uploading photos. What's the bug if you don't know, huh? The last thing I'll say about React Native's UI.　

In the last section, I'll talk about React Native's UI, which has a lot of open source components that are useful. It's a good idea to avoid using github releases whose latest version is two years old. The other thing I really appreciate about css flex is that it's very useful. The key words are flexDirection, justifyContent, and alignItems. If you have these three, the screen will be neatly arranged.

This is my honest opinion about React Native.

About website animation.

In fact, we recently updated our website to incorporate animation.
You can check it out at https://cyber-muse.com
All animations on this website use the module react-spring.
You can find it here: https://www.react-spring.io/
I would like to introduce this module as if you could add scrolling control to it to create at least one website of my own.

At the end

With React and React Native you can create websites and apps like this! I hope it will be helpful to you.

Website: https://cyber-muse.com
Apple Store: https://apps.apple.com/app/id1511131064
Google Play: https://play.google.com/store/apps/details?id=com.front_music

Translated with www.DeepL.com/Translator (free version)

- Cyber Muse - 音楽投稿アプリをリリースしました！（個人開発）

Takeo — Fri, 27 Nov 2020 21:07:51 +0000

初めに

音楽投稿アプリを開発しました！

ウェブサイト：

https://cyber-muse.com

Apple Store:

https://apps.apple.com/app/id1511131064
Google Play:

https://play.google.com/store/apps/details?id=com.front_music

開発言語はReactとReact Nativeを使用しています。

開発から運用まで全て個人で行っています。~~開発から運用まで大変だったことなど色々書いていきたいと思います。~~

React & React Nativeについての所感

気づけばReactを書き始めてから1年ぐらいがたってしまいました。Reactを学ぶきっかけとなったのはアルバイトです。それまではフロントエンドについてはあまり興味がなく、Pythonをよく書いていました。バイト先ではReact(JS)がメインだったので面接に受かってから学び始めました。バイトの頻度は週二回1日8時間くらいでした。

React

Reactは個人的にすごく書きやすい。個人的にhtml内のscriptの中やUIとは独立したjsファイルにjsを書くのが嫌いだったので。見にくくないですか？
Reactでつまづくとすれば、それはstateという概念だ。hooks周辺を理解するのは難しい。
useEffectについてひたすら調べまくりました。正直日本語でこれ以上に分かりやすい記事は他にないと思う。
https://iqkui.com/ja/a-complete-guide-to-useeffect/
あとは例外的ではあるがファイルアップロード関係かな。バイト先ではGraphQLというバックエンドとフロントを繋ぐものを使用していたのだが、これに使えるファイルアップローダーの無さといったらもう。そもそもGraphQLを通してファイルアップロードするのもどうかと思うんだが。バックエンドでPrismaとかDockerとか使ってたからしゃあなしか？
今回バックエンドについては特にかくつもりないので割愛します。
とまぁこんな感じでReactに慣れてきたらReact Nativeも書くようになりました。

React Native

React Nativeで一番大変なのはコードを書く以前の準備だと思います。モバイルアプリの開発はSimulatorをたてた状態で行わないといけませんが、慣れないうちはこれが大変です。iOSで言えばpodあたりやXcodeの設定をしっかり把握していないとビルドが失敗します。バイト先はアプリの運用をしていたので、既に完成されているものをビルドしなければいけません。ビルド時間は5~10分くらいかかっていました。ですので、慣れていないと後少し!!というところでビルドが失敗したりしてドツボにハマったりします。
　という感じで僕のモバイルアプリ開発の始めは苦しむことが多かったですが、今はiOSもAndroidもできているのでいいかなという感じです。
　そう、これがReact Nativeの利点だと僕は思う。ネイティブ言語でiOSとAndroidの開発をしようと思ったら、swiftやjavaの両方を学ばなければいけないからだ。React Nativeを使えば、多少の差があることは確かだがUIでいじる必要があることはほとんどない。ビルドの仕方とリリースの仕方を学べばそれでいい。多少の差に言及しておくとそれはアプリ内でファイル操作をする時だ。写真を選択したり、アップロードしたり。知らないとバグって、は？ってなる。　

最後にReact NativeのUIについて述べる。UIはオープンソースのコンポーネントが色々あって便利だと思う。が、React Nativeのバージョンの違いとかで役に立たなかったりするやつがあるから注意。githubのReleasesのlatestが2年前とかのやつには手を出さないのが無難だ。あとは、cssのflexの有り難みがすごくわかる。キーワードはflexDirection, justifyContent, alignItemsだ。この３つがあれば画面が綺麗に整う。

所感の割りには色々書きすぎたと思うが以上がReact Nativeに関する正直な感想だ。

ウェブサイトのアニメーションについて

実は最近ウェブサイトをアップデートしてアニメーションを取り入れた。
https://cyber-muse.com
このウェブサイトのアニメーションは全てreact-springというモジュールを使用している。
https://www.react-spring.io/
このモジュールにスクロールの制御を加えると僕が作ったウェブサイトぐらいは作れるという感じで紹介しておこう。

終わりに

初めの文章に取り消しせんが付いている通りです。
ReactとReact Nativeについて述べただけになってしまいました。

ReactとReact Nativeを使えばこういうウェブサイトやアプリが作れる！！という参考になればいいと思います。

ウェブサイト： https://cyber-muse.com
Apple Store: https://apps.apple.com/app/id1511131064
Google Play: https://play.google.com/store/apps/details?id=com.front_music