WEB의 프런트에 자세하지 않은 젊은이용으로 핸즈온 했습니다.

최종적으로 만든 아티팩트는 이런 느낌입니다.

실시간으로 게시물이 반영되거나 푸시 알림이 날 수 있습니다.



※리플라이, 리트윗, DM의 버튼은 더미입니다

대상 레벨

HTML/CSS - 읽을 수있는 (사전 준비 됨)

JavaScript - 읽을 수 있음 (거의 사전 준비)

Firebase - 서버리스에 대한 의미를 알고 있습니다

이정표

기본적으로 클라이언트 측은 거의 구현되어 있기 때문에, 작업은 Firebase의 설정 주위가 메인입니다.

Twitter와 같이 메시지를 게시, 표시할 수 있다.
「좋아요」를 보낼 수 있다. 그러나 무인증.
목표 : MBaaS를 사용하여 서버리스 앱 구축을 경험하십시오.
키워드: FireStore, Functions
소요시간: 1시간

1.에서 만든 앱에 사용자 등록, 인증 기능을 추가한다.
그러나 모든 기능이 하나의 화면에 나란히 표시됩니다.
목표 : MBaaS를 사용하여 서버리스 앱 구축을 경험하십시오.
키워드: Authentication
소요시간: 0.5시간

마일스톤 1 : 트위터처럼 메시지를 게시하고 볼 수 있습니다.

GitHub에 핸즈온 절차를 작성합니다.

htps : // 기주 b. 코 m / 우에 메구 / 밥 d

설명하면서 실시해 1시간이었으므로, 묵묵히 하면 30분으로 끝날지도 모릅니다.

클라이언트의 구현에 대해서는, JavaScript를 평상시 쓰지 않는 사람이라도 어쩐지 의미를 알 수 있도록(듯이) jQuery를 사용하고 있습니다.

마일스톤 2: 앱에 사용자 등록, 인증 기능 추가

GitHub에 핸즈온 절차를 작성합니다.

htps : // 기주 b. 코 m / 우에 메구 / 밥 d 그렇습니다.

설명하면서 실시해 30분이었으므로, 묵묵히 하면 15분으로 끝날지도 모릅니다.

계정을 수집하고 싶지 않으므로 여기의 아티팩트는 비공개입니다.

다음 단계

이렇게 간단하게 실시간으로 움직이는 것을 만들 수 있으면, 왠지 간단하게 앱을 만들 수 있는 기분이 되네요.

다음은 지금의 JS 프레임워크를 사용해 SPA로 하고 싶은 곳입니다만, 사세하게 설명 자료를 쓰는 것은 힘들기 때문에 이번은 거기까지 밟지 않습니다.

실제로 제대로 Twitter같이 하려고 하면, 팔로우/팔로워의 관계나, 리트윗등 필요로, FireStore만으로는 표현할 수 없는 부분이나 스키말레스한 구조로의 표현 등 고민커피 가득하다고 생각합니다.

그렇지만, 설계로 고민하는 것은 개발의 묘미이므로 꼭 즐기자!

특히 개인 개발에 있어서는 완벽하지 않기 때문에 안 되는 일은 없기 때문에, 다소 무차한 설계에서도 해 보면 좋다고 생각합니다. 우선 움직인 후에 고민하면 좋다고 생각합니다.

이전에 마무리 : 어디까지 쇼보 앱이 Apple 심사에 다니는지 시험해 보았습니다. 중 두 명 온라인이라는 앱을 만들었을 때 "디자인이 적당한 곳이 있고 Firebase의 무료 프레임에 맞지 않으면 어떻게 하자"고 생각했지만 완전히 무료 프레임을 초과하지 않았습니다 ...