Don't think! Just do it!

종합 IT 기술 정체성 카오스 블로그! 이... 이곳은 어디지?

Flutter/Flutter Project 15

[소셜차트] 앱 제작기 #16. 차트!

무슨 데이터 좀 구해서 볼라면 미친듯이 검색해야 하잖아? 하다 못해 서로 다른 두 차트(데이터)의 상관 관계를 보려면 미친 액셀 노가다를 해야 하지. 매우 간단한 것조차 말이야. 게다가 대다수의 사람들은 이런 것조차 못한단 말야. 진짜 요즘처럼 정보격차가 극심한 시대가 있었나 싶어. 정보는 돈이니까 즉! 정보 격차는 빈부 격차라는 소리지. 암튼 이런 문제를 좀 해결하고 싶어서 만드는 앱 이름이 소셜차트야. 차트위에 여러가지 데이터를 보기 쉽게 나타내고 서로 정보를 공유할 수 있도록 돕는 툴이야 ㅋㅋㅋ 차트가 핵심기능이라는 소리지! ㅋㅋㅋ 근데 이놈에 핵심기능 구현하는게 지옥이네 ㅋㅋㅋ 물론 내가 덜떨어져서 그렇겠지만 말이야! 일단 차트를 처음부터 쌩짜로 구현하고자 하는 욕망도 있지만 시간이 매우 부족해서..

[소셜차트] 앱 제작기 #15. Full Text search

Full Text Search... 뭐... 그냥 간단하게 검색 기능이야. 소셜차트 DB는 firestore인데 firestore는 검색 기능을 제공하지 않기 때문에 외부의 도움을 받아야 해. Full text search engine이라고 검색하면 많은 것들이 나오는데 firebase에서 제안하는 건 Elastic, Algolia, Typesense 이렇게 3가지야.👇 각각은 모두 firebas extension을 제공해서 비교적(?) 간편하게 full-text search를 구현할 수 있어. 가격 이 서비스들은 모두 자체 클라우드를 지원하고 있는데 이걸 사용하자니 비용이 조금 걱정되더라고. 엘라스틱은 시작이 한화로 월 10만원이 넘고;;; 초기 스타트업이 내기는 조금... 싫다규 ㅠㅠ 알골리아는 비교..

[소셜차트] 앱 제작기 #14. 프로필 수정 화면

사진이나 소개 같은 프로필 정보를 수정하는 화면을 만들었어. 별건 아닌데 ㅎ 은근 짜증 ㅎ text 업로드하는 건 뭐 크게 난이도 있는 건 아니니까 스킵하고 사진 업로드하는 것만 전체적으로 설명하자면 image picker로 갤러리나 카메라로 사진 선택 후 로컬 변수에 저장. 로컬 변수에 저장된 이미지를 image cropper로 보내서 유저가 size 변경. 최종 파일을 firebase storage로 보내고 다운로드 url 확보 firestore userDB에 업데이트 이런 순서가 되겠지? 여기에 사용한 package는 image_picker와 image_cropper야 👇👇👇 https://pub.dev/packages/image_picker image_picker | Flutter Package ..

[소셜차트] 앱 제작기 #13. 좋아요 기능 (Distributed Counter)

하아... 누가 간단한 KiCad 알바 좀 하자고 해서 했는데;;; 2주를 날렸어... ㅠㅠ 화딱지나... 암튼 앱 개발 속행!! 좋아요! 기능은 매우 보편적이지.. 그런데 이게 은근히 짜증나... 우선 누가 좋아요를 눌렀는지 기록해야하고, 그리고 몇개의 좋아요인지도 알아내야 해. 난 firestore를 사용중이니 그걸 기준으로 하자면 단순하게 좋아요를 누른 사람을 기록하는 건 간단해. 그냥 sub collection 하나 만들고 user id를 포함한 문서를 계속 더하거나 빼면 되니까. 그런데 말이지.... 다른 DB는 모르겠지만 적어도 firestore에서는 좋아요를 카운트하는 일은 간단하지가 않아;; 왜냐하면 firestore에서 허용되는 문서 업데이트 주기가 초당 1회이기 때문이지;; 전세계에서 ..

[소셜차트] 앱 제작기 #12. 댓글 기능 & 기타 잡다!

사실 이제 소셜차트의 핵심적인 부분을 구현해야 하는데.. 그건 아직 생각이 정리가 안되서 ㅋㅋㅋ 눈에 보이는 것들부터 우선 처리하고 있어. 유저가 포스팅을 하는 건 했으니 이제 댓글을 달아 보자고.. 포스팅이랑은 다르게 댓글은 그냥 keyboard에 붙어 다니는 bottomsheet에 textfield를 붙여서 구현했어. 물론 수정해야할 것들이나 추가해야 할 것들이 매우 많지만 일단 기능 구현에만 중점을 두고 작업했고 댓글 리스트를 위한 위젯은 유저 포스팅 리스트에 사용했던 infinite_scroll_pagination을 또 사용했어. infinite_scroll_pagination 매우 좋아! 이거 하면서 골때렸던게 keyboard를 따라다니는 bottomsheet 였는데 일반적으로는 매우 완벽하게 ..

[소셜차트] 앱 제작기 #11. 운수 좋은 날..

이제는 대가리가 Flutter에 맞춰지는지 스트레스도 덜 받고 왠지 모르게 이런 저런 것들을 잡다한 것들을 마이 했단 말이지.. infinite scroll 새로 고침, user profile에 더미 데이터 => DB 연결, insight card에 사용자 정보 가져오기, link preview Image provider에 에러 수정.. 뭐 한참 많아.. 크으~ 오늘 운이 좋은 걸? 이런 날일수록 조심해야지! % git add . % git commit -m "블라블라" % git push origin main 크 완벽해! ... 집에서 맥북으로 보니까 ios 폴더에서 저짓을 해놨네?;;;; 으하하하하하미ㅏ넝리ㅏㅓㅁ닝러ㅣㅁ나렁 사무실 컴터에 남아있을건데 왜 그러냐고?? ㅋㅋㅋㅋㅋㅋ 난 사무실에는 맥 스튜..

[소셜차트] 앱 제작기 #10. Tap to scroll top

bottom tab navigator에서 tab을 누르면 스크롤이 처음으로 올라가고, 또 tab을 누르면 뒤로가기. IOS에서 흔한 동작이야.. 그런데 ㅋㅋㅋㅋ 결론부터 이야기 하자면 못했어..... ㅅㅂ... React Native에서는 react navigation으로 여차저차 구현했는데;;; Flutter에서는 좌절이네;;; ㅋㅋㅋㅋ 다 내 머리가 나쁜 탓이지! ㅠㅠㅠㅠㅠㅠㅠㅠ 사실 flutter에서 scroll on top 기능은 간단해.👇 controller.scrollController.animateTo( 0.0, duration: const Duration(milliseconds: 300), curve: Curves.linear, ); //or controller.scrollControlle..

[소셜차트] 앱 제작기 #9. 무한 스크롤

유저가 작성한 인사이트 카드를 여러사람에게 맞춰 보여주는 건 쉽지 않은 일이겠지? ㅋㅋ 아마 Query가 마이 복잡해 질거야. 앱에서 firestore에 다이렉트로 못 할 수도 있고.. 이럴 경우에는 Backend에서 해야겠지. 그렇다고 손놓고 있으면 등신이고. 걍 일단 시간순으로 정렬해서 listview로 보여주자고.. Insight card는 단순하게 header, body, bottom 이렇게 3부분으로 나뉘는데 header에는 chart의 요약 정보가 들어갈거고 body에는 유저, 카드 내용이, 그리고 bottom에는 스크랩, 댓글 달기, 외부 공유를 할 수 있는 버튼이 있어. header와 bottom은 구현해야할 게 엄청 많으니까 일단 body만 읽어와서 뿌려줄건데 처음에는 귀엽게 10개를 고..

[소셜차트] 앱 제작기 #8. 글쓰는 페이지

일단은 지금 제작중인 소셜차트라는 앱이 소셜네트워킹 앱이어서 사용자들이 글을 쓸 수 있도록 해야 해. 페이스북이나 트위터처럼 말이지. 이거 말고도 구현해야 할 것들이 굉장히 많지만 글을 쓸 수 있는 환경부터 만드는 게 더미 데이터를 넣으면서 테스트하기 좋을 거 같아서 글쓰는 페이지부터 만들고 있어. 1차적으로 해쉬태그와 url을 자동으로 인식해서 link preview를 보여주는 정도로만 구현중이야. 먼저 textfield에 hashtag와 url을 꾸며주는 건 detactable_text_field라는 flutter package를 사용했고👇 https://pub.dev/packages/detectable_text_field detectable_text_field | Flutter Package Tex..

[소셜차트] 앱 제작기 #6. Profile & Notice Screen Layout

이전 작업 2022.10.24 - [Flutter/Flutter Project] - [소셜차트] 앱 제작기 #5. Model and Firestore 1% [소셜차트] 앱 제작기 #5. Model and Firestore 1% 이전 작업 2022.10.22 - [Flutter/Flutter Project] - [소셜차트] 앱 제작기 #4. 로그인 시스템 구성 [소셜차트] 앱 제작기 #4. 로그인 시스템 구성 2022.10.21 - [Flutter/Flutter Project] - [소셜차트] 앱 제작.. engschool.tistory.com 뭔가 로그인에 불만이 있거나 문제가 있는 양반들을 위한 ReportScreen을 제작했어. DB model도 만들고 firestore에 데이터가 잘 들어가는 것도 ..

반응형