배경

Windows 기기에서 iOS 앱을 개발하기 위한 아래 조사입니다.
우리가 만드는 시스템은 iOS 앱을 하이브리드 전제로 한 웹 부분만, 작업 단말기는 Windows만이라면 어디까지 할 수 있을까? 라고 하는 의문으로부터, 실제로 환경 구축으로부터 샘플 작성까지를 실시해, 개발을 진행해 문제 없는가의 검증입니다.

전제

OS: Windows 10

IDE: Visual Studio Code 설치됨 (1.10.2) (이후 VSCode)

앱 신청 시스템에 대해서는 언급하지 않습니다

절차

1. 환경 준비

Cordova Tools 확장 설치

VSC 명령 팔레트를 시작하고( Ctrl + P ) ext install cordova를 입력한 다음 Cordova Tools를 설치합니다.

Node.js 설치

Node.js/npm 설치(for Windows)

설치된 사람을 건너뛰십시오.

nodist로 Node.js 버전 관리

cmd

>nodist -v
(x64)
> 6.11.3  (global: 6.11.3)
  7.2.1

2. Cordova 앱 기반 생성

Cordoava를 npm install로 설치

cmd

>npm install -g cordova 

Cordova 프로젝트 만들기

명령 프롬프트를 시작하고 원하는 곳에 폴더를 만들고 이동합니다.

cmd

>mkdir c:\Users\[hoge]\cordova
>cd c:\Users\[hoge]\cordova

Cordova 프로젝트의 기초를 만듭니다.

cmd

>cordova create hello com.example.hello HelloWorld
第1引数(hello):プロジェクトディレクトリ名
第2引数(com.example.hello)：逆引きドメイン スタイル識別子と、プロジェクトを提供。
第3引数(HelloWorld)：アプリケーションの表示タイトル 

실행하면 Creating a new cordova project. 출력.

플랫폼 추가

hello로 이동합니다.

cmd

>cd hello

이번에는 ios의 어플리케이션을 상정하고 있으므로 ios만의 추가입니다. android나 windowsPhone의 경우는 적절히 변경 필요합니다. 또한 WARNING입니다. ios로 만들었지만 빌드는 할 수 없다는 것. (역시 Mac이 필요하네)

cmd

>cordova platform add ios
WARNING: Applications for platform ios can not be built on this OS - win32.
Using cordova-fetch for cordova-ios@~4.4.0
Adding ios project...
Creating Cordova project for the iOS platform:
        Path: platforms\ios
        Package: com.example.hello
        Name: HelloWorld
iOS project created with [email protected]
Discovered plugin "cordova-plugin-whitelist" in config.xml. Adding it to the project
Installing "cordova-plugin-whitelist" for ios
Adding cordova-plugin-whitelist to package.json
Saved plugin info for "cordova-plugin-whitelist" to config.xml
--save flag or autosave detected
Saving ios@~4.4.0 into config.xml file ...

현재 플랫폼 세트를 확인합니다.
ios가 있으면 OK입니다.

cmd

>cordova platforms ls
Installed platforms:
  ios 4.4.0
Available platforms:
  android ~6.2.2
  blackberry10 ~3.8.0 (deprecated)
  browser ~4.1.0
  webos ~3.7.0
  windows ~5.0.0

3. VSCode로 부팅

Cordova 프로젝트 폴더를 VSCode에서 엽니다.


디버그 모드(Ctrl+Shift+D)를 열고 톱니바퀴 아이콘을 선택하고 Cordova를 선택합니다.


디버그 오른쪽 풀다운에서 선택.
Simulate iOS in browser


(보충)
Run iOS on device
Run iOS on simulator는 다음 오류로 실행할 수 없습니다.

Launching for ios (This may take a while)...
Unable to launch iOS on non-mac machines

다음과 같이 실행 시작합니다.


하이브리드의 실장 방법은 별도 확인한다.

이상.

개발을 위해 ...
Apache Cordova에서 본격적인 스마트 폰 앱에 도전합시다.