아이오닉사용해서 sveltekit 안드로이드 앱만들기

이미 스벨트로 만들어 놓은 코드가 있어서, 굳이 플러터 flutter를 사용하지 않고 기존 코드를 이용하여 앱을 만들어 보고 싶었다. 처음 앱으로 빌드할 때 좀 느렸지만 이후엔 빠르게 빌드가 됬다. 

오래 사용해보지 않아 얼마나 좋은지 나쁜지는 잘 모르겠지만 가벼운앱을 만들땐 괜찮을 않을까 싶다.

1. 기존에 있던 프로젝트에 capacitor 설치하기

npm install @capacitor/core @capacitor/cli

2. capacitor init 하기

capacitor를 init할때 스벨트킷의 빌드할 폴더는 build이기 때문에 기본값 www대신 build로 적어 준다..

(혹시라도 init 때 www로 설정해놓더라도 capacitor.config.ts의 webDir에서 나중에 바꿀 수 있으니 걱정할 필요 없다.)

npx cap init

3. 안드로이드나 IOS 플랫폼 설치

npm i @capacitor/ios @capacitor/android
npx cap add android //안드로이드 추가
npx cap add ios //ios 추가

4. 싱글페이지 빌드용 어뎁터 설치하기

npm i -D @sveltejs/adapter-static

https://github.com/sveltejs/kit/tree/master/packages/adapter-static

5.  싱글페이지로 빌드하기 위해 svelte.config에 아래와 같은 코드를 넣어준다. 

import adapter from '@sveltejs/adapter-static';

아래 코드를 보듯 기존 import adapter from '@sveltejs/adapter-auto'; 를 대체하였다.

// import adapter from '@sveltejs/adapter-auto';
import adapter from '@sveltejs/adapter-static';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess(),

	kit: {
		adapter: adapter(
        {fallback: 'index.html'}
        )
	}
};

export default config;

6. routes/+layout.js 파일 만들고 

export const prerender = true

7. 스벨트 빌드하기

npm run build

8.실행시키기

//안드로이드 스튜디오에서 실행
npx cap open android 

//실기기 실행
npx cap run android

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

라이브 리로드

1. capacitor.config.ts의 내용을 아래로 대체함

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

const appId = '앱.아이.디';
const appName = '앱이름';
const server = process.argv.includes('-hmr') ? {
  'url': 'http://192.168.5.67:5173',   // always have http:// in url
  'cleartext': true
} : {};
console.log(server);
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;

2. svelte를 디버깅 모드로 실행

npm run dev -- --host //호스트를 넣어서 아이피를 오픈해줘야함

3. 실기기에서 실행

cmd창을 하나 더 열고 아래의 명령어를 입력함

npx cap run android

참조

https://capacitorjs.com/docs/cli

SQLITE의 플러터 버전이다.

1. 경로정하기

 _path = await getDatabasesPath() + 'example.db'; // 디비의 경로를 정해준다.

2. DB 만들고 오픈하기

_db = await openDatabase(_path, version: _version, onCreate: onCreate);

디비 만들어질때 사용되는걸 정의 한다.

3. 디비가 만들어질때 테이블 생성하기

  static void onCreate(Database db, int version) async =>
        await db.execute('CREATE TABLE items (id INTEGER PRIMARY KEY NOT NULL, name STRING, price INTEGER, qty INTEGER, type STRING)');

데이타 베이스에 들어가는 순간 유니크한 프라이머리 키가 생성된다. (즉 index 1 2 3 4가 생성) 

4. DB에 존재하는 테이블들 보기

    static showTable() async {
      List result = await _db.rawQuery("SELECT name FROM sqlite_master WHERE type = 'table' AND name NOT LIKE 'android_%'");
      print(result);
    }

테이블이 만들어 졌는지 궁금할 것이다. 위의 rawQuery를 사용하면 만들어진 테이블을 확인 할 수 있다.

5. DB지워버리기

    static void deleteDB() async {
      await deleteDatabase(await getDatabasesPath() + 'example.db');
    }

6. 쓰기

 await _db.insert(테이블 이름, {키:벨류});

7. 읽기

await _db.query(테이블 이름);

8. 수정

9. 삭제