프론트엔드 개발자의 TIL #013

TIL #013

191120 수

 

---

오늘 배운 점

<Flutter>

1. 나중에 추가될 Python 데이터분석 코드를 Flutter와 어떻게 연동할지에 대해 간단하게 알아봤다.

• starflut라는 플러그인으로 Flutter가 다른 언어와 상호작용할 수 있도록 설정할 수 있다고 한다.

//@pubspec.yaml

dev_dependencies:
	flutter_test:
    	sdk: flutter
    starflut:
    	path: ../starcore_for_flutter/starflut
        
//android: main에 하위 폴더를 만들고 python share library를 추가한다.

android
  app
    src
      main
        assets
          unicodedata.cpython-36m.so
          zlib.cpython-36m.so
        java
        jniLibs
          arm64-v8a
            libpython3.6m.so
            libstar_python36.so
          armeabi 
            libpython3.6m.so
            libstar_python36.so
          armeabi-v7a
            libpython3.6m.so
            libstar_python36.so
          x86
            libpython3.6m.so
            libstar_python36.so
          x86_64
            libpython3.6m.so
            libstar_python36.so
        res
        
//iOS: 환경변수를 정의한다. starcore_for_ios 폴더에 설정

STARCORE_PATH              # '/Users/srplab/Desktop'

STARCORE_PYTHONVERSION     # '3.6'   '3.5'    '2.7'
STARCORE_PYTHONLIBRARY     # 'star_python36,python3.6m'

STARCORE_EXPORTDEFINE
STARCORE_EXPORTFUNCTION
STARCORE_EXPORTLIBRARY    
STARCORE_EXPORTLIBRARYPATH

//project 하위 폴더에 starfiles 폴더를 만들고 Python script 추가
starfiles
	python3.6.zp
    testpy.py
    
//@pubspec.yaml에 asset 추가

flutter:
	assets:
    - starfiles/

//dart file에서의 활용
Future<void> testCallPython() async {
    StarCoreFactory starcore = await Starflut.getFactory();
    StarServiceClass Service = await starcore.initSimple("test", "123", 0, 0, []);
    await starcore.regMsgCallBackP(
        (int serviceGroupID, int uMsg, Object wParam, Object lParam) async{
      print("$serviceGroupID  $uMsg   $wParam   $lParam");
      return null;
    });
    StarSrvGroupClass SrvGroup = await Service["_ServiceGroup"];

    /*---script python--*/
    bool isAndroid = await Starflut.isAndroid();
    if( isAndroid == true ){
      await Starflut.copyFileFromAssets("testpy.py", "flutter_assets/starfiles","flutter_assets/starfiles");
      await Starflut.copyFileFromAssets("python3.6.zip", "flutter_assets/starfiles",null);  //desRelatePath must be null 
      await Starflut.copyFileFromAssets("zlib.cpython-36m.so", null,null);
      await Starflut.copyFileFromAssets("unicodedata.cpython-36m.so", null,null);
      await Starflut.loadLibrary("libpython3.6m.so");
    }

    String docPath = await Starflut.getDocumentPath();
    print("docPath = $docPath");

    String resPath = await Starflut.getResourcePath();
    print("resPath = $resPath");

    dynamic rr1 = await SrvGroup.initRaw("python36", Service);

    print("initRaw = $rr1");
		var Result = await SrvGroup.loadRawModule("python", "", resPath + "/flutter_assets/starfiles/" + "testpy.py", false);
    print("loadRawModule = $Result");

		dynamic python = await Service.importRawContext("python", "", false, "");
    print("python = "+ await python.getString());

		StarObjectClass retobj = await python.call("tt", ["hello ", "world"]);
    print(await retobj[0]);
    print(await retobj[1]);

    print(await python["g1"]);
        
    StarObjectClass yy = await python.call("yy", ["hello ", "world", 123]);
    print(await yy.call("__len__",[]));

    StarObjectClass multiply = await Service.importRawContext("python", "Multiply", true, "");
    StarObjectClass multiply_inst = await multiply.newObject(["", "", 33, 44]);
    print(await multiply_inst.getString());

    print(await multiply_inst.call("multiply", [11, 22]));

    await SrvGroup.clearService();
		await starcore.moduleExit();
  }

API 인터페이스: https://pub.dev/packages/starflut

• Firebase ML kit를 활용한 얼굴, 바코드, 라벨 인식, 텍스트 인식 등의 Computer Vision도 가능하다. 예를 들어 카메라로 얼굴 인식을 하는 기능을 Flutter 앱에 넣고 싶은 경우에는 이런식으로 코드를 작성한다.

//@pubspec.yaml
dependencies:

image_picker:
firebase_ml_vision:

//.dart
class _FacePageState extends State<FacePage> {
	File _imageFile;
    List<Face> _faces;
    
    void _getImageAndDetectFaces() async {
      final imageFile = await ImagePicker.pickImage(
          source: ImageSource.gallery
      );
      final image = FirebaseVisionImage.fromFile(imageFile);
      final faceDetector = 
        FirebaseVision.instance.faceDetector(
            FaceDetectorOptions(
                mode: FaceDetectorMode.accurate,
                enableLandmarks: true,
            ),
        );
      await faceDetector.detectInImage(image);
      if (mounted) { //async마다 mounted 여부 확인해줘야 낭비 안 생김
        setState(() {
          _imageFile = imageFile;
          _faces = faces;
        });
      }
	}
    
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            body: Container(),
            floatingActionButton: FloatingActionButton(
                onPressed: _getImageAndDetectFaces,
                child: Icon(Icons.add_a_photo),
            ),
        );
    }

}  
class Face {
	final Rectangle<int> boundingBox;
    final double headEulerAngleY;
    final double headEulerAngleZ;
    final double leftEyeOpenProbability;
    final double rightEyeOpenProbability;
    final double smilingProbability;
    final int trackingId;
    FaceLandmark getLandmark(
    	FaceLandmarkType landmark,
    ) => _landmarks[landmark];
}

2. Hero

• 두 요소간의 transition을 원활하게 해주는 위젯이다. GridView 갤러리에서 특정 사진을 탭했을 때 자연스럽게 이동했다가 갤러리로 되돌아가는 행동 같은 데에 적용할 수 있다.

Hero(//animate하려는 두 페이지 모두에 작업
	tag: "transition target",
    child: Image.network(imageUrlByKey(position)),
),
onTap: () { // 같은 태그를 사용하는 위젯이 있는 화면을 push
	Navigator.push(context, MaterialPageRoute<void>(
    	builder: (BuildContext context) {
        	return ImageDetailHome(imageUrlByKey());
        }
    ));
},

---

내일 배울 점

1. 아직 남은 과제들 해내기..

2. SNS 기능에 필요한 화면 작업 해두기

---

- 오늘은 아무 생각이 안 드는 지치는 날이다 !- 오늘은 아무 생각이 안 드는 지치는 날이다 !