[Wear OS] 갤럭시 와치 앱 만들기

nmy6452·2023년 10월 12일
0

안드로이드

목록 보기
1/1

개기

새로운 기술을 익히는데 가장 좋은 방법은 해당 기술을 활용한 상품을 만들어보는것이라고 생각한다, 따라서 이번에 공부한 코틀린을 몸에 익히는 차원에서 앱개발을 계획하게 되었다. 그러던 와중 항상 손목에 차고다니는 갤럭시 와치4가 생각이 났고 "와치 앱 개발이 모바일 개발이랑 달라봐자 얼마나 다르겠어?" 잘못된 판단의 예 라는 생각에 안드로이드 스튜디오를 활용한 간단한 와치 앱 개발을 준비해봤다.

기능

컨셉

사용자가 원하는 때 어떤 음식을 먹을지 정해주는 앱

개발된 기능

  • 한식/중식/일식/양식 중 한가지 음식을 정해줌

계획중인 기능

  • 사용자가 원하는 음식을 추가 또는 삭제 가능
  • 선택된 음식을 제공하는 식당을 주변에서 찾아서 지도앱 목적지로 지정

개발 과정

  1. 안드로이드 프로젝트 생성

    안드로이드 스튜디오로 들어가서 새로운 프로젝트를 만들어준다.
    템플릿은 Wear OS에 Empty Wear App With Tile And Compication을 선택

  2. android 탭에서 MainActivity.kt를 편집

  3. MainActivity에 Content를 설정

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TodayMenu()
        }
    }
}
  1. TodayMenu를 만들어준다.

오늘의 매뉴를 출력해줄 공간을 설정한다.
PelicanTheme를 활용해 테마를 지정해주고
Column안에 Composable객체를 넣어 세로로 배치한다.

@Preview(device = Devices.WEAR_OS_SMALL_ROUND, showSystemUi = true)
@Composable
fun TodayMenu() {
    //음식이름을 출력할 변수를 mutable변수로 선언한다. Saveable 키워드 추가해 화면이 리로드 되더라도 변하지 않도록한다.
    var food by rememberSaveable { mutableStateOf("버튼을 클릭하세요") }
    PelicanTheme {
        Column(
                modifier = Modifier
                    .fillMaxSize()
                    .background(MaterialTheme.colors.background),
                verticalArrangement = Arrangement.Center
        ) {
            NameMenu(food)
            //만약 food에 음식이 들어있다면 다른 음식을 원하는지 권유
            if  (food != "버튼을 클릭하세요"){
                Text(
                    modifier = Modifier.fillMaxWidth(),
                    textAlign = TextAlign.Center,
                    text = "다른 음식을 윈하시나요?")
            }
            // 클릭시 랜덤한 음식을 food변수에 할당해준다.
            randomButton(food) {
                //randomButton의 onIncrement 함수 정의
                val foods = listOf("한식", "중식", "일식", "양식", "기타")
                food = foods[Random().nextInt(foods.size)]
            }
        }
    }
}
  1. 음식 이름을 보여줄 텍스트 Composable
@Composable
fun NameMenu(Food:String) {
    Text(
        modifier = Modifier.fillMaxWidth(),
        textAlign = TextAlign.Center,
        color = MaterialTheme.colors.primary,
        text = Food
    )
}
  1. 누르면 랜덤한 음식을 출력해줄 randomButton 정의
    버튼 클릭 이벤트는 onIncrement를 통해 상위 객체에서 받아온다.
@Composable
fun randomButton(food: String, onIncrement: () -> Unit) {
    Row(
        modifier = Modifier.fillMaxWidth().height(30.dp),
        horizontalArrangement = Arrangement.Center  //버튼을 중앙에 배치
    ) {
        Button(
            onClick = onIncrement,
            enabled = true,
        ) {
            Text(
                text = "클릭"
            )
        }
    }

}

완성된 앱

클릭 버튼을 클릭하면 랜덤한 음식이 출력된다.
퇴근하고 하느라
코틀린 공부부터 Wear OS까지 이틀걸렸다.


느낀점

코틀린 생산성 좋음
Wear OS 개발 제한이 너무 많음
Wear OS 개발 레퍼런스가 없음
안드로이드 스튜디오 가이드 문서 잘해둠 많은 도움이 되는듯
compose는 좋긴 좋은데 UI를 바로 바로 확인하기가 어려워서 로딩이 느림 아직은 개선이 많이 필요해 보임 하지만 코틀린/자바만으로 프로트개발까지 가능하다는 점은 매리트가 있어보임

코드 참고: https://github.com/nmy6452/pelican

profile
하꼬 개발자

0개의 댓글