Ανάπτυξη Universal εφαρμογής με λειτουργικό Windows /Windows Phone 8.1 για συνταγές μαγειρικής

ΑΤΕΙ ΘΕΣΣΑΛΙΑΣ ΣΧΟΛΗ ΤΕΧΝΟΛΟΓΙΚΩΝ ΕΦΑΡΜΟΓΩΝ Τμήμα Μηχανικών Πληροφορικής ΤΕ Ανάπτυξη Universal εφαρμογής με λειτουργικό Windows /Windows Phone 8.1 για συνταγές μαγειρικής ΠΤΥΧΙΑΚΗ ΕΡΓΑΣΙΑ Νιάκα Ολυμπία(ΑΜ: Τ02785) Κωνσταντόπουλος Φώτιος(ΑΜ: Τ02957) Επιβλέπων: <Χαϊκάλης Κωνσταντίνος, Δρ. Καθηγητής Εφαρμογών> ΛΑΡΙΣΑ 2015

«Εμείς οι Νιάκα Ολυμπία και Κωνσταντόπουλος Φώτιος, δηλώνουμε υπεύθυνα ότι η παρούσα Πτυχιακή Εργασία με τίτλο <Ανάπτυξη Universal εφαρμογής με λειτουργικό Windows 8.1/Windows Phone 8.1 για συνταγές μαγειρικής> είναι δική μας και βεβαιώνουμε ότι: Σε όσες περιπτώσεις έχουμε συμβουλευτεί δημοσιευμένη εργασία τρίτων, αυτό επισημαίνεται με σχετική αναφορά στα επίμαχα σημεία. Σε όσες περιπτώσεις μεταφέρουμε λόγια τρίτων, αυτό επισημαίνεται με σχετική αναφορά στα επίμαχα σημεία. Με εξαίρεση τέτοιες περιπτώσεις, το υπόλοιπο κείμενο της πτυχιακής αποτελεί δική μας δουλειά. Αναφέρουμε ρητά όλες τις πηγές βοήθειας που χρησιμοποιήσαμε. Σε περιπτώσεις που τμήματα της παρούσας πτυχιακής έγιναν από κοινού με τρίτους, α- ναφέρουμε ρητά ποια είναι η δική μας συνεισφορά και ποια των τρίτων. Γνωρίζουμε πως η λογοκλοπή αποτελεί σοβαρότατο παράπτωμα και είμαστε ενήμεροι για την επέλευση των νομίμων συνεπειών» <υπογραφή> Νιάκα Ολυμπία <υπογραφή> Κωνσταντόπουλος Φώτιος

Εγκρίθηκε από την τριμελή εξεταστική επιτροπή Τόπος: Ημερομηνία: ΕΠΙΤΡΟΠΗ ΑΞΙΟΛΟΓΗΣΗΣ 1. 2. 3.

Περίληψη Σκοπός της πτυχιακής μας άσκησης είναι η δημιουργία μιας εφαρμογής με εύκολες και οικονομικές συνταγές μαγειρικής η οποία απευθύνεται σε όσους θέλουν να δοκιμάσουν τις συνταγές αλλά κυρίως σε φοιτητές. Η εφαρμογή περιέχει οικονομικές συνταγές με εικόνες και αναλυτική περιγραφή της διαδικασίας που διευκολύνουν τον φοιτητή στην καθημερινότητά του. Περιλαμβάνει γενικές συμβουλές μαγειρικής όπως και τη δυνατότητα δημιουργίας λίστας για ψώνια. Η εφαρμογή λειτουργεί σε περιβάλλον Windows 8.1 και Windows Phone 8.1. Για την δημιουργία της εφαρμογής χρησιμοποιήθηκε το Visual Studio 2013. i

Ευχαριστίες Θα ήθελα να ευχαριστήσω τον κ. Χαϊκάλη Κωνσταντίνο για την εμπιστοσύνη που έδειξε σε μένα και τον συνάδελφό μου με την ανάθεση της παρούσας πτυχιακής εργασίας και την βοήθεια του μέχρι την υλοποίηση της. Στη συνέχεια θέλω να ευχαριστήσω τους γονείς μου για την υπομονή τους και για όσα έχουν κάνει για μένα όλα αυτά τα χρόνια. Τέλος θέλω να ευχαριστήσω τον φίλο μου και συνάδελφο σε αυτή την πτυχιακή για την στήριξη και την βοήθεια που μου πρόσφερε μέχρι την ολοκλήρωση της πτυχιακής μας εργασίας. Ολυμπία Νιάκα 8/5/2015 Θα ήθελα να ευχαριστήσω όλους εκείνους που με βοήθησαν αυτά τα χρόνια: την οικογένεια μου και τους φίλους μου που με την υπομονή τους και την θετική τους σκέψη συνέβαλαν στην εκπλήρωση του στόχου μου. Στη συνέχεια θέλω να ευχαριστήσω την φίλη και συνάδελφό μου για την μεγάλη προσπάθεια και αφοσίωση που έδειξε σε αυτή τη πτυχιακή εργασία. Τέλος θέλω να ευχαριστήσω τον κ. Χαϊκάλη Κωνσταντίνο για την συμβολή του στην εκπόνηση της πτυχιακής μας εργασίας, τόσο για το θέμα που μας όρισε όσο για τις συμβουλές και τις ιδέες του, που συντέλεσαν στην καλύτερη υλοποίηση της. Κωνσταντόπουλος Φώτιος 8/5/2015 iii

Περιεχόμενα ΠΕΡΙΛΗΨΗ... I ΕΥΧΑΡΙΣΤΙΕΣ... III ΠΕΡΙΕΧΟΜΕΝΑ... IV ΚΕΦΑΛΑΙΟ 1 - ΕΙΣΑΓΩΓΗ... 1 1.1 ΕΙΔΗ ΦΟΡΗΤΩΝ ΣΥΣΚΕΥΩΝ... 1 1.1.1 Smartphone... 1 1.1.2 Tablet... 1 1.1.3 Laptop... 2 ΚΕΦΑΛΑΙΟ 2 - WINDOWS PHONE... 3 2.1 ΓΕΝΙΚΕΣ ΠΛΗΡΟΦΟΡΙΕΣ... 3 2.2 WINDOWS PHONE 7... 3 2.3 WINDOWS PHONE 8... 4 2.4 WINDOWS PHONE 8.1... 4 2.5 WINDOWS 10 (MOBILE)... 5 ΚΕΦΑΛΑΙΟ 3 - WINDOWS... 7 3.1 ΓΕΝΙΚΕΣ ΠΛΗΡΟΦΟΡΙΕΣ... 7 3.2 WINDOWS 8... 7 3.3 WINDOWS 8.1... 8 3.4 WINDOWS 10... 8 ΚΕΦΑΛΑΙΟ 4 - ΠΡΟΓΡΑΜΜΑΤΙΣΜΟΣ ΣΕ WINDOWS/WINDOWS PHONE... 9 4.1 ΕΡΓΑΛΕΙΑ ΓΙΑ ΑΝΑΠΤΥΞΗ ΕΦΑΡΜΟΓΩΝ... 9 4.1.1 Visual Studio... 9 4.1.2 Microsoft Blend for Visual Studio... 10 4.2 ΓΛΩΣΣΕΣ ΠΡΟΓΡΑΜΜΑΤΙΣΜΟΥ... 11 4.2.1 Γλώσσα Προγραμματισμού C#... 11 4.2.2 Δηλωτική γλώσσα XAML... 12 4.2.3 JavaScript Object Notation (JSON)... 12 iv

ΚΕΦΑΛΑΙΟ 5 ΔΗΜΙΟΥΡΓΙΑ ΕΦΑΡΜΟΓΗΣ FOODIE... 15 5.1 FOODIE.SHARED... 17 5.1.1 Φάκελος Assets και Images... 17 5.1.2 Φάκελος Common... 18 5.1.3 Φάκελος Data... 19 5.1.4 Φάκελος DataModel... 20 5.1.5 Φάκελος Strings... 25 5.1.6 App.xaml... 26 5.1.7 Tips.cs... 27 5.2 FOODIE.WINDOWS (WINDOWS 8.1)... 28 5.2.1 Κύρια Σελίδα... 29 5.2.2 Σελίδα Αναζήτησης... 33 5.2.3 Κατηγορίες... 37 5.2.4 Επιλεγμένη Κατηγορία... 40 5.2.5 Συνταγή... 44 5.2.6 Συμβουλές... 47 5.2.7 Λίστα... 49 5.2.8 Προσθήκη Λίστας... 52 5.2.9 Τελευταίες αλλαγές για το Windows 8.1 app... 55 5.3 FOODIE.WINDOWSPHONE (WINDOWS PHONE 8.1)... 56 5.3.1 Κύρια Σελίδα... 57 5.3.2 User Control... 60 5.3.3 Κατηγορίες... 61 5.3.4 Συνταγή... 64 5.3.5 Συμβουλές... 66 5.3.6 Λίστα... 68 5.3.7 Προσθήκη Λίστας... 71 5.3.8 Πληροφορίες... 73 5.3.9 Τελευταίες αλλαγές για το Windows Phone 8.1 app... 76 ΣΥΜΠΕΡΑΣΜΑΤΑ... 78 ΒΙΒΛΙΟΓΡΑΦΙΑ... 80 v

ΠΑΡΑΡΤΗΜΑ Α... 83 vi

Κεφάλαιο 1 - Εισαγωγή Η σημερινή εποχή χαρακτηρίζεται μεταξύ άλλων από την γρήγορη τεχνολογική πρόοδο με την πληροφορική και τις τηλεπικοινωνίες να είναι οι δύο τομείς που γνώρισαν την μεγαλύτερη ανάπτυξη τα τελευταία χρόνια. Ο σύγχρονος άνθρωπος θέλει να έχει πρόσβαση σε πληροφορίες για οτιδήποτε χρειαστεί αλλά και σε οποιοδήποτε μέρος και να είναι. Έτσι, αυτό έχει ως αποτέλεσμα την ραγδαία ανάπτυξη όλων των κινητών συσκευών (tablets, smartphones,laptops κ.α.). Τέτοιου είδους συσκευές είναι πλέον κομμάτι της καθημερινότητας των ανθρώπων διευκολύνοντας την ζωή τους και ικανοποιώντας τις ανάγκες τους. 1.1 Είδη φορητών συσκευών 1.1.1 Smartphone Ένα έξυπνο τηλέφωνο (smartphone) είναι ένα κινητό τηλέφωνο με λειτουργικό σύστημα(os) προηγμένης υπολογιστικής ικανότητας και συνδυάζει τα χαρακτηριστικά ενός απλού κινητού τηλεφώνου με αυτά άλλων συσκευών όπως PDA, GPS πλοήγηση, Media player (mp3 player, mp4 player κ.α.), ψηφιακή φωτογραφική μηχανή. Τα περισσότερα smartphones έχουν οθόνη αφής υψηλής ανάλυσης, χρησιμοποιούν Wi-Fi για ανταλλαγή δεδομένων με το διαδίκτυο και η πλοήγηση σε αυτό γίνεται με χρήση web browser όπου εμφανίζει τυποποιημένες ιστοσελίδες αλλά και ιστοσελίδες βελτιστοποιημένες για κινητά. Τα δημοφιλέστερα λειτουργικά συστήματα σήμερα είναι το Android της Google, το ios της Apple, το Windows Phone της Microsoft και το Blackberry της RIM. [1] 1.1.2 Tablet Το Tablet είναι ένας φορητός υπολογιστής με οθόνη αφής, μπαταρία και κυκλώματα σε μία μονάδα. Είναι εξοπλισμένα με διάφορα χαρακτηριστικά όπως αισθητήρες, φωτο- 1

γραφική μηχανή, μικρόφωνο κ.α. Η οθόνη αφής χρησιμοποιεί χειρονομίες με δάχτυλο ή γραφίδα αντικαθιστώντας έτσι τη χρήση ποντικιού και πληκτρολογίου. Διαθέτουν στην οθόνη pop-up εικονικό πληκτρολόγιο για την πληκτρολόγηση και μπορεί να περιλαμβάνουν φυσικά κουμπιά για βασικές λειτουργίες όπως ένταση των ηχείων και power on/off. Η ανταλλαγή δεδομένων με το διαδίκτυο γίνεται με χρήση Wi-Fi. Τα Tablets είναι συνήθως μεγαλύτερα από τα smartphones και τους προσωπικούς ψηφιακούς βοηθούς (PDA) ξεκινώντας από τις 7 ίντσες (18 εκατοστά). [14] 1.1.3 Laptop Το Laptop είναι ένας φορητός υπολογιστής το μέγεθος του οποίου δεν ξεπερνά το μέγεθος ενός χαρτοφύλακα. Τροφοδοτείτε από μια επαναφορτιζόμενη μπαταρία αλλά μπορεί να συνδεθεί κατευθείαν και με ρεύμα μέσω μετασχηματιστή. Είναι πιο ακριβό από ένα επιτραπέζιο υπολογιστή με τα ίδια χαρακτηριστικά γιατί έχει πιο δύσκολο σχεδιασμό αλλά και κατασκευή. Υπάρχουν διαφορετικές εκδόσεις Laptop με διαφορετικές δυνατότητες αλλά και χαρακτηριστικά όμως όλα έχουν ένα σύνολο ίδιων χαρακτηριστικών, αυτό περιλαμβάνει οθόνη, ηχεία, πληκτρολόγιο, κάμερα, μικρόφωνο και μία μικρή επιφάνεια για τον έλεγχο του δρομέα (cursor) με την αφή. Στο Laptop επίσης υπάρχουν και υποδοχές για διάφορες συνδέσεις όπως USB ports, HDMI, Ethernet (για σύνδεση με το διαδίκτυο αν και μπορεί να συνδεθεί και με Wi- Fi, κ.α.). [15] 2

Κεφάλαιο 2 - Windows Phone 2.1 Γενικές Πληροφορίες Το Windows Phone (WP) είναι το λειτουργικό σύστημα που δημιούργησε η Microsoft και είναι ο διάδοχος του Windows Mobile. Η πρώτη κυκλοφορία έγινε τον Οκτώβριο του 2010 με την έκδοση Windows Phone 7. Με το WP η Microsoft μας παρουσίασε ένα καινούριο περιβάλλον χρήστη με ονομασία Metro. Αντίθετα με το Windows Mobile η Microsoft με το WP στοχεύει περισσότερο το καταναλωτικό κοινό παρά τις επιχειρήσεις. Τον Απρίλιο του 2014 κυκλοφόρησε το Windows Phone 8.1 το οποίο είναι μέχρι και σήμερα το πιο πρόσφατο λειτουργικό σύστημα για smartphone από την Microsoft. Το στυλ του Windows Phone ονομάζετε Metro και χαρακτηρίζεται από την απλότητά του αλλά και την μοντέρνα εμφάνισή του. Στην αρχική επιφάνεια του κινητού(μενού έναρξης) υπάρχουν τα πλακίδια(tiles) είτε τετράγωνα είτε ορθογώνια ανάλογα με την προτίμηση του χρήστη. Τα πλακίδια αυτά δεν είναι τίποτα άλλο παρά συντομεύσεις επιλεγμένων από τον χρήστη εφαρμογών για εύκολη και γρήγορη πρόσβαση σε αυτές που εύκολα τοποθετεί στο μενού έναρξης πατώντας έντονα την εφαρμογή που θέλει και επιλέγοντας την αντίστοιχη ενέργεια από το μενού που εμφανίζεται. Ο χρήστης μπορεί να αλλάξει το μέγεθος όπως και το σχήμα (τετράγωνο ή ορθογώνιο) όπως επίσης και να το διαγράψει αν αλλάξει γνώμη. [2] 2.2 Windows Phone 7 Η πρώτη έκδοση WP ανακοινώθηκε στις 15 Φεβρουαρίου του 2010 στην Ισπανία και η πρώτη κυκλοφορία έγινε στις 8 Νοεμβρίου του 2010 στις Ηνωμένες πολιτείες. Το 2011 κυκλοφόρησε το Windows Phone 7.5 Mango και το 2012 υπήρξε μια μικρή ενημέρωση που ονομάστηκε Tango. Το 2013 κυκλοφόρησε το Windows Phone 7.8 για τις συσκευές WP 7 και ήταν και η τελευταία ενημέρωση που έγινε μιας και αυτές οι συσκευές δεν θα είχαν την δυνατότητα να αναβαθμιστούν σε Windows Phone 8 λόγω των περιορισμών στο υλικό(hardware) τους. Η έκδοση 7.8 είχε κάποια χαρακτηριστικά από την έκδοση WP8 όπως περισσότερα χρώματα θέματος, αλλαγή μεγέθους στα live tiles αλλά 3

και την επιλογή η οθόνη κλειδώματος να απεικονίζει εικόνες από το Bing (μηχανή αναζήτησης της Microsoft) που ανανεώνονται καθημερινά. [17] 2.3 Windows Phone 8 Η έκδοση WP 8 κυκλοφόρησε στις 29 Οκτωβρίου 2012. Ήταν μια νέα γενιά για το λειτουργικό σύστημα της Microsoft με νέα αλλά και αναβαθμισμένα χαρακτηριστικά. Πλέον οι εφαρμογές μπορούν να τρέχουν στο background, το wi-fi έχει περισσότερες ρυθμίσεις, βελτιωμένη σύνδεση Bluetooth, το μενού έναρξης έχει ανανεωθεί επιτρέποντας και τρίτη στήλη με πλακίδια, ο internet explorer mobile αναβαθμίστηκε σε HTML 5 κ.α. Οι Windows Phone χρήστες πλέον μπορούν μέσω των CalDAV/CardDav να συνδέσουν το κινητό τους με το Google Calendar ή άλλες υπηρεσίες και λόγω κάποιων στοιχείων που μοιράζεται με το Windows 8 λειτουργικό για desktop, tablet, laptop μπορεί να γίνει μεταφορά εφαρμογών μεταξύ πλατφόρμων. [18] 2.4 Windows Phone 8.1 Η Microsoft ανακοίνωσε το WP 8.1 στις 2 Απριλίου του 2014 και κυκλοφόρησε τον ίδιο μήνα. Προστέθηκαν νέα χαρακτηριστικά όπως αναβαθμισμένο internet explorer 11 για web browser ο οποίος μπορεί να ανοίξει απεριόριστο αριθμό καρτελών και αν έχει γίνει σύνδεση στο smartphone με τον λογαριασμό Microsoft του χρήστη μπορεί να γίνει συγχρονισμός καρτελών του υπολογιστή και του κινητού αυτόματα. Επίσης περιλαμβάνει την δυνατότητα να αποθηκεύει κωδικούς καθώς και την προσθήκη live tiles ιστοσελίδων στο μενού έναρξης του κινητού. Ένα ακόμα χαρακτηριστικό είναι το λογισμικό Cortana ο ψηφιακός βοηθός της Microsoft όπως το Siri της Apple. Με το Cortana ο χρήστης μπορεί να κάνει ερωτήσεις και να παίρνει απαντήσεις από πληροφορίες που δίνει η εφαρμογή χρησιμοποιώντας το Bing. Επίσης το Cortana έχει αναγνώριση φωνής χωρίς την χρήση συγκεκριμένων εντολών, ρυθμίζει υπενθυμίσεις και συγκεντρώνει πληροφορίες σε ένα notebook με προσωπικές πληροφορίες του χρήστη καθώς και τα ενδιαφέροντα του. Υπάρχει φυσικά η δυνατότητα διαγραφής των πληροφοριών που δεν θέλει ο χρήστης να έχει το Cortana. Η δημιουργία εφαρμογών για Windows phone 8.1 κινητά μπορεί πλέον να πραγματοποιηθεί χρησιμοποιώντας τα ίδια εργαλεία (προγράμματα ανάπτυξης εφαρμογών ό- 4

πως το visual studio) με αυτά των Windows 8.1 εφαρμογών. Οι προγραμματιστές μπορούν να αναπτύσσουν εφαρμογές χρησιμοποιώντας C# / Visual Basic.NET (.NET), C++ (CX) ή HTML5 / Javascript, όπως στα Windows 8. Επίσης υπάρχει η δυνατότητα ανάπτυξης universal εφαρμογών (universal apps), αυτό σημαίνει πως οι εφαρμογές μπορούν να τρέχουν και σε Windows αλλά και σε Windows Phone αφού μοιράζονται σχεδόν όλο τον κώδικα της εφαρμογής εκτός από τα συγκεκριμένα σημεία που αφορούν την κάθε πλατφόρμα. Κάθε universal εφαρμογή που έχει εγκατασταθεί στο Windows 8.1 θα εμφανιστεί αυτόματα στον φάκελο My Apps στο Windows Phone 8.1. Εφαρμογές που έχουν δημιουργηθεί για Windows Phone 7 και 8 θα τρέχουν αυτόματα και σε 8.1 αλλά εφαρμογές για Windows Phone 8.1 δεν θα μπορούν να χρησιμοποιηθούν από παλαιότερες εκδόσεις. Μέσα στις αλλαγές που έγιναν είναι και το Windows Phone Store το οποίο άλλαξε σε εμφάνιση έχοντας πλέον περισσότερες πληροφορίες για τις εφαρμογές που υπάρχουν. Οι αναβαθμίσεις των εφαρμογών που είναι εγκατεστημένες στο κινητό γίνονται αυτόματα με την προϋπόθεση ύπαρξης σύνδεσης με το internet. Στο Store εκτός από εφαρμογές και παιχνίδια για την διασκέδαση του χρήστη υπάρχουν και εφαρμογές σχεδιασμένες για να καλύπτουν τις καθημερινές ανάγκες του χρήστη. Παραδείγματα τέτοιων εφαρμογών είναι το Storage Sense που επιτρέπει στους χρήστες να μεταφέρουν εφαρμογές μεταξύ της μνήμης του κινητού και της microsd κάρτας μνήμης να μπορούν να διαγράψουν προσωρινά αρχεία για να ελευθερώσουν χώρο στην μνήμη αλλά και να απεγκαταστήσουν εφαρμογές, το Battery Saver με το οποίο ελέγχεται η χρήση της μπαταρίας και το Wi-Fi Sense που συνδέει αυτόματα το κινητό σε έμπιστα Wi-Fi hotspots. Οι χάρτες υποστηρίζουν Aerial-view, 3D mapping, δυναμική πυξίδα και εμφανίζουν κοντινά Wi-Fi hotspots (αν υπάρχουν) στην περιοχή σου. Πολλές νέες και αναβαθμισμένες εφαρμογές κάνουν την εμφάνισή τους στο Windows Phone Store καθημερινά αυξάνοντας το συνολικό αριθμό με γρήγορους ρυθμούς. [4] 2.5 Windows 10 (mobile) Το νέο λειτουργικό της Microsoft και διάδοχος του Windows Phone 8.1 ονομάστηκε Windows 10 και η έκδοση για κινητά και tablets με οθόνη μικρότερη των 8 ιντσών α- νακοινώθηκε στις 21 Ιανουαρίου 2015. 5

Με τα Windows 10 η Microsoft στοχεύει στην ενοποίηση των smartphones και tablets με τα PC τόσο στο λογισμικό όσο και στις υπηρεσίες επίσης καταργεί σταδιακά την επωνυμία Windows Phone αντικαθιστώντας την με την επωνυμία Windows 10 για όλες της συσκευές (smartphones, tablets, PC). Με την ενοποίηση αυτή αλλάζουν πολλά από τα χαρακτηριστικά όπως οι ειδοποιήσεις οι οποίες πλέον μπορούν να συγχρονιστούν μεταξύ των συσκευών, για παράδειγμα όταν διαγράφουμε μια ειδοποίηση από το laptop θα διαγράφετε και από τις υπόλοιπες συσκευές. Στο μενού έναρξης (start screen) πλέον ο χρήστης έχει την δυνατότητα να βάλει ταπετσαρία ως φόντο της οθόνης πίσω από ημιδιαφανή πλακίδια και όχι μέσα από τα πλακίδια όπως είναι στην έκδοση 8.1. Αναβαθμίσεις έχουν γίνει επίσης και στην εφαρμογή μηνυμάτων(messaging app), στην εφαρμογή της κάμερας(camera app) αλλά και στο on-screen πληκτρολόγιο. Με το νέο λειτουργικό η Microsoft παρουσιάζει και το νέο πρόγραμμα περιήγησης στο διαδίκτυο που θα αντικαταστήσει τον Internet Explorer με ονομασία Microsoft Edge (κωδική ονομασία Spartan). Τα smartphones που χρησιμοποιούν Windows Phone 8.1 λειτουργικό θα μπορούν να αναβαθμιστούν σε Windows 10 επίσης κινητά με παλαιότερες εκδόσεις που δεν μπόρεσαν να αναβαθμιστούν σε 8.1 (κινητά με λειτουργικό μέχρι και 7.8) θα μπορούν να αναβαθμιστούν σε Windows 10 δεν θα είναι όμως η ολοκληρωμένη έκδοση αλλά μια ειδικά ανεπτυγμένη για αυτή την κατηγορία με μειωμένα χαρακτηριστικά λόγω συμβατότητας υλικού(hardware compatibility). [3] 6

Κεφάλαιο 3 - Windows 3.1 Γενικές πληροφορίες Microsoft Windows (ή απλά Windows) είναι το όνομα ενός συνόλου από λειτουργικά συστήματα που ανέπτυξε η Microsoft και αποτελείται από διάφορες οικογένειες λειτουργικών συστημάτων, καθένα από τα οποία απευθύνεται σε ένα συγκεκριμένο τομέα της βιομηχανίας της πληροφορικής. Κάποιες από τις οικογένειες αυτές είναι οι Windows NT, Windows Embedded και Windows Phone, σε μερικές υπάρχουν και υπό-οικογένειες. Η Microsoft παρουσίασε για πρώτη φορά ένα λειτουργικό περιβάλλον που ονόμασε Windows στις 20 Νοέμβρη 1985 ως γραφικό λειτουργικό σύστημα για το MS-DOS. [16] 3.2 Windows 8 Το Windows 8 είναι ένα λειτουργικό σύστημα για PC από την Microsoft η οποία ξεκίνησε την δημιουργία του πριν καν βγει στην κυκλοφορία ο προκάτοχός του το λειτουργικό Windows 7. Η ανακοίνωση για το Windows 8 έγινε στο CES το 2011 και στις 26 Οκτωβρίου 2012 κυκλοφόρησε. Με το Windows 8 έγιναν μεγάλες αλλαγές στην πλατφόρμα του λειτουργικού αλλά και στο user interface για καλύτερη εμπειρία του χρήστη σε tablets αλλά και γενικά σε συσκευές με οθόνη αφής. Το νέο user interface είναι βασισμένο στο Metro design language της Microsoft. Στο μενού έναρξης γίνεται χρήση πλακιδίων (tiles) των οποίων το μέγεθος διαλέγει ο χρήστης για συντομεύσεις των εφαρμογών όπως και στο Windows Phone λειτουργικό. Προστέθηκαν νέα χαρακτηριστικά και στον τομέα της ασφάλειας όπως δύο νέοι μέθοδοι ελέγχου ταυτότητας αλλά έγινε και αναβάθμιση στο Windows Defender έχοντας πλέον και δυνατότητες αντιβιοτικού. Οι online υπηρεσίες ήταν μια μεγάλη προσθήκη που έκαναν την εμφάνισή τους με το Windows 8, κάποιες από τις υπηρεσίες αυτές ήταν το Windows Store ένα online κατάστημα στο οποίο μπορεί ο χρήστης όχι μόνο να 7

αγοράσει και να κατεβάσει (download) εφαρμογές αλλά και να ανεβάσει (upload) ε- φαρμογές που έχει αναπτύξει ο ίδιος, ένα σύνολο πολυμέσων εφαρμογών που έφερε την επωνυμία της Xbox όπως το Xbox Music και το Xbox Video αλλά και η υπηρεσία SkyDrive cloud storage. [5] 3.3 Windows 8.1 Το λειτουργικό σύστημα Windows 8.1 είναι μια αναβάθμιση του Windows 8. Τέθηκε σε γενική κυκλοφορία στις 17 Οκτωβρίου 2013 σχεδόν ένα χρόνο μετά τον προκάτοχό του. Το βελτιωμένο μενού έναρξης, το ανανεωμένο SkyDrive που πλέον ονομάζεται OneDrive, το αναβαθμισμένο πρόγραμμα περιήγησης στο διαδίκτυο Internet Explorer (ΙΕ 11), η προσθήκη ενός Start κουμπιού στην μπάρα εργασιών για το άνοιγμα του μενού έναρξης αλλά και το σύστημα αναζήτησης το οποίο παίρνει πληροφορίες από το Bing την μηχανή αναζήτησης της Microsoft είναι μερικές από τις πολλές αλλαγές που έγιναν. Βελτιώσεις έγιναν και στο Window Store, το περιβάλλον είναι πιο φιλικό προς τον χρήστη, οι εφαρμογές που υπάρχουν εκεί έχουν περισσότερες πληροφορίες και οι αναβαθμίσεις γίνονται αυτόματα. [6] 3.4 Windows 10 Το Windows 10 είναι το νεότερο λειτουργικό σύστημα από την Microsoft το οποίο παρουσίασαν για πρώτη φορά τον Απρίλιο του 2014 στο Build Conference και θα κυκλοφορήσει στα μέσα του 2015. Το λειτουργικό θα προσφέρετε δωρεάν για τον πρώτο χρόνο κυκλοφορίας του στους νόμιμους χρήστες Windows 7 ή Windows 8.1. Σκοπός της Microsoft με το Windows 10 είναι να ενοποιήσουν τα προϊόντα των Windows PC, Windows Phone, Windows Embedded και Xbox One αλλά και προϊόντα νέων κατηγοριών όπως το Surface Hub και το HoloLens σε ένα πυρήνα. Τα προϊόντα αυτά θα μοιράζονται μια universal αρχιτεκτονική για τις εφαρμογές αλλά και ένα Windows Store οικοσύστημα. Με την ενοποίηση αυτή αλλάζουν πολλά από τα χαρακτηριστικά όπως οι ειδοποιήσεις οι οποίες πλέον μπορούν να συγχρονιστούν μεταξύ των Windows 10 συσκευών, για παράδειγμα όταν διαγράφουμε μια ειδοποίηση από το laptop θα διαγράφετε και από τις υπόλοιπες συσκευές. Το Microsoft 8

Edge (κωδική ονομασία Spartan ) θα είναι το νέο προ εγκατεστημένο πρόγραμμα περιήγησης στο διαδίκτυο στο Windows 10 αντικαθιστώντας το Internet Explorer. Το user interface του Windows 10 είναι μια εξέλιξη των Windows 8 και 8.1. [19] Κεφάλαιο 4 - Προγραμματισμός σε Windows/Windows Phone 4.1 Εργαλεία για ανάπτυξη εφαρμογών 4.1.1 Visual Studio Το visual studio είναι ένα προγραμματιστικό περιβάλλον για ανάπτυξη εφαρμογών και προγραμμάτων για Windows και Windows Phone συσκευών, για ανάπτυξη ηλεκτρονικών σελίδων στο διαδίκτυο αλλά και για διαδικτυακές εφαρμογές και υπηρεσίες. Χρησιμοποιεί πλατφόρμες ανάπτυξης λογισμικού της Microsoft, όπως τα Windows API, Windows Forms, Windows Presentation Foundation, Windows Store και Microsoft Silverlight. Περιλαμβάνει ένα code editor αλλά και ένα ολοκληρωμένο πρόγραμμα ε- ντοπισμού σφαλμάτων. Το Visual Studio υποστηρίζει διάφορες γλώσσες προγραμματισμού όπως C, C++ και C++/CLI (μέσω Visual C++), VB.NET (μέσω Visual Basic.NET), C# (μέσω Visual C#), F#, XML/XSLT, HTML/XHTML, JavaScript και CSS. Για την ανάπτυξη Windows και Windows Phone εφαρμογών μετά από την εγκατάσταση του Visual Studio θα πρέπει να εγκαταστήσουμε και τα κατάλληλα πακέτα αλλά και εργαλεία. Πληροφορίες για τα πακέτα και εργαλεία που χρησιμοποιήθηκαν για την α- νάπτυξη της εφαρμογής Foodie υπάρχουν στην παρακάτω υποενότητα. [7] Πακέτα και εργαλεία SDK - Μπορούμε να το βρούμε και να κατεβάσουμε δωρεάν στο Microsoft Download Center και περιέχει header files, βιβλιοθήκες, δείγματα, έγγραφα και εργαλεία απαραίτητα στην ανάπτυξη εφαρμογών για Microsoft Windows και.net Framework. [9] 9

Emulator - Ένα σημαντικό εργαλείο του Visual Studio είναι ο εξομοιωτής (emulator) ο οποίος όχι μόνο δίνει τη δυνατότητα δοκιμής μιας εφαρμογής χωρίς τη χρήση συσκευής αλλά προσφέρει διαφορετικές αναλύσεις οθόνης και όλες τις ρυθμίσεις που έχει ένα πραγματικό Windows Phone επίσης μπορεί να γίνει και λήψη στιγμιότυπων μιας εφαρμογής. Ο emulator είναι μια εικονική συσκευή πλήρως υποστηριζόμενη από το Hyper-V που αλληλεπιδρά με το υλικό του υπολογιστή και έχει επίσης κάποια πολύ χρήσιμα χαρακτηριστικά όπως αισθητήρες κίνησης και πλοήγησης για μεγαλύτερη α- ποτελεσματικότητα κατά την διάρκεια της δοκιμής της εφαρμογής. Callisto - Το Callisto δημιουργήθηκε από τον Tim Heuer και είναι μια βιβλιοθήκη η οποία χρησιμοποιείται για Windows Store XAML εφαρμογές (Metro apps). Η βιβλιοθήκη αυτή περιέχει έτοιμο κώδικα για χρήσιμα χαρακτηριστικά (features) διευκολύνοντας έτσι την ανάπτυξη εφαρμογών του κάθε προγραμματιστή αυξάνοντας την λειτουργικότητα στο XAML user interface (UI). Μέχρι στιγμής το Callisto περιέχει: [12] Rating LiveTile Tilt BooleanToVisibilityConverter LengthToBooleanConverter RelativeTimeConverter Flyout Menu MenuItem SettingsFlyout Extensions 4.1.2 Microsoft Blend for Visual Studio Το Microsoft Blend (πρώην και ως Microsoft Expression Blend) είναι μια πλατφόρμα σχεδίασης γραφικών για internet, Windows αλλά και Windows Phone εφαρμογές. Ήταν μια από τις εφαρμογές της Microsoft Expression Studio σουίτας. Με το 10

Blend μπορεί ο χρήστης να δημιουργήσει ένα νέο user interface ή να επεξεργαστεί ένα υπάρχον εύκολα και γρήγορα. [8] 4.2 Γλώσσες Προγραμματισμού 4.2.1 Γλώσσα Προγραμματισμού C# Η C# δημιουργήθηκε από την Microsoft και είναι μια ολοκληρωμένη αντικειμενοστραφής γλώσσα προγραμματισμού. Έχει σχεδιαστεί έτσι ώστε να είναι απλή, μοντέρνα και γενικού σκοπού γλώσσα. Χρησιμοποιείται για τη δημιουργία λογισμικού σε.net Framework. To.NET Framework είναι το περιβάλλον χρόνου εκτέλεσης της C#, από αυτό ορίζονται οι βιβλιοθήκες της γλώσσας και παρέχει ασφάλεια των τύπων της. Ως αντικειμενοστραφής γλώσσα η C# έχει τρία χαρακτηριστικά: 1. Ενθυλάκωση - Με την ενθυλάκωση συνδέεται ο κώδικας με τα δεδομένα που χειρίζεται και τα κρατά και τα δύο ασφαλή από εξωτερικές παρεμβολές. Αυτό σημαίνει πως ο κώδικας και τα δεδομένα συνδέονται κατά τέτοιο τρόπο ώστε να δημιουργείται ένα μαύρο κουτί, μέσα στο οποίο βρίσκονται όλα τα απαραίτητα δεδομένα και ο απαραίτητος κώδικας, έτσι δημιουργείται ένα αντικείμενο. Στο αντικείμενο αυτό ο κώδικας και τα δεδομένα μπορεί να είναι ιδιωτικά (private) που σημαίνει ότι μπορούν να προσπελαστούν μόνο από άλλα μέρη του αντικειμένου ή δημόσια (public) μπορούν δηλαδή να προσπελαστούν και από τμήμα του προγράμματος που βρίσκεται έξω από το αντικείμενο. Η κλάση (class) είναι η βασική μονάδα ενθυλάκωσης και ορίζει τι μορφή θα έχει ένα αντικείμενό της. Τα δεδομένα και ο κώδικας μέσα σε αυτή ονομάζονται μέλη της κλάσης και πιο συγκεκριμένα μεταβλητές μέλους και μέθοδοι μέλους αντίστοιχα. 2. Πολυμορφισμός - Με τον πολυμορφισμό επιτρέπεται η χρήση ίδιου ονόματος σε μεθόδους που εκτελούν διαφορετικό κώδικα ανάλογα 11

με τον τύπο του αντικειμένου στο οποίο καλείται, μειώνοντας έτσι την πολυπλοκότητα του κώδικα. 3. Κληρονομικότητα - Κληρονομικότητα είναι η διαδικασία που επιτρέπει σε ένα αντικείμενο να πάρει ιδιότητες ενός άλλου αντικειμένου. Υπάρχει ιεραρχική δομή κλάσεων και κάθε αντικείμενο πρέπει να ορίζει μόνο εκείνες τις ιδιότητες που το κάνουν μοναδικό μέσα στη κλάση του και όχι αυτές που κληρονομεί. [10] 4.2.2 Δηλωτική γλώσσα XAML Βασισμένη στην δηλωτική γλώσσα XML, η XAML (Extensible Application Markup Language) είναι υπεύθυνη για την εξωτερική εμφάνιση μιας εφαρμογής. Με την XAML ο χρήστης μπορεί να δημιουργήσει το user interface (UI), τα γραφικά και γενικά το πως θα είναι η εφαρμογή χωρίς να πειράξει τον κώδικα C# που τρέχει από πίσω. Αυτό μπορεί να γίνει εύκολα είτε γράφοντας κώδικα σε XAML είτε σύροντας τα εργαλεία που θέλει (όπως κάποιο κουμπί, scrollbar, listbox κ.α.) από την Εργαλειοθήκη (Toolbox) του Visual Studio και να τα βάλει στην εφαρμογή του μέσω του Designer. Τα αρχεία XAML είναι XML αρχεία που έχουν ως επέκταση αρχείου το.xaml. Εκτός από τον ορισμό των στοιχείων του UI, με την XAML μπορούμε να καθορίσουμε τον τρόπο που θα εμφανίζονται και να τα μορφοποιήσουμε χρησιμοποιώντας τα attributes τους και ορίζοντας templates. Τα αντικείμενα ορίζονται μέσα σε άνοιγμα και κλείσιμο ετικέτας -- όπως και σε άλλες δηλωτικές γλώσσες (πχ xml,html)--, μέσα σε αυτές τις ετικέτες μπορεί να γίνει ο ορισμός διάφορων ιδιοτήτων σε αυτά τα αντικείμενα, όπως προαναφέρθηκε. [11] 4.2.3 JavaScript Object Notation (JSON) Είναι μια σύνταξη για την αποθήκευση και την ανταλλαγή δεδομένων. Οι τιμές που μπορεί να πάρει είναι: Αριθμούς (int ή float) Strings (σε διπλά εισαγωγικά) Boolean (true ή false) 12

Array (σε αγκύλες) Objects (σε άγκιστρα) Null Οι κανόνες σύνταξης JSON είναι οι εξής: Τα δεδομένα είναι σε όνομα/τιμή ζευγάρια Τα δεδομένα χωρίζονται με κόμμα (, ) Τα αντικείμενα (objects) γράφονται μέσα σε άγκιστρα () Οι λίστες (arrays) γράφονται μέσα σε αγκύλες ([]) Τα αντικείμενα JSON μπορούν να περιέχουν πολλαπλά ζευγάρια όνομα/τιμή. Παράδειγμα "firstname":"john", "lastname":"doe" Μια JSON λίστα μπορεί να περιέχει πολλαπλά αντικείμενα (objects). Παράδειγμα "employees":[ "firstname":"john", "lastname":"doe", "firstname":"anna", "lastname":"smith", "firstname":"peter","lastname":"jones" ] Στο παραπάνω παράδειγμα το αντικείμενο "employees" είναι ένα array και περιέχει τρία α- ντικείμενα. Κάθε αντικείμενο είναι ένα αρχείο ενός προσώπου ( με όνομα και επώνυμο). [13] 13

14

Κεφάλαιο 5 Δημιουργία Εφαρμογής Foodie Το Foodie App δημιουργήθηκε με την χρήση πολλών σελίδων διασυνδεδεμένων είτε με την Main είτε μεταξύ τους. Κάποιες σελίδες εμφανίζουν δεδομένα από την βάση μας και κάποιες αποθηκεύουν δεδομένα που εισάγει ο χρήστης. Στην εφαρμογή του Windows 8.1 όπως και του Windows Phone 8.1 η Main είναι ένα Hub Page που παρέχει άμεση πρόσβαση σε όλες τις βασικές λειτουργίες του App. Πιο συγκεκριμένα: Η εφαρμογή Foodie για Windows 8.1 περιέχει: Εύρεση συνταγών Εμφάνιση κατηγοριών συνταγών Εμφάνιση κατηγορίας με πληροφορίες και τις συνταγές Εμφάνιση συνταγής με: o τίτλο o εικόνα o χρόνος προετοιμασίας o υλικά o αξιολόγηση o οδηγίες Εμφάνιση συμβουλών(tips) μαγειρικής Δημιουργία/Διαγραφή λίστας για ψώνια Πληροφορίες του app Η εφαρμογή Foodie για Windows Phone 8.1 περιέχει: Εμφάνιση κατηγοριών συνταγών Εμφάνιση κατηγορίας με πληροφορίες και τις συνταγές Εμφάνιση συνταγής με: o τίτλο o εικόνα o χρόνος προετοιμασίας o υλικά o οδηγίες Εμφάνιση συμβουλών(tips) μαγειρικής Δημιουργία/Διαγραφή λίστας για ψώνια Πληροφορίες του app 15

Για την δημιουργία του Project μας χρησιμοποιήσαμε το Visual Studio 2013. Δημιουργήσαμε ένα Universal App που χρησιμοποιεί το Hub control και το Windows Runtime. H γλώσσα που θα χρησιμοποιήσουμε είναι C# για την εκτέλεση ενεργειών και XAML για το UI. Το νέο project αυτόματα με την δημιουργία του περιλαμβάνει το Foodie για Windows 8.1, το Foodie για Windows Phone 8.1 και τον φάκελο Shared που περιέχει τον κώδικα που χρησιμοποιείται και από τα δύο apps (εικόνα 2). Στα δύο project υπάρχουν τρείς σελίδες xaml Hub- Page, ItemPage, SectionPage τις οποίες θα μετονομάσουμε σε Main, ItemPage και GroupsPage αντίστοιχα για την δική μας διευκόλυνση. Προς το παρόν δε θα κάνουμε καμία άλλη αλλαγή στα δύο project μας. Θα επικεντρωθούμε στον φάκελο shared που είναι το πιο σημαντικό κομμάτι. 16

5.1 Foodie.Shared Ο φάκελος shared περιέχει τη βάση δεδομένων του app (SampleDataSource.cs), διάφορες απαραίτητες κλάσεις για την παρουσίαση των δεδομένων(φάκελος Common), το Resources.resw(φάκελος Strings), τις εικόνες(assets) που θα χρησιμοποιηθούν και τέλος το App.xaml που είναι κοινό και για τα δύο project. 5.1.1 Φάκελος Assets και Images Οι δύο αυτοί φάκελοι περιέχουν εικόνες που θα χρησιμοποιηθούν στο project. Πιο συγκεκριμένα ο φάκελος Assets περιέχει εικόνες από κουμπιά, background και άλλες για την σωστή παρουσίαση του app. Ενώ ο φάκελος Images περιέχει εικόνες των συνταγών και της Main σελίδας του app. 17

5.1.2 Φάκελος Common NavigationHelper.cs Αυτή η κλάση βοηθά στην πλοήγηση μεταξύ των σελίδων. Παρέχει εντολές που χρησιμοποιούνται για την περιήγηση προς τα πίσω και προς τα εμπρός καθώς και το μητρώο για το ποντίκι και το πληκτρολόγιο. Οι συντομεύσεις που χρησιμοποιούνται για να πάει προς τα πίσω και προς τα εμπρός στα Windows και το κουμπί για να πάει προς τα πίσω στα Windows Phone. Επιπλέον, ενσωματώνει τον SuspensionManager για να χειριστεί τη διαδικασία διαχείρισης ζωής και της διαχείριση κατάστασης κατά την πλοήγησης μεταξύ σελίδων. ObservableDictionary.cs Εφαρμογή του IobservableMap που υποστηρίζει reentrancy για την χρήση του ως DefaultViewModel. RelayCommand.cs Μια εντολή που μοναδικός σκοπός της είναι να αναμεταδώσει τη λειτουργικότητα σε άλλα αντικείμενα με την επίκληση delegates (αναπαριστούν references σε μεθόδους με ειδικές παραμέτρους και τύπους επιστροφής). Η προεπιλεγμένη τιμή επιστροφής της μεθόδου CanExecute είναι true (RaiseCanExecuteChanged ) και πρέπει να καλείτε πάντα (CanExecute) όταν αναμένεται να επιστρέψει μια διαφορετική τιμή. SuspensionManager.cs Συλλαμβάνει global session state για να απλοποίηση την διαδικασία διαχείρισης ζωής της εφαρμογής. Η κατάσταση(state) θα διαγραφεί αυτόματα κάτω από μία ποικιλία συνθηκών και θα πρέπει να χρησιμοποιηθεί μόνο για την αποθήκευση πληροφοριών που θα ήταν βολικό να μεταφέρουν ανάμεσα στις καταστάσεις(states), αλλά αυτό θα πρέπει να απορρίπτεται όταν μια εφαρμογή διακόπτεται ή αναβαθμίζεται. ListConverter.cs Η κλάση αυτή μας βοηθάει στο Windows 8.1 app μας να εμφανίσουμε τα ingredients, που το κάθε ένα διαχωρίζεται με εισαγωγικά ( ), σε μορφή λίστας. Για παράδειγμα το Recipes.txt : "ingredients":["180 γρ. κρέμα γάλακτος","280 γρ. σοκολάτα κουβερτούρα ψιλοκομμένη","2 κ.σ. ούζο ή άλλο αλκόολ","125 γρ. καβουρδισμένο και χοντροκομμένο στο μπλέντερ φουντούκι","για την επικάλυψη:","κακάο","ψιλοκομμένοι, καβουρδισμένοι ξηροί καρποί","σοκολατένιες τρούφες"] 18

Θα εμφανίζεται έτσι : 5.1.3 Φάκελος Data Recipes.txt Ακολουθεί ένα μικρό δείγμα του αρχείου txt με τις κατηγορίες και τις συνταγές. Κάθε εισαγωγή ξεκινάει με τα στοιχεία της κατηγορίας (RecipeDataGroup) στην οποία ανήκει η κάθε συνταγή. Το group είναι ένα απο τα στοιχεία της συνταγής και στη συνέχεια ακολουθούν τα υπόλοιπα στοιχεία (RecipeDataItem). Σχετικά με το uniqueid που χρησιμοποιούμε, στην κατηγορία Γλυκά η πρώτη συνταγή έχει το key = 1000 το οποίο αυξάνεται κατά ένα για κάθε συνταγή αυτής της κατηγορίας. Στην επόμενη κατηγορία η πρώτη συνταγή έχει το key = 2000 κ.ο.κ. [ "group":"key":"γλυκά","title":"γλυκά","recipescount":6,"description":"βασικές συνταγές και πεντανόστιμα γλυκά!","backgroundimage":"images/sweet/sweetimage.jpg", "key":1000, "title":"cookies σοκολάτας", "shorttitle" : "Cookies σοκολάτας", "preptime":20, "rating": 5, "directions":"προθερμαίνουμε τον φούρνο στους 200 βαθμούς Κελσίου Απολαύστε τα!!!", "backgroundimage":"images/sweet/cookies.jpg", "ingredients":["200γρ. βούτυρο","300γρ. ζάχαρη","1 μεγάλο αυγό","275γρ. αλεύρι που φουσκώνει μόνο του","75γρ. κακάο","πολύ λίγο γάλα","1 μεγάλη σοκολάτα γάλακτος","1 μεγάλη άσπρη σοκολάτα","1 μεγάλη μαύρη σοκολάτα ή 2-3 μικρές μπάρες σοκολάτες δικής σας επιλογής"], "group":"key":"γλυκά","title":"γλυκά","recipescount":6,"description":"βασικές συνταγές και πεντανόστιμα γλυκά!","backgroundimage":"images/sweet/sweetimage.jpg", "key":1001, "title":"μπάρες λευκής σοκολάτας με τριμμένο μπισκότο", "shorttitle" : "Μπάρες λευκής σοκολάτας με τριμμένο μπισκότο", "preptime":90, "rating" : 2, "directions":"κάλυψε ένα μικρό ταψί με αλουμινόχαρτο Καλό είναι να φυλάσσεις το γλυκό στο ψυγείο για να μην μαλακώσει η σοκολάτα.", "backgroundimage":"images/sweet/bars.jpg", "ingredients":["400γρ. σταγόνες λευκής σοκολάτας ή λευκή σοκολάτα σπασμένη σε κομμάτια","18 κανονικά μπισκότα γεμιστά με κρέμα"], 19

... "group":"key":"κρέας","title":"κρέας","recipescount":6,"description":"εύκολες και οικονομικές συνταγές με βασικό συστατικό το κρέας!","backgroundimage":"images/meat/meat.jpg", "key":2000, "title":"steak Sandwich", "shorttitle" : "Steak Sandwich", "preptime":20, "rating" : 4, "directions":"κόβουμε στη μέση κάθετα το κάθε κρεμμύδι και μετά κόβουμε σε λεπτές φέτες.. Σερβίρουμε με τσιπς πατάτας.", "backgroundimage":"images/meat/steak.jpg", "ingredients":["500 γρ. σπαλομπριζόλα μοσχαρίσια","3 κ.σ. ελαιόλαδο","200 γρ. τσένταρ σε φέτες","2 κρεμμύδια μεσαίου μεγέθους","500 γρ. μανιτάρια","1/2 κιλό ψωμί φρατζόλα","για το σερβίρισμα:", "μαγιονέζα","μουστάρδα","κέτσαπ"],. ] 5.1.4 Φάκελος DataModel 5.1.4.1 RecipeDataSource.cs Το RecipeDataSource.cs είναι το SampleDataSource.cs που δημιουργείται αυτόματα με τις σελίδες τύπου Hub Page και βοηθάει στην επιλογή των δεδομένων που θέλουμε να εμφανίσουμε στα διάφορα sections των σελίδων. Εμείς τροποποιήσαμε το SampleData- Source.cs για να εξυπηρετήσει τις δικές μας ανάγκες. Υπάρχουν τέσσερις κλάσεις στο RecipeDataSource.cs: public abstract class RecipeDataCommon : BindableBase Σε αυτή τη κλάση υπάρχουν τα κοινά στοιχεία των RecipeDataItem και RecipeDataGroup. Δηλαδή το uniqueid, το title, το shorttitle και το imagepath. Η κλάση BindableBase εκτελεί την INotifyPropertyChanged για να αποτρέψει περιττές εκτελέσεις κώδικα. public class RecipeDataItem : RecipeDataCommon Υιοθετούνται τα στοιχεία απο την κλάση RecipeDataCommon και προσθέτονται τα νέα στοιχεία. Δηλαδή το preptime, το rating, το directions, μία Observable- Collection των ingredients και το RecipeDataGroup group. 20

public class RecipeDataGroup : RecipeDataCommon Υιοθετούνται τα στοιχεία από την κλάση RecipeDataCommon και προσθέτονται τα νέα στοιχεία. Δηλαδή το description, ένα αντικείμενο με ObservableCollection των στοιχείων της κλάσης RecipeDataItem, το groupimage και το RecipesCount. public sealed class RecipeDataSource Σε αυτή τη κλάση υπάρχουν όλοι οι μέθοδοι που είναι απαραίτητοι για την επιλογή των δεδομένων που επιθυμούμε κάθε φορά π.χ. επιλογή τίτλων κατηγοριών, επιλογή συνταγής. Στη μέθοδο RecipeDatasource θα γίνει η ένωση του RecipeDataSource.cs με το αρχείο Recipes.txt ώστε να μπορεί να διαβάζει τις συνταγές και λοιπές πληροφορίες που είναι αποθηκευμένες εκεί. Η μέθοδος LoadLocalDataAsync() βρίσκει το αρχείο Recipes.txt, το αναλύει και εκτελεί την μέθοδο CreateRecipesAndRecipeGroups. public async Task LoadLocalDataAsync() // Ανάκτηση συνταγής απο το Recipes.txt var file = await Package.Current.InstalledLocation.GetFileAsync ("Data\\Recipes.txt"); var result = await FileIO.ReadTextAsync(file); // Ανάλυσητου JSON δεδομένων var recipes = JsonArray.Parse(result); // Μετατροπη των JSON objects σε RecipeDataItems και RecipeDataGroups CreateRecipesAndRecipeGroups(recipes); Η μέθοδος CreateRecipesAndRecipeGroups() αναλύει κάθε στοιχείο του Recipes.txt που αφορά τις συνταγές και το μετατρέπει σε JsonArray σύμφωνα με τις λέξεις κλειδιά που ορίζει σε κάθε case. public static void CreateRecipesAndRecipeGroups(JsonArray array) // Μετατροπη των JSON objects σε RecipeDataItems και RecipeDataGroups foreach (var item in array) var obj = item.getobject(); RecipeDataItem recipe = new RecipeDataItem(); RecipeDataGroup group = null; foreach (var key in obj.keys) 21

IJsonValue val; if (!obj.trygetvalue(key, out val)) continue; switch (key) case "key": recipe.uniqueid = val.getnumber().tostring(); break; case "title": recipe.title = val.getstring(); break; case "shorttitle": recipe.shorttitle = val.getstring(); break; case "preptime": recipe.preptime = (int)val.getnumber(); break; case "rating": recipe.rating = (int)val.getnumber(); break; case "directions": recipe.directions = val.getstring(); break; case "ingredients": var ingredients = val.getarray(); var list = (from i in ingredients select i.getstring()).tolist(); recipe.ingredients = new ObservableCollection<string>(list); break; case "backgroundimage": recipe.setimage(val.getstring()); break; case "tileimage": recipe.settileimage(val.getstring()); break; case "group": var recipegroup = val.getobject(); IJsonValue groupkey; if (!recipegroup.trygetvalue("key", out groupkey)) continue; group = _recipedatasource.allgroups.firstordefault(c => c.uniqueid.equals(groupkey.getstring())); // Καλείται η CreateRecipeGroup που ορίζεται παρακάτω if (group == null) group = CreateRecipeGroup(recipeGroup); recipe.group = group; break; if (group!= null) group.items.add(recipe); 22

Η μέθοδος CreateRecipeGroup() ανιχνεύει κάθε στοιχείο του Recipes.txt που αφορά τις κατηγορίες των συνταγών και το μετατρέπει σε JsonObject σύμφωνα με τις λέξεις κλειδιά που ορίζει σε κάθε case. public static RecipeDataGroup CreateRecipeGroup(JsonObject obj) RecipeDataGroup group = new RecipeDataGroup(); // Μετατροπη των JSON objects σε RecipeDataGroups foreach (var key in obj.keys) IJsonValue val; if (!obj.trygetvalue(key, out val)) continue; switch (key) case "key": group.uniqueid = val.getstring(); break; case "title": group.title = val.getstring(); break; case "shorttitle": group.shorttitle = val.getstring(); break; case "description": group.description = val.getstring(); break; case "backgroundimage": group.setimage(val.getstring()); break; case "groupimage": group.setgroupimage(val.getstring()); break; _recipedatasource.allgroups.add(group); return group; 5.1.4.2 DataSource.cs Αυτή η κλάση χρησιμοποιείται για την αποθήκευση της λίστας. using System; using System.Collections.Generic; using System.Collections.ObjectModel; using System.ComponentModel; using System.Linq; using System.Runtime.Serialization; using System.Runtime.Serialization.Json; using System.Text; using System.Threading.Tasks; using System.Windows.Input; using Windows.Storage; 23

using System.IO; namespace Foodie.DataModel public class Notes : INotifyPropertyChanged // Δήλωση των μεταβλητών που χρειαζόμαστε για την δημιουργία λίστας public int ID get; set; public string Name get; set; public string Description get; set; public event PropertyChangedEventHandler PropertyChanged; // Ειδοποίηση για αλλαγή τιμής private void NotifyPropertyChanged(string propertyname) if (PropertyChanged!= null) PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); public class DataSource private ObservableCollection<Notes> _Notes; //Δημιουργεί ένα αρχείο notes.json όπου θα αποθηκεύονται οι λίστες const string filename = "notes.json"; public DataSource() _Notes = new ObservableCollection<Notes>(); public async Task<ObservableCollection<Notes>> GetNotes() // Φορτώνει τις λίστες καλώντας την μέθοδο ensuredataloaded await ensuredataloaded(); return _Notes; private async Task ensuredataloaded() // Βεβαιώνει ότι 'φορτώθηκαν' τα δεδομένα και τα επιστρέφει // Αν είναι άδειο το αρχείο τότε εκτελεί την μέθοδο getnotesdataasync if (_Notes.Count == 0) await getnotesdataasync(); return; private async Task getnotesdataasync() // Αν δεν είναι άδειο επιστρέφει τα δεδομένα που περιέχει if (_Notes.Count!= 0) return; var jsonserializer = new DataContractJsonSerializer (typeof(observablecollection<notes>)); try 24

using (var stream = await ApplicationData.Current.LocalFolder.OpenStreamForReadAsync(fileName)) _Notes = (ObservableCollection<Notes>)jsonSerializer.ReadObject(stream); catch _Notes = new ObservableCollection<Notes>(); public async void AddNotes(Notes notes) // Εισαγωγή Λίστας _Notes.Add(notes); await savenotesdataasync(); public async void DeleteNotes(Notes notes) // Διαγραφή Λίστας _Notes.Remove(notes); await savenotesdataasync(); private async Task savenotesdataasync() // Αποθήκευση λίστας στο αρχείο notes.json var jsonserializer = new DataContractJsonSerializer (typeof(observablecollection<notes>)); using (var stream = await ApplicationData.Current.LocalFolder.OpenStreamForWriteAsync(fileName, CreationCollisionOption.ReplaceExisting)) jsonserializer.writeobject(stream, _Notes); 5.1.5 Φάκελος Strings Resources.resw Γενικά στο αρχείο αυτό αποθηκεύουμε string πόρους(resources) και αναφορές(references) των strings από τον κώδικά μας ή το markup. Με τη δημιουργία του Hub Control project μπορούμε να δούμε τον φάκελο Strings στο Foodie.Shared. Εκεί βρίσκεται το Resources.resw μέσα στον φάκελο με το όνομα που αντιστοιχεί στη default γλώσσα του project. 25

Για να προσθέσουμε ένα resource κάνουμε κλικ στο Add Resource και μπορούμε να προσθέσουμε το όνομα (x:uid= name στον κώδικα xaml) του xaml αντικειμένου που θέλουμε να πάρει κάποια συγκεκριμένη τιμή. Έτσι μπορούμε να χρησιμοποιήσουμε το ίδιο στοιχείο και στα δύο project (universal). Στο project μας δε θα χρησιμοποιήσουμε το Resources.resw. 5.1.6 App.xaml Θα γίνει η προσθήκη ενός κώδικα που μας βοηθάει στην επιλογή συγκεκριμένης σελίδας που θα ανοίξει κατά την εκκίνηση των project. Στο App.xaml.cs θα προσθέσουμε στην παρακάτω μέθοδο (OnLaunched) τον ακόλουθο κώδικα. protected override void OnLaunched(LaunchActivatedEventArgs e) #if DEBUG if (System.Diagnostics.Debugger.IsAttached) this.debugsettings.enableframeratecounter = true; #endif Frame rootframe = Window.Current.Content as Frame; if (rootframe == null) rootframe = new Frame(); rootframe.cachesize = 1; if (e.previousexecutionstate == ApplicationExecutionState.Terminated) Window.Current.Content = rootframe; if (rootframe.content == null) #if WINDOWS_APP if (!rootframe.navigate(typeof(main))) #endif 26

#if WINDOWS_PHONE_APP if (!rootframe.navigate(typeof(main))) #endif throw new Exception("Failed to create initial page"); Window.Current.Activate(); 5.1.7 Tips.cs Αυτή η κλάση περιέχει τρείς μεταβλητές (image, title, tip) και δύο λίστες με μερικές εισαγωγές. Αυτά τα στοιχεία θα εμφανίζονται στις σελίδες των δύο app με τις συμβουλές (tips). using System; using System.Collections.Generic; using System.Text; using System.Linq; using System.Threading.Tasks; using Windows.UI.Xaml.Media; namespace Foodie class Tips // Δήλωση των μεταβλητών που χρειαζόμαστε public string image get; set; public string title get; set; public string tip get; set; // Δημιουργία λίστας για τα Tips μαγειρικής public static List<Tips> MyTips() // Προσθήκη αντικειμένου της λίστας με 3 μεταβλητές το καθένα List<Tips> tp = new List<Tips>(); tp.add(new Tips() image = "Images/Tips/1.jpg", title = "Καραμελωμένα κρεμμύδια", tip = "Για να καραμελώσετε κρεμμύδια στο μισό χρόνο προσθέστε λίγο μαγειρική σόδα!" ); tp.add(new Tips() image = "Images/Tips/2.jpg", title = "Μαλακές πατάτες φούρνου", tip = "Για να μην ξεραίνονται οι πατάτες στο φούρνο, προσθέστε μισό ποτήρι νερό ή και περισσότερο (ανάλογα με το μέγεθος του ταψιού)." ); tp.add(new Tips() image = "Images/Tips/3.jpg", title = "Μπέικον", tip = "Το μπέικον αποθηκεύεται στο ψυγείο στο συρτάρι του κρέατος, σε σφραγισμένη σακούλα χωρίς αέρα για 2 εβδομάδες και αν ανοιχτεί η συσκευασία για 1 εβδομάδα." ); tp.add(new Tips() image = "Images/Tips/4.jpg", title = "Αυγά βραστά χωρίς σπασίματα", tip = "Για να αποφύγετε να σας σπάσει κατά τη διάρκεια του βρασμού ένα αυγό, προσθέστε λίγο ξύδι και μία πρέζα αλάτι στο νερό. Βοηθάει στο να σφραγιστεί το αυγό." ); tp.add(new Tips() image = "Images/Tips/5.jpg", title = "Τραγανές πατάτες τηγανιτές", tip = "Αφήστε ωμές πατάτες μέσα σε κρύο νερό για τουλάχιστον μισή ώρα πριν τις τηγανίσετε για να βελτιώσετε το τραγανό αποτέλεσμα στις τηγανιτές πατάτες!" ); tp.add(new Tips() image = "Images/Tips/6.jpg", title = "Ρύζι πιο 27

αφράτο", tip = "Προσθέστε ένα κουταλάκι του γλυκού χυμό λεμονιού στο νερό όταν βράζετε ρύζι για να γίνει πιο αφράτο και πιο λευκό. Ενώ μπορείτε στο νερό όπου βράσατε λαχανικά να μαγειρέψετε το ρύζι για να του δώσετε περισσότερη γεύση!" ); return tp; // Δημιουργία λίστας για τα γενικά Tips public static List<Tips> MyTips2() // Προσθήκη αντικειμένου της λίστας με 3 μεταβλητές το καθένα List<Tips> tp2 = new List<Tips>(); tp2.add(new Tips() image = "Images/Tips/1a.jpg", title = "Πατάτες", tip = "Για να συντηρήσετε τις πατάτες καλό είναι να τις βάλετε σε σκοτεινό ντουλάπι μέσα σε μια χάρτινη σακούλα, για ένα με δύο μήνες." ); tp2.add(new Tips() image = "Images/Tips/2a.jpg", title = "Οσμές και ποτήρια", tip = "Αυγό, κρεμμύδι, σκόρδο, ψάρι, βαριά φαγητά, αφήνουν έντονη την παρουσία τους στα ποτήρια. Για να εξαφανιστούν οι οσμές πρέπει τα ποτήρια να πλυθούν καλά με άφθονο νερό και απορρυπαντικό με αιθέρια έλαια." ); tp2.add(new Tips() image = "Images/Tips/3a.jpg", title = "Η τηγανίλα στο σπίτι", tip = "Τα τηγανιτά εκδικούνται με τον χειρότερο τρόπο: ΤΗΓΑΝΙΛΑ παντού! Ανοίξτε τα παράθυρα και κάψτε μέσα σε ένα σταχτοδοχείο φλούδες πατάτας και λεμονιού. Τα πιο φυσικά και αποτελεσματικά αποσμητικά χώρου!" ); tp2.add(new Tips() image = "Images/Tips/4a.jpg", title = "Καθαρός τρίφτης τυριού", tip = "Καλύψτε τον τρίφτη τυριού σας με αντικολλητικό σπρέι για απολαυστικά καθαρό, εύκολο τρίψημο." ); tp2.add(new Tips() image = "Images/Tips/5a.jpg", title = "Συντήρηση μαρουλιού", tip = "Το μαρούλι διατηρείται καλύτερα αν το φυλάξετε στο ψυγείο χώρις πρώτα να το έχετε πλύνει έτσι ώστε να είναι τα φύλλα του στεγνά. Πλύντε το τη μέρα που θα το χρησιμοποιήσετε." ); tp2.add(new Tips() image = "Images/Tips/6a.jpg", title = "Σκόρδο και κρεμμύδι", tip = "Για να διατηρήσετε το κρεμμύδι και το σκόρδο πρέπει να τα βάλετε σε σκοτεινό ντουλάπι, χωρίς να είναι τυλιγμένα με κάτι, μέχρι και 2 μήνες." ); return tp2; 5.2 Foodie.Windows (Windows 8.1) Πρώτα από όλα θα προσθέσουμε στον φάκελο Assets του Windows 8.1 τις απαραίτητες εικόνες για την σωστή παρουσίαση του app (splashscreen, logos, background) 28

5.2.1 Κύρια Σελίδα Main.xaml Η Main σελίδα του app θα είναι ένα Hub (η Main που υπάρχει από την δημιουργία του project) με 6 διαφορετικά HubSections τα οποία θα κατευθύνουν τον χρήστη στις υπόλοιπες σελίδες του app. <Page x:name="pageroot" x:class="foodie.main" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:foodie" xmlns:common="using:foodie.common" xmlns:data="using:foodie.datamodel" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:ignorable="d" DataContext="Binding DefaultViewModel, RelativeSource=RelativeSource Self" d:datacontext="d:designinstance data:recipedatasource, IsDesignTimeCreatable=True"> <!-- Πληροφορίες που καθορίζουν το περιεχόμενο την Main σελίδας --> <Page.Resources> <x:string x:key="appname">foodie</x:string> </Page.Resources> <Grid> <Grid.ChildrenTransitions> <TransitionCollection> <EntranceThemeTransition/> </TransitionCollection> </Grid.ChildrenTransitions> <Hub> <Hub.Header> <!-- Κουμπί για Πίσω και Τίτλος Σελίδας --> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="80"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Button x:name="backbutton" Margin="-1,-1,39,0" Command="Binding NavigationHelper.GoBackCommand, ElementName=pageRoot" Style="StaticResource NavigationBackButtonNormalStyle" VerticalAlignment="Top" Foreground="Black" AutomationProperties.Name="Back" AutomationProperties.AutomationId="BackButton" AutomationProperties.ItemType="Navigation Button"/> <TextBlock x:name="pagetitle" Text="StaticResource AppName" Style="StaticResource HeaderTextBlockStyle" Grid.Column="1" 29

IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Top" Foreground="Black"/> </Grid> </Hub.Header> <!-- Εικόνα Background της Main σελίδας --> <Hub.Background> <ImageBrush ImageSource="Assets/main.jpg"/> </Hub.Background> <!-- Εικόνα του πρώτου HubSection --> <HubSection Width="800"> <HubSection.Background> <ImageBrush Stretch="Fill" ImageSource="Assets/main2.png" /> </HubSection.Background> </HubSection> <!-- Περιέχει το Search και κατευθύνει τον χρήστη στη σελίδα με τα αποτελέσματα του Search που επιθυμεί --> <HubSection> <HubSection.Header> <TextBlock Text="Υπέροχες συνταγές για φοιτητές" Foreground="Black"/> </HubSection.Header> <DataTemplate> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <TextBlock Style="StaticResource SubheaderTextBlockStyle" Foreground="Black" Grid.Row="0" Margin="0,10,0,0" TextWrapping="Wrap" x:uid="section1subtitle" HorizontalAlignment="Center" Height="100" Text="Οικονομικές, νόστιμες και εύκολες"/> <SearchBox x:name="mysearchbox" Grid.Row="1" PlaceholderText="Search" QuerySubmitted="SearchBox_QuerySubmitted"></SearchBox> </Grid> </DataTemplate> </HubSection> <!-- Με κλικ στην εικόνα ή τον τίτλο του Hubsection ο χρήστης οδηγείται στην σελίδα με τις κατηγορίες των συνταγών --> <HubSection IsHeaderInteractive="True" DoubleTapped="HubSection_DoubleTapped_1"> <HubSection.Header> <TextBlock Text="Κατηγορίες" Foreground="Black"/> </HubSection.Header> <DataTemplate> <StackPanel Orientation="Vertical"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="200"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Button Grid.ColumnSpan="2" VerticalAlignment="Top" BorderBrush="Pink" HorizontalAlignment="Center" Height="auto" Grid.RowSpan="2"> <Button.Template> <ControlTemplate> <Image Stretch="UniformToFill" Width="300" Height="500" Source="Images/total.jpg"/> </ControlTemplate> </Button.Template> </Button> <TextBlock Style="StaticResource TitleTextBlockStyle" Grid.Row="1" Grid.ColumnSpan="2" Margin="0,15,0,0" Text=" "/> </Grid> </StackPanel> </DataTemplate> </HubSection> <!-- Με κλικ στην εικόνα ή τον τίτλο του Hubsection ο χρήστης οδηγείται στην σελίδα με τις συμβουλές --> <HubSection IsHeaderInteractive="True" DoubleTapped="HubSection_DoubleTapped"> <HubSection.Header> <TextBlock Text="Tips" Foreground="Black"/> </HubSection.Header> <DataTemplate> <StackPanel Orientation="Vertical"> <Grid> <Button VerticalAlignment="Top" HorizontalAlignment="Center"> <Button.Template> <ControlTemplate> <Image Stretch="Fill" Width="300" Height="250" Source="Images/tips.png"/> </ControlTemplate> 30