Upload
petros-demetrakopoulos
View
715
Download
1
Embed Size (px)
DESCRIPTION
The slides from my talk about introduction to mobile app development which took place during Code Week EU on Saturday 11/10/14.
Citation preview
Petros Demetrakopoulos ©
psdapps.gr
Introduction to Mobile Applications
Petros Demetrakopoulos
Petros Demetrakopoulos ©
psdapps.gr
Οι πλατφόρμες
Βασισμένο στην Java Βασισμένο στην Swift (Και την Objective - C )
Petros Demetrakopoulos ©
psdapps.gr
Τα εργαλεία ανάπτυξης
• Είναι διαθέσιμα ΔΩΡΕΑΝ για όλους.
• Μπορείτε να τα κατεβάσετε στα links:
• https://developer.apple.com/xcode/downloads/
• http://developer.android.com/sdk/index.html
Petros Demetrakopoulos ©
psdapps.gr
Για να ανεβάσετε στα ηλεκτρονικά καταστήματα
• Τα εργαλεία ανάπτυξης είναι διαθέσιμα δωρεαν, προκειμένου όμως να ανεβάσετε τις εφαρμογές που αναπτύσετε στα αντίστοιχα ηλεκτρονικά καταστήματα των πλατφορμών (Google Play και App Store αντίστοιχα) υπάρχει ένα κόστος.
• 25 $ Κόστος εγγραφής για το Google Play (την οποία πληρώνετε μία φορά
• 100 $ / Χρόνο ετήσια συνδρομή για το App Store.
Petros Demetrakopoulos ©
psdapps.gr
Αντικειμενοστραφής προγραμματισμός
• Και οι δύο πλατφόρμες είναι βασισμένες σε σύγχρονες γλώσσες που υποστηρ ί ζουν αντικειμενοστραφή προγραμματισμό (Object - Oriented Programming )
!
• Αυτό σημαίνει ότι ο κώδικας οργανώνεται σε αντικείμενα (objects) τα οποία έχουν κάποιες ιδιότητες (properties)και κάποιες λειτουργίες (functions / methods).
Petros Demetrakopoulos ©
psdapps.gr
Αντικειμενοστραφής προγραμματισμός
• Για παράδειγμα ένα αντικείμενο που θα είχε την μορφή ενός αυτοκινήτου θα είχε τα properties brand, color, hp, MaxSpeed και τις λειτουργίες throttle, changeGear, brake κλπ
• Εμείς ορίζουμε την δομή, τις ιδιότητες και τις λειτουργίες των αντικειμένων έτσι ώστε να εξυπηρετούν την λειτουργία του προγράμματος μας αλλά και την συντήρηση και την τροποποίηση του κώδικα.
Petros Demetrakopoulos ©
psdapps.gr
APIs & Frameworks
• Application programming interface
• Είναι ο τρόπος με τον οπόιο επικοινωνούν οι εφαρμογές με άλλα στοιχεία της πλατφόρμας (π.χ πρόσβαση σε σένσορες, internet, photo / video ) ή άλλες εφαρμογές (χάρτες , mail , μηνύματα κλπ)
Petros Demetrakopoulos ©
psdapps.gr
Petros Demetrakopoulos ©
psdapps.gr
Τα βασικά της Swift• Σταθερές και μεταβήτές:
• let userName = “psd”
• var password = 10
• var x = 0.0, y = 0.0, z = 0.0
• var welcomeMessage: String
• welcomeMessage = “Hello”
• var red, green, blue: Double
Petros Demetrakopoulos ©
psdapps.gr
Προσοχή!
• Όταν ξέρουμε ότι στο πρόγραμμά μας μία τιμή δεν θα αλλάξει την ορίζουμε ως σταθερά. Η γλώσσα προγραμματισμού αντιμετωπίζει διαφορετικά τις σταθερές και διαφορετικά τις μεταβλητές.
• Έτσι τρέχει πιό γρήγορα και αποδοτικά.
Petros Demetrakopoulos ©
psdapps.gr
Άλλα βασικά στοιχεία της Swift• Τυπώνει στην κονσόλα με την εντολή
println(variable)
println(userName)
println("This is a string")
// prints "This is a string”
// This is a comment
/* this is also a comment,
but written over multiple lines */
Petros Demetrakopoulos ©
psdapps.gr
Τελεστές• Αριθμιτικοί : + , - , *, / , < , > , =, % (remainder)
• Λογικοί : ! (NOT), && (AND), | | (OR)
• πχ (Αριθμιτική σύγκριση )
1 == 1 True
2 != 1 True
2 <= 1 False
Petros Demetrakopoulos ©
psdapps.gr
Tuples
• Τα tuples ομαδοποιούν περισσότερες μεταβλητές σε μία.
π.χ
let car = (“BMW”, “coupe”, 4 )
println(“The brand is \ (car.0)” )
Petros Demetrakopoulos ©
psdapps.gr
Arrays• Λίστες / Πίνακες μεταβλητών.
π.χ
var shoppingList: [String] = ["Eggs", “Milk”]
println("The shopping list contains \(shoppingList.count) items.")
// prints "The shopping list contains 2 items.
Petros Demetrakopoulos ©
psdapps.gr
Προσθήκη / πρόσβαση στοιχείων σε Arrays
• shoppingList.append(“Flour")
• shoppingList += ["Baking Powder”]
• var item = shoppingList [5]
• Η μεταβλητή item περιέχει το στοιχείο που βρίσκεται στην 5η θεση του Array.
• Σημείωση : Τα arrays ξεκινάνε με βάση το 0.
Petros Demetrakopoulos ©
psdapps.gr
If / Else/ Else - If• if condition {
statements
}
• if condition {
statements
} else{
statements
}
Petros Demetrakopoulos ©
psdapps.gr
If / Else/ Else - If• if condition {
statements
} else if{
statements
} else {
statements
}
Petros Demetrakopoulos ©
psdapps.gr
Loops
• Εκτελούν μέρη κώδικα παραπάνω από μία φορά.
• Επαναλαμβάνουν μία αυτοματοποιημένη διαδικασία.
• For - in , For, While , Do - While
Petros Demetrakopoulos ©
psdapps.gr
For-in
• Χρησιμοποιήται για να διαβάσουμε κάθε αντικείμενο μία λίστας όπως ένα array , ένα String κλπ.
Petros Demetrakopoulos ©
psdapps.gr
Παράδειγμαlet names = ["Anna", "Alex", "Brian", "Jack"]
for name in names {
println("Hello, \(name)!")
}
// Hello, Anna!
// Hello, Alex!
// Hello, Brian!
// Hello, Jack!
Petros Demetrakopoulos ©
psdapps.gr
For
• Τρέχει επαναλαμβάνοντας μία διαδικασία συγκεκριμένες φορές αυξάνοντας πάντα ένα δείκτη που μετράει πόσες φορές έχει τρέξει ο κώδικας που βρίσκεται μέσα στο for loop.
Petros Demetrakopoulos ©
psdapps.gr
Παράδειγμα for var index = 0; index < 3; ++index {
println("index is \(index)")
}
// index is 0
// index is 1
// index is 2
Petros Demetrakopoulos ©
psdapps.gr
While• Τρέχει όσο ισχύει μία συνθήκη και παύει να τρέχει μόλις η συνθήκη πάρει τιμή false.
while Response == “Error” {
var request = makeRequest()
Response = request.response
}
Petros Demetrakopoulos ©
psdapps.gr
Functions
• Είναι αυτόνομα κομμάτια κώδικα που εκτελούν μία συγκεκριμένη διαδικασία. Όταν ορίζουμε ένα function, του δίνουμε ένα όνομα (με το οποίο το καλούμε από άλλα σημεία του προγράμματος ) και (προαιρετικά ) κάποιες παραμέτρους με τις οποίς εκτελείται η διαδιακσία.
Petros Demetrakopoulos ©
psdapps.gr
Παράδειγμα
func sayHello(personName: String) -> String {
let greeting = "Hello, " + personName + "!"
return greeting
}
Petros Demetrakopoulos ©
psdapps.gr
Πως το καλούμε• func_name(parameters)
• π.χ
var greeting = sayHello (“John” )
Η μεταβλητή greeting έχει πάρει τώρα την τιμή “Hello John!”
• Δεν είναι απαραίτητο μία function να δίνει κάποιο αποτέλεσμα.
Petros Demetrakopoulos ©
psdapps.gr
Σχεδιασμός του UI
• Ο Xcode πριλαμβάνει σχεδιαστή User Interface για τον σχεδιασμό των διάφορων οθονών της εφαρμογής μας παρ’ότι αυτό μπορεί να γίνει και γράφοντας το user interface σε μορφή κώδικα.
Petros Demetrakopoulos ©
psdapps.gr
Petros Demetrakopoulos ©
psdapps.gr
Φτιάχνοντας ένα Web Browser
• Ανοίγουμε τον Xcode και πατάμε “Create a new Xcode project”
• Διαλέγουμε την επιλογή “Single View Application”
• Πατάμε “Next”
Petros Demetrakopoulos ©
psdapps.gr
Petros Demetrakopoulos ©
psdapps.gr
Φτιάχνοντας ένα Web Browser
• Δίνουμε ένα όνομα στο project και μόλις ανοίξει, διαλέγουμε από την αριστερή μπάρα το αρχείο σχεδίασμού UI “Main.storyboard”
Petros Demetrakopoulos ©
psdapps.gr
Petros Demetrakopoulos ©
psdapps.gr
Φτιάχνοντας ένα Web Browser
• Από την κάτω δεξιά λίστα κάνουμε drag πάνω στην οθόνη το object WebView και προσαρμόζουμε τις διαστάσεις του.
• Από την ίδια λίστα κάνουμε drag στην οθόνη 3 buttons και ένα text field
• Ονομάζουμε τα 3 buttons Go, Next και Back
Petros Demetrakopoulos ©
psdapps.gr
Petros Demetrakopoulos ©
psdapps.gr
Φτιάχνοντας ένα Web Browser
• Ανοίγουμε τον Asistant Editor και συνδέουμε το Outlet του webview στο αρχείο ViewController.swift ακριβώς κάτω από την δήλωση της κλάσης.
Petros Demetrakopoulos ©
psdapps.gr
Ο κώδικας πρέπει τώρα να μοιάζει κάπως έτσι
import UIKit import WebKit class ViewController: UIViewController { ! @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. } !!}
Petros Demetrakopoulos ©
psdapps.gr
Petros Demetrakopoulos ©
psdapps.gr
Φτιάχνοντας ένα Web Browser
• Εκτελούμε την ίδια διαδικασία για τα 3 buttons και για το text field.
• O κώδικας τώρα μοιάζει κάπως έτσι. import UIKit import WebKit class ViewController: UIViewController { @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. } !!}
Petros Demetrakopoulos ©
psdapps.gr
Petros Demetrakopoulos ©
psdapps.gr
Φτιάχνοντας ένα Web Browser
• Στον κώδικα πρέπει να έχουν μπει οι παρακάτω functions
@IBAction func GoPressed(sender: AnyObject) { } @IBAction func BackPressed(sender: AnyObject) { } @IBAction func NextPressed(sender: AnyObject) { }
Petros Demetrakopoulos ©
psdapps.gr
GoPressed
• Με την εκτέλεση της συγκεκριμένης function το πρόγραμμα θα “φορτώνει” στο WebView την σελίδα με την διεύθυνση που του έχουμε εισάγει στο TextField .
Petros Demetrakopoulos ©
psdapps.gr
GoPressed
@IBAction func GoPressed(sender: AnyObject) { var url = NSURL(string:address.text) var req = NSURLRequest(URL:url) webView!.loadRequest(req); }
Petros Demetrakopoulos ©
psdapps.gr
Go Back / Forward
@IBAction func BackPressed(sender: AnyObject) { webView.goBack() } !@IBAction func NextPressed(sender: AnyObject) { webView.goForward() }
Petros Demetrakopoulos ©
psdapps.gr
Έτοιμο!• Τώρα μπορείτε να δοκιμάσετε την εφαρμογή στην συσκευή σας ή στον simulator.
Petros Demetrakopoulos ©
psdapps.gr
Petros Demetrakopoulos ©
psdapps.gr
Λίγη Java
• Υπάρχουν όλες οι δομές όπως τις περιγράψαμε και για την Swift
• Αλλάζει λίγο η σύνταξη
Petros Demetrakopoulos ©
psdapps.gr
Δήλωση μεταβλητών
• Σε αντίθεση με την Swift στην Java δηλώνουμε τον τύπο των μεταβλητών που χτησιμοποιούμε στο προγραμμά μας.
• π.χ
• int age = 0; Ακέραια μεταβλητή
Petros Demetrakopoulos ©
psdapps.gr
Βασικοί Τύποι μεταβλητώνInt Ακέραιοι αριθμοί
Float Δεκαδικοί αριθμοί
Double Δεκαδικοί αριθμοί
Boolean Λογική
Char Χαρακτήρας
String Σειρά χαρακτήρων
Petros Demetrakopoulos ©
psdapps.gr
Σημείωση
• Στην Java κάθε γραμμή κώδικα τελειώνει με το σύμβολο “;”
Petros Demetrakopoulos ©
psdapps.gr
Πως ορίζουμε functions• Παράδειγμα :
public static int funcName(int a, int b) {
// body
}
public static: Είναι ο τύπος της function σε σχέση με το από παυ μπορούμε να την καλέσουμε μέσα στο πρόγραμμα
int : Ο τύπος του αποτελέσματος που επιστρέφει η function (αν δεν επιστρέφει κάτι ο τύπος είναι void )
funcName : Το όνομα που δίνουμε και με το οποίο θα καλούμε την function, μέσα στην παρένθεση μπορεί να υπάρχουν και παράμετροι
Petros Demetrakopoulos ©
psdapps.gr
Φτιάχνοντας τον web browser
• Ανοίγουμε το Eclipse, το IDE του Android, και φτιάχνουμε ένα καινούριο project.
Petros Demetrakopoulos ©
psdapps.gr
Φτιάχνοντας τον web browser
• Στο Android ο σχεδιασμός του γραφικού περιβάλλοντος είναι πιό πολύπλοκος από τον σχεδιασμό στην iOS.
• Πρακτικά το γραφικό περιβάλλον γράφεται με την μορφή κώδικα XML (Extensible Markup Language)
Petros Demetrakopoulos ©
psdapps.gr
Φτιάχνοντας τον web browser
• Ανοίγουμε το αρχείο main.xml και ορίζουμε το WebView widget εμφολευμένα μέσα στο LinearLayout.
• Ορίζουμε και ένα id για αυτό το WebView Widget για να έχουμε πρόσβαση σε αυτό από τον κώδικα της εφαρμογής.
• Κάνουμε την ίδια διαδικασία και για 3 buttons και ένα textField.
Petros Demetrakopoulos ©
psdapps.gr
Φτιάχνοντας τον web browser
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
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>
Petros Demetrakopoulos ©
psdapps.gr
Φτιάχνοντας τον web browser
<Button
android:id="@+id/Back"
android:width="60px"
android:height=“60px"
android:text="@string/Back"
android:textSize="22dp"
android:onClick="Back"></Button>
Petros Demetrakopoulos ©
psdapps.gr
Φτιάχνοντας τον web browser
<Button
android:id="@+id/Forward"
android:width="60px"
android:height=“60px"
android:text="@string/Forward"
android:textSize="22dp"
android:onClick="Forward"></Button>
Petros Demetrakopoulos ©
psdapps.gr
Φτιάχνοντας τον web browser
<Button
android:id="@+id/Go"
android:width="60px"
android:height=“60px"
android:text="@string/Go"
android:textSize="22dp"
android:onClick="Go"></Button>
Petros Demetrakopoulos ©
psdapps.gr
Φτιάχνοντας τον web browser
• Τώρα πρέπει να ζητήσουμε έγκριση για να χρησιμοποιήσουμε τη συνδεσιμότητα της συσκευής στο internet.
• Ανοίγουμε το αρχείο AndroidManifest.xml και προσθέτουμε αυτή την γραμμή.
<uses-permission android:name=“android.permission.INTERNET" />
Petros Demetrakopoulos ©
psdapps.gr
Φτιάχνοντας τον web browser
• Ανοίγουμε το βασικό activity του app μας και στην μέθοδο onCreate γράφουμε τις παρακα΄τω γραμμές κώδικα.
Button BackButton;
Button GoButton;
Button NextButton;
EditText address;
Petros Demetrakopoulos ©
psdapps.gr
Φτιάχνοντας τον web browser
• Στο ίδιο αρχείο στην μέθοδο onCreate γράφουμε τις παρακάτω γραμμές κώδικα.
!
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);
Petros Demetrakopoulos ©
psdapps.gr
Φτιάχνοντας τον web browser
• Στην μέθοδο onCreate() τώρα γράφουε τις παρακάτω γραμμές κώδικα.
Go.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
myWebView.loadUrl (address.getText);
}
});
Petros Demetrakopoulos ©
psdapps.gr
Φτιάχνοντας τον web browser
• Ακριβώς από κάτω γράφουμε:
Back.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
myWebView.goBack();
}
});
Petros Demetrakopoulos ©
psdapps.gr
Φτιάχνοντας τον web browser
• Ακριβώς από κάτω γράφουμε:
Forward.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
myWebView.goForward();
}
});
Petros Demetrakopoulos ©
psdapps.gr
Έτοιμο!• Πατήστε το Run Button, επιλέξτε “Run as
Android application” . διαλέξτε ένα virtual device και η εφαρμογή θα τρέξει στον simulator.
Petros Demetrakopoulos ©
psdapps.grQuestions?
Petros Demetrakopoulos ©
psdapps.gr
Thanks!
@DemetrakoPetros PSD Apps
psdapps.gr