일간 보관물: 2016-11-16

기본

게시자:

게시 날짜:

2016-11-16

게시 위치:

google, Uncategorized

댓글

댓글 남기기

Firebase Analytics + BigQuery

조대협님의 https://www.youtube.com/watch?v=Wi4mFICwoBE 를 보고 시작
%e1%84%89%e1%85%b3%e1%84%8f%e1%85%b3%e1%84%85%e1%85%b5%e1%86%ab%e1%84%89%e1%85%a3%e1%86%ba-2016-11-16-%e1%84%8b%e1%85%a9%e1%84%92%e1%85%ae-10-53-24

1.https://firebase.google.com 으로 접속한 후 프로젝트를 하나 생성한다 보이다시피 앱이름은 [BistrosAppTest]로 정했다. 이후 다음과 같은 초기화면을 볼 수 있다.

%e1%84%89%e1%85%b3%e1%84%8f%e1%85%b3%e1%84%85%e1%85%b5%e1%86%ab%e1%84%89%e1%85%a3%e1%86%ba-2016-11-16-%e1%84%8b%e1%85%a9%e1%84%92%e1%85%ae-10-59-432.  이후 iOS 앱으로 진행 할 예정이므로 iOS앱에 Firebase추가를 누르면 아래 화면을 볼 수 있다. X-code에서 테스트 프로젝트를 만들고 General 탱베서 bundle ID를 카피해와서 붙여넣으면 된다.

%e1%84%89%e1%85%b3%e1%84%8f%e1%85%b3%e1%84%85%e1%85%b5%e1%86%ab%e1%84%89%e1%85%a3%e1%86%ba-2016-11-16-%e1%84%8b%e1%85%a9%e1%84%92%e1%85%ae-11-00-34

3.앱 추가를 누르면 Info.plist 파일이 자동으로 다운로 되는데, 파일을 Project Folder로 Copy하자.

%e1%84%89%e1%85%b3%e1%84%8f%e1%85%b3%e1%84%85%e1%85%b5%e1%86%ab%e1%84%89%e1%85%a3%e1%86%ba-2016-11-16-%e1%84%8b%e1%85%a9%e1%84%92%e1%85%ae-11-02-204. Pods를 설정하기 위해 터미널로 프로젝트 폴더로 이동한다. 이후 Pod를 생성 및 편집한뒤 [ pod install ] 을 수행한다. 이후 workspace 파일을 열면 된다.

%e1%84%89%e1%85%b3%e1%84%8f%e1%85%b3%e1%84%85%e1%85%b5%e1%86%ab%e1%84%89%e1%85%a3%e1%86%ba-2016-11-16-%e1%84%8b%e1%85%a9%e1%84%92%e1%85%ae-11-04-085. Swift을 사용할 예정이다. AppDelegate.swift을 연다음   [ import  Firebase ] [ FIRApp.configure() ] 2줄을 각자 위치에 입력한다.

6. 여기까지 성공하였다면 다음  화면을 볼 것이다. 이제 BigQuery를  셋팅하기 위해 [프로젝트 설정 -> 계정 연결 ]로 이동하여 그 밑의 화면을 봐야한다.

%e1%84%89%e1%85%b3%e1%84%8f%e1%85%b3%e1%84%85%e1%85%b5%e1%86%ab%e1%84%89%e1%85%a3%e1%86%ba-2016-11-16-%e1%84%8b%e1%85%a9%e1%84%92%e1%85%ae-11-04-27%e1%84%89%e1%85%b3%e1%84%8f%e1%85%b3%e1%84%85%e1%85%b5%e1%86%ab%e1%84%89%e1%85%a3%e1%86%ba-2016-11-16-%e1%84%8b%e1%85%a9%e1%84%92%e1%85%ae-11-10-15

7. BigQuery 사용에 관련해 셋팅을 하고 나면 아래처럼 BigQuery- 연결된 앱 정보를 확인 할 수 있다.

%e1%84%89%e1%85%b3%e1%84%8f%e1%85%b3%e1%84%85%e1%85%b5%e1%86%ab%e1%84%89%e1%85%a3%e1%86%ba-2016-11-16-%e1%84%8b%e1%85%a9%e1%84%92%e1%85%ae-11-10-28%e1%84%89%e1%85%b3%e1%84%8f%e1%85%b3%e1%84%85%e1%85%b5%e1%86%ab%e1%84%89%e1%85%a3%e1%86%ba-2016-11-16-%e1%84%8b%e1%85%a9%e1%84%92%e1%85%ae-11-10-58

 

윗 부분은 설정, 아래 부분은 실제 사용했을 경우에 대한 이야기이다.

 

실제로 위 처럼 따라해보면 Pod에 의해 설치된 프레임웍들은

Using Firebase (3.6.0)
Using FirebaseAnalytics (3.4.2)
Using FirebaseInstanceID (1.0.8)

이지만, API documentation과 실제 사용법은 다르다.  Doc이 업데이트가 안된듯하다.
( https://firebase.google.com/docs/reference/ios/firebaseanalytics/api/reference/Classes/FIRAnalytics )
차라리 sample project를 보는것을 추천한다.
https://github.com/firebase/quickstart-ios/blob/master/analytics/AnalyticsExampleSwift/PatternTabBarController.swift

// [START custom_event_swift]
FIRAnalytics.logEvent(withName: “share_image”, parameters: [ “name”: name as NSObject, “full_text”: text as NSObject ])
// [END custom_event_swift]

이후 BigQuery쪽에는 자동으로  dataset, table이 생성되고, 약 하루 정도 지나면 firebase 대쉬보드에서도 해당 내용을 확 인 할 수 있다.

%e1%84%89%e1%85%b3%e1%84%8f%e1%85%b3%e1%84%85%e1%85%b5%e1%86%ab%e1%84%89%e1%85%a3%e1%86%ba-2016-11-17-%e1%84%8b%e1%85%a9%e1%84%92%e1%85%ae-1-39-50%e1%84%89%e1%85%b3%e1%84%8f%e1%85%b3%e1%84%85%e1%85%b5%e1%86%ab%e1%84%89%e1%85%a3%e1%86%ba-2016-11-17-%e1%84%8b%e1%85%a9%e1%84%92%e1%85%ae-1-41-08

기본

게시자:

게시 날짜:

2016-11-16

게시 위치:

reference

댓글

댓글 남기기

android libraries

* UI

* Network , Image

  • Retrofit
    : http://square.github.io/retrofit/
    : 어노테이션을 이용하여 RestAPI사용을 쉽게 함, RxJava 지원
  • OkHttp
    : https://github.com/square/okhttp
    : Retrofit와 함께 사용할 수 있는 네트워크 라이브러리 (retrofit2는 안에 네트웍 부분이 분리되어져 나옴)
  • Glide
    : https://github.com/bumptech/glide
    : 이미지 다운로드 및 표시를 위한 라이브러리로 Gif, 비디오를 지원
    : Java로 구현, 고화질 이미지나 대용량은 성능이 떨어지므로 정적 이미지만 쓸꺼라면 피카소를 고려해볼것
  •  Fresco
    : http://frescolib.org/
    : Java가 아닌 JNI 사용해서 성능은 좋지만 바이너리 크기가 많이 증가한다
    : Glide에 비해 좀 더 사용이 복잡하고 ImageView가 아닌 DraweeView는 자체뷰를 사용해야한다.
기본

게시자:

게시 날짜:

2016-11-16

게시 위치:

frontend

댓글

댓글 남기기

AMP


GDG DevFest Seoul 발표 동영상을 보고 간략히 정리

AMP ( Accellerated Mobile Pages By Google )
웹페이지(특히 정적페이지)를 더 빠르게 랜더링 하기 위한 방법으로, 퍼포먼스 향상을 위한 구글의 경험과 베스트 플랙티스의 구현체

* AMP는 일반적인 웹페이지 일뿐이다. 단
1. AMP HTML : 일반 HTML에서 좀 더 확장이 된 것이지만, <img><video>등은 사용이 불가능하다 대체 방법을 써야한다.
2. amp.js : 웹페이지의 퍼포먼스 향상을 위한 베스트 플랙티스의 구현체
– 외부JS를 허용하지 않는다. 쓰고 싶으면 sandbox iframe에서 가능하다.
– AMP 페이지와 리소스 라이프사이클 및 랜더링 타임을 제어한다.
3. AMP STYLE = CSS
– 외부 스타일, 엘리먼트 인라인 스타일 허용안하고 문서에 삽입하는 형태로만 허용한다.
– 최대50kb를 허용한다.
4. AMP Cache
– AMP 페이지가 발견되면 구글 CDN Cache에 등록이 된다.
– URL 이 구글CDN의 url로 변경되어 identity가 저하되는 단점이 있다.

* 어떻게 만드는가?
– 일반 웹페이지를 만들고, 동일하게 AMP 페이지를 만든다.
– 현재로서는 구글 검색과, wechat(메신저 / 아직 예정)에서 AMP page를 사용한다.
* Example
– html page 최상단에 amp 를 붙이고 js를 async로 로딩한다
https://www.ampproject.org/docs/get_started/create/basic_markup
– amp-img등은 기본으로 제공하고, 이 외 youtube와 같은 확장 컴포넌트들을 제공한다
https://www.ampproject.org/docs/reference/components
ex page) http://1boon.kakao.com/tlxpass/bandworkout/amp
* AMP 가 사용한 베스트 플랙티스
– 비동기스크립트만 허용한다.
: 페이지 랜더링을 차단하는 자바스크립트를 방지한다.
: 그러기 위해 AMP JS를 제외한 다른 외부 스크립트는 허용하지 않는다.
: 확장 컴포넌트들도 JS 로딩때문에 랜더링이 차단되지 않도록 한다
– 모든 리소스 사이즈를 지정한다
: 리소스 다운로드 없이 사이즈 위치 계산과, 레이아웃을 지정하기 위해서 필수 지정한다
– CSS 는 내부 스타일 시트만 허용하고 크기를 제한한다.
: 외부 CSS 허용안하고, 내부 CSS는 50KB로 제한다
– 웹폰트의 효율적 다운로드
: 웹폰트를 다운로드 할때 차단되는 구간이 있기 때문에 제일 앞단에서 폰트를 다운로드 받게함
– 스타일 재계산을 최소화
– GPU 가속 애니메이션만 실행
페이지 레이아웃이 발생하지 않는 transform, opacity
– 리소스 로딩 순서를 제어
– 페이지를 즉시 로드
미리 가져올 페이지를 뷰포트만큼만 가져온다 (preconnect API)

* AMP internal
– https://www.w3.org/TR/custom-elements/
– FSM을 이용 http://d2.naver.com/helloworld/6856597
– Single Pass Process
수행할 작업을 Pass에 등록한다.
– Promise pattern
– reflow를 최적화 함
: reflow는 repaint를 발생하므로 가능한한 안 일어나는게 좋다.
: js 최적화보다 reflow 1번 안 읽어나는게 중요하다.
: Vsync라는 클래스를 제공해서 reflow작업을 최적화 할 수 있게 한다.
* reference
– https://www.ampproject.org/docs/get_started/create
– http://d2.naver.com/helloworld/6856597
– https://www.youtube.com/watch?v=e6slMlFgdCQ