Intro to mobile apps

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

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

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

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

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

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

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

©

Τα βασικά της Swift
• Σταθερές και μεταβήτές:
• 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

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

Άλλα βασικά στοιχεία της Swift
• Τυπώνει στην κονσόλα με την εντολή
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
*/

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

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

(car.0)”
)

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

(shoppingList.count)
items.")
//
prints
"The
shopping
list
contains
2
items.

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

If / Else/ Else - If
©
•
if
condition
{
statements
}
• if
condition
{
statements
}
else{
statements
}

If / Else/ Else - If
• if
condition
{
statements
}
else
if{
statements
}
else
{
statements
}
psdapps.gr

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

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

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

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

for var index = 0; index < 3; ++index {
psdapps.gr
println("index is (index)")
}
// index is 0
// index is 1
// index is 2

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

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

©
func sayHello(personName: String) -> String {
let greeting = "Hello, " + personName + "!"
return greeting
}

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

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

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

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

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

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

Ο κώδικας πρέπει τώρα να
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.
}
!!
}

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.
}
!! }

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

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

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

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

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

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

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

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

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

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

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

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

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>

Petros browser
©
<Button
android:id="@+id/Back"
android:width="60px"
android:height=“60px"
android:text="@string/Back"
android:textSize="22dp"
android:onClick="Back"></Button>

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

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

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);

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

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

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

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

psdapps.grQuestions?

psdapps.grThanks!
psdapps.gr
@DemetrakoPetros PSD Apps

Intro to mobile apps

Recommended

Recommended

More Related Content

Similar to Intro to mobile apps

Similar to Intro to mobile apps (20)

Intro to mobile apps