웹 앱: 깊이 들어가기 - 테크노베이션 걸스

이미지를 표시하고 소리를 재생하는 웹 애플리케이션을 만드세요.
Jupyter Notebook을 사용해 Python에서 데이터 그래프를 만드는 방법 알아보기
Streamlit으로 데이터 대시보드 웹 앱 만들기

활동

이 단원의 활동은 다음과 같습니다:

활동 1: 사운드보드 앱 만들기
활동: 데이터 대시보드 코딩

스트림릿

스트림릿과 파이썬으로 웹 앱을 만드는 것은 간단합니다. 블록 기반 코딩 플랫폼과 마찬가지로 Streamlit 플랫폼에는 코드 한 줄로 앱에 추가할 수 있는 많은 구성 요소와 위젯이 포함되어 있습니다. 대부분의 코드가 이미 작성되고 패키징되어 있으므로 어려운 코드에 얽매이지 않고 앱의 목표에 집중할 수 있습니다.

스트림릿을 사용하는 연습을 위해 Thunkable과 App Inventor의 모바일 앱 예제 중 하나를 가져와 스트림릿을 사용하여 동일한 앱을 웹 앱 형태로 빌드하는 방법을 보여드리겠습니다.

활동 1: 사운드보드 앱

예상 시간: 30분

스트림라이트 웹 앱 코딩

아래 버튼을 클릭하여 앱 제작에 필요한 자산(이미지 및 사운드 파일)을 다운로드하세요.
팔로우 하나 를 사용하여 버튼을 누르면 소리가 재생되는 간단한 사운드보드 앱을 만들 수 있습니다.
- 컴퓨터에서 코딩하는 경우
  아직 Python과 Streamlit을 설치하지 않았다면 이 활동을 하기 전에 웹 앱 빌더 살펴보기 활동을 완료하세요.
- 온라인으로 코딩하는 경우
앱에 네 번째 인물을 추가하세요. 앱에 추가할 이미지와 짧은 음성 파일을 찾으세요. 유명한 연설 모음 링크입니다.

에셋 파일 다운로드

데이터 작업

Python 언어는 데이터와 잘 어울립니다. 파이썬에는 코더가 데이터를 읽고, 조작하고, 플로팅할 수 있도록 특별히 만들어진 많은 라이브러리가 있습니다. Streamlit 플랫폼과 결합하면 코더는 사용자를 위해 데이터를 분석하고 표시하는 앱을 쉽게 만들 수 있습니다. 그리고 다음 단계로 데이터 세트와 머신러닝 모델을 앱에 통합할 수 있습니다.

대부분의 프로그래머와 데이터 과학자가 Python에서 데이터로 작업하는 방식은 노트북이라는 소프트웨어를 사용하는 것입니다. 가장 많이 사용되는 노트북 인터페이스는 다음과 같습니다. 주피터 노트북. Kaggle 설문조사 2022 결과에 따르면, 응답자의 80% 이상이 사용하는 가장 인기 있는 데이터 과학 대화형 개발 환경(IDE)은 Jupyter Notebook입니다.

다른 인터페이스도 있지만, Jupyter Notebook은 브라우저에서 실행됩니다. 예를 들어 Visual Studio Code에서 바로 통합할 수 있습니다.

코드를 실행하는 노트북의 엔진은 커널. Python의 경우, ipython 커널을 사용하게 됩니다.

노트북을 사용하면 텍스트뿐만 아니라 Python 코드도 작성할 수 있습니다. 텍스트는 마크다운 언어을 사용해 텍스트 서식을 지정하는 간단한 명령어로 작성할 수 있습니다. 노트북에 포함된 코드의 헤더와 설명을 추가하기에 좋은 방법입니다.

노트북에서 Python 코드를 직접 실행할 수도 있습니다.

학교에서 사용하는 실제 노트북과 마찬가지로, Jupyter 노트북은 메모를 하고, 데이터 프로젝트를 통해 생각을 정리하고, 정보를 탐색할 수 있는 좋은 방법입니다. 코드 실행 기능이 추가되어 제어되고 체계적인 방식으로 Python 코드를 실험할 수 있습니다.

비주얼 코드 에디터로 이동하여 실제 앱을 빌드하기 전에 Jupyter 노트북을 사용하면 웹 앱의 다양한 측면을 계획하고 테스트할 수 있습니다.

파이썬 라이브러리

웹 앱을 빌드하기 위해 코드에 사용해야 하는 라이브러리가 많이 있습니다. A 라이브러리 는 특정 작업을 수행하는 미리 작성된 코드 모음입니다. 프로그래밍 라이브러리는 매우 강력하며 몇 줄의 코드만으로 앱에서 강력한 작업을 수행할 수 있습니다.

Python의 경우 대부분의 라이브러리를 사용하려면 먼저 컴퓨터에 설치한 다음 Python 스크립트 파일에서 필요한 라이브러리를 가져와야 합니다.

데이터를 사용하는 데 필요한 라이브러리의 예로는 numpy와 pandas가 있습니다.

팬더 를 사용하면 앱이 대량의 데이터로 쉽게 작업할 수 있습니다. 데이터를 데이터프레임이라는 이름으로 저장하고 앱이 데이터프레임과 함께 작동합니다. Numpy 에는 데이터 프레임의 데이터에 숫자 연산을 수행할 수 있는 많은 함수가 있습니다.

또한 사용자가 데이터를 시각화할 수 있는 많은 플로팅 및 그래프 라이브러리가 있습니다. Python에서 가장 많이 사용되는 시각화 라이브러리는 다음과 같습니다. matplotlib, plotly와 seaborn.

다음 활동에서는 이러한 라이브러리를 모두 사용합니다. 이 활동에서는 음악 및 정신 건강 설문 조사의 데이터 집합을 사용하여 사용자가 상호 작용할 수 있는 다양한 방식으로 데이터를 표시하는 데이터 대시보드 앱을 만듭니다.

활동 2: 데이터 대시보드

예상 시간: 90분

간결한 웹 앱 구축

컴퓨터에서 코딩하는지 클라우드에서 코딩하는지에 따라 적절한 동영상 세트를 따르세요.

컴퓨터에서:
1. 이 동영상(1부)을 따라 Jupyter 노트북을 설치하고 실행하세요. 아래 링크를 클릭해 노트북 파일을 다운로드하세요.
2. 이 동영상(2부)을 따라 Streamlit을 사용하여 데이터 대시보드 앱을 구축하세요.
클라우드에서:
1. 이 동영상(1부)을 따라 깃허브 코드스페이스에서 Jupyter Notebook을 실행하세요.
2. 이 동영상(2부)을 따라 Streamlit.io를 사용하여 데이터 대시보드 앱을 구축하세요.

여러분의 차례입니다: 데이터 대시보드에 그래프를 하나 더 추가합니다. 원래 Jupyter 노트북에 있는 다른 그래프 중 일부를 선택하거나 Jupyter 노트북에서 새 플롯/그래프를 만든 다음 코드를 Streamlit에 통합하여 대시보드에 추가할 수 있습니다.

노트북 다운로드

돌아보기

축하합니다, Streamlit에서 두 개의 웹 앱을 만들었습니다! 다음 질문을 스스로에게 해보세요: