(31 July 2013) iOS Basic Development 1 introduction & Xcode

iOS Basic Development
Day 1
Xcode & Objective-C 2.0
by Eakapong Kattiya www.ibluecode.com eak.k@ibluecode.com +66 086-673-2111
Tuesday, July 30, 13

Slide
www.slideshare.net/eakkattiya
Source Code
www.ibluecode.com/training.html
Fan Page
www.ios-talk.com
twitter.com/eakkattiya
facebook.com/eakapong.kattiya
email : eak.k@ibluecode.com
Eakapong Kattiya
Professional Mobile Application
Developer / Trainer
iOS & Android Platform
About

Course Outline
1. Xcode & Objective-C 2.0
2. Human Interface Design
3.TableViewController
4. Multimedia
5. Submit App Store
Course Outline

Developing iOS Apps

Mobile Device in World Market
Android
iOS
Windows Phone
BlackBerry
Linux
Symbian
credits: http://idc.com/
Worldwide Smartphone Operating Systems Market Share 1Q2013 (16 May 2013)

Mobile Device in World Market
Symbian
1%
Linux
1%BlackBerry
3%Windows Phone
3%
iOS
17%
Android
75%
Android
iOS
Windows Phone
BlackBerry
Linux
Symbian
credits: http://idc.com/
Worldwide Smartphone Operating Systems Market Share 1Q2013 (16 May 2013)

- It’s Wow !
(iPhone 5 / iPad Mini / iOS 7)
- Best Store
(AppStore)
- BestTools
(Xcode , IB , Instruments )
- Best Support
(documentation , sample code )
- Multi Platform
(iPhone , iPad , iPodTouch)
- Advertising Program
(iAds)
Why iOS ?

Developing iOS Apps : Setup
Download ชุดพัฒนา Xcode จาก
> Lion : Mac App Store
< Snow Leopard : developer.apple.com

Developing iOS Apps :Tools

Xcode Interface Builder iPhone Simulator
Dashcode Instruments
-Tool ในการพัฒนาโปรแกรมบนมือถือที่สะดวกและสมบูรณ์ที่สุดในปัจจุบัน
เนื่องจาก Apple ออกแบบทั้ง Software และ Hardware เอง
- iOS Simulator ที่ดีที่สุดใช้งานง่ายที่สุด
Tools : Xcode 4.6.3 / iOS 6.1 SDK

Xcode : Navigator , Editor , Utility Area

Object-Oriented Programming
Objective-C 2.0
Developing iOS Apps : Language
http://tinyurl.com/o54n8jd

Objective-C 2.0
เราต้องเริ่มเรียนรู้อะไรบ้าง ?
- การตั้งชื่อวัตถุ Class & Object ( คลาส & ออปเจ็ค )
- การจองหน่วยความจําให้วัตถุ Instantiation (Alloc & init)
- การสร้างคลาสใหม่ Inheritance / Subclass คลาสลูก
- โครงสร้างคลาส Interface and Implementation :
- องค์ประกอบของคลาส Instance , Property & Method :
Class & Object
Instantiation
(Alloc & Init)
Inheritance & Subclass
Interface &
Implementation
Instance , Property &
Method

Class = แบบแปลนหรือพิมพ์เขียว/ชนิดของวัตถุ
Object = วัตถุ
Class ------ Implement ------> Object
คลาส (แม่แบบ) ------ นําไปสร้างเป็น ------> วัตถุ
Objective-C 2.0 : การตั้งชื่อวัตถุ

UIView *myView ;
ClassName *objectName ;
Framework
<UIKit>
ขึ้นต้นด้วยตัวเล็กเสมอขึ้นต้นด้วยตัวใหญ่เสมอ
ปิดประโยค
pointer
Objective-C 2.0 : การตั้งชื่อวัตถุ

Objective-C 2.0 : PrimitiveTypes (ตัวแปรเก็บค่าพื้นฐาน)
BOOL isCorrect = NO ; //YES
NSInteger myInteger = 1234 ;
CGFloat myFloat = 123.40 ;
double myDouble = 123.40 ;
Objective-C 2.0 : Value ObjectTypes (ตัวแปรเก็บค่าพื้นฐาน + Method)
NSNumber *number = @1234 ;
NSString *name = @"world" ;
NSString *greeting = [NSString stringWithFormat:@"Hello, %@ , %d",
name,
[number integerValue]];
Objective-C 2.0 : การกําหนดค่าให้กับ Object

Objective-C 2.0 : If Else Condition (เงื่อนไข)
NSString *name = @"world" ;
BOOL isCorrect = [name isEqualToString:@"world"]; //Method
if(isCorrect){ //Block
NSLog(@"Welcome %@",name);
}else{
NSLog(@"Wrong user name");
}

Objective-C 2.0 : Instantiation (การจองหน่วยความจําให้ Object)
//This is variable type not object
CGRect rect = CGRectMake(10, 10, 300, 200);
//Instantiation 1
UIView *myView1 = [UIView new];
[myView1 setFrame:rect];
[myView1 setBackgroundColor:[UIColor greenColor]];
//Instantiation 2
UIView *myView2 = [[UIView alloc]init];
[myView2 setFrame:rect];
//Instantiation 3
UIView *myView3 = [[UIView alloc]initWithFrame:rect];
[myView3 setBackgroundColor:[UIColor blueColor]];

Objective-C 2.0 : Instantiation (การจองหน่วยความจําให้ Object)
//Instantiation 1
MyClass *myObject1 = [MyClass new];
[myObject1 setName:@"Hello"];
//Instantiation 2
MyClass *myObject2 = [[MyClass alloc]init];
myObject2.name = @"Hello";
//Instantiation 3
MyClass *myObject3 = [[MyClass alloc]initWithString:@"Hello"];
Custom Class / Construction

Objective-C 2.0 : NSArray (แก้ไขข้อมูลไม่ได้)
// Compose a static array of string objects
NSString *objs[3] = {@"One", @"Two", @"Three"};
// Create an array object with the static array
NSArray *arrayOne = [NSArray arrayWithObjects:objs count:3];
// Create an array with a nil-terminated list of objects
NSArray *arrayTwo = [NSArray arrayWithObjects:@"One", @"Two", @"Three", nil];
NSArray *arrayThree = @[ @"Hello World", @67, [NSDate date] ];
// get first object in array @”Hello World”
String *one = arrayThree[1];
// get second object in array @67
NSNumber *two = [arrayThree objectAtIndex:1];
Objective-C 2.0 : NSMutableArray (แก้ไขข้อมูลได้)
NSMutableArray *mutableArray = [NSMutableArray new];
[mutableArray addObject:@"First"];
[mutableArray removeObjectAtIndex:0];

Objective-C 2.0 : NSDictionary (แก้ไขข้อมูลไม่ได้)
NSDictionary *myDict =
[NSDictionary dictionaryWithObjectsAndKeys:@"eak",@"name",
@10,@"age",
YES,@"isPass",
nil];
NSString *name =[myDict valueForKey:@"name"] ;
NSDictionary *myDict = @{@"eak",@"name",
@10,@"age",
YES,@"isPass",
nil];
Shorten Format

Objective-C 2.0 : NSMutableDictionary (แก้ไขข้อมูลได้)
NSMutableDictionary *myDict =
[NSMutableDictionary dictionaryWithObjectsAndKeys:@"eak",@"name",
@10,@"age",
YES,@"isPass",
nil];

การสืบทอดคลาส Inheritance & Subclass
1. คลาส ทุกตัวต้องมีการสืบทอดจาก คลาสแม่ (Super class) เช่น
UILabel สืบทอดมาจาก UIView
2. ยกเว้น คลาส NSObject เนื่องจากเป็นคลาสแม่ของทุกตัว

Objective-C 2.0 : Interface & Implementation

Objective-C 2.0 : Interface (.h ﬁle)
@interface classname : superclassname {
// instance variables
NSString *userInput ;
}
// Class Property
@property (weak, nonatomic) IBOutlet UILabel *myLabel;
@property (weak, nonatomic) NSString *name ;
+ classMethod1;
+ (return_type)classMethod2;
+ (return_type)classMethod3:(param1_type)param1_varName;
- (return_type) instanceMethod1With1Parameter:(param1_type)param1_varName;
- (return_type)instanceMethod2With2Parameters:(param1_type)param1_varName
param2_callName:(param2_type)param2_varName;
@end

Objective-C 2.0 : Implementation (.m ﬁle)
@implementation classname
+ (return_type)classMethod
{
// implementation
}
- (return_type)instanceMethod
{
// implementation
}
@end

Developing iOS Apps : Frameworks

http://www.apple.com/ios/ios7/
Developing iOS Apps : Frameworks

Create a new Xcode project

Choose a template : iOS Application/ SingleView Application

Choose Product Name : MyFirstApp (ขึ้นต้นด้วยตัวใหญ่เสมอ)
Product Name : MyFirstApp
Class Preﬁx : ไม่ใส่
Devices : Universal
Use Storyboards :YES
Use ARC :YES

UIViewController

UIViewController
เป็น Class ที่ใช้สําหรับการเขียนคําสั่ง (Logic) เพื่อ
ควบคุมการแสดงViews เช่นการสลับViews แสดง
ข้อมูลบนView และลบViews

UIViewController & UIView
-Control ที่ทําการแสดงผลที่เป็น Class UI (User Interfaces)
นั้นสืบทอดมาจาก Class UIView เหมือนกันหมด เช่น
UILabel , UITextField , UIButton
ดังนั้น UIViewController จึงสามารถเขียนคําสั่งควบคุม
Control ได้ทุกตัว

#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
// Method Declaration (instance method)
- (void)changeColorToRed:(float)red
green:(float)green
blue:(float)blue;
@end
Objective-C 2.0 : Method Declaration (ViewController.h )

Objective-C 2.0 : Method Implementation (ViewController.m )
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
//Call instance method
[self changeColorToRed:5.0 green:2.0 blue:6.0];
}
//Method implementation
- (void)changeColorToRed:(float)red green:(float)green blue:(float)blue
{
UIColor *color = [UIColor colorWithRed:red
green:green
blue:blue
alpha:1.0];
[self.view setBackgroundColor:color];
}

UIWindow
- ทุก Application จะต้องมี window
- บน iOS จะมีเพียง 1 window
- ใช้สําหรับนําViewController(s)
มาวางบน UIWindow
- ขนาด 320 x 480 (iPhone)
640 x 960 (iPhone Retina)
640 x 1136 (iPhone 5 Retina)
768 x 1024 (iPad)
1536 x 2048 (iPad Retina)
window

UIView
SubView (50,50,100,100)
SuperView (10,10,300,200)
self.view (0,0,320,480)
- เป็นการวาดพื้นที่สี่เหลี่ยมเพื่อแสดงบนหน้าจอ
- สามารถสร้างด้วย Interface Builder หรือ coding

UIView
- CGRect
พื้นที่สี่เหลี่ยมในการวาด (x ,y ,width ,height)
- CGRectMake : (CGRect)
คําสั่งในการสร้าง CGRect
- setBackgroundColor: (UIColor*)
กําหนดสีพื้นหลัง
- addSubView : (UIView*)
เอาView1 (subView) หนึ่งไปแปะกับView2 (ParentView)

- (void)viewDidLoad
{
//Call instance method
[self changeColorToRed:5.0 green:2.0 blue:6.0];
//
CGRect rect1 = CGRectMake(10, 10, 300, 200);
UIView *myView1 = [[UIView alloc]init];
[myView1 setFrame:rect1];
[self.view addSubview:myView1];
CGRect rect2 = CGRectMake(50, 50, 100, 100);
UIView *myView2 = [[UIView alloc]initWithFrame:rect2];
[myView2 setBackgroundColor:[UIColor blueColor]];
[myView1 addSubview:myView2];
}
ViewController.m

UIViewController
- presentModalViewController
แสดงViewController ขึ้นมาทับViewController อื่น ๆ
- dismissModalViewControllerAnimated
ยกเลิกการแสดงViewController
(ใช้คู่กับ presentModalViewController)

Developing iOS Apps : Design Patterns
Model-View-Controller
Target-Action
Delegation
Block Objects
Protocol
Notiﬁcation Center
Key-Value Observing (KVO)
http://tinyurl.com/o8pnof9

Model-View-Controller (MVC)

Model
เป็น Class ที่สร้างขึ้นเพื่อใช้เก็บข้อมูลของโปรแกรม
เช่น Class Contacts เก็บรายชื่อ เบอร์โทร ผู้ติดต่อ
โดยไม่จําเป็นต้องคํานึงถึงView และ Controller

View
เป็น Class ที่สร้างขึ้นเพื่อแสดงผลบนหน้าจอ เช่น UIView ,
UILabel , UITextField โดยไม่จําเป็นต้องคํานึงถึง Controller แต่ต้อง
คํานึงถึงประเภทของข้อมูลที่จะเชื่อมต่อกับ Model

Controller
เป็น Class ที่สร้างขึ้นเพื่อเชื่อมต่อระหว่าง Model กับView เช่น
Class UIViewController และควบคุม Flow การทํางานของโปรแกรม

Decrease Spaghetti codes
เป็นการออกแบบโครงสร้างการทํางานของโปรแกรมเป็น 3 ส่วน
เพื่อลดความยุ่งเหยิงของ code ที่ link หรือพันกันไปมาใน Class
เดียวแบบเส้น สปาเกตตี

Avoid Monster Class
หลีกเลี่ยงการสร้าง Monster Class แบบ Class เดียวทําหน้าหลาย
อย่างตั้งแต่ เก็บข้อมูล แสดงผล ควบคุมView ต่าง ๆ ในตัวเอง
เนื่องจากไม่สามารถนํา code ไปใช้ใหม่ได้ง่าย

- ( Easy to maintain ) โดยการแยกหน้าที่แต่ละส่วนชัดเจนช่วยให้
แก้ไขโปรแกรมได้ง่ายภายหลัง เนื่องจากมีส่วนเชื่อมต่อกันน้อยลง
- ( Reusability) การแยกแต่ละส่วนชัดเจนช่วยให้สามารถเกิดการนํา
Code ไปใช้้ซ้ําใหม่ได้ หรือนําเอาไปใช้ที่อื่นได้
- การนําไปใช้ซ้ําใหม่ทําให้เขียน Code น้อยลง

IBOutlet
IBOutlet
สร้างเพื่อกําหนด ชื่อตัวแปร ให้กับ Control ต่าง ๆ โดยประกาศใน Header File (ViewController.h)
สําหรับการเขียน Code ใน Implementation (ViewController.m)

Storyboard : Design User Interface

IBOutlet : Insert new outlet : myLabel
Assistant Editor
ViewController.h

IBOutlet : Insert new outlet : myLabel

IBOutlet : Insert new outlet : myTextField

IBAction
IBAction
สร้างเพื่อกําหนด ชื่อคําสั่ง ให้กับ Control ต่าง ๆ โดยประกาศใน Header File (ViewController.h)
สําหรับการเขียน Code ใน Implementation (ViewController.m)

IBAction : UIButtonTouch Up Inside : showName

IBAction : UIButtonTarget-Action : showName

#import <UIKit/UIKit.h>
@interface ViewController : UIViewController<UITextFieldDelegate>
@property (weak, nonatomic) IBOutlet UILabel *myLabel;
@property (weak, nonatomic) IBOutlet UITextField *myTextField;
- (IBAction)showName:(id)sender;
@end
Interface file : ViewController.h
IBOutlet
สร้างเพื่อกําหนด ชื่อตัวแปร ให้กับ Control ต่าง ๆ สําหรับการเขียน Code ในViewController.m
IBAction
สร้างเพื่อกําหนด ชื่อคําสั่ง ให้กับ Control ต่าง ๆ สําหรับการเขียน Code ในViewController.m

#import "ViewController.h"
- (void)viewDidLoad
{
!
self.myLabel.text = @"What is your name?" ;
self.myTextField.delegate = self ;
}
#pragma mark UIButton Target-Action
- (IBAction)showName:(id)sender {
self.myLabel.text =
[@"Welcome " stringByAppendingString:self.myTextField.text] ;
}
#pragma mark TextField Delegate
-(BOOL)textFieldShouldReturn:(UITextField *)textField
{
[textField resignFirstResponder];
return YES ;
}
Implementation file : ViewController.m

ViewController.m

Q & A

Proﬁle
The course is designed and delivered by Eakapong Kattiya,a
developer of several successful iOS and Android apps. Eakapong
Kattiya is primarily an iOS / Android developer, rather than a part-
time trainer and so brings direct experience in designing, developing,
shipping and marketing successful apps.
Experience
4 years iOS/Android developer ,Trainer and Project Adviser
10 years Software developer ,Trainer and Project Adviser
iOS/Android Trainer
iPhone Application for Beginner.
iPhone Application for Advance : Database on iPhone.
iPhone Application for Advance : Location Based & Social Network.
Android Application for Beginner
Android Application for Advance : Database on Android
Android Application for Advance : Location Based & Social Network.
Education
MBA , Chiangmai University
Bachelor Degree , Computer Engineering, Chiangmai University
Eakapong Kattiya
Professional Mobile Application
Developer / Trainer
iOS & Android Platform
About

Assumption
University
BECTeroradio Thailand
YellowPages
Thai M
Service
HIPKINGDOM
ASTV
Manager
Android & iOS Application
MeccanicNambud Social DiaryHISOMap
And More...
Spring News
Blacklist

And More...
Android & iOS Training / Consulting
Health Information System
Development Office (HISO)

dtac Accelerate - Wizard of Apps 2013
Top 10 Finalists
Evrdi : Social Diary
True App Center Awards 2009
Top 20 Finalists :
iMall : Siam paragon

(31 July 2013) iOS Basic Development 1 introduction & Xcode

Recomendados

Recomendados

Más contenido relacionado

Más de Eakapong Kattiya

Más de Eakapong Kattiya (9)

(31 July 2013) iOS Basic Development 1 introduction & Xcode