NativeScript와 Vue.js로 api통신 가능한 앱 만들기

안녕하세요. 서호입니다.

오늘은 NativeScript와 Vue.js를 이용하여, api 통신을 하는 어플을 만들어 볼 것입니다.

 

제가 사용할 툴은 IntelliJ입니다.

 

node.js와 안드로이드 스튜디오 설치를 선행해주세요!

 

프로젝트를 만들기 위해, cmd를 관리자 권한으로 키고 원하는 경로로 이동한 다음, 명령어를 입력해 줍니다.

 

아직 NativeScript가 설치되지 않았을테니, 설치를 진행해줍니다.

npm install -g nativescript

그다음 NativeScript로 프로젝트를 만들어 줍니다.

tns create myVueTest //myVueTest는 프로젝트명

해당 명령어를 입력하면 선택하라는 사항이 많을텐데, Vue.js와 Blank를 선택해주세요.

 

프로젝트 폴더로 이동해줍니다.

cd myVueTest

nativescript-vue-plugin을 설치해줍니다.

npm install --save nativescript-vue

 

cmd 창은 계속 이용해야하니 끄지 마시고, IntelliJ나 이클립스를 켜줍니다.

경로는 '당신의 경로'\myVueTest\app 입니다.

 

다음과 같은 화면이 나왔다면, 내 핸드폰에 apk를 받아서 실행해봅시다.

 

주의 : 컴퓨터와 핸드폰이 같은 와이파이를 사용해야 합니다.

 

핸드폰 개발자 옵션을 활성화 시킨 다음, USB디버깅을 활성화합니다.

핸드폰과 컴퓨터를 케이블로 연결하고, 아까 꺼놓지 않았던 cmd창으로 이동하여 다음 명령어를 쳐줍니다.

 

tns device

핸드폰이 잘 연결되었고, 설정이 되었다면 당신의 핸드폰이 목록에 뜰 것 입니다.

 

핸드폰을 연결한 채로 다음 명령어를 입력해줍니다.

adb tcpip 5555

 

그리고 핸드폰 케이블을 분리해줍니다.

핸드폰의 IP주소를 확인한 후(와이파이 설정에 들어가면 있음) 다음 명령어를 쳐줍니다.

adb connect 핸드폰IP:5555

 

잘 연결되었는지 확인하기 위해 다음 명령어를 쳐줍니다.

tns device

그러면 Device Identifier가 아이피와:5555로 바뀌었음을 확인할 수 있습니다.

 

이제 앱을 실행해봅시다. 저는 갤럭시라 android라 입력했지만, 애플인 분들은 ios라 입력하면 되는걸로 압니다.

tns run android

같은 프로젝트로 처음 이 명령어를 사용할때는 오래 기다려야 하지만, 다음에는 좀 더 짧게 기다리시면 됩니다.

다 완료되면 핸드폰에 프로젝트명의 앱이 생기셨을 겁니다.

들어가보면 다음과 같은 화면이 나옵니다.

 

앞으로 핸드폰과 컴퓨터의 연결이 끊어지지 않는 한(와이파이가 바뀐다던가) 코드를 수정하면 바로 핸드폰에서 확인해보실 수 있습니다.

 

 

이제 IntelliJ로 넘어갑니다.

Home.vue를 키고 작업을 해줍니다. 한글로 써진 부분은 각자 알맞는 변수값을 입력해줍니다.

<template>
  <Page>
    <ScrollView orientation="vertical-align">
      <StackLayout orientation="vertical-align">
        <Label text="Join Check" class="h1 text-center"></Label>
        <Label text="파라미터명1"></Label>
        <TextField v-model="파라미터명1" hint="예시" />
        <Label text="파라미터명2"></Label>
        <TextField v-model="파라미터명2" hint="예시" />
        <Button text="Done" @tap="read"
                class="btn btn-primary btn-active"></Button>
        <ListView for="result in results" style="height:1250px">
          <v-template>
            <FlexboxLayout flexDirection="row">
              <Label :text="result.넘겨온값1" class="t-12" style="width: 50%" />
              <Label :text="result.넘겨온값2" class="t-12" style="width: 50%" />
            </FlexboxLayout>
          </v-template>
        </ListView>
      </StackLayout>
    </ScrollView>
  </Page>
</template>

<script>
import { Http } from '@nativescript/core'

export default {
  data() {
    return {
      results : [],
      api에넘길파라미터1: "",
      api에넘길파라미터2 : ""
    };
  },
  computed: {
    message: function() {
      return;
    }
  },
  methods: {
    read(datas) {
      Http.request({
        url: "사용할URL",
        method: "POST",
        headers: {"content-type":"application/json"},
        content:JSON.stringify({
          api에넘길파라미터명1 : this.api에넘길파라미터1,
          api에넘길파라미터명2 : this.api에넘길파라미터2
        })
      }).then(response => {
        var result = response.content.toJSON();
        this.results = result;
      }, error => {
        console.error(error);
        alert(error);
      });
    }
  }
};
</script>
</script>

<style scoped>

</style>

 

이때, 사용할 URL이 https가 아닌 http라면 다음 작업을 추가로 진행해주셔야합니다.

당신의경로\vue-test\App_Resources\Android\src\main\AndroidManifest.xml

에 들어가셔서, 메모장으로 해당 파일을 열어줍니다.

 

그리고 다음 내용을 추가합니다.

<application
		android:name="com.tns.NativeScriptApplication"
		android:allowBackup="true"
		android:icon="@mipmap/ic_launcher"
		android:label="@string/app_name"
		android:usesCleartextTraffic="true" >>추가된 줄
		android:theme="@style/AppTheme"
		android:hardwareAccelerated="true">

 

그러면 이제 http통신도 가능하게 됩니다.

 

저렇게 하시면 화면이 이와 비슷하게 나오게 됩니다. 저는 api통신도 잘 되는걸 확인했습니다.

 

 

감사합니다.

 

 

 

-----참고사항

화면 만드는 코드가 힘드시다면 다음 사이트에서 화면 미리보기가 가능하니 참고해보세요.

들어가셔서 깔라는 어플 2개 다운받으시면 됩니다.

https://play.nativescript.org/

NativeScript Playground