이 꽃은 국화꽃이 형상화된 것 같습니다. 어느 날 퇴근 후에 노트북을 열었더니, 보였습니다.
이미지만 으로도 슬픔과 또 다른 어떤 느낌이 와닿았습니다.
어느 토요일 카카오의 데이터 센터 화재로 인해 몇일이 어떻게 지났는지 모르게 지났습니다
현장에서 대응하시는 분들의 속이 타 들어 가는 것을 다 알지는 못하지만, 나름 같은 IT업으로 먹고살고 있는 지라, 혹시 우리 센터에서도 저런 일이 벌어지면 대응이 잘 될까 하는 생각이 드는 일이기에, 연일 뉴스에 나오는 것처럼 말을 할 수는 없었습니다.
아무튼 오늘도 수고 하였으니, 편안한 밤이 되시길 바라며...
https://github.com/afollestad/material-dialogs
GitHub - afollestad/material-dialogs: 😍 A beautiful, fluid, and extensible dialogs API for Kotlin & Android.
😍 A beautiful, fluid, and extensible dialogs API for Kotlin & Android. - GitHub - afollestad/material-dialogs: 😍 A beautiful, fluid, and extensible dialogs API for Kotlin & Android.
github.com
오늘은 앱을 구현하는 동안 간혹 사용하여야 하는 dialog box 구현에 대한 이야기를 해 보겠습니다. 위 링크에서 가져온 자료를 참고하여 구현하는 이야기를 해 볼 예정입니다.
먼저 gradle 설정을 해 보겠습니다. 먼저 봐야할 부분은 위 github의 게시글에서 보는 것처럼 dialog box의 여러 가지 형태 중에 어떤 것을 구현할 것인가를 정해야 할 것 같습니다.
이런 모양의 일반적인 dialog box의 구현 부터 보겠습니다.
// 다이얼로그
implementation 'com.afollestad.material-dialogs:core:3.3.0'
implementation 'com.afollestad.material-dialogs:lifecycle:3.3.0'gradle 파일의 설정은 이 2줄만 가져 오면 됩니다.
다음은 버튼을 표시하는 MainActivity 의 함수 하나를 보겠습니다.
override fun onBackPressed() {
MaterialDialog(this@MainActivity).show {
icon(R.drawable.ic_bespeak_foreground)
title(R.string.titleFinish)
message(R.string.mesgFinish)
positiveButton(R.string.OK) { doFinish() }
negativeButton(R.string.Cancel) { this.dismiss() }
}
}MaterialDialog를 구현한 것인데요. icon 은 말 그대로 알림 창에 icon 이 나옵니다 title 은 제목을 쓸 내용을 정리하면 되고요 message 에는 알림 표시용 글을 표시하면 되고, positiveButton 에는 확인 버튼을 구현하기 위한 메시지 내용과 버튼 클릭 시 동작할 action을 구현합니다. negativeButton 에는 취소 버튼을 구현하기 위한 메시지 내용과 action을 구현합니다.
이번에는 입력이 있는 dialog 을 구현해 보겠습니다. 먼저 gradle 설정에 추가 하여야 합니다.
// 입력 받는 다이얼로그
implementation 'com.afollestad.material-dialogs:input:3.3.0'
implementation 'com.google.android.material:material:1.6.1'저 2줄중에 위에 꺼는 원작자 링크에서 도 찾을 수 있었지만, 아래 줄은 없었습니다. 저 한 줄 때문에 에러가 나와서 찾는 데 애를 쫌 먹었습니다. 아무튼... 그리고 이번에는 style도 잘 정리가 되어야 하는 데, 결론적으로는 아래와 같이 theme.xml 파일을 정리했습니다. 원인은 Theme.AppCompat 이 아닐 경우 위에서 implementation 된 material layout이 동작하지 않는 것으로 보입니다.
그래서 꼭 theme 도 정리를 하고 시작 하시길 바랄게요.
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
<style name="Theme.bespeak1003" parent="Theme.AppCompat.DayNight">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/softBlue</item>
<!-- Customize your theme here. -->
<item name="colorAccent">@color/softBlue_30</item>
<item name="android:textColor">@color/softBlue</item>
<item name="android:fontFamily">@font/poorstory_regular</item>
<item name="android:textSize">20sp</item>
<item name="android:windowBackground">@color/softYellow</item>
<item name="android:colorBackground">@color/softGreen</item>
<item name="android:background">@color/rime200</item>
<item name="background">@color/softBlue</item>
</style>
</resources>
입력 줄이 있는 dialog는 아래처럼 구현을 하였는 데, 일단 간결하기는 합니다. 다만, layout 이용해서 하기 때문에 위에서 처럼 theme 설정을 해야 하고, 입력받는 항목이 1개만 지원이 되고 있어서 코드 구현을 다채롭게 할 수는 없었습니다.
private fun doLoginAuth() {
val typeEmail = InputType.TYPE_TEXT_VARIATION_EMAIL_ADDRESS
val typePassword = InputType.TYPE_TEXT_VARIATION_PASSWORD
var userEmail = ""
var userPassword = ""
MaterialDialog(this@MainActivity).show {
icon(R.mipmap.ic_bespeak)
title(R.string.titleLogin)
message(R.string.msgEnterEmail)
input(inputType = typeEmail) { diaglog, text ->
userEmail = text.toString()
}
positiveButton(R.string.OK) {
toAction()
}
negativeButton(R.string.Cancel) {
it.dismiss()
}
}
}입력을 한 개만 받는 부분은 개선(?) 요구를 해 볼까 하는 생각입니다.
배색을 잘하지 못해서 구분이 좀 어렵기는 하지만 위 그림처럼 파란 줄에 입력을 하나 받습니다. 그 입력받는 내용을 위 구현에서 보면 input { dialog , text -> }처럼 구현해서 text로 그 값을 받아 와서 사용할 수 있습니다.
이렇게 dialog 구현을 해 보았습니다. 더 쉬운 방법을 알게 되면 다시 구현해 보겠습니다.
오늘은 앱을 구현하는 과정에서 숫자를 입력받을 수 있는 TextField을 구현해 보도록 하겠습니다. 물론 이 부분도 힌트를 얻기 위해서 구글링을 했으며, 필요한 부분만 수정을 해 보았습니다.
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.OutlinedTextField
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.unit.sp
import com.billcoreatech.bespeak1003.R
import com.billcoreatech.bespeak1003.ui.theme.softBlue
@Composable
fun NumberField(
labelText : Int,
holderText : Int,
value: Number?,
onNumberChange: (Number) -> Unit,
) {
var fontFamily = FontFamily(Font(R.font.poorstory_regular, FontWeight.Normal))
OutlinedTextField(
modifier = Modifier.fillMaxWidth(),
label = {
Text ( text = stringResource(id = labelText), style = TextStyle(
fontWeight = FontWeight.Bold, color = softBlue, fontSize = 24.sp,
fontFamily = fontFamily
))
},
placeholder = {
Text( text = stringResource(id = holderText))
},
value = value?.toString() ?: "",
onValueChange = {
it.toDoubleOrNull()?.let { value ->
if (value % 1.0 == 0.0) {
onNumberChange(value.toInt())
} else {
onNumberChange(value)
}
}
},
singleLine = true,
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)
)
}TextField 는 일반적으로 String type으로 입력받고 결과도 String type으로 처리되는 것처럼 보입니다. 그래서 내부적으로 코드를 구현하여 integer, double type 등으로 형 변환을 처리하는 방식으로 처리를 하였습니다.
결과적으로는 숫자를 입력 받는 기본적은 입력창이 생기게 됩니다. 실행된 예시는 다음과 같은 화면 구성이 됩니다.
구글링을 통해서 찾은 코드를 이용해서 일부만 수정을 해 보았더니, 개선이 필요해 보이는 부분이 있는데,
먼저는 숫자를 입력 받을 때는 오른쪽 정렬이 필요해 보이는 현상이 있습니다. 그리고 다음은 3자리마다 콤마를 표현하는 부분이 있으면 좋을 것 같다는 생각이 듭니다.
기회가 되면 기능 구현을 해 볼 까 합니다.
이 글은 이전 포스팅에서 연속됩니다.
https://billcorea.tistory.com/238
안드로이드 앱 만들기 : navigation 을 편리하게 ? (두번째 이야기)
https://flatteredwithflutter.com/using-compose-destinations%ef%bf%bc/ Using compose destinations We will cover briefly: Current navigation in composeUsing compose destinations(Optional) Modify exi..
billcorea.tistory.com
이전 글에서 작성했던 navigation 은 그저 화면의 이동에 중점을 두었습니다. 그러다 보니, 화면 하단에 메뉴를 달고 그 메뉴는 항상 표시가 되어야 했지만, 그렇지 못했습니다 그래서 이번에는 꼭 하단 메뉴는 그대로 두고 content 내용만 변경되는 모양으로 만들어 보기로 했습니다.
다시 원작자가 작성한 코드를 살펴보면서 따라 하기를 해 보았습니다. 먼저 참조할 소스 코드의 github 링크는 아래와 같습니다.
https://github.com/raamcosta/compose-destinations
GitHub - raamcosta/compose-destinations: Annotation processing library for type-safe Jetpack Compose navigation with no boilerpl
Annotation processing library for type-safe Jetpack Compose navigation with no boilerplate. - GitHub - raamcosta/compose-destinations: Annotation processing library for type-safe Jetpack Compose na...
github.com
여기에서 참조되는 코드를 이용해서 내가 작성할 코드를 작성해 보았습니다.
이 코드는 화면 하단에 보여줄 bottom menu 항목을 정하고, 그것들을 보여주는 작성을 합니다.
사용할 단위 화면을 먼저 작성해 두고 이전 포스팅에서 설명한 바와 같이./gradlew clean build 명령어를 이용하여 기본 컴파일은 진행되어야 합니다.
아래 코드에서 BottombarItem으로 선언된 Home, ProductItem, Setting 등이 그 예시입니다.
import androidx.annotation.StringRes
import androidx.compose.material.BottomNavigation
import androidx.compose.material.BottomNavigationItem
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp
import androidx.navigation.NavHostController
import androidx.navigation.compose.currentBackStackEntryAsState
import com.billcoreatech.bespeak1003.R
import com.billcoreatech.bespeak1003.ui.theme.fonts
import com.billcoreatech.bespeak1003.ui.theme.softBlue
import com.billcoreatech.bespeak1003.widget.NavGraphs
import com.billcoreatech.bespeak1003.widget.destinations.DirectionDestination
import com.billcoreatech.bespeak1003.widget.destinations.HomeScreenDestination
import com.billcoreatech.bespeak1003.widget.destinations.ManagerScreenDestination
import com.billcoreatech.bespeak1003.widget.destinations.ProductItemScreenDestination
import com.ramcosta.composedestinations.navigation.navigate
import com.ramcosta.composedestinations.navigation.popBackStack
import com.ramcosta.composedestinations.navigation.popUpTo
import com.ramcosta.composedestinations.utils.isRouteOnBackStack
@Composable
fun BottomBar(
navController: NavHostController
) {
BottomNavigation {
BottomBarItem.values().forEach { destination ->
val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = navBackStackEntry?.destination?.route
BottomNavigationItem(
alwaysShowLabel = true,
selected = currentRoute == destination.direction.route ,
onClick = {
navController.navigate(destination.direction) {
popUpTo(NavGraphs.root) {
saveState = true
}
launchSingleTop = true
restoreState = true
}
},
icon = {
Icon(
destination.icon,
contentDescription = stringResource(destination.label)
)
},
label = { Text(
text = stringResource(destination.label),
style = TextStyle(
fontFamily = fonts,
color = Color.White,
fontSize = 18.sp,
fontWeight = FontWeight.Normal
)) },
)
}
}
}
enum class BottomBarItem(
val direction: DirectionDestination,
val icon: ImageVector,
@StringRes val label: Int
) {
Home(HomeScreenDestination, Icons.Outlined.Home, R.string.Home),
ProductItem(ProductItemScreenDestination, Icons.Outlined.ShoppingCart, R.string.productItems),
Setting(ManagerScreenDestination, Icons.Outlined.Settings, R.string.Setting)
}코드를 가져오면서 잠깐의 혼돈은 onClick에 구현된 코드 작성에서 있었습니다. import 처리가 잘 되지 않아서 코드를 직접 입력하면서 해소를 하였습니다.
이 부분은 MainActivity에서 호출한 Scaffold을 변형한 코드입니다. 원작자의 코드에서는 topbar 도 있었지만, 이번에는 사용을 하지 않을 것이기 때문에 제거하고 필요한 부분만 가져왔습니다.
import android.util.Log
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Scaffold
import androidx.compose.runtime.Composable
import androidx.compose.ui.unit.dp
import androidx.navigation.NavBackStackEntry
import androidx.navigation.NavHostController
import androidx.navigation.plusAssign
import com.billcoreatech.bespeak1003.widget.appCurrentDestinationAsState
import com.billcoreatech.bespeak1003.widget.destinations.Destination
import com.billcoreatech.bespeak1003.widget.startAppDestination
import com.google.accompanist.navigation.material.ExperimentalMaterialNavigationApi
import com.google.accompanist.navigation.material.ModalBottomSheetLayout
import com.google.accompanist.navigation.material.rememberBottomSheetNavigator
import com.ramcosta.composedestinations.spec.Route
@OptIn(ExperimentalMaterialNavigationApi::class)
@Composable
fun BespeakScaffold(
startRoute: Route,
navController: NavHostController,
bottomBar: @Composable (Destination) -> Unit,
content: @Composable (PaddingValues) -> Unit,
) {
val destination = navController.appCurrentDestinationAsState().value
?: startRoute.startAppDestination
// 👇 디버깅을 위해서만 주석에 의해 제한되기 때문에 backQueue API를 사용해서는 안됩니다.
navController.backQueue.print()
val bottomSheetNavigator = rememberBottomSheetNavigator()
navController.navigatorProvider += bottomSheetNavigator
// 👇 ModalBottomSheetLayout은 일부 대상이 하단 시트 스타일인 경우에만 필요합니다.
ModalBottomSheetLayout(
bottomSheetNavigator = bottomSheetNavigator,
sheetShape = RoundedCornerShape(16.dp)
) {
Scaffold(
bottomBar = { bottomBar(destination) },
content = content
)
}
}
private fun ArrayDeque<NavBackStackEntry>.print(prefix: String = "stack") {
val stack = map { it.destination.route }.toTypedArray().contentToString()
Log.e("ArrayDeque","$prefix = $stack")
}
MainActivity는 setContent 부분만 기술했습니다. 다른 부분들은 이번 포스팅과 연관이 없기 때문에요. 위에서 작성한 BespeakScaffold을 호출하고, DestinationNavHost 코드만 기술하는 것으로 해서 코드 작업은 마무리되었습니다.
setContent {
val engine = rememberAnimatedNavHostEngine()
val navController = engine.rememberNavController()
val startRoute = NavGraphs.root.startRoute
Bespeak1003Theme(darkTheme = isSystemInDarkTheme()) {
BespeakScaffold(
navController = navController,
startRoute = startRoute,
bottomBar = {
BottomBar(navController)
}
) {
DestinationsNavHost(
engine = engine,
navController = navController,
navGraph = NavGraphs.root,
modifier = Modifier.padding(it),
startRoute = startRoute
)
}
}
}
다음에 비슷한 구현을 하게 되더라도 이런 정도의 코드 작업을 선행해 두면 bottom navigation의 구현은 어렵지 않게 구현이 될 것으로 생각이 됩니다.
다음에 수정된 내용이 있으면 수정하도록 하겠습니다.
전체코드는 다음에서 참고하세요.
https://github.com/nari4169/bottom-navigation-sample
GitHub - nari4169/bottom-navigation-sample: first
first. Contribute to nari4169/bottom-navigation-sample development by creating an account on GitHub.
github.com
오늘은 영문 번역에 대한 이야기를 잠깐 해 볼까 합니다. 아직 테스트가 원활하지는 않지만, kakao에서 지원했던 번역 API는 2022.07.01 사용이 중지되어 기존 허용되었던 api 사용자에게는 2023.06.30까지만 지원한다고 합니다.
아무튼 현재 무료로 사용할 수 있는 번역 API는 구글, naver, kakao 등이 있습니다.
kakao가 지원하는 다음 버전의 번역API는 cloud에 포함되면서 개인이 사용하기에는 조금 더 장벽(?)이 있는 것처럼 보입니다. 좀 더 알아보아야겠지만요.
아무튼 코드는 다음과 같이 구현을 해 보았습니다.
# POST /v2/translation/translate HTTP/1.1
# Host: dapi.kakao.com
# Authorization: KakaoAK {REST_API_KEY}
# Content-type: application/x-www-form-urlencoded
# curl "https://openapi.naver.com/v1/papago/n2mt" \
# -H "Content-Type: application/x-www-form-urlencoded; charset=UTF-8" \
# -H "X-Naver-Client-Id: ..............." \
# -H "X-Naver-Client-Secret: ..........." \
# -d "source=ko&target=en&text=만나서 반갑습니다." -v
import os
import requests
import docx2txt
import urllib.request
import json
baseURL = 'https://dapi.kakao.com/v2/translation/translate'
naverURL = 'https://openapi.naver.com/v1/papago/n2mt'
apiKey = '....................' # 카카오 API 을 위한 키값
# '.................'
trLng = 'kr'
basePath = 'D:/'
def translateNaver(pStr):
client_id = "............" # 개발자센터에서 발급받은 Client ID 값
client_secret = "........" # 개발자센터에서 발급받은 Client Secret 값
encText = urllib.parse.quote(pStr)
data = "source=en&target=ko&text=" + encText
url = naverURL
request = urllib.request.Request(url)
request.add_header("X-Naver-Client-Id", client_id)
request.add_header("X-Naver-Client-Secret", client_secret)
response = urllib.request.urlopen(request, data=data.encode("utf-8"))
rescode = response.getcode()
if (rescode == 200):
response_body = response.read()
jsonStr = json.loads(response_body.decode('utf-8'))
return jsonStr['message']['result']['translatedText']
else:
print("Error Code:" + rescode)
return rescode
def translateKakao(pStr):
headers = {'Content-type': 'application/x-www-form-urlencoded', 'Authorization': 'KakaoAK ' + apiKey}
parameter = {'query': pStr, 'src_lang': 'en', 'target_lang': trLng}
requests.packages.urllib3.disable_warnings(requests.packages.urllib3.exceptions.InsecureRequestWarning)
req = requests.post(baseURL, data=parameter, headers=headers)
json_str = ''
if req.status_code == 200:
json_str = req.json()['translated_text']
json_str = str(json_str[0]).replace('[', '')
json_str = json_str.replace(']', '')
json_str = json_str.replace("'", "", 2)
else:
json_str = req.json()['message']
return json_str
def docx_to_txt(path, filename):
text = docx2txt.process(path + filename).split('\n')
# docx 파일의 내용이 text에 담기는데 '\n' 줄바꿈 문자 기준으로 나뉘어 리스트로 만들어 진다.
newfile = os.path.splitext(filename)[0] + '.txt'
f = open(os.path.join(path, newfile), 'w', encoding='UTF-8') # txt 파일 오픈(없으면 생성됨)
for item in text: # text에 담긴 [[Example01], [Hello], [Hi] ...]의 요소 하나가 txt파일에 한줄로 써지게 됨.
f.write(item + '\n')
f.close()
return newfile # {file}.txt가 리턴됨
newFile = docx_to_txt(basePath, '내문서파일.docx')
print(newFile)
f = open(os.path.join(basePath, newFile), 'r', encoding='UTF-8')
fw = open(os.path.join(basePath, 'outFile.txt'), 'w', encoding='UTF-8')
for line in f:
if len(line.strip()) < 1:
pass
else:
print("[" + line.strip() + "]" + str(len(line.strip())))
if len(line.strip()) != 0:
transStr = translateKakao(line.strip())
print(transStr)
fw.write(transStr)
break
fw.close()
f.close()
print('Job END...')
이상의 코드는 docx 문서 파일에 영문 원본이 있다고 하는 경우 그 내용을 일단 text 파일로 변환을 하고 해당 text 파일에서 본문 내용을 읽어서 번역 API을 호출해 보는 방식입니다.
kakao을 호출하는 부분과 naver 을 호출 하는 부분을 따로 함수를 만들어 보았는데, 물론 구글링을 해서 얻은 소스들입니다. 일정 부분 테스트를 거치면서 수정이 되기는 했지만요.
또 하나는 kakao는 번역을 지원하는 쿼터가 1일 50000자, 네이버는 10000자의 제한이 있습니다. 그 이상이 되면 번역을 해 주지 않습니다. ㅠㅠ;;
구글도 번역 api가 있는 기 한데, 설정에 대한 이해가 아직이라 알게 되면 정리를 다시 해 보겠습니다.
앱에서 사용되는 결제 모듈 (PG 연동)의 경우는 대부분이 내 상점에서 결제를 요청하는 방식에 포커스가 맞게 되어 있어, 이를 이용하는 것은 맞지 않는 것 같습니다.
다만, 그래도 알아보았던 내용은
토스페이먼츠
결제를 간편하게, 사업은 더 편하게
www.tosspayments.com
대강 살펴본 바로는 java script 중심의 지원을 하는 것으로 보입니다. 사용을 해 보면 좋을 것 같기는 합니다. 다만, 서버가 없는 상태에서 사용을 구현해 보기에는 아직 그 정도의 스킬은 없어서...
무료 결제 연동 API 서비스
개발자를 위한 PG 연동 서비스로, 빠른 결제 연동, 더 높은 결제성공율, 무료 통계 서비스를 제공합니다.
www.bootpay.co.kr
이 또한 연동을 위한 API 지원이나, 여러 가지 자료가 있고, 구글링을 했을 때 추천하는 글을 많이 보았습니다. 실제 구현을 해 보기에는 어떤지 아직 감이 오지 않습니다. 다른 여러 PG사와 연동을 지원하는 것이 매력일 듯 해 보이나, 실제 비용이 청구되는 시점에 어떤 생각이 들지는 체험을 해 보지 못해 알 수 없습니다.
다른 결제 수단들의 연동이 Bootpay 을 경유(?) 모양이 로만 구글링의 결과가 보이기 때문에 일단...
여기서 자료 조사는 그만해야 할 것 같습니다.
https://payapp.kr/homepage/index.html
페이앱 공식 홈페이지
페이앱 본사, 블로그마켓 카드결제, 수기결제, 블로그결제, SMS결제, 블로그페이, 본사 고객센터 1800-3772
www.payapp.kr
연동하는 방식에 qrcode 을 통한 결제를 지원이 되는 것을 확인 했어요.
이번에 구현하고자 하는 앱의 결제 모듈 연동은 제외 대상이 되었습니다. 그래야 목표했던 앱의 구현에 쉽게 도달할 수 있을 것으로 생각이 되기 때문입니다.
To be continued
이제 또 새로운 앱을 하나 만들어 볼까 합니다. 제목은 가칭 '주문이요'라고 했습니다.
요즘은 매장에 가면 다들 테이블에 테블릿 하나쯤 거치하고 주문을 받고 실시간으로 결제도 진행하고 그렇게 매장을 운영하는 경우를 종종 보게 됩니다. 그것이 좋은 지 어떤지는 모르겠지만... 그런 매장을 하나 가져보고 싶은 욕망(?)이 생기는 건... 이제 떠나야 할 곳이 어디인지 보이기 때문 이기도 합니다.
이것은 맞는 가 하는 문제는 나중에 생각해 보려 합니다. 지금은 무언가를 해야할 것 같은 시기이기도 하고 해서...
아직은 아무런 준비도 없고 그저 앱을 하나 기획하고 기본 화면만 하나 만들어서 무작정 게시를 시작합니다.
다들 아시는 것처럼 playstore console 에서 새로 앱 만들기를 하고 게시할 준비를 시작합니다.
이걸 하기 전에 준비해야 할 것들은
로그 이미지 (앱 아이콘은 투명한 PNG 또는 JPEG, 최대 1MB, 512px X 512px이어야 하며 디자인 사양 및 메타데이터 정책을 준수해야 합니다.),
기본 아미지 (그래픽 이미지는 PNG 또는 JPEG, 최대 1MB, 1024px X 500px이어야 합니다.),
동영상 링크 (보통은 youtube 링크를 입력합니다.)
그리고 여러 장의 앱 이미지 (휴대전화 스크린숏을 2~8장 업로드하세요. 스크린숏은 PNG 또는 JPEG, 장당 최대 8MB, 가로세로 비율 16:9 또는 9:16, 가로세로 길이는 320px X 3840px 사이여야 합니다.) 등을 준비하여야 합니다.
다음은 앱 콘텐츠에서 나오는 각 항목을 설정해 두어야 합니다. 그다음은 앱을 빌드해서 내부 테스트부터 하건, 바로 프로덕션으로 하건 앱을 업로드하고 게시 허가가 나오길 기다려 봅니다.
무엇을 준비해야 할까요?
시작해 봅니다.
https://play.google.com/store/apps/details?id=com.billcoreatech.bespeak1003
주문이요, Bespeak - Google Play 앱
매장안에 있는 테이블에서 주문을 실시간으로 받고 주방으로 전달해 앱 입니다.
play.google.com
오늘 (2022.10.04) 구글링을 해서 PG연동에 대한 조사를 해 보았으나, 이 글의 내용과 맞는 결제 처리 방식은 찾을 수 없었습니다. 해서 ... 앱의 구현에서 결제 모듈 연동은 제외 하고 진행 해 볼까 합니다.
이 글은 앱 사용자를 위한 설명입니다. (2022.10.03 13시 이후에 적용된 패치 버전 기준 입니다.)
https://play.google.com/store/apps/details?id=com.billcoreatech.ontheway801
주변검색, 주변찾기, 가는길에, 요소수 주유소 - Google Play 앱
내주변의 장소를 선택하고, 선택한 위치에 도착하면 사전에 등록한 알림을 보내 줍니다.
play.google.com
집에 가는 길에 들려야 하는 곳이 있다면 근처에 도착했을 때 알림을 주고자 했습니다. 그 이후에 요소수 품귀가 있었던 때에는 데이터 포털(www.data.go.kr)에서 제공하는 요소수 재고가 있는 주요소 정보를 제공하고자 했습니다.
이 버전은 이전 버전에서 화면 구성을 새로게 수정합니다. 메뉴의 구현도 달라집니다.
설정에서 등록하는 지역에 따라 요소수 주요소 정보를 제공합니다. (이 정보는 opinet - 유가정보 api를 활용합니다.)
지도 화면에는 주변에 있는 주유소 위치 정보와 최근 우리 지역의 평균 유가정보를 표시합니다. (이것도 opinet에서 제공된 api을 활용합니다.)
다른 사람과 공유할 별칭을 나의 위치정보를 주기적으로 전달하도록 설정할 때 상대방 화면에 표시될 나의 별칭입니다.
위치인식범위는 앱이 실행되는 스마트폰의 위치를 사전에 선택한 위치에서 얼마나 떨어진 상태까지 인식하게 할 것인가를 설정합니다.
나의 위치에서 얼마나 떨어진 곳에 있는 곳을 검색하도록 할 것인가를 설정 합니다. 키워드 검색이나, 카테고리 검색을 할 때 찾을 수 있는 범위를 지정하는 것입니다.
한번 지정된 위치는 몇 시간 범위 내에서 진입/이탈하였을 때 알림을 보여줄 것인지 지정하는 것입니다.
위치정보를 수신하기 위해서 위치정보를 보내줄 상대방에게 알림 정보를 보내는 것입니다. 예) 부모가 아이에게 알림 정보를 보내야 합니다.
위치 설정에서 등록한 우리 집/회사/학교/학원 등의 위치 점검을 반복해서 할 것인 지를 선택 하면 됩니다.
요소수 주유소 정보를 보여줄 기본 위치 정보를 선택할 수 있도록 하였습니다.
기본적으로 보일 주유소 정보를 표시하기 위해서 주 사용 연료를 선택하도록 하였습니다.
내 위치를 보내줄 상대방의 정보를 표시합니다 위에서 토큰 정보를 보내주면 받은 상대방의 폰에 표시되는 내용이 됩니다.
이번에는 화면 구성을 단순하게 변경하였습니다
이 그림과 같이 화면이 표시됩니다.
제목 아래 부분에는 선택한 위치 정보가 있을 선택한 위치 정보와 함께 등록된 시간이 표시 됩니다.
키위드를 이용하여 주변을 검색합니다.
카테고리를 선택하여 주변을 검색합니다. (예: 약국, 대형병원, 슈퍼마켓, 편의점....)
우리 집/ 회사 / 학교 / 학원 / 기타 등의 위치를 지도를 보면서 고정할 수 있습니다.
설정에서 선택한 지역의 요소수 주유소 정보를 보여 줍니다.
설정의 앞에서 설명이 되었습니다.
키워드를 이용한 검색은 다음과 같이 적용됩니다.
화면 상단에는 지도가 보이고 아래 부분에는 검색할 수 있는 창이 있습니다. 검색 버튼을 이용해서 검색을 하게 되면, 지도 위에 해당 위치가 표시 됩니다.
지도위에 마커를 클릭하면 하단에 리스트는 해당 위치 정보가 보이도록 이용됩니다.
위치가 정해지면 명칭 하단에 있는 위치 알림 또는 알림 해제 기능을 사용할 수 있습니다.
화면 아래 부분이던 리스트 상단바를 위로 끌어올리면 화면 전체가 리스트만 나오는 화면으로 변경됩니다.
이때는 조회된 위치 목록을 스크롤해서 찾아볼 수 있습니다.
카테고리 검색은 화면 중간에 있는 선택 콤보를 이용해서 내 주변을 검색할 카테고리를 지정할 수 있습니다.
선택하고 검색을 하게 되면 키워드 검색과 같이 지도상에 위치 정보를 표시합니다.
목록이 표시된 이후에는 키워드 검색과 동일하게 실행됩니다.
위치 설정은 현재 5곳의 위치를 지정합니다. (우리 집, 학교, 회사, 학원, 그 외) 지정된 곳은 설정에서 선택하기에 따라 주기적으로 위치 기억이 자동으로 설정됩니다.
일회성으로 선택되는 위치와 다르게 매번 반복적(기억 활성화 시간 주기로 반복)으로 위치 기억을 설정하게 할 수 있습니다.
또한 선택된 위치에 진입하거나, 이탈하게 되는 경우 설정에 나와 있는 내 위치 수신 목록의 상대방에게 알림 메시지를 전달하게 됩니다.
설정에서 선택한 지역에 있는 요소수 보유 주유소 위치를 한 번에 확인할 수 있으며, 지도에서는 빨간색 주유소 표시로 확인할 수 있습니다.
해당 마커를 클릭하면 아래 리스트가 해당 주유소 이름으로 전환되어 표시됩니다.
해당 정보는 오피넷으로부터 API을 통해서 수신하고 있습니다. 정보 중에 보고 일시 가 오래된 것의 경우도 오피넷에서 제공하는 정보이므로 보고 일시가 오래된 경우는 아무래도 방문하지 않는 것이 좋을 것 같습니다.
기준 가격은 리터 단위 가격입니다. 방문 시 참고하세요.
이것으로 앱에 대한 기능 설명을 마무리하겠습니다.
인앱결제 코드 이전 이야기 이전 버전에서는 java 코드로 구현된 소스 코드를 공유해 보았습니다. https://billcorea.tistory.com/165 안드로이드 앱 만들기 : 구글 인앱 결제 쉽게 따라하기 (정기결제, 소스공유) 이전 ...
