Η πρώτη μου εφαρμογή σε Android

09 Απρ 2011 | Development

Δεν επιτρέπονται τα σχόλια.


android

Ο σκοπός αυτού του post είναι να βοηθήσω όσους ενδιαφέρονται να γράψουν apps για Android. Σε αυτό το post θα εξετάσουμε ολόκληρο τον κύκλο της ανάπτυξης εφαρμογής, ξεκινώντας με ένα καθαρό υπολογιστή μέχρι το τελικό .apk αρχείο.

Προετοιμασία

Εγώ έχω τα Windows 7, οπότε όσα αναφέρονται παρακάτω είναι ειδικά για αυτό το λειτουργικό σύστημα, αν και δεν θα υπάρξουν δραματικές αλλαγές αν χρησιμοποιείτε άλλη έκδοση των Windows ή Linux.

* Εγκατάσταση του Eclipse IDE
* Εγκατάσταση ADT plugin για το Eclipse
* Εγκατάσταση JDK και JRE
* Εγκατάσταση του Android SDK

Εγκατάσταση του Eclipse IDE

Τίποτα δύσκολο. Πηγαίνουμε στην ενότητα Downloads στο επίσημο site και εγκαθιστάμε την έκδοση Classic. Στη συνέχεια αποσυμπιέζετε το αρχείο όπου θέλετε, εγώ διάλεξα τον φάκελο C:\Eclipse

Εγκατάσταση του περιβάλλοντος Java JDK και JRE

Αν δεν έχετε ήδη εγκαταστήσει το Java Development Kit (JDK) και Java Runtime Environment (JRE), τότε θα πρέπει να το κάνετε. Μπορείτε να το κάνετε στο site της Oracle (http://www.oracle.com/technetwork/java/javase/downloads/index.html).
Λήψη και εγκατάσταση του JDK και JRE.

Εγκατάσταση του ADT plugin για το Eclipse

Τρέχουμε το Eclipse. Αρχικά θα μας ζητηθεί να επιλέξουμε τον φάκελο που θα αποθηκεύονται τα projects μας, εγώ επέλεξα το C:\Eclipse\Projects.
Τώρα πρέπει να εγκαταστήσουμε το plugin, πάμε στο Help->Install New Software. Στο πεδίο “Work With” γράφουμε https://dl-ssl.google.com/android/eclipse/ και πατάμε add.

Στο παράθυρο που θα ανοίξει γράφουμε ένα όνομα ώστε αργότερα να τα ξεχωρίζουμε.

Κάνουμε tick στο “Developer tools” και πατάμε next.

Αφού ολοκληρωθεί η εγκατάσταση κάνουμε επανεκκίνηση του Eclipse.

Εγκατάσταση του Android SDK

Κατεβάζουμε το SDK απο το site του android . Εγώ διάλεξα το zip αρχείο και το έκανα unzip στο C:\Android.

Τώρα τρέχουμε το αρχείο SDK Manager.exe που βρίσκετε στον φάκελο Android, στο παράθυρο που θα ανοίξει μπορούμε να επιλέξουμε τις εκδόσεις του Android που θέλουμε να χρησιμοποιήσουμε και διάφορα άλλα στοιχεία, εγώ τα αφήνω όπως έχουν και πατάμε το install.

Όταν ολοκληρωθεί η εγκατάσταση πατάμε να κάνει Restart και κλείνουμε τα παράθυρα.

Δημιουργία Android-εφαρμογής

Πριν από τη δημιουργία της πρώτης εφαρμογής σας, σας συμβουλεύω να δημιουργήσετε μια εικονική Android συσκευή για να ελέγχετε γρήγορα το λογισμικό σας.
Το Android Virtual Device (AVD) είναι ένα εικονικό smartphone που τρέχει Android, στο οποίο μπορείτε εύκολα να εκτελέσετε ότι πρόγραμμα δημιουργήσετε.

Όπως μπορείτε να δείτε το πλεονέκτημα του AVD είναι ότι μπορείτε να δείτε πώς το λογισμικό σας θα προβάλλεται σε διαφορετικά smartphones με Android, αντί να τα αγοράσετε και να το δοκιμάζετε στο καθένα ξεχωριστά.

Πριν φτιάξουμε το AVD μας πρώτα θα συνδέσουμε το Android SDK, πάμε στο Window->Preferences, στο παράθυρο που θα ανοίξει πάμε στο Android και εκεί επιλέγουμε που έχουμε κάνει Unzip το SDK που κατεβάσαμε πιο πριν, πατάμε Apply και ΟΚ.

Τώρα πάμε στο Window -> Android SDK and AVD Manager, πατάμε New και διαλέγουμε τα χαρακτηριστικά του smartphone μας.

Εγώ επέλεξα το Android 2.2 επειδή αργότερα σκοπεύω να τρέξω την εφαρμογή μου στο HTC Desire που έχω.

Κλείνουμε το παράθυρο και πάμε στο File -> New -> Other , όπου επιλέγουμε το Android -> Android Project.

Πατάμε Finish

Για της ανάγκες του tutorial έφτιαξα ένα απλό πρόγραμμα που δείχνει την θερμοκρασία στο Λουτράκι, γιαυτό από δω και πέρα θα αναφέρονται οδηγίες για την δημιουργία αυτού του app.

Μέτα την δημιουργία του project στα αριστερά θα εμφανιστεί ένα δεντρo φακέλων.

Αρχικά μπορούμε να επιλέξουμε την εικόνα του app μας.

Για να το κάνουμε αυτό πάμε στο res και κανουμε drag&drop μια png εικονα 72×72 στον φακελο drawable-hdpi, 48×48 στον drawable-mdpi και 36×36 στον drawable-ldpi.

Το πρόγραμμά μου χρειάστηκε μόλις 3 στοιχειά, ImageView (μια εικόνα, το logo), Button(το κουμπάκι που θα κάνει refresh όταν το πατήσουμε), TextView(εδώ θα εμφανίζετε η θερμοκρασία). Όλα αυτά τα στοιχειά πρέπει να περιγραφούν στο αρχείο main.xml (res->layout).

Εδώ είναι το δικό μου:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="fill_parent"
    android:background="#313031" android:layout_width="match_parent" android:orientation="vertical">

    <TableLayout android:id="@+id/tableLayout1" android:layout_height="86px" android:layout_width="match_parent">
        <ImageView android:layout_height="86px" android:src="@drawable/logo"  android:layout_width="263px"  android:id="@+id/imageView1" android:layout_weight="8"></ImageView>

    </TableLayout>
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="..."

    android:textSize="100dip"
    android:gravity="center_horizontal"
    android:id="@+id/temper"
    android:textColor="#EEE3C4"

    />
<Button android:gravity="center_horizontal" android:padding="20px" android:layout_gravity="center_horizontal|center" android:layout_width="wrap_content" android:text="Refresh" android:textSize="30px" android:layout_height="wrap_content" android:id="@+id/refrbutton" android:layout_marginTop="10dip"></Button>

</LinearLayout>

Δεν νομίζω πως ο παραπάνω κώδικας θέλει κάποια ανάλυση, είναι πολύ απλό. Όμως δώστε σημασία για το πως φόρτωσα το Logo στο ImageView. Στο src γράφουμε την διαδρομή προς την εικόνα ξεκινώντας από το σύμβολο @. Όπως καταλάβατε στο res έφτιαξα νέο φάκελο με το όνομα drawable και έβαλα εκεί το Logo.

Ο κώδικας του app σας βρίσκετε στην διαδρομή src->”package name”->”app name”.java. To eclipse φτιάχνει αυτόματα ένα Header
που από κάτω μπορείτε να αρχίσετε να γράφετε τον κώδικά σας. Η λογική του app μου είναι η εξής:
*Κατεβάζουμε την ιστοσελίδα που περιεχέι την θερμοκρασία
*Χρησιμοποιώντας regular expressions βγάζουμε την ίδια την θερμοκρασία
*Δείχνουμε την θερμοκρασία στο TextView

Σημειώστε ότι όταν μια εφαρμογή απαιτεί κάποιου είδους δικαιώματα, πρέπει να τα καθορίσετε στο AndroidManifest.xml. Στην δίκη μου περίπτωση εγώ χρησιμοποιώ σύνδεση στο Internet οπότε πρέπει να προσθέσω την παρακάτω γραμμή

    <uses-permission android:name="android.permission.INTERNET" />

Ορίστε και κώδικας που εξήγησα πιο πάνω

package com.app.ituts.app;

import android.app.Activity;

import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import android.widget.Button;

import java.io.InputStreamReader;
import java.net.URL;
import java.net.URLConnection;
import java.util.regex.*;

import com.app.ituts.R.id;
import com.app.ituts.R.layout;

public class ituts extends Activity

{

    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);

        setContentView(layout.main);
        final Button button = (Button) findViewById(id.refrbutton);

        button.setOnClickListener(new Button.OnClickListener() {
            public void onClick(View v) // κλικ πάνω στο κουμπάκι

            {
                RefreshTemper();
            }
        });

        RefreshTemper(); // φορτώνουμε την θερμοκρασία μόλις τρέξει το πρόγραμμα

    };
    //----------------------------------------------------------------
    public String GetTemper(String urlsite) // η function που φορτωνει την θερμοκρασια

    {
        String matchtemper = "";
        try
        {
                // φορτωμα της ιστοσελιδας

            URL url = new URL(urlsite);
            URLConnection conn = url.openConnection();

            InputStreamReader rd = new InputStreamReader(conn.getInputStream());
            StringBuilder allpage = new StringBuilder();

            int n = 0;
            char[] buffer = new char[40000];

            while (n >= 0)
            {
                n = rd.read(buffer, 0, buffer.length);

                if (n > 0)
                {
                    allpage.append(buffer, 0, n);
                }

            }
            // κανουμε parsing και βγαζουμε την θερμοκρασια
            final Pattern pattern = Pattern.compile
            ("<span class=\"warm txt-xxlarge\"><strong>(.*)</strong");

            Matcher matcher = pattern.matcher(allpage.toString());
            if (matcher.find())
            {
                matchtemper = matcher.group(1);
            }
            return matchtemper;

        }
        catch (Exception e)
        {

        }
        return matchtemper;
    };

    //----------------------------------------------------------------
    public void RefreshTemper()
    {
        final TextView tTemper = (TextView) findViewById(id.temper);

         String bashtemp = "";
          bashtemp = GetTemper("http://www.foreca.gr/Greece/Loutrakion");
        tTemper.setText(bashtemp.concat("°")); // εμφάνιση της θερμοκρασίας

    };
}

Για να το τρέξουμε πατάμε Run->Run ή Ctr+F11, αυτό θα τρέξει το AVD που φτιάξαμε πιο πριν και θα εκτελέσει τον κώδικα που μόλις γράψαμε.

και το τελικό αποτέλεσμα στο HTC Desire

Συμπέρασμα

Εν κατακλείδι, θα έλεγα ότι η ανάπτυξη εφαρμογών για το Android είναι ευχάριστη, πολύ απλή και ενδιαφέρουσα. Φυσικά, έχουμε υπόψη μας ότι αυτό ήταν μόνο η κορυφή του παγόβουνου.
Ελπίζω να σας άρεσε το tutorial μου, αφήστε σχόλια με τα προβλήματα που θα συναντήσετε ή τις εντυπώσεις σας.
Ευχαριστώ πολύ

Πηγή: ituts.gr

Περισσότερα για τον CorfuGmr

CorfuGmr

Ονομάζομαι Νίκος και ασχολούμαι με το internet και την κατασκευή ιστοσελίδων από το 1998. Σήμερα, μετά από 12 χρόνια γεμάτα με ενημέρωση, εκπαίδευση και εξάσκηση έχω ανεβάσει σε ένα άλλο επίπεδο τις γνώσεις μου και τις τεχνικές μου. Στα άρθρα μου προσπαθώ να σας δείξω τα μικρά, αλλά σημαντικά πράγματα που με έχουν ανεβάσει σε αυτό το επίπεδο.








Σχόλια



dimitris

17 Ιουνίου 2011

για την εγκατάσταση της εφαρμογής που δημιουργήσαμε στο κινητό ποιά αρχεία χρειάζονται?
και γίνεται να την ανεβάσουμε στο market?


Συγνώμη, τα σχόλια για αυτό το άρθρο είναι κλειστά.



^
Top
css.php