돌아오신 것을 환영합니다
거의 끝나갑니다
쇼핑리스트 앱을 다시 여기에 넣어야 하는데
아니
그것은 navigation을 사용해서 해야합니다 왜냐하면 쇼핑리스트 앱을 표시하고 싶지만
또 위치선택화면이 될 구글 지도도 같이
표시해야 하기 때문입니다
맞아요
그러니 여기 새로운 컴포저블 fun Navigation을 추가합니다
이 navigation은 navController이 필요합니다
그리고 그것은 rememberNavController 입니다
이렇게
또 뷰 모델이 필요하고 그것이 locationViewModel되고
그리고 그것을 디폴트 뷰모델로 설정합니다
이렇게요
추가 정보는 없고
이 오류는 viewModel을 import해야 해서 그렇습니다
그리고 context도 필요합니다
Val context 는 LocalContext.current
입니다
보신적 있으시죠 그리고 LocationUtils도 추가하고 그것은 locationUtils 객체이고
이 locationUtils 객체는 context가 필요합니다
이제 모든것이 하나로 합쳐집니다
이전에 보였드렸다싶이 이 팝업을 표시하려면 여러가지 정보를 패스해야합니다
Navigation controller, context 등등
LocationUtils는 어떤 상황에서 권한을 요청해야하는지 알기위해서 context가
필요합니다
네
RequestLocationUpdates, RequestPermissions 등등
그리고 기억하신다면 우리의 쇼핑리스트
컴포저블은
LocationUtils, 뷰모델, nav controller, 그리고 표시해야할 주소까지
모두 필요합니다
여기에서 그것을 준비하는것 입니다
여기서 navController, viewModel, context, locationUtils 그리고
주소까지 패스할 것인데 주소는 viewModel에서 가져올것입니다
기억하신다면 뷰 모델은 우리가 설정한 retrofit 등 을 사용하여 가지고 올 수
있습니다
계속하겠습니다
여기에 NavHost를 사용하여 navController을 패스합니다
startDestination도 패스합니다
그리고 이것을 shoppingListscreen이라고 부릅니다
네
이 shoppingListscreen이 우리의 첫번째 화면입니다
이제 NavHost를 import 하고
이것 말고
Composable것으로 사용합니다
그러면 NavGraphBuilder이라고 나옵니다
여기에 composable을 넣고
shoppingListscreen을 추가합니다
여기에
Composable 하나는 여기 shoppingListScreen의 route이고 여기에 쇼핑리스트 앱도
포함됩니다
마침내 이제야 쇼핑리스트 앱을 사용할 수 있습니다 이 앱은 여기 보시는 큰 컴포저블입니다
LocationUtils, viewModel, navController, context 까지 모두 들어가있습니다
이제 이것을 다 합치겠습니다
LocationUtils를 패스해야합니다
여기 위에
세팅이 되어있죠
ViewModel을 패스하고
NavController도 패스합니다
여기 있죠
Context도 패스합니다
좋아요
됐습니다
이 localContext.current를 가져오는겁니다
그리고 address도 패스해야 합니다
Address는 아직 가지고있지 않습니다
어디서 가지고 오냐면
ViewModel에서 얻을 수 있습니다
그러니 viewModel.address.value
그리고 firstOrNull을 넣습니다
리스트에는
FirstOrNull이라는 함수가있는데
이것은 항목이 몇개가 있던지 상관없이 첫번째 아이템만 필요하다는것 입니다
만약 리스트가 없다면 그냥 null이 됩니다
ㅤ
그러니 여기 firstOrNull은 Null이 될수도 있으니
물음표를 추가해야 합니다
그리고 formattedAddress도 원합니다
만약 아무것도 없다면
여기 Elvis Operator을 써서 “주소 없음”이라고 합니다
이 string adress는 viewModel의 address를 가져올것이고 그 주소는
인터넷에서
geocodingResult에서 오는것입니다
그러면 그것을 얻게됩니다
그러니 이것을 쇼핑리스트앱에 패스하는 것입니다
보시면 지금 회색처리가 되어있고 아직 주소를 가지고 오지 않는다는것 입니다
처음에
어플리케이션을 시작하면
주소의 텍스트가 비어있을것입니다
이 Elvis 앱 연산자를 사용했기 때문에 문제될만한 일을 많이 줄였습니다
아직 주소를 선택하지 않았거나 우리가 패스하는 address는 주소가 없는것 이라는 것 입니다
Dialog 열때 이제 우리가 보지 못했던 재밌는 부분이 나오는데
ㅤ
Dialog
Nav host 안의 전체화면을 차지하는 Composable만 사용하는것이 아니라 dialog도
사용가능합니다
Dialog를 import하고 이것은 팝업이 될것입니다
이 팝업은 locationscreen이라고 부르겠습니다
이것이 NavBackStackEntry를 줍니다
NavBackStackEntry
여기서 제가 하는것은 받은거에 대한 이름을 정하는것입니다
이것을 Backstack이라 부르겠습니다
그리고 여기 제가 만든 뷰 모델 viewModel.
Location.value를 씁니다
그리고 let을 사용하여 언패킹합니다
그러면 locationData가 나옵니다
It 은 LocationData가 됩니다
이것을
It1 이라고 부르겠습니다
좋아요
이렇게
It1이라고 부르는 이 locationData가 이제 저의 locationSelectionScreen에 위치로
사용 가능해집니다
Location은 it1이고
그리고 제가 선택했을때 실행하고픈 코드는
이 onLocationSelected 버튼을 클릭했을때
기억하신다면 이는 버튼을 클릭했을때 트리거 된 이벤트였습니다
버튼을 클릭하면 locationSelected를 실행할것이고 새로운 주소를
패스하는것입니다
좋아요
이제 이것은
여기에 viewModel.fetchAddress를
사용하여 위치를 패스하고 싶습니다
위도경도를 사용할것이고 {it.latitude}와 {it.longitude}를 이렇게
씁니다
이 it들이 이제
뭐가 될까요
위치 데이터인 이 it은
It1과 같지 않습니다
이것은 it1 이라고 했고
여기 이것이 그냥 it이 됩니다
여기 it 은 locationData라고 불러도 됩니다
이렇게
LocationData라고 할 수도 있습니다
그리고 이것도 locationData.latitude 그리고 locationData.longitude라고 할 수 있습니다
이런식으로 보여드리겠습니다
이제 여기에 navControllerㅇmf 사용해서 popBackStack 을 하겠습니다
잠시만요
봅시다
네
이것은
연결된 navHost에 포커스가 있을때 사용자가 뒤로가기 버튼을 누를때와
유하하게 컨트롤러의 백스택을 지우려고 시도합니다
이제 이 시점에서는 ShoppingList대신 Navigation을 사용할 수 있습니다
OnCreate 메소드가 하는 유일한 일은 컴포저블 Navigation을 불러오는 일 입니다
이제 실행하기 전에 마지막으로 추가할것이 하나 있는데 바로 Permission 입니다
여기 uses-permission
여기 fine location을 추가해야 하고
이렇게
그리고 또 coarse location을
추가해야하고
그리고 internet도 추가해야 합니다
왜냐하면 우리가 Json 파일을 가져와서 좀더 쉬운언어로 변환하는것이 인터넷에서 데이터를 로딩하는것이기
때문입니다
이제 실행 해서
오류가 생기나 보겠습니다 오류는 잘 생길수 있습니다
우리 앱을 테스트해보지 않은지 좀 됐습니다
여기 “아이템 추가“를 누릅니다
주소를 누르고
요청 팝업이 열립니다
저는 앱을 사용하는동안 권한이 있다고 하겠습니다
이제 “주소”를 클릭하면 구글지도가 열리고 제가 있는곳의 주소가 표시됩니다
확대해보겠습니다
확대하려면 ctrl키를 누르셔야 합니다
맥 컴퓨터는 cmd 키 일것입니다
누르면서 확대할 수 있습니다
여기서 다른 위치를 선택해보겠습니다
더 자세히 볼 수 있게 확대를 더 해보겠습니다
여기는 Colony 길 이네요
이걸 클릭하면 Colony길을 위도와 경도로
표시합니다
위치를 정하겠습니다
우리가 추가한 버튼을 누릅니다
그렇게 정하고
뭔가 잘못됐을까요
다시 해보겠습니다
다시 위치를 설정합니다
Charle 길
Compass.
Alter Ave에 설정합니다
지금 테스트하면서 보니 이 구글 지도 팝업창에서 주소를 선택하는것이
잘 되지 않는것을 확인했습니다
ShoppingList 파일 안에서 뭔가 놓친것이 있습니다
여기 ShoppingListItem 안에 있는 ShoppingListEditor이 있고
여기 ShoppingItemEditor에
여기 it.name과 it.quantity가 있는곳에
It.address가 address가 되도록 설정하겠습니다
따라서 이 address는 우리가 ShoppingListapp에서 사용한
그 주소가 될것입니다
다시 실행 해보겠습니다
이제
아이템을 추가하고
주소를 선택합니다
여기 ‘주소‘ 를 선택하면
이 팝업이 나타나기까지 시간이 좀 걸립니다
그러니 작은 표기같은것을 두어야 할수도 있겠습니다
하지만 지금은 괜찮습니다
여기있는 길을 선택하겠습니다
길 이름은
Alter Avenue 길이라고
써있는것 같습니다
좋아요
위치 선택
이 아이템에 이름을 줍니다
예를들어
Pixel fold
라고 합니다
이 한가지 아이템을 추가하고
아직 주소가 로딩되지 않습니다
여기 이름이 있고
수량이 있고
UI도 괜찮습니다
여기 조그만 핀 아이콘이 있지만 아직 텍스트가 로딩되지 않습니다
빠르게 확인해보겠습니다
이것도 ShoppingList 안에 있을것인데
여기 showDialog, AlertDialog
여기 itemQuantity는 itemName안에 있고..
여기에도 address를 패스해야 합니다
, address 는 address가 됩니다
제 생각엔 이게 다 인것 같습니다
‘아이템 추가’를 다시 눌러봅니다
주소를 누르고
지도 로딩은 몇초가 걸립니다
위치는 어딘지 모르겠지만 아무곳이나 설정하겠습니다 이름은 pixel fold로 하고
수량을 1로 하고
추가를 하면
됐습니다
이제야 주소가 표시 됩니다
여기에 pixel fold, 한개를 이 주소에서 라는 정보가 있습니다
아이템을 또 추가해 보겠습니다
주소를 추가하고
좋아요
확대해서 Mountain View
여기가 어딘지는 잘 모르겠습니다
가본적도 없고 갈일도 없겠지만 Latham 길로 하겠습니다
이것으로 위치를 설정하고
여기서는 신발을 산다고 하면 여기 Latham길 이 표시됩니다
좋아요
다 됐습니다
많은것들이 합쳐졌습니다
우리가 모든것을 다 합친것입니다
이제 위치도 보이고
아이템도 보이고
주소같은 것들이 다 보여집니다
좋아요
이번영상은 끝입니다
요약편에서 뵙겠습니다