[Django] Django REST Framework ( DRF ) 와 안드로이드 연동하기 - 2

지난 시간에 이어 안드로이드에서 REST를 받을 수 있는 라이브러리와 적용방법에 대해서 알아보겠습니다.

Django 서버를 외부에서 접속하려면 0.0.0.0 으로 서버를 실행해야합니다.

그리고 접속허용할 외부 IP를 설정해야합니다.

settings.py

' * ' 은 어떤 IP든 전부 접속허용을 해주겠다는 의미입니다.

ALLOWED_HOSTS = [ '111.222.333.444' , '222.666.777.888' ] 는

IP 주소가 111.222.333.444 , 222.666.777.888 만 Django 웹서버로 접근을 허용하겠다라는 의미입니다.

6-2. ngrok 세팅 방법

ngrok는 도메인 할당하는 것처럼 localhost를 외부에서 접근할 수 있게 해주는 툴입니다.

고정아이피를 사용하고 외부접근 포트를 바인딩해주고, Django runserver 0.0.0.0 와 외부접근 바인딩된 포트를 사용하면 

외부에서 쉽게 접근하겠지만 유동아이피를 사용한다면 외부에서 접근하기 쉽지 않습니다. 

이때 ngrok를 사용한다면 외부에서 쉽게 접근할 수 있습니다. 다만 다른 서버를 거쳤다가 오기때문에 속도면에서 느리므로 

테스트용으로만 사용해야 합니다.

그림으로 보면 쉽게 이해가 갑니다.

1. 아래의 링크에 들어가서 설치를 합니다.

다운로드 링크 ( https://ngrok.com/ )

저는 윈도우를 쓰기때문에 윈도우 버전으로 설치했습니다

2. ngrok 를 실행합니다

그리고 ngrok http 포트번호( django runserver할때 사용하는 포트번호) 를 입력하고 엔터를 눌러줍니다.

3. 동작확인

http://df3c2dde.ngrok.io 가 외부 접속할 수 있는 URL 입니다.

http://df3c2dde.ngrok.io 가 localhost:8000 과 매핑이된다고 상세하게 써져있습니다.

참고로 URL은 ngrok를 다시 켤때마다 새로운 URL을 주기때문에 항상 확인해야 합니다.,

브라우저 또는 다른 네트워크 대역에 있는 장치에서 위의 URL을 입력해봅니다.

지금은 제 PC의 브라우저에서 스크린샷을 찍었지만 스마트폰에서 접근하면 페이지가 잘열립니다.

ngrok에서 Http Requests 를 보여주고 오른쪽에 Http Response Code도 함께 보여주기 때문에

로그를 확인하면서 테스트를 할 수 있습니다.

7. 안드로이드 RETROFIT 설정

우선 RETROFIT이 무엇인지 살펴보겠습니다.

Retrofit은 Square에서 만든 REST Api를 손쉽게 사용하기 위한 Java, Android 라이브러리 입니다.

그리고 CURD 기능을 모두 제공합니다.

Create : POST

Update : PUT, PATCH

Read : GET

Delete : DELETE

또한 JSON 데이터를 클래스로 변환시켜주는 라이브러리들도 지원합니다.

• Gson: com.squareup.retrofit2:converter-gson
• Jackson: com.squareup.retrofit2:converter-jackson
• Moshi: com.squareup.retrofit2:converter-moshi
• Protobuf: com.squareup.retrofit2:converter-protobuf
• Wire: com.squareup.retrofit2:converter-wire
• Simple XML: com.squareup.retrofit2:converter-simplexml
• Scalars (primitives, boxed, and String): com.squareup.retrofit2:converter-scalars

안드로이드 프로젝트를 만들고 Gradle 파일을 열어 아래 코드를 추가합니다.

retrofit 과 Gson을 사용할 것이므로 아래 2개를 추가해야합니다.

compile 'com.squareup.retrofit2:retrofit:2.3.0'
compile 'com.squareup.retrofit2:converter-gson:2.3.0'

build.gradle

dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', { exclude group: 'com.android.support', module: 'support-annotations' }) compile 'com.android.support:appcompat-v7:25.3.1' compile 'com.android.support.constraint:constraint-layout:1.0.2' testCompile 'junit:junit:4.12' compile 'com.squareup.retrofit2:retrofit:2.3.0' compile 'com.squareup.retrofit2:converter-gson:2.3.0' compile 'com.google.code.gson:gson:2.7' compile 'com.jakewharton:butterknife:8.6.0' annotationProcessor 'com.jakewharton:butterknife-compiler:8.6.0' }

네트워크 코드 만들기

- Application을 상속받은 ApplicationController 클래스 생성

안드로이드에서 Application 클래스는 애플리케이션 컴포넌트 사이에서 공유할수 있게 해줍니다.

어디서든 context를 이용한 접근이 가능하게 됩니다.

[사용방법]

1) Application 클래스 상속 

ApplicationController.java

package com.example.kjh.retrofit_test; import android.app.Application; import android.util.Log; import retrofit2.Retrofit; import retrofit2.converter.gson.GsonConverterFactory; /** * Created by KJH on 2017-06-06. */ public class ApplicationController extends Application { public final static String TAG = "KJH"; private static ApplicationController instance; public static ApplicationController getInstance(){return instance;} @Override public void onCreate() { super.onCreate(); ApplicationController.instance = this; } private NetworkService networkService; public NetworkService getNetworkService() {return networkService;} private String baseUrl; public void buildNetworkService(String ip, int port){ synchronized (ApplicationController.class){ if (networkService == null){ baseUrl = String.format("http://%s:%d/", ip, port); Log.i(TAG, baseUrl); Retrofit retrofit = new Retrofit.Builder() .baseUrl(baseUrl) .addConverterFactory(GsonConverterFactory.create()) .build(); networkService = retrofit.create(NetworkService.class); } } } public void buildNetworkService(String ip){ synchronized (ApplicationController.class){ if (networkService == null){ baseUrl = String.format("http://%s/", ip); Log.i(TAG, baseUrl); Retrofit retrofit = new Retrofit.Builder() .baseUrl(baseUrl) .addConverterFactory(GsonConverterFactory.create()) .build(); networkService = retrofit.create(NetworkService.class); } } } }

2) AndroidManifest.xml 에 Application 클래스 Name 추가

... <uses-permission android:name="android.permission.INTERNET"/> <application android:name=".ApplicationController" android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" ...

애플리케이션에서 인터넷을 사용하므로 인터넷 퍼미션 추가해야 합니다.

<uses-permission android:name="android.permission.INTERNET"/>

8. Call 인터페이스 만들기

여기서 만든 Call은 동기 또는 비동기하는 HTTP 요청을 원격 웹서버로 보낼수 있습니다.

HTTP 요청은 어노테이션을 사용하여 명시합니다.

• URL 파라미터 치환과 쿼리 파라미터가 지원됨
• 객체를 요청 body로 변환 ( JSON 형태)
• 멀티파트 요청 body와 파일 업로드가 가능함

Retrofit 한글 번역 사이트 ( http://devflow.github.io/retrofit-kr/ )

NetworkService.java

import java.util.List; import okhttp3.RequestBody; import retrofit2.Call; import retrofit2.http.Body; import retrofit2.http.DELETE; import retrofit2.http.Field; import retrofit2.http.FormUrlEncoded; import retrofit2.http.GET; import retrofit2.http.PATCH; import retrofit2.http.POST; import retrofit2.http.PUT; import retrofit2.http.Part; import retrofit2.http.Path; /** * Created by KJH on 2017-06-06. */ public interface NetworkService { @POST("/api/versions/") Call<Version> post_version(@Body Version version); @PATCH("/api/versions/{pk}/") Call<Version> patch_version(@Path("pk") int pk, @Body Version version); @DELETE("/api/versions/{pk}/") Call<Version> delete_version(@Path("pk") int pk); @GET("/api/versions/") Call<List<Version>> get_version(); @GET("/api/versions/{pk}/") Call<Version> get_pk_version(@Path("pk") int pk); @POST("/api/restaurants/") Call<Restaurant> post_restaruant(@Body Restaurant restaruant); @PATCH("/api/restaurants/{pk}/") Call<Restaurant> patch_restaruant(@Path("pk") int pk, @Body Restaurant restaruant); @DELETE("/api/restaurants/{pk}/") Call<Restaurant> delete_restaruant(@Path("pk") int pk); @GET("/api/restaurants/") Call<List<Restaurant>> get_restaruant(); @GET("/api/restaurants/{pk}/") Call<Restaurant> get_pk_restaruant(@Path("pk") int pk); @GET("/api/weathers/{pk}/restaurant_list/") Call<List<Restaurant>> get_weather_pk_restaruant(@Path("pk") int pk); }  

9. REST GET, POST, PUT(PATCH) , DELETE 결과 확인

activity_main.xml

<?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:id="@+id/tv1" android:layout_width="match_parent" android:layout_height="wrap_content" /> <Button android:id="@+id/bt1" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="VERSION GET"/> <TextView android:id="@+id/tv2" android:layout_width="match_parent" android:layout_height="wrap_content" /> <Button android:id="@+id/bt2" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="VERSION POST"/> <TextView android:id="@+id/tv3" android:layout_width="match_parent" android:layout_height="wrap_content" /> <Button android:id="@+id/bt3" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="VERSION PATCH"/> <TextView android:id="@+id/tv4" android:layout_width="match_parent" android:layout_height="wrap_content" /> <Button android:id="@+id/bt4" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="VERSION DELETE"/> <TextView android:id="@+id/tv5" android:layout_width="match_parent" android:layout_height="wrap_content" /> <Button android:id="@+id/bt5" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="RESTAURANT GET"/> <TextView android:id="@+id/tv6" android:layout_width="match_parent" android:layout_height="wrap_content" /> <Button android:id="@+id/bt6" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="RESTAURANT POST"/> <TextView android:id="@+id/tv7" android:layout_width="match_parent" android:layout_height="wrap_content" /> <Button android:id="@+id/bt7" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="RESTAURANT PATCH"/> <TextView android:id="@+id/tv8" android:layout_width="match_parent" android:layout_height="wrap_content" /> <Button android:id="@+id/bt8" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="RESTAURANT DELETE"/> <TextView android:id="@+id/tv9" android:layout_width="match_parent" android:layout_height="wrap_content" /> <Button android:id="@+id/bt9" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="RESTAURANT PARTIAL GET"/> </LinearLayout> </ScrollView>

MainActivity.java

import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.util.Log; import android.view.View; import android.widget.Button; import android.widget.TextView; import java.io.IOException; import java.util.List; import butterknife.BindView; import butterknife.ButterKnife; import butterknife.OnClick; import retrofit2.Call; import retrofit2.Callback; import retrofit2.Response; public class MainActivity extends AppCompatActivity { //public final String TAG = "KJH"; private NetworkService networkService; @BindView(R.id.tv1) TextView tv1; @BindView(R.id.tv2) TextView tv2; @BindView(R.id.tv3) TextView tv3; @BindView(R.id.tv4) TextView tv4; @BindView(R.id.tv5) TextView tv5; @BindView(R.id.tv6) TextView tv6; @BindView(R.id.tv7) TextView tv7; @BindView(R.id.tv8) TextView tv8; @BindView(R.id.tv9) TextView tv9; @OnClick(R.id.bt1) public void bt1_Click() { //GET Call<List<Version>> versionCall = networkService.get_version(); versionCall.enqueue(new Callback<List<Version>>() { @Override public void onResponse(Call<List<Version>> call, Response<List<Version>> response) { if(response.isSuccessful()) { List<Version> versionList = response.body(); String version_txt = ""; for(Version version : versionList){ version_txt += version.getVersion() + "\n"; } tv1.setText(version_txt); } else { int StatusCode = response.code(); Log.i(ApplicationController.TAG, "Status Code : " + StatusCode); } } @Override public void onFailure(Call<List<Version>> call, Throwable t) { Log.i(ApplicationController.TAG, "Fail Message : " + t.getMessage()); } }); } @OnClick(R.id.bt2) public void bt2_Click(){ //POST Version version = new Version(); version.setVersion("1.0.0.1"); Call<Version> postCall = networkService.post_version(version); postCall.enqueue(new Callback<Version>() { @Override public void onResponse(Call<Version> call, Response<Version> response) { if( response.isSuccessful()) { tv2.setText("등록"); } else { int StatusCode = response.code(); Log.i(ApplicationController.TAG, "Status Code : " + StatusCode); } } @Override public void onFailure(Call<Version> call, Throwable t) { Log.i(ApplicationController.TAG, "Fail Message : " + t.getMessage()); } }); } @OnClick(R.id.bt3) public void bt3_click(){ //PATCH Version version = new Version(); version.setVersion("1.0.0.0.1"); Call<Version> patchCall = networkService.patch_version(1, version); patchCall.enqueue(new Callback<Version>() { @Override public void onResponse(Call<Version> call, Response<Version> response) { if( response.isSuccessful()) { tv3.setText("업데이트"); } else { int StatusCode = response.code(); Log.i(ApplicationController.TAG, "Status Code : " + StatusCode); } } @Override public void onFailure(Call<Version> call, Throwable t) { Log.i(ApplicationController.TAG, "Fail Message : " + t.getMessage()); } }); } @OnClick(R.id.bt4) public void bt4_click(){ //DELETE Call<Version> deleteCall = networkService.delete_version(1); deleteCall.enqueue(new Callback<Version>() { @Override public void onResponse(Call<Version> call, Response<Version> response) { if( response.isSuccessful()) { tv4.setText("삭제"); } else { int StatusCode = response.code(); Log.i(ApplicationController.TAG, "Status Code : " + StatusCode); } } @Override public void onFailure(Call<Version> call, Throwable t) { Log.i(ApplicationController.TAG, "Fail Message : " + t.getMessage()); } }); } @OnClick(R.id.bt5) public void bt5_click(){ //Restaurant GET Call<List<Restaurant>> getCall = networkService.get_restaruant(); getCall.enqueue(new Callback<List<Restaurant>>() { @Override public void onResponse(Call<List<Restaurant>> call, Response<List<Restaurant>> response) { if( response.isSuccessful()) { List<Restaurant> restaurantList = response.body(); String restaurant_txt = ""; for(Restaurant restaurant : restaurantList){ restaurant_txt += restaurant.getName() + restaurant.getAddress() + restaurant.getCategory() + restaurant.getWeather() + restaurant.getDistance() + restaurant.getDescription() + "\n"; } tv5.setText(restaurant_txt); } else { int StatusCode = response.code(); Log.i(ApplicationController.TAG, "Status Code : " + StatusCode + " Error Message : " + response.errorBody()); } } @Override public void onFailure(Call<List<Restaurant>> call, Throwable t) { Log.i(ApplicationController.TAG, "Fail Message : " + t.getMessage()); } }); } @OnClick(R.id.bt6) public void bt6_click(){ //Restaurant POST Restaurant restaurant = new Restaurant(); restaurant.setName("음식점1"); restaurant.setAddress("장소1"); restaurant.setCategory(3); restaurant.setWeather(3); restaurant.setDistance(3); restaurant.setDescription("설명1"); Call<Restaurant> postCall = networkService.post_restaruant(restaurant); postCall.enqueue(new Callback<Restaurant>() { @Override public void onResponse(Call<Restaurant> call, Response<Restaurant> response) { if( response.isSuccessful()) { tv6.setText("등록"); } else { int StatusCode = response.code(); try { Log.i(ApplicationController.TAG, "Status Code : " + StatusCode + " Error Message : " + response.errorBody().string()); } catch (IOException e) { e.printStackTrace(); } } } @Override public void onFailure(Call<Restaurant> call, Throwable t) { Log.i(ApplicationController.TAG, "Fail Message : " + t.getMessage()); } }); } @OnClick(R.id.bt7) public void bt7_click(){ //Restaurant PATCH //Full or partial patch available Restaurant restaurant = new Restaurant(); restaurant.setName("이름22"); restaurant.setAddress("장소22"); restaurant.setCategory(3); restaurant.setWeather(1); restaurant.setDistance(2); restaurant.setDescription("장소22"); Call<Restaurant> patchCall = networkService.patch_restaruant(1, restaurant); patchCall.enqueue(new Callback<Restaurant>() { @Override public void onResponse(Call<Restaurant> call, Response<Restaurant> response) { if( response.isSuccessful()) { tv7.setText("업데이트"); } else { int StatusCode = response.code(); try { Log.i(ApplicationController.TAG, "Status Code : " + StatusCode + " Error Message : " + response.errorBody().string()); } catch (IOException e) { e.printStackTrace(); } } } @Override public void onFailure(Call<Restaurant> call, Throwable t) { Log.i(ApplicationController.TAG, "Fail Message : " + t.getMessage()); } }); } @OnClick(R.id.bt8) public void bt8_click(){ //Restaurant DELETE Call<Restaurant> deleteCall = networkService.delete_restaruant(2); deleteCall.enqueue(new Callback<Restaurant>() { @Override public void onResponse(Call<Restaurant> call, Response<Restaurant> response) { if ( response.isSuccessful()) { tv8.setText("삭제"); } else { int StatusCode = response.code(); try { Log.i(ApplicationController.TAG, "Status Code : " + StatusCode + " Error Message : " + response.errorBody().string()); } catch (IOException e) { e.printStackTrace(); } } } @Override public void onFailure(Call<Restaurant> call, Throwable t) { Log.i(ApplicationController.TAG, "Fail Message : " + t.getMessage()); } }); } @OnClick(R.id.bt9) public void bt9_click(){ Call<List<Restaurant>> get_weather_pk_Call = networkService.get_weather_pk_restaruant(1); get_weather_pk_Call.enqueue(new Callback<List<Restaurant>>() { @Override public void onResponse(Call<List<Restaurant>> call, Response<List<Restaurant>> response) { if( response.isSuccessful()) { List<Restaurant> restaurantList = response.body(); String restaurant_txt = ""; for(Restaurant restaurant : restaurantList){ restaurant_txt += restaurant.getName() + restaurant.getAddress() + restaurant.getCategory() + restaurant.getWeather() + restaurant.getDistance() + restaurant.getDescription() + "\n"; } tv9.setText(restaurant_txt); } else { int StatusCode = response.code(); Log.i(ApplicationController.TAG, "Status Code : " + StatusCode + " Error Message : " + response.errorBody()); } } @Override public void onFailure(Call<List<Restaurant>> call, Throwable t) { Log.i(ApplicationController.TAG, "Fail Message : " + t.getMessage()); } }); } @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ButterKnife.bind(this); ApplicationController application = ApplicationController.getInstance(); application.buildNetworkService("61fa624f.ngrok.io"); //application.buildNetworkService("자신의 ip", 8000); networkService = ApplicationController.getInstance().getNetworkService(); } }

VERSION GET 과  RESTAURANT GET을 클릭했을 때 결과물

브라우저에서 결과물