Skip to content

Home

Jump to bottom Edit New page
Brad edited this page Jul 18, 2013 · 18 revisions

baas.io 에서는 사용자(회원) 관리, 파일 업/다운로드, Push 메시지 송/수신, 고객센터 등의 기능을 손쉽게 사용할 수 있는 클라우드 기반 서비스를 제공합니다.

이 중, 고객센터를 쉽게 이용하실 수 있도록 UI 라이브러리를 제공해드립니다. 이 라이브러리를 이용하시면, 기본 UI가 갖춰진 고객센터를 쉽게 이용하실 수 있으며, 오픈 소스로 제공되어 원하는 UI 형태로 쉽게 수정하여 사용하실 수 있습니다.

고객센터는 FAQ(자주하는 질문)를 제공하며, FAQ에 없는 경우 개발자에게 문의하는 기능을 제공합니다. 참고로, 현재 개발자에게 문의하는 기능은 개발하시는 앱에 로그인된 사용자만 문의할 수 있습니다.

※ 고객 센터 가이드를 보기 전에...

  • baas.io에 가입이 필요합니다. baas.io 가입 페이지에서 가입하실 수 있습니다.
  • 고객 센터 UI 라이브러리를 이용하기 위해서는 baas.io Android SDK가 필요합니다. Android 개발에 익숙하지 않은 개발자 분들은 Getting Started를 통해 기본 설정을 완료하시길 권장합니다.
  • Android ADT 및 SDK를 항상 최신으로 유지하는 것을 권장합니다. 개발툴로 Eclipse를 이용하시는 분들은 Installing the Eclipse Plugin 페이지를 확인하시기 바랍니다.
  • Text file encoding 방법이 UTF-8 기준으로 개발되어 있습니다. 사용하시는 개발툴의 Text file encoding 설정이 UTF-8로 되어 있는지 확인합니다.

기본 설정

고객센터를 이용하시기 위해서는 먼저 간단한 기본 설정이 필요합니다. 관련 설정은 Getting Started를 완료하시고 아래 작업을 진행하시기 바랍니다.

이후 가이드는, Getting Started를 완료하여, 개발하실 앱의 프로젝트와 baas.io SDK의 기본설정이 완료된 상태임을 가정하고 있습니다.


고객센터 UI 라이브러리 연동하기

Step 1. 소스 다운로드하기

방법1: git clone

고객센터는 오픈 소스로 제공됩니다. clone을 받으시거나 fork를 하셔서 자유롭게 이용하실 수 있습니다.

git clone https://github.com/baasio/baas.io-helpcenter-android.git

방법2: 압축(Zip) 파일 다운로드

아래의 링크에서 zip파일을 다운로드 받아 원하시는 위치에 압축해제 합니다.

https://github.com/baasio/baas.io-helpcenter-android/archive/master.zip

Step 2. 고객센터 프로젝트 Import 하기

  1. "File-Import" 를 선택합니다.

    <Import>

  2. Import 다이얼로그에서 "General-Existing Projects into Workspace"를 선택하고 "Next"버튼을 선택합니다.

    <Existing Projects into Workspace>

  3. 다음 Import 다이얼로그 화면에서 "Select root directory"의 "Browse"버튼을 눌러 다운로드 받은 폴더를 선택하고, "Projects:"에서 ActionBarSherlock, BaasioHelpCenter, BaasioHelpCenterSampleProject 프로젝트를 선택하고 "Finish"를 선택합니다.

    BaasioHelpCenterSampleProject 프로젝트는 샘플 앱으로, 고객 센터를 실행하기 위한 샘플이 이미 구현되어 있으니 참고 바랍니다.

    <Import BaasioHelpCenter project>

Step 3. 라이브러리 정리하기

기본설정을 하셨다면 이미 baas.io Android SDK가 jar파일 또는 프로젝트로 Import되어 있을 것입니다.

그런데, 고객센터 프로젝트의 libs 폴더에는 이미 baas.io Android SDK의 jar파일(baasioandroid.jar)이 포함되어 있습니다. 따라서, baas.io Android SDK 라이브러리가 중복되지 않도록 정리할 필요가 있습니다.

baas.io Android SDK를 Jar 라이브러리로 Import하신 분

생성하신 프로젝트의 baasioandroid.jar파일과 고객센터 프로젝트의 baasioandroid.jar파일이 같을 것이므로, 특별한 작업 없이도 문제 없이 동작할 것입니다.

만약, baasioandroid.jar 파일이 달라 에러가 나거나 오동작할 경우, 아래 링크에서 최신 SDK를 받으셔서, 두 프로젝트의 libs 폴더에서 baasioandroid.jar파일을 최신으로 맞춰주시기 바랍니다.

baas.io Android SDK를 Project로 Import하신 분

BaasioHelpCenter 프로젝트에 이미 BaasioAndroid 프로젝트가 jar(baasioandroid.jar)로 포함되어 있으므로, BaasioAndroid 프로젝트로 동일하게 정리할 필요가 있습니다.

아래의 순서로 정리하시기 바랍니다.

  1. BaasioHelpCenter 프로젝트의 libs 폴더에서 baasioandroid.jar 파일 삭제합니다.
  2. BaasioHelpCenter 프로젝트의 Properties > Android > Library에서 Add버튼을 눌러 BaasioAndroid 프로젝트를 추가합니다.
  3. 생성하신 프로젝트의 Properties > Android > Library에 BaasioAndroid 프로젝트가 추가되어 있는지 확인합니다.
  4. ActionbarSherlock > BaasioHelpCenter 순으로 Clean Build를 합니다.

이제 다음 단계를 수행하여 BaasioHelpCenter 프로젝트를 연동하시기 바랍니다.

Step 4. 생성한 프로젝트와 연동하기

  1. 생성하신 프로젝트에서 오른쪽 마우스를 클릭하여 Properties를 선택합니다.

    <Properties 다이얼로그>

  2. Properties 다이얼로그에서 Android를 선택하고 아래에 있는 Library에서 Add버튼을 선택합니다.

    <Import>

  3. Projection Selection 다이얼로그에서 BaasioHelpCenter프로젝트를 선택하고, "OK"를 선택합니다.

    <Import>

Step 5. AndroidMenifest.xml 수정하기

AndroidMenifest.xml을 수정하여, baas.io 고객센터 UI 라이브러리가 가지고 있는 화면의 Activity를 개발하시는 앱에 등록을 합니다.

baas.io 고객센터 UI 라이브러리 프로젝트의 AndroidMenifest.xml파일에 이미 클래스등록의 예제가 있습니다. BaasioHelpCenter 프로젝트의 AndroidMenifest.xml파일에서 "<!-- 고객센터 -->"라는 주석이 달린 부분을 그대로 복사해서 개발하시는 앱의 AndroidMenifest.xml파일에 '붙여넣기' 하시면 됩니다.

이때, 고객센터 화면을 실행시켜줄 화면의 Activity를 등록해 주어야합니다. <!-- 고객센터를 실행시켜줄 화면의 Activity 클래스 등록 --> 주석 부분의 <meta-data>태그의 "{고객센터를 실행시켜줄 화면의 Activity클래스의 전체 Package 경로}" 부분을 수정하여 등록을 해주어야 합니다. 꼭, 전체 package 경로로 넣어주시기 바랍니다.

예를들어, "com.example.sample"이라는 Package 경로에 TestActivity에서 실행시켜준다고 가정했을때, "com.example.sample.TestActivity"로 넣어주시면 됩니다.

정상적으로 등록이 되면, 실행시에 고객센터 메인화면의 좌측상단 Navigate up 버튼을 눌렀을 때, <meta-data>태그에 등록된 Activity에 해당하는 화면으로 돌아가게됩니다.

<!--  전역 클래스 등록 -->
<application
    android:name="{package명}.BaasioApplication"
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name">

	...

	<!-- 고객센터 -->
    <activity
        android:name="com.kth.baasio.helpcenter.ui.HelpCenterActivity"
        android:configChanges="orientation|screenSize"
        android:label="@string/title_activity_help"
        android:theme="@style/Theme.helpcenter"
        android:windowSoftInputMode="stateHidden|adjustUnspecified" >
		<!-- 고객센터를 실행시켜줄 화면의 Activity 클래스 등록 -->
        <meta-data
            android:name="android.support.PARENT_ACTIVITY"
            android:value="{고객센터를 실행시켜줄 화면의 Activity클래스의 전체 Package 경로}" />
        <meta-data
            android:name="android.app.default_searchable"
            android:value="com.kth.baasio.helpcenter.ui.SearchableFaqActivity" />
    </activity>
    <activity
        android:name="com.kth.baasio.helpcenter.ui.SearchableFaqActivity"
        android:exported="false"
        android:label="@string/title_activity_help"
        android:launchMode="singleTop"
        android:theme="@style/Theme.helpcenter" >
        <intent-filter>
            <action android:name="android.intent.action.SEARCH" />
        </intent-filter>

        <meta-data
            android:name="android.support.PARENT_ACTIVITY"
            android:value="com.kth.baasio.helpcenter.ui.HelpCenterActivity" />
        <meta-data
            android:name="android.app.searchable"
            android:resource="@xml/helpcenter_searchable" />
    </activity>
    <activity
        android:name="com.kth.baasio.helpcenter.ui.FaqDetailActivity"
        android:label="@string/title_activity_help"
        android:theme="@style/Theme.helpcenter" >
        <meta-data
            android:name="android.support.PARENT_ACTIVITY"
            android:value="com.kth.baasio.helpcenter.ui.HelpCenterActivity" />
    </activity>
</application>

Step 6. 고객센터 화면 호출하기

이제 고객센터화면의 Activity(HelpCenterActivity)를 호출하는 코드를 작성합니다.

아래 예제는 BaasioHelpCenterSample 프로젝트의 MainActivity의 소스코드입니다. 이 소스코드와 같이 startActivity를 통해 HelpCenterActivity를 호출하시면 됩니다.

package com.kth.baasio.helpcenter.sample;

import com.kth.baasio.helpcenter.ui.HelpCenterActivity;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.Button;

public class MainActivity extends Activity {
    private Context mContext;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mContext = this;

        Button button = (Button)findViewById(R.id.buttonHelpCenter);
        button.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
				// 고객센터 실행
                Intent intent = new Intent(mContext, HelpCenterActivity.class);
                startActivity(intent);
            }

        });

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }

}

축하드립니다.!!

이제, 고객센터를 연동이 모두 완료되었습니다.

추가된 프로젝트들을 ActionBarSherlock->BaasioHelpCenter->개발하시는 앱 순으로 "Project-Clean..."하여 Clean Build하시고 실행하시기만 하면 됩니다.

고객센터의 UI는 얼마든지 변경하셔서 앱의 테마에 맞게 수정하실 수 있습니다.

고객센터 관련 API의 가이드는 아래 링크에 있으니 참고 바랍니다.

화면 캡쳐 모음

<고객센터>

<고객센터-문의하기>

Add a custom footer
Clone this wiki locally