5. 프론트 화면 설계

앞에서 작업환경 설정 후 firebase 배포, ionic 앱 apk 파일까지 만드는 작업을 진행하였습니다. 

chapter 5. 에서는 기본적인 프론트 화면을 만들겠습니다. 

 

ionic Branch는 앱 apk 파일을 만드는 용도입니다.

Branch를 master 로 변경 후 작업을 진행합니다.

 

 

master Branch - ionic 관련 소스 제외

gradlew

gradlew.bat

profile-2019-06-17profile-2019-06-17-14-29-10-810.json

profile-2019-06-17-14-29-10-810.rawproto

gradle-wrapper.jar

gradle-wrapper.properties

 

 

5-1. 메인(index) 화면 

 

초기화면은 "MEMO" 버튼이 있는 화면입니다.

 

새로운 Index.vue 를 만든 후에 router 를 수정합니다.

 

router/index.js

import Main from '@/components/Main'

Main 부분에서 오류가 나타납니다. Index 로 수정합니다.

 

 

https://github.com/imse0109/noteApp/commit/861b00e43e2c77674cdf56dcc38927aeaa34e05c

5-1. 메인(index) 화면 · imse0109/noteApp@861b00e

 

작업 후 커밋완료상태입니다. 

chapter 4-4. 부분을 진행합니다. (dist -> www 폴더복사)

그 전에 chapter 4-1. 부분을 master Branch 로 병합합니다.

cordova 관련 내용이 ionic Branch에 있기 때문에 master Brach에 적용하기 위해서 입니다. 

index.html 파일에 cordova 관련 js를 추가하고 Build를 진행한 후에 dist 폴더에서 www 폴더로 복사합니다.

 

 

복사 후 ionic 폴더에서

cordova build 명령어를 실행합니다.

 

apk 파일을 폰에서 확인하면 작업한 화면을 확인할 수 있습니다. 

 

 

5-2., 5-3. 메인(index) 화면 write 화면

 

메인 화면의 버튼을 가운데 정렬시킵니다.

write 화면을 추가하였습니다.

Index.vue, Write.vue, index.js 파일의 내용을 확인해 보시면 됩니다.

 

 

https://github.com/imse0109/noteApp/commit/3ba4060c6b43ffc7cd068c7c509dd47ce592a6d0

5-2. 메인(index) 화면 수정 및 write 화면 추가 · imse0109/noteApp@3ba4060

 

https://github.com/imse0109/noteApp/commit/c12ce22838af2029762236be1c98c305803e1d04

5-3. write 화면 버튼 수정 · imse0109/noteApp@c12ce22

 

그리고 위와 동일하게 ionic 폴더에 넣은 후 apk 파일을 생성하였습니다.

 

ionic Branch 의 AppBuild 1.2 와 AppBuild 1.3 커밋을 확인바랍니다.

 

 

5-4. View, List 화면 추가 및 common.css 파일 추가

 

https://github.com/imse0109/noteApp/commit/0aad25ac3771c0959d6378178656d2e11dfe23df

5-4. view, List 화면 추가 및 common.css 파일 추가 · imse0109/noteApp@0aad25a