noora!alemadi! development.pdf · ! 4! ii. choose!project!template!...

12
Mobile Apps Development Workshop Guideline Presented by: Noora AlEmadi @alemadi_n

Upload: others

Post on 14-Jul-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Noora!AlEmadi! development.pdf · ! 4! ii. Choose!project!template! From!“iOS”,!choose!“Application”!!!“Single!View!Application”!!!! iii. Choose!project!options! Fill!the!fieldas!shown

 

 

 

 

Mobile  Apps  Development  Workshop  Guideline  

 

 

 Presented  by:  

Noora  AlEmadi                @alemadi_n

 

 

   

Page 2: Noora!AlEmadi! development.pdf · ! 4! ii. Choose!project!template! From!“iOS”,!choose!“Application”!!!“Single!View!Application”!!!! iii. Choose!project!options! Fill!the!fieldas!shown

 

  2  

Table  of  content    

1. What  do  you  need  to  start  developing  iPhone  apps  

2. Installing  “Xcode”  

3. Xcode  

• Creating  new  project  

4. Project  “CoolUI”  

• Project  Navigation  

• Working  bench  

• Properties  

• iPhone  simulator  

• User  Interface  Elements  

• Files  

-­‐ Header  Files  (.h)  &  implementation  Files  (.m)  

• Declaring  Variables  

• Declaring  Methods  

5. Challenges  

6. Resources  

   

Page 3: Noora!AlEmadi! development.pdf · ! 4! ii. Choose!project!template! From!“iOS”,!choose!“Application”!!!“Single!View!Application”!!!! iii. Choose!project!options! Fill!the!fieldas!shown

 

  3  

1. What  do  you  need  to  start  developing  iPhone  apps  a. Mac  Computer  

b. Xcode  

c. Objective-­‐C  

 

 

2. Installing  “Xcode”    

From  “App  Store”  on  Mac                  ,Search  for  “Xcode”,  install  it.  

 

 

3. Xcode  a. Creating  new  project.  

i. From  Menu  bar,  File  à  New  à  Project  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Page 4: Noora!AlEmadi! development.pdf · ! 4! ii. Choose!project!template! From!“iOS”,!choose!“Application”!!!“Single!View!Application”!!!! iii. Choose!project!options! Fill!the!fieldas!shown

 

  4  

ii. Choose  project  template  

From  “iOS”,  choose  “Application”  à  “Single  View  Application”  

 

   

iii. Choose  project  options  

Fill  the  field  as  shown  below,  then  click  “Next”,  choose  the  location  for  your  project  

 

   

 

Page 5: Noora!AlEmadi! development.pdf · ! 4! ii. Choose!project!template! From!“iOS”,!choose!“Application”!!!“Single!View!Application”!!!! iii. Choose!project!options! Fill!the!fieldas!shown

 

  5  

iv. Xcode  view  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Left  pane    

Project  Navigation  

Middle  pane    

Working  bench  

Right  pane    

Properties  

Page 6: Noora!AlEmadi! development.pdf · ! 4! ii. Choose!project!template! From!“iOS”,!choose!“Application”!!!“Single!View!Application”!!!! iii. Choose!project!options! Fill!the!fieldas!shown

 

  6  

4. Project  “CoolUI”  a. Project  Navigation  

 -­‐ CoolUI  -­‐  folder  

a. Header  files  with  .h  are  for  declaring  variables  and  functions  

b. Objective-­‐C  class  file  with  .m  are  for  implementing  functions  

c. User  Interface  files  with  .xib  are  for  user  interface  elements  

 

-­‐ Supporting  Files  –  folder  

a. This  folder  contains  source  code  files  and  resources  that  aren’t  Objective-­‐C  classes  

but  that  are  necessary  to  your  project.  

i. CoolUI-­‐Info.plist  is  a  property  list  that  contains  information  about  the  

application.    

ii. InfoPlist.strings  is  a  text  file  that  contains  human-­‐readable  strings  that  may  be  

referenced  in  the  info  property  list.  

iii. main.m  contains  your  application’s  main()  method.  You  normally  won’t  need  

to  edit  or  change  this  file  

iv. CoolUI_Prefix.pch  is  a  list  of  header  files  from  external  frameworks  that  are  

used  by  your  project  

 

 

 

 

 

 

 

 

Page 7: Noora!AlEmadi! development.pdf · ! 4! ii. Choose!project!template! From!“iOS”,!choose!“Application”!!!“Single!View!Application”!!!! iii. Choose!project!options! Fill!the!fieldas!shown

 

  7  

b. Working  bench  

i. To  edit  the  files  (.h,  .m,  .xib)  

   

c. Properties  

i. Inspector  &  Library  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Page 8: Noora!AlEmadi! development.pdf · ! 4! ii. Choose!project!template! From!“iOS”,!choose!“Application”!!!“Single!View!Application”!!!! iii. Choose!project!options! Fill!the!fieldas!shown

 

  8  

d. iPhone  Simulator  

-­‐ You  can  run  it  from  “Run”  button  to  view  the  application  and  the  changes  that  are  made  

as  shown  below  

 -­‐ You  should  have  the  iPhone  simulator  as  shown  below  

   

e. User  Interface  Elements  

i. UITextField  

ii. UIButton  

iii. UIImage  

 

 

 

 

 

 

 

 

 

Page 9: Noora!AlEmadi! development.pdf · ! 4! ii. Choose!project!template! From!“iOS”,!choose!“Application”!!!“Single!View!Application”!!!! iii. Choose!project!options! Fill!the!fieldas!shown

 

  9  

iv. Connecting  IBOutlet  with  UIImage,  UITextView  and  UIButton  

• From  File  Navigation,  choose  .xib  file  

a. From  right  pane  choose  “Outlets”,  choose  the  outlet  and  drag  it  to  the  UI  

element  

 

Methods in ViewConteroller.m file to implement pressing button and test field:

- (IBAction)didFinishEditing:(id)sender { [self.textField resignFirstResponder];

}

- (IBAction)buttonPressed:(id)sender { NSString *aText = [NSString stringWithFormat:@"you wrote: %@", self.textField.text]; UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"Hello" message:aText delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil, nil]; [alertView show]; }  

 

 

 

 

 

 

 

 

Outlets  

Page 10: Noora!AlEmadi! development.pdf · ! 4! ii. Choose!project!template! From!“iOS”,!choose!“Application”!!!“Single!View!Application”!!!! iii. Choose!project!options! Fill!the!fieldas!shown

 

  10  

f. Files  

i. To  create  new  .m  &  .h  files:  -­‐ From  the  menu  bar,  choose  “File”  à  “New”  à  “File”  

-­‐ Then,  choose  “Cocoa  Touch”  from  “iOS”  à  “Objective-­‐C  class”  

 -­‐ In  “Class”  field  write  the  name  of  the  View  Controller,  and  check  “With  XIB  

for  user  interface”  

 -­‐ You  can  change  the  “subclass  of”  as  shown  below  

 

Page 11: Noora!AlEmadi! development.pdf · ! 4! ii. Choose!project!template! From!“iOS”,!choose!“Application”!!!“Single!View!Application”!!!! iii. Choose!project!options! Fill!the!fieldas!shown

 

  11  

 

g. Declaring  Variables  

i. In  .h  (header)  file  we  can  declare  variable  (String,  Arrays,  Number,  …  etc)  

   

ii. In  .m  file  we  add  @synthesize for the variable that is created after

@implementation

@synthesize will generate getter and setter methods for the property

h. Declaring  Methods  

i. In  header  file  we  write  the  method  name  

 ii. In .m file we write the implementation for the method

   

Page 12: Noora!AlEmadi! development.pdf · ! 4! ii. Choose!project!template! From!“iOS”,!choose!“Application”!!!“Single!View!Application”!!!! iii. Choose!project!options! Fill!the!fieldas!shown

 

  12  

5. Challenges  a. Learning  curve  of  Objective-­‐C  

b. Xcode  environment  

c. Memory  management  and  performance  

d. User  Interface  

 

 

6. Resources  a. https://developer.apple.com/  

b. Books:  

i. Programming  in  Objective-­‐C  

ii. Beginning  iOS  6  Development:  Exploring  the  iOS  SDK