Adding App here that how Apple Watch could enhance the customer experience by providing an even better way to order rather than standing in a long line.
Using this app we can order one of our usual drinks, pay for it using Apple Pay or our card and get notified when our drink is ready – all from Apple Watch without leaving the comfort of seat.
The Apple watch app is composed of two pieces.
- The Watch Kit Extension,
which runs on your iPhone and executes a code based on user interactions on the Apple watch. - The Apple Watch Apps & Their UI Elements,
which are loaded from a bundle containing your storyboard and static resources such as images.
Home page of app
As usual Table view Controller to show lists of product whose contents change dynamically. Information is all the items in a store. There is a change in functionality of Table view Controller, Watch Kit supports only single-column tables using the WKInterfaceTable class. Displaying data in a table requires defining the layout for that data in advance and code to fill in the table data at run time.
Specifically, we need to do the following in our Xcode project:
- In our storyboard file:
- Add a table object to our interface controller scene. Create an outlet for that table in our interface controller.
- Configure one or more row types for your table.
- In our code:
- Define a row controller class for each row type we define.
Each row of app will have the product information. Declared WKInterfaceLabel to show product information. Both HomeRowController.h/.m files have required information.
- Define a row controller class for each row type we define.
- At initialization time, add rows to the table.
At the time of initialization time, we initialized product array to display product on Home page.
- Respond to interactions with a table rows.
@”productDetail”, @”productDetail”, @”productDetail”];
NSArray *contexts = @[@”1″, @”2″, @”3″, @”4″, @”5″];
[self presentControllerWithNames:controllerNames contexts:contexts];
Product Detail page of app
Implementing a Page-Based Interface
A page-based interface is intended for data that is not hierarchical in nature. A page-based interface contains two or more independent interface controllers, only one of which is displayed at any given time. At run time, the user navigates between the interface controllers by swiping left or right on the screen. A dot indicator control at the bottom of the screen indicates the user’s current position. We configure a page-based interface at design time in our app’s storyboard by creating a next page segue from one interface controller to the next.
Always configure an initial set of pages in our storyboard file. When our app is launched, Watch Kit instantiates and initializes our initial interface controller, followed by the other interface controllers in our page-based interface. If you want to change the set of interface controllers, we can call the reload Root Controllers With Names: contexts: method in the in it method of our initial interface controller. Calling that method causes Watch Kit to load the new interface controllers before attempting to display any of the pages in your interface. We can also call the reload Root Controllers With Names: contexts: method while our app is running to change the set of pages being displayed.
When the system loads your Watch Kit app’s interface, it instantiates and initializes all interface controllers that are part of the interface. As the user swipes from one interface controller to the next, it calls the did Deactivate method of the current interface controller and the will Activate method of the one that is about to be displayed. The will Activate method is your opportunity to make sure the information in the interface is up-to-date.
Customized Size page of the app
Customized product page of the app
Payment page of the app
Labels:-
Groups:-
Groups are an important tool for laying out the content in the interface. Groups act as containers for other objects. A group has no default appearance of its own but can be configured with a custom background color or image. Groups also have attributes for specifying a position, size, margins, and other layout-related properties.
A group object:
- Can lay out items horizontally or vertically
- Contains one or more other interface elements
- Has attributes for specifying margins and spacing among group elements
- Can display an image or solid color as a background
- Has a configurable corner radius for its background and content
