Nuxt.js + storybook 연동법

from Vue 2018. 6. 8. 20:51
npm i -g @storybook/cli
getstorybook

yarn run storybook


$ npm i @storybook/addon-notes   
import '@storybook/addon-notes/register';
import '@storybook/addon-knobs/register';
npm install @storybook/addon-knobs --save-dev

https://github.com/storybooks/storybook/tree/master/addons/knobs


,


차이점음 저정적이냐 동적이냐라는 차이가 있습니다.


화면이 계속적으로 변환이 필요할때는 StatefulWidget을


한번 로딩후 변화가 없다면 StatelessWidget을 사용.





틀린게 있으면 댓글로 알려주세요 ㅋ;

,

[flutter] Navigator 테스트

from flutter 2018. 4. 30. 02:22
void main() {
runApp(new MaterialApp(
home: new MyAppHome(), // becomes the route named '/'
routes: <String, WidgetBuilder> {
'/a': (BuildContext context) => new MyPage(title: 'page A'),
'/b': (BuildContext context) => new MyPage(title: 'page B'),
'/c': (BuildContext context) => new MyPage(title: 'page C'),
},
));
}

class MyAppHome extends StatefulWidget {
@override
_MyAppHomeState createState() => new _MyAppHomeState();
}

class _MyAppHomeState extends State<MyAppHome> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: new Text("data"),),
body: Center(
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new RaisedButton(
child: new Text("A"),
onPressed: ()=>Navigator.pushNamed(context, '/a'),
),
new Padding(padding: const EdgeInsets.all(20.0),),
new RaisedButton(
child: new Text("B"),
onPressed: ()=>Navigator.pushNamed(context, '/b'),
),
new Padding(padding: const EdgeInsets.all(20.0),),
new RaisedButton(
child: new Text("C"),
onPressed: ()=>Navigator.pushNamed(context, '/c'),
)
],
),
),
);
}
}


class MyPage extends StatefulWidget {
final String title;
MyPage({this.title});



@override
_MyPageState createState() => new _MyPageState();
}

class _MyPageState extends State<MyPage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: new Text(widget.title),),
body: new Center(
child: new RaisedButton(
child: new Text("back"),
onPressed: ()=>Navigator.pop(context),
),
),
);
}
}


참고  : https://docs.flutter.io/flutter/widgets/Navigator-class.html



stack 의 형식으로 navigator가 동작


,

두개의 에뮬레이터를 on을 하고 


flutter run -d all 


두장비가 동시에 디버깅 

,

[issue] flutter firebase auth

from flutter 2018. 4. 9. 23:00

Launching lib\main.dart on Android SDK built for x86 in debug mode...

registerResGeneratingTask is deprecated, use registerGeneratedFolders(FileCollection)

registerResGeneratingTask is deprecated, use registerGeneratedFolders(FileCollection)

registerResGeneratingTask is deprecated, use registerGeneratedFolders(FileCollection)

Built build\app\outputs\apk\debug\app-debug.apk (26.9MB).

I/FlutterActivityDelegate(10486): onResume setting current activity to this

D/EGL_emulation(10486): eglMakeCurrent: 0x9c805780: ver 2 0 (tinfo 0x7dbfb280)

I/FlutterActivityDelegate(10486): onResume setting current activity to this

D/EGL_emulation(10486): eglMakeCurrent: 0x9c805780: ver 2 0 (tinfo 0x7dbfb280)




debug.keystore 이것도 등록고,  익명로그인도 잘되는데 구글 로그인만 잘안될경우


androidstudio에 들어가서 firebase sync 한번 해주면 연결됨..... 구글링해도 안나와서 개고생함... 

,

[flutter] cloud_firestore

from flutter 2018. 4. 5. 11:37

선행으로 firebase google login 부분이 진행 되어야 합니다.



Cloud firebase setting


Database 규칙에  이래와 같이 넣어줍니다.


service cloud.firestore {
match /databases/{database}/documents {
match /messages/{anything=**}{
  allow read,write: if true;
}
match /{document=**} {
allow read, write: if false;
}
}
}



데이터의 컬렉션에 messages 메시지 추가




pubspec.yaml


dependencies:
flutter:
sdk: flutter

# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cloud_firestore: "^0.2.10"
cupertino_icons: ^0.1.0
google_sign_in: "^3.0.0"
firebase_auth: "^0.5.3"

이상하게 cloud_firestore  0.4.0 버전을 사용하면 패키지를 못가지고오고  그 아래 버전 몇개는 패키지는 가지고오는데 컴파일이 안되더군요.. 이부분 해결하신분 좀 알려주세요  




다음은  cloud_firestore 샘플 코드를 넣어줍니다.


import 'dart:async';

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

void main() {
runApp(new MaterialApp(title: 'Firestore Example', home: new MyHomePage()));
}

class MessageList extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new StreamBuilder<QuerySnapshot>(
stream: Firestore.instance.collection('messages').snapshots,
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (!snapshot.hasData) return const Text('Loading...');
final int messageCount = snapshot.data.documents.length;
return new ListView.builder(
itemCount: messageCount,
itemBuilder: (_, int index) {
final DocumentSnapshot document = snapshot.data.documents[index];
return new ListTile(
title: new Text(document['message'] ?? '<No message retrieved>'),
subtitle: new Text('Message ${index + 1} of $messageCount'),
);
},
);
},
);
}
}

class MyHomePage extends StatelessWidget {
CollectionReference get messages => Firestore.instance.collection('messages');

Future<Null> _addMessage() async {
messages.document().setData(<String, String>{'message': 'Hello world!'});
}

@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: const Text('Firestore Example'),
),
body: new MessageList(),
floatingActionButton: new FloatingActionButton(
onPressed: _addMessage,
tooltip: 'Increment',
child: new Icon(Icons.add),
),
);
}
}













,

Google Login을 하기위헤서는 일단.   firebase 셋팅이 필요합니다.


셋팅이 안되신분은 참고  =>   http://jdj610.tistory.com/162



1. flutter프로젝트에 package를 등록합니다.  pubspec.yaml 


dependencies:
flutter:
sdk: flutter

# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.0
google_sign_in: "^3.0.0"
firebase_auth: "^0.5.3"


2.   main.dart에 넣어주세요


import 'dart:async';
import 'package:flutter/material.dart';

import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';

final FirebaseAuth _auth = FirebaseAuth.instance;
final GoogleSignIn googleSignIn= new GoogleSignIn();

GoogleSignIn _googleSignIn = new GoogleSignIn(
scopes: <String>[
'email',
'https://www.googleapis.com/auth/contacts.readonly',
],
);

void main() {
runApp(
new MaterialApp(
title: 'Google Sign In',
home: new SignInDemo(),
),
);
}

class SignInDemo extends StatefulWidget {
@override
_SignInDemoState createState() => new _SignInDemoState();
}

class _SignInDemoState extends State<SignInDemo> {

String _user_text = null;

Future<String> _testSignInAnonymously() async {
final FirebaseUser user = await _auth.signInAnonymously();
assert(user != null);
assert(user.isAnonymous);
assert(!user.isEmailVerified);
assert(await user.getIdToken() != null);

assert(user.providerData.length == 1);
assert(user.providerData[0].providerId == 'firebase');
assert(user.providerData[0].uid != null);
assert(user.providerData[0].displayName == null);
assert(user.providerData[0].photoUrl == null);
assert(user.providerData[0].email == null);
final FirebaseUser currentUser = await _auth.currentUser();
assert(user.uid == currentUser.uid);
print(currentUser.uid);
setState(() { _user_text=currentUser.uid; });


return 'signInAnonymously succeeded: $user';
}

Future<String> _testSignInWithGoogle() async {
final GoogleSignInAccount googleUser = await _googleSignIn.signIn();
final GoogleSignInAuthentication googleAuth =
await googleUser.authentication;
final FirebaseUser user = await _auth.signInWithGoogle(
accessToken: googleAuth.accessToken,
idToken: googleAuth.idToken,
);
assert(user.email != null);
assert(user.displayName != null);
assert(!user.isAnonymous);
assert(await user.getIdToken() != null);

final FirebaseUser currentUser = await _auth.currentUser();
assert(user.uid == currentUser.uid);
print(currentUser.uid);
setState(() { _user_text=currentUser.uid; });
return 'signInWithGoogle succeeded: $user';
}

Future<Null> _handleSignOut() async {
await FirebaseAuth.channel.invokeMethod("signOut");
final FirebaseUser currentUser = await _auth.currentUser();
setState(() { _user_text=currentUser.uid; });
}

Future<Null> get_uid() async{
final FirebaseUser currentUser = await _auth.currentUser();
print(currentUser);
setState(() { _user_text=currentUser.uid; });
}

@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Container(
child: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new RaisedButton(
child: new Text("Sign Google "),
color: Colors.redAccent,
onPressed: _testSignInWithGoogle,
),
new RaisedButton(
child: new Text("Sign Anonymously"),
color: Colors.blueAccent,
onPressed:_testSignInAnonymously,
),
new RaisedButton(
child: new Text("SignOut"),
color: Colors.orangeAccent,
onPressed: _handleSignOut,
)
],
),
_user_text == null ? new Text("Null"):new Text(_user_text),
],
)

),
),
);
}
}



그리고 실행하면 됩니다.



,





1. https://firebase.google.com에서 프로젝트를 생성





2.생성이 완료되면 Android app에 firebase를 추가함 클릭




3.자신의 패키지 이름을 찾아서 입력 합니다. 

저는 com.example.todo입니다.



디버그 서명 인증서 SHA-1를 등록합니다.


등록 방법은  커맨드창에  아래와 같이 입력후

 

keytool -exportcert -list -v -alias androiddebugkey -keystore "C:\Users\USERID\.android\debug.keystore"



debug.keystore가 있는 경로를 찾아서 등록하시면 됩니다. 


password는 기본적 셋팅값은 android 입니다.   


그럼 인증서가 출력되는데 인증서중 sha-1의 데이터를 복사해서 넣어주시면 됩니다.




4. google-services.json파일을 다운로드 후 자신의 프로젝트 android/app경로에 넣어줍니다.










5. Gradle 설정아래의 설명과 같이 자신의 프로젝트에 등록해 줍니다.


android/ gradle

buildscript {
   
// ...
    dependencies
{
       
// ...
        classpath
'com.google.gms:google-services:3.1.1' // google-services plugin
   
}
}

allprojects
{
   
// ...
    repositories
{
       
// ...
        maven
{
            url
"https://maven.google.com" // Google's Maven repository
       
}
   
}
}

android/app/build.gradle

apply plugin: 'com.android.application'

android
{
 
// ...
}

dependencies
{
 
// ...
  compile
'com.google.firebase:firebase-core:11.8.0'

 
// Getting a "Could not find" error? Make sure you have
 
// added the Google maven respository to your root build.gradle
}

// ADD THIS AT THE BOTTOM
apply plugin
: 'com.google.gms.google-services'



6. Google login을 사용 설정 해줍니다.


,

toolchain error flutter

from flutter 2018. 4. 3. 10:38



flutter doctor --android-licenses


라이센스 인증 필요

,
if (errorCode is String && (errorMessage == null || errorMessage is String) && !buffer.hasRemaining)
throw new PlatformException(code: errorCode, message: errorMessage, details: errorDetails);
else
throw const FormatException('Invalid envelope');



이부분에서 계속 디버깅할때 걸리면 debug.keystore 키값이 firebase에 연결이 안되었을때 발생함




debug.keystore 기본값


keytool -exportcert -list -v -alias androiddebugkey -keystore "C:\Users\userID\.android\debug.keystore"


debug.keystore

alias androiddebugkey


password  : android


,