[No4] Floor noise project in Sullivan

This is No 4 educational presentation on August 8, 2020 under the theme of "Floors Noise, Let's Solve Together!" at the Sullivan Project.
About: https://www.facebook.com/sullivanproject.in/posts/1585324304975158

Transcript

1. 층간소음, 함께 해결해요! 4차시 - 함께 앱을 만들어요 [소음 측정편] 설리번 프로젝트 App Team 1 2020. 08. 09
2. 마스크는 교육동안 계속 쓰고 있어주세요 여러분 만나서 반가워요
4. 4차시 - 함께 앱을 만들어요 [소음 측정편] 오늘 만들 앱, 티저영상 두둥~! 이번 시간에 함께 만들 앱 영상 선 공개! 휴대폰으로 들어오는 소음을 시각적으로 표현해요. 막대 그래프와 원 그래프를 사용하여 소음을 표현해요. 쉿! ) 녹음 기능도 만들어서 층간소음 정보를 앱에 저장해봐요.
5. 4차시 - 함께 앱을 만들어요 [소음 측정편] Widget 이란? Widget이란 마트료쉬카(러시아 전통인형) 같아요. 여기에 텍스트가 없으면 디자인이 심심해서... 헤헤 코로나19와 싸우시는 의료진 화이팅입니다!
6. 4차시 - 함께 앱을 만들어요 [소음 측정편] Widget 이란? Text Padding Row Container 앱 화면
7. 4차시 - 함께 앱을 만들어요 [소음 측정편] Widget 이란? Text 원 그래프 Row Stack 앱 화면 Row 막대 그래프 Stack 원 그래프 Text Floating Button
8. 4차시 - 함께 앱을 만들어요 [소음 측정편] 화면 설계 타임마~! Row 막대 그래프 Stack 원 그래프 Text Floating Button Row: Stack: Text: FloatingButton:
9. 4차시 - 함께 앱을 만들어요 [소음 측정편] 화면 설계 타임마~! Row 막대 그래프 Stack 원 그래프 Text Floating Button Row: 여러개의 Widget을 가로로 배치하는 Widget (반대는? Column이죠!) Stack: Text: FloatingButton:
10. 4차시 - 함께 앱을 만들어요 [소음 측정편] 화면 설계 타임마~! Row 막대 그래프 Stack 원 그래프 Text Floating Button Row: 여러개의 Widget을 가로로 배치하는 Widget (반대는? Column이죠!) Stack: 여러개의 Widget을 겹겹히 배치하는 Widget (위로! 위로!) Text: FloatingButton:
11. 4차시 - 함께 앱을 만들어요 [소음 측정편] 화면 설계 타임마~! Row 막대 그래프 Stack 원 그래프 Text Floating Button Row: 여러개의 Widget을 가로로 배치하는 Widget (반대는? Column이죠!) Stack: 여러개의 Widget을 겹겹히 배치하는 Widget (위로! 위로!) Text: 글자를 표현할 수 있는 Widget FloatingButton:
12. 4차시 - 함께 앱을 만들어요 [소음 측정편] 화면 설계 타임마~! Row 막대 그래프 Stack 원 그래프 Text Floating Button Row: 여러개의 Widget을 가로로 배치하는 Widget (반대는? Column이죠!) Stack: 여러개의 Widget을 겹겹히 배치하는 Widget (위로! 위로!) Text: 글자를 표현할 수 있는 Widget FloatingButton: 오른쪽 아래에 항상 표현되는 버튼 Widget
13. 개발 타임마~! 1차시에 설치한 Android Studio을 열어주세요!
14. 하나 알려드릴께요 막대 그래프 = `FAProgressBar` 원 그래프 = `CircularProgressIndicator`
15. Row의 `MainAxisAlignment`에 대해 `.start`: 왼쪽으로 정렬합니다. `.end`: 오른쪽으로 정렬합니다. `.spaceEvently`: 모든 Child 사이의 공간을 균등하게 배분합니다. `.spaceBetween`: 시작과 끝 Wedget을 끝에 배치하고 이 후 균등하게 사이 공간을 배분합니다. `.spaceAround`: 첫 번째와 마지막 child 앞뒤에 여유 공간을 나머지 child와 공간의 절반만큼 배치합니다. 4차시 - 함께 앱을 만들어요 [소음 측정편] 참조: https://beomseok95.tistory.com/310
16. 설계 사진과 예시 영상을 보고 선택해주세요 어떤 `MainAxisAlignment`을 사용하여야 할까요?
17. Container에 대해 원하는 Widget의 크기를 키우고 싶을 때 이 `Container`에 넣고 늘리면 이쁘게 커진답니다. 쫘란! 4차시 - 함께 앱을 만들어요 [소음 측정편] 여기에 텍스트가 없으면 디자인이 심심해서... 헤헤 코로나19와 싸우시는 의료진 화이팅입니다!
18. Stack의 `AlignmentDirectional`에 대해 4차시 - 함께 앱을 만들어요 [소음 측정편] 참조: https://medium.com/flutter-community/flutter-for-android-developers-how-to-design-framelayout-in-flutter-93a19fc7e7a6
19. Stack의 `AlignmentDirectional`에 대해 4차시 - 함께 앱을 만들어요 [소음 측정편] 참조: https://medium.com/flutter-community/flutter-for-android-developers-how-to-design-framelayout-in-flutter-93a19fc7e7a6
20. Stack의 `AlignmentDirectional`에 대해 4차시 - 함께 앱을 만들어요 [소음 측정편] 참조: https://medium.com/flutter-community/flutter-for-android-developers-how-to-design-framelayout-in-flutter-93a19fc7e7a6
21. 설계 사진과 예시 영상을 보고 선택해주세요 어떤 `AlignmentDirectional`을 사용하여야 할까요?
22. Padding에 대해 원하는 Widget의 상하좌우에 공간을 주고 싶을 때, `EdgeInsets.fromLTRB(~, ~, ~, ~)`와 함께 사용하는 Widget입니다. 4차시 - 함께 앱을 만들어요 [소음 측정편] 여기에 텍스트가 없으면 디자인이 심심해서... 헤헤 코로나19와 싸우시는 의료진 화이팅입니다!
23. 소음정보를 사용하여 그래프를 움직이게 해볼까요? 4차시 - 함께 앱을 만들어요 [소음 측정편] void setSoundData(NoiseReading sound) { var decibel = sound.maxDecibel.toInt(); setState(() { this.currentDecibel = decibel; }); } // ... FAProgressBar(currentValue: currentDecibel,) // ... CircularProgressIndicator(value: currentDecibel / 100,) // ...
24. 잠깐만 우리 게임 하나 할까요? (갑자기???!) 4차시 - 함께 앱을 만들어요 [소음 측정편] https://www.youtube.com/results?search_query=%EB%9D%BC%EC%86%A1 시작이라고 말한 뒤부터 해당 음악에서 “라” 라는 단어가 몇 번 나오는지 세어주세요! 가장 근접하게 맞춘 분께 선물을 드릴께요
25. 오늘의 하이라이트 소음정보 저장하기 4차시 - 함께 앱을 만들어요 [소음 측정편] 종이 소음정보 기록시작! 기록종료! 소음정보 소음정보 소음정보 소음정보
26. 오늘의 하이라이트 소음정보 저장하기 4차시 - 함께 앱을 만들어요 [소음 측정편] var paper = List<int>(); var isWriting = false; void write(int decibel) { if (isWriting) { paper.add(decibel); } } void startWriting() { this.isWriting = true; } void endWriting() { this.isWriting = false; this.paper.clear(); }
27. 평균 데시벨, 최고 데시벨 4차시 - 함께 앱을 만들어요 [소음 측정편] 평균 데시벨을 구하려면 어떻게 해야하나요? 최고 데시벨을 구하려면 어떻게 해야하나요?
28. List? 반복문? 4차시 - 함께 앱을 만들어요 [소음 측정편] Data: 정보 => 녹화기간 동안 기록된 데시벨 정보 List(Paper): Data의 집합 우리는 List(Paper)를 사용하여 평균데시벨과 최고데시벨을 구해야합니다.
29. List? 반복문? 4차시 - 함께 앱을 만들어요 [소음 측정편] for (int decibel in paper) { // Paperী ӝ۾ػ decibelਸ ೞաঀ ԁղસפ׮. // ಣӐ ؘद߰ਸ ҳೞ۰ݶ? // ୭Ҋ ؘद߰ਸ ҳೞ۰ݶ? }
30. List? 반복문? 4차시 - 함께 앱을 만들어요 [소음 측정편] for (int decibel in paper) { // Paperী ӝ۾ػ decibelਸ ೞաঀ ԁղસפ׮. // ಣӐ ؘद߰ਸ ҳೞ۰ݶ? (ݽٚ ؘद߰ чਸ ҳ೧ঠ೤פ׮.) // ୭Ҋ ؘद߰ਸ ҳೞ۰ݶ? (ؘद߰ ઺ о੢ ௾ чਸ ҳ೧ঠ೤פ׮.) }
31. List? 반복문? 4차시 - 함께 앱을 만들어요 [소음 측정편] for (int decibel in paper) { // Paperী ӝ۾ػ decibelਸ ೞաঀ ԁղસפ׮. totalDecibel = totalDecobel + decibel; // ୭Ҋ ؘद߰ਸ ҳೞ۰ݶ? (ؘद߰ ઺ о੢ ௾ чਸ ҳ೧ঠ೤פ׮.) }
32. List? 반복문? 4차시 - 함께 앱을 만들어요 [소음 측정편] for (int decibel in paper) { // Paperী ӝ۾ػ decibelਸ ೞաঀ ԁղસפ׮. totalDecibel = totalDecobel + decibel; if (maxDecibel > decibel) { maxDecibel = decibel; } }
33. 4차시 - 함께 앱을 만들어요 [소음 측정편] 오늘 만든 앱, 더 이쁘게 만들어볼까요? 그래프의 색을 바꾸는건 어때요? 바꾸고 싶은게 있어요? 설리번 선생님과 함께 이쁘게 고쳐볼까요? 바꾸고 싶은 걸 정리해서 선생님께 알려주세요 ✋ 설리번 선생님들이 공부해서 알려줄께요!
34. 4차시 - 함께 앱을 만들어요 [소음 측정편] 실제 기준에 맞도록 코드를 추가해 볼까요?
35. 4차시 - 함께 앱을 만들어요 [소음 측정편] 실제 기준에 맞도록 코드를 추가해 볼까요?
36. 감사합니다 설리번 프로젝트 contact@sullivanproject.io 이병찬 me@wooll.im