로빈 파트 2를 사용하여 웹 애플리케이션에서 라이브 채팅을 구축하는 방법

마지막 부분에서는 웹 애플리케이션 고객 서비스 라이브 채팅 기능을 구축하는 동안 Javascript SDK를 사용하여 Robin을 설정하는 방법을 살펴보았습니다. 이 부분에서는 사용자 메시지에 응답하기 위해 CryptoDegen용 고객 지원 클라이언트를 신속하게 설정하기 위해 Robin의 Vue SDK를 설정하는 방법을 살펴봅니다.

전제 조건

이 자습서를 따라 하려면 다음이 있어야 합니다.

Vue.JS에 대한 지식

로빈 API 키

데이터베이스에서 데이터를 검색하는 백엔드 서버(원하는 것을 사용할 수 있음)

아직 Robin API 키를 받지 못한 경우 Robin Account 에서 Robin API 키를 가져올 수 있습니다.

Robin Vue SDK 등록

진행하기 전에 먼저 Robin Vue SDK를 설치해야 합니다. 다음 코드를 복사하여 터미널에 붙여넣습니다.

npm install robin-vue --save

다음으로 기본 항목 파일에서 Vue 인스턴스에 Robin Vue SDK를 등록해야 합니다. 이 자습서에서는 src/main.ts 입니다. 다음 코드를 복사하여 붙여넣습니다.

// main.ts

import RobinChat from 'robin-vue'

Vue.use(RobinChat)

다음으로 Robin의 전역 스타일을 가져옵니다. src/main.ts 파일에 다음 코드 줄을 추가합니다.

// main.ts

import 'robin-vue/dist/style.css'

RobinChat 구성 요소

RobinChat 구성 요소를 설정하기 전에 src/views/Login.vue라는 보기 구성 요소를 만듭니다. 이것은 CryptoDegen의 지원 팀이 사용자 메시지에 응답하기 위해 Robin 플랫폼에 액세스하는 방법입니다.

// login.vue

<template>
  <div class="signin-ctn section" id="app">
    <div class="inner">
      <div class="auth-box">
        <!-- image -->
        <span>Distributing finance for everyone</span>
        <form @submit.prevent>
          <div class="form-group" :class="{ error: !emailValidate }">
            <input
              v-model="email"
              type="email"
              placeholder="[email protected]"
            />
            <label>Your Email</label>
          </div>
          <div class="form-group">
            <div class="password-field">
              <input
                v-model="password"
                :type="obscure ? 'password' : 'text'"
                placeholder="********"
              />
              <i class="material-symbols-outlined" @click="obscure = !obscure">
                {{ obscure ? 'visibility_off' : 'visibility' }}
              </i>
            </div>
            <label>Password</label>
          </div>
          <button v-if="!isLoading" class="primary-btn" @click="signIn()">
            Login
          </button>
          <button v-else class="primary-btn" disabled>
            <div class="spinner2"></div>
          </button>
        </form>
      </div>
    </div>
  </div>
</template>

export default Vue.extend({
  name: 'Login',
  data() {
    return {
      email: '' as string,
      password: '',
      obscure: true,
      isLoading: false,
    }
  },
  computed: {
    emailValidate() {
      // eslint-disable-next-line
      return /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
        this.email
      )
    },
  },
  methods: {
  },
})
</script>

<style scoped>
h1 {
  font-weight: 500;
  font-size: clamp(0.3rem, 7vw, 2rem);
}
span {
  display: block;
  font-size: clamp(0.3rem, 7vw, 1rem);
  color: #8d9091;
  margin: 0.625rem 0 1.375rem;
}
label {
  font-size: clamp(0.3rem, 5vw, 1rem);
}
.section {
  display: flex;
  justify-content: center;
  width: 100%;
}
.section > .inner {
  width: 90%;
}
.signin-ctn.section {
  min-height: 100vh;
  align-items: center;
}
.signin-ctn > .inner {
  max-width: 600px;
}
.auth-box {
  text-align: center;
  padding: 10% 15%;
  height: auto;
  min-height: 650px;
  padding-bottom: 5%;
}
.auth-box img {
  border-radius: 11px;
  margin-bottom: 1rem;
}
.form-group {
  margin-top: 1.5rem;
  position: relative;
  text-align: left;
  display: flex;
  flex-direction: column-reverse;
}
.form-group label {
  font-size: 1rem;
  display: block;
  line-height: 32px;
  transition: 0.3s;
}
.form-group input {
  display: block;
  background: #f5f7fc;
  border-radius: 4px;
  transition: 0.3s;
  width: 100%;
  height: 55px;
  padding: 0 1.5rem;
  font-size: 1rem;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
}
.form-group input::placeholder {
  color: #9999bc;
}
.form-group .password-field {
  padding-right: 1.5rem;
  display: flex;
  align-items: center;
  background: #f5f7fc;
  border-radius: 4px;
  width: 100%;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
}
.form-group .password-field input {
  border: none;
  transition: 0s;
  -webkit-transition: 0s;
  -moz-transition: 0s;
  -ms-transition: 0s;
  -o-transition: 0s;
}
.form-group .icon {
  position: absolute;
  right: 16px;
  top: 50%;
}
.flex-ctn.link {
  width: max-content;
  margin-left: auto;
  margin-top: 0.5rem;
  font-size: 0.925rem;
}
.flex-ctn.link div {
  font-size: 1rem;
  color: #f66b03;
  cursor: pointer;
  font-weight: 400;
  line-height: 24px;
}
.header {
  margin: 10% auto 0 auto;
}
form {
  margin-top: 10%;
}
.primary-btn {
  margin-top: 2rem;
}
@media screen and (max-width: 1450px) {
  .section > .inner {
    width: 90%;
  }
}
@media screen and (max-height: 900px) {
  .auth-box {
    padding: 5% 15%;
    min-height: 560px;
  }
  .header {
    margin-top: 5%;
    font-size: 1.3rem;
  }
  .primary-btn {
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (max-width: 600px) {
  .auth-box {
    padding: 5% 8%;
    height: auto;
    min-height: auto;
  }
  .primary-btn {
    min-width: auto;
    width: 100%;
    font-size: 0.9rem;
    height: 45px;
  }
  .flex-ctn.link {
    margin-top: 15%;
    font-size: 0.775rem;
  }
  .section > .inner {
    width: 95%;
  }
}
</style>

이 튜토리얼은 이 시리즈의 1부에서와 같이 클라이언트 측에서 사용자 인증 프로세스를 조롱합니다.

다음으로 signIn()라는 함수를 만듭니다.

async signIn() {
  this.isLoading = true
  const promise: Promise<ObjectType> = new Promise((resolve, reject) => {
    setTimeout(() => {
      if (
        this.email == '[email protected]' &&
        this.password == 'JetpaySupport'
      ) {
        resolve({ status: 'success', data: { 
           _id: '983388d4d769496eb4bc0e42a6c0593a',
          email: '[email protected]',
          username: 'Support',
          user_token: 'SxPzdCcGZeyNUGPUZRNIiFXH'
        }})
      } else {
        reject({ status: 'error', error: 'Invalid email or password' })
      }
    }, 2000)
  })
  const response = await promise as ObjectType
  if (response.status === 'success') {
    this.$router.push('/chat')
    localStorage.setItem('data', JSON.stringify(response.data))
  } else {
    console.log(response)
  }
  this.isLoading = false
}

이제 RobinChat 구성 요소를 초기화하려면 보기 구성 요소src/views/Chat.vue를 만들고 아래에 다음 코드 스니펫을 붙여넣습니다.

<template>
  <div class="chat">
    <RobinChat
      logo="https://iili.io/wUVjdG.png"
      api-key="NT-XmIzEmWUlsrQYypZOFRlogDFvQUsaEuxMfZf"
      :users="users"
      :user-token="userToken"
      :keys="keys"
      :user-name="userName"
      channel="private_chat"
      :features="[]"
    >
    </RobinChat>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

type ObjectType = Record<string, any>

export default Vue.extend({
  name: 'Chat',
  data() {
    return {
      userName: '',
      userToken: '',
      users: [] as Array<ObjectType>,
      keys: {
        userToken: 'robin_user_token',
        profileImage: 'profile_photo',
        userName: 'username',
      },
    }
  },
  created() {
    if (localStorage.getItem('data')) {
      const data = JSON.parse(localStorage.getItem('data') || '{}')
      this.userToken = data.user_token
      this.userName = data.user_name
    }

    this.getUsers()
  },
  methods: {
    async getUsers() {
      const promise: Promise<Array<ObjectType>> = new Promise((resolve) => {
        setTimeout(() => {
          const users = [
            {
              _id: '983388d4d769496eb4bc0e42a6c0593a',
              email: '[email protected]',
              username: 'CryptoDegen Support',
              robin_user_token: 'SxPzdCcGZeyNUGPUZRNIiFXH',
              profile_photo: '',
            },
            {
              _id: 'b990738c18584abfbad077ad90712b56',
              email: '[email protected]',
              username: 'Enoch Chejieh',
              robin_user_token: 'SHkPHNIYqwQIvyaYFaovLlHa',
              profile_photo: '',
            },
          ]
          resolve(users)
        }, 1000)
      })
      const response = await promise
      this.users = [...response]
    },
  },
})
</script>

Robin Vue SDK는 create-chat , forward-messages , delete-messages, archive-chat , reply-messages , voice-recorder 와 같이 플랫폼에서 사용하려는 Robin 기능을 지정할 수 있는 기능과 같은 추가 옵션을 제공합니다. , message-reactions.view 및 message-reaction.delete .

결론

그래서 빠른 요약. 이 부분에서는 Vue 애플리케이션에서 Robin Vue SDK를 사용하는 방법을 배웠습니다.

Robin의 공식 SDK를 사용하면 추가 구성이 필요하지 않아 인앱 라이브 채팅 커뮤니케이션이 플러그인 플레이만큼 쉽습니다.

여기repository에서 소스 코드를 얻을 수 있고 작동 중인demo을 볼 수 있습니다.

이 짧은 시리즈가 마음에 드셨기를 바라며, 여러분이 무엇을 만들지 빨리 보고 싶습니다!