우리는 매년 3월에 열리는 특정 대규모 대학 농구 토너먼트(라이선스 제한으로 인해 이름은 공개되지 않음)를 기반으로 테마를 생각해내는 고객 대상 이벤트를 진행했습니다. Mendix, 단 며칠 만에, 이 스포츠 피드 API의 데이터만 가지고요??
전제
이벤트 동안 100개의 농구 경기가 진행됩니다. 모든 참가자는 누가 경기에서 이길지, 승리 마진이 얼마일지 예측할 수 있습니다. 우승자와 각 경기의 정확한 마진을 선택하면 완벽한 점수는 25점이 됩니다. 잘못된 우승자를 선택하면 점수를 얻지 못하고, 잘못된 마진으로 우승자를 선택하면 얼마나 근접했는지에 따라 XNUMX점의 백분율이 생성됩니다.
이 앱은 다음과 같은 기능으로 구성될 것입니다.
- 이메일 주소로 등록하고 셀카를 업로드할 수 있는 기능.
- 게임 목록과 현재 점수.
- 각 게임에 대한 예측을 할 수 있는 능력.
- 게임 점수가 변경될 때마다 업데이트되는 라이브 리더보드를 보세요.
- 각 참가자가 게임을 통해 획득한 점수의 세부 내용을 볼 수 있는 기능입니다.
이벤트는 지역 술집에서 열렸고, 아무도 노트북을 가지고 있지 않았습니다. 이는 모바일 경험이 최선의 방법이라는 것을 의미했습니다. 또한 앱이 매우 잠깐 사용될 것이라는 것도 알고 있었습니다. 몇 시간만 사용하는 앱을 다운로드하고 싶어하는 사람은 없습니다. 또한 앱을 완성하는 데 며칠 밖에 걸리지 않았기 때문에 앱 스토어에 게시해야 하는 네이티브 앱은 불가능했습니다.
이로 인해 우리는 Progressive Web App(PWA) 접근 방식으로 전환했습니다. 다음에 대한 모든 내용을 읽을 수 있습니다. 방법 Mendix 여기에서 PWA를 빌드할 수 있습니다..
…그리고 가득하다 PWA 설명서는 여기 있습니다.
또 다른 흥미로운 변화는 실시간으로 리더를 동적으로 맨 위로 셔플하는 애니메이션 리더보드를 제안한 것입니다. 이를 위한 기본 위젯은 없지만 확장성이 MendixReact 기반 프레임워크를 사용하여 하나를 만들 수 있었습니다.
제가 앱 UI를 작업하는 동안 동료 타일러는 리더보드를 만들었습니다.
타일러는 애니메이션 리더보드 개발에 대한 설명을 다음과 같이 밝혔습니다.
Pluggable Widget Generator를 활용하면 이 프로젝트를 위해 리더보드 위젯을 함께 만드는 것은 큰 문제가 아니었습니다. Mendix 위젯은 React 프레임워크에 의존하므로 쉽게 사용할 수 있는 수천, 수천 개의 React 구성 요소를 통합할 수 있습니다. 이 경우 점수가 변경될 때 리더보드가 애니메이션화되기를 원했기 때문에 다음을 선택했습니다. React Flip 툴킷 우리를 대신하여 힘든 일을 처리해 주세요.
원하는 효과를 내기 위해 우리가 해야 할 일은 Flip Toolkit의 Flipper 및 Flipped 구성 요소를 Pluggable Widget Generator에서 제공하는 위젯 템플릿에 플러그인하는 것뿐이었고, 이제 시작할 준비가 되었습니다. 노출하고자 하는 속성을 지정하기 위해 작은 xml을 삽입합니다. Mendix Studio Pro만 있으면 최소한의 노력으로 배포할 수 있는 맞춤형 애니메이션 리더보드 위젯이 완성되었습니다.
자세한 내용은 다음에서 읽을 수 있습니다. 여기에서 플러그형 위젯을 빌드합니다.
사용 Mendix Team Server, Tyler와 저는 개발에 협력하고, 피드백 아이디어를 제출하고, Acceptance 및 Production 환경에 원활하게 배포하는 동안 모든 변경 사항을 추적했습니다. Team Server에 대해 자세히 알아보려면 여기를 클릭하세요..
빌드
리더보드 위젯을 제외하고 전체 앱은 코드 없이 구축되었습니다. 모든 것은 Sports Feed API에서 시작되었습니다. 이를 정기적으로 호출할 방법이 필요했습니다. 이를 위해 예약된 이벤트(TriggerSport_REST)가 2분에 한 번씩 마이크로플로 EVT_Sport_REST(그림 XNUMX)를 호출했습니다.
이 마이크로플로(그림 2)는 앱이 시뮬레이션 모드에 있는지(나중에 자세히 설명)를 판별하고, 그렇지 않은 경우 스포츠 피드가 활성화되어 있는지 확인합니다. 그렇다면 스포츠 피드 REST 호출을 실행한 다른 마이크로플로(그림 3)가 호출되었습니다. 응답은 게임 점수를 업데이트하는 데에도 사용되고, 참가자 예측 점수도 계산합니다.
재미
초기에 우리는 앱을 제대로 테스트하기 위해 게임 활동을 시뮬레이션하는 방법이 필요하다는 것을 알게 되었습니다. 무작위 게임 점수를 생성하는 빠른 마이크로플로가 사용되었습니다. 앱이 시뮬레이션 모드(관리자 화면에서 설정)에 있는 경우 이 마이크로플로가 Sports Feed API 대신 호출됩니다.
앱
여기는 사용자가 등록하고, 게임에 대한 예측을 하고, 게임 상태를 보고, 참가자 점수의 리더보드를 볼 수 있는 메인 화면입니다.
진행 중인 게임, 점수, 게임 상태를 보여주는 화면은 다음과 같습니다.
이것은 참가자의 리더보드와 누적 점수입니다.
참가자의 점수에 영향을 준 모든 게임 예측도 볼 수 있습니다.
최종 생각
이것은 재미와 참여를 위한 고객 이벤트에 추가된 훌륭한 프로젝트였습니다. 직접 탐색하고 API 위에 실행 가능한 앱을 배치하는 방법을 배우고 싶다면, 여기에서 프로젝트 파일을 다운로드하세요.