오늘은 안드로이드로 GraphQL 서버와 통신하는 어플리케이션을 만들어 보겠다.
먼저 GraphQL 서버가 구축 되어 있어야 한다.
GraphQL 서버 만들기는 아래링크 참고하여 만들어보자.
https://san9yun2.tistory.com/2
[GraphQL Server만들기 (1)] graphql-yoga로 환경 구축하기
오늘은 GraphQL 구조를 가지는 서버 만들어보자. 아.. 하기싫어죽게따.. 먼저 GraphQL이란 RestAPI 처럼 API Server를 구현하는 구조이다. 이름에서 알 수 있듯이 SQL처럼 Query언어이다. 클라이언트가 데이��
san9yun2.tistory.com
GraphQL 서버를 만들었다면 안드로이드 프로젝트를 만들자.
SDK 24버전 이상 되어야 한다고 한다.
프로젝트를 만들었다면 AndroidManifest.xml 파일에 인터넷과 네트워크 permission을 추가해줘야 한다.
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
다음은 build.gradle(project)의 depencies에 아래와 같이 apollo-android를 추가해준다.
dependencies {
classpath 'com.android.tools.build:gradle:3.6.2'
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
//Apollo-graphql
classpath("com.apollographql.apollo:apollo-gradle-plugin:2.1.0")
}현재 최신 버전은 "2.1.0" 이다.
다음은 build.gradle(app)에 아래와 같이 apollo를 추가해준다.
apply plugin: 'com.apollographql.apollo'
dependencies{
implementation("com.apollographql.apollo:apollo-runtime:2.1.0")
// If not already on your classpath, you might need the jetbrains annotations
compileOnly("org.jetbrains:annotations:13.0")
testCompileOnly("org.jetbrains:annotations:13.0")
}
좌측 상단에 sync now 클릭!
요 에러 뜨는이유는 적힌 그대로 gradle 버전이 6.0이상 이여야한다.
gradle 버전 올리는 방법은 file>project Structures > project에 Gradle Version 을 6.0 이상으로 선택해주면 된다.
다음은 graphql 관련된 파일들이 저장될 'graphql' 폴더를 만든다.
[ProjectName] > app > src > main > graphql > [java폴더 바로 아래에 있는 폴더와 동일한 이름의 폴더]
이제 서버로부터 graphql schema를 가져와야 한다.
가져올려면 apollo-codegen이 설치되어 있어야하는데 apollo-codegen은 npm이 있어야한다.
npm 설치는 https://nodejs.org/
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
여기서 안정화된 버전 설치하면 된다.
그리고 터미널에서 아래 명령어를 입력해주면 apollo 설치완료!
$ npm install -g apollo
이제 서버로부터 schema.json을 가져오는 명령어를 치면 된다.
$ apollo schema:download --endpoint=http://[여기에 구현한 서버 주소 입력] schema.json
다운 받은 schema.json 파일은 아까 만들어준 폴더에 넣어주면 된다.
이제 거의 다 끝났다.
schema.json이 들어있는 폴더에 getBook.graphql 파일을 생성하고, 아래와 같이 query를 작성해준다.
(서버에 books라는 query가 구현 되어 있어야 한다.
query Books{
books{
book_name
book_author
}
}
query Book($id:Int!){
book(id:$id){
book_num
book_name
}
}
이제 Apollo가 알아서 안드로이드에서 쓸 수 있는 graphql Query 클래스를 만들어준다.
Build > rebuild project 를 눌러주자.
//MainActivity
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
Logger.addLogAdapter(AndroidLogAdapter())
val apolloClient = ApolloClient.builder().serverUrl("http://192.168.0.106:8888/").build()
btn_books.setOnClickListener {
apolloClient.query(
BooksQuery.builder().build()
).enqueue(object : ApolloCall.Callback<BooksQuery.Data>() {
override fun onFailure(e: ApolloException) {
Logger.d(e.localizedMessage ?: "Error")
}
override fun onResponse(response: Response<BooksQuery.Data>) {
Logger.d(response.data().toString())
}
})
}
}logger를 찍기 위한 gradle 추가 (build.gradle:app)
implementation 'com.orhanobut:logger:2.2.0'(아래 부분은 솔직히 왜하는지 모르겠으나 어떤 외국인 유투버가 해서 따라 해본 network_security_config이다.)
res 폴더에 오른쪽 클릭 > new > Android resource > 아래와 같이 작성
만든 파일에 아래와 같이 작성
<?xml version="1.0" encoding="utf-8"?>
<network-security-config xmlns:android="http://schemas.android.com/apk/res/android">
<base-config cleartextTrafficPermitted="false"/>
<domain-config cleartextTrafficPermitted="true">
<domain includeSubdomains="ture">192.168.0.106</domain>
</domain-config>
</network-security-config>AndroidManifest.xml 파일의 application 영역에 아래와 같이 추가
<application
android:networkSecurityConfig="@xml/network_security_config">
이제 실행시켜서 아래처럼 결과값이 나오면 성공!
여러분들은 내가 겪은 시행착오를 좀 덜겪었으면 하는 마음에 최대한 꼼꼼하게 작성했는데 만약 안되는게 있으면 바로 댓글 남겨주세용.
바로 해결은 못하더라도 같이 찾아볼수도 있으니께 희희