capacitor를 써서 플레이스토어를 통하지 않고 어플리케이션의 쉽게 코드를 업데이트 하는 방법은 capgo를 사용하는 것이다. 리액트는 appcenter의 코드푸시를 사용하면 된다.

https://capgo.app/

아쉽게도 무료는 아니지만 월 39불이면 5,000 엑티브 유저 까지 사용을 할 수 있다.

(테스트로 앱을 설치하면 만들면 그것이 다 active 유저로 카운팅되니 주의) 무료로 사용할 수 있는건 월 50명의 monthly유저만 가능하니 테스트로 깔고 여기저기 다운로드 해보라고 보내주면 사용량을 초과 할 것이다.  개인적으로는 두배씩은 늘려주면 유료로도 사용할 것 같은데....

어째튼 스타트업에서 미리 설치해놓고 비상 상황시 돈 내고 사용할 수 있지 않을까 싶다.(아마도)

기본적인 사용법은 다음과 같다.

1. 회원가입

2. capacitor앱에 capgo를 초기화 함

3. 스벨트킷 +layout.js에 아래의 코드를 붙여넣는다.

※ 공식설명서에 main코드에 붙이라고 적혀있어서 app.html에 넣고 삽질 했지만 작동안되서 +layout.js에 넣어서 하니 됨.

import { CapacitorUpdater } from '@capgo/capacitor-updater'

CapacitorUpdater.notifyAppReady();

4. 스벨트킷을 빌드함

npm run build

5. 안드로이드 기기에 설치함

npx cap run android

-------

라이브업로드 방법

1. 코드를 수정함

2. package.json의 version을 높힘

3. npm run build

4. 빌드한 것을 capacitor와 싱크함

npx cap sync

5.업로드

앱아이디는 자신이 세팅한 앱아이디 ex) com.example.name

npx @capgo/cli bundle upload [appId]

routes폴더에 들어가 +layout을 들어가보면

import 'ionic-svelte/components/all';

ionic의 모든 컴포넌트를 가져오는 걸 볼 수 있다. 이렇게 레이아웃에 컴포넌트를 불러오는 것이 있기 때문에 페이지에서 컴포넌트를 사용할 때 import를 따로 하지 않고 컴포넌트를 사용할 수 있다.

1. 일단 아래의 사이트를 들어간다. ionic의 컴포넌트 다큐먼트페이지다.

https://ionicframework.com/docs/components

여기를 들어가서 사용할 컴포넌트의 자바스크립트 코드를 복사한 뒤 붙여넣기 한다.

그러면 아래 스크린샷 처럼 쉽게 UI를 만들 수 있다. 

이전편 

1. [스벨트킷모바일앱개발] capacitor Ionic SvelteKit 실행해보기

스벨트아이오닉을 사용하여 capacitor로 모바일 앱을 만드는 방법인데

기존에 플러터나 안드로이드 앱을 만들어 봤다면 과정은 다를게 없기 때문에 어렵지 않다.

1. 커멘드에서 키스토어 생성

keytool -genkey -v -keystore key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

2. android/ 폴더에 key.properties 파일을 생성

storePassword=<키생성시 입력한 암호>
keyPassword=<키생성시 입력한 암호>
keyAlias=key
storeFile=<키파일의 경로와 파일명> 파일경로가 \\를 사용해야함

3. android/app/build.gradle

def keystoreProperties = new Properties()
def keystorePropertiesFile = rootProject.file('key.properties')
if (keystorePropertiesFile.exists()) {
    keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
}


apply plugin: 'com.android.application'

android { ...

4. android/app/build.gradle

android {
    // start of signingConfigs
    signingConfigs {
        release {
            keyAlias keystoreProperties['keyAlias']
            keyPassword keystoreProperties['keyPassword']
            storeFile file(keystoreProperties['storeFile'])
            storePassword keystoreProperties['storePassword']
        }
    }
    // end of signingConfigs
    compileSdkVersion rootProject.ext.compileSdkVersion
    ...
     buildTypes {
        release {
        	// start of 코드난독화 및 사이즈 축소
            minifyEnabled true
            useProguard true
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
            
            // release 속성으로 변경
            signingConfig signingConfigs.release
        }
    }

5. 스벨트 엡을 빌드하고 

npm build

6. build된 앱가 capacitor를 싱크를 시킴 

npx cap sync

※ 이를 하지 않을경우 gradlew실행시 새로 빌드된 앱이 apk로 바뀌지 않음. 위 명령어를 실행하지 않고 apk를 빌드한 뒤 수정된게 반영되지 않아서 당황했다.

7. apk나 appbundle을 생성

안드로이드 폴더에 들어가서

//apk

gradlew assembleRelease

//or appbundle

gradlew bundleRelease

※ gradlew clean 를 사용하면 gradlew로 만든 apk를 지울 수 있으니 실패시 사용.

생성된 apk 경로는 아래와 같다.

android/app/build/outputs/apk/release/app-release.apk

번들 경로

http://android/app/build/outputs/bundle/

---------- 추가 ----------

앱을 수정시 버전을 업데이트 해야한다.

ex)

\android\app\build.gradle

versionCode 2
versionName "1.0.1"

config.json

version

참조

https://devdactic.com/ionic-in-app-purchase-capacitor

2. [스벨트킷모바일앱개발] 사인된 apk 만들기

이전에 스벨트에 capacitor를 설치하여 모바일 앱을 만들때는 설정해야 할 것들이 좀 있어서 귀찮았다.

https://infocentre.tistory.com/147

하지만 ionic-svelte 프로젝트를 사용하면 이미 설정이 되어있어서 편하다.

아이오닉 스벨트 설치부터 안드로이드 폰에 APK설치 해보기

1. 설치하기 

 npm create ionic-svelte-app@latest 프로젝트이름

위처럼 아이오닉스벨트를 설치하면 수동으로 세팅해야 할 것들이 이미 설정이 되있어서 좋음. 만약 기존 프로젝트에 추가하려면 아래의 깃 문서의 설치 방법을 따라야함.

 https://github.com/Tommertom/svelte-ionic-app

2. 설치할 패키지고르기 

안드로이드로 실행해보기

3. 안드로이드 플랫폼 설치 및 추가

  (3-1)안드로이드 플랫폼 설치

npm i @capacitor/android

  (3-2)안드로이드 플랫폼 추가

npx cap add android

4. 빌드하기 

npm run build

5. 안드로이드 폰에 설치하기

npx cap run android

ios는 위의 명령어들을 android를 ios로 대체함

------------------------------

위 처럼 하는 방법은 빌드가 된것을 폰에 옮길때 사용하는 방법이다. 하지만 개발할때는 실시간으로 코드가 변경함에 따라, 화면도 바뀌는 것을 볼 수 있어야 한다.  이를 '라이브리로드' 라고 한다.  (플러터에서는 Hot reload)

라이브리로드 사용하기 (개발모드)

1. 개발모드로 클라이언트 서버키기 

npm run dev -- --host

2. (-hmr:hot module replacement 플래그를 추하가여) 안드로이드로 폰에 설치하기

npx cap run adroid -hmr

: 아래의 코드를 보듯이 -hmr이 있으면 url값과 cleartext값을 전달함으로서 앱화면을 url주소와 연결 시킴

import { CapacitorConfig } from '@capacitor/cli';

const appId = 'ionic-sveltekit-ssr-demo.ionic.io'; // 이것에 따라 빌드될때 안드로이드 앱아이디 생성
const appName = 'ionic-sveltekit-ssr-demo';
const server = process.argv.includes('-hmr') ? {
  'url': 'http://192.168.5.67:5173',   // always have http:// in url
  'cleartext': true
} : {};
const webDir = 'build';

const config: CapacitorConfig = {
  appId,
  appName,
  webDir,
  server
};

if (process.argv.includes('-hmr')) console.log('WARNING: running capacitor with livereload config', config);

export default config;

※만약 안된다면 위와 코드중 'url': http:// ... " 부분이 개발모드 클라이언트 로컬아이피 주소랑 같은지 확인한다.

참조

https://ionic.io/blog/pwas-using-sveltekit-and-ionic

기존에 프로젝트는 netlify에 업로드를 했는데 sveltekit은 vercel에 올리는게 더 쉽고 좋은거 같다. SSR

1. 프로젝트를 깃허브에 올린다. 올리는 법 모르면 클릭

2. vercel에 로그인 후 https://vercel.com/dashboard 에서 add new project를 누른다.

3. vercel이 깃에 접근할 수 있도록 접근 권한을 주고 깃허브 리스트에서 올릴 프로젝트를 찾는다. 그리고 import

4.디플로이를 누르면 끝

기존에 만들었던 프로그램에서는 +page.svelte파일에서 onMount시 서버에서 필요한 데이터를 가져오도록 만들었다.

하지만 sveltekit에 보면 +papge.js나 +page.server.js를 사용하는 예를 볼 수 있다. 

간단하게 위의 코드를 설명하자면 /** @type {import('./$types').PageLoad} */ 부분은 JSDoc이다. 공식문서를 보면 javaDoc과 비슷하다고 하는데 자바는 안해봐서 모르겠지만 JSDoc의 @type 통해서 타입 체킹을 할 수 있다고 한다.

(스벨트킷은 자동으로  $types.d.ts를 생성하며 거기서 load되는 파라매터의 타입을 만들고 그 타입을 import하는 것) 

타입체킹을 하고 싶지 않으면 저 라인을 무시하면 된다. 자세한 내용은 여기 보시면 된다. (https://kit.svelte.dev/docs/types#app)

어째튼 용도는 폴더의 이름으로 url이 리퀘스트 되면  +page.js이 먼저 실행되어 화면에 들어가는 데이터를 +page.svelte파일에 전달해주고 그걸 가지고 랜더링을 한다.

아래는 +page.svelte에서 onMount시 화면에 필요한 데이터를 받아오는 코드이다.

<script>
import {onMount} from 'svelte'

let datas=[];
onMount(async()=>{
  let res = await fetch('https://api.fake-rest.refine.dev/posts')
  datas = await res.json()
  console.log(datas)
})

</script>
{#each datas as data}
  <div>{data.title}</div>
{/each}

페이지 소스를 봤을때 div안이 비어 있다.

다음은 +page.js와 +page.svelte를 나누어서 +page.js에서 데이터를 요청하여 +page.svelte에 전달 하는 경우이다.

+page.js

  export async function load() {
    let res = await fetch('https://api.fake-rest.refine.dev/posts')
    let posts = await res.json()
    return {
      posts
    };
  }

+page.svelte

<script>
  import { error } from '@sveltejs/kit';
  export let data;
</script>
  {#each data.posts as post}
    <div>{post.title}</div>
  {/each}

위에 보듯이 전달은 data 변수를 통해 전달된다.  전의 예제와 다르게 리퀘스트 된 데이터가 페이지 소스에 랜더링 되어 추가된 것을 볼 수있다.

이를 통해 서버사이드랜더링을 할 수 있다! 또한 +page.server.js를 사용하면 서버로서 코드가 실행되며 필요에 따라 클라이언트에 넣지 못하는 민감한 정보를 넣을 수도 있다. 

npm update

와이파이를 통해 아이피와 포트를 오픈

npm run dev -- --host