2021년 9월 4일 - 수익형앱 Mbti 테스트 만들기 개괄(4)

3. MBTI TEST 제작

• html 코드 작성 - UTF-8/LF로 작성 
• Bootstrap 이용해 간단한 버튼 배치
• Java Script 이용해 버튼을 누르면 문제가 나오는 동적인 처리 - 페이지 넘기기
• 게이지 바 생성, 각 버튼 사이 간격 조절
• 문제 + 답에 대한 값 저장
• 문제 선택지에 따라 점수 배부
• 각 문제에 해당하는 내용 객체로 저장
• 문제 클릭시 다음 페이지로 이동
• 프로그래스 바 차오르게 만들기 : width % 조절 + for문으로 조금씩 차오르게
• 12문제 모두 생성 
• 결과화면으로 넘어가기 : article 추가
• 이미지 더하기 - Border 적용
• 이미지 크기 조절
• 결과창 이미지, 텍스트 중앙으로 이동 :  "class : text-center"
• mbti 로직 구현
• 결과값 이미지, 설명 등 저장
• mt-5, 설명 안 바뀌는 문제 해결 등
• <!--주석--> 
• 내부적으로 정보 저장 input type="hidden"
• Diploy 

 

 

 

☆ MBTI 로직

1) 마지막 결과창에서 나와야하기 때문에 next() 함수 안에 작성

2) 코드 간소화를 위해 삼항 연산자로 작성

3) 결과 알림창

 

                var mbti = "";
                ($("#EI").val() < 2) ? mbti += "I" : mbti += "E";
                ($("#SN").val() < 2) ? mbti += "N" : mbti += "S";
                ($("#TF").val() < 2) ? mbti += "F" : mbti += "T";
                ($("#JP").val() < 2) ? mbti += "P" : mbti += "J";
                alert(mbti);

 

 

☆ 결과값 저장과 호출

 

      	    ar result = {
            "ISTJ" : {"mask" : "가면라이더", "explain" : "가면라이더 설명", "img" : "가면라이더.png"},
            "ISTF" : {"mask" : "깃털 가면", "explain" : "깃털 가면 설명", "img" : "깃털 가면.png"},




                $("#img").attr("src",result[mbti]["img"]);
                $("#mask").html(result[mbti]["mask"]);
                $("#explain").html(result[mbti]["explain"]);

 

 

☆ Diploy

 

우리가 작성한 코드를 배포하는 행위

 

인터넷에 준비되어 있는 서버에 Diploy를 하게 되면 전세계 어디서든 어떤 컴퓨터라도 인터넷에 연결되어 있더라면 우리의 사이트에 와서 서비스를 이용할 수 있다.

 

 

★ Netlify

 

 

◎ https://www.netlify.com/

Netlify: Develop & deploy the best web experiences in record time

 

 

초보자도 굉장히 쉽게 Diploy 할수 있도록 굉장히 직관적으로 서비스를 제공하고 있다.

웬만한 트래픽까지는 무료로 사용할 수 있어 부담없이 서비스를 이용할 수 있다.

 

 

※ 로그인 → site → 작업한 파일 드래그 앤 드롭 

 

 

 

위처럼 나오면 성공적으로 등록된 것이다.

위에 표시된 주소로 들어가면 내가 만든 MBTI 테스트가 올라간 것을 알 수 있다.

 

 

※ Site setting → Change site name → 사이트 이름 변경 가능

 

 

 

정상적으로 변경된 것을 확인할 수 있다.