Database Operations

18 분

서버리스 데이터베이스 작업 수행 소개 이 섹션에서는 back4app을 통해 crud (생성, 읽기, 업데이트 및 삭제) 작업 을 javascript 환경에서 구현하는 방법을 설명합니다 또한 코드 스니펫과 로컬 설정 없이 코드를 실행하고 테스트할 수 있는 온라인 환경을 제공합니다 parse sdk에 대한 자세한 내용은 parse javascript sdk api 참조 https //parseplatform org/parse sdk js/api/4 3 1/ 및 parse 오픈 소스 문서(javascript sdk용) https //docs parseplatform org/js/guide/ 전제 조건 javascript에 대한 기본 지식 외에 추가 요구 사항은 없습니다 선택 사항 이 튜토리얼을 자신의 앱을 사용하여 완료하려면 다음이 필요합니다 back4app에서 javascript용으로 생성 및 구성된 앱 참고 javascript install parse sdk 튜토리얼 1 환경 설정 이 가이드는 jsbin https //jsbin com/ 플랫폼을 코드 편집기로 사용합니다 사용하기 매우 쉽고, 필요한 것은 메인 페이지를 열고 \html\ , \javascript\ 및 \console\ 버튼을 클릭하는 것입니다 코딩을 시작하는 첫 번째 단계는 parse api를 포함하고 앱의 키를 추가하는 것입니다 이 튜토리얼을 위해, 공용 back4app 앱이 생성되어 데이터베이스에서 변경 사항을 확인할 수 있습니다 자신의 앱을 만들 필요가 없습니다 선택 사항 이 예제의 parse 데이터베이스를 확인하려면 자신의 앱을 생성하고 \parse dashboard\ 옵션에 접근해야 합니다 앱에 parse api를 포함하려면, 다음 코드를 \html\ 의 head 태그 안에 추가하세요 그런 다음 파일의 시작 부분에 자격 증명을 추가하십시오 \javascript\ 기본 키는 우리의 공개 앱과 관련된 키입니다 //paste your application key and javascript key, respectively parse initialize("your application id", "your javascript key"); parse serverurl = "https //parseapi back4app com/"; 이 튜토리얼에서는 이름과 나이 필드가 있는 pet 클래스를 기반으로 crud 작업 을 구축할 것입니다 여기서 이름은 문자열이고 나이는 숫자입니다 따라서 코드는 나중에 함수에서 사용할 수 있도록 pet 클래스의 하위 클래스를 생성하는 것으로 시작해야 합니다 아래와 같이 var pet = parse object extend("pet"); 모든 기본 작업은 사용자가 원하는 애완동물의 이름을 말하도록 요구합니다 그렇게 하려면 전역 변수 “textname”을 만듭니다 생성 및 업데이트 메서드에서 사용될 “textage” 변수를 만드는 것도 좋은 생각입니다 var textname = "myname"; var textage = 10; 2 생성하기 이 \생성하기\ 함수는 “textname”과 “textage” 변수에 제공한 이름과 나이로 새로운 애완동물을 생성합니다 이 함수를 만들기 위해 다음 단계를 따르세요 parse의 pet 클래스를 새 인스턴스로 만들기 위해 다음 명령을 사용하세요 이 객체의 매개변수를 설정하기 위해 \설정하기\ 함수를 사용하세요 다음 \저장하기\ 함수를 호출하세요 이 함수는 애완동물을 데이터베이스에 등록합니다 \parse 대시보드\ 이미 구현된 코드를 보려면 back4app javascript 생성 함수 https //jsbin com/bozuguh/edit?html,js,console 를 열 수 있습니다 다음은 \생성하기\ 함수의 코드입니다 create js create(); function create() { mypet = new pet(); mypet set("name", textname); mypet set("agepet", textage); mypet save() then(function(pet){ console log('pet created successful with name ' + pet get("name") + ' and age ' + pet get("agepet")); }) catch(function(error){ console log('error ' + error message); }); } 테스트하려면 이 코드 스니펫을 jsbin https //jsbin com/?html,js,output , 콘솔 부분에서 \실행\ 버튼을 클릭하고 출력을 기다리세요 애완동물이 성공적으로 생성되었다고 출력되어야 합니다 새 객체가 데이터베이스에 있는지 확인하려면 \parse 대시보드\ 에 접근하거나 \읽기\ 함수를 코딩할 수 있습니다 3 읽기 \읽기\ 함수는 데이터베이스를 쿼리하고 검색 기준에 맞는 객체를 반환하는 역할을 합니다 또한 객체의 존재 여부를 확인하는 데에도 사용할 수 있습니다 다음은 자신만의 \읽기\ 함수를 만드는 단계별 가이드입니다 parse의 query 클래스의 인스턴스를 만듭니다 쿼리에 제약 조건을 추가하여 검색을 제한합니다 더 많은 제약 조건 옵션은 parse 쿼리 문서 http //docs parseplatform org/js/guide/#query constraints 쿼리의 검색 메서드를 실행합니다 이 튜토리얼에서는 \query first\ 를 사용하여 기준에 맞는 첫 번째 요소만 가져옵니다 작업이 성공하면 애완동물 객체가 반환됩니다 객체가 발견되지 않으면 반환 객체의 값은 undefined 이 됩니다 다음의 back4app javascript 읽기 함수 https //jsbin com/roziroy/edit?html,js,output 를 열어 이미 구현된 코드를 확인할 수 있습니다 다음은 \읽기\ 함수의 코드입니다 read js read(); function read() { query = new parse query(pet); query equalto("name", textname); query first() then(function(pet){ if(pet){ console log('pet found successful with name ' + pet get("name") + ' and age ' + pet get("agepet")); } else { console log("nothing found, please try again"); } }) catch(function(error){ console log("error " + error code + " " + error message); }); } 함수를 테스트하려면 \읽기\ 코드를 jsbin javascript 파일에 붙여넣으세요 코드가 실행되면, 발견된 애완동물의 나이를 출력합니다(발견된 경우) 또는 애완동물이 발견되지 않았다고 출력합니다 테스트 중에 출력된 나이가 객체의 나이에 해당하지 않는다면, 같은 이름을 가진 다른 객체가 더 있다는 의미입니다 하지만 쿼리는 그 중 하나만 반환합니다 따라서 \읽기\ 함수를 제대로 테스트하려면, 다른 이름의 객체를 생성하세요 아무도 아직 생성하지 않은 이름으로, 그런 다음 함수를 실행하면 객체의 나이를 올바르게 출력합니다 4 업데이트 업데이트 \함수\ 에서는 애완동물이 매개변수로 전달되며, 함수는 “textage” 변수에 제공된 나이로 변경합니다 전달될 애완동물을 찾기 위해, 수정된 버전의 \읽기\ 함수를 사용합니다 아래는 자신의 \업데이트\ 함수를 만드는 단계입니다 “ \readthenupdate\ ”라는 수정된 읽기 함수를 작성하세요 이 함수는 애완동물을 성공적으로 찾으면 \업데이트\ 함수를 호출합니다 “ \업데이트\ ” 함수에서, 애완동물의 매개변수를 수정하기 위해 \설정\ 함수를 사용하세요 이 애완동물에 대해 \저장\ 함수를 호출하여 변경 사항을 데이터베이스에 푸시하세요 “ back4app javascript 업데이트 함수 https //jsbin com/jidinim/edit?html,js,output ”를 열어 이미 구현된 코드를 확인할 수 있습니다 다음은 \readthenupdate\ 함수와 \update\ 함수의 코드입니다 update js readthenupdate(); function readthenupdate() { query = new parse query(pet); query equalto("name", textname); query first() then(function (pet) { if (pet) { console log('pet found with name ' + pet get("name") + ' and age ' + pet get("agepet")); update(pet); } else { console log("nothing found, please try again"); } }) catch(function (error) { console log("error " + error code + " " + error message); }); } function update(foundpet) { textname = "mynameupdated"; textage = 20; console log(textage); foundpet set('name', textname); foundpet set('agepet', textage); foundpet save() then(function (pet) { console log('pet updated! name ' + pet get("name") + ' and new age ' + pet get("agepet")); }) catch(function(error) { console log('error ' + error message); }); } 이 \update\ 함수가 작동하는지 확인하려면, 위의 코드를 jsbin 페이지의 javascript 파일에 붙여넣으세요 다른 사용자와 충돌하지 않도록 객체에 비정상적인 이름을 사용한 다음, 다음 단계를 따르세요 1\ 원하는 이름으로 객체를 생성하세요 2\ \read\ 함수로 객체가 생성되었는지 확인하세요 3\ 원래와 다른 나이로 이 주제에서 만든 \readthenupdate\ 함수를 호출하세요 4\ 다시 \read\ 함수를 호출하여 애완동물의 나이가 변경되었는지 확인하세요 5 삭제 이 \삭제\ 기능은 \읽기\ 기능으로 받은 애완동물을 지웁니다 이는 되돌릴 수 없는 작업으로, 특히 \읽기\ 기능이 실제로 삭제하고자 하는 것보다 더 많은 객체를 반환할 수 있기 때문에 사용 시 주의해야 합니다 따라서 한 번에 하나의 객체만 삭제하는 것이 좋습니다 자신만의 \삭제\ 기능을 작성하는 단계는 아래에서 확인할 수 있습니다 당신의 “읽기” 기능의 성공이 끝날 때 ( \readthendelete\ 이 예제에서), \삭제\ 기능을 호출하세요 “ \deletepet\ ” 기능에서, 받은 객체 “foundpet”에 대해 destroy 메서드를 호출하세요 이미 구현된 코드를 보려면 back4app javascript 삭제 기능 https //jsbin com/vubiqoq/edit?html,js,output 을 열 수 있습니다 다음은 \readthendelete\ 함수와 \deletepet\ 함수의 코드입니다 delete js readthendelete(); function readthendelete() { query = new parse query(pet); query equalto("name", textname); query first() then(function (pet) { if (pet) { console log('pet found with name ' + pet get("name") + ' and age ' + pet get("agepet")); deletepet(pet); } else { console log("nothing found, please try again"); return null; } }) catch(function (error) { console log("error " + error code + " " + error message); return null; }); } function deletepet(foundpet) { foundpet destroy() then(function(response) { console log('pet '+ foundpet get("name") + ' erased successfully'); }) catch(function(response, error) { console log('error '+ error message); }); } 테스트를 위해 다른 사용자와의 객체 충돌을 피하기 위해 특이한 이름의 객체를 생성하는 것이 좋습니다 jsbin에 코드를 붙여넣고 삭제할 객체의 이름으로 코드를 실행하세요 그런 다음, \read\ 함수를 호출하여 해당 이름의 객체가 없음을 확인할 수 있습니다 읽기에서 객체가 반환되면, 이는 반환되지 않아야 하며, 같은 이름의 객체가 더 있을 가능성이 높습니다 \delete\ 함수는 단 하나의 객체만 삭제합니다 \parse dashboard\ 에 접근하여 객체를 확인할 수 있습니다 완료되었습니다! 이제 기본 crud 작업을 javascript로 수행하는 방법을 배웠습니다