Search

jordanwgardner

This WordPress.com site is the bee's knees

Month

May 2016

Creating the flying page

flyingThis is the image of the flying button after pressed the user will be taken to another page showing all the aircrafts which are flying within the days of the airshow.

Screen Shot 2016-05-22 at 22.51.46Screen Shot 2016-05-22 at 22.51.52Before creating a table view I inserted a label this would act as the title for the page.

Screen Shot 2016-05-22 at 22.52.36After inserting the label me and Gareth then inserted the table view this was for all the aircrafts to be placed and listed. Screen Shot 2016-05-22 at 22.54.47Screen Shot 2016-05-22 at 22.55.06

 

 

After the user has paid for additional content they will be able to view the details of the plains and see when they will be flying. ass you can see the images are set to the image view and the information will change depending on which plain image is being shown.

Screen Shot 2016-05-22 at 22.52.53

At the bottom of the flying page their is the event program again this is only available to users who have purchased the additional content. after clicking this button it will take you to a pdf file stating times that plains will be flying.

Advertisements

Finale button design

Test Log Torbay airshow app

Test 1. Failed: working properly, but buttons out of place.

Solution: adding constraints allows for items to be displayed the same on all devices.

Test 2. Succeeded: all images are showing properly on all view controllers.

Test 3. Failed: After adding new button it has seemed that the view controllers have disconnected.

Solution: Create link to view controllers right click, drag, show modally.

Test 4. Failed: Fail due to back button not being entered in correctly within code.

Solution: Adding: [self dismiss view controller animated:YES completion:nil]

Test 5. Succeeded: Back button working correctly.

Test 6. Succeeded: Map has linked to google maps fine and is visually showing traffic.

Test 7. Failed: Splash screen is not showing.

Solution: Delete images and reinsert, then apply ‘Add missing constraints’.

Test 8. Succeeded: Splash screen displaying fine.

Finale Test. Succeeded: Everything is working and displaying as expected.

 

Project Evaluation.

During this unit I have learnt many things including working with Xcode, how to communicate with clients and design.

Before starting the app, the class had Dave (one of the clients) visit to pitch an idea for an app for the Torbay airshow. He talked about what the airshow was about and then went on to add that he would like an app to promote and assist people going to the event. He suggested some ideas and let us design some designs so when him and Torbay airshow came back for a meeting they would be able to see are ideas. Having a client come in and pitch was very beneficial as it helped me learn and gain experience to how they would approach someone within the app developing industry. After he left I started on creating a design I researched other apps that I believed to have a clear, polished look for example the ZARA app.

I went on to ask members of my family and friends what they would like to see in an app and the most common answers where ‘simple’ and ‘easy to navigate’ both of, which are extremely important. After looking at major designs for android and smart phones I realized that they all had something in common for example the home page of both devises uses a basic grid format for the applications where they show icons and display the apps name under the app icon. Once I had discovered this I started to create a design based on this structure this was because everyone is familiar of these devices and will find it easier to navigate if the app looked similar. I created the design and pitched it to Torbay council and Dave, they liked what I had created and wanted to use it for their app. After we had confirmed that they were using my design we set another meet date and where sent requests on changes needed to be done. They requested that there were less buttons and that we should only keep the ones vital to the airshow allowing it not to become too confusing to users.

Ollie Mcdonald gave us graphics to work with and also an identity guide to stick to this would help us to stick to the guidelines and make sure we kept to their design scheme. After being given the extra images for the airshow I created designs for the buttons within Photoshop that would look more interesting for the app to do this I added shadow to the image and smoothed off the edges to give it a polished and clear effect I then created a banner out of different shades of rectangles and placed this underneath.

The second meeting allowed the Torbay airshow to see the tweaking I had done and allow them to make any changes before me and Gareth went on to creating the app in Photoshop. They said that they like the finishing touches done by me on the button this included the shadow effect and the overall polish, but for visual reasons they wanted to discard the banner making it less cluttered and easier for people with bad eye sight. Having this feedback gave, me a good insight into working with a client and meeting their needs I believe this really helped with experience and learning how to communicate with the client especially while working towards a deadline.

After we had gotten to an conclusion about the overall design we started to create the app. We used Xcode due to its software capability and it being one of the top playgrounds for creating applications for iOS devices. To create the main page, I had to create a new project and then import all my images I would be using to the project itself. After importing I was ready to create app, I started with adding a view controller then inserting an image view. Once I had inserted an ‘image view’ I scaled it to fit the background and went to the tab on the right hand side of Xcode and changed the ‘image view’ to my background image.

Once the background was scaled I had to make sure that it would look the same on every device and also stop the image from becoming distorted, to do this I selected the width and height constraints and applied them then I added missing constraints allowing the image to look the same on each device. As soon as the backgrounds where completed I then inserted a logo and positioned it at the top of each view controller this is because the logo should be one of the first thing the user sees.

To insert the buttons on the main view controller I searched for the key word ‘button’ in the search bar in the bottom right hand side of the software Xcode giving me the option to insert an interactive button. After I inserted this I then changed the image of the button to one of the images that I imported I did this within order to the ones deemed most important to the ones deemed lesser for example flying is first within the list of buttons and the game is last as this isn’t a vital aspect but it is an entertaining one. After placing the buttons, I linked them to other view controllers meaning when the user presses a button it will take them, to another page.

The flying page within the app consists of planes that are flying within the Torbay airshow and information about them Gareth taught me how to insert a table view within the flying page and then assign images to the tables giving the page the finishing touch. I learnt how to assign and position text and images while creating this page this will help me in the future especially when creating apps that display a large amount of information. Once the table view was created I then create a link at the bottom of the page that would take the user to a pdf of the flying times both of this content within the flying page is part of the purchasable content.

The purchasable content was created within the software using objective c. Gareth taught me how to write code and connect to specific items within Xcode meaning whenever the user presses it, it would display an option to buy additional content. This is hugely useful not only for creating profit but also understanding how it works within the industry and mainly how this technique is applied.

Once I had the code set up to apply purchasable content I moved on to creating the other pages to the app, I started to create the ‘site map’ this would potentially allow users to view the main ground of the event and also see additional information about safety or emergency key points. I inserted the image and made it capable of zooming so that the user could get a closer look. Gareth showed me a technique that would allow the Traffic feed within the ‘map’ page to be editable through a spread sheet on google this is highly useful when needing to make last minute changes or if in a case where more than one person needs to use the spreadsheet to make changes. After the map page was finished we added a road closure button that would take the user to the Torbay airshow website if they needed further information.

One of the last pages that needed to be created was the games page this was highly interesting as I was fortunate enough to learn not only about displaying information side of the app industry, but also the gaming side. Gareth taught me how to code the top trumps style game for the Torbay airshow the game consisted of a picture of a plane with statistics of that plane underneath it. To create an easier option, we linked the statistics to a google spreadsheet and wrote the stats within it the images where assigned to numbers and the told within code to randomize when a button was pressed.

The last task was to create the splash screen this was essentially a pop up when launching the app, the splash screen consisted of the Torbay airshow logo, sdc uni and Torbay council. When launching first time the splash screen sis not show so I had to remove constraints and add them again after this I ran the app again and it worked.

Me and Gareth finished the app and met Torbay council at their office for are final meeting to create the developers license. We added their financial details to the account so they would be able to obtain money when a user purchased the additional content. Once the license was created and all the details where confirmed we had competed the app and sent it to be assessed by apple this only took up to 2 days’ which is surprisingly quick and now the app is being held for release until the press releases.

Overall the experience of creating this app has been hugely beneficial and I am grateful to have been a part of it, creating this app gave me a huge insight into client based activity and working towards a real life deadline. I have also learnt how to use Xcode to a high standard allowing me to create apps that display information and techniques on creating games within Xcode using Objective c.

Creating buttons and linking them to view controllers.

Screen Shot 2016-05-22 at 22.11.39

Adding buttons was very simple, The best way to do this is typing ‘button’ in the search bar in the bottom right hand corner of Xcode the image above shoes what will be displayed after finding this i placed six on my view controller allowing me to change the appearance to the images i created in photoshop and also the ones sent to us by the client.

Screen Shot 2016-05-23 at 14.26.11Screen Shot 2016-05-23 at 14.26.21

After selecting the button i the when to the options o the right hand side and changed the image to flying.png this then changed the basic text based button imaged to the flying button.

Screen Shot 2016-05-23 at 14.30.51

I right clicked the button and dragged to the view controller I wanted it to show when clicked on. After dragging the selection and placing it, it then displayed a action menu as shown in the image I then clicked on show modally this will allow that view controller to be displayed.

 

Screen Shot 2016-05-23 at 14.45.28The image above displays the back button used within the app. This button must be connected within code to function.

Screen Shot 2016-05-23 at 14.49.08

To link the back button with code i dragged the image to the code and released the selection where I saw fit. After releasing, a menu displayed I named my button ‘BackButton and created an action for when clicked on it would revert back to the main menu.

 

 

 

 

 

Adding view controllers and inserting images.

Screen Shot 2016-05-20 at 22.06.22

After creating a design the client was happy with we then moved to Xcode to create a fully functional app. To create a new project I opened up Xcode and clicked  ‘Create a new Xcode project’.

 

Screen Shot 2016-05-20 at 22.08.10

I used the ‘single view application’ this was because I was displaying information and not creating any movement or anything that would need a game or tabbed application.

Screen Shot 2016-05-20 at 22.17.13

The picture above shows the options that allows you to choose the app name and what devices it would be accessible on.

Screen Shot 2016-05-20 at 22.21.35

After choosing suitable options for my project I started to create the app. I inserted a view controller to my project this will act as the basis of the project allowing me to place images and buttons.

Screen Shot 2016-05-22 at 22.17.42

I used the Cocoa class and connected it to my view controller this will allow me to link images within the vie controller to the code. After doing this I am able to edit within the view controller using objective c.

Screen Shot 2016-05-22 at 21.59.14

To add content to my app I must import it into the project, to do this I clicked file then ‘Add Files to Torbay_Airshow’

Screen Shot 2016-05-22 at 21.59.28 After clicking ‘Add Files to Torbay_Airshow’ I was shown content within my image file. I selected the images I wanted to import and added them to my project by clicking the add button.

 

Screen Shot 2016-05-22 at 21.58.20Screen Shot 2016-05-22 at 22.00.54

To create a background I used the image view and scaled it to the view controller. I then had to make sure the background would stay that size what ever device i would be displayed on.

 

Screen Shot 2016-05-23 at 13.41.42

To stop from the background becoming distorted I added a width and height constraint and then added the missing constraints. This would then allow the image to be presented on different devices and not become compromised by size.

Screen Shot 2016-05-22 at 22.07.04

After creating the background i inserted another image view and positioned it to where i would like the logo to be shown.

Screen Shot 2016-05-22 at 22.08.59

To change the image view to the logo I clicked on the ‘image’ tab and selected ‘AirShow Logo.png’.

Screen Shot 2016-05-23 at 14.00.53

After selecting the image of the logo the ‘image view’ displays as whatever i selected in this case the torbay airshow logo.

Talking to clients and communicating to get an end result they are happy with.

Screen Shot 2016-04-11 at 14.35.03This was one of the first designs shown to torbay airshow it featured a number of buttons but using the assets given to us tweaked slightly by myself. I added shadow and smoothed of the edges of the buttons I then created a banner to emphasise text. After speaking to the client we discussed the overall design and what needs changing they suggested less buttons and no banners.

Screen Shot 2016-05-23 at 11.26.47

Once I had removed the banners and unnecessary buttons it became smooth and clearer. not only was it what the client wanted, but it would make the navigation across the pages easier for people who are not used to apps for example the elderly or young.  After creating the finale design me and Gareth started to create the app in Xcode.

Creating the Torbay Airshow App

Screen Shot 2016-05-23 at 11.26.47

This is the finished torbay airshow app. Creating this application gave me experience on Xcode, talking to clients and design. Within this part of my blog I will be explaining how me and Gareth created the torbay airshow app, creating the design and the process of working with clients.

Airshow Guidlines

3047 AirShow guidelines update 0116

 

This is the guidelines that I had to stick to when creating the app. I also used this for creating the extra buttons, the guidelines consisted of font we had to use, graphics, the logo, what NOT to do and advertisement.

Create a free website or blog at WordPress.com.

Up ↑