M5StickC를 구매하고 나서, 뭘하고 놀아야할지 막막했다.

하드웨어적인 완성도도 괜찮고, 가격도 착한데 의외로 자료들이 많지 않았다.

(사실 자료가 많은데 필자가 멍청해서 잘 찾지 못하는 것일 수도 있다)


그러던 中 발견한 또 하나의 착한 아이템 등장 !!!



M5StickC에 붙일 수 있는 바퀴달린 아이템 !!!

거기에다가 가격도 나쁘지 않다.


알리익스프레스를 통해서 바로 구매 진행 ~~~ !!!



아래와 같이 예쁘게 플라스틱 상자에 담아서 배송되었다.



M5StickC를 꼽을 수 있는 핀이 보이고 예쁜 바퀴 4개도 볼 수 있다.

뒤에 보이는 것은 파워 온/오프 스위치이다.



밑면에는 일단 배터리가 가운데 자리 잡고 있고,

각 바퀴에는 모터가 4개 붙어있다.

흰색 네모난 것들은 LED이다.



옆에서 보면 앞바퀴는 왕 크고, 뒷바퀴는 왕 작은 것을 볼 수 있다.



뒤 에 있는 스위치 버튼을 볼 수 있다.



구매하고나서 처음에 당황스러운 것은 충전이었다.

배터리가 있는 전자 제품을 구매하면 제일 먼저 하는 것이 첫 완충인데,

BeetleC의 경우 80 mAH 배터리를 갖고 잇음에도 별도로 충전할 수 있는 포트가 보이지 않았다.

M5StickC도 마찬가지여서 당황스러웠는데...

디바이스 초보자에게는 이러한 부분이 좀 불친절하게 느껴져서 아쉽다.


하지만, 그럼에도 불구하고...

M5Stack에서는 친절하게(?) 아래 사이트를 통해 우리의 귀여운 BeetleC에 대해서 설명해주고 있다.

    - https://docs.m5stack.com/#/en/hat/hat-beetlec




[ 테스트 ]


① 위 사이트를 통해 EasyLoader를 다운로드 받자. (Windows 버전만 제공된다)


② M5StickC 연결한 뒤 EasyLoader에서 "Burn"을 하면 된다. (baud rate는 115200로 설정)


③ M5StickC를 BeetleC에 연결한 뒤에 M5StickC Power 스위치 껐다가 키고, BeetleC의 Power도 On으로 하자.


④ 정상적으로 잘 되었으면 LED들이 3번씩 켜지고, A 버튼을 누르면 앞 바퀴가 앞뒤로 움직인다.


※ 이 때 ④ 테스트가 정상적으로 되지 않으면, USB-C를 M5StickC에 꼽고 충전 과정을 가져보자.

   정답은 모르겠는데, 일단 BeetleC의 전원을 on으로 하고 M5StickC의 Power 버튼으로 껐다가 다시 켜보자.

   이 때, BeetleC의 LED들이 번쩍이면 일단 성공이다.

   A 버튼을 눌렀을 때 바퀴가 움직이지 않으면 조금 더 충전해보자.



⑤ 스마트폰에서 WiFi를 키고 AP를 찾아보면 "BeetleC:xxxx"로 시작하는 AP를 찾을 수 있다. 패스워드는 "12345678"



⑥ 스마트폰에서 "192.168.4.1/ctl" 주소로 접속하면 된다.



위와 같은 화면을 통해 BeetleC를 조종하면서 놀 수 있다.


이것만 가지고도 재미나게 놀 수 있지만,

파란크리스마스님이 올려주신 내용으로 가지고 놀면 보다 더 재미나게 놀 수 있다.


다음 포스팅을 통해 좀 더 알아보도록 하겠다~!!!


반응형


M5StickC 가지고 놀거리가 마땅치 않아서 그냥 Sample만 넣어서 가지고 놀다가...

바퀴 달린 장난감을 만들고 싶어졌다. (이건 나중에 BeetleC 소개하겠다)


그런데, 그냥 바퀴 가지고 노는게 아니라

핸드폰으로 조종하는 장난감을 만들고 싶어져서...


M5StickC ~ Android 間 연결 하는 것을 해보려고 한다.



일단 M5StickC 에서 지원하고 있는 Bluetooth Spec은 다음과 같다.

- Integrated dual mode Bluetooth (classic and BLE)


즉, BT / BLE 2가지 모두 되는데... 배터리를 아끼기 위해 BLE를 이용해서 연결해보겠다.



Android Studio를 가지고 앱을 만드는 것은 번거로우니,

가볍게 해보기 위해서 선택한 것은 "앱 인벤터"



이와 관련된 자료를 찾아보다가 찾은 정말 훌륭한 레퍼런스

조금 아쉬운건 M5Stack 기반으로 되어 있어서

M5StickC에서 바로 사용할 순 없고 조금의 수정이 필요했다. 작성해주신 분에게 무한의 감사를~~~~!!!

덕분에 M5StickC 구매한 것을 후회하지 않게 되었다는..... (가지고 놀 방법을 몰라서... 고생을... ㅋㅋㅋ)

    - https://bluexmas.tistory.com/972?category=818671




일단 Arduino IDE에서 M5StickC에 넣을 코드를 작성해보자.


#include <M5StickC.h>

#include <BLEDevice.h>

#include <BLEUtils.h>

#include <BLEServer.h>

#include <BLE2902.h>


#define SERVICE_UUID             "454f62bd-2b3e-43de-8cd5-e64f5bc15092"

#define CHARACTERISTIC_UUID "593744ae-3348-44f6-b00f-853e2b3b2b60"


BLEServer* pServer = NULL;

BLECharacteristic* pCharacteristic = NULL;

bool deviceConnected = false;


class MyServerCallbacks: public BLEServerCallbacks {

    void onConnect(BLEServer* pServer) {

      M5.Lcd.println("connected");

      deviceConnected = true;

    };

 

    void onDisconnect(BLEServer* pServer) {

      M5.Lcd.println("disconnected");

      deviceConnected = false;

    }

};


class MyCallbacks: public BLECharacteristicCallbacks {

  void onRead(BLECharacteristic *pCharacteristic) {

    M5.Lcd.println("read");

    pCharacteristic->setValue("Hello World!");

    std::string value = pCharacteristic->getValue();

    M5.Lcd.println(value.c_str());

  }

 

  void onWrite(BLECharacteristic *pCharacteristic) {

    M5.Lcd.println("write");

    std::string value = pCharacteristic->getValue();

    M5.Lcd.println(value.c_str());

  }

};

 

void setup() {

  Serial.begin(115200);

  M5.begin();

  M5.Lcd.println("BLE start");


 

  BLEDevice::init("M5StickC");

  BLEServer *pServer = BLEDevice::createServer();

  pServer->setCallbacks(new MyServerCallbacks());

  BLEService *pService = pServer->createService(SERVICE_UUID);


  

  pCharacteristic = pService->createCharacteristic(

                                         CHARACTERISTIC_UUID,

                                         BLECharacteristic::PROPERTY_READ |

                                         BLECharacteristic::PROPERTY_WRITE |

                                         BLECharacteristic::PROPERTY_NOTIFY |

                                         BLECharacteristic::PROPERTY_INDICATE

                                       );


  pCharacteristic->setCallbacks(new MyCallbacks());

  pCharacteristic->addDescriptor(new BLE2902());


  pService->start();

  BLEAdvertising *pAdvertising = pServer->getAdvertising();

  pAdvertising->start();

}


void loop() {


  if (deviceConnected) {

    if(M5.BtnA.wasPressed()) {

      M5.Lcd.println("Btn A press!");

      pCharacteristic->setValue("Btn A press!");

      pCharacteristic->notify();

    }else if(M5.BtnB.wasPressed()) {

      M5.Lcd.println("Btn B press!");

      pCharacteristic->setValue("Btn B press!");

      pCharacteristic->notify();

    }

  }

  M5.update();

}


레퍼런스로 삼았던 "파란크리스마스"의 포스팅 내용과 함께,

구글링을 통해 확인한 BLE Sample 코드들을 확인하고, M5StickC에서 돌아갈 수 있도록 수정해봤다.



그런데, 일단 시작하기에 앞서서 UUID를 생성해야 한다.


이걸 왜 생성해야하냐고!?

나도 잘 몰라서 찾아봤다.


UUID (Universally Unique IDentifier) 는 우리말로 바꿔보면 "범용 고유 식별자"라고 한다.

결국은 기기 間 통신을 할 때 각 개체를 구분하기 위한 고유값인데,

이러한 고유값은 보통 중앙 관리 시스템에 의해서 관리가 되지만,

여러 사정으로 개발 주체가 스스로 이름을 정하도록 하되 중복되지 않도록 기준을 잡아주고 운영하는 방식이 바로 UUID라고 한다.

완벽히 중복되지 않는다는 보장을 할 수는 없지만, 중복될 가능성이 거의 없기에 많이 사용된다고 한다.


UUID는 16진수 36개 문자로 표현되며 8-4-4-4-12 와 같은 형식으로 구성된다.

    - Sample: 454f62bd-2b3e-43de-8cd5-e64f5bc15092


UUID 버전 구성은 아래와 같다.

    - 버전 1 (MAC 주소)

    - 버전 2 (DCE 보안)

    - 버전 3 (MD5 해시)

    - 버전 4 (랜덤)

    - 버전 5 (SHA-1 해시)


그냥 막 만들려면 막연하니 아래 사이트에서 generate 하고 사용하자.

    - https://www.uuidgenerator.net/


버전4로 2개 생성해서 코드의 저 위에 넣어주면 된다.

귀찮으면 그대로 사용해도 되지만 그러면 필자의 디바이스와 혼선이 생길.......리가 없나!? 설마 이웃은 없을테니... ^^



그 다음으로 BLE를 사용하려다보니 뭘 알아야 할 것 같아서 살짝 공부 좀 해봤다.


[ GATT (Generic Attribute Profile) ]

    - GATT는 두 BLE 장치간에 Service, Characteristic 을 이용해서 데이터를 주고 받는 방법을 정의한 것입니다.


[ Attribute Protocol (ATT) ]

    - GATT는 ATT의 최상위 구현체이며 GATT/ATT로 참조되기도 합니다. 각각의 속성(Attribute)은 UUID를 가지며 128비트로 구성됩니다.

    - ATT에 의해 부여된 속성은 특성(characteristic)과 서비스(Service)를 결정합니다.


[ Service ]

    - 하나의 서비스는 특성들의 집합입니다.

      예를 들어 "Heart Rate Monitor"라고 불리는 서비스를 가지고 있다면 그 서비스는 "heart rate measurement"같은 특성을 포함합니다.


[ Characteristic ]

    - 하나의 특성(characteristic)은 하나의 값과 n개의 디스크립터를 포함합니다.


[ Descriptor ]

    - 디스크립터는 특성의 값을 기술합니다.



이제, 위의 코드에서 나오는 Service와 Characteristic을 이해할 수 있다 !!! (정말!?)





이제 Android 폰에 넣을 App을 만들어보자!!!


앱 인벤터 (App Inventor)

    - https://appinventor.mit.edu/



인벤터에서 BLE 기능을 사용하기 위해서는 Extension을 등록해야 한단다. (아직은 베타?!)

    - https://mit-cml.github.io/extensions/


BluetoothLE.aix 파일을 다운로드 받아놓자.


이제 인벤터를 실행해서 새로운 프로젝트를 만들어 보자.

앱 인벤터를 한 번도 사용하지 않았더라도 무서워할 것 없다.

그냥 크롬 브라우져로 접속해서 사용하면 된다.

다만, 눈치만 조금 있다고 하면 아래 그림 보고 잘 따라올 수 있다~^^ (눈치가 부족하신 분은 구글링을 조금.....^^)



그리고, 방금 다운로드 받은 BLE Extension을 등록하자.



그리고 이제 화면을 꾸미면 된다.

왼쪽 팔레트에서 원하는 것을 선택한 뒤에 드래그앤드롭 하면 된다.



이제 블록으로 넘어가서 ...



처음 해보시는 분들은 조금 고생할 수도 있지만

그래도 계속 해보면 된다!!!

필자도 했는데... 여러분은 못할리가 없다~~!!

(파란크리스마스님 다시 한 번 쌩유~~~!!!!)


빌드를 실행하면,



아래와 같이 다운로드 받을 수 있는 QR Code가 나오는데....

이상하게도 필자는 다운로드가 안되서, 그냥 아래 링크 주소 타이핑해서 다운로드 받았다.



이제 실행해보자.


M5StickC 켜져있는 상태 & App 실행상태이다.



앱에서 "조회" 버튼 누른 후, "BLE 기기 선택" 버턴을 눌러보자.



M5StickC 항목이 보일 것이다. 선택하자.



M5StickC에서 connected 되었다는 메시지도 보이고,

앱에서도 BLE 연결이라는 체크박스와 함께 밑에 연결된 디바이스 이름도 보인다.



M5StickC에서 A 버튼을 눌러보자.



B 버튼도 눌러보자.



앱에서 텍스트 입력 후 "보내기" 버튼을 누르면 M5StickC로도 날라가는 것을 볼 수 있다.



에고... 힘들었다.

모르는걸 하려다 보니 이것 저것 알아보고 공부하고 하느라 시간이 꽤 걸렸다.

그래도 뭐 여하튼 되긴 했으니~!!!


Sample Code는 아래 링크에서 다운로드 받을 수 있다.

    - https://github.com/what-want/BLEconnect




반응형


에휴 ... 이번 포스팅은 삽질에 대한 이야기이다.


어렸을적(?) 맥미니 하나 장만해서 가지고 놀다가

PowerPC 기반으로 리눅스 서버 하나 돌리고 싶어서 변신 시키고.... 그러다가 PowerPC는 역사의 뒤안길로 사라지고...

한동안 맥OS와 같이 어울릴 일이 없었는데...


최근 왠지 맥북 하나 갖고 싶어서 하나 중고로 장만을 했다.

뭐 오래된 저렴한 녀석이지만 그래도 아직 구동은 되는 녀석이기에... ^^

노인 학대 시키는 것 같아서 추가로 메모리도 사서 8GB로 늘려줬다.


할아버지 맥북으로 무엇을 할까 하다가...

역쉬 맥북 프로는 프로그래머 코스프레 용도야!!! 라며... M5StickC 개발환경을 여기에다가 꾸며보기로 마음 먹었다.


허세 충족을 위해 나중에 맥북 들고 M5StickC 들고 카페에 가서 커피 한 잔 마시며 폼을 잡아보려 했건만....



[ M5StickC 개발환경 ]

    - 앞 포스팅에서 볼 수 있는 이미지에도 쓰여져 있는데, M5StickC를 가지고 놀 수 있는 방법은 3가지가 있다고 한다.

        . UIFlow

            : 스크래치와 같은 방법을 통해 프로그래밍을 할 수 있는 개발환경이다. (WiFi를 통해 연결하고 웹을 통해 작업한다)

        . MicroPython

            : 이건 아직 필자도 잘 모르겠다. 어떻게 환경을 꾸밀 수 있는지 조차 ...

        . Arduino

            : 가장 일반적인 개발환경이다.



[ Arduino IDE ]

    - 가장 표준적인 방법인 Arduino IDE를 이용해서 M5StickC 개발환경을 꾸며보려고 했다.

        . https://docs.m5stack.com/#/en/quick_start/m5stickc/m5stickc_quick_start



[ Host Environment ]

    - 앞에서도 말했지만 필자는 맥북에 개발환경을 꾸미고자 했다!!!

    - 필자의 맥북 할아버지 스펙은 아래와 같다.

        . 기종       : MacBook Pro (13-inch, Mid 2010)

        . 운영체제 : macOS High Sierra (version 10.13.6)

        . 메모리    : 8GB

        . 디스크    : SSD


    - Arduino IDE 개발환경 구성 방법은 아래와 같다.

        . https://docs.m5stack.com/#/en/quick_start/m5stickc/m5stickc_quick_start_with_arduino_MacOS


        ① Arduino IDE 다운로드 받아서 설치하고

        ② ESP32 보드에 대한 기본 정보 등록을 위해 "File - Peferences - Settings" 메뉴를 통해 다음 URL 등록하고,

            . https://dl.espressif.com/dl/package_esp32_index.json

        ③ "Tools - Board - Boards Manager..." 메뉴에서 "ESP32" 검색 후 ESP32 보드 설치하고

        ④ "Sketch - Include Library - Manage Libraries..." 메뉴에서 "M5StickC" 라이브러리 검색해서 설치하면 된다.


    - M5StickC 연결을 위한 기본 설정

        . 아래 이미지와 같이 하면 된다고 한다!!!!



    - 그.런.데. ....


일반적으로는 이렇게 하면 이제 슉슉~ 잘 되어야 한다. 이렇게 하면...


이하 내용은 연결이 잘 안되는 경우에 대한 경험담 공유이다.

결론만 말하면 ... 맥북에서는 실패했다.


그런데, 똑같은 방법으로 똑같은 케이블과 똑같은 M5StickC를 가지고 윈도우즈PC에서 하면 잘된다.

다를게 하나도 없는데... ㅠㅠ


일단 맥북에서의 Arduino IDE 설치기로 작성했지만, 윈도우즈에서도 동일하니... 그걸로 대체~

필자는 어쩔 수 없이 윈도우즈 환경에서 개발하기로...



반응형


일단 필자는 컴퓨터공학 전공이다.

Hardware 관련된 과목을 배우지 않는 것은 아니지만, Software 중심으로 전공 수업을 받았고

또한 개인적으로도 Software에 치우쳐서 공부를 했다.

하지만, 항상 Hardware 부분에 대한 갈증은 갖고 있었고, 지금도 관심 많다 !!!


하고 싶은 말은...

Hardware 지식이 거의 없다.


아래 내용에 거짓말이 많을 수 있다.



지름병에 걸린 중증 환자로써 어느날 Aliexpress를 뒤지다가 발견한 저렴한 버전의 Arduino 제품 !!!




12달라도 안되는 가격에

Arduino 프로그램이 가능한 액정이 달려있는 손가락 사이즈의 예쁜 디바이스가 딱 !!!

거기에다가 배터리도 내장되어 있고, 6축 센서, IR 까지.... 아니... 이건 대박 !!!



그래서 무조건 질렀다.




[ ESP32 ]

    - 2008년 설립된 espressif 社 에서 만든 유명한 라인업 중 하나이다. (ESP8266, ESP32)

    - 중국 상하이에 있는 회사인데... ESP8266, ESP32 2개로 대박이다~~~~

        . https://www.espressif.com/

        . http://espressif.co.kr/ (국내 총판)

    - IoT 디바이스 개발을 해보려는 사람들이라면 누구나 알만한 Chip 이라고 한다.

        . ESP8266 → ESP32 전환 추세


 

 ESP8266

 ESP32

 MCU

 Xtensa Single-Core 32bit

 Xtensa Dual-Core 32bit

 802.11 b/g/n/ WiFi

 O, HT20

 O, HT40

 Bluetooth

 X

 4.2 and Classic

 Frequency

 80 MHz

 160 MHz

 SRAM

 160 kBytes

 512 kBytes

 Flash

 SPI Flash, up to 16 MBytes

 SPI Flash, up to 16 MBytes

 GPIO

 17

 36

 Hardware / Software PWM

 None / 8 채널

 1 / 16 채널

 SPI / I2C / I2S / UART

 2 / 1 / 2 / 2

 4 / 2 / 2 / 2

 ADC

 10 bit

 12 bit

 CAN

 X

 1

 Ethernet MAC Interface

 X

 1

 Touch Sensor

 X

 O

 Temperature Sensor

 X

 O

 Hall Sensor

 X

 O



[ M5StickC ]

    - M5StickC 디바이스는 아래 부품들의 조합으로 만즐어진 제품이다.


 ESP32-PICO-D4

 ESP32 기반 꼬꼬마 버전

 AXP192-PMIC

 Single Cell Li-Battery and Power System Management IC

 SH200Q-6Axis

 very small, 6 axis inertial sensor, consisting of: A digital, triaxial 16bit acceleration sensor and a digital, triaxial 16bit, ±2000°/s gyroscope. 

 ColorLCD-0.96" (ST7735S)

 80 x 160. 132RGB x 162dot 262K Color with Frame Memory Single-Chip TFT Controller/Driver

 80mAH BATTERY

 

 SPM1423-PDM MIC

 miniature, highperformance, low power, top port silicon digital microphone with a single bit PDM output


    - 기본적인 제품 정보는 위의 이미지를 보면 된다 !!!



[ Manual ]

    - M5StickC에 대한 모든 것이 너무 잘 작성되어 있다.

        . https://docs.m5stack.com/#/en/core/m5stickc


반응형



지금 간만에 안드로이드 어플 개발 관련하여 포스팅을 하고 있는 이유...

갑작스레 맵... 지도 기반의 뭔가를 만들어 보고 싶어서!



그러면,

제일 먼저 해야할 일은?


구글에서 제공해주는 API를 사용할 수 있어야지!!



구글님께 허락 받으러 가보자 !!!






#01. API 프로젝트 만들기



아래 링크로 접속 고고씽~


https://console.developers.google.com/



당연히 "만들기"를 누르자~!!



조금 기다리면 생성완료된다




왼쪽 위를 보면 방금 만든 프로젝트로 설정되어 있는 것을 볼 수 있다








#02. API 및 사용 서비스 사용 설정



"+ API 및 서비스 사용 설정"을 눌러보자.



우리는 구글맵을 사용하는 안드로이드 앱을 만들거니까

따로 검색할 필요 없이 나와있는 것을 딱 고르면 된다


"Maps SDK for Android"

누르면...



"사용 설정"을 누르면 된다.



뭔가 나온다.... 있어보인다.







#03. 사용자 인증 정보 1


"사용자 인증 정보"를 눌러보자



"사용자 인증 정보 만들기"

눌러보자



"API 키"

선택하면 된다



"키 제한"

선택해야 한다



여기에서 "애플리케이션 제한사항" 부분을 설정해보자



"Android 앱"을 선택하고

밑 부분의 "+ 패키지 이름 및 지문 추가"를 선택하자


'패키지 이름'과 'SHA-1 인증서 지문'은 샘플로 들어가있다.


실제 개발 환경의 정보로 업데이트 해야한다.








#04. Create Project


위에서 필요한 정보를 입력하기 위해서는

어플리케이션 프로젝트가 필요하다


Android Studio를 실행하자



당연히

"+ Start a new Android Studio project"

선택



"Empty Activity"로 선택



'Name' 부분만 적당히 지어주면 된다.

밑의 API 부분도 그냥 그대로 놔두자~


'Finish'



뭔가 필요한걸 설치한다~


'Finish' ~



오~ 이제 좀 뭔가 프로그래머 스러운 화면이다~~~



app - src - main - java - ... 각자 환경에 따라서 ...


"MainActivity.java" 파일에 써있는 패키지만 잘 확인하면 된다.



"Build" 메뉴에서 "Make Project"를 실행해보자.


이걸 해야지 '키 저장소' 파일이 생성된다.

(SHA-1 인증서 지문 확인을 위해서 필요한...)






#05. SHA-1 인증서 지문


명령어 프롬프트 창으로 가야한다.

그리고 아래 명령어를 그대로 입력하면 된다.



> "C:\Program Files\Android\Android Studio\jre\bin\keytool" -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android



인증서 지문이라고 뭐라고 블라블라 나온다.


"인증서 지문:" 라인 중에서 "SHA1"이라고 나온 부분을 참조하면 된다.







#06. 사용자 인증 정보 2


패키지 이름과 SHA-1 인증서 지문을 입력하면 된다



잘 복사해서 붙여넣기~


"API 제한사항" 부분도 넣어보자



"Select API"를 클릭해서

"Maps SDK for Android"를 골라주면 된다.


그리고 저장~





#07. API 키 저장하기


이제 만들어진 API 키 값을

우리가 만들고자 하는 어플에 넣어줘야 한다




키 값을 잘 복사한 다음에...



Android Studio를 살펴보자



"manifests - AndroidManifest.xml" 파일을 찾아야 한다.


...

<uses-library android:name="org.apache.http.legacy" android:required="false"/>

<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="..." />

...


<uses-library ...>, <meta-data ... >

내용을 삽입해야 한다.



그리고

위에서 준비한 API 값을 넣어주면 된다






#08. Google Play services


구글맵을 사용하기 위해서는

"Google Play services"를

설치해야한다.



"Android Studio"에서

Tools - SDK Manager

메뉴를 실행하자



"SDK Tools" 탭에서

"Google Play services" 항목을 선택 후

Apply ~



당연히 "Accept" 후 Next~







#09. build.gradle


하아~ 힘들다.



Android Studio 에서 build.gradle 을 열고선

2개 라인을 추가하자


...

implementation 'com.google.android.gms:play-services-maps:16.0.0'
implementation 'com.google.android.gms:play-services-location:16.0.0'

...


위 2줄을 넣으면 된다


변경된 라인에 마우스 포인터를 위치시켰을 때

새로운 버전이 보이면 해당 버전으로 맞춰주면 되는데,


여기에서 주의해야할 사항이 있다!!!

버전을 같이 맞춰야 한다.


implementation 'com.google.android.gms:play-services-maps:16.1.0'


위와 같이 하나만 버전을 올리니까....

App 실행을 하면, Google Play services 오류라면서 지도가 나오지 않았다.





변경한 다음에는 위와 같이 있는 "Sync Now"를 눌러주자 !!!


응?! 그런데 ?!



기분 나쁘게 빨간줄이 나온다.

뭔가 버전이 안맞는단다.


풍선팁에 나온 내용을 바탕으로 28.0.0 버전으로 맞춰주면 된다.



빨간줄이 모두 사라졌다.






#10. layout



"app - res - layout - activity_main.xml"


내용을 아래 내역으로 바꿔치기 하자


(가운데 밑의 Text로 화면을 바꿔놓고선 붙여넣기하면 된다)


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >

<fragment
android:id="@+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent"
class="com.google.android.gms.maps.MapFragment" />

</LinearLayout>






#11. MainActivity.java



이 부분도 아래 내역으로 붙여넣자


package com.whatwant.sallymap;

import android.app.FragmentManager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.MapFragment;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;


public class MainActivity extends AppCompatActivity
implements OnMapReadyCallback {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

FragmentManager fragmentManager = getFragmentManager();
MapFragment mapFragment = (MapFragment)fragmentManager
.findFragmentById(R.id.map);
mapFragment.getMapAsync(this);
}

@Override
public void onMapReady(final GoogleMap map) {

LatLng SEOUL = new LatLng(37.56, 126.97);

MarkerOptions markerOptions = new MarkerOptions();
markerOptions.position(SEOUL);
markerOptions.title("서울");
markerOptions.snippet("한국의 수도");
map.addMarker(markerOptions);

map.moveCamera(CameraUpdateFactory.newLatLng(SEOUL));
map.animateCamera(CameraUpdateFactory.zoomTo(10));
}

}


당연히 제일 위의 package 내용은 각자의 상황에 맞춰서~







#12. Run


위에 있는 메뉴 부분 중에서 중간에서 약간 오른쪽에 있는 "▷" 부분을 눌러보자



에뮬레이터로 Nexus가 보인다~ OK !!!



우앙.... 드디어 나왔다~~~~!!!!




지쳐서 일단 여기까지만... !!!







위의 내용은 전적으로 아래 포스팅 내용으로 공부하면서 진행했다.

오리지널은 아래 포스팅이다!!!


"Google Maps Android API 사용 방법 및 예제"

https://webnautes.tistory.com/647


반응형

'잘난놈되기 > 안또라이들' 카테고리의 다른 글

안드로이드 어플 개발 환경 만들기  (0) 2019.03.31
새로운 판 만들기  (0) 2012.03.12
버튼을 더 추가해보기  (0) 2012.03.11
버튼을 추가해보기  (0) 2012.03.06
첫 소스 분석 - HelloAndroid  (0) 2012.03.05


갑작스레 떠오른

'나에게 있었으면 좋을 것 같은 어플 아이디어'


오옷... 만들어봐야지~


그런데, 오랜만에 만들려니 너무 귀찮다!!!


인벤터 같은 걸로 만들까?


아... 그런데, 내가 원하는 기능을

인벤터로 하려면... 어렵거나 안될것 같은데...


그러면 정공법으로 가자!


아~ 그런데... 오랜만이다보니

기본적인 것 조차 기억도 안나고

내가 아는 내용은 out of date 된 지식인 것 같은데...


뭐... 하나씩 천천히 해보자!!!




아래 링크의 포스팅을 아주 많이 참고했다.

(감사합니다~!!!)


https://webnautes.tistory.com/1126




2019.03.24 기준



[ Android Studio 설치하기 ]


아래 경로에 접속하자


https://developer.android.com/studio/



접속한 PC 환경에 맞춰서 알아서 다운로드 링크가 나온다.



다운로드 다 받으면 설치 시작하면 된다.



뭐... 그냥 Next ~ Next 하자 ^^



한참 설치한다. 용량이 그만큼 크니깐 뭐...



설치는 다 되었지만,

이제는 환경 설정 과정이 필요하다.






[ Android Studio 환경 설정하기 ]


처음 실행하게 되면 환경설정 과정이 진행된다.



어?! 옛날에 구닥다리 버전을 설치한 적이 있었나보다.

에잇~ 우리는 깨끗하게 새로 시작하자 ^^



나도 반가워~^^



음... 이번엔 Custom으로 해보자



오옷~ 테마를 고를 수 있다!

난 어둠의 자식이니.... 드라큘라를 선택해봤다



설치할 SDK Components를 고르는 화면인데 ...

에뮬레이터를 사용하려면 아래 2개를 선택해야한다고 한다.

용량이 큰데... 뭐 그래도 어쩔 수 없이~



에뮬레이터에 할당할 메모리 용량을 셋팅하는 것 같은데...

그냥 최소 요구사항만 맞춰봤다.



에고... 이제 되었다.

Finish 를 누르면 끝이다....가 아니고,



다운로드 받고~ 압축 풀고~ 설치한다.

물론 지가 혼자 알아서... ^^



조용히 완료된다.


아래 부분의 Configure 메뉴를 통해서 업데이트도 해보자.



이제 시작할 준비는 되었다!!!





어플 하나 만들어보자~!!!




반응형

'잘난놈되기 > 안또라이들' 카테고리의 다른 글

구글맵 API 사용 준비 하기  (0) 2019.03.31
새로운 판 만들기  (0) 2012.03.12
버튼을 더 추가해보기  (0) 2012.03.11
버튼을 추가해보기  (0) 2012.03.06
첫 소스 분석 - HelloAndroid  (0) 2012.03.05

http://www.algospot.com/judge/problem/read/ENDIANS

위 문제를 풀기 위해서 기본 사항들에 대해서 공부를 해보기로 했다.

이런 공부를 해본지 벌써 10여년 이상이 흘러버린 것이 좀 슬프게 느껴진다.
어휘들은 낯이 익지만 그 의미는 가물가물한 단계를 넘어 다른 사람에게 설명을 할 수가 없는 지경이...



□ Little-Endian, Big-Endian

   - 메모리에 저장된 바이트들의 순서에 대한 용어
     ▷ Big-Endian
          * 바이트 열에서 가장 큰 값이 먼저 저장
          * RISC 기반 프로세서, 모토로라 프로세서
          * 확장 축소에 효율적
          * 수의 값을 증가시킬 때 왼편에 자릿수 추가 가능
     ▷ Little-Endian
          * 바이트 열에서 가장 작은 값이 먼저 저장
          * 인텔 프로세서, DEC의 알파 프로세서
          * 오른쪽에서 왼쪽으로 읽는 언어를 사용하는 사람에게 자연스러운 방식

 Type Name  Size  Value  Big-Endian  Little-Endian 
 BYTE  b  1  0x12 [12]  [12] 
 WORD  w  2  0x1234 [12][34]  [34][12] 
 DWORD  dw  4  0x12345678 [12][34][56][78]  [78][56][34][12] 
 char []  str  6  "abcde" [61][62][63][64][65][00]  [61][62][63][64][65][00] 

     ▷  위키피디아에 너무나 좋은 그림이 있어서 이것도 추가해본다.
          * http://en.wikipedia.org/wiki/Endianness




   - 당연히 모두 알고있겠지만, char []의 경우에는 제일 끝에 null이 들어가게 되고, 순서의 바뀜이 없다.

   - MSB, LSB
      ▷ MSB (Most Significant Bit) : 최상위 비트. 이진수 숫자 중에서 제일 큰 자리수
      ▷ LSB (Least Significant Bit) : 최하위 비트. 이진수 숫자 중에서 마지막 자리수
(MSB) 0x12345678 (LSB)
      ▷ MSB First System → 12 34 56 78
      ▷ LSB First System → 78 56 34 12

   - 용어만 다를 뿐이지, 결국은 같은 이야기이다.
      ▷ Little Endian = LSB First
      ▷ Big Endian = MSB First

   - 이 단어들은 걸리버 여행기에서 나오는 이야기에서 유래가 되었다고 한다.
     ▷ 삶은 계란을 깰 땨애 뾰족한 쪽(Little-endian)으로 깨야한다는 릴리풋(Lilliput) 국과
         둥근 쪽(Big-endian)으로 깨야한다는 비에푸스쿠(Biefuscu) 국이 전쟁을 일으켰다는...

   - 또, 당연한 이야기이지만 Big-endian, Little-endian 모두 같은 값을 표한하기 위한 다른 방법일 뿐이다.




□ 시프트 연산 (Shift Operations)

   - 앞서 살펴본 Big-endian, Little-endian을 프로그램으로 구현할 때에 주로 사용하는 것이 바로 시프트 연산 !

   - 우선은 C/C++ 언어에서의 시프트 연산을 기준으로 해서 알아보자.
     ▷ 기본적인 문법은 다음과 같다.
        * 데이터 << 이동할 비트 수
        * 데이터 >> 이동할 비트 수
     ▷ 하나 샘플로 해보자.
        * int number = 5;
        * int result = number << 3;

        * 5를 2진수로 하면... 101
        * 왼쪽으로 3번 시프트 연산을 하면... 101000
        * 그러므로... result 결과는 40

        * result = result >> 1;

        * 101000 ... 이걸 오른쪽으로 1번 시프트하면... 10100
        * 이건... 결과로 20

     ▷ 시프트 연산을 하다보면 두 가지 상황에 대해서 잘 생각해보아야 한다.
     ▷ 제일 왼쪽의 비트가 부호 비트인데, 부호 비트까지 왼쪽 시프트가 이루어지는 경우와
     ▷ 오른쪽 시프트가 이루어지다가 버림이 벌어지는 경우가 그것인데...

     ▷ 왼쪽 시프트
        * 값이 2배씩 증가를 한다.
        * 음수여서 부호비트가 1인 경우 바로 0으로 바뀌어서 양수로 되기도 하고,
          양수의 값이 시프트 되다가 갑자기 음수로 바뀔 수도 있다.
        * 제일 오른쪽은 "0"으로 채워진다.

     ▷ 오른쪽 시프트
        * 값을 2의 제곱으로 나누기를 한다.
        * 제일 왼쪽은 부호비트로 채워진다. 음수이면 계속 1이 들어온다.
        * 제일 오른쪽으로 넘어오는 값들은 그냥 그대로 버려진다.

   - 시프트 연산에 있어서는 Python에서도 기본적인 문법은 동일하다.




□ 비트 연산 (Bit Operations)

   - 본래 시프트 연산 역시도 비트 연산에 포함이 된다.
   - 시프트 연산 외에 지금 살펴볼 비트 연산자는 "and", "or", "xor"  3가지 이다.

   - 여기에서 일일이 하나씩 설명하지는 않겠다.
   - 비트 단위로 연산이 이루어지는 것이며, 문법은 다음과 같다.
     * and : &
     * or   : |
     * xor : ^




□ 함수 구현

   - 일단은 문제를 검증하기 위한 코드 작성

#include <stdio.h>
#include <stdint.h>

uint32_t to_little(uint32_t bits32)
{
        unsigned char bytes[4];
        uint32_t ret;

        bytes[0] = (unsigned char)((bits32 >>  0) & 0xff);
        bytes[1] = (unsigned char)((bits32 >>  8) & 0xff);
        bytes[2] = (unsigned char)((bits32 >> 16) & 0xff);
        bytes[3] = (unsigned char)((bits32 >> 24) & 0xff);

        ret = ( (uint32_t)bytes[0] <<  0 ) |
              ( (uint32_t)bytes[1] <<  8 ) |
              ( (uint32_t)bytes[2] << 16 ) |
              ( (uint32_t)bytes[3] << 24 );

        return ret;
}

uint32_t to_big(uint32_t bits32)
{
        unsigned char bytes[4];
        uint32_t ret;

        bytes[0] = (unsigned char)((bits32 >>  0) & 0xff);
        bytes[1] = (unsigned char)((bits32 >>  8) & 0xff);
        bytes[2] = (unsigned char)((bits32 >> 16) & 0xff);
        bytes[3] = (unsigned char)((bits32 >> 24) & 0xff);

        ret = ( (uint32_t)bytes[0] << 24 ) |
              ( (uint32_t)bytes[1] << 16 ) |
              ( (uint32_t)bytes[2] <<  8 ) |
              ( (uint32_t)bytes[3] <<  0 );

        return ret;
}

int main()
{
        uint32_t i = 2018915346;

        printf("[ %u ]\n", i);
        printf("        %u\n", to_little(i));
        printf("        %u\n", to_big(i));


        i = 1;

        printf("[ %u ]\n", i);
        printf("        %u\n", to_little(i));
        printf("        %u\n", to_big(i));


        i = 100000;

        printf("[ %u ]\n", i);
        printf("        %u\n", to_little(i));
        printf("        %u\n", to_big(i));


        i = 4294967295u;

        printf("[ %u ]\n", i);
        printf("        %u\n", to_little(i));
        printf("        %u\n", to_big(i));

        return 0;
}


반응형

라디오를 통해 영어 공부를 하고픈 사람들이라면 누구나 알고 있을 [ 굿모닝 팝스 ]

친절하게도 팟캐스트를 통해 상당히 빠르게 잘 편집된 컨텐츠를 제공해주고 있다.

그리고 너무나 친절하게도 안드로이드 앱으로 편하게 공부할 수 있도록 제공해준다.


[ GMPlayer ]로 검색하면 된다.



귀로만 듣고 끝나면 정말 아쉽다.



눈으로도 공부를 해야하는데...

너무나 친절한 분들이 해당 컨텐츠를 잘 제공해주고 있다.


     - 새로운 세상을 꿈꾸며
     - http://kairos2009.tistory.com/
     - 그 날의 스크립트를 너무나 친절하게도 잘 올려주고 계신다.



     - bling_gem
     - http://blog.naver.com/bling_gem?Redirect=Log&logNo=40162758693
     - 깔끔하게 이쁘지는 않지만 꾸준히 잘 올려주는 고마운 블로그



     - 헤일리님의 블로그
     - http://blog.naver.com/hayley0320?Redirect=Log&logNo=10141694184
     - 보기 편하진 않지만, 예쁘게 정리된 스크립트를 제공해주는 감사한 블로그




스크립트 보면서 팟캐스트를 들으며 공부를 하면 금상첨화~!!!!

모두들 즐거운 영어공부~~~~!!!!!

반응형

+ Recent posts