Menu Close

Android začiatky + aplikácia na registráciu na zaregistrovanie

 

Inštalácia

 

Ako programovaní nástroj pre našu android aplikáciu si zvolíme Eclipse. Stiahnuť sa dá zo stránky http://www.eclipse.org/downloads/ . Konkrétne „Eclipse Classic“

Ďalší krok je nainštalovať samotné pluginy. ADR je plugin pre Eclipse IDE. Pridáme ho nasledujúcimi krokmi.

1.      Spustíme Eclipse a vyberieme Help > Install Nex Software

2.      Klikneme Add v hornom pravom rohu.

3.      Do Add Repository pridáme  name:“ADT Plugin” s URL adresou

location: https://dl-ssl.google.com/android/eclipse/

4.      Klikneme OK

5.      V okne Avalilable Software vyberieme z chackboxu Developer Tools a klikneme Next.

6.      V okne uvidíme zoznam vecí na inštalovanie a klikneme Next.

7.      Finish a reštartujeme Eclipse.

 

Posledným krokom je inštalácia SDK (Software development kit). Inštalačku stiahneme zo stránky:

http://developer.android.com/sdk/index.html

 

 

Väčšina mobilných zariadení má v sebe verziu 2.1.Preto aj my budeme inštalovať práve túto. V možnostiach balíkov zaznačíme zložku Android 2.1 (API 7), zložku Tools a v zložke Extras vyberieme Google USB Driver a Google Webdriver package.

 

Doinštalovať prípadne updatovať nástroje v android SDK Managerovi môžeme v budúcnosti aj rovno z eclipsu a to vybratím Windows > Android SDK Manager.

Po nainštalovaní potrebných balíkov môžeme spustiť Eclipse a začať robiť prvú aplikáciu.

 



 

Vytváranie aplikácie

Aplikácia ktorú urobíme bude mať zacieľ zaregistrovať  nového užívateľa na náš server. Teda urobíme prvé dve univerzálne aktivity cez ktoré sa bude užívateľ prihlasovať a ktoré budú demonštrovať ako vytvárať android aplikáciu. Každý si môže potom dorobiť aplikáciu akú chce.

 

1.      Nový projekt vytvoríme File > New > Android Project

2.      Project name napríklad: LoginApp, Next.

3.      Pokiaľ nie je zaznačené tak vyberieme Android 2.1

4.      Pre Package Name napríklad univerzal.login.sk

5.      Kolónku Create activity necháme zaškrtnutú a napíšeme do nej Activity1_login

Eclipse nám automaticky vytvorí prvú aktivitu, ktorá bude nastavená ako spúšťacia. Jednotlivé obrazovky, ktoré budeme v mobile vytvárať sa nazývajú aktivity.

6.      Finish.

 

Úvod

V ľavo sa nachádza Package Explorer s projektmi. V ňom nájdeme aj náš. Keď ho rozbalíme vidíme jeho zložky a pár z nich rozoberieme.

V Zložke src je náš balík univerzal.login.sk ktorý obsahuje všetky triedy našej aplikácie. Zatiaľ obsahuje iba jedinú triedu a to našu spúšťaciu aktivitu.

 

Ďalšia dôležitá zložka je res. Všetky zložky drawable slúžia na to aby sa do nich umiestnili obrázky ku ktorým je potom možné pristupovať. Je ich preto toľko pretože sú zariadenia s rôznym rozlíšením takže h-high, l-low a m-middle. Podľa toho majú predpísanú konkrétnu kvalitu obrázku. Názov obrázku musí byť malými písmenami iba písmená čísla a podtržník

layout sa nachádzajú Xml v ktorých je zachytené ako bude obrazovka danej aktivity vyzerať. Keď na to xml poklikáte otvorí sa Vám prednastavené Hello World.

 

Ďalšia užitočná zložka je values. Tá obsahuje rôzne hodnoty, stringy a prednastavené veci, ku ktorým budeme chcieť v java kóde, prípadne layoutoch pristupovať. Obsahuje názvy a hodnoty stringov v string.xml. Taktiež obsahuje rôzne prednastavené hodnoty veľkostí v dimension.xml, alebo názov a hodnota farby v color.xml, ktorú chceme používať pre viaceré komponenty v aplikácii.

 

Posledný veľmi dôležitý dokument je AndroidManifest.xml. V ňom je zoznam tried a povolení ktoré môže aplikácia používať. Ak budeme vytvárať jednotlivé aktivity.java práve AndroidManifest je to miesto, kde sa hľadá ktorá aktivita je spúšťacia, ak chce aktivita spustiť novú aktivitu manifest je miesto, kde sa pozrie, či taká existuje a je dostupná. Pokiaľ sú potrebné povolenia na niektoré úkony ako napríklad povolenie pristupovania aplikácie  na internet zapíše sa do mainifestu. Laicky povedané, triedy ktoré sa nachádzajú v manifeste netreba vytvárať pretože ich konštruktor je volaný zapnutím aplikácie – tým že sa prejde manifest.

 

Hello world

 

Vráťme sa teraz do zložky layout ktorá obsahuje main.xml. Keďže toto xml nám bude tvoriť grafickú stránku obrazovky pre aktivity LoginAppActivity.java premenujeme si ho a to tak, že naň pravým klikneme a vyberieme Refaktor > Rename a zadáme názov layout1_login. Odporúčam naučiť sa rovno skratku Alt+Shift+R.

 

Otvorme si Activity1_login v zložke src. Môžeme vidieť, že naša trieda rozširuje triedu Activity. Aktivita má rôzne životné fázy viď obrázok dole. Po naštartovaní aktivity sa zavolá metóda onCreate a nadstaví sa obsah obrazovky setContentView  na náš layout ktorý si vytvoríme. My sme premenovali layout main na layout1_login preto teraz musíme premenovať:

 

        setContentView(R.layout.layout1_login);

 

 

 

 



 

Teraz môžeme vyskúšať, či naša aplikácia beží. Ak máme k dispozícii mobil treba ho prepnúť do USB debug módu Settings>Applications>Development>USB Debugging. Pokiaľ mobil nemáme treba si stiahnuť a nainštalovať Android Emulator, no treba počítať s tým že je pomalší.

Teraz už stačí len stlačiť zelenú šípku, alebo ctrl+F11, alebo vybrať Run>Run. Pokiaľ sú problémy treba čítať v konzole prípadne v LogCat, ktoré zapneme Window>Show view>Console/LogCat

Teraz si ideme upraviť náš layout tak aby tam nebolo len Hello world.

 

 

Layout

 

Pri vytváraní layout je užitočné mať zapnuté Window>Show view>Outline. V ňom môžeme hierarchicky pristupovať ku komponentom layoutu. Poklikaním na komponent sa dostávame do okna Properties v ktorom sa zmena priamo odzrkadlí do layout_login.xml. Teda je možné meniť atribúty cez Properties window alebo v xml layoutu.

 

Teraz vytvoríme v zložke values nové xml. Klikneme pravým na values a vyberieme new>other>Android>Android XML Values File.

 

FARBY

Otvoríme súbor. Pokiaľ sa nám neotvoril v režime že vidíme Resources Elements klikneme naň pravým vyberieme Open with>Android Common XML Editor. Dole máme možnosť otvoriť ho ako color.xml alebo Resources. V režime Resources klikneme na Add a vyberieme Color. Do name napíšeme color_green_bh a do Value RGB hodnotu začínajúcu mriežkou #A2CC50 našej farby. Rovnako pridáme ešte dve farby tak aby po prepnutí do módu color.xml (lavo dole) vyzerali položky nasledovne:

 

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

<resources>

    <color name="color_EditText">#D6E8A6</color>

<color name="color_green_bg">#A2CC50</color>

<color name="color_button">#009140</color>

</resources>

 

TVARY

Pre ukážku si pripravíme tvar pre naše budúce tlačidlo. Aby nebolo hranaté, vytvoríme zaoblenie + farbu tlačidla. V zložke res>drawable vytvoríme shape_button.xml a nakopírujeme:

 

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

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:padding="10dp"

    android:shape="rectangle" >

    <solid android:color="@color/color_button" />      

    <corners

        android:bottomLeftRadius="3dp"

        android:bottomRightRadius="3dp"

        android:topLeftRadius="3dp"

        android:topRightRadius="3dp" />

</shape>

 

Môžeme si všimnúť že sme použili našu farbu a riadky s Radius zaobľujú rohy tlačidla.

Rovnako vytvoríme ešte jeden shape_editText.xml len v ňom použijeme farbu color_EditText.

 

Teraz si otvoríme náš layout v grafickom móde. V okne Outline vymažeme TextView,  nájdeme LinearLayout, a dvojklikom sa dostaneme na jeho Properties. Tam nájdeme Background klikneme na jeho prázdnu hodnotu (objavia sa bodky) a otvoríme možnosti. V okne Reference Chooser rozbalíme Color a označíme color_green_bg. OK.

 

Pokiaľ máme zapnutý grafický mód na ľavej strane máme paletu s komponentmi.  Do layout ktorý už máme vyfarbený na zeleno postupne pridáme jeden pre obrázok, jeden pre EditBoxy kam užívateľ napíše meno a heslo a jeden pre tlačidlo. Komponenty popridávame tak, že ich označíme v palete a pretiahneme na grafickú plochu.

 

Aby sme mohli obrázok dole pridať, musíme ho najskôr nakopírovať do drawable-hdpi. Uložíme ho pod názvom login.jpg.

 

 

Výsledný layout1_login.xml  má mať tvar:

 

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:background="@color/color_green_bg"

    android:orientation="vertical" >

 

    <LinearLayout

        android:id="@+id/layout_image"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:gravity="center"

        android:orientation="vertical" >

 

 

        <ImageView

            android:id="@+id/imageView1"

            android:layout_width="178dp"

            android:layout_height="168dp"

            android:layout_marginBottom="20dp"

            android:layout_marginTop="20dp"

            android:src="@drawable/login" />

    </LinearLayout>

 

    <LinearLayout

        android:id="@+id/layout_edit_box"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:orientation="vertical" >

 

        <EditText

            android:id="@+id/editText1"

            android:layout_width="fill_parent"

            android:layout_height="40dp"

            android:layout_marginBottom="10dp"

            android:layout_marginLeft="20dp"

            android:layout_marginRight="20dp"

            android:layout_marginTop="20dp"

            android:background="@drawable/shape_edit_text"

            android:gravity="center"

            android:hint="@string/Meno"

            android:inputType="textPersonName"

            android:textSize="28dp" >

        </EditText>

 

        <EditText

            android:id="@+id/editText2"

            android:layout_width="fill_parent"

            android:layout_height="40dp"

            android:layout_marginBottom="20dp"

            android:layout_marginLeft="20dp"

            android:layout_marginRight="20dp"

            android:layout_marginTop="5dp"

            android:background="@drawable/shape_edit_text"

            android:gravity="center"

            android:hint="@string/Heslo"

            android:inputType="textPassword"

            android:textSize="28dp" >

        </EditText>

    </LinearLayout>

 

    <LinearLayout

        android:id="@+id/layout_button"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:gravity="center"

        android:orientation="vertical" >

 

        <Button

            android:id="@+id/button1"

            android:layout_width="fill_parent"

            android:layout_height="50dp"

            android:layout_marginBottom="20dp"

            android:layout_marginLeft="20dp"

            android:layout_marginRight="20dp"

            android:layout_marginTop="20dp"

            android:background="@drawable/shape_button"

            android:hint="@string/Meno"

            android:onClick="LoginClick"

            android:text="@string/Login"

            android:textSize="22dp" />

    </LinearLayout>

 

</LinearLayout>

Activity1_login.java

Teraz naprogramujeme aby sa po kliknutí na tlačidlo login odoslali údaje na server a jeho odpoveď sa zobrazila.

V našom balíku vytvoríme novú triedu a to tak že klikneme pravým na balík universal.login.sk new>class  nazveme ho HttpRequest. Doňho nakopírujeme:

========================================================================

 

package univerzal.login.sk;

 

import java.io.BufferedInputStream;

import java.io.BufferedReader;

import java.io.DataOutputStream;

import java.io.IOException;

import java.io.InputStream;

import java.io.InputStreamReader;

import java.net.HttpURLConnection;

import java.net.MalformedURLException;

import java.net.ProtocolException;

import java.net.SocketTimeoutException;

import java.net.URL;

import java.util.ArrayList;

 

public class HttpRequest{

        public static final String GET = "GET";

        public static final String POST = "POST";

       

        private String method;

        private String url;

        private ArrayList<NameValuePair> params;

        private InputStream in;

        private int httpCode;

        private int length;

        private HttpURLConnection con;

       

        private class NameValuePair{

                String name;

                String value;

               

                NameValuePair (String name, String value){

                        this.name = name;

                        this.value = value;

                }

        }

       

        public HttpRequest (String url, String method){

                this.url = url;

                this.method = method;

                params = new ArrayList<NameValuePair> ();

                httpCode = -1;

                length = -1;

        }

 

        public HttpRequest setUrl (String url){

                this.url = url;

                return this;

        }

       

        public String getUrl (){

                return url;

        }

       

        public HttpRequest setMethod (String method){

                this.method = method;

                return this;

        }

 

        public String getMethod (){

                return method;

        }

       

        public HttpRequest addParameter (String name, Object value){

                params.add (new NameValuePair (name, value.toString ()));

                return this;

        }

 

        public HttpRequest addParameters (String[] names, Object[] values){

                int len = names.length;

                if (len == values.length){

                        for (int i=0; i<len; i++){

                                addParameter (names[i], values[i]);

                        }

                }

                return this;

        }

 

        public HttpRequest replaceParameter (String name, Object value){

                int len = params.size ();

                NameValuePair pair;

                for (int i=0; i<len; i++){

                        pair = params.get (i);

                        if (pair.name.equals (name)){

                                pair.value = value.toString ();

                                break;

                        }

                }

                return this;

        }

 

        public HttpRequest clearParameters (){

                params.clear ();

                return this;

        }

       

        public void send () throws MalformedURLException, SocketTimeoutException, ProtocolException, IOException{

                int len = params.size ();

                URL oldUrl = new URL (url);

               

                NameValuePair pair;

                String query = "";

                for (int i=0; i<len; i++){

                        pair = params.get (i);

                        query += pair.name + "=" + pair.value;

                        if (i != len – 1) query += "&";

                }

               

                //Desconecto una posible peticion anterior

                if (con != null) con.disconnect ();

               

                in = null;

                httpCode = -1;

                length = -1;

               

                String file = oldUrl.getFile ();

               

                if (method.equals (GET)) file += "?" + query;

               

                URL u = new URL (oldUrl.getProtocol (), oldUrl.getHost (), oldUrl.getPort (), file);

                con = (HttpURLConnection)u.openConnection ();

                con.setRequestMethod (method);

                con.setDoInput (true);

                if (method.equals (POST)){

                        con.setDoOutput (true);

                        DataOutputStream out = new DataOutputStream (con.getOutputStream ());

                        out.writeBytes (query);

                        out.flush ();

                        out.close ();

                }

                in = new BufferedInputStream (con.getInputStream ());

                httpCode = con.getResponseCode ();

                if (httpCode != 200){

                        in.close ();

                        in = null;

                }

                length = con.getContentLength ();

        }

       

        public void disconnect (){

                if (con != null){

                        con.disconnect ();

                        con = null;

                }

        }

       

        public String getResponseAsString () throws IOException{

                if (in != null){

                        StringBuilder builder = new StringBuilder();

                        String line;

                        try{

                                BufferedReader reader = new BufferedReader (new InputStreamReader (in, "UTF-8"));

                                while ((line = reader.readLine ()) != null) {

                                        builder.append (line);

                                }

                        }finally{

                                in.close ();

                        }

                       

                        return builder.toString ();

                }

               

                return null;

        }

 

        public InputStream getResponseAsStream (){

                return in;

        }

 

        public int getResponseCode (){

                return httpCode;

        }

 

        public int getContentLength (){

                return length;

        }

}

 

Keďže naša aplikácia potrebuje pristupovať na internet musíme jej toto povolenie dať tým že ho pridáme do manifestu.

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

Teraz môžeme dorobiť celú Activity1_login. V layout1_login sme v atribútoch login tlačidla pridali že na akciu onClick sa vyvolá metóda LoginClick.

package univerzal.login.sk;

 

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

import android.widget.EditText;

import android.widget.Toast;

 

public class Activity1_login extends Activity {

     

      private HttpRequest requestReg;

     

      private EditText editText1;

      private EditText editText2;

     

      private Button b1Login;     

      private Button b2Sign;

    /** Called when the activity is first created. */

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.layout1_login);

  

        requestReg = new HttpRequest("http://192.168.1.10/loginapp/signup.php", HttpRequest.POST);

 

        editText1 = (EditText)findViewById(R.id.editText1_name);      

        editText2 = (EditText)findViewById(R.id.editText2_password);

       

        b1Login = (Button) findViewById(R.id.bt_login);

       

    }   

    public void LoginClick(View v)

    {

      String vysledok;

      requestReg.addParameter("email",editText1.getText().toString());

            requestReg.addParameter("pass",editText2.getText().toString());

            //odosle sa email alebo meno a heslo na stranku; 

            try

            {

            requestReg.send();

            vysledok = requestReg.getResponseAsString();

            }

            catch (Exception e) {vysledok = e.toString();}

     

            Toast.makeText(getApplicationContext(), vysledok, 2000).show();

    }

}

 

Nakoniec musíme ešte nainštalovať wampServer a vytvoriť si projekt loginApp s jednoduchou databázou zloženou z jednej tabuľky s atribútmi email a pass. Do zložky wampServera www nakopírujeme skript signup.php s obsahom:

<?php

if (isset($_POST[’email’]) && isset($_POST[‘pass’]))

{

      $con = mysql_connect("localhost","root","");

      if ($con)

      {

            mysql_select_db("levelapp",$con);

            $query = "insert into parent values(\"".$_POST[’email’]."\",\"".$_POST[‘pass’]."\")";

            /*echo $query;*/       

            mysql_query($query,$con);

            mysql_close();

            echo "Uspesne ulozene na server";

            exit;

      } else {

            echo "stala sa chyba";

      }

}

?>

 

<form action="signup.php" method= "post">

      <input type="text" name="email" value="email" />

      <input type="password" name="pass" />

      <input type="submit" />

</form>



 

Týmto sme urobili všetko potrebné pre beh aplikácie.

Okrem ukázania výsledku v mobile, môžeme skontrolovať pridanie záznamu do databázy priamo v projekte na servery.

 

 

                            

 

 

Rate this post

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The reCAPTCHA verification period has expired. Please reload the page.