사진 앱은 강력하다. 자신의 사진앱을 만들기를 원한다면, Parse를 사용하라. Parse는 파일 저장하기, 파일 찾기 그리고 사용자와 연결하기를 포함한 모든 백-엔드를 다룰 수 있다.
이 튜토리얼에서는 Parse 플랫폼에 여러분의 사진을 서버 사이드 코딩 걱정없이 저장할 수 있는 방법을 보여줄 것이다.
완료된 앱은 아래 이미지와 비슷하게 보일 것이다. 우선 더 나은 아이디어를 얻기 위해 샘플 데모앱을 확인하고 구동해보는 것을 추천한다.
설정하기
view-based 프로젝트로 시작할 것이다. 우선 ViewController.xib에 UINavigationBar과 두 개의 UIBarButtonItem
(카메라/새로고침)을 추가한다. 그리고 UIScrollView
을 가운데로 배치시킨다. 최종 nib파일의 모습은 다음과 비슷할 것이다.
마쳤으면, IBOutlet
을 생성하고 UIScrollView
와 연결시킨다. 뿐만아니라 두 개의 IBAction 메소드를 각각 카메라 버튼과 새로고침 버튼에 연결시킨다.
IBOutlets
과 IBActions
이 올바르게 연결되었는지 확인하라. File's Owner를 클릭하고 Connections 인스팩터를 열어서 확인할 수 있다.(스크린샷 참조)
또한, 올바른 프레임워크를 가져오기를(import)해야 한다. 필수 프레임워크: Parse.framework
,AudioToolbox.framework
, CFNetwork.framework
, libz1.1.3.dylib
, MobileCoreServices.framework
,QuartzCore.framework
, Security.framework
, SystemConfiguration.framework
, UIKit.framework
, Foundation.framework
, CoreGraphics.framework
.

마지막으로, 액티비티 인디게이터 또는 스피너를 나타내기 위해 MBProgressHUD
를 사용할 것이다. MBProgressHUD
를 다운로드한다. 그리고 Xcode 프로젝트에 MBProgressHUD.h와 MBProgressHUD.m를 추가한다.
사용자 생성하기
클라우드에 올라간 각각의 파일은 PFUser와 연결될 수 있다. 이 튜토리얼에서는 가입을 위해서 거짓 username과 password를 사용할 것이다. 여기 https://www.parse.com/docs/ios_guide#users 에서 PFUsers
에 관해 더 배울수 있다.
앱 델리게이트에서 처음에 아래 코드를 추가한다.
PFUser *currentUser = [PFUser currentUser ];
if (currentUser) {
[ self refresh :nil ];
} else {
PFUser *user = [PFUser user ];
user .username = @"Matt" ;
user .password = @"password" ;
user .email = @"Matt@example.com" ;
[user signUpInBackgroundWithBlock :^( BOOL succeeded, NSError *error) {
if (!error) {
[ self refresh :nil ];
} else {
[PFUser logInWithUsername : @"Matt" password : @"password" ];
[ self refresh :nil ];
}
}];
}
}
|
이것은 시스템에 사용자가 현재 로그인 되어 있는지 확인한다. 이전에 가입했거나 로그인 되어 있으면 미리 저장되거나 캐쉬된 사용자를 사용한다. 만약 디스크에 캐쉬된 사용자가 없으면, 하나 생성한다.
다시말하면 두 가지의 시나리오에 대한 설명이 필요하다: username이 있을 경우, 로그인을 하면 된다.
헤더 파일 설정하기
구현하기 전에, 헤더 파일을 설정해야한다. 처음으로 메소드를 참조 가능하게 하기위해 ViewController.h
에 <Parse/Parse.h>
를 임포트한다. MBProgressHUD.h
는 엑티비디 인디게이터를 위해 그리고 stdlib.h
는 램덤생성기를 위해서 임포트한다. 또한 델리게이트 메소드를 사용하기 위해서 UINavigationControllerDelegate
, UIImagePickerControllerDelegate
그리고 MBProgressHUDDelegate
프로토콜을 적용한다. UINavigationControllerDelegate
는 UIImagePickerController
가 UINavigationController
의 서브클래스이기 때문에 추가한다.
다음으로, 인스턴스 변수 photoScrollView
, allImages
, HUD
, 그리고 refreshHUD 추가한다. photoScrollView는 사진을 보여주는 스크롤 뷰를 참조한다. allImages
는 사진을 담고 있는 배열을 참조한다. 그리고 나머지 2개는 곧 사용할 HUDs를 참조한다.
마지막으로, 오늘 사용할 5개 메소드를 추가한다.
#import <UIKit/UIKit.h>
#import <Parse/Parse.h>
#import "MBProgressHUD.h"
#include <stdlib.h>
@interface ViewController : UIViewController <UINavigationControllerDelegate, UIImagePickerControllerDelegate, MBProgressHUDDelegate>
{
IBOutlet UIScrollView *photoScrollView;
NSMutableArray *allImages;
MBProgressHUD *HUD;
MBProgressHUD *refreshHUD;
}
- (IBAction)refresh:( id )sender;
- (IBAction)cameraButtonTapped:( id )sender;
- ( void )uploadImage:( NSData *)imageData;
- ( void )setUpImages:( NSArray *)images;
- ( void )buttonTouched:( id )sender;
|
HUD 델리게이트와 Image 사이즈 재조정 메소드 구현하기
HUD 델리게이트 메소드 구현을 해야한다.
- ( void )hudWasHidden:( MBProgressHUD *)hud {
[HUD removeFromSuperview ];
HUD = nil ;
}
|
올바른 시간에 메인 뷰에서 HUD를 삭제한다.
UIImagePickerController 사용하기
다바이스에서 사진을 업로드 할 수 있어야 한다. 만약 카메라를 사용할 수 있으면 사진을 찍고 업로드 한다. 그렇지 않으면, 디바이스 또는 시뮬레이터에 있는 이미지 파일을 올릴 것이다. 5개의 자유롭게 사용할 수 있는 이미지가 있다.
첫 번째 스텝은 cameraButtonTapped 소드에서 UIImagePickerController
를 생성하는 것이다. 우선 카메라 소스가 사용가능한지 검증부터 해야한다. 그리고 UIImagePickerController
객체를 생성한다. 소스 타입과 델리게이트를 설정해야한다.
if ([UIImagePickerController isSourceTypeAvailable :
UIImagePickerControllerSourceTypeCamera] == YES ){
UIImagePickerController *imagePicker = [[UIImagePickerController alloc ] init ];
imagePicker .sourceType = UIImagePickerControllerSourceTypeCamera;
imagePicker .delegate = self ;
[ self presentModalViewController :imagePicker animated : YES ];
}
|
카메라 미지원 디바이스를 다루기 전에 이미지 피커 델리게이트 메소드를 마쳐야 한다. 반환되는 JPEG를 크기를 재조정하고 압축한다. 그리고 uploadImage
메소드를 호출하고 imageData
를 전달한다.
- ( void )imagePickerController:( UIImagePickerController *)picker didFinishPickingMediaWithInfo :( NSDictionary *)info
{
UIImage *image = [info objectForKey : @"UIImagePickerControllerOriginalImage" ];
[picker dismissModalViewControllerAnimated : YES ];
UIGraphicsBeginImageContext(CGSizeMake( 6 4 0 , 9 6 0 ));
[image drawInRect : CGRectMake( 0 , 0 , 6 4 0 , 9 6 0 )];
UIImage *smallImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
NSData *i
|