Monaca x NIFTY Cloud mobile backend 카메라 사진을 다운로드 및 다운로드하는 샘플

Overview

원래 문서: 링크

Monaca를 사용하여 만든 앱과 모바일 백엔드를 연계하여 스마트 폰 카메라로 찍은 사진을 mBaaS 서버에 업로드하는 기능을 구현하는 샘플 코드입니다.
* HTML/CSS/JavaScript로 멀티 플랫폼(iOS/Android/Windows 등)에 앱을 개발할 수 있는 통합 개발 환경 Monaca
* 스마트 폰 앱의 서버 측 기능 (푸시 통지, 회원 관리, DB 등)을 서버 개발 불필요로 구현할 수 있다 NIFTY Cloud 모바일 백엔드

그러나

Monaca의 github URL ( https://github.com/ncmbadmin/monaca_file_updownload/archive/master.zip)을 가져오고 애플리케이션 키와 클라인트 키를 설정합니다.

"Take picture and save"버튼을 누르면 카메라가 시작됩니다. 사진을 찍으면 자동으로 mBaaS에 파일을 저장합니다.

저장된 파일을 다운로드하여 화면에 표시합니다

시작 화면

취득 완료 화면 Requirement Monaca 환경

Nifty cloud mobile backend Javascript SDK version 1.2.6 다운로드: Javascript SDK

※version 2.0.0은 아직 준비중입니다.

Installation

Monaca에서 새 앱을 만들고 프로젝트를 가져옵니다.

Monaca 사용 등록하기
Monaca

Monaca에서 새 프로젝트 만들기

Monaca에서 앱 만들기 : 프로젝트 가져 오기를 선택하고 "URL을 지정하여 가져 오기"를 선택하고 다음 URL에서 가져옵니다. htps : // 기주 b. 코 m/응 cm바 d민/모나카_후아_우 p도 w응 아 d/아 r치ゔぇ/마 s r. 지 p

Monaca에서 카메라 Phonegap 플러그인 활성화

모바일 백엔드로 앱 만들기

모바일 백엔드 등록 NIFTY Cloud 모바일 백엔드

Monaca에서 만든 앱을 모바일 백엔드 서버와 연결 Monaca에서 애플리케이션 키, 클라이언트 키를 설정하고 초기화: www/js/ncmb_push_start.js 키를 복사하고 추가합니다.

동작 확인

Monaca에서 빌드하고 동작 확인

다운로드한 파일 보기

Description 코드 설명 파일: www/index.html 초기화 설정 var appKey = "YOUR_APP_KEY"; var clientKey="YOUR_CLIENT_KEY"; var fileName="uploaded.jpg"; // 저장 파일 이름 ///// Called when app launch $(function() { NCMB.initialize(appKey, clientKey); }); 위 코드에서 애플리케이션 키와 클라이언트 키를 지정하고, NCMB.initialize(appKey, clientKey)로 mBaaS 서버와 제휴를 실시합니다. 카메라 처리 ``JavaScript 　　　function snapPicture () { navigator.camera.getPicture (onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL}); // 성공할 때 호출되는 콜백 함수 function onSuccess (imageData) { var byteCharacters = toBlob(imageData); var NCMBFile = new NCMB.File(fileName, byteCharacters, "image/png"); NCMBFile.save().then(function() { //NCMB 서버에서 파일 다운로드 var getFile = new NCMB.File(fileName); var image_canvas = document.getElementById("showImage"); getFile.fetchImgSource(image_canvas); }, function(error) { //The file either could not be read, or could not be saved to NCMB. alert(JSON.stringify(error)); }); } // 실패하면 호출되는 콜백 함수 function onFail (message) { alert ('오류입니다: '+ message); } 　　 } `` NCMBFile을 이용해 save() 메소드를 실행하면 파일을 비동기로 업로드합니다. 업로드가 성공하면 getFile을 이용하여 파일을 다운로드합니다. img 태그 "showImage"의 문서 오브젝트를 fetchImgSource()에 건네주어, 다운로드한 파일의 내용을 표시시킵니다. Usage 샘플 코드를 사용자 정의하여 다양한 기능을 구현할 수 있습니다! 데이터 저장, 데이터 검색, 회원 관리, 푸시 알림 등의 기능을 구현하고 싶은 경우, 다음 문서도 참조하십시오.

문서

문서 데이터 스토어

문서 및 회원 관리

문서 푸시 알림

Contributing

Fork it!

Create your feature branch: git checkout -b my-new-feature

Commit your changes: git commit -am 'Add some feature'

Push to the branch: git push origin my-new-feature

Submit a pull request :D

License

MIT 라이센스

NIFTY Cloud mobile backend 자바 스크립트 SDK 라이센스