이것은 4부로 구성된 블로그 시리즈의 두 번째 부분입니다. 하이브리드 모바일 앱 구축 과 Mendix. 1부는 소프트웨어, 장치 및 계정을 준비하는 것에 관한 것입니다. 1부를 읽어보세요 여기에서 확인하세요이 부분에서는 실제 앱을 만드는 방법에 대해 알아보겠습니다.
아래 그림은 모바일 앱을 만들 때 취해야 할 상위 단계를 보여줍니다. Mendix. 이 단계들을 하나씩 살펴보고 몇 가지 실용적인 팁을 알려드리겠습니다.
나는 사용할 것이다 Mendix 모바일 앱을 만드는 예로서 World 앱입니다. 오프라인에서 사용 가능한 앱으로, 모바일 앱에 대한 정보를 보여줍니다. Mendix 세계 이벤트. 이 앱을 사용하면 피드백을 제공하고 투표 기능이 있습니다.
모델
모델 관점에서 모바일 앱을 만드는 것은 일반 앱을 만드는 것과 같습니다. Mendix 웹 앱. 하지만, 알아야 할 몇 가지 사항이 있습니다.
따라서 Mendix 프런트엔드는 반응형입니다. 즉, 레이아웃과 요소가 화면 크기에 자동으로 조정되어 모델링한 페이지를 모바일 기기에서 렌더링할 수 있습니다. 그러나 모바일 기기를 사용하는 것은 데스크톱과 매우 다릅니다. 사용자는 마우스 대신 화면 제스처를 사용하고, 화면이 더 작고, 사용자는 다른 탐색을 기대하고, 다른(더 느린) 유형의 연결이 있고, 그 외에도 더 많은 것이 있습니다.
또한 모바일 앱의 목적은 일반 웹 앱과 다릅니다. 일반적으로 모바일 앱은 여러 기능을 제공하는 대신, 이벤트 정보를 보여 주거나 검사를 수행하는 등 단일 목적을 갖습니다.
더 나은 경험을 제공하려면 모바일/태블릿 프로필(기본적으로 활성화됨)을 사용하세요. 이 프로필은 프로젝트 탐색에서 활성화할 수 있습니다. 이 탐색은 모바일 앱에서 사용되므로 한 모델에서 데스크톱, 휴대폰, 태블릿에 대한 채널을 만들 수 있습니다.
에 대한 요구 사항 Mendix 월드 앱은 인터넷 연결 없이도 작동할 수 있어야 한다는 점이었는데, 이는 다음과 같이 지원됩니다. Mendix. 오프라인 모바일 앱에 대한 자세한 내용은 Mendix, 오프라인 설명서 및 오프라인 모바일 앱 만들기 Mendix 웨비나.
모델링 팁
모바일 앱의 모델을 만들 때 참고할 수 있는 몇 가지 팁은 다음과 같습니다.
- 사용자 친화성과 최적의 성능을 위해 페이지를 간단하게 유지하세요
- 더 나은 성능을 위해 가능하면 마이크로플로우 작업 대신 페이지 닫기/페이지 열기/새로 만들기 버튼을 사용하세요.
- 휴대전화의 경우 데이터 그리드 대신 터치에 더 편리한 목록 보기 또는 템플릿 그리드를 선호합니다.
- 사용자가 스크롤할 필요가 없도록 단일 페이지의 필드 수를 제한합니다.
- 성능에 부정적인 영향을 미칠 수 있으므로 투명한 CSS 속성 사용을 제한하세요.
- 모바일 페이지와 마이크로플로에 대해 별도의 모듈을 사용하여 프로젝트에 대한 더 나은 개요를 유지하세요.
- 휴대폰 앱에 레이아웃 컨테이너를 사용하는 경우 col-xs-N 클래스를 추가합니다. 여기서 N은 열 크기입니다.
개발 중인 모바일 앱 보기 및 테스트
개발하는 동안 모바일 앱을 테스트하고 미리 보고 싶을 것입니다. Mendix WYSIWYG 기능이 있는 Web Modeler가 곧 출시되어 모바일 앱이 어떻게 보일지 직접 볼 수 있습니다. 현재로서는 앱을 보고 테스트하는 방법이 여러 가지 있으며, 각각 장단점이 있습니다.
브라우저에서 앱을 직접 보려면 모델러의 앱 보기 메뉴에서 보기 옵션을 선택하세요.
쉽게 테스트할 수 있습니다 Mendix 실제 앱으로 휴대폰에서 프로젝트를 실행해보세요. Mendix 개발자 앱. 다운로드 Mendix 개발자 앱은 여기 있습니다:
또 다른 빠른 방법은 개발자 도구(F12)를 열고 왼쪽 상단 모서리에 있는 기기 아이콘을 선택하여 Google Chrome에서 기기를 시뮬레이션하는 것입니다.
나중에 특정 기기에 앱을 배포하는 방법에 대해 설명하겠습니다.
오프라인 가능 모바일 앱의 테스트는 Modeler가 잘못된 구성을 확인하기 때문에 대부분 브라우저에서 수행할 수 있습니다. 브라우저에서 오프라인 앱을 쉽게 테스트하려면 오프라인 프로필과 동일한 홈페이지를 휴대전화(또는 태블릿) 프로필에서 사용합니다. 결국 실제 기기에서도 테스트해야 합니다.
하이브리드 모바일 앱 생성
앞서 언급 한 바와 같이, Mendix 레버리지 폰갭 빌드 모바일 앱을 만들려면 Mendix 앱. 개발자 포털의 프로젝트에서 게시 탭을 통해 모바일 앱 스토어에 게시를 클릭하여 하이브리드 앱의 설정으로 이동할 수 있습니다. 여기서 이름, 앱 식별자, 설명, 시작 화면 및 아이콘을 입력할 수 있습니다. 그런 다음 모바일 앱 스토어에 게시 버튼을 통해 하이브리드 앱을 생성할 수 있는 페이지로 이동할 수 있습니다. 하이브리드 앱을 생성하기 전에 앱이 연결해야 하는 환경을 지정할 수 있습니다. 그런 다음 앱을 PhoneGap Build로 직접 보내거나 다운로드하여 나중에 수동으로 업로드할 수 있습니다.
PhoneGap Build는 한 번에 하나의 앱만 사용할 수 있는 무료 계정을 제공합니다.
앱 빌드
앱이 PhoneGap Build에 전송되거나 업로드되면 자동으로 빌드가 시작됩니다.
Android의 경우 이 기능은 바로 사용할 수 있으며, 빌드 후 다운로드 링크나 QR 코드를 통해 Android 바이너리(APK 파일)를 직접 다운로드할 수 있습니다. 이는 테스트 및 개발 목적으로만 사용되는 디버그 버전입니다.
iOS 빌드 또는 프로덕션 빌드의 경우 개발자 인증서가 필요합니다. 인증서 취득에 대한 자세한 내용은 다음을 참조하세요.
모바일 앱을 앱스토어에 게시
인증서가 설정되고 앱의 프로덕션 빌드를 빌드할 수 있으면 Google Play Store 및 Apple App Store와 같은 앱 스토어에 앱을 게시할 수 있습니다.
Android
Google Play 스토어에 Android 앱을 게시하려면 PhoneGap Build에서 서명된 APK를 다운로드하여 업로드할 수 있습니다. https://play.google.com/apps/publish/.
iOS
Apple App Store에 게시하려면 Xcode의 일부인 Application Loader가 필요합니다(Xcode/Open Developer Tool/Application Loader를 통해). App Store에서 다운로드할 수 있습니다. Application Loader를 시작하면 PhoneGap Build IPA 파일을 추가하고 Apple iTunes Connect에 업로드할 수 있습니다.
베타 및 수용 테스트
PhoneGap Build를 통해 앱에 대한 링크를 공개적으로 사용할 수 있도록 할 수도 있습니다. 공개 공유 허용 애플리케이션의 설정 탭을 통해서.
Android 사용자는 다음을 활성화해야 합니다. 알 수없는 소스 앱을 설치하기 전에 옵션(설정 - 보안)을 선택하세요. iOS 앱의 경우 장치 ID를 프로비저닝 프로필에 추가해야 합니다. 참조 테스트를 위한 앱 내보내기(iOS, tvOS, watchOS).
iOS 앱의 경우 TestFlight를 사용하여 사용자 그룹에 테스트 릴리스를 제공할 수도 있습니다. 베타/승인 테스트를 수행할 때 매우 유용한데, 새 릴리스를 업로드하면 자동으로 테스트 사용자에게 전송되기 때문입니다. TestFlight에 대한 자세한 내용은 다음을 참조하세요. https://developer.apple.com/testflight/.
여기에는 모바일 애플리케이션 수명 주기의 기본 사항이 포함됩니다. Mendix. 다음 주에는 하이브리드 앱에 대해 자세히 설명하고, 작동 방식과 모바일 위젯을 직접 만드는 방법을 설명하겠습니다. 재미있게 즐기세요. 모바일 앱을 구축하는 방법 Mendix!