Lab 1 Introduction to Macos and Ios App Development

macOS and iOS operating systems

Lab 1

Introduction to macOS and iOS app development

Gdańsk 2018 Tomasz Idzi

Introduction

This lab is prepared to acquaint the student with the basic functionality of the Mac OS. Tasks to be performed is not subject to assessment, although it is recommended to perform with extreme care, since they are the basis for the next class. A student who will perform the following tasks should possess basic knowledge of navigating the Mac OS. macOS - First look macOS (previously Mac OS X, then OS X) is the operating system that powers every Mac, developed and marketed by Apple Inc. since 2001. It’s designed specifically for the hardware it runs on - and vice versa. Current version of the system is 10.13.x and named High Sierra.

1. Apple menu - information about Mac, System Preferences, Sleep, Shut Down and more. 2. Application menu - contains menus for the application you’re currently using. The name of the application appears in bold next to the Apple menu. 3. Menu bar - contains the Apple menu, active application menu, status menus, menu bar extras, Spotlight icon and Notification Center icon. 4. Status menu - shows the date and time, status of your computer or gives you quick access to certain features - for example, you can quickly turn on Wi-Fi, turn off Bluetooth or mute your’s computer’s volume.

5. Spotlight icon - Click it to bring up the Spotlight search field, where you can search for anything on your Mac ( to run Spotlight you can use keyboard shortcut ⌘ + space). 6. Notification Center icon - Click it to view Notification Center, which consolidates your notifications from Messages, Calendar, Mail, Reminders, and third-party apps. 7. Desktop - This is where your applications' windows will appear. You can add more desktops using Mission Control. 8. The Dock - Quick access to your most frequently used applications, folders, and files. With a single click the application, folder, or file opens.

Finder

The Finder is the app that helps you navigate all of the files and folders on your Mac. The Finder lets you browse your apps, disks, files and folders in variety of ways. You can use the Finder to organize these items the way you want. You can also use the Finder to search for items, delete files you no longer want and more.

The Finder is the home base for your Mac. The Finder icon looks like a blue smiling face; click the icon in the Dock to open a Finder window.

You use Finder windows to organize and access almost everything on your Mac. You can change how items are displayed in Finder windows by dragging them, arranging them or changing view. Use the View menu to change the view of the current Finder window. You can also click the corresponding View button in the Toolbar that appears at the top of Finder windows.

See your stuff. C lick items in the Finder sidebar to see your files, apps, downloads, and more. To make the sidebar even more useful, you can customize it: ● Hide or show the toolbar: Choose View > Hide Toolbar, or View > Show Toolbar. Hiding the toolbar also hides the sidebar, and moves the status bar from the bottom to the top of the window.

● Resize the toolbar: If you see angle brackets at the right end of the toolbar, it means the window is too small to show all of the toolbar items. Enlarge the window or click the brackets to see the rest of the items. ● Change what’s in the toolbar: Choose View > Customize Toolbar. You can drag items into and out of the toolbar, add a space between items, and choose whether to show text with the icons. ● Rearrange the items in the toolbar: Press and hold the Command key, then drag an item to a new location. ● Add a file or an app: Press and hold the Command key, then drag the item to the Finder toolbar until you see a green plus sign. ● Remove an item: Press and hold the Command key, then drag the item out of the toolbar. ● Hide or show the sidebar: Choose View > Hide Sidebar or View > Show Sidebar. (If Show Sidebar is dimmed, choose View > Show Toolbar.) ● Resize the sidebar: Drag the right side of the divider bar to the right or left.

● Change what’s in the sidebar: Choose Finder > Preferences, click Sidebar, then select or deselect items. ● Rearrange items in the sidebar: Drag an item to a new location. You can’t rearrange items in the Shared section. ● Show or hide all the items in a section of the sidebar: Position the pointer over the section head until you see Hide or Show appear, then click the Hide or Show button. For example, to temporarily hide your Favorites, position the pointer over the Favorites heading in the sidebar and click the Hide button. ● Create new folder (for example on desktop) and add it to the sidebar: Drag the item to the Favorites section (If you don’t see the Favorites section, choose Finder > Preferences > Sidebar, then select at least one item in the section.):

● Remove an item (added folder to Favorites section): Drag the item icon out of the

sidebar until you see the remove sign .

Using folders

To rename a file/folder in macOS, you have to click on it and: ● right-clicking, select G etInfo and in N ame & Extension section type new name ● or select R ename ● or press Enter button and type new name

When you no longer need an item, you can delete it. Select the item (or folder of items) in the Finder (or desktop), then choose File > Move to Trash. The Finder then moves the item to a special folder called "Trash" so that you no longer see it. You can view items that are marked for deletion by clicking the Trash icon in the D ock. You can also removing a file by drag and drop on trash icon.

Move folder which you created to Trash then click mouse right button on Trash icon and select Empty Trash to remove all items which are there.

Search with Spotlight

Spotlight can find apps, documents, photos, and other files on your Mac, and use S potlight Suggestions to get news, sports, movies, stocks, weather, and more from the web using sources like Wikipedia, Bing, Maps, and iTunes. Spotlight can even get conversions, calculations, and definitions for you.

Open Spotlight and search ● Open Spotlight: C lick the Spotlight icon in the upper-right corner of the m enu bar, or press Command-Space bar. If it’s your first time using Spotlight, a description is shown in the Spotlight window. Just start typing in the search field where it says Spotlight Search. ● Enter a search phrase: Start typing what you want to find—results appear as you type; you don’t need to press Return.

○ You can find files on your Mac by typing what you’re looking for in the same way you’d say it. For example, you could search by typing “california photos” or “emails from emily.” ○ You can find things on the web and in the iTunes Store, iBooks Store, or App Store. For example, you can get results for weather, sports, stocks, or transit information. Or search for music, movies, books, apps, nearby stores and landmarks, and more. ● Open an app: Type the name of the app, such as P review, then press R eturn (Enter). Or double-click the item.

● Show the location of a file on your Mac: Select the file in the results list, then press and hold the Command key to show the file’s location at the bottom of the preview. ● Copy an item: Drag a file from the results list to the desktop or a Finder window. ● Make a desktop shortcut to an item: Drag the item from the results list to the desktop; just click it on the desktop to open the item in the appropriate app, such as Safari. ● See all results from your Mac in the Finder: Scroll to the bottom of the results list, then double-click Show all in Finder. You can narrow the results in Finder. ● Convert currencies: Enter an amount to see the equivalent in other common currencies. For example, enter $100, £100, or ¥100. Or enter something like “300 krone in dollars.”

● Convert temperatures: Enter a temperature like 98.8F or 32C. Or enter something like “340K in F.” ● Convert measurements: Enter a measurement like 25 lb, 54 yards, or 23 stone. Or enter something like “32ft to meters.” ● Get a calculation: Enter a mathematical expression, such as 956*23.94.

Compress an item

Do any of the following:

● Select the items you want to compress and choose File > Compress. ● Control-click an item and choose Compress from the shortcut menu. ● In a Finder window, select one or more items and choose Compress from the Action menu.

If you compress a single item, the compressed file has the name of the original item with the .zip extension. If you compress multiple items at once, the compressed file is called Archive.zip.

Uncompress (expand an item)

Double-click the .zip file. Keyboard shortcuts

To use a keyboard shortcut, press a modifier key at the same time as a character key. For example, pressing the Command key (it has a ⌘ symbol) and then the "c" key copies whatever is currently selected to the Clipboard. This is also known as the Command-C keyboard shortcut. You can see the keys that map to many shortcuts by looking in an app's menus.

Keys represented by special symbols:

⌘ Command key ⌃ Control key ⌥ Option key ⇧ Shift Key ⇪ Caps Lock fn Function Key

Cut, copy and paste

Key combination What it does

Command-C Copy the selected data to the Clipboard

Command-X Remove the selected item and place a copy on the Clipboard

Command-V Place a copy of (paste) the Clipboard contents into the current document or app

Xcode Xcode is a complete developer toolset for creating apps for Mac, iPhone, iPad, Apple Watch, and Apple TV. Xcode brings user interface design, coding, testing, debugging, and submitting to the App Store all into a unified workflow.

Make the first iOS app

Xcode includes several built-in app templates for developing common types of iOS apps, such as games, apps with tab-based navigation, and table-view-based apps. Most of these templates have preconfigured interface and source code files. This time, you’ll start with the most basic template: Single View Application.

1. Find Xcode icon in Dock and run the application.

2. Select C reate a new Xcode project. 3. Select S ingle View App 4. In the dialog that appears, name your app and choose additional options for your project.

Use the following values:

● Product Name: MyFirstApp (it will be name of your project and app). ● Organization Name: The name of your organization or your own name. You can leave this blank. ● Organization Identifier: Your organization identifier, if you have one. If you don’t, use com.example. ● Bundle Identifier: This value is automatically generated based on your product name and organization identifier. ● Language: S wift ● Use Core Data: Unselected ● Include Unit Tests: U nselected ● Include UI Tests: U nselected

5. Click N ext. 6. In the dialog that appears, choose a location to save your project and click Create. Xcode opens your new project in a window (workspace window):

7. Select iOS Simulators device

8. Run the app using R un button or (⌘ + R)

9. Congratulations! It’s you first iOS app!

10. It’s super-cool! However would be better to have some interaction with user. Let’s do this! 11. First things first, check out Xcode's functionality in depth. ● Start from right-top corner of Xcode’s window:

Thanks to this buttons you can customize your window area. In other words hide/show N avigator, Debug Area and U tilities. What is more, when D ebug Area is visible you can customize this part as well. On the right bottom corner of D ebug Area you can find three buttons:

Trash, which clear the console and again hide/show Variables View (on the left) and C onsole (on the right).

● On the N avigator find M ain.storyboard file and select it. This is Interface Builder, the place where we will make user interface for our application and connect it with code. Firstly, select View Controller Scene which is visible in Document Outline. If you can’t see D ocument Outline in your Storyboard

view use hide/show button. Then using D elete button on keyboard remove this scene to have storyboard completely clear (if you do it by accident in the future, just use ⌘ + Z to revert changes).

● Now from the U tilities area, find View Controller object, drag and drop it in Storyboard. Then, find Label and again drag and drop, but this time to our View Controller area. When you select Label, which is now on your View in View Controller, in the U tilities area can see lots of property of this control. Try to change text to your name, color to your favourite (advice to avoid white as long as we have white background) and make it bold.

12. It’s high time to see, how it looks like on iOS Simulator. B uild and Run! Oh nooo! We have first bug here. App was run, but the simulator window is black. Let’s check console:

It’s mean that we have to set which View Controller on Storyboard it’s the initial one. Come back to Storyboard, select View Controller, in the U tilities area find Attributes Inspector, then in View Controller section find Is Initial View Controller

property and select check-box. Now on the right side of your View Controller in Storyboard you can see grey arrow - it’s mean that this is initial one.

13. Build and Run. It works, huh? ͺ 14. Now let’s try to make control on our UILabel from the code! Due to the fact, you select S ingle View App template at the beginning, Xcode created ViewController.swift class which could be representation of our ViewController made in Storyboard, but we will make it from scratch. Select ViewController.swift in the N avigator and delete (using either button on keyboard or mouse right-button on file and select delete).

15. Move to Trash. 16. Select app folder in the N avigator then from Xcode app menu select File>N ew>File. Choose a template for your new file: iOS>C ocoa Touch Class and press Next button. Set class name (for example FirstViewController), then set class which it will

inherit from (Superclass of: UIViewController) and Swift as programming language. Leave A lso create XIB file unselected.

17. Now have to connect already created class with View Controller object from Storyboard. Go to the N avigator and select Main.Storyboard, then our View Controller. In the U tilities area find Identity Inspector, w here in C ustom class section find C lass box. There set name of your already created new Swift class.

18. Select View Controller in Storyboard and tap on S how the Assistant editor button

. Thanks to this main Xcode area will divide to two screen, on the left side will be visible Storyboard and on the right class which is set to current selected View Controller.

19. Select UILabel, hold ctrl and drag and drop it to class area.

20. After release button, window with details of creating properties will show. There you can set up type of connection, name, type and storage. Set the name as Label.

21. Finally, we have connection between interface builder object and code. B uild and Run to check if everything works properly.

22. Works, but what do you think about name of UILable IBOutlet? From my point of view should be lowercase and named like nameLabel. Let’s rename it. B uild and Run. 23. Crash! ΰ (check error description in console to know how to fix in the future!) 24. We have to way how to fix it. a. Back to FirstViewController.swift class. Use ⌘ + Z to revert the changes to previous state. Mouse right-button click on the name of UILabel, select Refactor and tap on R ename. Type proper name and select R ename button. B uild and run.

b. Back to M ain.Storyboard. S elect UILabel, go to the U tilities then open Connection Inspector. Using X button remove the connection. Drag dot on the right and make new connection. B uild and run.

25. Now can change text in UILabel from FirstViewController. Go to viewDidLoad function and add line of code below super.viewDidLoad():

nameLabel.text = "Hello World!"

26. Build and Run. ;

27. It’s nearly perfect, but we still don’t have interaction with user Ι. Let’s add two buttons, first will set to UILabel your first name, the second last name. Go to Main.Storyboard, from the U tilities area find B utton object, drag and drop two to View Controller view. Change title of the buttons to First Name and Last Name.

28. Do you remember how to make a connection? Do it here same. class FirstViewController: U IViewController {

@ IBOutlet w eak var nameLabel: U ILabel! @ IBOutlet w eak var firstNameButton: U IButton!

29. Wait! Maybe better will be make connection with function instead of making IBOutlet? Remove @ IBOutlet w eak var firstNameButton: U IButton! a nd make another connection, now in connection select A ction instead of O utlet. B uild and Run.

30. Crash! ΰ A gain! Do you know why? Of course you know ɒƄ ɑƄ ! We have two connection from UIButton, first with IBOutlet, second with IBAction, but we removed IBOutlet line of code from our class, so have to remove connection in Storyboard as well.

31. Now add line of code to IBAction method, which run when tap on First Name button:

@IBAction func firstName(_ sender: A ny) { nameLabel.text = "Your name" }

32. Make a connection with second button and set in IBAction func, your last name.

Conclusion

Congratulations μůƲź! You already finish your first iOS app challenge. Now you know how to create new project, make user interface and make connection with code. What’s more, you made some interaction with user. Great job! Hope you will enjoy next exercise ɒʤ ɑʤ .