Programar en Android sin acabar siendo un mono que teclea (VI): Creación de base de datos online e implementación de ListView

1

Con más retraso del esperado, retomo con éste, la serie de artículos sobre Programación en Android. Para los nuevos, recordaré de qué va esto. La idea es que gente con negocios propios que quiera entrar al mundo de Android, se atreva a crear, ellos mismos, sus propias Apps nativas. Para ello, estamos creando una aplicación para una tienda, que me permite enseñar muchos elementos que son útiles para cualquier aplicación.

Muchos de vosotros me habéis pedido, poder usar bases de datos online para la app, cosa que complicaría bastante los tutoriales. Para ello tendría que usar bases de datos MySQL, archivos php, etc. Sin embargo, existen herramientas, como PARSE, que nos permiten (con ciertas limitaciones) poder conectar nuestra App a Internet para obtener datos, de una forma mucho más sencilla. Este será el aspecto de nuestra App al terminar este artículo

 

2013-10-09_161322

 

Por lo tanto, empezaremos el tutorial registrándonos en Parse No creo que sea necesario explicar los pasos del registro, si hay algún problema podéis preguntarme. Tras el registro, pincharemos en Access Dashboard

 

0.1

 

 

A continuación arriba a la izquierda, pincharemos sobre Select an App, y posteriormente a Create app. La llamaremos MiTiendaAndroid  y tras crearla nos aparecerá una pantalla así.

 

1.5

 

 

Allí pincharemos en Quickstart Guide y elegiremos aplicación de android nativa, en  proyecto existente.

 

2

 

 

Más abajo nos aparecerán las instrucciones para añadir PARSE a nuestro proyecto. Pincharemos para descargar el sdk.

 

2.5

 

 

Se nos descargará un zip del que extraeremos el archivo .jar dentro de la carpeta libs de nuestro proyecto.

En Eclipse, pulsaremos con el botón derecho en el proyecto, y a continuación, en Build path, y en Configure Build Path. Dejaremos la configuración que os muestro a continuación.

 

2.6

 

3

 

Tal como dice en esa misma página añadiremos el código para iniciar Parse a nuestra MainActivity, quedando ésta así.

 

package com.example.mitiendaandroid;

import android.os.Bundle;
import com.parse.Parse;
import com.parse.ParseAnalytics;
import com.parse.ParseObject;
 
import android.view.Display;
import android.view.View;
import android.widget.Toast;

import com.actionbarsherlock.app.SherlockActivity;
import com.actionbarsherlock.view.Menu;
import com.actionbarsherlock.view.MenuInflater;
import com.actionbarsherlock.view.MenuItem;
import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;





public  class MainActivity extends ActividadBase {

	SlidingMenu menu;
	
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
	
		 Parse.initialize(this, "Aquí vuestros datos", "Aquí vuestros datos"); 
		 ParseAnalytics.trackAppOpened(getIntent());
		
	
		
	    
	    getSupportActionBar().setDisplayHomeAsUpEnabled(true); 
  
	}
	 @Override
	    protected int getLayoutResourceId() {
	        return R.layout.activity_main;
	    }
	
	
	
	
}

 

Si nos muestra error pulsaremos Ctrl+Shift+O para importar las librerías necesarias.

Añadiremos también, en el AndroidManifest, los siguientes permisos, antes de la etiqueta <aplication>.
 


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

 

En el paso 4 de esa misma página veréis una forma rápida de comprobar que la librería se ha añadido con éxito al proyecto.

Tras esto, pincharemos en el icono con nuestro nombre, arriba a la derecha, y posteriormente en la App que acabamos de crear. Abriremos la pestaña de Data Browser, y pincharemos en New Class. La llamaremos Ofertas.

4

Después, crearemos dentro de ella una nueva columna del tipo String llamada Oferta. Para ello pincharemos en + Col.

5

 

Ahora, pasaremos a crear el layout de nuestra actividad de Ofertas, con el nombre ofertas.xml Para ello pondremos este código.

 

    <ListView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/@android:id/list"
        android:layout_width="wrap_content"
        android:layout_height="match_parent" >

    </ListView>


 
Este layout simplemente contendrá una listView, uno de los elementos más importantes de Android, y cuyo uso no es tan sencillo como el de otros. A continuación veremos, cómo manejar su funcionamiento.

Para empezar, crearemos el layout de cada elemento de la lista. Lo llamaremos listaofertas.xml y contendrá este código.
 

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true" >

    <com.example.mitiendaandroid.NowLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
     
        android:orientation="vertical" >

        <RelativeLayout
            style="@style/nowCardStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/TextView08"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignTop="@+id/ImageView03"
                android:layout_marginLeft="28dp"
                android:layout_marginTop="20dp"
                android:layout_toRightOf="@+id/ImageView03"
                android:text="¡¡Oferta!!"
                android:textColor="#240B3B"
                android:textSize="20sp"
                android:textStyle="bold" />

            <TextView
                android:id="@android:id/text1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/TextView08"
                android:layout_below="@+id/TextView08"
                android:layout_marginBottom="10dp"
                android:layout_marginRight="20dp"
                android:layout_marginTop="10dp"
                android:text="Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh."
                android:textColor="#585858"
                android:textSize="18sp"
                android:textStyle="bold" />

            <ImageView
                android:id="@+id/ImageView03"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true"
                android:layout_marginLeft="50dp"
                android:src="@drawable/destacado" />

        </RelativeLayout></com.example.mitiendaandroid.NowLayout>

    

</ScrollView>

 
Para los que utilicéis este método para otras apps, decir que es imprescindible que el textview que se va a modificar en la lista, tenga de id: “@android:id/text1″  De lo contrario, este método no nos funcionará correctamente.

Tras hacer esto, creamos el adaptador de la lista. Para ello creamos una actividad con el nombre Adaptador, y este código.
 

package com.example.mitiendaandroid;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

public class Adaptador extends BaseAdapter {

    Context context;
    String[] data;
    private static LayoutInflater inflater = null;

    public Adaptador(Context context, String[] data) {
        // TODO Auto-generated constructor stub
        this.context = context;
        this.data = data;
        inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return data.length;
    }

    @Override
    public Object getItem(int position) {
        // TODO Auto-generated method stub
        return data[position];
    }

    @Override
    public long getItemId(int position) {
        // TODO Auto-generated method stub
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        View vi = convertView;
        if (vi == null)
            vi = inflater.inflate(R.layout.listaofertas, null);
        TextView text = (TextView) vi.findViewById(android.R.id.text1);
        text.setText(data[position]);
        return vi;
    }
}

 

No me pararé a explicarlo para no complicar la cosa. Simplemente diré que los Adaptadores son necesarios para crear Listviews, GridViews o Spinners en Android. Y éste es un adaptador básico, que permite hacer listviews con un textView que cambia en cada fila, y un layout personalizado.

Por último, creamos la Actividad “Ofertas” que tendrá este código.
 

package com.example.mitiendaandroid;
 
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

import com.actionbarsherlock.app.SherlockActivity;
import com.actionbarsherlock.app.SherlockListActivity;
import com.actionbarsherlock.view.Menu;
import com.actionbarsherlock.view.MenuInflater;
import com.actionbarsherlock.view.MenuItem;
import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;
import com.parse.FindCallback;
import com.parse.ParseException;
import com.parse.ParseObject;
import com.parse.ParseQuery;




import android.app.Activity;
import android.app.ProgressDialog;
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;
import android.view.Display;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

public class Ofertas extends SherlockActivity  {
	
	SlidingMenu menu;
	ListView listview;
	private static String[] fila = new String[60];
	private static int a=0;
	
	
	
	    @Override
	    protected void onCreate(Bundle savedInstanceState) {
	        super.onCreate(savedInstanceState);
	        setContentView(R.layout.ofertas);
	        
	   
	      a=0;
	      
	        listview = (ListView) findViewById(android.R.id.list);
	       
	        
	    	
			 final ProgressDialog DialogCargando = new ProgressDialog(Ofertas.this);
				DialogCargando.setMessage("Cargando ofertas. Por favor espere. ");
				DialogCargando.show();
			 ParseQuery<ParseObject> query2 = ParseQuery.getQuery("Ofertas");
			 query2.orderByDescending("createdAt");
		       
			query2.findInBackground(new FindCallback<ParseObject>() {
			    public void done(List<ParseObject> ofertas, ParseException e) {
			    	
		        	DialogCargando.dismiss();
		        
		        	if (e == null) {
		        		
		        	   
		        	  
		        	for (int i=0; i<ofertas.size(); i++){
		        		
		        	fila[i]=ofertas.get(i).get("Oferta").toString();
		        	    
		     	        a++;
		     	        Log.e("Dentro del for", ofertas.get(i).get("Oferta").toString());
		    	        
		     	      
		        	}
		        	String[] b = Arrays.copyOf(fila, a);
		        	
		        	 listview.setAdapter(new Adaptador(Ofertas.this, b));
		        
			
		       
		            
		        	 
		       }
		        	
		        
		            
		            else {
		    	   DialogCargando.dismiss();
		            Toast.makeText(getApplicationContext(), "Error",
		           Toast.LENGTH_LONG).show();
		           } 
		           } 
		       });
	 

           
			
	        
	        Display display = getWindowManager().getDefaultDisplay();
	    	@SuppressWarnings("deprecation")
	    	int width = display.getWidth();
	    	
	    	

	        

			menu = new SlidingMenu(this);
			    menu.setMode(SlidingMenu.LEFT);
			    menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);
			   
			    menu.setShadowWidth(20);
			    menu.setBehindOffset(30);
			    menu.setFadeDegree(0.25f);
			    menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);
			    menu.setBehindWidth(width-60);
			    menu.setMenu(R.layout.menulateral);
			
		    
		    getSupportActionBar().setDisplayHomeAsUpEnabled(true); 
		
	        
	    }
	 
		@Override
	    public boolean onCreateOptionsMenu(Menu menu) {
	        MenuInflater inflater = getSupportMenuInflater();
	        inflater.inflate(R.menu.main, menu);
	        return true;
	    }
		@Override
		public boolean onOptionsItemSelected(MenuItem item) 
		{    
		   switch (item.getItemId()) 
		   {        
		      case android.R.id.home:            
		    	  if(!menu.isMenuShowing()){menu.toggle();
		    	  getSupportActionBar().setDisplayHomeAsUpEnabled(false);
		    	  
				  }
				else {menu.toggle();
				  getSupportActionBar().setDisplayHomeAsUpEnabled(true); 
				}
				     
		      default:            
		         return super.onOptionsItemSelected(item);    
		   }

		
		}
		
		
		
		@Override
		public void onBackPressed() {
			if(menu.isMenuShowing()){menu.toggle();
			 getSupportActionBar().setDisplayHomeAsUpEnabled(true);
			  }
			else {
				
				finish();
				
				
			}
			
			
			
			
			}
			
		public ArrayList<String> populate(){
			 ArrayList<String> items = new ArrayList<String>();

	            Log.d("en populate", fila[0]);
			for (int i=0; i<2; i++){
			items.add(fila[0]);}
			  return items;
		}
		
		
		
		
		
		public void Inicio (View view){
			Intent i = new Intent(this, MainActivity.class );
	       finish();
			startActivity(i);
		}
		
		public void Ofertas (View view){
			
		}
		
		public void Productos (View view){
			Intent i = new Intent(this, Productos.class );
			finish();
	        startActivity(i);
		}
		
		public void Contacto (View view){
			Intent i = new Intent(this, Contacto.class );
			finish();
	        startActivity(i);
		}

		
		
}


 
(Que no se os olvide declararla en el Android Manifest como hicimos con las otras). Esta vez no extenderemos de la Actividad Base, por lo que habrá que implementar todos los métodos para el menú, botón atrás, etc.

 

Vamos a analizar esta parte del código.
 

final ProgressDialog DialogCargando = new ProgressDialog(Ofertas.this);
DialogCargando.setMessage("Cargando ofertas. Por favor espere. ");
DialogCargando.show();
ParseQuery&lt;ParseObject&gt; query2 = ParseQuery.getQuery("Ofertas");
query2.orderByDescending("createdAt");

query2.findInBackground(new FindCallback&lt;ParseObject&gt;() {
public void done(List&lt;ParseObject&gt; categories, ParseException e) {

DialogCargando.dismiss();

if (e == null) {



for (int i=0; i&lt;categories.size(); i++){

fila[i]=categories.get(i).get("Oferta").toString();

a++;
Log.e("Dentro del for", categories.get(i).get("Oferta").toString());


}
String[] b = Arrays.copyOf(fila, a);

listview.setAdapter(new Adaptador(Ofertas.this, b));





}



else {
DialogCargando.dismiss();
Toast.makeText(getApplicationContext(), "Error",
Toast.LENGTH_LONG).show();
}
}
});

 
Para empezar se crea un diálogo. Esto es la pequeña ventana que se nos abrirá con el mensaje de que se están cargando las ofertas.

Tras esto, se configura la llamada a la base de datos, diciendo qué tabla queremos y cómo la queremos ordenar. (Por orden de fecha descendente en este caso). En las siguientes líneas, se hace la llamada a la base de datos, la cual devuelve un objeto llamado ofertas. Este objeto contiene todos los elementos de la tabla que hemos elegido.

Tras esto, pasamos cada elemento uno a uno, al array (un array es una variable que puede contener varios datos). Y luego copiamos el contenido en otro segundo array, para que no queden huecos libres en el primero. Sólo quedaría para terminar, añadir este array al adapter, en la línea siguiente.

 
Como siempre, agradecer a los que me habéis leído y recordaos que podéis preguntar cualquier duda que tengáis en los comentarios o en unmonoqueteclea.es Además, en esa misma web, podréis pedir presupuesto para la creación de las Apps que queráis.
 

Share.

About Author

Mi nombre es Pablo González Carrizo, aunque mi seudónimo en este mundo sea Un mono que teclea. Mis estudios de Imagen y Sonido en Telecomunicaciones me permiten estar informado de todas las novedades en tecnología, que intento siempre compartir.

1 comentario

  1. Bueno Dias Pablo, me ha interesado crear esta Aplicacion , pero los articulos anteriores y errore y demas, me ha enredado mucho. porias explicarme todos los pasos anteriores para poder seguir con este? la verdad baje el codigo fuente y reinstale eclipse. e instale el proyecto. pero veo que dentro del proyecto no incluye el action bat y el diseño del menu lateral. como debo hacer para agregar eso y las modificaciones que se le debe hacer para usarla como aplicacion base y de ahi aprender mas a como actualizar las cosas y mas

Leave A Reply

Uso de cookies

Este sitio web utiliza cookies para una mejor experiencia de usuario. Si continúas navegando estás dando tu consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

CERRAR