반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리


반응형
Posted on . Written by


코로나 SDK 개발자들에게는 크리스마스가 일찍 왔습니다. 지난주 저희 팀들은 daily builds 에 여러 기능을 추가하느라고 하주 바쁜 시가늘 보냈습니다. 여러분들에게 소개해 드릴 새로운 기능들이 아주 많이 있습니다. 아래는 그 중 일부분입니다.


  • Build 987 — Inneractive ads SDK updated to 1.1.5
  • Build 990 — iOS 5/6 native Twitter access via native.showPopup()
  • Build 990 — new native.canShowPopup() API call to test for email, sms and twitter capability
  • Build 991 — Facebook SDK updated to 3.1.1
  • Build 992 — iAds support added
  • Build 993 — (drum roll please)… Android Push Notifications!


몇몇 개발자분들은 이런 새로운 기능들을 deploy 하고 계실 겁니다. 그리고 코로나 SDK의 new Plugin system인  Project Gluon 가 이런 작업들을 빨리 할 수 있도록 도와준 것에 대해 감사를 전합니다.


오늘은 Android Push Notifications에 대해 얘기를 해 보죠. 만약 애플에 push notification 을 deploy 해 보셨다면 아마 그 일은 certificates, keys, sandboxing, provisioning profiles, 3rd-party vendor setup 등등의 복잡한 것들을 처리하느라고 거의 로켓 과학하고 MBA 학위를 따는 것 만큼이나 힘들었을 겁니다. iOS 개발자 계정에 이러한 셋업을 다하고 나면 이제 여러분은 모바일 개발자로서 가장 어려운 부분을 해결한 겁니다.다행히도 여러분이 일단 애플쪽에 이런 setup 을 해 놓으셨다면 코로나의 push notification을 다루는 것은 아주 간단합니다.


이제 안드로이드 쪽을 살펴 보면 셋업 하는데 그렇게 많이 나쁘지는 않습니다. push notification 과 관련해 가장 큰 장애물은 Android OS 가 push notification을 관리하지 않는다는 겁니다. push 하는 것은 애플리케이션이 책임지는 겁니다. Corona Labs 는 이 안드로이드도 애플처럼 in-app implementation 을 만들기 위해 아주 많은 노력을 기울였습니다.


Four Basic Steps


안드로이드에서 push notification 을 얻는 방법은 다음 4 개의 기본 과정을 거칩니다.


  1. Setup for Google
  2. Setup for 3rd-party services (optional)
  3. Respond to registration events from your app
  4. Respond to push notifications as they arrive

1. Setup for Google



STEP 1:  브라우저에서  https://code.google.com/apis/console 로 가세요. 그리고 Services를 클릭하세요. Google Cloud Messaging for Android entry를 찾고 그것을 on 상태로 설정하세요. 아마 "Terms of Services" 에 동의 하셔야 할 겁니다.  거기서 제시하는 대로 다 동의 하세요.



STEP 2:   API Access를 클릭하세요. 그리고 Create new Server key를 클릭하세요. 아마 긴 화면이 나올 겁니다. IP address 쪽은 작성하실 필요가 없습니다. push notification을 send 할 때 사용하셔야 하니까 API Key 를 copy 하세요. (Corona Cloud service에서 했던 대로죠.)

NOTE:  Corona SDK sample app에는 push notification을 send 하는 기능이 있습니다. 여러분도 샘플로 테스트를 하시려면 이 API Key 를 사용하셔도 됩니다.



STEP 3:  API 콘솔의 Overview tab으로 가세요. 그리고 Project Number를 copy 하세요. Project ID는 무시하세요. 여러분의 Project Number는 또한 URL 이기도 합니다. 이 번호는 나중에 push notification 을 받을 때 필요하실 겁니다.



STEP 4: 이 부분은 그렇게 필요한 부분은 아닌데요. 일단 Google Play 개발자 콘솔에 방문하고 여러분이 업로드한 앱을 찾고 메타 데이터를 수정하고 Enable Google Cloud Messaging Stats entry를 찾으실 수 있습니다. 여기서 Project IDSender ID로 추가하세요. 이렇게 하면 여러분 앱의 GCM usage에 대한 stats 를 볼 수 있도록 해 줍니다.


2. Setup for 3rd-Party services (optional)


이 부분에서는 그다지 언급할 부분은 많이 없을 것 같습니다. Corona Cloud Services (Game Minion)에서부터 Urban Airship까지 많은 서비스 중 하나를 이용하실 수도 있고 또는  standard REST API call 을 사용해서 메세지를 보내는 여러분들만의 서비스를 사용하고 싶을 수도 있을 테니까요. 어느 경우에든 API Server Key는 있어야 됩니다.  GCM Server Key같은 걸 요구할 겁니다. 여러분이 제공해야 될 것은 이게 전부 입니다.


3. Respond to registration events from your app


iOS에 대한 push notification에 대한 코로나 Labs의  블로그 글을 올린것이 한 일년 전 쯤의 일입니다. 애플의 push notification을 셋업하는 일이 어려운 일의 대부분이었습니다. 대부분의 step 들이 다 거기에 대한 방법이었죠. step 4,5 번이 코로나와 관련된 부분이었습니다. 이 부분은 안드로이드에 대해서도 똑 같이 적용 됩니다.

push notification을 받기 위해서는 3개의 파일을 수정하셔야 합니다. 첫번째는 config.lua입니다.

아래 부분을 추가해 넣으시면 됩니다.


notification =
{
google =
{
projectNumber = "yourprojectnumberhere",
},
},

프로젝트 번호는 전부 다 숫자라도 따옴표 안에 있어야 합니다. 최근에 블로그에 올린 Ultimate config.lua 를 사용하실거라면  이 블록을 두번 복사해 넣으시면 됩니다. 하나는 tall 안드로이드 디바이스 부분 하나 하고 다른 디바이스 부분하고요.      


elseif ( display.pixelHeight / display.pixelWidth > 1.72 ) then
 
application =
{
content =
{
width = 320,
height = 570,
scale = "letterBox",
xAlign = "center",
yAlign = "center",
imageSuffix =
{
["@2x"] = 1.5,
["@4x"] = 3.0,
},
},
notification =
{
google = { projectNumber = "yourprojectnumberhere", },
},
}
else
application =
{
content =
{
width = 320,
height = 512,
scale = "letterBox",
xAlign = "center",
yAlign = "center",
imageSuffix =
{
["@2x"] = 1.5,
["@4x"] = 3.0,
},
},
notification =
{
google = { projectNumber = "yourprojectnumberhere", },
},
}
end

iOS device 부분에는 이 블럭을 넣으실 필요는 없습니다. 하지만 iOS 에 대한 push notification code를 이 블럭에 넣으셔야 된다는 점 기억해 두세요.

이제 두번째 수정하셔야 될 파일은 build.settings file입니다.

settings = {} table 안에 넣으셔야 될 겁니다. 그 안에 iPhone과 orientation 혹은 다른 블럭들이 있을 텐데요. 아래와 같이 안드로이드 부분을 세팅하시면 됩니다.


android =
{
permissions =
{
{ name = ".permission.C2D_MESSAGE", protectionLevel = "signature" },
},
usesPermissions =
{
"android.permission.INTERNET",
"android.permission.GET_ACCOUNTS",
"android.permission.RECEIVE_BOOT_COMPLETED",
"com.google.android.c2dm.permission.RECEIVE",
".permission.C2D_MESSAGE",
},
},



이제 마지막으로 main.lua 파일 입니다. 추가해야 될 코드가 있는데요. 이미 iOS push notification을 위해 이 코드를 넣으셨다면 이미 좋은 참고 자료를 확보한 셈입니다. 이 부분이 처음이라면 여러분이 추가하셔야 될 부분은 세부분으로 나눌 수 있습니다.   


첫번째로는 notification events 에 대해 respond 하기 위한 handler function을 셋업하셔야 합니다. 핸들링해야 할 이벤트가 두가지가 있는데요. (Registration and the Push Event itself) 둘 다 같은 handler function으로 관리하시면 됩니다. 이 함수를 사용하시기 위해 Runtime Listener 도 셋업 하셔야 됩니다.

suspended 나 stopped 상태에서 push notification이 여러분의 앱을 launches 시킬 어떤 특정 화면으로 가도록 프로그래밍을 하셔야 되는 걸 잊지 마세요. 


“remoteRegistration” event를 get 하면 애플이나 구글에 완전히 register 된 겁니다. 그리고 event.token variable에 여러분의 token 이 들어있는 상태가 됩니다. 이 값을 다른 서비스들과 함께 여러분의 디바이스에 register 시킬때 사용하실 수 있습니다. 이 remoteRegistration event 는 다른 서비스와 함께 register 시킬때나 나중에 token을 저장할 때 아주 유용합니다. (만약 여러분이 push sending service와 함께 로그인 과정이 끝나고 난 후 register 해야 할 떄 말이죠.)


local function onNotification(event)
 
if event.type == "remoteRegistration" then
-- This device has just been registered for push notifications.
-- Store the Registration ID that was assigned to this application by Google or Apple.
myRegistrationId = event.token
 
-- Display a message indicating that registration was successful.
local message = "This app has successfully registered for push notifications."
native.showAlert("Information", message, { "OK" })
-- Print the registration event to the log.
print("### --- Registration Event ---")
--
-- Here is where you put code to register with your push notification service
--
else
-- A push notification has just been received. Print it to the log.
print("### --- Notification Event ---")
-- here is where you respond to a push notification that comes in while the
-- app is running.
end
 
end


Now, to make this function do something useful, you need to hook it up to Corona’s event system:


Runtime:addEventListener( "notification", onNotification )


마지막으로 여러분의 앱이 running 상태가 아니라면 (i.e. it’s stopped/suspended, a push notification comes in for the app, and you tap on it) OS가 여러분의 앱을 launch 시킬 겁니다. 그 다음에 아무런 행동을 하지 않으면 유저가 앱 아이콘을 두드렸을 때 실행 되듯이 앱이 실행 될 겁니다. 하지만 그럴 경우 push notification의 content 내용에 따라 다른 특정 화면으로 앱을 시작하고 싶을 때는 어떻게 해야 할 까요? 예를 들어서 뉴스 관련 앱을 만들었고 새로운 속보가 push 됐다면 바로 그 story 로 화면이 시작되길 원하실 겁니다.


이럴 경우 launchArgs를 사용합니다. push notification은 custom data를 포함하고 있습니다.

앱이 시작될 때 이 launchArgs를 체크하세요. 그리고 필요하면 앱 실행부분을 코딩하셔서 원하는 기능을 구현하시면 됩니다. 이 코드는 대개 main.lua의 윗 부분에 있게 됩니다.


local launchArgs = ...
if launchArgs then
-- do something with the data in the launchArgs table
end


In Summary


이 튜토리얼의 내용은 여기까지 입니다. 이 push notification은 오직 iOS 디바이스와 Google Play 에 인스톨 된 앱과  안드로이드 디바이스 에서만 사용할 수 있다는 것을 유의하세요. Kindle Fire나 Barnes & Noble Nook 디바이스들에서는 이 기능을 제공하지 않습니다.

앞으로도 계속 튜토리얼들이 추가 될 겁니다. 관심있게 지켜봐 주시기 바랍니다.

Corona Labs 는 여러분들이 모두 연말 연시를 잘 보내시고 이 선물이 도움이 많이 되셨기를 바랍니다.

반응형


반응형

Posted on . Written by



2012년 모바일의 세계는 완전 날아다녔습니다. 코로나도 거기에 올라 탔었구요. 하드웨어 쪽에서는 정말 매끄럽고 날렵한 태블릿들과 수를 헤아일수 없는 전화기를 포함해서 많은 device 들이 release 됐었죠. 또한 iOS6 와 안드로이드 4.x 같은 메이저 OS 들의 업그레이드가 다양한 기능들과 함께 소개 됐었죠. 지난 1년 동안 Corona Labs는 이렇게 빠르게 변화하는 환경에 맞춰 계속 새로운 개발을 해 왔습니다.



우리는 2012년을 더 큰 그리고 더 강력한 팀으로 마감하게 됐습니다. 거기다가 저희들은 계속 성장해 나가고 있습니다. 저희가 개발자분들의 community 에 전달하고 싶은 말씀은 저희들은 아주 strong 하고 Corona 커뮤니티가 세계적으로 성장할 수 있도록 환상적인 명예 대사들과 함께 꾸준히 노력을 하고 있다는 겁니다. 기술적인 부분에서는 주요 milestone들을 기록할 수 있었습니다. 8월에 Corona Enterprise를 선보여 코로나 개발자 분들이 native code도 같이 사용해서 개발할 수 있도록 했습니다. 그리고 Project Gluon과 함께 코로나의 새로운 plugin system을 소개해 드리기 위해 열심히 개발하고 있습니다. 거기에다가 12월에는 end-to-end development platform인 Corona Cloud 를 2013년도 초에 실시하겠다고 발표 했었습니다.



또한 코로나 커뮤니티도 지속적으로 성장해 나가고 있습니다 2012년도에 코로나 개발자 수는 11만명에서 20만명으로 거의 두배가 뛰었습니다. 이 사실을 접하고 저희들은 놀라기도 했고 또 겸손해 지기도 했습니다. 여러분들의 도움으로 저희들은 같이 활기차고 자랑스러운 커뮤니티를 만들어갈 수 있었기 때문입니다. 인디 개발자에서부터 큰 규모의 스튜디오까지 코로나는 그분들의 열정을 받고 성장할 수 있었습니다. 2013년에는 훨씬 신나는 일이 생길거라고 약속 드립니다. 여러분들이 코로나로 만들어 낼 훌륭한 제품들이 정말 기대 되네요.



위대한 기회의 해인 2013년을 cheer 합니다.





반응형

GPS 와 구글 맵 사용하기

2012. 12. 29. 10:18 | Posted by 솔웅


반응형
GPS and Google Maps



최신 브라우저에는 location-based 기능들이 다 있습니다. 전화기나 태블릿의 GPS 를 사용하는 기능이죠. 이것은 HTML5 의 기본 기능입니다. 그러니까 jQuery Mobile 과는 별도의 기능인거죠. 하지만 jQuery Mobile 과 함께 사용하면 아주 유용하죠. 이전 글의 데이터베이스 같이요.


geolocation 기능을 사용해서 Google Map  기능을 이용할 수도 있습니다. Google은 이를 위한 API 를 제공하고 있습니다. 개발자들은 자바스크립트를 이용해서 지구상의 어떤 곳이든 지도로 display 할 수 있습니다.


It is these two aspects we study in this chapter, in conjunction with jQuery Mobile.

이 두가지 기능에 대해 jQuery Mobile 에서는 어떻게 다루는지 오늘 다뤄 보겠습니다.


Using GPS with jQuery Mobile


GPS는 navigator.geolocation object를 통해서 구현 가능합니다. 이 object는 getCurrentPosition (ok, error) method 를 제공합니다.


  • ok (position) is a callback function called when the GPS position could be calculated. The position parameter is an object with a coords property defined by {latitude, longitude, heading, speed, altitude} containing the GPS position. This parameter is required otherwise the GPS position can not be recovered.

  • error () is a callback function called only if GPS position has not been found. This parameter is optional.


현재의 GPS 위치를 표시하기 위해 이 메소드를 사용하시면 됩니다. (예를 들어 현재의 위도와 경도를 표시하실 수 있습니다.)


Display current GPS coordinates


<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <span> Latitude : </span> <span id=lat></span> <br />

    <span> Longitude : </span> <span id=lng></span> <br />

  </div>

</div>


</body>

</html>


<script>


navigator.geolocation.getCurrentPosition (function (pos)

{

  var lat = pos.coords.latitude;

  var lng = pos.coords.longitude;

  $("#lat").text (lat);

  $("#lng").text (lng);

});


</script>



tistory574_01.html







Integrating Google Maps in our application


구글 맵은 Google에서 제공하는 구글 맵 API 를 통해서 구현 가능합니다. 이 API에 접근하려면 HTML 페이지에 자바스크립트를 include 시키시면 됩니다.


Inclusion of the JavaScript file of Google Maps


<script src=http://maps.googleapis.com/maps/api/js?sensor=true></script>



이전 프로그램을 변형시켜서 GPS 위치에 의해 파악된 위치를 지도에 표시하는 새로운 화면을 display 시키겠습니다. 첫번째 화면을 우리가 정하는 GPS 코드를 entering 하도록 약간 변형시키겠습니다.


View the map of the position provided by GPS


<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

  <script src=http://maps.googleapis.com/maps/api/js?sensor=true></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <span> Latitude : </span> <input type=text id=lat />

    <span> Longitude : </span> <input type=text id=lng />

    <a data-role=button id=btn>Display map</a>

  </div>

</div>


<div data-role=page id=win2 data-add-back-btn=true>

  <div data-role=header>

    <h1>Window 2</h1>

  </div>


  <div data-role=content>

  </div>

</div>


</body>

</html>


<script>


navigator.geolocation.getCurrentPosition (function (pos)

{

  var lat = pos.coords.latitude;

  var lng = pos.coords.longitude;

  $("#lat").val (lat);

  $("#lng").val (lng);

});


$("#btn").bind ("click", function (event)

{

  var lat = $("#lat").val ();

  var lng = $("#lng").val ();

  var latlng = new google.maps.LatLng (lat, lng);

  var options = { 

    zoom : 15, 

    center : latlng, 

    mapTypeId : google.maps.MapTypeId.ROADMAP 

  };

  var $content = $("#win2 div:jqmData(role=content)");

  $content.height (screen.height - 50);

  var map = new google.maps.Map ($content[0], options);

  $.mobile.changePage ($("#win2"));

  

  new google.maps.Marker ( 

  

    map : map, 

    animation : google.maps.Animation.DROP,

    position : latlng  

  });  

});


</script>


tistory574_02.html


텍스트 필드에 위도 경도 좌표를 넣으면 그 값을 받아올 겁니다. (디폴트로는 GPS 에서 얻은 값이 표시 됩니다. 파라미터에서 google.maps.Map object 를 생성하면 해당 위치의 지도가 display 될 겁니다. 지도를 표시할 <div> element 의 높이를 지정하는 부분을 잘 봐 두세요. (여기서는 두번째 화면의 content 입니다.)


여기에 해당 위치에 Marker 를 표시하기 위해 google.maps.Marker object를 생성했습니다. 이것은 옵션이지만 지도에서 해당 위치를 찾는데 아주 유용한 기능입니다.



반응형