Learning Goal: I’m working on a computer science discussion question and need guidance to help me learn.

PhoneGap allows developers to work with essentially the same tools (HTML, CSS and JavaScript) used for creating and maintaining websites. Even though PhoneGap applications are created using this toolset; native environment components and SDKs must be installed for each platform for which an app is being developed. For example: to develop for the iOS platform, xCode and its SDKs must be installed (see chapter 7). These native components will install as part of the PhoneGap environment during setup. When Adobe supported the PhoneGap framework, an installation file – Install PhoneGap | FormGet. could be downloaded which made the entire setup process simple. Adobe announced discontinuance of PhoneGap as of October 1, 2020 (see www.phonegap.com/start); what is a blow this is to an aspiring development community. This means that PhoneGap is now a free, although unsupported product.

For our assignment this week (Assignment 9), simulate either an iOS or Android app (your choice).

Like our experience last week, our usage and preview of PhoneGap this week somewhat limited. I want to again to start with the user interface for a PhoneGap application (pp. 331-340). The requirements for the Derby app is to provide two pages/screens; one that list all of the teams/leagues and one that provide a search screen for leagues. When a league/team is selected, the application shows the roster for the team. When a player is searched, it shows which team the player belongs to and his/her number. So, you will need to create two screens – two pages, to meet these REQUIREMENTS: list of Derby teams ( Figure 11:27, p. 333) and a Derby league search ( Figure 11:30, p. 335). With PhoneGap every screen is a HTML page. On a website, the “index file” holds HTML content for the main page. Different tags (head, anchor, page, Div, UL, LI, and OL, etc.) are wrapped within Html/Body code to give the page its features; Cascade Style Sheets (CSS) can be embodied within the HTML to give dynamic customization/style to pages and JavaScripts provide animation or interactive functions. Our authors provide examples of HTML script, XML, and useful javaScript Libraries from which you can leverage for your understanding and simulation. Your goal is to use PhoneGap to simulate two diferent screens for your Derby app. Like previous assignments, first, wireframe/model each screen that you need. Then convert those models to two prototypes that match the REQUIREMENTS. Finally, and most important, write explanations that shows how PhoneGap provides functionality for your app.

• Download and install Figma (can use comparable SW of your choice) on your computer.
• Wireframing/Modelling – from the Figma library, use figures (circles, rectangles, ovals, call-outs, etc.) to sketch what each of two screens look like.

Make one screenshot here that shows you have install the Figma wireframing tool and did some wireframing/modelling (see wireframing video in Learnings Materials section)

* State what platform (iOS or Android) you are simulating. Your app is using HTML, CSS, XML, and JavaScript coding, but you ARE NOT required to do/show any coding for this assignment. Look at the appropriate coding that the authors provide and describe the functionality. Remember: ensure that the JavaScript function onDeviceReady is fired (p.324)

• Prototypes – convert figures from your model to UI elements (icon, Button, View, Textview, Tablelayout, etc.) for each of two screens. Note; when doing this remember to follow principles of mobile interface design (chapter 4 and other readings)

1. From the Figma Community template library, Select a template appropriate for your platform (iOS or Android);
2. Convert figures from your model to UI elements; carefully size, position, and align UI elements on your template to create a mock interface/screen that follows the (Figure 11:27, p.333) – Derby teams
3. Convert figures from your model to UI elements; carefully size, position, and align UI elements on your template to create a mock interface/screen that follows the (Figure 11:30, p.335) – Derby league search – Hint: there must be a scroller, a query, and a storage function like Lawnchair in order for this to work.
4. I recommend that you also identity and label each UI element positionon both of your screens here; this will help in completing the next part of this assignment.

Make a second screenshot here showing placement of UI elements on two screens provided by HTML, CSS and JavaScript

Write a brief explanation of each UI element used in YOUR app. Remember: we are using the PhoneGap framework for development, but your app must have native functionality, look, and features. With PhoneGap, these are achieved primarily with: HTML. XML, CSS and JavaScript. So, your explanations of UI elements used are mostly these structures. We are NOT coding in this Assignment 9, but assume that someone will need to code based on your explanations.

• Try to explain what specific function each UI element provides that makes your app workable.
• Unlike previous assignments, this is a two-screen app prototype. So, in your explanations you will need to account for navigation between the two screens.
• Be certain to discuss some basic native functions for the platform (iOS or Android) you are simulating – example: iOS apps (plist, core data, GPS, etc. – chapter 7, pp.222-227); see chapter 6 for android perculiars.
• Explain/describe 4 princiiples of mobile interface design that are employed in your app (see chapter 4 and article: “Principles of mobile interface design).

These screenshots and UI explanations are the deliverables for Assignment 9. If you used supporting literature/videos other than your own, remember to properly cite and then include an APA style reference list.