구름 IDE를 이용한 앱 개발

# 구름 IDE를 이용한 앱 개발

## 준비물

• 기존에 제작한 웹 사이트 등 준비.
• 아래 구름 IDE 사이트 가입하여 진행.
• ide.goorm.io/?_ga=2.85956624.821079087.1603759569-544496915.1601261713

구름IDE - 설치가 필요없는 통합개발환경 서비스

 

## 진행방법

1. 컨테이너 생성

• 구름 IDE 가입 후 로그인, 우측 상단 대시보드 클릭하여 진입
• 새 컨테이너 생성 클릭 후 아래 처럼 입력 후 생성 클릭

이름 : 앱이름
지역 : 서울(한국)
공개 범위 : 원하는 것 선택
( public 일 경우 공개 / private 일 경우 비 공개 )
소프트웨어 스택 : React Native 

 

2. 작업 진행

• App.js 파일 실행
• 구글에 expo react native webview 입력 후 처음 나온 사이트 진입 ( docs.expo.io/versions/latest/sdk/webview/ )

WebView - Expo Documentation

• 사이트 진입하여 아래 코드 복사 후 컨테이너로 가져와서 진행

터미널에 아래 입력하여 설치 진행
expo install react-native-webview


Usage 부분 코드 복사 후 App.js에 붙여넣기
import * as React from 'react';
import { WebView } from 'react-native-webview';

export default class App extends React.Component {
  render() {
    return <WebView source={{ uri: 'https://expo.io' }} style={{ marginTop: 20 }} />;
  }
}


위 코드 uri 부분(uri: 'https://expo.io')에 본인이 작업하여 배포한 사이트 주소 입력

• 입력 완료 후 우측 상단에 재생 버튼 클릭하여 실행
• 실행하면 QR코드가 나오는데, 안드로이드의 경우 Expo 어플을 설치, IOS의 경우 Expo Client 어플 설치 후 어플로 해당 QR 코드 스캔하여 정상실행 되는지 확인

 

3. 앱 출시 준비하기

• app.json 파일 실행
• expo 항목의 name은 해당 앱의 이름입력
• 앱 icon, splash 이미지의 경우 구글에 expo app icon 입력하여 나오는 사이트에서 규격 확인 (docs.expo.io/guides/app-icons/) 
• (icon의 경우 1024x1024, splash 이미지의 경우 1242x2436, png 형식의 파일)

App Icons - Expo Documentation

• assets 에 있는 기존 icon 등 파일 삭제 후 만든 icon, splash 이미지 파일 넣은 후 저장
• 구글에 expo build app 입력하여 나오는 사이트 진입(docs.expo.io/distribution/building-standalone-apps/)

Building Standalone Apps - Expo Documentation

• 아래 코드 입력하여 진행

터미널에 아래 입력하여 설치 진행
npm install -g expo-cli


설치 완료 후 오류 방지를 위해 왼쪽 폴더 목록의 .expo 폴더 삭제


app.json 에 안드로이드, ios 관련 코드 추가
 "ios": {
      "bundleIdentifier": "com.yourcompany.yourappname",
      "buildNumber": "1.0.0"
    },
    "android": {
      "package": "com.yourcompany.yourappname",
      "versionCode": 1
    }

 

4. 출시할 수 있는 apk 파일 생성

• 아래 입력하여 진행

아래 입력 후 엔터
expo build:android


빌드 진행을 위해 expo 계정 필요
계정이 없는 경우 터미널에 나온 문구 중 계정 생성 클릭하여 진행


계정 생성 및 로그인 후
key 관리 문구나오면 expo가 진행할 수 있도록 선택

• 완료 후 터미널에 나온 expo 링크로 진입, 로그인 후 Builds에 가서 완료된 내역에서 다운로드  버튼 클릭하여 apk 파일 다운로드 진행
• 안드로이드의 경우 터미널에 나온 링크로 접속하여 apk 파일을 다운로드, 설치할 수도 있다.

 

출처 : 조코딩 유튜브 www.youtube.com/watch?v=8eIQNfPbRms