Flutter로 인증을 구현하려고 하는데,

각종 Social Service를 통해 가입을 할 수 있도록 하려면 왠지 힘들것 같다.


그런데, Firebase를 이용하면

이 부분을 손쉽게 할 수 있다고 해서 한 번 알아보고자 한다.




1. Flutter Project 생성


   - 기본 환경 구축은 아래 링크를 통해서 진행했다고 가정하고...

      - Flutter 설치 : https://www.whatwant.com/entry/Flutter-Install-Flutter-설치하기-Windows

      - Flutter with VSCode : https://www.whatwant.com/entry/Flutter-with-Visual-Studio-CodeVSCode

   - Flutter로 로그인 페이지를 꾸밀 프로젝트를 하나 생성하자.



   - 이름 정해주고, 위치 잡아주면 열심히 기본 프로젝트 생성된다.



   - 일단 여기까지만 해놓고... Firebase로 넘어가자.





2. Firebase Project 생성


   - 가입/로그인은... Google 계정으로 가뿐하게 하시면 되고...



   - 시작하고 프로젝트 만들기에 들어가보자.



   - 이름은 마음에 드는 것으로...



   - 당장은 애널리틱스에 대해서 고려하지 않을거지만, 왠지 안하면 섭섭하니...



   - 아직 뭔지 모르겠지만... 뭐 그냥 해보자.



   - 이제 마무리다~ 고고!! 고고!!



   - 그러면, 예쁜 페이지가 짠~!!








3. Android App에 Firebase 추가


   - Flutter와 Firebase 사이에 연결고리를 추가하는 과정이다.


   - 위 홈페이지 프로젝트 이름 밑에 동그란 아이콘 3개가 보일 것이다. 가운데에 있는 안드로이드를 클릭하자



   - 응?! 패키지 이름 정해준 적 없는데?!

   - command-line으로 Flutter 프로젝트를 생성했으면 명시했겠지만, VSCode에서는 그냥 이름으로 생성했는데...

   - 찾아보자.



   - 아까 생성한 Project에서 android - app - src - main 경로에 있는 "AndroidManifest,xml" 파일을 보면 package 이름이 보인다.



   - 패키지 이름은 그렇게 넣어주면 되고... 닉네임은 그냥 마음대로 넣으면 되고... 어?! 인증서?!

   - 물음표에 마우스 올리면 위와 같이 설명이 나온다. 참조할 페이지 클릭!



   - 개발용으로 쓰이는 key값은 이미 있기에 그걸로 불러오면 된다.



   - 위와 같이 사용자 계정 폴더에 있는 .android 디렉토리 밑에 보면 위와 같이 파일들이 주르륵 있는 것이 보일 것이다.

   - PowerShell 실행해서 위의 홈페이지에 있는 명령어를 실행해야 하는데...



   - 아뿔사~ JDK가 없다. ㅋㅋㅋ


   - OpenJDK 접속

      - https://github.com/ojdkbuild/ojdkbuild



   - 일단 LTS 버전 중에서 11 버전의 msi 다운로드 받아서 설치했다.

   - PowerShell 재시작 하고...



   - 잘된다 !!!


> keytool -list -v -alias androiddebugkey -keystore C:\Users\xxx\.android\debug.keystore



   - 비밀번호를 갑자기 물어본다고 당황하지 말고... 위의 홈페이지에 친절하게 쓰여져있다. "android"



   - 우리에게 필요한 값은? SHA1 값 !!!



   - 드디어 넣을 것 다 넣었다... 앱 등록 !!!



   - json 파일 다운로드 받아서 쩌~기 위치에 넣으란다.


   - android - app 밑에다가 넣어주면 된다.



   - 실제로 잘 들어가 있는 모습을 볼 수 있다.



   - 이제 다음~



   - 위 화면에서 녹색으로 보이는 부분을 복사해서 build.gradle 파일에 붙여넣기 하면 된다.

   - 주의할 점은 android 경로 바로 밑에 있는 build.gradle 파일의 dependencies 부분에 넣어줘야 한다.



   - 밑에 있는 것들도 마찬가지로 진행하면 된다.

   - 주의할 점은 밑에 있는 것들은 android - app 밑에 있는 build.gradle에 반영해야 된다는 점!!!



   - 첫번째 녹색 라인은 이미 반영되어 있으니, 2/3번째 녹색 라인만 위치에 맞게 넣어주면 된다.



   - 알맞게~



   - Sync는 뭐 넘어가고 이제 다음 단계로 가자!



   - 어?! 확인을 해야 한단다.


   - 놀고 있는 폰을 연결하고... (당연히 개발자 모드 열어서 USB 디버그 모드 설정해서)



   - flutter: select device 열어서



   - 연결한 스마트폰 설정하고



   - 왼쪽 4번째 아이콘 클릭해서... Run and Debug 눌러주면 된다.



   - false 뜬다고 당황하지 말고... 좀 기다리면 된다.



   - 그러면 위와 같이 수고했다는 메시지를 볼 수 있다.




에고 에고... 힘들었다.



반응형


형상관리 도구로써

Git 자체는

Command line 방식으로

사용하는 것을 추천한다.


나만 이렇게 생각하는 것은 아니라고 생각한다.

많은 분들이 동감할 것이다.



그래서

Windows 환경에서도

Git-bash를 사용해서

Git을 사용하고 있는데...






문제는

GitHub를 사용할 때에는

결국

Web 환경을 사용할 수 밖에 없다.



Issue를 확인한다던지,

Pull-Request를 한다던지...




하지만, 웹을 사용하기 어려운 경우...

아니면, 웹을 사용하기 싫은 경우...


우리에게 필요한 것은 뭐 ?!


"GitHub CLI"



최근에 GitHub에서 version 1.0을 릴리즈 하였다.



https://cli.github.com/





1. Installation (Win)



설치는 그냥 다운로드 받아서 Next 연타 하면 끝

(Linux, Mac도 손쉽게 할 수 있다)



실행은

Git-bash 또는 PowerShell

모두 잘 된다.







2. Authentication


Beta 버전 때에는 Enterprise를 지원하지 않는데,

v1.0 정식 릴리즈에서는

github.com + Enterprise

모두 잘 지원한다 !!!


예를 들어서 Issues 목록을 보고 싶다고 하는 경우

GitHub Client에게

어떤 repository의 Issues 목록을 보고 싶은지를

알려줘야 한다.


그리고 또하나 필요한 것은

Issues를 읽어올 수 있는

인증/권한을 셋팅하는 것 !!!



기본적인 인증 등록은 아래와 같다.


GitHub-bash에서는 정상동작하지 않는다.

PowerShell에서 실행하면 된다.


$ gh auth login


GitHub.com과 Enterprise를 고를 수 있다.



일단, GitHub.com을 선택해보았다.



웹브라우져로 할 수도 있고,

token값을 넣을 수도 있다.


웹브라우져를 선택했다.



코드값 잘 복사해놓고 엔터를 누르면 된다.



default 브라우저가 IE로 되어있으면

잘 안될 수도 있다고 한다.


Chrome 권장


위에서 복사한 코드값 넣고 'Continue' 클릭~



권한 주면 된다.


패스워드 한 번 더 확인해주고~



축하받으니 뭔가 좋긴 한데... ^^



앞에 화면 하나 캡처하지 못했는데...


기본 프로토콜로 HTTPS 사용할건지 SSH 사용할건지 묻는 화면도 있다.


굳이 HTTPS 사용할 이유는 없어서 SSH로 설정했다.






3. Usage


이제 어떻게 동작하는지 살펴보자.


> gh issue list -R [OWNER/REPO]



텍스트로 목록을 잘 보여준다.

한글도 잘 나오는 것을 볼 수 있다.



> gh issue view [이슈번호] -R [OWNER/REPO]



텍스트로 본문도 볼 수 있다.


"--web" 옵션을 사용하면 브라우져로 확인할 수도 있다.






사용할 수 있는 명령어들과 옵션들은 아래 사이트에서 확인할 수 있다.


https://cli.github.com/manual/




반응형


기본적인 Flutter 개발환경은 아래 글을 통해 설치해보았다.


  - https://www.whatwant.com/entry/Flutter-Install-Flutter-설치하기-Windows




하지만, 요즘 유행인 Visual Studio Code를 이용하고픈 사람들도 있을 것이다.


이런 요구사항이 높았는지... Flutter에서도 공식적으로 가이드를 제공해주고 있다.


  - https://flutter.dev/docs/development/tools/vs-code




그래서 직접 한 번 해보았다.



1. Visual Studio Code 설치


  - https://code.visualstudio.com/







2. Install Extension


  - Flutter Extension을 설치해주면 된다.

    - 유사품에 주의하고 'Dart Code'에서 제공해주는 것을 install 하면 된다.

    - 자동으로 Dart Extension도 같이(몰래) 설치된다.



  - Restart VSCode




3. Check


  - "Ctrl+Shift+P" 또는 "View > Command Palette..." 실행해서 'flutter'를 타이핑 해보자

  - "Flutter: Run Flutter Doctor" 고르면 된다.



  - 그런데, 아래와 같이 2번째 항목에서 [!] 발견 !!!





4. Accept Android Licenses


  - 위 메시지에서 보이는바와 같이 친절하게 해결 방법도 알려 준다.

  - "View -> Terminal" 또는 "Ctrl+`", 아니면 그냥 TERMINAL 탭 선택

  - "> flutter doctor --android-licenses" 실행

    - 무조건 y 엔터






5. New Project


  - 이제 아래와 같이 Flutter Project를 생성하면 된다.



반응형


리눅스를 정말 좋아하지만 ...


뜬금없는 에러상황을 부딪힐때면 좀 짜증이...



내가 사용했던 명령어 기록들을 저장하는 history 파일에 문제가 있단다.


왜? 대체 왜?



$ cd ~                          


$ mv .zsh_history .zsh_history.0831


$ strings .zsh_history.0831 .zsh_history


$ fc -R .zsh_history



위와 같이 진행하면 고쳐진다.




반응형


집에서 PC를 여러대 사용하다보니

보다 편한 파일 공유를 위해서


공유폴더


를 사용하고 있다.



그러다가...


최신병에 걸려있기에

항상 찝찝하게 남아있던

윈도우즈 업데이트를

큰 맘 먹고

진행했는데...



아! 글쎄!

공유폴더에 접근이 안되는거다 !!!



우쒸~



하지만, 이 길을 먼저 걸으신

훌륭한 분의 글을 접하고선 해결했다.



https://sihloh4me.tistory.com/284




gpedit.msc 를 실행하고




관리 템플릿 - 네트워크 - Lanman 워크스테이션


보안되지 않은 게스트 로그온 사용



값을 "사용"으로 변경하면 된다 !!





재부팅도 없이 바로 해결~!!!!


반응형

SiteMap


sitemap.xml


반응형


기본 환경은

아래와 같이 준비해놓자


Minikube Install

https://www.whatwant.com/entry/Minikube-install-in-Ubuntu-1804-in-VirtualBox


Node.js Install

https://www.whatwant.com/entry/Nodejs-install-in-Ubuntu-1804




1. 준비


    - Minikube 시작해 놓고...


❯ minikube start


    - dashboard 띄워서 눈으로 보고...


❯ minikube dashboard


    - 웹서버 소스 파일 준비해놓고....


❯ nano ./server.js


var http = require('http');

var os = require('os');


var host = os.hostname();

var handleRequest = function(request, response) {

    console.log('Received request for URL: ' + request.url);

    response.writeHead(200);

    response.end('Server is running on: ' + host);

};


var www = http.createServer(handleRequest);

www.listen(8080);




2. docker 환경 맞추기


    - Minikube를 위한 docker 환경을 갖춰야 한다.


    - Minikube에서 요구하는 docker-env는 뭔지 확인해본다.


❯ minikube docker-env


export DOCKER_TLS_VERIFY="1"

export DOCKER_HOST="tcp://192.168.99.100:2376"

export DOCKER_CERT_PATH="/home/chani/.minikube/certs"

export MINIKUBE_ACTIVE_DOCKERD="minikube"


# To point your shell to minikube's docker-daemon, run:

# eval $(minikube -p minikube docker-env)


    - 뭘 해야하는지 밑에서 알려줬다.


❯ eval $(minikube -p minikube docker-env)


    - 잘 되었는지 확인해보자.


❯ docker images -a


REPOSITORY                                TAG                 IMAGE ID            CREATED             SIZE

gcr.io/k8s-minikube/storage-provisioner   v2                  9c3ca9f065bb        2 weeks ago         32.2MB

kubernetesui/dashboard                    v2.0.1              85d666cddd04        3 months ago        223MB

k8s.gcr.io/kube-proxy                     v1.18.3             3439b7546f29        3 months ago        117MB

k8s.gcr.io/kube-apiserver                 v1.18.3             7e28efa976bd        3 months ago        173MB

k8s.gcr.io/kube-scheduler                 v1.18.3             76216c34ed0c        3 months ago        95.3MB

k8s.gcr.io/kube-controller-manager        v1.18.3             da26705ccb4b        3 months ago        162MB

kubernetesui/metrics-scraper              v1.0.4              86262685d9ab        4 months ago        36.9MB

k8s.gcr.io/pause                          3.2                 80d28bedfe5d        6 months ago        683kB

k8s.gcr.io/coredns                        1.6.7               67da37a9a360        6 months ago        43.8MB

k8s.gcr.io/etcd


    - Minikube에서 쓰이는 아이들이 보이면 잘 된것이다.




3. Docker build


    - 준비되어있는 server.js 파일을 담는 docker 이미지를 만들어 보자


    - dockerfile 부터 만들어 보자.


❯ ls -al


합계 12

drwxr-xr-x 2 chani chani 4096  8월 22 04:59 .

drwxr-xr-x 3 chani chani 4096  8월 22 04:58 ..

-rw-r--r-- 1 chani chani  336  8월 22 04:59 server.js


❯ nodejs --version  


v12.18.3


❯ nano ./dockerfile


FROM node:12.18.3

EXPOSE 8080

COPY server.js .

CMD node server.js


    - 이제 빌드를 해보자.


❯ docker build -t whoru:v1 -f dockerfile .


Sending build context to Docker daemon  3.072kB

Step 1/4 : FROM node:12.18.3

12.18.3: Pulling from library/node

419e7ae5bb1e: Pull complete 

848839e0cd3b: Pull complete 

de30e8b35015: Pull complete 

258fdea6ea48: Pull complete 

ddb75eb7f1e9: Pull complete 

7ec8a0667334: Pull complete 

3366ea2fc4ca: Pull complete 

48116fadad2c: Pull complete 

27e46094f3f2: Pull complete 

Digest: sha256:d0738468dfc7cedb7d260369e0546fd7ee8731cfd67136f6023d070ad9679090

Status: Downloaded newer image for node:12.18.3

 ---> cfcf3e70099d

Step 2/4 : EXPOSE 8080

 ---> Running in 042f882d14c1

Removing intermediate container 042f882d14c1

 ---> 20836a2513a7

Step 3/4 : COPY server.js .

 ---> f0dd3d753786

Step 4/4 : CMD node server.js

 ---> Running in 252610e59ae9

Removing intermediate container 252610e59ae9

 ---> 3dcf96f4c978

Successfully built 3dcf96f4c978

Successfully tagged whoru:v1


    - 잘 만들어졌는지 확인해보자.


❯ docker images


REPOSITORY                                TAG                 IMAGE ID            CREATED              SIZE

whoru                                     v1                  3dcf96f4c978        About a minute ago   917MB

node                                      12.18.3             cfcf3e70099d        2 weeks ago          917MB

gcr.io/k8s-minikube/storage-provisioner   v2                  9c3ca9f065bb        2 weeks ago          32.2MB

kubernetesui/dashboard                    v2.0.1              85d666cddd04        3 months ago         223MB

k8s.gcr.io/kube-proxy                     v1.18.3             3439b7546f29        3 months ago         117MB

k8s.gcr.io/kube-controller-manager        v1.18.3             da26705ccb4b        3 months ago         162MB

k8s.gcr.io/kube-apiserver                 v1.18.3             7e28efa976bd        3 months ago         173MB

k8s.gcr.io/kube-scheduler                 v1.18.3             76216c34ed0c        3 months ago         95.3MB

kubernetesui/metrics-scraper              v1.0.4              86262685d9ab        4 months ago         36.9MB

k8s.gcr.io/pause                          3.2                 80d28bedfe5d        6 months ago         683kB

k8s.gcr.io/coredns                        1.6.7               67da37a9a360        6 months ago         43.8MB

k8s.gcr.io/etcd                           3.4.3-0             303ce5db0e90        10 months ago        288MB


    - 제일 위에 예쁘게 만들어져 있는 것을 볼 수 있다.





4. Pod 생성


    - 방금 만든 Docker image를 실행해 보자.


❯ kubectl run whoru --image=whoru:v1 --port=8080 --image-pull-policy=Never


pod/whoru created


    - dashboard에서 확인해볼 수 있다.



    - 물론 명령어로도 확인할 수 있다.


❯ kubectl get pods


NAME    READY   STATUS    RESTARTS   AGE

whoru   1/1     Running   0          3m28s



❯ kubectl describe pod whoru


Name:         whoru

Namespace:    default

Priority:     0

Node:         minikube/192.168.99.100

Start Time:   Sat, 22 Aug 2020 05:43:50 +0900

Labels:       run=whoru

Annotations:  <none>

Status:       Running

IP:           172.17.0.5

...




5. Service 생성


    - Pod만 가지고는 접근할 방법이 없다.

    - 연결고리 역할을 해주는 Service를 생성해보자.


❯ kubectl expose pod whoru --type=LoadBalancer


service/whoru exposed


    - 당연히 dashboard에서도 나타난다.



    - Service를 통해 접근이 가능한지 테스트 해보자.


❯ minikube service whoru


|-----------|-------|-------------|-----------------------------|

| NAMESPACE | NAME  | TARGET PORT |             URL             |

|-----------|-------|-------------|-----------------------------|

| default   | whoru |        8080 | http://192.168.99.100:31610 |

|-----------|-------|-------------|-----------------------------|

🎉  Opening service default/whoru in default browser...

 chani  /srv/workspace/server

❯ 기존 브라우저 세션에서 여는 중입니다.




다음 단계는 다음 포스팅으로~

반응형

'잘난놈되기' 카테고리의 다른 글

Docker Hub 활용  (0) 2020.11.14
SiteMap  (0) 2020.08.30
Node.js install (in Ubuntu 18.04)  (0) 2020.08.22
의자 가죽 리폼 (피아노의자, 식탁의자)  (0) 2020.05.25
인터넷 속도 측정 사이트 (넷플릭스)  (0) 2020.03.14


Node.js를 사용할 일이 있어서 빠르게 찾아봤다.



Reference: https://github.com/nodesource/distributions/blob/master/README.md#debinstall




1. PPA 등록


    - curl도 싫어하고 ppa 등록하는 것도 싫어하지만...


> curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -




2. nodejs 설치


    - 이제 그냥 설치하면 된다.


❯ sudo apt install -y nodejs




3. Test


    - 잘 되는지 직접 해보자.


> nano ./server.js


var http = require('http');

var os = require('os');


var host = os.hostname();

var handleRequest = function(request, response) {

    console.log('Received request for URL: ' + request.url);

    response.writeHead(200);

    response.end('Server is running on: ' + host);

};


var www = http.createServer(handleRequest);

www.listen(8080);


> nodejs ./server.js


    - 웹브라우저로 살펴보자.




잘 된다!!!



반응형

+ Recent posts