프로젝트 복사관리

1. aistudio project 복사하기

aistudio project 는 frontend 코드와 backend 설정 두 부분으로 나눠집니다
화면을 이쁘게 구성하고, 메뉴,입력개체를 다루는것은 frontend,
data를 다른 곳에 저장하고 검색, 관리 하는 것은 backend 입니다.(DB서버)
다른 사람의 코드를 share하여 주소를 복사하면 그 사람과 같은 frontend, backend 를 사용합니다. (그 코드의 위치가 내 공간으로만 바뀌었을 뿐 입니다)
이 때 DB 서버 또한 원래 사용자가 사용하던 것을 그대로 사용하게 되어 내 Data와 섞기거나 내 Data를 원래 사용자가 삭제, 수정 할 수 있습니다
그래서 나의 DB서버로 따로 연결하기위해. “Remix” 를 합니다
“Remix” 를 하면 frontend 에서 사용하는 기능과 모양은 동일하지만 DB서버 만 내 것으로 독립설정 합니다

2. 웹앱 개발시 버전 관리하기

prompt로 수정 할 때 마다 매번 이전 상태가 자동 저장 됩니다
따라서 아무런 두려움이나 혹시나 이상해 지면 어쩌나 하는 마음으로 망설일 필요없이 적극 수정을 활용 하세요

2.1. 이 전 으로 되돌리기

채팅창의 restore 하나의 prompt 명령이완료 되면 그 지점으로 이동 할 수있는 “restore” 버튼이 추가 됩니다

전체 prompt 히스토리 목록관리
- 우측 상단 설정 –> versions
- “share” 기능으로 주소공유 하면 현재 선택된 version의 모습으로 공유됩니다.

3. Firebase 준비

3.1. Project 만들기

3.2. App 만들기

App 추가

웹 앱 선택

App 이름 지정 –> Console 이동

3.3. Authentification 추가

로그인 방법 추가
Email/password 추가

3.4. firestore 보안설정

3.4.1. 규칙설정

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

3.5. 설정 정보 확인

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "AIzaSyA2cGAPnPmoA9MKuhczvAqGPlvJffl0-X4",
  authDomain: "ksd-pptx.firebaseapp.com",
  projectId: "ksd-pptx",
  storageBucket: "ksd-pptx.firebasestorage.app",
  messagingSenderId: "어쩌구 저쩌구",
  appId: "여기도 이상한 문자들",
  measurementId: "G-TSRK59MZT9"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

4. Project 복사

https://ai.studio/apps/1c7a791e-bdbb-41ea-92cd-2b07bd9f990e

공유(Share)받은 project 주소를 브라우져로 오픈합니다

5. Firebase 설정

자신의 DB설정으로 변경합니다
“Remix” 를 하면 자동 설정 되지만 간혹 DB가 꼬이거나 직접 확인하기 어려울 때 가 있습니다
“Remix” 를 하고 DB 설정은 수동으로 잡아줍니다

5.1. 설정 정보 변경

firebase  설정을 아래 설정을 이용하라
-  Authentification
- Firestore
-----
```자선의 Firebase App 설정 정보```

6. 초기버전 이 후 수정하기

6.1. 테스트 ID 생성

관리자와 사용자용 테싀트 ID 생성하기

    1. 테스트용 사용자를 firebase authentification 에 추가해
     - 관리자: admin@ksd.com pw: abcD1234*      팀: 양조1팀
     - 일반회원: user1@ksd.com pw: abcD1234*    팀: 품질 보증팀
     - 일반회원: user2@ksd.com pw: abcD1234*     팀: 생산지원팀

      2. 테스트용 사용자 로그인 화면을 로그인메뉴에 추가해
     ## Menu
        - 관리자: admin@ksd.com 
        - 일반회원: user1@ksd.com
        - 일반회원: user2@ksd.com pw

최초 각 아이디의 로그인 버튼을 클릭해야 DB 에 추가 됩니다

6.1.1. 결과

6.1.2. admin 계정 설정

DB에서 직접 admin(관리자) 권한을 설정합니다
firebase 데이터베이스(firestore)

7. 관리자 기능

7.1. 더미 데이터 생성

관리자 메뉴

1. 관리자 메뉴의 "폼목관리" 에 더미데이터 추가 기능 구현하라.
2. 버튼을 누르면 항목 개수를 입력 받는다.
3. 입력 받은 개수 만큼 다양항 품목 데이터를 추가한다.

7.2. 버튼 동작이 안될 때!!

a. 버튼을 눌러도 반응을 안 할 때 있습니다. b. “F12” 를 눌러 개발자 모드 들어가기 c. 상단의 “console” 선택 d. 이 때 다시 “버튼” 을 클릭했을 때 맨 아래줄에 빨간색 의 에러 문구가 나오면 e. 그 문구를 복사합니다.

f. 복사한 내용을 이용하여 아래 prompt를 작성합니다

   "신규품목등록" 또는 "더미품목데이터생성" 버튼을 눌렀을 때 반응하지 않는다.
   아래는 console의 에러 디버그 내용이다. 수정하라

   ----
   12[Violation] 'setInterval' handler took <N>ms
   12[Violation] Forced reflow while executing JavaScript took <N>ms

※ 에러 텍스트를 복사하지않고 *스크린캡쳐* 로 prompt에 붙여 넣어도 됩니다.

7.3. 결과

8. 직원 기능

8.1. 신청 화면 리스트 형식 추가

리스트 형택로 신청

  1. 일반회원의 소모품 신청 방법을 추가한다.
  2. 리스트형태 목록에서 선택.
  ## 리스트 메뉴
  1. 품목, 상품코드 검색 가능.
  2. 리스트에는 각 품목의  재고현황, 신청현황, 단가, 신청개수, 단위(품목별 해당 단위사용)
  3. 리스트 메뉴에서 선택 신청가능

리스트 입력 창과 AI 신청 창이 분리 될 수 있습니다. –> 하나의 창으로 통합으로 수정요청합니다

8.1.1. 결과

8.2. 장바구니 기능 수정

(장바구니 기능이 없을 경우)

신청목록을 장바구니를 거쳐 한번에 신청하도록 합니다

- 리스트 신청에서 신청된 물품을 먼저 장바구니를 거처 신청한다
-  장바구니에서 각 신청물품을 편집 할 수 있다
- 장바구니 크기의 높이를 항목개수 따라 다이내믹 변경하라

9. 관리자 기능

9.1. 신청내역 테스트용 더미데이터

관리자의 신청내역 관리 기능 테스트용 더미데이터를 생성합니다

- 신청내역 더미데이터를 생성기능을 관리자 "신청내역"에 구현하라
- 숫자를 입력 받고 개수 만큼 생성하라

9.2. 부서별 신청 현황 보기

부서별 소모품 사용현황, 신청 현황

 - 부서별 과거 소모품 사용 현황의 통계를 시각화 하라
 - 부서별, (주,월,분기, 년) 통계치
 - 부서별,소모품 항목별 통계치
 - 통계 데이터 원본을 excel로  export 하라

9.3. 품목관리

엑셀 일괄 업로드 기능을 구현합니다

현재 구현된 DB구조에 받는 엑셀 업로드용 템플릿을 제공합니다

  1. 관리자의 "폼목관리" 에 엑셀 일괄 업로드를 구현하라
  2. 업로드용 excel 템플릿 파일을제공하라
  3. 상품코드가 겹치는 것은 기존 품목에 개수를 추가하라

9.4. 나머지 기능 테스트

신청관리, 회원관리, 예산관리 기능을 차례로 테스트 합니다
미완성, 미비한 점을 수정 합니다

10. 배포 하기

10.1. github 배포하기

10.1.1. github 연결하기

우측 상단 설정
github 선택

10.1.2. github commit

현재 작업물을 github에 올리는 것을 COMMIT (커밋) 이라 합니다.
하단의 “Stage and commit all changes” 클릭하기

10.1.3. github 결과 확인해보기

github에 다시 접속해서 commit 한 결과가 반영 되었는지 확인합니다

주소확인
- 생성한 git 의 주소를 확인합니다
- 주소형식 https://github.com/mintubehan/buchae.git –> https://github.com/사용자이름/저장소이름.git 형태

10.2. vercel 에 배포하기

10.2.1. import project

vercel 초기 화면에서 import project 선택
- import project 를 하거나
- 또는 Add New –> Project

vercel에 github 도구 설치
Vercel에 GitHub을 사용할 수 있는 도구를 설치합니다.

Install 클릭 하면 자동으로 github에 있던 모든 저장소가 보입니다

project(만든 앱) 을 가져옵니다
- 자동으로 인식된 저장소 목록에서 해당 앱 을 Import 합니다

배포하기
- Vercel에 이 앱 배포의 새로운 이름을 입력하고
- Deploy 클릭

배포확인하기
성공하면 배포된 미리보기 화면과 주소가 표시됩니다.
- buchae.vercel.app 처럼 앱이름.vercel.app 형태입니다.
- 이제 https://buchae.vercel.app 을 주소로 배포할 수 있습니다.

haccp_보고서입출력