Google IDX와 Streamlit을 활용한 성경 웹 앱 만들기

Google IDX와 Streamlit을 활용한 성경 웹 앱 만들는 과정을  Canva eBook 페이지 형식으로 작성하여 설명드립니다.

1페이지: 표지

제목: Google IDX와 Streamlit을 활용한 성경 웹 앱 만들기

부제: 단계별 가이드

저자: [당신의 이름]

---

2페이지: 소개

제목: 소개

이 가이드에서는 Google IDX 환경에서 index.html, index.js, bibleData.json 파일을 사용하여 웹 앱을 개발하고 Streamlit을 통해 배포하는 과정을 상세히 안내합니다.

---

3페이지: 프로젝트 설정 및 파일 준비

제목: 프로젝트 설정 및 파일 준비

Google IDX는 클라우드 기반 개발 환경으로, 별도의 설치 없이 Python, Streamlit 등 필요한 도구를 바로 사용할 수 있습니다. 주요 파일은 다음과 같습니다:

• index.html: 웹 앱의 프론트엔드 구조를 담당합니다.
• index.js: 웹 앱의 동적인 기능을 구현합니다.
• bibleData.json: 성경 구절 데이터베이스 역할을 합니다.

---

4페이지: index.html 구조 설계

제목: index.html 구조 설계

사용자에게 보여질 웹 페이지의 레이아웃을 디자인합니다. 주요 구성 요소는 다음과 같습니다:

• 검색 기능
• 선택된 성경 구절 표시
• 오늘의 말씀 (랜덤 구절)

---

5페이지: 검색 기능 구현

제목: 검색 기능 구현

const resultList = document.createElement('ul');
results.forEach(result => {
  const listItem = document.createElement('li');
  listItem.textContent = `${result.book} ${result.chapter}:${result.verse} - ${result.text}`;
  resultList.appendChild(listItem);
});
container.appendChild(resultList);

---

6페이지: 특정 구절 찾기 기능

제목: 특정 구절 찾기 기능

const bookSelectForm = document.querySelector('.book-select form');
const selectedVerseDiv = document.getElementById('selected-verse');
bookSelectForm.addEventListener('submit', (event) => {
  event.preventDefault();
  const book = document.getElementById('book-select').value;
  const chapter = parseInt(document.getElementById('chapter-input').value);
  const verse = parseInt(document.getElementById('verse-input').value);
  const verseText = bibleData[book]?.[chapter]?.[verse];
  if (verseText) {
    selectedVerseDiv.textContent = `${book} ${chapter}:${verse} - ${verseText}`;
  } else {
    selectedVerseDiv.textContent = '해당 구절을 찾을 수 없습니다.';
  }
});

---

7페이지: 오늘의 말씀 표시

제목: 오늘의 말씀 표시

랜덤으로 성경 구절을 선택하여 오늘의 말씀으로 표시합니다.

// 랜덤 구절 선택 코드

---

8페이지: Streamlit 앱 생성 및 배포

제목: Streamlit 앱 생성 및 배포

Google IDX에서 app.py 파일을 생성하고 다음 코드를 작성합니다:

import streamlit as st
with open('index.html', 'r', encoding='utf-8') as f:
  html_string = f.read()
st.components.v1.html(html_string, height=1000, scrolling=True)

앱 실행 명령어:

streamlit run app.py

---

9페이지: Streamlit Cloud 배포

제목: Streamlit Cloud 배포

Streamlit Cloud를 통해 앱을 배포하는 방법:

1. Streamlit Cloud 계정 생성
2. GitHub 저장소에 프로젝트 코드 업로드
3. Streamlit Cloud에서 새 앱 생성 및 GitHub 저장소 연결
4. 배포 설정 완료

---

10페이지: 결론

제목: 결론

이 가이드를 따라 Google IDX와 Streamlit을 사용하여 성경 웹 앱을 만들고 배포할 수 있습니다. 이 프로젝트를 통해 웹 개발에 대해 배울 뿐만 아니라, 영감을 주는 성경 구절을 다른 사람들과 공유할 수 있습니다.

---

이 형식은 eBook의 각 페이지가 프로젝트의 특정 부분에 초점을 맞추고 있어 독자들이 쉽게 따라할 수 있도록 구성되어 있습니다. Canva의 도구를 사용하여 각 페이지의 디자인과 레이아웃을 더욱 향상시킬 수 있습니다.