해본 적 없는 일을 하고 싶어서 스마트폰 앱을 만들어 보기로 했다.
※안드로이드 스튜디오에서 한 일은 있지만, 당시의 머신 파워적으로 힘들고 스트레스 웅덩이에서 좌절한 적 있어.

참고 자료:토라 랩! Vol.2(by 기술서전6)
Ionic으로 간단하게 만들 수 있는 것들이 쓰여 있었으므로 이것을 시도해 보자.

What's Ionic

이 가장자리 참조.
h tps // 이오니 cf 라메를 rk. 코m/
htps // 이오니 c. 케이코에서. 이 m/로 v/우우 t-이 s-이오니 c. php

환경 구축

우선 환경 구축.
설치 대상 단말기의 환경은 다음과 같습니다.
・Windows10 Home

Node.js

Node.js의 HP에서 설치 프로그램을 다운로드하여 설치합니다.
htps : // 그래서 js. 오 rg / 엔 / 도 w 응 아 d /

라고 생각했지만, 이미 인스톨 하고 있었다.
버전을 확인해 보면 이하.

PS C:\Program Files\nodejs> node -v
v8.12.0

C:\WINDOWS\system32>npm -v
6.4.1

git

아래에서 다운로드하여 설치
h tps : // 기 t 푸 r 으 우도 ws. 기주 b. 이오/

하지만 이것도 들어 있기 때문에 이번에는 스루.

VS CODE 확장

VSC가 포함되어 있으므로 [Angular Language Service]라는 확장 기능 추가

ionic CLI

npm install ionic cordova -g

Android Studio

아래에서 다운로드하여 설치
htps : //로 ゔぇぺぺr. 안 d로이 d. 코 m / s 츠오

설치 프로그램이 1G 미만이므로 설치하면 삭제할 수 있습니다.

이것으로 환경 구축은 일단 완료.
여기까지는 특히 문제는 발생하지 않고.

Hello World

<참고>
h tp // //- c와 r. 사쿠라. 네. jp / 도쿠 우키 / 도쿠. php / 우동 ws % 에 3 % 81 % 에이 7 이오니 c % 에 3 % 82 % 92 % 에 5 % 7 % 8B % 에 3 % 82 % 81 % 에 3 % 82 % 8B % %96%B9%에6%B3%95
토라 랩! Vol.2

프로젝트 만들기

ionic start HelloWorld

어떤 것을 만드는가? 라고 듣기 때문에, 우선 tabs를 선택. 특히 깊은 의미는 없다.

Install the free Ionic Appflow SDK and connect your app?

이것에 대해서는 우선 [n]. 무슨 의미인지 잘 모르겠지만.

프로젝트 시작

샘플 프로젝트가 완성되므로 시작하자.

cd ./HelloWorld
ionic serve

http://localhost:8100
이런 식으로 브라우저에서 확인할 수 있습니다.





Ctrl+C로 정지시키는 것 같다.

안드로이드 앱화

ionic cordova platform add android
ionic cordova build android

이것이 갑자기 apk가 완성 될 것이라고 생각하면 오류

Failed to find 'ANDROID_HOME' environment variable. Try setting it manually.
Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to include path to valid SDK directory.

[ANDROID_HOME]이 설정되어 있지 않으면 좋지 않습니까?
안드로이드 스튜디오 설치 후 설정해야 할까요?

→ Android Studio의 설정이 제대로 끝나지 않았던 것이 원인이었던 모양.

재확인

필요한 것이 부족한지 다시 확인

cordova requirements

JDK도 들어가지 않았다.
※아무래도 JRE밖에 넣지 않은 것 같다. 라고 할까, 전부 정리해 인스톨 해 주는 것이 갖고 싶어요.

다시 확인

cordova requirements

PS C:\Users\RyoNakamae\Ionic\HelloWorld> cordova requirements

Requirements check results for android:
Java JDK: installed 1.8.0
Android SDK: installed true
Android target: installed android-28
Gradle: installed C:\Program Files\Android\Android Studio\gradle\gradle-5.1.1\bin\gradle

준비 OK

이제 준비 OK 왜 다시 빌드

ionic cordova build android

BUILD SUCCESSFUL in 6m 59s
42 actionable tasks: 42 executed
Built the following apk(s):
        C:\Users\RyoNakamae\Ionic\HelloWorld\platforms\android\app\build\outputs\apk\debug\app-debug.apk

완성.
디버그 빌드일까. 릴리스 빌드는 어떻게 할까?

Ionic DevApp

다음에 다음도 시도해 보자.
htps : // bg. 이오니 cf 라메를 rk. 코 m / 안녕 응 g - 이오니 c -

로그인할 필요가 있으므로 먼저 PC로 등록해 둔다.
htps : //이다 sh보아 rd. 이오니 cf 라메를 rk. 코 m/시그누 p

최신 버전이라면 서비스 시작에 옵션을 붙이는 포이

ionic serve --devapp

이미지는 FIRE HD 10에서

쉽게 앱의 동작을 확인할 수 있다.
라고 할까, 집에서 노는 분에는 이 상태에서도 문제 없잖아. . .

참고

windows10에서 환경 구축

htps : // 코 m / 타케 타케 카호 / ms / 1d69 80 아 6799f3 b5
h tp // //- c와 r. 사쿠라. 네. jp / 도쿠 우키 / 도쿠. php / 우동 ws % 에 3 % 81 % 에이 7 이오니 c % 에 3 % 82 % 92 % 에 5 % 7 % 8B % 에 3 % 82 % 81 % 에 3 % 82 % 8B % %96%B9%에6%B3%95
htps : // 이 m/cぉwn0082/이고 ms/5405c53에 b955f985에다

앞으로 도움이 될 것입니다.

htps : // 이 m/s_코자케/있어 ms/d590896에 5303b75c0c6c
htps : // bg. 미쓰루오 g.いんふぉ/2015/04/이오니 c-7이다 ys-와 r. HTML