DeveloperFeaturediOS DeveloperMobile TechnologyObjective CProgramming LanguageSocial Media Marketing

Xcode5 (GM Seed) กับการดึง Web Service มาลงบน UITableViewCell

หลังจากที่ Apple เปิดตัว iOS7 ไปหมาดๆ XCode ก็ได้ก้าวเข้าสู่ เวอร์ชัน 5 จาก Developer Preview เป็น GM Seed ก็เลยขอประเดิมพาทำแอพเชื่อม Web Service สักหน่อย

ก่อนอื่นใครที่ยังไม่มี XCode 5 GM Seed ให้ไปดาวน์โหลดที่ http://developer.apple.com ก่อนนะครับ (เฉพาะผู้ที่มี Developer Program เท่านั้น) เมื่อดาวน์โหลดเสร็จแล้วก็มาเริ่มทำแอพ เล็กๆ กันหน่อยดีกว่า

Screen Shot 2556-09-13 at 4.08.33 PM

ทำการ New Project ขึ้นมาใหม่เลือกเป็น Single View Application ครับ

Screen Shot 2556-09-13 at 12.18.01 PM

ตั้งชื่อ Project เหมือนเดิมๆ ปรกติครับ

Screen Shot 2556-09-13 at 12.18.36 PM

เมื่อเสร็จแล้วเรามาว่ากันด้วยเรื่องของ Web Service กันหน่อย ซึ่งแต่เดิมเราจะคุ้นตากับ XML และต่อมาก็เป็นแบบ JSON ซึ่งจะได้รับความนิยม และนักพัฒนาชอบกันมากครับ สำหรับข้อมูล Web Service หลังบ้านที่ผมจะเอามาใช้นั้นคือ JSON ที่มาจาก Plugin ของ WordPress แปลง Feed ปรกติให้เป็น JSON รองรับ Web Service

ผมใช้ URL ของ Web Service ของเว็บไซต์ผมเอง http://www.gooruism.com/feed/json

จะมีโครงสร้างดังนี้

Screen Shot 2556-09-13 at 3.59.55 PM

ต่อมาก็คือการเอา Web Service ส่วนนี้มาแสดงผลผ่านหน้าแอพพลิเคชันของเราครับ เปิดไฟล์ MainStoryBoard แล้วให้ทำการลาง Object อย่าง UITableView มาวางบน ViewController ทำการ Delegate และ Datasource ให้เรียบร้อย

Screen Shot 2556-09-13 at 12.19.16 PM

เปิด XCode5 GM Seed ขึ้นมา

Screen Shot 2556-09-13 at 12.19.32 PM

ไปที่ MainStoryBoard

Screen Shot 2556-09-13 at 12.20.03 PM

 

 

Screen Shot 2556-09-13 at 1.19.08 PM

นำ UITableView มาวาง ที่ ViewController ทำการ Delegate และ Datasource

Screen Shot 2556-09-13 at 12.20.11 PM

 

เพิ่ม Prototype Cell มาสัก 1 แถว

เปิดไฟล์ ViewController.h ขึ้นมาแก้ไข คำสั่งจาก

#import 
@interface ViewController : UIViewController
@end

ให้กลายเป็น

#import 
@interface ViewController : UIViewController
{
    IBOutlet UITableView *tableData;
}
@end

นั่นคือเราสร้าง ตัวแปล tableData มาเพื่อใช้งานกับ UITableView นั่นเอง ต่อไปให้ไปแก้ไขไฟล์ ViewController.m โดยเพิ่ม Method ต่อไปนี้ลงไป

@interface ViewController ()
{
    NSMutableArray *myObject;
    // A dictionary object
    NSDictionary *dictionary;
    // Define keys
    NSString *title;
    NSString *thumbnail;
    NSString *author;
}
@end

เพิ่มต่อท้าย Method ของ viewDidLoad()

- (void)viewDidLoad
{
    [super viewDidLoad];
	title = @"title";
    thumbnail = @"thumbnail";
    author = @"author";
    
    myObject = [[NSMutableArray alloc] init];
    
    NSData *jsonSource = [NSData dataWithContentsOfURL:
       [NSURL URLWithString:@"http://gooruism.com/feed/json"]];
    
    id jsonObjects = [NSJSONSerialization JSONObjectWithData:
       jsonSource options:NSJSONReadingMutableContainers error:nil];
    
    for (NSDictionary *dataDict in jsonObjects) {
        NSString *title_data = [dataDict objectForKey:@"title"];
        NSString *thumbnail_data = [dataDict objectForKey:@"thumbnail"];
        NSString *author_data = [dataDict objectForKey:@"author"];
        
        NSLog(@"TITLE: %@",title_data);
        NSLog(@"THUMBNAIL: %@",thumbnail_data);
        NSLog(@"AUTHOR: %@",author_data);
        
        dictionary = [NSDictionary dictionaryWithObjectsAndKeys:
                      title_data, title,
                      thumbnail_data, thumbnail,
                      author_data,author,
                      nil];
        [myObject addObject:dictionary];
    }
}

เป็นเรียกข้อมูล title, thumbnail และ author มาทำการแสดงผลร่วมกับ UITableViewCell นั่นเองต่อจากนั้นเพิ่มคำสั่งของ UITableViewCell ออกมาตามนี้ เป็นการเรียกค่าต่างๆ มาเก็บลงในตัวแปร

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return myObject.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *CellIdentifier = @"Item";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell=[[UITableViewCell alloc]initWithStyle:
        UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier];
    }
    
    
    NSDictionary *tmpDict = [myObject objectAtIndex:indexPath.row];
    
    NSMutableString *text;
    //text = [NSString stringWithFormat:@"%@",[tmpDict objectForKey:title]];
    text = [NSMutableString stringWithFormat:@"%@",
           [tmpDict objectForKeyedSubscript:title]];
    
    NSMutableString *detail;
    detail = [NSMutableString stringWithFormat:@"Author: %@ ",
             [tmpDict objectForKey:author]];
    
    NSMutableString *images;
    images = [NSMutableString stringWithFormat:@"%@ ",
             [tmpDict objectForKey:thumbnail]];
    
    NSURL *url = [NSURL URLWithString:[tmpDict objectForKey:thumbnail]];
    NSData *data = [NSData dataWithContentsOfURL:url];
    UIImage *img = [[UIImage alloc]initWithData:data];
    
    
    cell.textLabel.text = text;
    cell.detailTextLabel.text= detail;
    cell.imageView.frame = CGRectMake(0, 0, 80, 70);
    cell.imageView.image =img;
     
    return cell;
}

เป็นการรันตัว Web Service ไปเก็บไว้ในตัวแปร เล็กน้อย

แล้วใช้ UITableViewCell แสดงผล ค่าตัวแปรต่างๆ ออกมา ใน Code ส่วนนี้

NSMutableString *text;
    text = [NSMutableString stringWithFormat:@"%@",
           [tmpDict objectForKeyedSubscript:title]];
    
    NSMutableString *detail;
    detail = [NSMutableString stringWithFormat:@"Author: %@ ",
             [tmpDict objectForKey:author]];
    
    NSMutableString *images;
    images = [NSMutableString stringWithFormat:@"%@ ",
             [tmpDict objectForKey:thumbnail]];
    
    NSURL *url = [NSURL URLWithString:[tmpDict objectForKey:thumbnail]];
    NSData *data = [NSData dataWithContentsOfURL:url];
    UIImage *img = [[UIImage alloc]initWithData:data];
    
    
    cell.textLabel.text = text;
    cell.detailTextLabel.text= detail;
    cell.imageView.frame = CGRectMake(0, 0, 80, 70);
    cell.imageView.image =img;

สุดท้ายให้ทำการลิงค์จาก File Owner หรือไอคอน ViewController กลับไปยัง UITableView แล้วเลือก tableData ก็เป็นอันเรียบร้อย ทดลอง Run ตัว Project เพื่อดูผลลัพธ์

จะเห็นว่าในช่อง Console ของตัว XCode5 GM Seed จะดึงข้อมูลสำเร็จเรียบร้อย

Screen Shot 2556-09-13 at 12.28.31 PM

และหน้าจอ แอพพลิเคชันบน iOS Simulator จะแสดงผลแบบนี้

iOS Simulator Screen shot Sep 13, 2556 BE 3.16.08 PM

 

หน้าจอแอพพลิเคชันของเราที่ดึง Web Service

 

สิ่งที่ได้จากบทเรียนนี้คือการ ดึงข้อมูล Web Service ในรูปแบบ JSON จากฐานข้อมูล MySQL ให้มาแสดงผลอย่างเป็นระเบียบและสวยงามผ่าน UITableView บนแอพพลิเคชัน iPhone ของเรา เพื่อที่จะได้นำข้อมูลทั้งหลายไปประยุกต์ใช้งาน พัฒนาแอพพลิเคชันที่ซับซ้อนในรูปแบบต่อๆ ไปในอนาคต

Asst. Prof. Banyapon Poolsawas

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

Back to top button

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน