오늘은 원하는 지역의 방탈출 카페 목록을 지도에 보여주는 App을 만든다!

온라인 예약이 가능한 카페의 경우 '예약하기' 버튼을 통해 예약페이지로 이동할 수 있다.

또한, 카페의 정보를 친구들에게 공유해줄 수 도 있다!

🚩 사용 기술 및 도구

언어 : Kotlin (100%) 환경 : Android Studio

사용 기술

• Naver Map API
• ViewPager2
• FrameLayout
• CoordinatorLayout
• BottomSheetBehavior
• Retrofit
• Glide

🚩 기능 살펴보기

🔸 지역명에 따라 방탈출카페 data를 dataClass에 담기

API를 통해 데이터 통신을 하기 위해 Retrofit을 사용하였다. Retrofit 사용법은 지난 포스팅에 정리해놓았다.

◾ 인터페이스 추가 - RoomsSerivece

interface RoomsService {
    @GET(api 나머지 주소를 적어주세용)
    fun getRoomsList(
        @Query("query") query: String,
        @Query("displayCount") displayCount:Int = 20
    ): Call<RoomsResponse>
}

◾ 데이터 클래스 추가 - RoomsModel

data class RoomsModel(
    @SerializedName("id")
    val id: Int,
    @SerializedName("name")
    val title: String,
    @SerializedName("menuInfo")
    val price: String,
    @SerializedName("thumUrl")
    val imgUrl: String,
    @SerializedName("x")
    val lng: Double,
    @SerializedName("y")
    val lat: Double,
    @SerializedName("tel")
    val tel: String,
    @SerializedName("abbrAddress")
    val address: String,
    @SerializedName("bizhourInfo")
    val hourInfo: String,
    @SerializedName("hasNaverBooking")
    val hasBooking: Boolean,
    @SerializedName("naverBookingUrl")
    val bookingUrl: String
) : Serializable
// Serializable을 import 하여 직렬화를 해주어야 한다.

◾ items라는 리스트로 묶었으니 DTO 추가 - data class 내가 받아오는 데이터는 3중으로 구성되어있다.

data class RoomsResponse(
    @SerializedName("result")
    var roomsResult: RoomsResult
)
data class RoomsResult(
    @SerializedName("place")
    var place : RoomsList
)
data class RoomsList(
    @SerializedName("list")
    // 이렇게 마지막 list에 담긴 아이템들은 RoomsModel 타입의 리스트로 저장한다. 
    val items: List<RoomsModel> = arrayListOf<RoomsModel>()
)

◾ 레트로핏 객체 생성 후 데이터 가져오기

// retrofit 구현
val retrofit = Retrofit.Builder().baseUrl(api 기본주소를 적어주세요)
            .addConverterFactory(GsonConverterFactory.create())
            .build()

        // retrofit 생성
        retrofit.create(RoomsService::class.java).also {

            // 또한, 바로 생성한 인터페이스의 getRoomsList()를 실행한다
            it.getRoomsList(query = (searchWord.replace(" ","")  + " 방탈출카페"))
                .enqueue(object : Callback<RoomsResponse> {
                    override fun onResponse(
                        call: Call<RoomsResponse>,
                        response: Response<RoomsResponse>
                    ) {
                        if (response.isSuccessful.not()) {
                            // 실패 할 경우
                            binding!!.progressbar.visibility = View.INVISIBLE
                            Toast.makeText(
                                this@MainActivity,
                                "에러! 잠시 후 다시 시도해주세요.",
                                Toast.LENGTH_SHORT
                            ).show()
                            return
                        }
                        // 통신 성공 시
                        response.body()?.let { dto ->
                            binding!!.progressbar.visibility = View.INVISIBLE
                            if (dto.roomsResult.place == null) {
                                binding!!.textField.error = "검색 결과가 없습니다. 또는 지역명을 확인해주세요."
                                return
                            }
                            // 데이터를 가지고 결과를 보여줄 Activity로 이동
                            val datalist = dto.roomsResult.place.items
                            val intent = Intent(this@MainActivity, ResultActivity::class.java)
                            val list: ArrayList<RoomsModel> = ArrayList<RoomsModel>(datalist)
                            intent.putExtra("datalist", list)
                            startActivity(intent)

                        }
                    }

                    override fun onFailure(call: Call<RoomsResponse>, t: Throwable) {
            // 통신 실패 시
                    }
        })
}

🔸 NaverMap API 연결하기

◾ api 신청 및 clientId 추가하기 api 사용신청은 네이버 API 사이트에서 신청하면 된다. 신청 완료 후 부여받은 clientId는 따로 values로 저장 후 meta-data에 추가해주어야한다.

// api_key.xml
<resources>
    <string name="naver_map_Client_Id">부여받은 ClientID</string>
</resources>

// Manifest.xml
<meta-data
            android:name="com.naver.maps.map.CLIENT_ID"
            android:value="@string/naver_map_Client_Id" />

◾ 프로젝트에 Naver Map 추가하기

// build.gradle
allprojects {
    repositories {
        google()
        jcenter()
        maven("https://naver.jfrog.io/artifactory/maven/")
    }
}

dependencies {
    // 네이버 지도 SDK
    implementation("com.naver.maps:map-sdk:3.11.0")
}

◾ layout에 mapView 추가

<com.naver.maps.map.MapView
        android:id="@+id/mapView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

🔸 Data의 방탈출 카페들을 지도에 마킹하기

이제 MainActivity에서 넘겨받은 데이터 list를 가지고 지도에 마킹을 해준다.

// 네이버 지도 준비하기
override fun onMapReady(map: NaverMap) {
        naverMap = map

        // 확대/축소 정도 조절!
        naverMap.maxZoom = 18.0
        naverMap.minZoom = 10.0

        val uiSetting = naverMap.uiSettings

        // true로 하면 기본 버튼
        // 현재 위치 버튼
        uiSetting.isLocationButtonEnabled = false
        uiSetting.setLogoMargin(30, 0, 0, 230)
        // 내가 만든 버튼으로 변경
        currentLocationButton.map = naverMap

        locationSource = FusedLocationSource(this, LOCATION_PERMISSION_REQUEST_CODE)
        naverMap.locationSource = locationSource

        setListWithdata(datalist)
    }

    //  데이터를 가지고 list를 넘겨주어라!
    private fun setListWithdata(datalist: ArrayList<RoomsModel>) {
        updateMarker(datalist)
        viewPagerAdpater.submitList(datalist)
        recyclerViewAdapter.submitList(datalist)
        bottomSheetTextView.text = "${datalist.size}개의 결과보기"
    }

    // 받은 list 하나씩 지도에 마크 찍기
    private fun updateMarker(rooms: List<RoomsModel>) {
        rooms.forEach { room ->
            val marker = Marker()
            marker.position = LatLng(room.lat, room.lng)
            marker.onClickListener = this
            marker.map = naverMap
            marker.tag = room.id
            marker.icon = MarkerIcons.RED
        }
    }

🔸 CardView와 지도 마커 연결하기

// viewPager(CardView로 생성했음)를 넘길 때 마다
// 해당하는 item의 마커로 지도 이동
viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
            override fun onPageSelected(position: Int) {
                super.onPageSelected(position)

                val selectedRoomModel = viewPagerAdpater.currentList[position]
                val cameraUpdate =
                    CameraUpdate.scrollTo(LatLng(selectedRoomModel.lat, selectedRoomModel.lng))
                        .animate(CameraAnimation.Easing)

                naverMap.moveCamera(cameraUpdate)
            }
        })

// 지도 위 마커 클릭 시 해당하는 item의 viewPager로 이동 
override fun onClick(overlay: Overlay): Boolean {
        val selectedModel = viewPagerAdpater.currentList.firstOrNull() {
            it.id == overlay.tag
        }
        selectedModel?.let {
            val position = viewPagerAdpater.currentList.indexOf(it)
            viewPager.currentItem = position
        }
        return true
    }

🔸 장소 정보 보여주기 (+ 공유하기, 예약하기 )

viewPager의 아이템을 클릭 하거나, 하단 뷰의 아이템 클릭 시 장소 정보 Activity로 이동한다.

// 해당 장소의 데이터를 가지고 Activity 이동
private fun goDetailActivity(roomsModel: RoomsModel) {
        val intent = Intent(this, DetailActivity::class.java)
        intent.putExtra("data", roomsModel)
        startActivity(intent)
}

// 공유하기 기능을 통해 장소 정보를 외부 앱으로 전달할 수 있음
private fun shareInfo(data: RoomsModel) {
        val intent = Intent().apply {
            action = Intent.ACTION_SEND
            putExtra(
                Intent.EXTRA_TEXT,
                "[방탈출 고고씽!\uD83C\uDFC3] 지금 \"${data.title}\"를 확인해보세요.\n\uD83D\uDC49 https://m.place.naver.com/place/${data.id}  "
            )
            type = "text/plain"
        }
        startActivity(Intent.createChooser(intent, null))
}

// 네이버 예약하기가 가능한 장소의 경우 예약페이지로 이동할 수 있음
private fun goBookingSite(dataUri: String) {
        val intent = Intent(Intent.ACTION_VIEW)
        intent.data = Uri.parse(dataUri)
        startActivity(intent)
}

🚩 완성!

관련 문서 : NAVER MAP 안드로이드 개발가이드

참고했던 블로그 : mechacat님 tistory

대학교에 들어가서 꾸준히 활동한 동아리가 있다! 컴퓨터공학과 학술 동아리였는데 임원부터 부회장까지 하면서 개인적으로 애정이 많이 갔다ㅎㅎ 특히 동기들!! 이랑 휴학기간까지 5년동안 진짜 많은 걸 했다.

우리끼리 나중에 우리끼리의 SNS 앱 & 웹을 만들자!! 하는 얘기가 나왔고, 나는 바로 실행 해버리는 "ENFP" 라서 후딱 만들어봤다. (여기까지 나의 TMI 대잔치,,,)

1. 사용 기술 및 도구

• 언어 : Kotlin (100%)
• 환경 : Android Studio
• Database : Firebase
• 그 외 : Glide, Facebook API, Goolge API, View Binding, okhttp, multidex

2. 작품 설명

• 사진을 첨부한 게시글 작성
• 댓글 달기 , 좋아요 누르기
• 회원가입/로그인/로그아웃 ( 이메일 & Facebook & Google)
• 프로필 편집
• 팔로우 / 언팔로우
• 알림 기능 (팔로우, 댓글, 좋아요)
• 사진 다운로드 

3. 기능 살펴보기

◾ 로그인 및 회원가입

위 기능들은 예전 다른 프로젝트에서도 여러번 사용해보았기 때문에 어렵지 않게 진행하였다. 방법은 따로 포스팅을 해두었다. 👉 Facebook 로그인 & Google 및 이메일 로그인

◾ 게시글 (+사진) 올리기

// 갤러리로 이동하기
private fun goGallery() {
        val galleryIntent = Intent(Intent.ACTION_PICK) 
        galleryIntent.type = "image/*" //선택한 파일의 종류를 지정해준다 (이미지만 지정하겠다는 뜻)
        intent.putExtra("crop", true)
        startActivityForResult(galleryIntent, PICK_IMAGE_FROM_ALBUM)
}

// 이미지 크롭하기
private fun cropImage(uri: Uri?) {
        CropImage.activity(uri).setGuidelines(CropImageView.Guidelines.ON)
            .setCropShape(CropImageView.CropShape.RECTANGLE)
            .start(this)
}

// 사진을 Storage에 업로드
private fun contentUpload() {
        //현재 시간을 String으로 만들기
        //20210306_141238
        val timestamp = SimpleDateFormat("yyyyMMdd_HHmmss", Locale.getDefault()).format(Date())
        //만약 나라를 지정하지않고 단말기의 설정된 시간으로 하고 싶다면 Locale.getDefault(), 한국으로 하고 싶으면 Locale.KOREA
        val fileName = "IMAGE_$timestamp.png"

        //서버 스토리지에 접근하기!
        val storageRef = storage?.reference?.child("images")?.child(fileName)

        // 서버 스토리지에 파일 업로드하기!
        storageRef?.putFile(photoUri!!)?.continueWithTask() {
            return@continueWithTask storageRef.downloadUrl
            //나중에 이미지를 다른 곳에서 불러오고 할떄 url을 가져올수있게해놓음
        }?.addOnSuccessListener {
            upload(it, fileName)
            Toast.makeText(this, getString(R.string.upload_success), Toast.LENGTH_SHORT).show()
        }?.addOnCanceledListener {
            //업로드 취소 시
        }?.addOnFailureListener {
            //업로드 실패 시
    }
}

// Storage 업로드 된 사진의 uri를 가지고
// Firestore에 게시물 업로드
private fun upload(uri: Uri, fileName: String) {
    //contentDto 객체를 생성한다.
    val contentDto = ContentDto(
              imageUrl = uri.toString(),
              uid = auth?.currentUser?.uid,
              userId = auth?.currentUser?.email,
              explain = contentEditText.text.toString(),
              timestamp = System.currentTimeMillis().toLong(),
              imageStorage = fileName
        )

        //Dto를 Firestore에 추가
        firestore?.collection("images")?.document()?.set(contentDto)

        //액티비티 종료
        setResult(Activity.RESULT_OK)
        finish()
}

◾ 팔로우 / 언팔로우

팔로워의 경우 Firebase DB를 사용하여 관리 하였다.'Follow' Document에 사용자의 uid로 컬렉션을 두었다. 아래 필드로는 followers와 followings를 두고, 해당되는 사용자의 uid를 저장하였다. 이는 Follow Dto 데이터 클래스를 생성하여 리스트를 주고 받았다.

data class FollowDto(
    // 이 사람을 팔로잉하는 사람들
    var followers : MutableMap<String, Boolean> = HashMap(),

    // 이 사람이 팔로잉 중인 사람들
    var followings : MutableMap<String, Boolean> = HashMap()
)

실제 팔로우 / 언팔로우의 경우 다음과 같이 구현하였다. 목록에 유저의 uid가 있는지 확인 후 상황에 따라 팔로우/언팔로우를 한다.

val firestore = FirebaseFirestore.getInstance()
val currentUid = FirebaseAuth.getInstance().currentUser!!.uid
val txDocTargetUser = firestore?.collection("follow")?.document(this.targetUserId!!)
    //Firestore에 데이터 저장 : runTransaction{...}
        firestore.runTransaction {
            // it : Transaction
            // it.get(Document) : 해당 Document 받아오기
            // it.set(Document, Dto 객체) : 해당 Document에 Dto 객체 저장하기
            var followDto = it.get(txDocTargetUser).toObject(FollowDto::class.java)

            if (followDto == null) {
                followDto = FollowDto().apply {
                    followers[currentUid!!] = true
                    notifyFollow()
                }
            } else {
                with(followDto) {
                    if (followers.containsKey(currentUid!!)) {
                        // 언팔로우
                        followers.remove(currentUid!!)
                    } else {
                        // 팔로우
                        followers[currentUid!!] = true
                        notifyFollow()
                    }
                }
            }
    it.set(txDocTargetUser, followDto)
    return@runTransaction
}

◾ 좋아요 기능

좋아요 기능의 경우에도 사실 위의 팔로우 / 언팔로우 기능과 많이 유사하다. 좋아요 한 사용자의 uid를 저장한다. 유저가 목록에 없다면 '좋아요', 있다면 '좋아요 취소'를 한다.

◾ 댓글 달기

// Dto
data class ContentDto(
    // 게시글
    var uid: String? = "",
    ...
) {
    // 댓글
    // ContentDto.Comment 로 접근한다.
    data class Comment(
        //얘도 primary키 필요함!
        var uid: String? = "",
        var userId: String? = "",  // 업로드한 유저의 이메일
        var content: String? = "", //댓글 내용
        var timeStamp: Long? = null //댓글 작성 시간
    )
}

// 댓글 업로드 함수
private fun commentUpload() {
        val commentDto = ContentDto.Comment(
            uid = auth?.currentUser?.uid,
            userId = auth?.currentUser?.email,
            content = etCommentContent.text.toString(),
            timeStamp = System.currentTimeMillis()
        )
        // 알림 함수 실행
        notifyComment(commentDto.uid, commentDto.userId, commentDto.timeStamp)

        //Dto를 firebase에 추가!
        val doc = firestore?.collection("images")?.document(content_uid!!)

        firestore?.runTransaction {
            val contentDto = it.get(doc!!).toObject(ContentDto::class.java)
            doc.collection("comments").document().set(commentDto)
            if (contentDto != null) {
                contentDto.commentCount += 1
                it.set(doc, contentDto)
            }
        }
        etCommentContent.setText("")
        hideKeyboard()

}

◾ 사진 다운로드 받기

downloadManager를 통해 사진을 기기에 다운로드 받는다. 다운로드 알림이 뜨다가 말아서 사알짝 멘붕이였다. 알고보니 setNotificationVisibility를 설정해주지 않아서 계속 진행되다가 알림창에서 사라지는 것이였다.

또, Directory 경로 설정을 Environment.DIRECTORY_DOWNLOADS 으로 하니 갤러리에서는 확인되지 않는 황당한 경우가 생겼다. 혹시 PICTURES인가..? 하고 해보니 간단하게 해결 되었다.

private fun downloadImage(url: String) {
            val downloadManager: DownloadManager =
                context?.getSystemService(Context.DOWNLOAD_SERVICE) as DownloadManager

            val request = DownloadManager.Request(Uri.parse(url))
            request.setNotificationVisibility(DownloadManager.Request.VISIBILITY_VISIBLE_NOTIFY_COMPLETED);
            request.setDestinationInExternalPublicDir(
                Environment.DIRECTORY_PICTURES,
                "Aunae" + ".jpg"
            )
            downloadManager.enqueue(request)
}

◾ 알림 기능

알림은 총 3가지 유형이 있다.

// Content.kt
const val NOTIFICATION_FAVORITE = 0
const val NOTIFICATION_FOLLOW = 1
const val NOTIFICATION_COMMENT = 2

알림의 정보를 담을 Dto를 생성해준다.

data class NotificationDto(
      var destinationUid:String? = "",
      var sender : String? = "",
      var senderUid : String? = "",
      var type : Int? = null,
      var timestamp: Long? = null,
      var timeInfo : String? = "",
      var contentUid : String? = ""
)

이제 정보를 담아 Firebase에 업로드 해준다. 예시로, 댓글 알림을 업로드 하는 함수이다.

 private fun notifyComment(uid: String?, email: String?, timeStamp: Long?) {
        if (uid == destination_uid)
            return
        val date = Date(timeStamp!!)

        // 날짜, 시간을 가져오고 싶은 형태 선언
        val dateFormat = SimpleDateFormat("yyyy/MM/dd HH:mm:ss", Locale("ko", "KR"))

        // 현재 시간을 dateFormat 에 선언한 형태의 String 으로 변환
        val timeData = dateFormat.format(date)

        val notificationDto = NotificationDto().apply {
            destinationUid = destination_uid
            sender = email
            senderUid = uid
            type = NOTIFICATION_COMMENT
            timestamp = timeStamp
            timeInfo = timeData.toString()
            this.contentUid = content_uid
        }
        FirebaseFirestore.getInstance().collection("notifications").document().set(notificationDto)
}

AlarmFragment에서 사용자는 자신에게 온 알림을 확인 할 수 있다.

FirebaseFirestore.getInstance().collection("notifications")
                .whereEqualTo("destinationUid", currentId)
                .addSnapshotListener { value, error ->
                    notifyDtoList.clear()
                    notifyId.clear()
                    if (value == null) return@addSnapshotListener
                    value.forEach {
                        notifyDtoList.add(it.toObject(NotificationDto::class.java))
                        notifyId.add(it.id)
                    }
notifyDataSetChanged()

최대한 기능을 구현한 코드들을 담아보려했는데 너무 길어져서 RecyclerView나 BottomNavigation 등과 같이 다른 포스팅에서도 다룬 적 있는 기능들은 제외해보았다!

만들고 나서 동기들이 사용을 해줄 때 마다 뿌듯함을 느낀다. 웹 버전도 동기들이 빨리 만들어줘서 연동을 해보길 기대해본다!

Git 보러가기

오늘을 사용자의 위치를 불러와 해당 지역의 실시간 대기 정보를 알려주는 App을 만든다! 크게는 미세먼지와 초미세먼지의 정보를 알려준다. 추가적으로 아황산가스 / 일산화탄소 등 기타 정보들도 알려준다.

🚩 사용 기술 및 도구

언어 : Kotlin (100%) 환경 : Android Studio

• Fused Location Provider API
• 공공데이터 API
• 카카오 로컬 API
• View Binding
• okhttp
• coroutine
• retrofit

🚩 작품 설명

API를 3가지 이용한다. (1) Fused Location Provider API (2) Kakao - 좌표 변환 API (3) 공공데이터 포털 - 에어코리아 (대기오염정보 , 측정소정보) API

사용자의 위치 정보 불러온 다음 위 API들을 이용하여 '근접 측정소 정보 불러오기 / 실시간 대기 정보 불러오기' 를 해준다.

🚩 기능 살펴보기

◾ 사용자의 위치 정보 가져오기

사용자의 기기에서 위치 값을 가져오기 위해 'Fused Location Provider API' 를 사용한다. 우선, 두가지 권한이 필요하다!

// Manifest.xml
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

// 위치값 가져오기
private var cancellationTokenSource: CancellationTokenSource? = null
private lateinit var fusedLocationProviderClient: FusedLocationProviderClient
fusedLocationProviderClient = LocationServices.getFusedLocationProviderClient(this)

cancellationTokenSource = CancellationTokenSource()
fusedLocationProviderClient.getCurrentLocation(
            LocationRequest.PRIORITY_HIGH_ACCURACY,
            cancellationTokenSource!!.token
        ).addOnSuccessListener { location ->
            Log.d("위치 정보","${location.latitude}, ${location.longitude}")
    }

◾ KAKAO API 통해 위치값(GPS)을 TM값으로 변환하기

 // 코루틴 스콥프
private val scope = MainScope()

scope.launch {
    // 코루틴 시작
    val monitoringStation = Repository.getNearbyCenter(location.latitude, location.longitude)
}

◾ 공공데이터 - 에어코리아로 대기 정보 가져오기

(+ 아래는 측정소 정보 가져오기 코드입니다. 대기 정보 가져오기는 비슷한 코드로 진행되어 생략합니다! 자세한건 Git에서)

api 통신을 통해 받아온 json을 data class로 만들어야한다. 이를 편리하게 해주는 플로그인이 있는데 'JSON to Kolin Class'이다. json 응답 형식을 붙여넣으면 그걸 토대로 모델을 만들어준다. api 를 빠르게 테스트 해볼때 주로 사용한다고 한다.

예시로 받은 json 데이터를 아래와 같이 붙여넣으면 자동으로 data class를 생성해준다.

• 생긴 모습 :

이제 생성된 데이터 클래스를 사용하여 통신을 해보자!

object Repository {

    suspend fun getNearbyCenter(latitude: Double, longitude: Double): Station? {
        val tmCoordinates = kakaoLocalAPI.getTmCoordinates(longitude, latitude)
            .body()?.documents
            ?.firstOrNull() // 첫번째 값 없으면 null
        val tmX = tmCoordinates?.x
        val tmY = tmCoordinates?.y
        Log.d("ttt", "" + tmX + " " + tmY)
        return airKoreaAPIService
            .getNearbyCenter(tmX!!, tmY!!)
            .body()
            ?.response
            ?.body
            ?.stations
            ?.minByOrNull { // 가장 작은 값 또는 null \
                it.tm ?: Double.MAX_VALUE
            }
    }


    private val airKoreaAPIService: AirKoreaAPI by lazy {
        Retrofit.Builder()
            .baseUrl(Url.AIR_KOREA_API_URL)
            .addConverterFactory(GsonConverterFactory.create())
            .client(buildHttpClient())
            .build()
            .create()
    }

    private fun buildHttpClient(): OkHttpClient =
        OkHttpClient.Builder().addInterceptor(HttpLoggingInterceptor().apply {
            level = if (BuildConfig.DEBUG) {
                // BODY =  다보여줌
                // DEBUG 일때만 다 보여주자!
                HttpLoggingInterceptor.Level.BODY
            } else {
                // NONE = 안보여줌
                HttpLoggingInterceptor.Level.NONE
            }
        }).build()
}

◾ 화면에 보여주기

이제 대기 정보를 data Class 형식으로 받아왔으니 이를 가져와 layout에 뿌려주면 된다. 추가적으로 화면을 Swipe 하면 새로고침이 되도록 하기 위해 전체 layout을 SwipeRefreshLayout로 감싸주었다.

// 데이터를 토대로 화면 구성하기
fun displayAirQualityData(monitoringStation: Station, measuredValue: MeasuredValue) {
        // 뷰 서서히 보여지게
        binding.mainlayout.animate()
            .alpha(1F)
            .start()

        binding.measuringStationName.text = monitoringStation.stationName
        binding.measuringStationAddressTextView.text = "측정소 : ${monitoringStation.addr}"

        (measuredValue.khaiGrade ?: Grade.UNKNOWN).let { grade ->
            binding.root.setBackgroundResource(grade.colorResId)
            binding.totalGradeLabelTextView.text = grade.label
            binding.totalGradleImojiTextView.text = grade.emoji
        }
        with(measuredValue) {
            binding.fineDustInfoTextView.text =
                "미세먼지: $pm10Value ㎍/㎥ ${(pm10Grade ?: Grade.UNKNOWN).emoji}"
            binding.ultraFineDustInfoTextView.text =
                "초미세먼지: $pm25Value ㎍/㎥ ${(pm25Grade ?: Grade.UNKNOWN).emoji}"

            .
            .
            .
            (생략)
        }
}

// 화면 swipe시 새로고침
// SwipeRefreshLayout에 리스너를 달아준다.
binding.refresh.setOnRefreshListener { 
    // 화면 그리기
    fetchAirQuality()
}

결과

관련 문서 : Fused Location Provider API & kakao developers - 좌표계 변환 api & Meterial - Color Tool

오늘은 회원들의 정보를 카드뷰를 통해 확인하여, 맘에 드는 사람들끼리 매칭을 해주는 app을 만들어본다. (간단한 기능의 App입니다!)

🚩 사용 기술 및 도구

언어 : Kotlin (100%) 환경 : Android Studio Database : Firebase Realtime Database 그 외 : Facebook API, View Binding, Glide, CardView, yuyakaido - CardStackView, ArthurHub-ImageCropper

🚩 작품 기능 설명

• 이메일 로그인 / 페이스북 로그인
• Opensource Library인 CardStackView 사용으로 보기좋은 애니메이션 구현
• 회원 정보를 카드뷰를 통해 확인 후, disLike 또는 Like 처리
• 서로가 Like 한 경우, 매치 리스트 에서 확인 할 수 있다.

🚩 기능 살펴보기

◾ 이메일 / 페이스북 로그인

이 기능들은 예전 포스팅에서 따로 정리를 해두어서 동일한 방법으로 구현하였다. 👉 Facebook 로그인 & 이메일 로그인 추가된 점이 있다면, 조금 더 간결해진 코드가 되었다는 것!?

아래 와 같이 새로 가입하는 회원인 경우 메인화면(회원 리스트)을 보여주기 전에, 이름과 프로필 사진을 입력 받는다.

새로 가입하는 회원인지의 유무는 Database에 해당 uid가 존재하는지로 확인했다.

userDB = Firebase.database.reference.child("Users")
        val currentUserDB = userDB.child(getCurrentUserID())
        currentUserDB.addListenerForSingleValueEvent(object : ValueEventListener {
            override fun onDataChange(snapshot: DataSnapshot) {
                if (snapshot.child("name").value == null) {
                    showNameInputPopUp()  // 사진과 이름 받기
                    return
                }
                // 유저정보 갱신하기!
                getUnSelectedUsers()
            }

            override fun onCancelled(error: DatabaseError) {
            }
        })

사진을 갤러리에서 불러오고 crop하는 과정은 저번 포스팅에서 정리했었다.

◾ CardStackView 통해 회원 정보 확인 및 Like/DisLike 처리하기

회원가입이 완료된 회원이라면 다음과 같이 선택한적 없는 회원의 정보를 가져온다.

// getUnSelectedUsers()
userDB.addChildEventListener(object : ChildEventListener {
            override fun onChildAdded(snapshot: DataSnapshot, previousChildName: String?) {
                if (snapshot.child("userID").value != getCurrentUserID()
                    && snapshot.child("likeBy").child("like").hasChild(getCurrentUserID()).not()
                    && snapshot.child("likeBy").child("dislike")
                        .hasChild(getCurrentUserID()).not()
                ) {
                    val userID = snapshot.child("userID").value.toString()
                    var name = snapshot.child("name").value.toString()

                    val imageUrl = snapshot.child("imageUrl").value.toString()
                    cardItems.add(CardItem(userID, name, imageUrl))
                    adapter.submitList(cardItems)
                    adapter.notifyDataSetChanged()
                }
            }

            override fun onChildChanged(snapshot: DataSnapshot, previousChildName: String?) {
                cardItems.find { it.userID == snapshot.key }?.let {
                    it.name = snapshot.child("name").value.toString()
                }
                adapter.submitList(cardItems)
                adapter.notifyDataSetChanged()
            }

            override fun onChildRemoved(snapshot: DataSnapshot) {}

            override fun onChildMoved(snapshot: DataSnapshot, previousChildName: String?) {}

            override fun onCancelled(error: DatabaseError) {}
})

카드 넘김 효과는 오픈소스 라이브러리 yuyakaido/CardStackView를 사용하여 구현하였다. Swipe 효과를 줄 수 있어 유용하다.

카드를 왼쪽으로 Swipe 하는 경우 DisLike, 오른쪽의 경우 Like 처리를 한다.

override fun onCardSwiped(direction: Direction?) {
        when (direction) {
            Direction.Right -> {
                like()
            }
            Direction.Left -> {
                dislike()
            }
            else -> {
            }
        }
}

// 좋아요를 한 경우
// like()
 private fun like() {
        val card = cardItems[manager.topPosition - 1]
        cardItems.removeFirst() // 옆으로 보내면 카드 없애기 ! 안하면 아래로 쌓임
        userDB.child(card.userID).child("likeBy").child("like").child(getCurrentUserID())
            .setValue(true)

        saveMatchIfOtherUserLikeME(card.userID) // 서로 좋아한다면 Match리스트에 저장
        Toast.makeText(this, "${card.name}님을 Like 합니다", Toast.LENGTH_SHORT).show()
}

◾ 매치 리스트 확인 하기

위 like() 함수가 실행될 때 아래 함수가 실행된다. 그 후, '매치 리스트 보기' 버튼을 눌러 저장된 List를 가져와 보여준다.

// 서로 좋아요 했니??
// saveMatchIfOtherUserLikeME()
val otherUserDB = userDB.child(getCurrentUserID()).child("likeBy").child("like").child(otherUserID)
        // true라면 상대방도 나를 좋아요 한 것!
        otherUserDB.addListenerForSingleValueEvent(object : ValueEventListener {
            override fun onDataChange(snapshot: DataSnapshot) {
                if (snapshot.value == true) {
                    userDB.child(getCurrentUserID())
                        .child("likeBy")
                        .child("match")
                        .child(otherUserID)
                        .setValue(true)

                    userDB.child(otherUserID).child("likeBy").child("match")
                        .child(getCurrentUserID()).setValue(true)

                }
            }

            override fun onCancelled(error: DatabaseError) {
            }
})

관련 문서 : rthurHub - Android Image Cropper && yuyakaido - CardStackView

Git 보러가기

오늘은 인터파크 도서의 정보를 통해 다음 기능을 가진 App을 만들어본다.

1. 베스트 셀러 목록을 확인
2. 도서 검색
3. 리뷰 남기기

사용해 본 기술

• Glide
• Retrofit2
• Room
• View Binding
• RecyclerView
• Open API

🚩 기능 살펴보기

• 인터파크 Open API를 통해 베스트 셀러 정보 가져오기
• 인터파크 Open API를 통해 검색 하여 검색 목록 가져오기
• Local DB를 이용하여 검색 기록 저장 및 삭제
• Local DB를 이용하여 개인 리뷰를 저장

🔸 인터파크 Open API 통해 도서 정보 가져오기

API 통신을 위해 저번 포스팅에서 사용했던 Retrofit을 다시한번 사용해본다.

1. Retrofit2 추가하기

   // dependencies에 다음 두줄 추가
   implementation 'com.squareup.retrofit2:retrofit:2.9.0'
   implementation 'com.squareup.retrofit2:converter-gson:2.9.0'
   

// 추가로 인터넷 사용 권한도 설정해준다 // Manifest.xml

2. 인터파크 api 키 발급받기
[인터파크 도서 - 마이북피니언](http://book.interpark.com/blog/viewBlogMain.rdo?bid1=w_bgnb&bid2=bwel&bid3=mybookpinion&bid4=001)으로 들어가 '관리'를 누르면![](https://images.velog.io/images/jinny_0422/post/7bc43755-7ee9-4ed9-aafc-b6efd525f930/image.png) 오픈업관리를 눌러 다음과 같이 인증키를 발급받을 수 있다.![](https://images.velog.io/images/jinny_0422/post/49b64737-bad6-48df-8542-c6405f0c26b2/image.png)

포스트맨을 사용하여 데이터가 받아와지는지 확인 해보니 잘 넘어온다!![](https://images.velog.io/images/jinny_0422/post/7cb8bc1e-e3b9-467e-9b72-628ccf732e40/image.png)

3. 데이터 받아오기
- BookService 인터페이스 만들기

```kotlin
interface BookService {
    @GET("/api/search.api?output=json")
    fun getBooksByName(
            @Query("key") apiKey: String,
            @Query("query") keyword: String
    ): Call<SearchBookDto>
    //return형은 Call 반환타입은 SearchBookDto

    @GET("/api/bestSeller.api?output=json&categotyId=100")
    fun getBestSellerBooks(
            @Query("key") apiKey: String
    ): Call<BestSellerDto>
}

• dataclass 만들기 우리가 사용할 데이터는 item의 배열로 들어온다.

  data class Book(
    // item 배열의 요소 속 id들
    @SerializedName("itemId") val id: Long, //itemId요소를 가져와 id라는 변수에 싱크 해준다
    @SerializedName("title") val title: String,
    @SerializedName("description") val description: String,
    @SerializedName("coverSmallUrl") val coverSmallUrl: String
  )
  

data class SearchBookDto( // 제일 처음 데이터 요청 시 title 값과 item 목록을 받아온다 @SerializedName("title") val title: String, @SerializedName("item") val bookList: List // Book 형태의 List로 받아온다. )

- retrofit 구현 및 연결
```kotlin
val retrofit = Retrofit.Builder().baseUrl("https://book.interpark.com")
                .addConverterFactory(GsonConverterFactory.create()) //Gson으로 변환
                .build()

bookService = retrofit.create(BookService::class.java)
bookService.getBestSellerBooks(getString(R.string.interpark_api_key))
            .enqueue(object : Callback<BestSellerDto> {
                override fun onResponse(
                    call: Call<BestSellerDto>,
                    response: Response<BestSellerDto>
                ) {
                    // 성공처리
                    if (response.isSuccessful.not()) {
                        return
                    }
                    response.body()?.let {
                        adapter.submitList(it.bookLists)
                    }
                }

                override fun onFailure(call: Call<BestSellerDto>, t: Throwable) {
                    // 실패처리
                    Log.d(TAG, t.toString())
                }
            })
    }

🔸 Local DB로 ROOM 사용하기

ROOM 또한 지난 포스팅에서 다룬 적이 있다.

1. Review를 담을 데이터 클래스 구현

   @Entity
   data class Review(
    @PrimaryKey val id: Int?,
    @ColumnInfo(name = "review") val review: String?
   )

2. Review Dao 구현

   @Dao
   interface ReviewDao {
    @Query("SELECT * FROM review WHERE id == :id")
    fun getOneReview(id: Int): Review
   
    @Insert(onConflict = OnConflictStrategy.REPLACE) //같은 책의 리뷰가 있으면 새로운 아이로 REPLACE
    fun saveReview(review: Review)
   }

3. RoomDatabase 만들기

   @Database(entities = [History::class,Review::class],version = 1)
   abstract class AppDatabase : RoomDatabase(){
    abstract fun historyDao(): HistoryDao
    abstract fun reviewDao() : ReviewDao
   }

4. Room 구현 및 사용하기

   private lateinit var db: AppDatabase
   db = Room.databaseBuilder(applicationContext, AppDatabase::class.java, "BookSearchDB")
            .build()
   

// 이미 리뷰가 있다면 불러오기 Thread { val review = db.reviewDao().getOneReview(model?.id?.toInt() ?: 0) runOnUiThread { binding.reviewEditText.setText(review?.review.orEmpty()) } }.start()

// 리뷰 저장하기 Button 클릭 시 // DB 에 리뷰를 저장 binding.saveButton.setOnClickListener { Thread { db.reviewDao().saveReview( Review(model?.id?.toInt() ?: 0, binding.reviewEditText.text.toString()) ) }.start() }

```

👩‍💻 결과

관련 문서 : Retrofit 공식문서 & 인터파트 북피니언 api 사용 문서

Git 보러가기

오늘은 간단한 App을 만들어 봤다! 명언과 인물을 확인 할 수 있는 간단한 페이지로 구성 되어있다. 페이지는 왼쪽 / 오른쪽으로 무한으로 이동할 수 있다.

🚩 사용기술

• Remote Config
• ViewPager2

🚩 기능 살펴보기

◾ Remote Config

Remote Config(원격 구성)는 Firebase 에서 제공되는 서비스이다. 실제로 코드 수정이나 별도의 배포 없이 앱의 내용을 변경할 수 있는 기능이다. 아래와 같은 기능을 제공하고 있다.

1.앱을 업데이트 할때 일정 비율의 사용자에게만 우선 배포하고, 이 기능이 실제로 동작 되어 지는지 확인한다 2.원하는 타이밍에 이미지 / 홍보 문자 등을 표시할 수 있다. 3.AB테스트 : 제한된 테스트 그룹안에서 테스트를 할 수 있다. 4.여러가지 속성값들을 한번에 변경할 수 있다.

명언 데이터는 Json 형식으로 추가해주었다.

데이터는 비동기 형식으로 불러와 사용하였다.

val remoteConfig = Firebase.remoteConfig
remoteConfig.setConfigSettingsAsync(
    // 비동기로 세팅
    remoteConfigSettings {
    minimumFetchIntervalInSeconds = 0
    }
    )

remoteConfig.fetchAndActivate().addOnCompleteListener {
    progress.visibility = View.GONE
        if (it.isSuccessful) {
            val quotes = parseQuotesJson(remoteConfig.getString("quotes"))
                val isNameShow = remoteConfig.getBoolean("is_name_show")
                displayQuotes(quotes, isNameShow)
    }
}

◾ ViewPager2

ViewPager2 - ViewPager 업그레이드 된 버전 ViewPager2에 어댑터를 추가하여 실제로 랜더링을 하는 부분을 구현한다.

// MainActivity.kt
val adapter = QuotePageAdapter(quotes, isNameShow)
viewPager.adapter = adapter
viewPager.setCurrentItem(adapter.itemCount / 2, false)

// QuotePageAdapter.kt
class QuotePageAdapter(private val quotes: List<Quote>, private val isNameShow: Boolean) :
    RecyclerView.Adapter<QuotePageAdapter.QuoteViewHolder>() {
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) = QuoteViewHolder(
        LayoutInflater.from(parent.context).inflate(R.layout.item_page, parent, false)
    )

    override fun onBindViewHolder(holder: QuoteViewHolder, position: Int) {
        val actualPosition = position % quotes.size
        holder.bind(quotes[actualPosition], isNameShow)
    }

    override fun getItemCount() = Int.MAX_VALUE

    class QuoteViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        private val quoteTextView: TextView = itemView.findViewById(R.id.quoteTextView)
        private val nameTextView: TextView = itemView.findViewById(R.id.nameTextView)

        fun bind(quote: Quote, isNameShow: Boolean) {
            quoteTextView.text = "\"${quote.quote}\""
            if (isNameShow) {
                nameTextView.text = "- ${quote.name}"
                nameTextView.visibility = View.VISIBLE
            } else {
                nameTextView.visibility = View.GONE
            }
        }
    }
}

◾ PageTransformer

PageTransformer는 표시 / 첨부 된 페이지가 스크롤 될 때마다 호출된다. 애플리케이션이 애니메이션 속성을 사용하여 페이지보기에 사용자 지정 변환을 적용 할 수 있게 한다.

페이지의 위치에 따라 투명도를 조절하여 화면에서 사라지면서 점점 투명해지도록 구현하였다.

viewPager.setPageTransformer { page, position ->
    when {
                position.absoluteValue >= 1.0F -> {
                    page.alpha = 0F
                }
                position == 0F -> {
                    page.alpha = 1F
                }
                else -> {
                    page.alpha = 1F - 2 * position.absoluteValue
                }
    }
}

🚩 결과

관련 문서 : Firebase 공식 문서 - Remote Config && 공식 문서 - PageTransformer && 공식 문서 - ViewPager2

Git 바로가기

Lint found fatal errors while assembling a release target.

Clean Project를 하거나, Rebuild Project를 해봐도 해결되지 않는다. 그런데 AVD에서는 APP 실행이 잘되는데 왜 APK 빌드시에만 오류가 날까 ㅠㅠ

문제점을 찾아보니 에러가 발생해서라고 한다. (실행은 잘 돼놓고..!!) 이를 확인하고 고칠 수 있는 방법이 있다!!

보기 방식을 Project로 설정 후, app > build > reports 로 들어가 link-results-release-fetal(둘 중 아무파일이나 상관없음!) 파일을 열어보면된다. 이런식으로 어느 오류가 어느 위치에서 발생했는지 알 수 있다. 나같은 경우에는 Layout에서 TextView 위젯의 체인을 또 걸어줬다는 이유 였다!!

이 오류들을 잡아주니 잘 빌드된다!

오늘은 음성을 녹음하는 APP을 만들어본다! 사용자는 녹음된 음성을 재생하여 확인 할 수 있고, 초기화를 통해 재녹음을 할 수 있다. 녹음이 잘 되고 있는지 확인 하기 위해 음성의 변화를 그래프로 보여준다.

사용해 본 기술

• RECORD AUDIO PERMISSION 체크
• Audio Visualizing
• MediaRecorder API
• Handler

🚩 기능 살펴보기

◾ MediaRecorder API 사용하여 녹음하기

1. 녹음 권한 요청하기

   // Manifest.xml에 추가
   <uses-permission android:name="android.permission.RECORD_AUDIO" />

2. MediaRecorder 객체 생성 및 실행

   // MediaRecorder 생성
   recorder = MediaRecorder().apply {
    // 오디오 소스 설정
    setAudioSource(MediaRecorder.AudioSource.MIC)
    // 출력 파일 포맷 설정
    setOutputFormat(MediaRecorder.OutputFormat.THREE_GPP)
    // 오디오 인코더를 설정
    setAudioEncoder(MediaRecorder.AudioEncoder.AMR_NB)
    // 출력 파일 이름 설정
    setOutputFile(recordingFilePath)
    // 초기화 완료
    prepare()
   }
   recorder?.start() // 녹음 시작

◾ 녹음된 음성 Visualizing 하여 보여주기

1. 녹음 중인 경우, 음성의 크기를 리스트로 받아온다.

   // VisualizeView.kt
   var onRequestCurrentAmplitude: (() -> Int)? = null
   

// MainActivity.kt visualizerView.onRequestCurrentAmplitude = { recorder?.maxAmplitude ?: 0 } visualizerView.startVisualizing(false)

2. 이를 그래프로 보여줄 View를 만들어 시각화한다.
```kotlin
private val amplitudePaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        color = context.getColor(R.color.purple_500)
        strokeWidth = LINE_WIDTH
        strokeCap = Paint.Cap.ROUND // 라인의 양끝을 둥글게 표현
}

// 뷰 그리기
override fun onDraw(canvas: Canvas?) {
    super.onDraw(canvas)

        canvas ?: return

        val centerY = drawingHeight / 2f    // 그래프의 중앙을 센터로 설정
        var offsetX = drawingWidth.toFloat()
        drawingAmplitudes.let {
            if (isReplaying) {
                it.takeLast(replayingPosition) // 
            } else {
                it
            }
        }.forEach { amplitude ->
            val lineLength =
                amplitude / MAX_AMPLITUDE * drawingHeight * 0.8F // 꽉차는 것 보단 조금 여백을 주기 위해 *0.8
            offsetX -= LINE_SPACE       // X축의 어느 부분에 그릴 것인지
            if (offsetX < 0) // 뷰를 벗어난다면!
                return@forEach

            canvas.drawLine(offsetX, centerY - lineLength / 2F, offsetX, centerY + lineLength / 2F, amplitudePaint)
    }
}

◾ 상태에 따라 다른 이미지의 버튼을 보여주기

AppCompatImageButton를 상속받은 클래스 RecordButton.kt

class RecordButton(
    context: Context,
    attrs: AttributeSet
) : AppCompatImageButton(context, attrs) {
    fun updateIconWithState(state: State){
        when(state){
            State.BEFORE_RECORDING->{
                setImageResource(R.drawable.ic_baseline_fiber_manual_record_24)
            }
            State.AFTER_RECORDING ->{
                setImageResource(R.drawable.ic_baseline_play_arrow_24)
            }
            State.ON_PLAYING -> {
                setImageResource(R.drawable.ic_baseline_stop_24)
            }
            State.ON_RECORDING -> {
                setImageResource(R.drawable.ic_baseline_stop_24)
            }
        }
    }
}

◾ 녹음시간 타이머 만들기

AppCompatTextView를 상속받은 클래스 CountUpTextView.kt

private var starttimestamp: Long = 0L
    private val countUpAction: Runnable = object : Runnable {
        override fun run() {
            val currentTimeStamp = SystemClock.elapsedRealtime()

            val countTimeSeconds = ((currentTimeStamp - starttimestamp) / 1000L).toInt()
            updateCountTime(countTimeSeconds)
            handler?.postDelayed(this, 1000L) // 1초에 한번 전달
        }
    }

fun startCountUp() {
    starttimestamp = SystemClock.elapsedRealtime()
    handler?.post(countUpAction)
}

fun stopCountUp() {
    handler?.removeCallbacks(countUpAction)
}

fun clearCountUp(){
    updateCountTime(0)
}

private fun updateCountTime(countTimeSeconds: Int) {
        val minutes = countTimeSeconds / 60
        val seconds = countTimeSeconds % 60

        text = "%02d:%02d".format(minutes, seconds)
}

👩‍💻 결과

++ 설치된 모습

관련 문서 : 안드로이드 공식문서 - MediaRecorder 개요 & 안드로이드 공식 문서 - Visualizer

Git 바로가기

OkHttp는 기본적으로 효율적인 HTTP 클라이언트이다. 쉽게 HTTP 기반의 request/response를 할 수 있도록 도와주는 오픈소스 라이브러리이다. 동기, 비동기 방식을 각각 제공하여 개발자가 선택하여 개발할 수 있다.

🚩 설정하기

우선 인터넷 사용 권한을 추가해준다.

//Manifest.xml 에 추가
<uses-permission android:name="android.permission.INTERNET" />

그 다음, Okhttp3 Library를 추가해 준다.

1. 프로젝트명에 우클릭을 한 후, Open Module Settings을 누른다.

2. Project Structure가 열리면 Dependencies → +버튼 → Library Dependency를 눌러준다.

3. 'okhttp'를 검색한다. ('squareup.okhttp3' 를 선택)

🚩 사용하기

이제 추가한 okhttp3를 사용해보자! 주의할 점은 네트워크 통신 작업은 Thread안에서 실행되어야 한다.

// OkHttp를 사용하도록 OkHttpClient 객체를 생성
var client = OkHttpClient()

// client가 요청할 request를 생성
val request: Request = Request.Builder().url(통신할Url).build()

// 요청을 실행한다.
// 동기 처리를 하고자 한다면 execute, 비동기 처리를 원한다면 enqueue를 사용
client.newCall(request).enqueue()

// 요청 결과에 따른 작업을 위해 Callback을 달아줄 수 있다.
//이렇게!
client.newCall(request).enqueue(object : Callback {
            override fun onFailure(request: Request?, e: IOException?) {
                //실패한 경우
            }

            override fun onResponse(response: Response?) {
                //성공한 경우
                println(response?.body()?.string())
            }
        })

추가적으로 해보자면 요청할 작업을 body에 넣고 post/get 작업을 따로 줄 수도 있다.

// RequestBody를 따로 만들어준다.
// 예시 ) "name" 항목에 데이터 name 을 넣어라!
val body = FormBody.Builder().add("name",name).build() as RequestBody

// request에 만든 body를 post 해준다. (get도 가능)
val request : Request = Request.Builder().url(통신할Url).post(body).build()

출처 : square - OKHttp 문서

뽀모도로는 기법은 시간 관리 방법론 25분간 집중해서 일을 한 다음 5분간 휴식하는 방식이다. '뽀모도로'는 이탈리아어로 토마토를 뜻한다. 프란체스코 시릴로가 대학생 시절 토마토 모양으로 생긴 요리용 타이머를 이용해 25분간 집중 후 휴식하는 일처리 방법을 제안한데서 그 이름이 유래했다. 출처 - 위키백과

🚩 뽀모도로 타이머

사용자가 SeekBar를 이용하여 원하는 시간을 분 단위로 맞춘다. 시간을 설정하면 째깍 거리는 소리와 함께 카운트다운이 실행된다. 카운트 다운 완료 후에는 00초를 알리는 알람을 울려준다.

사용해 본 기술

• SeekBar
• SoundPool

🚩 배운점

1. SeekBar

seekBar의 타이머가 카운트다운 되고 있을 때, 시간을 재설정하면 시간이 두가지로 나뉘어 함께 카운트 되는 이슈가 있었다. SeekBar의 onStopTrackingTouch(), 즉 시간 설정이 끝났을 때 타이머를 재시작하는 로직으로 구현하여 타이머가 하나 더 생성된 것이 이유였다. 시간을 변경 하려고 seekBar를 터치하는 순간에 타이머를 정지 시키기 위해, onStartTrackingTouch() 에 타이머를 정지 시키도록 구현하여 해결 하였다.

2. SoundPool

// soundPool 빌드 처리
private val soundPool = SoundPool.Builder().build()
// 알람
private var bellId: Int? = null
bellId = soundPool.load(this, R.raw.timer_bell, 1)

bellId?.let { it ->
    soundPool.play(it, 1F, 1F, 0, -1, 1F)
}

soundPool.play에 필요한 파라미터들은 다음과 같다.추가적으로, soundPool의 경우 메모리를 많이 잡아 먹기 때문에 destroy될 때 마다 할당된 음악을 해제해주는 것이 좋다.

 override fun onDestroy() {
        super.onDestroy()
        soundPool.release()  // soundPool에 로드되었던 파일들 해제
}

3. App의 window 색 변경

UI 전체 색을 변경하더라도, APP을 시작할때 잠깐, 하얀색이 비춰지는 것을 볼 수 있다. APP의 UI도 결국, window창 위에 그려지는 것이기 때문에 이 window창 색 까지 변경 해 주어야 하는 것이다.

<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="Theme.PomodoroTimer" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- 이 부분을 추가하여 변경해준다. -->
        <item name="android:windowBackground">@color/main_red</item>
    </style>
</resources>

👩‍💻 결과

Gif로 첨부해야해서 아쉽다!! 실제로 영상을 보면 째깍째깍 하는 소리가 넘 상큼하다.

• ++ 앱 아이콘도 귀엽게 만들어 주었다 ㅎㅎ

Git 보러가기

🚩 build.gradle (:app) 에 dex 설정 추가하기

android {
    defaultConfig {
        // 이 줄을 추가해준다.
        multiDexEnabled true
}

// minSdkVersion 20 이하인 경우에는 다음 줄도 추가해준다.
dependencies {
    implementation 'androidx.multidex:multidex:2.0.1'
}

🚩 Manifest.xml 설정하기

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.test">
    <application
            android:name="android.support.multidex.MultiDexApplication">
        </application>
</manifest>

여기까지 잘 설정해준다면 잘 빌드되는 것을 확인할 수 있다.

🚩 multidex란?

몇일전 App하나를 개발하고 있는데 이러한 오류가 떴다.

Cannot fit requested classes in a single dex file...

에러메세지를 가지고 구글링을 하면서 'mutidex' 라이브러리를 알게되었다.

안드로이드 소스코드는 dex파일로 컴파일 되어진다. 이때, 65535 개의 메서드만 컴파일이 가능하며 이보다 많아지는 경우 컴파일이 불가하다

이를 초과하는 앱을 만들 때는 이 dex 파일을 쪼개주는 multidex 라이브러리를 사용해주면 된다.

🚩 설정하기

설정 및 사용 방법은 아주 간단하다!

알아보니 minSdkVersion가 21 (API 21) 이상이라면 기본적으로 사용 설정이 되어있기 때문에 MultiDex를 설정해 줄 필요가 없다.

20 이하라면 아래와 같이 따로 설정을 해주어야 한다.

1) build.gradle (app)에 추가

android {
    defaultConfig {
        multiDexEnabled true
    }
}

dependencies {
  implementation 'com.android.support:multidex:1.0.3'
}

2) Manifest.xml에 추가

// application단 안
android:name="android.support.multidex.MultiDexApplication" >

🚩 사용하기

그 후, 문제의 Class 안에 다음과 같이 선언해주면 된다.

class MainActivity : MultiDexApplication() {...}

썸네일 출처 && 이미지 출처

🚩 LiveData란?

LiveData는 관찰가능한 데이터 Holder 클래스로, Android Jetpack의 구성요소이다. 지난 포스팅에 사용한 Viewmodel은 이러한 LiveData를 가지고 있다.

예를 들어 위 그림과 같이 음식점 메뉴를 나타내는 ViewModel 안에 LiveData가 있다고 가정하자! LiveData의 '가격'이 변경되면 UI에서 알아채고, 변경된 데이터를 처리할 수 있다. 안드로이드 3.1 이상부터 LiveData 및 Viewmodel은 데이터 바인딩과 함께 작동한다.

Activity, Fragment 등의 LifeCycle을 인식하여 LifeCycle 내에서만 동작하는 요소로 LifeCycle이 종료되면(화면 destroy) 같이 삭제된다. 그러므로 메모리 누수가 없고, 수명주기 문제를 해결해주어 데이터 관리를 개발자가 하지 않아도 된다는 점 등 많은 이점을 가지고 있다.

LiveData는 옵저버 패턴 관련 즉, 데이터의 변경 사항을 알 수 있다.

🚩 사용하기

🔸 build.gradle - dependencies 에 추가

def lifecycle_version = "2.2.0
// viewModel
implementation "androidx.lifecycle:lifrcycle-viewmodel-ktx:$lifecycle_version"
// LiveData
implementation "androidx.lifecycle:lifecycle-livedata-ktx:$lifecycle_version"

🔸 생성 및 사용하기

// ViewModel 생성
val myViewModel = ViewModelProviders.of(this).get(MyDataViewModel::class.java)
val binding = ActivityMainBindind.inflate(layoutInflater)

// 생성한 ViewModel과 Databinding을 연결한 후
binding.viewmodel = myViewModle

// 다음 코드를 추가해준다.
binding.setLifecycleOwner(this)
setContentView(binding.root)

🚩 전체 코드

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding
    private val viewModel : TodoAdapter.MainViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        val view = binding.root
        setContentView(view)

        binding.rvItem.apply {
            layoutManager = LinearLayoutManager(this@MainActivity)
            adapter = TodoAdapter(emptyList(), onClickDelete = {
                viewModel.deleteTodo(it)
            }, onClickItem = {
                viewModel.toggleTodo(it)
            })
        }

        binding.addBtn.setOnClickListener {
            val todo = Todo(binding.addEt.text.toString())
            viewModel.addTodo(todo)
        }

        //관찰하여 UI를 업데이트 하도록 observe() 구현
        viewModel.todoLiveData.observe(this, Observer {
            (binding.rvItem.adapter as TodoAdapter).setData(it)
        })
    }
}

data class Todo(
    val text: String,
    var isDone: Boolean = false
) 

class TodoAdapter(
    private var MyDataset: List<Todo>,
    val onClickDelete: (todo: Todo) -> Unit,
    val onClickItem: (todo: Todo) -> Unit
) :
    RecyclerView.Adapter<TodoAdapter.TodoListHolder>() {
    class TodoListHolder(val binding: ItemTodoBinding) : RecyclerView.ViewHolder(binding.root)

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): TodoAdapter.TodoListHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_todo, parent, false)
        return TodoListHolder(ItemTodoBinding.bind(view))
    }

    override fun getItemCount(): Int = MyDataset.size

    // 이 부분 추가!
    fun setData(newData : List<Todo>){
        MyDataset = newData
        notifyDataSetChanged()
    }

    override fun onBindViewHolder(holder: TodoListHolder, position: Int) {
        val todo = MyDataset[position]
        holder.binding.tvList.text = todo.text
        if (todo.isDone) {
            holder.binding.tvList.apply {
                paintFlags = paintFlags or Paint.STRIKE_THRU_TEXT_FLAG
                setTypeface(null, Typeface.ITALIC)
            }
        } else {
            holder.binding.tvList.apply {
                paintFlags = 0
                setTypeface(null, Typeface.NORMAL)
            }
        }
        holder.binding.ivDelete.setOnClickListener { onClickDelete.invoke(todo) }
        holder.binding.root.setOnClickListener { onClickItem.invoke(todo) }
    }

    class MainViewModel : ViewModel() {
    // LivaData로 하면 읽기만 가능하니 수정이 가능한 MutableLiveData를 쓴다.
        val todoLiveData = MutableLiveData<List<Todo>>()

        private val data = arrayListOf<Todo>()

        fun toggleTodo(todo: Todo) {
            todo.isDone = !todo.isDone
            // 추가!
            todoLiveData.value = data
        }

        fun addTodo(todo: Todo) {
            data.add(todo)
            // 추가!
            // todoLivaData의 값을 변경된 data로 갱신해준다.
            todoLiveData.value = data
        }

        fun deleteTodo(todo: Todo) {
            data.remove(todo)
            // 추가!
            todoLiveData.value = data
        }
    }
}

출처 : 안드로이드 공식문서 && 썸네일 출처

🚩 ViewModel이란?

ViewModel 클래스는 수명 주기를 고려하여 UI 관련 데이터를 저장하고 관리하도록 설계되어있다.

ViewModel 클래스를 사용하면 화면 회전과 같이 구성을 변경할 때도 데이터를 유지할 수 있다.

일반적인 방법으로 데이터를 관리 시 다음과 같이 기기의 회전 처리를 하면 데이터가 날아가는걸 확인 할 수 있다.

화면 회전 시 activity가 destroy후 create가 되기 때문이다. 이를 해결하기 위해 구글에서 제공해주는 View model을 사용해본다.

🔸 viewModel 추가하기

viewmodels() 사용을 위해 android-ktx를 추가해준다.

//build.gradle - dependencies에 추가해준다.
implementation "androidx.fragment:fragment-ktx:1.3.2" 

🔸 viewmodel 사용하기

(1) ViewModel 객체 생성

class MyViewModel : ViewModel() {
    private val users: MutableLiveData<List<User>> by lazy {
        MutableLiveData().also {
            loadUsers()
        }
    }

    fun getUsers(): LiveData<List<User>> {
        return users
    }

    private fun loadUsers() {

    }
}

(2) Activity에서 사용되도록 설정하기

class MyActivity : AppCompatActivity() {

private val viewModel: MainViewModel by viewModels()
    override fun onCreate(savedInstanceState: Bundle?) {
        // 위 MyViewModel을 가져와 쓰겠다.
        val model: MyViewModel by viewModels()

        // 위 데이터를 observe(관찰)하겠다.
        model.getUsers().observe(this, Observer<List<User>>{ users ->
            // 업데이트 할 작업
        })
    }
}

크게는 위와 같이 설정하여 사용이 가능하다. 아래는 ViewModel을 사용한 TodoList 앱이다.

🚩 전체코드

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding
    //ViewModel 객체 선언
    private val viewModel: MainViewModel by viewModels()
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        val view = binding.root
        setContentView(view)

        binding.rvItem.apply {
            layoutManager = LinearLayoutManager(this@MainActivity)
            adapter = TodoAdapter(viewModel.data, onClickDelete = {
                //viewModel의 deleteTodo를 실행
                viewModel.deleteTodo(it)
                binding.rvItem.adapter?.notifyDataSetChanged()
            }, onClickItem = {
                viewModel.toggleTodo(it)
                binding.rvItem.adapter?.notifyDataSetChanged()
            })
        }

        binding.addBtn.setOnClickListener {
            val todo = Todo(binding.addEt.text.toString())
            viewModel.addTodo(todo)
            binding.rvItem.adapter?.notifyDataSetChanged()
        }
    }
}

data class Todo(
    val text: String,
    var isDone: Boolean = false
) //자동으로 게터세터가 생성된 dataclass ~!~!


class TodoAdapter(
    private var myDataset: List<Todo>,
    val onClickDelete: (todo: Todo) -> Unit,
    val onClickItem: (todo: Todo) -> Unit
) :
    RecyclerView.Adapter<TodoAdapter.TodoViewHolder>() {
    class TodoViewHolder(val binding: ItemTodoBinding) : RecyclerView.ViewHolder(binding.root)
    //.root 하면 본인이 어떤 뷰로 부터 생성된 바인딩인지 확인 가능

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): TodoAdapter.TodoViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_todo, parent, false)
        return TodoViewHolder(ItemTodoBinding.bind(view))
    }

    override fun onBindViewHolder(holder: TodoViewHolder, position: Int) {
        val todo = myDataset[position]
        holder.binding.tvList.text = todo.text
        if (todo.isDone) {
            holder.binding.tvList.apply {
                paintFlags = paintFlags or Paint.STRIKE_THRU_TEXT_FLAG
                setTypeface(null, Typeface.ITALIC)
            }
        } else {
            holder.binding.tvList.apply {
                paintFlags = 0
                setTypeface(null, Typeface.NORMAL)
            }
        }
        holder.binding.ivDelete.setOnClickListener {
            onClickDelete.invoke(todo)
        }
        holder.binding.root.setOnClickListener {
            onClickItem.invoke(todo) //todo를 전달하여 onClickItem함수를 실행시킨다.
        }
    }

    override fun getItemCount(): Int = myDataset.size

}

class MainViewModel : ViewModel() {
    val data = arrayListOf<Todo>()
    fun toggleTodo(todo: Todo) {
        todo.isDone = !todo.isDone
    }

    fun addTodo(todo: Todo) {
        data.add(todo)
    }

    fun deleteTodo(todo: Todo) {
        data.remove(todo)
    }
}

👩‍💻 결과

화면 회전시에도 UI의 데이터가 남아있는것을 확인 할 수 있다.

출처 : 안드로이드 공식문서 - ViewModel

지도 app을 만들어 사용자의 위치를 받아오거나, 사진을 찍기 위해 카메라 접근 권한을 받아올 때 등등

오늘은 필요한 권한을 추가하고, 사용자에게 승인을 받고, 승인을 받았는지 여부를 확인 하는 작업을 해본다.

1. 필요 권한을 Manifest에 추가해준다.

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

2. 권한이 있는지 확인 및 요청하기

val cameraPermissionCheck = ContextCompat.checkSelfPermission(this,android.Manifest.permission.CAMERA)
    if(cameraPermissionCheck != PackageManager.PERMISSION_GRANTED){
        // 권한이 없는 경우
            // 사용자에게 권한 승인 요청을 한다.
            ActivityCompat.requestPermissions(this, arrayOf(android.Manifest.permission.CAMERA),1000)
         } else{
                // 권한이 있는 경우
                Log.d("permissions","권한이 이미 있음")
     }
}

3. 사용자 응답에 따른 작업 추가하기

onRequestPermissionsResult()를 ovveride하여 사용자의 응답에 따라 할 작업을 추가할 수 있다.

override fun onRequestPermissionsResult(
        requestCode: Int,
        permissions: Array<out String>,
        grantResults: IntArray
    ) {
        super.onRequestPermissionsResult(requestCode, permissions, grantResults)
        if(requestCode == 1000){
            if(grantResults[0] == PackageManager.PERMISSION_GRANTED){
                // 승낙된 경우 할 작업
                Log.d("permissions" , "승낙되었습니다.")
            }else {
                // 거부된 경우 할 작업
                Log.d("permissions" , "거부되었습니다.")
            }
        }
    }

👩‍💻 결과

Sync는 동기, Async는 비동기를 뜻한다.

🔸 동기(Sync) 방식

• 작업을 순서대로 진행한다.
• 코드의 윗부분부터 아랫부분까지 실행되어진다. ex. A -> B -> C -> D

🔸 비동기(Async) 방식

• Thread를 만들어서 작업을 따로 처리한다.

🚩 Async의 장점과 단점

• 장점

  • MainThread를 기다리게 할 필요가 없다.
    • 네트워크 작업에 매우 유용하다.

• 단점

  • 재사용이 불가능하다.
  • 구현된 액티비가 종료될 때 따라 종료되지 않는다. ( Lifecycle을 활요하여( ex. onPause ) 별도로 종료 처리를 해주어야 함 )
  • AsyncTask는 하나만 실행 될 수 있다. (병렬 처리 불가)

🚩 Android에서 Async를 다루는 방법

• AsyncTask를 상속받는다.
• 필요 함수들을 Implement 한다.
  • onPreExecute() : Thread가 출발하기 전 실행할 작업
  • doInBackground() : Thread 진행 시 해야할 작업
  • onProgressUpdate() : 진행되어 상태가 update 될 때
  • onPostExecute() : doInBackground가 끝났을 때 (작업이 완료) 실행된다.

🚩 AsyncTask 실습해보기

1. AsyncTask 클래스를 만들어준다.

   class BackgroundAsyncTask(
    val progressBar: ProgressBar, val progressTextView: TextView
   ) : AsyncTask<Int, Int, Int>() {
    var percent: Int = 0
    override fun onPreExecute() {
        percent = 0
        progressBar.setProgress(percent)
    }
    override fun doInBackground(vararg params: Int?): Int {
        while (isCancelled() == false){
            percent++
            if(percent>100) break
            else publishProgress(percent)
            try {
                Thread.sleep(100)
            }catch (e : Exception){
                e.printStackTrace()
            }
        }
        return percent
    }
   
    override fun onProgressUpdate(vararg values: Int?) {
        progressBar.setProgress(values[0] ?: 0)
        progressTextView.setText("퍼센트 : " + values[0])
        super.onProgressUpdate(*values)
    }
   
    override fun onPostExecute(result: Int?) {
        progressTextView.setText("작업이 완료 되었습니다.")
    }
   
    override fun onCancelled() {
        progressBar.setProgress(0)
        progressTextView.setText("작업이 취소 되었습니다.")
    }
   }

2. View에서 버튼 클릭 시 사용되도록 설정한다.

   asyncStartButton = findViewById(R.id.async_start_btn)
   asyncStopButton = findViewById(R.id.async_stop_btn)
   

var task : BackgroundAsyncTask? = null

asyncStartButton.setOnClickListener { task = BackgroundAsyncTask(asyncProgressBar,asyncTextView) task?.execute() // task 실행 } asyncStopButton.setOnClickListener { task?.cancel(true) // task 종료 }

```

👩‍💻 결과

🚩 1. 작품 개요

• 작품명 : '얼마나 돌려?'
• 개발기간 : 3일

🚩 2. 사용 기술 및 도구

• 언어 : Kotlin (100%)
• 환경 : Android Studio
• Database : Realm & Firebase-FireStorage

🚩 3. 작품 설명

3개의 BottomNavigation View를 가진다.

🔸 HomeFragment

: 타이머가 있는 뷰이다. 타이머 하단의 AppCompatSeekBar를 이용하여 시간을 조절 할 수 있다.

lateinit var seekBar: AppCompatSeekBar
companion object { lateinit var r2: Ringtone }

// '시작' 버튼 클릭 시
seekBar.visibility = View.INVISIBLE
minute = timeTick / 60
second = timeTick % 60

timer(period = 1000, initialDelay = 1000) {
    activity?.runOnUiThread { timer.text = String.format("%02d : %02d", minute, second)}
        if (second == 0) {
                if(minute == 0){
                    try {
                                r2.play()
                            } catch (e: Exception) {
                                e.printStackTrace()
                            }
                            cancel()
                        }
                        minute--
                        second = 60
                    }
                    second--
                    btn_stop.setOnClickListener {
                        seekbarSetUp()
                        cancel()
                    }
       }
}

// '정지' 버튼 클릭 시
r2.stop()
seekBar.setProgress(0)
timeTick = 0
seekBar.visibility = View.VISIBLE

🔸 ItemFragment

: 제품에 대한 정보는 FirebaseFireStore에 저장해 놨다.이 정보들을 가져와 RecyclerView에 뿌려준다. '즐겨찾기' 버튼을 누르면 기기 내부DB에 저장되도록 Realm을 사용하였다.

data class ItemDto(
    var uid:String? = "",
    var itemName:String?= "",  // 제품이름
    var itemTime:String? = "",  // 전자렌지 시간
    var itemOption:String? = "" //제품 옵션
)

// 제품의 데이터를 ItemDto에 담아 아래 함수를 실행한다.
fun itemLike(itemDto: ItemDto) {
    Realm.init(context)
      val config: RealmConfiguration = RealmConfiguration.Builder()
              .deleteRealmIfMigrationNeeded()
              .build()

    Realm.setDefaultConfiguration(config)
    val realm = Realm.getDefaultInstance()
    realm.executeTransaction{
              with(it.createObject(ItemRealm::class.java)){
                  this.itemTime_r = itemDto.itemTime
                  this.itemOption_r = itemDto.itemOption
                  this.itemName_r = itemDto.itemName
               }
    }
}

즉, 전체 item 정보는 FirebaseFirestore , 즐겨찾기 목록은 Realm을 사용하여 데이터를 관리했다.

검색 기능도 구현해놨다!

fun search(serachWord: String) {
            firestore?.collection("item")
                ?.addSnapshotListener { querySnapshot, firebaseFirestoreException ->
                    // ArrayList 비워줌
                    itemDtoList.clear()

                    for (snapshot in querySnapshot!!.documents) {
                        if (snapshot.getString("itemName")!!.contains(serachWord)) {
                            var item = snapshot.toObject(ItemDto::class.java)
                            itemDtoList.add(item!!)
                        }
                    }
                    notifyDataSetChanged()
       }
}

🔸 InfoFragment

: 화면 하단에 Google Admob을 사용하여 배너 광고를 삽입했다. '문의하기 / 제품 추가 신청하기' 를 통해 접수된 정보가 있으면 FirebaseFireStore에 저장된다.

두 레이아웃 모두 이메일 입력창이 있는데 TextWatcher를 사용하여 이메일 형식이 맞는지 계속 확인한다. 이 부분은 따로 포스팅이 되어있다.

4. 느낀 점

Thread에 대해서 공부하면서 알게된 runOnUiThread를 사용해 볼 기회가 생겨서 좋았다. 몰랐다면 왜 TextView의 값이 변경되지 않는지 방법을 찾아 헤맸을 것 같은 느낌...!

또한, 때에 따라 기기 내부 DB와 외부 DB를 함께 사용해보며 데이터 관리를 해본 점이 인상 깊었다.

한번 만들어 볼까?? 하고 시작하여 구글 스토어에 업로드 하기까지 뼈대를 점점 갖추고, 하나 둘 필요한 살점들을 붙여나가면서 조립하는 듯한 재미를 느꼈다.

+++ (21.04.07) Google playstore 출시

+++ (21.04.03) Version 1.2 Update : 다크 모드 추가

+++ (21.04.08) Version 2.0 Update : 타이머 처리 방식 비동기로 변경

+++ (21.04.09) Version 2.2 Update : 타이머 중첩 에러 확인 및 수정

binding 기능을 사용하면 뷰와 상호작용하는 코드를 쉽게 작성할 수 있다. 모듈에서 사용 설정된 ViewBinding은 모듈에 있는 각 XML 레이아웃 파일의 결합 클래스를 생성합니다. binding Class의 인스턴스에는 상응하는 레이아웃에 ID가 있는 모든 뷰의 직접 참조가 포함된다.

쉽게 말하자면 xml 레이아웃의 아이템들을 findViewById 보다 간편하게 가져와 사용할 수 있다. 대부분의 경우 ViewBinding이 findViewById를 대체한다.

🔸 findViewById와 차이점!

• Null safety: ViewBinding은 뷰에 대한 직접 참조를 생성하기 때문에 View ID가 잘못됨으로 인한 NPE를 발생시킬 위험이 없다.

• Type safety: 각 바인딩 클래스의 필드에는 XML 파일에서 참조하는 뷰와 일치하는 타입을 갖고 있어, 클래스를 캐스팅할 때 발생할수 있는 오류가 없다.

레이아웃 파일과 실제 자바/코틀린 코드간에 일치하지 않아 발생하는 문제가 런타임이 아닌 컴파일타임에 발생하기 때문에 더 빠르게 에러를 잡고, 개발자는생산성을 늘릴 수 있습니다.

🚩 사용하기

1. build.gradle (모듈) 에 추가한다.

   android {
        ...
        viewBinding {
            enabled = true
        }
    }

2. Class 내에서 사용 설정하기

   private lateinit var binding: ActivityMainBinding
   // activity_main.xml = ActivityMainBinding
   
    override fun onCreate(savedInstanceState: Bundle) {
        super.onCreate(savedInstanceState)
        binding = ResultProfileBinding.inflate(layoutInflater)
        val view = binding.root
        setContentView(view)
    }

참고로! class TodoListHolder(val binding: ItemTodoBinding) : RecyclerView.ViewHolder(binding.root) 와 같이 .root 를 통해 본인이 어떤 뷰로 부터 생성된 바인딩인지 확인 가능하다.

3. 실제 사용하기

class MainActivity : AppCompatActivity(), BottomNavigationView.OnNavigationItemSelectedListener { // View Binding 사용 순서 1 private var _binding : ActivityMainBinding? = null val binding get()= _binding!!

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    // View Binding 사용 순서 2
    _binding = ActivityMainBinding.inflate(layoutInflater)
    // View Binding 사용 순서 3
    // bottomNavigationView = findViewById(R.id.nav_bottom)
    // bottomNavigationView.setOnNavigationItemSelectedListener(this)
    binding.navBottom.setOnNavigationItemSelectedListener(this)


}
override fun onDestroy() {
    super.onDestroy()
    // 구현순서 4
    // 추가적으로!! Activity가 destroy 될 때 binding객체도 없애야 좋다.
    _binding = null
}

```

참고 : view Binding 관련 블로그 & view-binding 공식문서

🚩 로또 번호 생성기

사용자가 들어갔으면 하는 번호를 선택 할 수 있다. 나머지 번호들은 자동 생성기능을 통해 생성해 낼 수 있다. 로또 숫자별로 색이 다른 점을 이용해 ui를 귀엽게 꾸며봤다.

🚩 사용해 본 kotlin 문법

• apply
• When
• Random
• Collection - Set, List
• lambda

🚩 배운 점

Collection을 통해 숫자가 중복되지 않는 list를 만드는 방법을 배웠다. Random 함수가 코틀린에서 어떻게 쓰이는지 사용해 볼 수 있었다. list에 중복되지 않는 숫자 6개를 랜덤으로 넣어야한다. 나는 3가지 방법으로 구현해보았다.

1. 첫번째 방법

   val random = java.util.Random()
   val list = mutableListOf<Int>()
   

while(list.size<6){ val randomNum = random.nextInt(45)+1 if(list.contains(randomNum)){ continue } list.add(randomNum) }

2. 두번째 방법
```kotlin
val random = java.util.Random()
val numberSet = mutableSetOf<Int>()

while(numberSet.size<6){
    val randomNum = random.nextInt(45)+1
    numberSet.add(randomNum)
}

3. 세번째 방법

   val random = java.util.Random()
   val list = mutableListOf<Int>().apply{
    for(i in 1..45){
            this.add(i)
    }
   }
   list.shuffle()
   list =  list.subList(0,6))

👩‍💻 결과

Git 바로가기

🚩 닷홈에서 웹 호스팅 신청하여 도메인 만들기

1. 닷홈에서 계정을 생성한다.

2. 로그인 후, 웹호스팅 > 무료호스팅으로 들어간다.

3. 웹 호스팅 설정 정보를 입력해준다. 여기서 FTP ID/PW 와 DB명/ID/PW는 까먹지 않게 따로 메모해두는 것이 좋다. 추후 안드로이드 스튜디오 연결 시 필요한 정보들이다.

4. 나머지 정보들도 확인 후 동의 / 신청하기를 눌러준다. 모두 완료가 되면 웹호스팅 목록에 도메인이 생성된 것을 확인 할 수 있다.

🚩 FileZilla로 php 파일 업로드하기

fileZilla는 대용량 파일 전송에 적합한 오픈 소스 기반의 프로그램이다. FTP 클라이언트를 이용해서 원격에 파일을 업로드하고, 다운로드 할 수 있다. 다운로드 하러가기! 아래는 다운로드 후 실행한 화면이다.

1. 호스트 = 도메인주소 / 사용자명 = FTP ID / 비밀번호 = FTP PW / 포트 = 21 을 적어준 후 '빠른연결'을 누른다.

2. 연결이 성공하면 아래와 같이 디렉터리 목록이 조회되는데 html 폴더로 들어간다. 이곳에 PHP 파일을 올릴 것이다.

🚩 Database 생성하기

1. 다시 닷홈으로 들어가 '마이 닷홈 > 호스팅 관리 > 제공 내역(최하단에 위치)'으로 들어간다. 여기서 MySQL관리 주소로 들어간다.들어가서 로그인을 해주면 된다.(FTP 계정과 동일)

2. 로그인 완료 후 상단의 SQL을 눌러 쿼리문을 작성해준다. 담고자 하는 데이터 테이블을 생성하면 된다.예를 들어 친구들의 정보를 담는다고 가정하고 FRIENDS 테이블과 2개의 칼럼을 만든다. 만든 후에는 실행을 눌러 저장하면 된다.

   CREATE TABLE FRIENDS (
        Name VARCHAR(50) NOT NULL,
            StudentID VARCHAR(50) NOT NULL,
            CONSTRAINT PRIMARY KEY(StudentID)
   );

   만들기 성공!

🚩 PHP 파일 추가하기

정보를 넣는 php 파일들을 만든다. ++ 참고로 아직 php 지식이 조금 부족해서 구글링을 통해 코드를 가져와봤다. <insertdata.php>

<?php 

    error_reporting(E_ALL); 
    ini_set('display_errors',1); 

    include('start.php');


    $android = strpos($_SERVER['HTTP_USER_AGENT'], "Android");


    if( (($_SERVER['REQUEST_METHOD'] == 'POST') && isset($_POST['submit'])) || $android )
    {

        $StudentID = $_POST['StudentID'];
        $Name    = $_POST['Name'];

        if(empty($StudentID)){
            $errMSG = "학번을 입력하세요.";
        }
        else if(empty($Name)){
            $errMSG = "이름을 입력하세요.";
        }

        if(!isset($errMSG)) // 이름과 학번 모두 입력
        {
            try{
                // SQL문을 실행하여 데이터를 MySQL 서버의 FRIENDS 테이블에 저장
                $stmt = $con->prepare('INSERT INTO FRIENDS(Name, StudentID) VALUES(:Name, :StudentID)');
                $stmt->bindParam(':Name', $Name);
            $stmt->bindParam(':StudentID', $StudentID);

                if($stmt->execute())
                {
                    $successMSG = "새로운 친구를 추가했습니다.";
                }
                else
                {
                    $errMSG = "친구 추가 에러";
                }

            } catch(PDOException $e) {
                die("Database error: " . $e->getMessage()); 
            }
        }

    }

?>


<?php 
    if (isset($errMSG)) echo $errMSG;
    if (isset($successMSG)) echo $successMSG;

    $android = strpos($_SERVER['HTTP_USER_AGENT'], "Android");

    if( !$android )
    {
?>
    <html>
       <body>

            <form action="<?php $_PHP_SELF ?>" method="POST">
                Name: <input type = "text" name = "Name" />
                StudentID   : <input type = "text" name = "StudentID" />
                <input type = "submit" name = "submit" />
            </form>

       </body>
    </html>

<?php 
    }
?>

<start.php>

<?php

    $host = 'localhost';
    $username = 'jinny0422'; # MySQL 계정 아이디
    $password = 'wlsdl316!'; # MySQL 계정 패스워드
    $dbname = 'jinny0422';  # DATABASE 이름


    $options = array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8');

    try {

        $con = new PDO("mysql:host={$host};dbname={$dbname};charset=utf8",$username, $password);
    } catch(PDOException $e) {

        die("Failed to connect to the database: " . $e->getMessage()); 
    }


    $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $con->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);

    if(function_exists('get_magic_quotes_gpc') && get_magic_quotes_gpc()) { 
        function undo_magic_quotes_gpc(&$array) { 
            foreach($array as &$value) { 
                if(is_array($value)) { 
                    undo_magic_quotes_gpc($value); 
                } 
                else { 
                    $value = stripslashes($value); 
                } 
            } 
        } 

        undo_magic_quotes_gpc($_POST); 
        undo_magic_quotes_gpc($_GET); 
        undo_magic_quotes_gpc($_COOKIE); 
    } 

    header('Content-Type: text/html; charset=utf-8'); 
    #session_start();
?>

이 파일을 위 Filezilla의 html 폴더에 넣어준다. 요렇게!

👩‍💻 실행 결과

http://FTP아이디.dothome.co.kr/insertdata.php 로 들어가보면 이름과 학번을 입력할 수 있다. 데이터가 잘 들어와 있는 걸 확인 할 수 있다.

이제 안드로이드에서 이 데이터베이스를 사용하는 일이 남았다! 다음 포스팅에서 계속...!

참고 : 닷홈 + 파일질라 참고 & php 출처