내가 일을 시작했을 때 Mendix 작년에 저는 두 부서에 동시에 합류했습니다. Expert Service(CSM – Customer Success Management) 부서에서는 Custom Widgets의 고문, 교사, 개발자가 되었습니다. R&D 부서에서는 Custom Widget 작업과 관련된 문제를 해결하는 데 도움을 주었습니다.

이 독특한 직책 덕분에 저는 파트너와 고객이 실제로 어떻게 커스텀 위젯을 개발하는지 포함하여 커스텀 위젯 개발에 대해 많은 것을 배울 수 있었습니다. 소프트웨어 개발자이자 아키텍트로서 제 전문 분야 중 하나는 사람들이 사용하는 다양한 프로세스에 대한 모든 정보를 수집하고 새롭고 개선된(작업) 방법을 고안하는 것입니다.

Mendix 과거에 구축한 맞춤형 위젯 중 일부를 오픈 소스로 공개하기로 결정했습니다. Mendix 플랫폼. 사용자 정의 위젯에 대한 코드를 공유하면 누구나 기여할 수 있고 결국 더 많은 최종 사용자 스토리를 완성하는 더 나은 제품을 제공할 수 있다고 믿습니다. 또한 사용자 정의 위젯의 개발은 더 많은 개발자 그룹에 분산될 수 있으므로 모든 사람에게 윈윈 상황을 만들 수 있습니다. Mendix 사회.

사용자 정의 위젯 보일러플레이트 만들기

제가 처음으로 시작한 것은 "AppStoreWidgetBoilerplate"를 만드는 것이었습니다. Mendix 클라이언트 API 및 기존 위젯의 예 저는 다음에서 영감을 받아 사용자 정의 위젯 보일러플레이트를 개발했습니다. HTML 보일러플레이트, Mathias Bynens와 Hans Christian Reinl이 유지 관리합니다. 그러나 이 새로운 보일러플레이트는 사용자 정의 위젯에만 적용됩니다. Mendix 플랫폼입니다.

내 목표는 새로운 보일러플레이트를 각각의 새로운 위젯을 구축하는 기초로 만드는 것이었습니다. Mendix. 또한 이것은 기존 사용자 정의 위젯을 이식할 수 있는 템플릿이 되므로 사용 가능한 새 위젯과 이식된 위젯이 모두 Mendix GitHub은 어느 정도 품질이 좋을 겁니다. 그 목표에 도달했을 때, 저는 Custom Widget을 만드는 데 필요한 다른 프로세스를 살펴보기 시작했습니다.

Brackets용 위젯 개발 플러그인 만들기

이전에는 사용자 정의 위젯을 가져오는 Mendix 이 프로젝트에는 소스 코드가 변경될 때마다 반복해야 하는 많은 작업이 포함되었습니다.

Custom Widgets 티켓을 해결하던 중, 배운 내용을 공유하기 위해 Custom Widget 워크숍을 개발했습니다. 이를 통해 반복되는 작업 패턴에 대한 솔루션을 개발할 수 있는 기회가 생겼습니다. 즉, Brackets를 IDE(통합 개발 환경)로 전환하여 사용자 정의 위젯을 만드는 Adobe Brackets용 위젯 개발 플러그인입니다. Mendix 플랫폼. 이 플러그인은 "AppStoreWidgetBoilerplate" 기반 위젯을 Adobe Bracket 내에서 한 번의 클릭으로 패키징하는 프로세스로 전환했습니다.

“AppStoreWidgetBoilerplate” 및 “Bratches용 위젯 개발 플러그인”을 사용하면 빠르게 확장을 시작할 수 있습니다. Mendix 멋진 새로운 사용자 경험과 함께! 다시 말하지만, 사용자 정의 위젯을 만드는 데 관심이 있다면 Mendix, 이 웨비나를 주문형으로 시청하세요. 나는 "Hello World"를 만들어서 이 두 도구를 모두 시연합니다. Mendix 사용자 정의 위젯.

자주 묻는 질문

Q: 커스텀 위젯을 만들어야 하는 사람은 누구인가요?
A: 이 질문에는 JavaScript/HTML 및 CSS를 살아 숨쉬는 사람이라면 누구나 대답할 수 있습니다! 이러한 스크립팅 언어를 기반으로 사용자 지정 위젯만 빌드할 수 있습니다. 따라서 사용자 지정 위젯을 개발하기 전에 이를 암기하세요. Mendix 플랫폼. 또한 이에 대한 확고한 지식이 필요합니다. Mendix 플랫폼과 이를 사용하여 앱을 모델링하는 방법.

Q: 커스텀 위젯이란?
A: 사용자 정의 위젯은 DIJIT 위젯입니다. Mendix 클라이언트 API JavaScript 함수는 내부에서 실행됩니다. Mendix 수정된 DOJO 환경. 실제로 적절한 DIJIT 위젯을 작성하려면 JavaScript와 JavaScript 및 DOJO/DIJIT의 디자인 패턴에 대한 확실한 이해가 필요합니다. 이 튜토리얼을 따라 DIJIT 위젯을 시작하세요. https://dojotoolkit.org/reference-guide/1.10/quickstart/writingWidgets.html

A: 커스텀 위젯을 언제 만들거나 사용해야 하나요?
질문: 사용자 정의 위젯은 사용자의 특정 UX 기능을 제공하기 위한 것입니다. Mendix 앱(들). 특별한 UX(사용자 경험)가 필요한 경우 솔루션을 제공합니다. Mendix '즉시 사용 가능한' 기능을 제공하지 않습니다.

사용자 정의 위젯의 예는 다음과 같습니다.

자동차 조립: 자동차를 시각적으로 구성할 수 있는 기능이 필요한 애플리케이션이 있다고 가정해 보겠습니다. 그 시점에서 사용자 지정 위젯을 만드는 것에 대해 생각해야 합니다.

검색 필터 값에 따라 변경되는 메뉴: 검색 결과에 따라 페이지 링크를 표시하는 동적 메뉴가 필요한 경우

끌어서 놓기: 쇼핑 카트에 상품을 끌어서 놓으려는 경우

Q: 고급 사용자 정의 위젯 워크숍이 다음과 같은 일부로 제공됩니까? Mendix 학원?
A : 네! Mendix “맞춤형 위젯 구축의 기술 마스터링”이라는 고급 맞춤 위젯 워크숍을 제공합니다. 맞춤 위젯 구축을 최대한 활용하려면 다음 코스가 전 세계 어디에서 제공되는지 확인하세요. https://academy.mendix.com/#1418913294132-2

추가 링크:

기본 훈련 Mendix 모델러
사용자 정의 위젯 개발 Mendix 지식이 필요합니다 Mendix 앱 플랫폼 및 비즈니스 모델러. 시작할 수 있습니다. 온라인 과정또는 여기에서 직접 소개 과정에 등록하세요: https://academy.mendix.com/#1418913294132-2

AppStoreWidgetBoilerplate를 찾을 수 있는 곳
다음 위치에서 찾을 수 있습니다. https://github.com/mendix/AppStoreWidgetBoilerplate

Mendix 사용자 정의 위젯이 있는 GitHub 저장소
위젯의 예는 GitHub 저장소에서 찾을 수 있습니다. https://github.com/mendix/

JavaScript를 위한 디자인 패턴
JavaScript 디자인 패턴에 대한 훌륭한 책은 Addy Osmani가 쓴 Open Source 책입니다. 여기에서 찾을 수 있습니다: https://addyosmani.com/resources/essentialjsdesignpatterns/book/

첫 번째 dijit 위젯 작성하기
디지털 위젯을 작성하는 방법에 대한 훌륭한 내용은 여기에서 찾을 수 있습니다. https://dojotoolkit.org/reference-guide/1.10/quickstart/writingWidgets.html

Mendix 클라이언트 API
따라서 Mendix 클라이언트 API는 여기에서 찾을 수 있습니다. https://apidocs.mendix.com/5/client/