티스토리 뷰

* 이번에는 데이터 구조를 자바스크립트로 구현을 해놓는 작업을 할 것이다. 부분부분 단위별로 중요한 데이터구조부터 구현할 것이다.


2012/11/03 - [Mini Project/NY-School] - [NY-School] 기본 기능과 데이터구조 설계


* 1차로 구현할 데이터 구조

- 사용자

- 학교

- 학생 목록

- 학생

- 선생님

- 반


* 구현 결과

/*jslint browser:true */
/*jslint plusplus: true */
(function (doc, win) {
	"use strict";
	var nyschool,
		host = "ny-school.appspot.com",
		loginId,
		currentUserInformation,
		School,
		StudentList,
		Student,
		HomeRoom,
		Teacher,
		teacherList,
		studentListList,
		currentStudentList,
		homeRoomList,
		currentHomeRoom;

	function get(type, callback) {
		if (loginId) {
			var xhr = new XMLHttpRequest();
			xhr.open("GET", host + "/get/" + loginId + "/" + type, true);
			xhr.onreadystatechange = function (e) {
				if (xhr.readyState === 4 && xhr.status === 200) {
					var response = this.responseText;
					win.alert(response);
					callback(response);	//TODO : parse JSON
				}
			};
			xhr.send();
		} else {
			win.alert("Need to Login!");
		}
	}

	function getById(type, id, callback) {
		if (loginId) {
			var xhr = new XMLHttpRequest();
			xhr.open("GET", host + "/get/" + loginId + "/" + type + "/" + id, true);
			xhr.onreadystatechange = function (e) {
				if (xhr.readyState === 4 && xhr.status === 200) {
					var response = this.responseText;
					win.alert(response);
					callback(response);	//TODO : parse JSON
				}
			};
			xhr.send();
		} else {
			win.alert("Need to Login!");
		}
	}

	currentUserInformation = {
		id: undefined,
		userName: undefined,
		school: undefined,
		homeRoom: undefined
	};

	School = function (json) {
		this.schoolName = undefined;
		this.schoolId = undefined;
		this.schoolType = undefined;
		this.madeBy = undefined;
	};

	StudentList = function (json) {
		this.studentListId = undefined;
		this.studentListName = undefined;
		this.studentList = [];
		this.description = undefined;
	};

	Student = function (json) {
		this.studentId = undefined;
		this.studentName = undefined;
		this.studentBirthday = undefined;
		this.studentPhoneNumber = undefined;
		this.studentEmail = undefined;
		this.studentMemo = undefined;
		this.madeBy = undefined;
	};

	HomeRoom = function (json) {
		this.homeRoomId = undefined;
		this.studentList = undefined;
		this.homeRoomSchool = undefined;
		this.homeRoomGrade = undefined;
		this.homeRoomNumber = undefined;
		this.homeRoomTeacher = undefined;
		this.homeRoomYear = undefined;
		this.homeRoomMemo = undefined;
	};

	Teacher = function (json) {
		this.teacherId = undefined;
		this.teacherName = undefined;
		this.teacherSubject = undefined;
		this.teacherPhoneNumber = undefined;
		this.teacherEmail = undefined;
		this.isHomeRoomTeacher = false;
		this.teacherHomeRoomGrade = undefined;
		this.teacherHomeRoomNumber = undefined;
		this.madeBy = undefined;
	};

	nyschool = {
		getCurrentUserInformation : function (callback) {
			if (currentUserInformation.id) {
				callback(currentUserInformation);
			} else {
				getById('user', loginId, callback);
			}
		},
		getTeacherList : function (callback) {
			if (teacherList) {
				callback(teacherList);
			} else {
				get('teacher', function (result) {
					teacherList = result;
					callback(result);
				});
			}
		},
		getTeacherInformationById : function (id, callback) {
			function searchForTeacher(id, teacherList) {
				var i, teacherListLength = teacherList.length;
				for (i = 0; i < teacherListLength; i++) {
					if (teacherList[i].teacherId === id) {
						callback(teacherList[i]);
					}
				}
			}
			if (teacherList) {
				callback(searchForTeacher(id, teacherList));
			} else {
				nyschool.getTeacherList(function (result) {
					callback(searchForTeacher(id, result));
				});
			}
		},
		getStudentListList : function (callback) {
			if (studentListList) {
				callback(studentListList);
			} else {
				get('studentList', function (result) {
					studentListList = result;
					callback(result);
				});
			}
		},
		getStudentListInformationById : function (id, callback) {
			if (currentStudentList && currentStudentList.studentListId === id) {
				callback(currentStudentList);
			} else {
				getById('studentList', id, function (result) {	//'studentList' will contain all the student's information in an array
					currentStudentList = result;
					callback(result);
				});
			}
		},
		getHomeRoomList : function (callback) {
			if (homeRoomList) {
				callback(homeRoomList);
			} else {
				get('homeRoom', function (result) {
					homeRoomList = result;
					callback(result);
				});
			}
		},
		getHomeRoomInformationById : function (id, callback) {
			if (currentHomeRoom && currentHomeRoom.homeRoomId === id) {
				callback(currentHomeRoom);
			} else {
				getById('homeRoom', id, function (result) {
					currentHomeRoom = result;
					callback(result);
				});
			}
		}
	};


	win.nyschool = nyschool;

}(document, window));



* 서버 측 구현 방식

: 서버측에서는 /get/{사용자아이디}/{가져올 타입}/{아이디}

: 이런식으로 RESTful의 구조를 사용하도록한다.

: 서버측에서는 들어온 loginId와 실제로 구글 account가 로그인되어있는지 비교한다.


* 향후 할일

: /get/에 대한 handler를 app.yaml에 추가

: 서버측 data 가져오기, JSON으로 파싱하기

: html 파일에 자바스크립트 추가하기

: 저장과 업데이트하는 자바스크립트 구현

: 서버와 통신하는 부분 구현 및 라이브러리화

: 서버측 데이터 구조 구현 및 테스트

: 클라이언트 큰 틀 구현, 기본 프레임 CSS로 잡기

: 클라이언트 측 기능 하나씩 구현, 모바일 테스트

: iOS 호환 Hybrid 앱 개발

: Offline 기능, Sync 기능 탑재 - 라이브러리화

: Android 호환 앱 개발





공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
«   2024/04   »
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
글 보관함