cara memulai belajar xcode

Tutorial singkat menunjukkan bagaimana membuat sebuah proyek untuk aplikasi Mac yang mencetak teks dalam jendela. Bekerja melalui tutorial ini, Anda berkenalan dengan perangkat lunak alur kerja-penciptaan di Xcode: menciptakan proyek, merancang user interface, menulis kode, dan menjalankan aplikasi. Anda juga belajar bagaimana memperbaiki kesalahan kode Xcode mendeteksi ketika Anda menulis kode, dan Anda mendapatkan pengantar ke fasilitas debugging Xcode.

Halo adalah aplikasi sederhana. Ketika pengguna meluncurkan itu, sebuah jendela muncul, yang menampilkan teks "Hello, World!", Mirip dengan jendela yang ditunjukkan pada Gambar 1-1.

Gambar 1-1 Penerapan Halo beraksi

Di bawah tenda, antarmuka pengguna terdiri dari sebuah jendela yang berisi tampilan. Tampilan tahu bagaimana menampilkan data. Objek ini memiliki metode built-in di mana Kakao mengelola gambar ke tampilan. Anda perlu memberikan kode yang menarik "Hello, World!" Pesan.Dalam tutorial ini Anda menggunakan Objective-C dan kerangka Kakao untuk membuat tampilan dan melaksanakan rutinitas menggambar. Anda tidak perlu akrab dengan Cocoa atau Objective-C untuk menyelesaikan tutorial ini, tetapi Anda harus akrab dengan pemrograman dalam beberapa bahasa, sebaiknya bahasa C-based atau berorientasi objek. Untuk melakukan tutorial anda harus memiliki Xcode diinstal pada Mac Anda. Kunjungi developer.apple.com untuk men-download Xcode.Dalam tutorial ini Anda: Buat proyek Hello

    Tambahkan sebuah file sumber untuk proyek

    Lay out user interface dari jendela Hello

    Tuliskan kode yang menampilkan pesan pada jendela Hello

    Membangun dan menjalankan aplikasi Hello

    Lihat pesan yang dihasilkan dengan membangun aplikasi Hello

Buat Proyek Aplikasi Kakao

Xcode menyediakan template proyek yang menghasilkan beberapa jenis produk, termasuk aplikasi, kerangka kerja, plug-in, dan perpustakaan statis.Untuk membuat proyek Kakao aplikasi dimana aplikasi Hello berdasarkan:

    Peluncuran Xcode, yang terletak di folder Aplikasi instalasi Xcode Anda.

    Pastikan bahwa tidak ada Xcode jendela yang terbuka.

    Pilih File> New Project> New.

    Dalam Mac OS X grup, pilih Aplikasi, kemudian pilih template Kakao Aplikasi, dan klik Next..

1. 

2. Tentukan pilihan untuk proyek tersebut, dan klik Next:
   
           Nama Produk: Hello.
   
           Perusahaan Identifier: com.mycompany.
   
           Kategori App Store: Tidak ada.
   
           Buat Dokumen Aplikasi Berbasis: tidak dipilih, yang melarang masuk ke Kelas Dokumen dan bidang Dokumen Extension.
   
           Gunakan Core Data: tidak dipilih.
   
           Sertakan Unit Pengujian: tidak dipilih.

   

3. Pada dialog yang muncul, arahkan ke lokasi file-sistem di mana Anda ingin menempatkan direktori proyek (misalnya, Desktop), memastikan "Buat repositori lokal git untuk proyek ini" pilihan tidak dipilih, dan klik Buat.
   

   

Setelah membuat direktori proyek dalam sistem file Anda, Xcode membuka di jendela ruang kerja.

Isi proyek muncul pada jendela (dikenal sebagai navigator proyek) di sisi kiri jendela. Item pertama dalam grup tersebut merupakan proyek, dan itu dinamai dengan nama produk yang Anda tentukan saat membuat proyek. Xcode kelompok komponen dari proyek Halo dalam tiga kelompok:
Hello: Berisi file yang membentuk proyek. File-file ini menyertakan file source code dan file user-interface.Kelompok ini juga berisi sub kelompok, bernama File Pendukung, yang berisi file yang digunakan dalam mendukung tugas. Anda tidak mengubah file-file dalam tutorial ini.

    Kerangka: Mengidentifikasi kerangka kerja atau perpustakaan kode Anda bergantung pada untuk fungsionalitas, misalnya, kerangka Kakao.

    Produk: Berisi produk proyek Anda menghasilkan, seperti aplikasi.

Buat Subclass NSView

Sekarang Anda menambahkan kelas untuk proyek melalui mana aplikasi Halo menampilkan pesannya.Kakao menarik pada objek dikenal sebagai pandangan. Fungsi penting dari pandangan diimplementasikan oleh kelas NSView, yang mendefinisikan dasar menggambar, penanganan event, dan arsitektur pencetakan aplikasi. Anda biasanya tidak berinteraksi dengan kelas NSView langsung. Sebaliknya Anda membuat subclass NSView, dan mengganti metode yang perilakunya Anda perlu untuk menyesuaikan. Kakao secara otomatis memanggil metode ini.Untuk membuat subclass NSView dalam proyek Hello:

    Pilih File> New> New File.

    Catatan: Jika perintah New File ini redup dalam menu baru, pastikan bahwa jendela ruang kerja Halo memiliki fokus (bahwa itu adalah jendela frontmost) dengan mengklik di dalamnya. Para Xcode perintah membuat tersedia di menu bar tergantung pada jendela yang memiliki fokus. Banyak proyek yang berhubungan dengan perintah yang tidak tersedia saat jendela selain jendela ruang kerja memiliki fokus.

    Dalam Mac OS X kelompok, pilih Kakao, kemudian pilih Objective-C template kelas, dan klik Next.

1. 

2. Menetapkan apakah file baru adalah subclass dari NSView, dan klik Next:
   

   

3.     Pada dialog yang muncul, masukkan HelloView.m sebagai nama file, pilih kelompok Halo (yang menggunakan icon folder kuning) dari menu pop-up Grup, dan klik Simpan.
   

   

       Xcode menambahkan file header dan implementasi untuk kelas HelloView untuk proyek. Mereka terdaftar di navigator proyek.
   

   

Desain User Interface

Interface Builder adalah editor antarmuka pengguna grafis yang digunakan untuk mengedit dokumen, disebut file pena, yang mendefinisikan antarmuka pengguna aplikasi. Anda langsung lay out dan memanipulasi user-interface objek (yang dikenal sebagai kontrol) untuk membangun antarmuka pengguna Anda.Tambahkan sebuah instance dari kelas HelloView ke jendela aplikasi Hello:

    Dalam proyek navigator, pilih file MainMenu.xib. Xcode membuka file dalam Interface Builder, Xcode user interface editor.

    Editor ini memiliki dua bidang utama, disorot dalam Gambar 1-2: dermaga (di kiri) dan kanvas (di sebelah kanan). Dermaga menampilkan objek dalam file nib. Kanvas adalah tempat Anda lay out antarmuka pengguna aplikasi Anda menggunakan objek dalam file nib.
    Gambar 1-2 Dermaga Interface Builder dan kanvas

 Jika kanvas menunjukkan objek menu bar Halo, sebagai screenshot sebelumnya tidak, klik kotak penutupan (x) untuk menghapusnya dari kanvas.

    Jika dermaga muncul dalam tampilan outline (Gambar 1-3) bukan ikon tampilan (Gambar 1-2), klik tombol disorot untuk mengubahnya ke tampilan ikon.
    Gambar 1-3 Antarmuka Builder dermaga di tampilan daftar

1.  Klik tombol "Window - Halo" item dalam dermaga untuk menampilkan jendela Halo di kanvas.
   

   

    Pilih View> Navigators> Sembunyikan Navigator untuk mempersempit fokus dari ruang kerja (Anda tidak akan menavigasi proyek dalam beberapa langkah berikutnya).

    Pilih View> Utilitas> Tampilkan Utilitas.

    Daerah utilitas (Gambar 1-4) berisi dua panel: panel inspektur (atas) dan panel perpustakaan (bawah).Panel perpustakaan berisi perpustakaan untuk template file, potongan kode, objek, dan media.

1. Figure 1-4  The utility area in the workspace window

   

2. Display the Object library by choosing View > Utilities > Object Library.
   Make the library pane taller by dragging its selector bar up. (This also makes the inspector pane shorter.)
   

   

3. From the Object Library pop-up menu, choose Cocoa > Layout Views.
   

   

4. Drag the Custom View object from the library to the Hello window in the canvas.
   

   

   You’ve created an instance of the NSView class and added it to the window.
5. Resize the newly added view by dragging its sides to the Hello window’s borders, so that it occupies the entire content area of the Hello window.
   

   

6. Choose View > Utilities > Identity Inspector.
   The Identity inspector lets you specify details about user-interface elements that identify them to users of your application (tooltips, also called help tags) and to the system (class, runtime attributes, object ID, and so on).
   

   

7. In the Identity inspector, choose HelloView from the Class pop-up menu in the Custom Class section.
   

   

   Notice that the label for the view changes from “Custom View” to “HelloView.”
8. Choose View > Utilities > Size Inspector.
   

   

   In the Size inspector you can enter precise values for positioning and sizing controls. The Autosizing area lets you specify how (and whether) controls change size and position as the enclosing window changes size. (You can also change the layout by moving and resizing controls on the Interface Builder canvas.)
9. In the Autosizing area, click the vertical and horizontal dotted lines in the inner square.
   

   

   Notice that the dotted lines change to solid ones. Solid lines in the inner square indicate the directions the view resizes automatically. In this case, the view resizes vertically and horizontally when the user changes the window size. The example animation to the right of the Autosizing area provides a simulation of the new sizing behavior.

There is much more to Interface Builder than you’ve seen here. When you develop more advanced applications, you use the inspectors to set connections to associate the code you write to interact with user-interface objects.

Write the Code

You can view and edit a source file in the workspace window by selecting the file in the project navigator, which opens it in the source editor, shown in Figure 1-5.

Figure 1-5  The source editor

The gutter displays line numbers (when the “Line numbers” option in Text Editing preferences is selected; seeText Editing Preferences Help) and the location of breakpoints, errors, and warnings in the file.
The focus ribbon helps you to concentrate your attention on your code by:

• Identifying the scope of a block of code
• Allowing you to hide blocks of code

The Jump bar allows you to:

• View related files
• Move backward and forward through the set of project files you’ve viewed
• Jump to another location within the current file or to another file in the project

To enter the source code for the Hello application:

1. Choose View > Navigators > Project.
2. Choose View > Utilities > Hide Utilities.
3. In the project navigator, select HelloView.m to open it in the source editor. Listing 1-1 shows the initial implementation of the HelloView class.
   
   
   
   Listing 1-1  Initial implementation of the HelloView class

   #import "HelloView.h"

   @implementation HelloView

   - (id)initWithFrame:(NSRect)frame {

   if ((self = [super initWithFrame:frame])) {

   // Initialization code here.

   }

   return self;

   }

   - (void)dealloc {

   // Clean-up code here.

   [super dealloc];

   }

   - (void)drawRect:(NSRect)dirtyRect {

   // Drawing code here.

   }

   @end

4. Insert this code line in the body of the drawRect: method:
   

   NSString *hello = "Hello, World!";

   Notice that the gutter shows a warning icon. This means that Xcode has found a problem in the code you just typed. To get information about the problem, click the warning icon. Xcode describes the problem and offers a solution.
   

   

   Double-click “Insert "@"” (or press Return) to convert the C string into an Objective-C string object. You’ve just taken advantage of Live Issues (in-line issue detection and diagnosis) and Fix-it(automatic issue correction).
   The fixed code line should look like this:
   

   NSString *hello = @"Hello, World!";

   This code line creates the string that the Hello application draws into the view.
   Fix-it detects another problem: The hello variable is unused in the drawRect: method. That’s why there’s still a warning icon in the gutter. You’ll fix that problem shortly.
5. Type this text below the code line you added in the previous step:
   

   NSPoint point = NSMake

   As you type the name of a symbol, Xcode suggests completions to what you’re typing.
   

   

   This is code completion. You specify whether Xcode provides completions as you type in Text Editing preferences.
   Because Xcode sees that you’re assigning the function’s return value to a variable of type NSPoint, Xcode selects the NSMakePoint completion in the completion list. Press Return to choose that completion.
   Xcode highlights the first parameter in the completion.
6. Type 15, press Tab, and type 75. Add a semicolon to the end of the line. The code line should look like this:
   

   NSPoint point = NSMakePoint(15, 75);

   This call creates a point at the specified coordinates. This point is the origin for drawing the message.
7. Place the cursor on the NSMakePoint function name, and choose Help > Quick Help for Selected Item.
   

   

   Quick Help provides a summary of the API reference for the selected symbol. From the Quick Help window you can access the rest of the developer library to get in-depth information about the symbol.
   
   
   

   Tip: You can also hold down Option while moving the pointer over your code. When you put the pointer over a symbol, Xcode underlines the symbol. Click the symbol while holding down Option to display the Quick Help window.
8. Complete the implementation of the drawRect: method so that it looks like Listing 1-2.
   
   
   
   Listing 1-2  Implementation of the drawRect: method

   - (void)drawRect:(NSRect)dirtyRect {

   NSString *hello = @"Hello, World!";

   NSPoint point = NSMakePoint(15, 75);

   NSMutableDictionary *font_attributes = [[NSMutableDictionary alloc] init];

   NSFont *font = [NSFont fontWithName:@"Futura-MediumItalic" size:42];

   [font_attributes setObject:font forKey:NSFontAttributeName];

   [hello drawAtPoint:point withAttributes:font_attributes];

   [font_attributes release];

   }

   After typing the code, correct transcribing errors found by Fix-it (the code provided has no problems).
9. Add a breakpoint to the drawRect: method.
   Add the breakpoint by clicking the gutter to the left of the code line with the assignment to the fontvariable. Although the drawRect: method has no problems, adding a breakpoint to it allows you to familiarize yourself with the Xcode debugging facilities when you run the Hello application.
   

   

   Notice that adding the breakpoint automatically activates breakpoints for your project—the Breakpoints toolbar button has a pushed-in appearance.

Run the Application

1. Choose Product > Run to run the Hello application.
   The activity viewer (the LCD-like display in the workspace window toolbar) displays information about the tasks Xcode performs in response, which are to build the Hello application and to launch it in an interactive debug session.
   Figure 1-6 shows a debugging session using the debug navigator (on the left), the source editor (on the right), and the debug area (below the source editor) to get information about the running code.
   

   Figure 1-6  Hello application stopped at a breakpoint

   

   Notice that the source editor can display the values of variables within a scope. When you place the pointer over the hello variable, the source editor displays information about the variable in a datatip. The debug area contains the variables pane and the console pane. The variables pane shows information about the variables of the drawRect: method. The console pane shows your program’s console output. You can also enter commands directly to the debugger in the console pane.
2. Choose Product > Debug > Continue to continue execution of the Hello application.
   The window of the Hello application appears with the “Hello, World!” message displayed in its bottom-left corner.
   

   

3. Choose Hello > Quit Hello or click the Stop toolbar button in the workspace window to stop the Hello application.

View Task and Session Logs

The log viewer (the Xcode session and task log-viewing facility) lets you examine details about tasks Xcode has performed, such as building and running your programs. When things don’t go as smoothly as they should, you can use this facility to locate the cause of problems. But even if there are no problems, you can view a log of the activities Xcode performed in response to your execution of the Run command.
To view details about these activities:

1. Choose View > Navigators > Log.
2. In the log navigator, select the Build Hello task. Then click All and All Messages in the log viewer.
   The log viewer shows the operations it performed while executing the build task on the Hello target, whose product is the Hello application.
   Selecting an operation in the log viewer (Figure 1-7) reveals the transcript button on the right side of the operation. Click the transcript button to display details about the operation.
   

   Figure 1-7  The log viewer in the workspace window