advertisement

Intro to mobile apps

67 %
33 %
advertisement
Information about Intro to mobile apps
Mobile

Published on October 13, 2014

Author: petrosdemetrakopoulos

Source: slideshare.net

Description

The slides from my talk about introduction to mobile app development which took place during Code Week EU on Saturday 11/10/14.
advertisement

1. Petros Demetrakopoulos © Introduction to Mobile psdapps.gr Applications Petros Demetrakopoulos

2. Οι πλατφόρμες Petros psdapps.Demetrakopoulos gr © Βασισμένο στην Java Βασισμένο στην Swift (Και την Objective - C )

3. Τα εργαλεία ανάπτυξης Petros psdapps.Demetrakopoulos gr © • Είναι διαθέσιμα ΔΩΡΕΑΝ για όλους. • Μπορείτε να τα κατεβάσετε στα links: • https://developer.apple.com/xcode/downloads/ • http://developer.android.com/sdk/index.html

4. Για να ανεβάσετε στα ηλεκτρονικά καταστήματα Petros Demetrakopoulos © • Τα εργαλεία ανάπτυξης είναι διαθέσιμα δωρεαν, προκειμένου όμως να ανεβάσετε τις εφαρμογές που αναπτύσετε στα αντίστοιχα ηλεκτρονικά καταστήματα των πλατφορμών (Google Play και App Store αντίστοιχα) υπάρχει ένα κόστος. psdapps.gr • 25 $ Κόστος εγγραφής για το Google Play (την οποία πληρώνετε μία φορά • 100 $ / Χρόνο ετήσια συνδρομή για το App Store.

5. Αντικειμενοστραφής προγραμματισμός Petros Demetrakopoulos © • Και οι δύο πλατφόρμες είναι βασισμένες σε σύγ χρονες γ λώσσες που υποστηρί ζουν αντικειμενοστραφή προγραμματισμό (Object - Oriented Programming ) psdapps.gr ! • Αυτό σημαίνει ότι ο κώδικας οργανώνεται σε αντικείμενα (objects) τα οποία έχουν κάποιες ιδιότητες (properties)και κάποιες λειτουργίες (functions / methods).

6. Αντικειμενοστραφής προγραμματισμός Petros Demetrakopoulos © • Για παράδειγμα ένα αντικείμενο που θα είχε την μορφή ενός αυτοκινήτου θα είχε τα properties brand, color, hp, MaxSpeed και τις λειτουργίες throttle, changeGear, brake κλπ psdapps.gr • Εμείς ορίζουμε την δομή, τις ιδιότητες και τις λειτουργίες των αντικειμένων έτσι ώστε να εξυπηρετούν την λειτουργία του προγράμματος μας αλλά και την συντήρηση και την τροποποίηση του κώδικα.

7. APIs & Frameworks Petros psdapps.Demetrakopoulos gr © • Application programming interface • Είναι ο τρόπος με τον οπόιο επικοινωνούν οι εφαρμογές με άλλα στοιχεία της πλατφόρμας (π.χ πρόσβαση σε σένσορες, internet, photo / video ) ή άλλες εφαρμογές (χάρτες , mail , μηνύματα κλπ)

8. Petros psdapps.Demetrakopoulos gr ©

9. Τα βασικά της Swift Petros Demetrakopoulos © • Σταθερές και μεταβήτές: • let userName = “psd” psdapps.gr • var password = 10 • var x = 0.0, y = 0.0, z = 0.0 • var welcomeMessage: String • welcomeMessage = “Hello” • var red, green, blue: Double

10. Προσοχή! Petros psdapps.Demetrakopoulos gr © • Όταν ξέρουμε ότι στο πρόγραμμά μας μία τιμή δεν θα αλλάξει την ορίζουμε ως σταθερά. Η γλώσσα προγραμματισμού αντιμετωπίζει διαφορετικά τις σταθερές και διαφορετικά τις μεταβλητές. • Έτσι τρέχει πιό γρήγορα και αποδοτικά.

11. Άλλα βασικά στοιχεία της Swift Petros Demetrakopoulos © • Τυπώνει στην κονσόλα με την εντολή println(variable) println(userName) println("This is a string") psdapps.gr // prints "This is a string” // This is a comment /* this is also a comment, but written over multiple lines */

12. Τελεστές Petros Demetrakopoulos © • Αριθμιτικοί : + , - , *, / , < , > , =, % (remainder) psdapps.gr • Λογικοί : ! (NOT), && (AND), | | (OR) • πχ (Αριθμιτική σύγκριση ) 1 == 1 True 2 != 1 True 2 <= 1 False

13. Tuples Petros Demetrakopoulos © • Τα tuples ομαδοποιούν περισσότερες μεταβλητές σε μία. psdapps.gr π.χ let car = (“BMW”, “coupe”, 4 ) println(“The brand is (car.0)” )

14. Arrays Petros Demetrakopoulos © • Λίστες / Πίνακες μεταβλητών. psdapps.gr π.χ var shoppingList: [String] = ["Eggs", “Milk”] println("The shopping list contains (shoppingList.count) items.") // prints "The shopping list contains 2 items.

15. Προσθήκη / πρόσβαση στοιχείων σε Arrays Petros Demetrakopoulos © • shoppingList.append(“Flour") psdapps.gr • shoppingList += ["Baking Powder”] • var item = shoppingList [5] • Η μεταβλητή item περιέχει το στοιχείο που βρίσκεται στην 5η θεση του Array. • Σημείωση : Τα arrays ξεκινάνε με βάση το 0.

16. If / Else/ Else - If Petros psdapps.Demetrakopoulos gr © • if condition { statements } • if condition { statements } else{ statements }

17. If / Else/ Else - If Petros Demetrakopoulos © • if condition { statements } else if{ statements } else { statements } psdapps.gr

18. Loops Petros psdapps.Demetrakopoulos gr © • Εκτελούν μέρη κώδικα παραπάνω από μία φορά. • Επαναλαμβάνουν μία αυτοματοποιημένη διαδικασία. • For - in , For, While , Do - While

19. For-in Petros psdapps.Demetrakopoulos gr © • Χρησιμοποιήται για να διαβάσουμε κάθε αντικείμενο μία λίστας όπως ένα array , ένα String κλπ.

20. Παράδειγμα Petros Demetrakopoulos © let names = ["Anna", "Alex", "Brian", "Jack"] for name in names { psdapps.gr println("Hello, (name)!") } // Hello, Anna! // Hello, Alex! // Hello, Brian! // Hello, Jack!

21. For Petros psdapps.Demetrakopoulos gr © • Τρέχει επαναλαμβάνοντας μία διαδικασία συγκεκριμένες φορές αυξάνοντας πάντα ένα δείκτη που μετράει πόσες φορές έχει τρέξει ο κώδικας που βρίσκεται μέσα στο for loop.

22. Παράδειγμα Petros Demetrakopoulos © for var index = 0; index < 3; ++index { psdapps.gr println("index is (index)") } // index is 0 // index is 1 // index is 2

23. While Petros Demetrakopoulos © • Τρέχει όσο ισχύει μία συνθήκη και παύει να τρέχει μόλις η συνθήκη πάρει τιμή false. psdapps.gr while Response == “Error” { var request = makeRequest() Response = request.response }

24. Functions Petros psdapps.Demetrakopoulos gr © • Είναι αυτόνομα κομμάτια κώδικα που εκτελούν μία συγκεκριμένη διαδικασία. Όταν ορίζουμε ένα function, του δίνουμε ένα όνομα (με το οποίο το καλούμε από άλλα σημεία του προγράμματος ) και (προαιρετικά ) κάποιες παραμέτρους με τις οποίς εκτελείται η διαδιακσία.

25. Παράδειγμα Petros psdapps.Demetrakopoulos gr © func sayHello(personName: String) -> String { let greeting = "Hello, " + personName + "!" return greeting }

26. Πως το καλούμε Petros Demetrakopoulos © • func_name(parameters) psdapps.gr • π.χ var greeting = sayHello (“John” ) Η μεταβλητή greeting έχει πάρει τώρα την τιμή “Hello John!” • Δεν είναι απαραίτητο μία function να δίνει κάποιο αποτέλεσμα.

27. Σχεδιασμός του UI Petros psdapps.Demetrakopoulos gr © • Ο Xcode πριλαμβάνει σχεδιαστή User Interface για τον σχεδιασμό των διάφορων οθονών της εφαρμογής μας παρ’ότι αυτό μπορεί να γίνει και γράφοντας το user interface σε μορφή κώδικα.

28. Petros psdapps.Demetrakopoulos gr ©

29. Φτιάχνοντας ένα Web Petros Browser psdapps.Demetrakopoulos gr © • Ανοίγουμε τον Xcode και πατάμε “Create a new Xcode project” • Διαλέγουμε την επιλογή “Single View Application” • Πατάμε “Next”

30. Petros psdapps.Demetrakopoulos gr ©

31. Φτιάχνοντας ένα Web Petros Browser psdapps.Demetrakopoulos gr © • Δίνουμε ένα όνομα στο project και μόλις ανοίξει, διαλέγουμε από την αριστερή μπάρα το αρχείο σχεδίασμού UI “Main.storyboard”

32. Petros psdapps.Demetrakopoulos gr ©

33. Φτιάχνοντας ένα Web Petros Browser Demetrakopoulos © • Από την κάτω δεξιά λίστα κάνουμε drag πάνω στην οθόνη το object WebView και προσαρμόζουμε τις διαστάσεις του. psdapps.gr • Από την ίδια λίστα κάνουμε drag στην οθόνη 3 buttons και ένα text field • Ονομάζουμε τα 3 buttons Go, Next και Back

34. Petros psdapps.Demetrakopoulos gr ©

35. Φτιάχνοντας ένα Web Petros Browser psdapps.Demetrakopoulos gr © • Ανοίγουμε τον Asistant Editor και συνδέουμε το Outlet του webview στο αρχείο ViewController.swift ακριβώς κάτω από την δήλωση της κλάσης.

36. Ο κώδικας πρέπει τώρα να Petros μοιάζει κάπως έτσι Demetrakopoulos © import UIKit import WebKit class ViewController: UIViewController { ! psdapps.gr @IBOutlet weak var webView: UIWebView! override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. } ! override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } !! }

37. Petros psdapps.Demetrakopoulos gr ©

38. Φτιάχνοντας ένα Web Petros Browser Demetrakopoulos © • Εκτελούμε την ίδια διαδικασία για τα 3 buttons και για το text field. • O κώδικας τώρα μοιάζει κάπως έτσι. import UIKit import WebKit class ViewController: UIViewController { psdapps.gr @IBOutlet weak var webView: UIWebView! @IBOutlet weak var Go: UIButton! @IBOutlet weak var Back: UIButton! @IBOutlet weak var Next: UIButton! @IBOutlet weak var address: UITextField! override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. } ! override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } !! }

39. Petros psdapps.Demetrakopoulos gr ©

40. Φτιάχνοντας ένα Web Petros Browser Demetrakopoulos © • Στον κώδικα πρέπει να έχουν μπει οι παρακάτω functions @IBAction func GoPressed(sender: AnyObject) { psdapps.gr } @IBAction func BackPressed(sender: AnyObject) { } @IBAction func NextPressed(sender: AnyObject) { }

41. GoPressed Petros psdapps.Demetrakopoulos gr © • Με την εκτέλεση της συγκεκριμένης function το πρόγραμμα θα “φορτώνει” στο WebView την σελίδα με την διεύθυνση που του έχουμε εισάγει στο TextField .

42. GoPressed Petros psdapps.Demetrakopoulos gr © @IBAction func GoPressed(sender: AnyObject) { var url = NSURL(string:address.text) var req = NSURLRequest(URL:url) webView!.loadRequest(req); }

43. Go Back / Forward Petros psdapps.Demetrakopoulos gr © @IBAction func BackPressed(sender: AnyObject) { webView.goBack() } ! @IBAction func NextPressed(sender: AnyObject) { webView.goForward() }

44. Έτοιμο! Petros Demetrakopoulos © • Τώρα μπορείτε να δοκιμάσετε την εφαρμογή στην συσκευή σας ή στον simulator. psdapps.gr

45. Petros psdapps.Demetrakopoulos gr ©

46. Λίγη Java Petros psdapps.Demetrakopoulos gr © • Υπάρχουν όλες οι δομές όπως τις περιγράψαμε και για την Swift • Αλλάζει λίγο η σύνταξη

47. Δήλωση μεταβλητών Petros psdapps.Demetrakopoulos gr © • Σε αντίθεση με την Swift στην Java δηλώνουμε τον τύπο των μεταβλητών που χτησιμοποιούμε στο προγραμμά μας. • π.χ • int age = 0; Ακέραια μεταβλητή

48. Βασικοί Τύποι μεταβλητών Petros Int Ακέραιοι αριθμοί psdapps.Float Demetrakopoulos Δεκαδικοί αριθμοί Double Δεκαδικοί αριθμοί Boolean gr Λογική Char Χαρακτήρας © String Σειρά χαρακτήρων

49. Σημείωση Petros psdapps.Demetrakopoulos gr © • Στην Java κάθε γραμμή κώδικα τελειώνει με το σύμβολο “;”

50. Πως ορίζουμε functions Petros Demetrakopoulos © • Παράδειγμα : public static int funcName(int a, int b) { // body } psdapps.gr public static: Είναι ο τύπος της function σε σχέση με το από παυ μπορούμε να την καλέσουμε μέσα στο πρόγραμμα int : Ο τύπος του αποτελέσματος που επιστρέφει η function (αν δεν επιστρέφει κάτι ο τύπος είναι void ) funcName : Το όνομα που δίνουμε και με το οποίο θα καλούμε την function, μέσα στην παρένθεση μπορεί να υπάρχουν και παράμετροι

51. Φτιάχνοντας τον web Petros browser Demetrakopoulos © • Ανοίγουμε το Eclipse, το IDE του Android, και φτιάχνουμε ένα καινούριο project. psdapps.gr

52. Φτιάχνοντας τον web Petros browser psdapps.Demetrakopoulos gr © • Στο Android ο σχεδιασμός του γραφικού περιβάλλοντος είναι πιό πολύπλοκος από τον σχεδιασμό στην iOS. • Πρακτικά το γραφικό περιβάλλον γράφεται με την μορφή κώδικα XML (Extensible Markup Language)

53. Φτιάχνοντας τον web Petros browser Demetrakopoulos © • Ανοίγουμε το αρχείο main.xml και ορίζουμε το WebView widget εμφολευμένα μέσα στο LinearLayout. psdapps.gr • Ορίζουμε και ένα id για αυτό το WebView Widget για να έχουμε πρόσβαση σε αυτό από τον κώδικα της εφαρμογής. • Κάνουμε την ίδια διαδικασία και για 3 buttons και ένα textField.

54. Φτιάχνοντας τον web Petros browser Demetrakopoulos © <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" psdapps.gr android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <WebView android:id=“@+id/web_view" android:layout_width="320px" android:layout_height=“480px" /> <EditText android:id="@+id/address" android:width="220px" /> </LinearLayout>

55. Φτιάχνοντας τον web Petros browser psdapps.Demetrakopoulos gr © <Button android:id="@+id/Back" android:width="60px" android:height=“60px" android:text="@string/Back" android:textSize="22dp" android:onClick="Back"></Button>

56. Φτιάχνοντας τον web Petros browser psdapps.Demetrakopoulos gr © <Button android:id="@+id/Forward" android:width="60px" android:height=“60px" android:text="@string/Forward" android:textSize="22dp" android:onClick="Forward"></Button>

57. Φτιάχνοντας τον web Petros browser psdapps.Demetrakopoulos gr © <Button android:id="@+id/Go" android:width="60px" android:height=“60px" android:text="@string/Go" android:textSize="22dp" android:onClick="Go"></Button>

58. Φτιάχνοντας τον web Petros browser Demetrakopoulos © • Τώρα πρέπει να ζητήσουμε έγκριση για να χρησιμοποιήσουμε τη συνδεσιμότητα της συσκευής στο internet. psdapps.gr • Ανοίγουμε το αρχείο AndroidManifest.xml και προσθέτουμε αυτή την γραμμή. <uses-permission android:name=“android.permission.INTERNET" />

59. Φτιάχνοντας τον web Petros browser Demetrakopoulos © • Ανοίγουμε το βασικό activity του app μας και στην μέθοδο onCreate γράφουμε τις παρακα΄τω γραμμές κώδικα. psdapps.gr Button BackButton; Button GoButton; Button NextButton; EditText address;

60. Φτιάχνοντας τον web Petros browser Demetrakopoulos © • Στο ίδιο αρχείο στην μέθοδο onCreate γράφουμε τις παρακάτω γραμμές κώδικα. psdapps.gr ! WebView myWebView = (WebView) findViewById(R.id.web_view); BackButton = (Button)findViewById(R.id.Back); ForwardButton = (Button)findViewById(R.id.Forward); GoButton = (Button)findViewById(R.id.Go); address = (EditText)findViewById(R.id.address);

61. Φτιάχνοντας τον web Petros browser Demetrakopoulos © • Στην μέθοδο onCreate() τώρα γράφουε τις παρακάτω γραμμές κώδικα. psdapps.gr Go.setOnClickListener(new OnClickListener() { @Override public void onClick(View arg0) { myWebView.loadUrl (address.getText); } });

62. Φτιάχνοντας τον web Petros browser Demetrakopoulos © • Ακριβώς από κάτω γράφουμε: psdapps.gr Back.setOnClickListener(new OnClickListener() { @Override public void onClick(View arg0) { myWebView.goBack(); } });

63. Φτιάχνοντας τον web Petros browser Demetrakopoulos © • Ακριβώς από κάτω γράφουμε: psdapps.gr Forward.setOnClickListener(new OnClickListener() { @Override public void onClick(View arg0) { myWebView.goForward(); } });

64. Έτοιμο! Petros Demetrakopoulos © • Πατήστε το Run Button, επιλέξτε “Run as Android application” . διαλέξτε ένα virtual device και η εφαρμογή θα τρέξει στον simulator. psdapps.gr

65. Petros Demetrakopoulos © psdapps.grQuestions?

66. Petros Demetrakopoulos © psdapps.grThanks! psdapps.gr @DemetrakoPetros PSD Apps

Add a comment

Related presentations

mPortal designs, develops and hosts mobile apps and services for cable, telecom an...

Vorstellung des 7. App Day in München mit Übersicht über den Show Your App Award u...

Доклад Галины Диваковой на конференции Appsconference на тему ". 1 НОЯБРЯ, 2014 ...

Vortrag von Anna-Maria Zahn und Stefan Hauck auf der AllFacebook Marketing Confere...

Мобио - кейсы по продвижению мобильных приложени

Related pages

Mobile Apps | APPS | SAMSUNG Deutschland

Samsung Galaxy Apps Wenn Sie auf der Suche nach Apps sind, die eigens für Ihr Galaxy-Gerät optimiert wurden. Haben Sie ein neues Galaxy Gerät?
Read more

intro to mobile apps - YouTube

Intro to mobile app on google helpouts ... Build Mobile Apps and Make Money with Best Marketing Techniques Course Intro - Duration: 1:18.
Read more

Intro to mobile apps (9-1) - YouTube

Want to watch this again later? Sign in to add this video to a playlist. This video is part of the Analyzing and Visualizing Data with Power BI ...
Read more

Intro Designer App

INTRO DESIGNER began to take shape from the need of more polished and professional videos without losing the personal feeling. In iPhone and iPad you ...
Read more

Mobile Apps | APPS | SAMSUNG Schweiz

Samsung Galaxy Apps Haben Sie ein neues Galaxy Gerät? Gehen Sie zu Galaxy Apps und entdecken Sie hilfreiche Apps für Ihr Gerät.
Read more

Intro to Letters Mobile App | The Best Mobile App Awards

Intro to Letters has won an award for Best App for Children and Toddlers. Featured by Apple as one of the best new apps, Intro to Letters is one of the ...
Read more

Mobile app for iOS - websmp205.sap-ag.de

Connecting mobile apps with SAP Business One, available as of version 8.8 PL12 ... SAP Business One mobile app for iOS - User Guide :
Read more

MOBILE APP TEMPLATES BY IPHONE GRAPHIC DESIGNERS, ICON ...

PICK YOUR MOBILE TEMPLATE FOR IPHONE AND ANDROID APPS! OVER 10,000 GRAPHIC DESIGNERS FROM ALL OVER THE WORD! app icons maker design software
Read more

Geocaching® – Android-Apps auf Google Play

Mobile; Books; Wallet; Shopping; Blogger; Fotos; Videos; Docs; Noch mehr ... Apps-Top-Charts. Neuerscheinungen. Top-Entwickler. Geocaching® 34 ...
Read more

Die besten Apps für iPhone, iPad und Android - Download

Die CHIP App-Beratung bietet eine redaktionelle Auswahl und Bewertung der besten Apps für iPhone, iPad, Android-Smartphones und Android-Tablets.
Read more