이 앱은 "Help Me"라고 하며 누군가가 정신 건강 위기를 겪고 있을 때 주로 신뢰할 수 있는 사람들로 구성된 선별된 서클에 보내는 "SOS"(조난 신호)로 설계되었습니다. 목표는 사적인 대화와 사용자의 감정 범위를 보여주는 시스템으로 사용자 주위에 신뢰할 수 있는 커뮤니티를 구축하는 것입니다.

개발 7일차

6일차 마지막에는 TailwindCSS을 사용하여 로그인 및 사용자 계정 생성 페이지에 배경 이미지를 추가하는 방법을 배웠습니다. 7일 차는 3개의 커뮤니케이션/콘텐츠 페이지 중 첫 번째 페이지를 만드는 데 중점을 둡니다. 이것은 사용자가 시간의 95%를 보내는 곳이며 정신 건강과 안전에 가장 큰 영향을 미칩니다.

이것이 제 프로젝트 파트너인 Miguel Hernandez가 디자인한 첫 번째 페이지의 와이어프레임입니다.

초기 구성 요소 맵 생성

프로젝트 개발에 대해 배우기 위해 이 블로그 시리즈를 읽는 모든 사람에게 훌륭한 첫 번째 단계는 의도한 UI(디지털 와이어 프레임, 종이에 그림 그리기 등)를 시각적으로 표현하는 것입니다. 코딩하기 전에 항상 최종 목표를 염두에 두는 것이 가장 좋습니다. 다음 단계는 이를 논리적 구성 요소로 나누는 것입니다. 위의 와이어프레임을 헤더, SOS 버튼 영역, 상위 5개 프로필, 콘텐츠 탐색 및 콘텐츠 영역으로 나누었습니다.

"피드" 통신 페이지 구축에 대한 첫 번째 시도

내 생각 과정은 각 통신 페이지에 대한 모든 부차적 구성 요소(부모/자식 관계)를 호스트할 단일 "화면/페이지"구성 요소를 갖는 것이었습니다. 이 계획은 6개의 개별 구성 요소를 빠르게 만들었습니다. 그런 다음 세 개의 통신 페이지(헤더, SOS 버튼, 상위 5개)에서 공유될 모든 구성 요소를 포함하는 구성 요소 호출 top-view와 같은 또 다른 부모를 만들었습니다.

부 요소를 호스팅하는 Angular 상위 구성 요소의 코드

<main>
   <app-content-top-view></app-content-top-view>
   <section class="h-screen">
      <app-content-navigation></app-content-navigation>
      <app-content-emotion-gallery></app-content-emotion-gallery>
   </section>
</main>

공유하고 싶은 빠른 팁은 UI를 처음 구축할 때 더미 데이터를 사용하는 것입니다. 비주얼이 100% 완성되면 실제 데이터를 통합할 수 있습니다. 또한 모바일을 먼저 구축하고 나중에는 더 큰 화면 크기를 위해 반응형 재설계를 증가시킵니다.

Angular ngClass 기능을 사용하여 극복

콘텐츠 섹션의 스타일을 지정하는 동안 Angular의 ngClass를 사용하여 프로필 섹션의 스타일을 동적으로 지정하려고 시도하는 동안 한 시간 동안 블록이 발생했습니다. 아이디어는 프로필 계정 배열의 인덱스를 기반으로 각 프로필에 대해 서로 다른 배경색을 갖는 것이었습니다. 많은 디버깅(일명 "무언가 달라붙기를 바라는 동안 벽에 진흙을 던지기")을 한 후에 작동할 무언가가 생겼습니다. 결과를 얻을 수 있는 더 좋은 방법이 생각나면 메시지를 남겨주세요.

ngClass 문제에 대한 최종 솔루션

<section>
  *ngFor="let profile of arrayOfProfiles; index as i"
  [ngClass]="{'bg-blue-300': i===0, 'bg-green-300': i%2=== 0, 'bg-yellow-300': i%2 !== 0 }"
....
<section>

와이어프레임 기반의 UI구축 첫 시도


와이어 프레임을 기반으로 한 UI의 추가 스타일 변경

무엇 향후 계획

이제 통신 페이지의 기본 화면/페이지 레이아웃과 표준 상단 보기 구성 요소가 있으므로 내일은 마지막 두 페이지(메시지 및 연결)의 콘텐츠 부분에 집중할 수 있습니다. 전체 앱에서 데이터를 통합할 Angular 서비스를 포함할 계획입니다.

8일차 분석 블로그 게시물을 기대해주세요!!!