ORCA 프로세스를 사용하여 UX 설계와 프런트엔드 개발 간 교차

나는 화성 날씨 앱을 만들기 위해 NASA's Insight Weather API에 도전했다.대부분의 일과 마찬가지로, 나는 모든 문서와 정보를 꺼내서, 내 머릿속에 내가 API에서 얻은 것을 둘러싸고 일을 하기 시작했다.문서를 본 후에 저는 제 머리를 데이터에 집중하게 하는 가장 좋은 방법 중 하나가 제가 공부하고 있는 것을 응용하는 것ORCA process이라는 것을 깨달았습니다.

들키다

앞의 두 장의 사진에서 ORCA 프로세스를 사용하여 기존 기상 응용 프로그램의 잠재적인 내용과 데이터를 식별하는 방법을 보실 수 있습니다.나는 또한 일부 멋진 사용자 인터페이스가 나의 화성 응용 프로그램으로 잘 전환될 수 있다는 것을 알아차렸다. 예를 들어 공기 품질의 사다리꼴 슬라이더는 대기 불투명도 슬라이더로 쉽게 변할 수 있다.
기존 지구 날씨 응용 UI 연구
기존 지구 응용 UI 연구
내가 진행하고 있는 이 두 가지 활동은 서로 매우 조화롭다.아주 간단한 설명을 드리기 위해서 ORCA process 몇 가지 이벤트를 통해 시스템에 표시될 수 있는 사용자 심지 모드의 대상을 정의하는 데 도움을 드리겠습니다.사용자가 정의한 모든 대상이 관계를 정의함으로써 어떻게 서로 연결되는지, 사용자는 정의 작업 호출을 통해 이 대상에 대해 작업을 수행하고, 이 대상들을 상세하게 연구하여 이 대상의 속성을 정의할 수 있습니다.
나는 API를 직접 사용했기 때문에 나도 그것을 나의 발견 과정에 포함시킬 수 있다.NASA에서 데이터를 받아서 JSON 대상으로 변환하면 어떨까요??그것은 물체로 조직되었다.이제 나는 이 API에서 얻을 수 있는 데이터와 한계를 보고 기록할 수 있다.이것 또한 나에게 내가 탐색할 수 있는 다른 API를 생각하게 할 것이다. 다음 사진은 데이터를 되돌려주는 스냅숏이다.
날씨 통찰 API
이 특정한 API가 있으면 나는 고품질의 데이터만 얻을 수 있다. 이것은 내가 지정한 태양 (화성일) 계획에서 잃어버린 내용과 속성을 필요로 할 수도 있다는 것을 의미한다.

관계

ORCA 과정 중 관계 발견의 일부로서 데이터 집중의 대상이 어떻게 서로 연결되는지 고려할 수 있는 작은 시스템 모델을 만들 수 있습니다.API가 정말 도움이 되는 부분이기도 하다.나는 API가 모든 태양계(화성일)의 온도 데이터 포인트를 되돌려준다고 잘못 가정했지만, 내가 사용하는 것은 API이기 때문에 태양계가 유효성 검사를 통과하면 태양계마다 적어도 18개의 온도 데이터 포인트를 얻을 수 있다는 것을 알 수 있다.
다음에, 나는 나의 대상을 하나의 대상 매핑으로 변환하고, 그 중에서 API가 나에게 되돌아올 모든 속성을 추가했다.현재 이를 사용자 인터페이스와 기능이 강한 웹 응용 프로그램으로 전환합니다.

객체 및 관계를 UI로 변환

이 과정에서 내가 낮은 확률에서 높은 확률로 전환하는 것은 내가 이전에 창조한 기초 위에서 이루어진 것이다.설계의 UI 요소를 검토하기 전에 먼저 객체의 초도를 그립니다.이 과정을 통해 나는 변형을 피하기 위해 이 데이터들이 어떻게 일치하게 표시되기를 희망하는지 알고 싶다.

예를 들어 나는 지도상의 몇 가지 속성으로 Sol mini 카드를 그렸다.그리드 카드에 들어간 후, 나는 에 속성을 추가하고, 아이콘을 사용하여 대기의 불투명도를 표시하는 등 UI 요소를 탐색했다.

이제 다음 사실성 레벨로 넘어가지만, 대상 카드를 사용하여 프로그램의 UI를 만드는 방법을 보실 수 있습니다.

이 프로젝트의 일부로서 Tailwind CSS를 보고 이 프레임워크를 사용할 기회가 있습니다.나는 과거에 보통Bootstrap을 사용했는데, 나의 개인 프로젝트를 제외하고는 다른 프레임워크를 시도할 기회가 별로 없었다.
좋아, 처음엔 괜찮아 보였어.데이터 포인트에서 설명하는 내용을 바탕으로 UI에 대해 더 많은 흥미로운 생각을 했지만 정적 이미지가 아니라 동적일 때 더 흥미롭다.
이 점을 감안하여 자리 표시자 데이터를 API의 실제 데이터로 대체하여 효과를 발휘하도록 하겠습니다.

진입 기능성

제가 앞의 대화에서 고품질의 데이터만 얻는다고 했던 거 기억나세요?API가 가능한 한 많은 날씨 데이터를 반환하지 않았다는 사실이 입증됐다.그렇기 때문에, 나의 대다수 데이터 포인트는 결국 위의 캡처처럼 어떤 데이터도 읽지 않을 것이다.
아뿔싸.
대부분의 데이터가 비어 있다는 것을 깨닫는 것 외에, 나는 기존의 API로 검색을 영원히 실현할 수 없다.이 작은 프로젝트에서sort &find 방법을 사용해서 최근 날짜와 UI의 다른 날짜를 분리해서 표시하기 시작했습니다.

코드 일별

우선, 나는 Sol 번호를 id로 sol에 분배하고, 결과를 정수로 변환한다.

constructor(data: IWeather) {
    const sols = data.sol_keys.map((k) => {
      const sol: ISol = data[k];
      sol.id = parseInt(k);
      return sol;
    }); 

현재 나는 정수를 되돌려줍니다.sort 방법을 통해sol id를 기반으로 하는 질서정연한 그룹을 얻을 수 있습니다.

const first = sols
      .sort((a: ISol, b: ISol) => b.id - a.id)

// [858, 856, 855, 854]

보기에 괜찮다. 현재 나는find 방법을 사용하여 수조 중의 첫 번째 결과를 얻었다. 이것은 바로 가장 큰 결과이다. 왜냐하면 정렬된 수조는 내림차순으로 배열되기 때문이다.

const first = sols
      .sort((a: ISol, b: ISol) => b.id - a.id)
      .find((x: ISol) => true);

일단 내가 알게 되면 나는primary Sol에게 결과를 분배할 수 있다...우리 반의 주말 속성.다음은 최종 결과를 볼 수 있다.

<pre>export class WeeklyWeather {
  primarySolNumber: number;
  primarySolDate: string;
  primarySolSeason: string;
  sol: ISol[];

  constructor(data: IWeather) {
    const sols = data.sol_keys.map((k) => {
      const sol: ISol = data[k];
      sol.id = parseInt(k);
      return sol;
    });

    const first = sols
      .sort((a: ISol, b: ISol) => b.id - a.id)
      .find((x: ISol) => true);

    this.primarySolNumber = first.id;
    this.primarySolDate = first.First_UTC;
    this.primarySolSeason = first.Season;
  }
}
</pre>

친애하는 NASA, 당신들의 API를 업데이트해 주십시오. 그러면 제가 품질 파라미터를 통해 저품질의 데이터를 얻을 수 있습니까?이렇게 하면 나는 나의 작은 프로젝트를 완성할 수 있다.
이 작은 개인 프로젝트에서 ORCA를 사용해 보는 과정은 여전히 매우 재미있다."나는 NASA의 원격 측정 데이터를 받고 있다"는 등 재미있는 말도 많이 했다.또 다른 CSS 프레임을 시도하는 것도 흥미롭고 도전적이다.
너는 여전히 GitHub에서 내가 이 막 시작한 프로젝트에 대한 공개 환매를 볼 수 있다.
공간, API, UX, ORCA 프로세스 또는 다른 것을 연구하고 싶다면 트위터에서 나를 찾을 수 있다!