unit3portfoliojs.files.wordpress.com · Web viewRequirements for the mobile application. The...
Transcript of unit3portfoliojs.files.wordpress.com · Web viewRequirements for the mobile application. The...
Unit 8 – Task 2
Level 2 Group B
James Saunders1543710
West Cheshire College
ContentsPurpose and User Requirements...........................................................................................................................2
Requirements for the mobile application..........................................................................................................2
Described what the purpose of the app, providing details of how it works......................................................2
What programming language it is written in?...................................................................................................2
What SDK will you develop it in?.......................................................................................................................2
Is the code written together or separated out e.g. html separate to c#?..........................................................2
What platform it works on?...............................................................................................................................2
Is the design user friendly?................................................................................................................................2
Does it have any accessibility features?............................................................................................................2
Tools..................................................................................................................................................................2
List of assets..........................................................................................................................................................3
Pre-defined code...................................................................................................................................................6
Test Plan................................................................................................................................................................7
Proposed Design..................................................................................................................................................13
Alternative design............................................................................................................................................20
Pseudo Code........................................................................................................................................................27
Constraints..........................................................................................................................................................34
Justification.........................................................................................................................................................35
Purpose and User Requirements
Requirements for the mobile applicationThe company EduTek have requested that I design and create a prototype mobile application for the mobile windows platform, the application I will be creating is to aid children with their learning of the alphabet, they have requested that I cover 6 letters within the application for children to learn from.
Described what the purpose of the app, providing details of how it works.The purpose of this task to produce an interactive mobile phone application on the windows phone platform for assisting children in learning the alphabet. This application requires a minimum of six letters for this application to be successful, as it has been requested for children I believe it would be best to make the application colourful and cartoony to appeal to the target audience.
I will be using the visual studios to develop the program and programming in XAML programing language
What programming language it is written in?XAML programming language using Visual C# for Windows Mobile platform
What SDK will you develop it in?I will be developing the application using Visual studios
Is the code written together or separated out e.g. html separate to c#?The mobile application will be coded in C# while the front end will be carried out in XAML.
What platform it works on?This will be designed to work on the windows phone platform
Is the design user friendly?Yes the design is user friendly as it gives a visual association as well as and audio association, is the application is for children I have designed it with catching their attention in mind as such the buttons are bright and the pictures are cartoon based designs.
Does it have any accessibility features?I think this application should include a voice over for images in the event the user is visually impaired or has never seen the picture of a certain item for example “A is for Apple” this will improve overall association. It will also contain a button that can be pressed for the audio to be replayed for the user.
ToolsI will be utilising multiple software applications for the design and creation of this mobile application.
Microsoft Word for the report document, Microsoft PowerPoint for the simple interface design, Chrome Web browser for the downloading of assets, Adobe Fireworks to edit and design assets, Microsoft Visual Studios to create the Mobile Application. My mobile phones voice recorder to create the audio assets.
List of assets
File Name Description SourceA.png This will be a basic
image of the letter A this image will be created in Fireworks
Created in Fireworks
A.mp3 This will be the letter A read as “A is for Apple”
Self-recorded
Apple.png This will be a basic image of an Apple for letter association this image will be found online and may be edited
https://pixabay.com/en/apple-ripe-red-healthy-food-fruit-307356/Edited in Fireworks
Aq.mp3 This will be an audio prompt “press the letter A for apple to continue”
Self-recorded
B.png This will be a basic image of the letter B this image will be created in Fireworks
Created in Fireworks
B.mp3 This will be the letter B read as “B is for Bee”
Self-recorded
Bee.png This will be a basic image of a Bee for letter association this image will be found online and may be edited
https://pixabay.com/en/bee-bi-cartoon-honey-insect-1296273/Edited in Fireworks
Bq.mp3 This will be an audio prompt “press the letter B for Bee to continue”
Self-recorded
C.png This will be a basic image of the letter C this image will be created in Fireworks
Created in Fireworks
C.mp3 This will be the letter C read as “C is for Cat”
Self-recorded
Cat.png This will be a basic image of a Cat for letter association this image will be found online and may be edited
http://maxpixel.freegreatpicture.com/Happy-Smiling-Cute-Cat-Feline-Cartoon-Character-278845Edited in Fireworks
Cq.mp3 This will be an audio prompt “press the letter C for Cat to continue”
Self-recorded
D.png This will be a basic image of the letter D this image will be created in Fireworks
Created in Fireworks
D.mp3 This will be the letter D read as “D is for Dog”
Self-recorded
Dog.png This will be a basic image of a Dog for letter association this image will be found online and may be edited
https://commons.wikimedia.org/wiki/File:Cartoon_Border_Collie.pngEdited in Fireworks
Dq.mp3 This will be an audio prompt “press the letter D for Dog to continue”
Self-recorded
E.png This will be a basic image of the letter E this image will be created in Fireworks
Created in Fireworks
E.mp3 This will be the letter E read as “E is for Elephant”
Self-recorded
Elephant.png This will be a basic image of an Elephant for letter association this image will be found online and may be edited
http://www.freestockphotos.biz/stockphoto/11454Edited in Fireworks
Eq.mp3 This will be an audio prompt “press the letter E for Elephant to continue”
Self-recorded
F.png This will be a basic image of the letter F this image will be created in Fireworks
Created in Fireworks
F.mp3 This will be the letter F read as “F is for Fish”
Self-recorded
Fish.png This will be a basic image of a Fish for letter association this image will be found online and may be edited
https://pixabay.com/en/fish-parrot-fish-cartoon-blue-good-1439214/Edited in Fireworks
Fq.mp3 This will be an audio prompt “press the letter F for Fish to continue”
Self-recorded
TryAgain.mp3 This will be audio played if an incorrect button is pressed saying “try Again”
Self-recorded
Button.png This will be the image used to represent a button
Created in Fireworks
Background.png This will be the image used for a background
Created in Fireworks
Welcome.png This will be the text on the welcome Screen
Created in Fireworks
WelcomeText.png This will be the text on the welcome Screen
Created in Fireworks
Speak.png This will be used on top of buttons to play the audio such as A.mp3, B.mp3 and is a symbol of a speaker
https://commons.wikimedia.org/wiki/File:Speaker_Icon.svgEdited in Fireworks
Next.png This will be the text on top of the Next button and have text saying “Next”
Created in Fireworks
Start.png This will be the text on top of the Start button and have text saying “Start”
Created in Fireworks
WellDone.mp3 This will audio as “Well Done”
Self-Recorded
Pre-defined codeThis is the pre-defined code that I am planning to use during the creation of my mobile application.
// example method loads list with file names for letter images and sounds
public void loadImagesSounds() { listColoursL1.Add("A"); listColoursL1.Add("B"); listColoursL1.Add("C"); }
//set the source code for the sound SoundClip.Source = new Uri("/Assets/" + soundFile + ".mp3", UriKind.Relative);
//example method to load letters when play button is pressed public void loadImages() { //set the variable with the first image uri1 = new Uri("/Assets/" + listLettersL1[0] + ".png", UriKind.Relative); img1.Source = new System.Windows.Media.Imaging.BitmapImage(uri1);
uri2 = new Uri("/Assets/" + listLettersL1[1] + ".png", UriKind.Relative); img2.Source = new System.Windows.Media.Imaging.BitmapImage(uri2);
uri3 = new Uri("/Assets/" + listLettersL1[2] + ".png", UriKind.Relative); img3.Source = new System.Windows.Media.Imaging.BitmapImage(uri3);
uri4 = new Uri("/Assets/" + listLettersL1[3] + ".png", UriKind.Relative); img4.Source = new System.Windows.Media.Imaging.BitmapImage(uri4);
Test PlanTest Test data Expected result Actual result ScreenshotScreen 1
1. btnStart User presses the “start” button
When button pressed app advances to next screen “2”
2. A.png n/a A.png is displayed
3. Apple.png n/a Apple.png is displayed
4. B.png n/a B.png is displayed
5. Bee.png n/a Bee.png is displayed
6. C.png n/a C.png is displayed
7. Cat.png n/a Cat.png is displayed8. D.png n/a D.png is displayed9. Dog.png n/a Dog.png is displayed10. E.png n/a E.png is displayed11. Elephant.png n/a Elephant.png is
displayed12. F.png n/a F.png is displayed13. Fish.png n/a Fish.png is displayed14. Start.png n/a Start.png is
displayedScreen 2
15. A.png n/a A.png is displayed after app has been instructed to start
16. Apple.png n/a Apple.png appears on screen with A.png
17. btnPlayA The user presses the “play” button
Audio A.mp3 plays when button is pressed
18. A.mp3 n/a A.mp3 is audible “A is for Apple”
19. btnNextA The user presses the “next” button
When button pressed app advances to next screen “3”
Screen 320. B.png n/a B.png is displayed21. Bee.png n/a Bee.png appears on
screen with B.png22. btnPlayB The user presses the “play”
buttonAudio b.mp3 plays when button is pressed
23. B.mp3 n/a B.mp3 is audible “B
is for Bee”24. btnNextB The user presses the “next”
buttonWhen button pressed app advances to next screen “4”
Screen 425. C.png n/a C.png is displayed26. Cat.png n/a Cat.png appears on
screen with C.png27. btnPlayC The user presses the “play”
buttonAudio C.mp3 plays when button is pressed
28. C.mp3 n/a C.mp3 is audible “C is for Cat”
29. btnNextC The user presses the “next” button
When button pressed app advances to next screen “5”
Screen 530. D.png n/a D.png is displayed31. Dog.png n/a Dog.png appears on
screen with D.png32. btnPlayD The user presses the “play”
buttonAudio D.mp3 plays when button is pressed
33 D.mp3 n/a D.mp3 is audible “D is for Dog”
34. btnNextD The user presses the “next” button
When button pressed app advances to next screen “6”
Screen 635. E.png n/a E.png is displayed36. Elephant.png n/a Elephant.png
appears on screen with E.png
37. btnPlayE The user presses the “play” button
Audio E.mp3 plays when button is pressed
38. E.mp3 n/a E.mp3 is audible “E is for Elephant”
39. btnNextE The user presses the “next” button
When button pressed app advances to next screen “7”
Screen 740. F.png n/a F.png is displayed “F
is for Fish”41. Fish.png n/a Fish.png appears on
screen with F.png42. btnPlayF The user presses the “play”
buttonAudio F.mp3 plays when button is pressed
43. F.mp3 n/a F.mp3 is audible
44. btnNextF The user presses the “next” button
When button is pressed screen clears and the Apple.png is displayed with A.png, B.png, C.png, D.png E.png and F.png once all images are loaded Aq.mp3 plays“advances to screen 8”
Screen 845. Aq.mp3 n/a Aq.mp3 is audible
“press A for Apple”46. btnA The user presses the “A”
buttonIf button is pressed screen will clear and the Bee.png is displayed with A.png, B.png, C.png, D.png E.png and F.png once all images are loaded Bq.mp3 plays“advances to screen 9”
47. btnB The user presses the “B” button
If button is pressed Tryagain.mp3 is played
48. btnC The user presses the “C” button
If button is pressed Tryagain.mp3 is played
49. btnD The user presses the “D” button
If button is pressed Tryagain.mp3 is played
50. btnE The user presses the “E” button
If button is pressed Tryagain.mp3 is played
51. btnF The user presses the “F” button
If button is pressed Tryagain.mp3 is played
52. btnSpeak The user presses the “Play” button
If button is pressed Aq.mp3 is played
Screen 953. Bq.mp3 n/a Bq.mp3 is audible
“press B for Bee”
54. btnA The user presses the “A” button
If button is pressed Tryagain.mp3 is played
55. btnB The user presses the “B” button
If button is pressed screen will clear and the Cat.png is displayed with A.png, B.png, C.png, D.png E.png and
F.png once all images are loaded Cq.mp3 plays“advances to screen 10”
btnC The user presses the “C” button
If button is pressed Tryagain.mp3 is played
btnD The user presses the “D” button
If button is pressed Tryagain.mp3 is played
btnE The user presses the “E” button
If button is pressed Tryagain.mp3 is played
btnF The user presses the “F” button
If button is pressed Tryagain.mp3 is played
btnSpeak The user presses the “Play” button
If button is pressed Bq.mp3 is played
Screen 10Cq.mp3 n/a Cq.mp3 is audible
“press C for Cat”
btnA The user presses the “A” button
If button is pressed Tryagain.mp3 is played
btnB The user presses the “B” button
If button is pressed Tryagain.mp3 is played
btnC The user presses the “C” button
If button is pressed screen will clear and the Dog.png is displayed with A.png, B.png, C.png, D.png E.png and F.png once all images are loaded Dq.mp3 plays“advances to screen 11”
btnD The user presses the “D” button
If button is pressed Tryagain.mp3 is played
btnE The user presses the “E” button
If button is pressed Tryagain.mp3 is played
btnF The user presses the “F” button
If button is pressed Tryagain.mp3 is played
btnSpeak The user presses the “play” button
If button is pressed Cq.mp3 is played
Screen 11Dq.mp3 n/a Dq.mp3 is audible
“press D for Dog”
btnA The user presses the “A” button
If button is pressed Tryagain.mp3 is played
btnB The user presses the “B” button
If button is pressed Tryagain.mp3 is played
btnC The user presses the “C” button
If button is pressed Tryagain.mp3 is played
btnD The user presses the “D” button
If button is pressed screen will clear and the Elephant.png is displayed with A.png, B.png, C.png, D.png E.png and F.png once all images are loaded Eq.mp3 plays “advances to screen 12”
btnE The user presses the “E” button
If button is pressed Tryagain.mp3 is played
btnF The user presses the “F” button
If button is pressed Tryagain.mp3 is played
btnSpeak The user presses the “play” button
If button is pressed Dq.mp3 is played
Screen 12Eq.mp3 n/a Eq.mp3 is audible
“press E for Elephant”
btnA The user presses the “A” button
If button is pressed Tryagain.mp3 is played
btnB The user presses the “B” button
If button is pressed Tryagain.mp3 is played
btnC The user presses the “C” button
If button is pressed Tryagain.mp3 is played
btnD The user presses the “D” button
If button is pressed Tryagain.mp3 is played
btnE The user presses the “E” button
If button is pressed screen will clear and the Fish.png is displayed with A.png, B.png, C.png, D.png E.png and F.png once all images are loaded Fq.mp3 plays“advances to screen 13”
btnF The user presses the “F” button
If button is pressed Tryagain.mp3 is played
btnSpeak The user presses the “play” button
If button is pressed Eq.mp3 is played
Screen 13Fq.mp3 n/a Eq.mp3 is audible
“press E for Elephant”
btnA The user presses the “A” button
If button is pressed Tryagain.mp3 is played
btnB The user presses the “B” button
If button is pressed Tryagain.mp3 is played
btnC The user presses the “C” button
If button is pressed Tryagain.mp3 is played
btnD The user presses the “D” button
If button is pressed Tryagain.mp3 is played
btnE The user presses the “E” button
If button is pressed Tryagain.mp3 is played
btnF The user presses the “F” button
If button is pressed WellDone.mp3 is played and application returns to Start page.“advances to screen 1”
btnSpeak The user presses the “play” button
If button is pressed Fq.mp3 is played
WellDone.mp3 n/a WellDone.mp3 is audible
Proposed Design
Alternative design
Pseudo Code
Start
Screen 1
Display screen1
If btnStart
Change to screen2
Else do not change
Screen 2
Display screen2
If btnPlayA
Play A.mp3
Else do not play A.mp3
If btnNextA
Change to screen3
Else do not change
Screen 3
Display screen3
If btnPlayB
Play B.mp3
Else do not play B.mp3
If btnNextB
Change to screen4
Else do not change
Screen 4
Display screen4
If btnPlayC
Play C.mp3
Else do not play C.mp3
If btnNextC
Change to screen5
Else do not change
Screen 5
Display screen5
If btnPlayD
Play D.mp3
Else do not play D.mp3
If btnNextD
Change to screen6
Else do not change
Screen 6
Display screen6
If btnPlayE
Play E.mp3
Else do not play E.mp3
If btnNextE
Change to screen7
Else do not change
Screen 7
Display screen7
If btnPlayF
Play F.mp3
Else do not play F.mp3
If btnNextF
Change to screen8
Else do not change
Screen 8
Display screen8
If btnSpeak
Play Aq.mp3
Else Do not play Aq.mp3
If btnA
Change to screen9
Else do not change
If btnB
Play tryAgain.mp3
Else do not play tryAgain.mp3
If btnC
Play tryAgain.mp3
Else do not play tryAgain.mp3
If btnD
Play tryAgain.mp3
Else do not play tryAgain.mp3
If btnE
Play tryAgain.mp3
Else do not play tryAgain.mp3
If btnF
Play tryAgain.mp3
Else do not play tryAgain.mp3
Screen 9
Display screen9
If btnSpeak
Play Bq.mp3
Else Do not play Bq.mp3
If btnA
Play tryAgain.mp3
Else do not play tryAgain.mp3
If btnB
Change to screen10
Else do not change
If btnC
Play tryAgain.mp3
Else do not play tryAgain.mp3
If btnD
Play tryAgain.mp3
Else do not play tryAgain.mp3
If btnE
Play tryAgain.mp3
Else do not play tryAgain.mp3
If btnF
Play tryAgain.mp3
Else do not play tryAgain.mp3
Screen 10
Display screen10
If btnSpeak
Play Cq.mp3
Else Do not play Cq.mp3
If btnA
Play tryAgain.mp3
Else do not play tryAgain.mp3
If btnB
Play tryAgain.mp3
Else do not play tryAgain.mp3
If btnC
Change to screen11
Else do not change
If btnD
Play tryAgain.mp3
Else do not play tryAgain.mp3
If btnE
Play tryAgain.mp3
Else do not play tryAgain.mp3
If btnF
Play tryAgain.mp3
Else do not play tryAgain.mp3
Screen 11
Display screen11
If btnSpeak
Play Dq.mp3
Else Do not play Dq.mp3
If btnA
Play tryAgain.mp3
Else do not play tryAgain.mp3
If btnB
Play tryAgain.mp3
Else do not play tryAgain.mp3
If btnC
Play tryAgain.mp3
Else do not play tryAgain.mp3
If btnD
Change to screen12
Else do not change
If btnE
Play tryAgain.mp3
Else do not play tryAgain.mp3
If btnF
Play tryAgain.mp3
Else do not play tryAgain.mp3
Screen 12
Display screen12
If btnSpeak
Play Eq.mp3
Else Do not play Eq.mp3
If btnA
Play tryAgain.mp3
Else do not play tryAgain.mp3
If btnB
Play tryAgain.mp3
Else do not play tryAgain.mp3
If btnC
Play tryAgain.mp3
Else do not play tryAgain.mp3
If btnD
Play tryAgain.mp3
Else do not play tryAgain.mp3
If btnE
Change to screen13
Else do not change
If btnF
Play tryAgain.mp3
Else do not play tryAgain.mp3
Screen 13
Display screen13
If btnSpeak
Play Fq.mp3
Else Do not play Fq.mp3
If btnA
Play tryAgain.mp3
Else do not play tryAgain.mp3
If btnB
Play tryAgain.mp3
Else do not play tryAgain.mp3
If btnC
Play tryAgain.mp3
Else do not play tryAgain.mp3
If btnD
Play tryAgain.mp3
Else do not play tryAgain.mp3
If btnE
Play tryAgain.mp3
Else do not play tryAgain.mp3
If btnF
Play wellDone.mp3 then Change to screen1
Else do not play wellDone.mp3 and change to screen1
End
Constraints During this assignment I have had a multitude of constraints, these constraints include, Time, Knowledge and Skills, Accessibility, ect.
Time – As this product is needed to be complete to a satisfactory standard within a set time frame this is one constraint I have been facing as I am unfamiliar with the design process of creating a mobile application. I have had to learn while creating my design and found better ways of creating content while creating my design.
Knowledge and Skill’s – As I have no prior knowledge of designing and creating a mobile application or even an application in general I am at a disadvantage as from the start I don’t have the relevant skill set to design and programme the requested application.
Accessibility – This is a particularly large constraint to overcome as the software that I need to create the mobile application and carry out the design process I have very limited access to as I am only able to utilise this software while in college and am unable to stay after lessons due to working commitments.
Copyright – As with the time constraint it is less time consuming to acquire my required application assets from an online source and edit them as needed, as I needed these to complete my design I had to make sure to find assets that can be used and modified as required.
Justification
EduTek have requested me to design and create a prototype mobile application for children to learn the alphabet as such I have created “Alpha”, as this application has been designed to be used by children I have designed the interface to be simple, the children will go through each letter individually where the letter will be displayed and a cartoon style picture relating to that letter for simple association. On the screen there will be two buttons displayed one will be “speak” this will play an audio message such as “A is for Apple” by sounding the letter and providing further association for that letter, the second will be next to move to the next letter. Once the child has progressed passed the learning stage of the letters in the mobile application, they will be presented with a screen displaying a picture to represent a single letter, underneath will be a “speak” button this will have an audio asset attached that will be a prompt for the user to progress to the next letter this audio will be “press A for Apple” underneath they will have six buttons representing each letter they previously learned if they pressed an incorrect button an audio message “Try Again” will sound if the selected the correct letter they will move to the next screen.
This design meets the requirements set out by EduTek as they requested an alphabet learning mobile application for children with at least six letters covered for the child to learn, I have kept it appropriate for children with age related content, I have used pictures that are in a cartoon style to keep the children engaged in the product.