Tutorial: Nuestro sitio en una aplicación Android 3

  • Autor Autor Cicklow
  • Fecha de inicio Fecha de inicio
Cicklow

Cicklow

Admin
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Bueno viendo que el tutorial anterior (Nuestro sitio en una aplicación Android 2) ya no es funcional la parte de AdMob (Ya que se tiene que utilizar un código nuevo), he creado este nuevo tutorial.

Paso 1 - Instalar el SDK de Android:
Download Android Studio and SDK Tools | Android Developers

Paso 2 - Instalar Eclipse Mars
Eclipse IDE for Java EE Developers | Packages
(Seleccionan su SO y descargan e instalan Eclipse!)

Paso 3 - Instalar ADT (Permite a eclipse crear apps android y firmarlas)
Installing the Eclipse Plugin | Android Developers

Paso 4 - Comenzamos
Una ves que tengan todo instalado, abren Eclipse, y van a File->New->Project->Android Application Project (Al importar el proyecto seria: File->New->Project->Android Project from Existing Code)
1-3e14356.jpg

Colocamos:
- Nombre de nuestra aplicación
- Nombre del proyecto (se completa solo)
- Nombre del paquete. Esto es importante al crear apps, que no repitan nunca el mismo nombre de paquete. Sino si se trata de instalar una apps con un mismo nombre de paquete, que el cual ya existe en el celular, traerá problemas. Yo uso: com.cicklow.nombredelaapps
- Requerimientos minimos: API 8
- Destino del SDK: API 21
- Compilar usando: API 22
- Diseño: Holo....

Al darle en Next, veremos otra ventana, le damos Next de nuevo. En la 3 ventana podremos seleccionar el icono para nuestra apps. En la 4 ventana seleccionaremos Blank Activity, en la 5 ventana le damos finalizar y esperamos un momento a que eclipse cree nuestro proyecto.

Paso 5 - Agregar el SDK de AdMOB
https://developers.google.com/admob/android/eclipse

Paso 6 - Editar detalles del proyecto
Para que admob funcione y tambien el webview en nuestra aplicación, tendremos que agregar unos permisos y detalles en el archivo AndroidManifiest.xml
HTML:
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
Esto permite a la apps acceder al estado de la red y acceder a internet.

Antes de </aplication>
HTML:
<meta-data
            android:name="com.google.android.gms.version"
            android:value="@integer/google_play_services_version" />
<activity
            android:name="com.google.android.gms.ads.AdActivity"
            android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize"
            android:theme="@android:style/Theme.Translucent" />

Paso 7 - Editar el diseño
Vamos a: res->layout->activity_main.xml y colocamos:
HTML:
<FrameLayout 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"
    tools:context="com.cicklow.webview.MainActivity"
    android:id="@+id/RelConte" >
    
    <RelativeLayout
        android:id="@+id/RelConte2"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    <WebView
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" />

    <ProgressBar
        android:id="@+id/progressBar1"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true" />

	</RelativeLayout>
	
</FrameLayout>
Como ven solo hemos agregado una barra de progreso y un webview! es bien simple el ejemplo este.

Paso 9 - Editar código JAVA
Tenemos que editar src->com.cicklow.webview->MainActivity.java
Importamos las librerías necesarias a usar
PHP:
import com.google.android.gms.ads.AdListener;
import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.AdSize;
import com.google.android.gms.ads.AdView;
import com.google.android.gms.ads.InterstitialAd;

import android.app.Activity;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.FrameLayout;
import android.widget.ProgressBar;
import android.widget.RelativeLayout;

Dentro de nuestra actividad declararemos unas variables a usar:
PHP:
	//Declarar variables
	WebView web;
    ProgressBar progressBar;
    private AdView adView;
    InterstitialAd mInterstitialAd;

Dentro del evento onCreate colocaremos las llamadas de la publicidad y cargar nuestro sitio web.
PHP:
        //Cargar ADS
		if(getResources().getString(R.string.idADS).length() > 0){
			// Crear adView.
			adView = new AdView(this);
			adView.setAdUnitId(getResources().getString(R.string.idADS));
			adView.setAdSize(AdSize.SMART_BANNER);

			adView.setAdListener(new AdListener() {
				// Implement AdListener
			  [MENTION=42437]over[/MENTION]ride
				public void onAdLoaded() {
					RelativeLayout SView = (RelativeLayout)findViewById(R.id.RelConte2);
					FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) SView.getLayoutParams();
					layoutParams.setMargins(0, adView.getHeight() + 10, 0, 0);
					SView.setLayoutParams(layoutParams);
				}
			});
	    
			FrameLayout layout = (FrameLayout)findViewById(R.id.RelConte);
			FrameLayout.LayoutParams adsParams =new FrameLayout.LayoutParams(-1, FrameLayout.LayoutParams.WRAP_CONTENT, android.view.Gravity.TOP|android.view.Gravity.CENTER_HORIZONTAL); 

			layout.addView(adView, adsParams);

			// Iniciar una solicitud genérica.
			AdRequest adRequest = new AdRequest.Builder().addTestDevice(AdRequest.DEVICE_ID_EMULATOR).build();

			// Cargar adView con la solicitud de anuncio.
			adView.loadAd(adRequest);
		}

Veamos, lo que hacemos acá es cargar la publicidad (banner) y ver si realmente cargo la publicidad re-dimensionamos el webview para colocar la publicidad arriba, y sino cargo la publicidad no hacemos nada... Esto se hace para que la publicidad que estamos cargando no tape el contenido del webview.

Ahora cargaremos un banner intestitial en espera (lo que hacemos es cargarlo y luego mas adelante lo mostraremos)
PHP:
		if(getResources().getString(R.string.idADS2).length() > 0){
			mInterstitialAd = new InterstitialAd(this);
			mInterstitialAd.setAdUnitId(getResources().getString(R.string.idADS2));
			requestNewInterstitial();
        
			mInterstitialAd.setAdListener(new AdListener() {
			  [MENTION=42437]over[/MENTION]ride
				public void onAdClosed() {
					//Si se cierra la publicidad, pedir una nueva (para no mostrar lo mismo)
					requestNewInterstitial();
				}
			});
		}

Obtenemos los objetos en pantalla y colocamos nuestra url a mostrar en el webview:
PHP:
        web = (WebView) findViewById(R.id.webView1);
        progressBar = (ProgressBar) findViewById(R.id.progressBar1);
        progressBar.setMax(100);
        
        web.setWebViewClient(new myWebClient());
        web.getSettings().setJavaScriptEnabled(true);
        //Sitio web a cargar
        web.loadUrl("http://www.google.com.ar/");

(Hay algun otro code, que no viene al caso explicarlo aca, smplemente se encarga de sacar la barra de progreso de la pantalla...)

El interstitial banner se carga en el momento que nuestro sitio termino de cargar.


Paso 10 - Testear todo nuestro proyecto
Para esto necesitaremos crear un emulador de android. Vamos a: Windows->Android Virtual Device Manager-> New
4-3e14540.jpg


Una ves creado nuestro emulador, solo le damos clic al boton play verde y si nos pregunta que tipo de proyecto es, le decimos que es un proyecto de android.
Veremos algo como esto:
sin-t-tulo-1-4c1fc4d.jpg
En pasos simples seria asi:
1- La aplicación carga en pantalla completa, mostrando una barra de progreso
2- Cuando el sitio web termino de cargar, aparece un baner interstitial
3- Y también cargo en la parte superior un banner


Paso 11 - Compilar nuestro proyecto
Para compilar nuestro proyecto a un APK, solo le damos boton derecho arriba de la carpeta de nuestro proyecto: Android Tools->Export signed apps android->Next

La 1° ves que vamos a firmar una apps, tendremos que crear un certificado. Completamos los datos, creamos uno y continuamos. Una ves que se completo la creación y el firmado de nuestra apps, ya la podremos usar en nuestro celular, tablets o colocarla en Google Play

El certificado creado jamas lo borren, ya que de lo contrario no podrán subir actualizaciones en Google Play

Actualizado 21/10/2015
* Se agrego una función en java la cual permite aceptar descargas desde el webview, ya que no estaba funcionando, si alguien colocaba un sitio de descargas, no podian descargar los archivos. Ahora si.
* Se agrego la opción sin publicidad, la cual permite dejarlo sin publicidad o agregar otra publicidad de su agrado.

Descargar:
Insertar CODE, HTML o PHP:
http://depositfiles.com/files/t1undomgf

Saludos! :encouragement:
 
Última edición:
Guardado en favoritos para leer luego se agradece el aporte :encouragement:
 
:greedy_dollars: Acabas de dejar sin trbajo a mi contacto en fiveer que me vendia apps asi a 5 dolares. ahora yo mismo lo hare. Gracias!
 
:greedy_dollars: Acabas de dejar sin trbajo a mi contacto en fiveer que me vendia apps asi a 5 dolares. ahora yo mismo lo hare. Gracias!

La aplicación esta es muy simple, he visto apps mas logradas y mejor, pero sin cargar demasiado la apps, tiene lo necesario: Publicidad + Nuestro sitio... en codecanion hay muchos webview los cuales los usuarios de fiverr revenden 😉
 
Se ve bueno el tutorial, en un rato libre lo veo completo.

Creo que esto será lo primero que haré de todos los tutoriales que he visto en el foro 😀
 
[MENTION=9679]cicklow[/MENTION] A favoritos, gracias Cicklow 😛7:
 
Gracias por el tutorial :welcoming: esperamos el proximo antiadblock [MENTION=9679]cicklow[/MENTION]
 
A favoritos Cicklow, sacandole trabajo a la gente en medio de la desocupación, eso no se hace :witless:. Golpeame y decíme cómplice 😛4: jajaj, estoy con sueño, perdón que divague tanto.
 
Gracias por la info

Saludos :encouragement:
 
Muy buen aporte :encouragement:
 
a favoritos 😛 muchas gracias por compartir 🙂
 
duda, en un sitio de mp3, tiene popup, es posible evitar que salte? y lo otro la descarga la toma para reproducirla ahi mismo, como fuerzo la descarga?
gracias
 
[MENTION=9679]cicklow[/MENTION] Nose porque no me quiere aceptar la libreria de google play, la importo la agrego y nada me sigue dando el mismo error
PHP:
\WebView\WebView\AndroidManifest.xml:20: error: Error: No resource found that matches the given name (at 'value' with value '@integer/google_play_services_version')
 
[MENTION=9679]cicklow[/MENTION] Nose porque no me quiere aceptar la libreria de google play, la importo la agrego y nada me sigue dando el mismo error
PHP:
\WebView\WebView\AndroidManifest.xml:20: error: Error: No resource found that matches the given name (at 'value' with value '@integer/google_play_services_version')

la agregaste al proyecto?... es raro (me ha pasado tmb, pero es porque no esta agregada la libreria)
seguiste bien los pasos? https://developers.google.com/android/guides/setup
 
la agregaste al proyecto?... es raro (me ha pasado tmb, pero es porque no esta agregada la libreria)
seguiste bien los pasos? https://developers.google.com/android/guides/setup

si la agrege al proyecto , lo que no entiendo es esto que me acabas de pasar

PHP:
Create a ProGuard Exception

To prevent ProGuard from stripping away required classes, add the following lines in the /proguard-project.txt file:

-keep class * extends java.util.ListResourceBundle {
    protected Object[][] getContents();
}

-keep public class com.google.android.gms.common.internal.safeparcel.SafeParcelable {
    public static final *** NULL;
}

-keepnames @com.google.android.gms.common.annotation.KeepName class *
-keepclassmembernames class * {
    @com.google.android.gms.common.annotation.KeepName *;
}

-keepnames class * implements android.os.Parcelable {
    public static final ** CREATOR;
}
 
si la agrege al proyecto , lo que no entiendo es esto que me acabas de pasar

PHP:
Create a ProGuard Exception

To prevent ProGuard from stripping away required classes, add the following lines in the /proguard-project.txt file:

-keep class * extends java.util.ListResourceBundle {
    protected Object[][] getContents();
}

-keep public class com.google.android.gms.common.internal.safeparcel.SafeParcelable {
    public static final *** NULL;
}

-keepnames @com.google.android.gms.common.annotation.KeepName class *
-keepclassmembernames class * {
    @com.google.android.gms.common.annotation.KeepName *;
}

-keepnames class * implements android.os.Parcelable {
    public static final ** CREATOR;
}

eso es solo si usas proguard en tu proyecto... pasame teamviwver por pm
 
Problema resuelto, ahora seguir trabajando en el codigo , gracias cicklow
 

Temas similares

Atrás
Arriba