Cordova Todo List 프로젝트
mytodolist 프로젝트 생성 및 시험
D:\cordova>
> cordova create mytodolist com.example.mytodolist MyTodoList
> cd mytodolist
> cordova platform add android
> cordova run android
NodeJS 서버
index.js
var todos = [];
클라이언트
mytodolist.js
var todos = [];
$.ajax("http://localhost:3000/todos").done(function(result) {
console.log(result);
todos = result;
for (const todo of todos) {
$(".contents ul").append(liTemplate(todo.text, todo.checked));
}
});
$("#addButton").click(function() {
var text = $("#inputBox").val();
todos.push({ text: text, checked: false });
$("#inputBox").val("");
console.log(todos);
$(".contents ul").append(liTemplate(text, false));
saveTodos();
});
function liTemplate(text, checked) {
var li = $('<li></li>');
alert(text);
li.attr('value', text);
li.append(inputTemplate(text, checked));
li.append(text);
li.append(buttonTemplate());
li.click(function(event) {
var el = $(event.target);
var index = el.index("li");
console.log(index);
if (el.is("button")) {
todos.splice(index, 1);
$("li")[index].remove();
}
else if (el.is("input[type='checkbox']")) {
var isChecked = el.is(":checked");
if (isChecked) {
$($("li")[index]).addClass("checked");
todos[index].checked = true;
} else {
$($("li")[index]).removeClass("checked");
todos[index].checked = false;
}
}
saveTodos();
});
return li;
}
function inputTemplate(text, checked) {
var inputTag = $('<input type="checkbox" id="checkBox">');
inputTag.attr('checked', checked);
return inputTag;
}
function buttonTemplate(text) {
var buttonTag = $('<button id="delButton">X</button>');
return buttonTag;
}
빌드 및 시험
> npm run start
npm ERR! Missing script: "start"
==>
package.json
"scripts": {
"start": "node index.js"
},
Error: Cannot find module 'express'
==>
> npm install -save express
> cordova run android
플러그인 설치
날짜선택 플러그인
- cordova-plugin-datepicker
- https://www.npmjs.com/package/cordova-plugin-datepicker
- > cordova plugin add -save cordova-plugin-datepicker
알림 플러그인
- cordova-plugin-local-notification
- https://www.npmjs.com/package/cordova-plugin-local-notification
- cordova plugin add -save cordova-plugin-local-notification
function onSuccess(date) {
var text = $("#inputBox").val();
todos.push({ text: text, checked: false, date: date });
$("#inputBox").val("");
console.log(todos);
$(".contents ul").append(liTemplate(text, false, date));
saveTodos();
}
$("#addButton").click(function() {
datePicker.show(options, onSuccess, onError);
});