add

¿Cómo crear una aplicación de mi blog de Blogger?


Hacer una App de mi blog de Blogger – Pasos sencillos para crear una aplicación de mi blog - ¿Cómo hacer una aplicación de mi blog de Blogger gratis sin publicidad? Algunas de estas preguntas llegaron a mi cuenta de correo electrónico, para satisfacer a los usuarios de Blogger, voy a explicar en este tutorial, como hacer una aplicación de su blog de Blogger siguiendo unos simples pasos.

Para crear una aplicación de su blog de Blogger deberá seguir las instrucciones tal como lo muestro en este tutorial, y así al final tendrá una aplicación móvil de su blog y compartirla con sus seguidores.

Ventajas:

¿Por qué necesito una App?

Porque te permite llegar a miles de usuarios de manera directa. Se puede utilizar promociones y promover tu cartera de servicios por ejemplo de una manera que da mucho más imagen.

¿Cómo crear una aplicación de mi blog de Blogger?

Primer paso:

Habilite la plantilla móvil de su blog de Blogger, si no sabe cómo, siga las siguientes instrucciones


Segundo paso:

Necesita instalar en su computador de escritorio Android Studio, que es lo esencial para crear aplicaciones, siga las instrucciones de instalación de Android Studio desde los tres siguientes enlaces:


Tercer paso:

Una vez que haya instalado Android Studio y el JDK 8, estará listo para insertar unos códigos en su primer proyecto de Android Studio

Explicación:

Lo que vamos hacer es crear una proyecto “Una aplicacion” en Android Studio, copiaremos unos códigos he insertaremos la direccion URL de nuestro blog de Blogger. Al cargar todo el proyecto en Android Studio este creara su aplicación generando una APK. Esta APK es su aplicación móvil, la cual lo podrá instalar en su Smartphone que utilice sistema Android, como también lo podrá subir a Google Play y distribuir su aplicación gratis.

Al abrir su aplicación en un Smartphone, de inmediato se abrirá, y aparecerá su blog de Blogger dentro de ella, siempre y cuando tenga una plantilla móvil de su blog. Cada vez que usted publique una entrada en su blog, esta de inmediato se actualizara en su aplicación, porque estamos utilizando la dirección URL de su blog de Blogger, con esto sus seguidores verán sus noticias desde la aplicación que usted creo, siempre y cuando hayan instalado su App.

- Se recomienda que tengan una buena plantilla móvil optimizada, para que se muestre un diseño profesional

Si necesitas una Plantilla de Blogger optimizada para móviles, puede dirigirse al siguiente tutorial


- Vamos a utilizar WebView y permisos de Internet dentro de la aplicación para que aparezca la plantilla móvil de su blog

- No es nada complicado

Bueno, luego de esta explicación, usted tendrá una idea más clara de lo que vamos hacer

Empezamos:

Guía paso a paso para crear una aplicación de su blog de Blogger

1 Abrir Android Studio

¿Cómo crear una aplicación de mi blog de Blogger?

2 Un clic en “File” “New”  y “New Project

¿Cómo crear una aplicación de mi blog de Blogger?

3 Le mostrara la siguiente ventana

¿Cómo crear una aplicación de mi blog de Blogger?

4 Cambia donde dice:

Application name: Cámbialo por el nombre que quieras mostrar en tu aplicación
Company Domain: Cámbialo por la dirección URL de su empresa
Package name: Puedes cambiarlo por un nombre diferente

Clic en Next

5 Le mostrara una nueva ventana como la siguiente imagen, en la cual debe escoger “API 16: Android 4.1 (Jelly Bean)” y luego dar un clic en Next

¿Cómo crear una aplicación de mi blog de Blogger?

6 Mostrara la siguiente ventana, en la cual debes escoger “Blank actvity”, después un clic en Next

¿Cómo crear una aplicación de mi blog de Blogger?

7 Le mostrara la siguiente ventana, en la cual solo debe dar un clic en “Finish

¿Cómo crear una aplicación de mi blog de Blogger?

Ahora estará cargando su nuevo proyecto

¿Cómo crear una aplicación de mi blog de Blogger?

8 Tendremos lo siguiente en la parte izquierda, mire la imagen:

¿Cómo crear una aplicación de mi blog de Blogger?

Abra el proyecto tal como lo muestro en la imagen siguiente:

¿Cómo crear una aplicación de mi blog de Blogger?

9 Creamos un nuevo Java class, con el nombre MyAppWebViewClient

Mire la imagen

¿Cómo crear una aplicación de mi blog de Blogger?


10 Dentro de MyAppWebViewClient, nos mostrara lo siguiente, mire la imagen

¿Cómo crear una aplicación de mi blog de Blogger?

Vamos a insertar un código, tal como lo muestro en la siguiente imagen

¿Cómo crear una aplicación de mi blog de Blogger?

Inserta el siguiente código

import android.content.Intent;

  import android.net.Uri;

  import android.webkit.WebView;

  import android.webkit.WebViewClient;

  

  public class MyAppWebViewClient extends WebViewClient {

  

    @Override

    public boolean shouldOverrideUrlLoading(WebView view, String url) {

        if(Uri.parse(url).getHost().endsWith("ejemplo.blogspot.com")) {

            return false;

        }

  

        Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));

        view.getContext().startActivity(intent);

        return true;

    }

}


- Ahora deberá cambiar la URL que dice ejemplo.blogspot.com por la dirección de su blog de Blogger, recuerde que no debe poner www.ejemplo.blogspot.com/, solo debe insertar una URL tal como lo muestro ejemplo.blogspot.com y no con www

11 Vamos a dar un clic en MainActivity, mire la imagen

¿Cómo crear una aplicación de mi blog de Blogger?

Eliminaremos unos códigos tal como lo muestro, luego insertaremos varios códigos mire la siguiente imagen


Inserta el siguiente código

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends Activity {

   
private WebView mWebView;

   
@Override
   
protected void onCreate(Bundle savedInstanceState) {
       
super.onCreate(savedInstanceState);
        setContentView(R.layout.
activity_main);

       
mWebView = (WebView) findViewById(R.id.activity_main_webview);

// Enable Javascript

       
WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(
true);
       
mWebView.loadUrl("http://www.ejemplo.blogspot.com");

// Enlaces de Fuerza y redirecciones para abrir en el WebView en lugar de un navegador web

       
mWebView.setWebViewClient(new WebViewClient());

// Abrir todos los enlaces externos en el navegador web de su teléfono

       
mWebView.setWebViewClient(new MyAppWebViewClient());

    }

// Botón de regreso

   
@Override
   
public void onBackPressed() {
       
if(mWebView.canGoBack()) {
           
mWebView.goBack();
        }
else {
           
super.onBackPressed();
        }
    }




   
@Override
   
public boolean onCreateOptionsMenu(Menu menu) {
       
// Inflate the menu; this adds items to the action bar if it is present.
        
getMenuInflater().inflate(R.menu.menu_main, menu);
       
return true;
    }

   
@Override
   
public boolean onOptionsItemSelected(MenuItem item) {
       
// Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
       
int id = item.getItemId();

       
//noinspection SimplifiableIfStatement
       
if (id == R.id.action_settings) {
           
return true;
        }

       
return super.onOptionsItemSelected(item);
    }
}
        }

    }
 

Cambia la dirección URL ejemplo.blogspot.com por la dirección URL de su blog de Blogger, recuerde no eliminar http://www.

12 Abre activity_main mire la siguiente imagen

¿Cómo crear una aplicación de mi blog de Blogger?

Debemos eliminar el código que se encuentra dentro de activity_main y los remplazaremos por un nuevo código

¿Cómo crear una aplicación de mi blog de Blogger?

Inserta el siguiente código

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

    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/container"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity">

    tools:ignore="MergeRootFrame">

  

    <WebView

        android:id="@+id/activity_main_webview"

        android:layout_width="match_parent"

        android:layout_height="match_parent" />

</FrameLayout>


13 Por ultimo abre AndroidManifest, mire la siguiente imagen

¿Cómo crear una aplicación de mi blog de Blogger?

Vamos a dar permisos de Internet a nuestra aplicación, insertaremos un código de la siguiente manera mire la imagen

¿Cómo crear una aplicación de mi blog de Blogger?

Inserta el siguiente código justo antes de <application

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


14 Eso es todo, ya tenemos creado nuestra aplicación móvil, ahora tenemos que generar nuestra APK y probarlo en el simulador de Android Studio.

Siga los siguientes pasos:

1 Un clic en “Buil” luego en “Generate signed APK

¿Cómo crear una aplicación de mi blog de Blogger?

2 Ingresamos diferentes datos, dentro de ella, mire la imagen

¿Cómo crear una aplicación de mi blog de Blogger?

Damos un clic en Next

Se nos abrirá la siguiente ventana

¿Cómo crear una aplicación de mi blog de Blogger?

Luego damos un clic en Finish

Esto hará que nos genere nuestra APK, para instalarlo en nuestro Smartphone o Tableta.

Hacer correr nuestra aplicación en el simulador de Android Studio

1 Un clic en Tools, luego un clic en Android y en AVD Manager, mire la imagen

¿Cómo crear una aplicación de mi blog de Blogger?

2 Nos mostrara la siguiente ventana

¿Cómo crear una aplicación de mi blog de Blogger?

Damos un clic en el botón verde, para hacer correr nuestro simulador

Ahora nos mostrara este mensaje en Android studio, mire la siguiente imagen

¿Cómo crear una aplicación de mi blog de Blogger?

3 En la siguiente imagen se muestra el emulador que se ejecutó con normalidad y sin ningún error

¿Cómo crear una aplicación de mi blog de Blogger?

4 Da un clic en la parte superior de Android Studio donde está un icono verde para hacer correr la aplicación en el simulador, mire la imagen,

¿Cómo crear una aplicación de mi blog de Blogger?

Se tardara unos segundos por lo regular así que debe esperar un poco hasta que se abra una nueva ventana en la cual debe escoger un simulador, damos un clic en OK

¿Cómo crear una aplicación de mi blog de Blogger?

5 Espere hasta que se cargue su Aplicación en el simulador siempre sabe demorarse.

Este es el resultado final

¿Cómo crear una aplicación de mi blog de Blogger?
¿Cómo crear una aplicación de mi blog de Blogger?


Para buscar la APK en nuestro computador siga las siguientes instrucciones y así instalarlo en nuestro Smartphone o tableta

Vamos a buscar nuestra APK

1 Un clic en el disco C: de nuestro computador

buscar la APK en nuestro computador

2 Un clic en Usuarios

3 Un clic en Eys

4 Se abrirá una ventana parecida a la siguiente

buscar la APK en nuestro computador

5 Un clic en AndroidStudioProject

buscar la APK en nuestro computador

Nos mostrara la siguiente ventana, la cual contiene nuestro primer proyecto “Aplicación”

buscar la APK en nuestro computador

6 Damos un clic en nuestra carpeta y nos mostrara la siguiente ventana

buscar la APK en nuestro computador

7 Un clic en app

buscar la APK en nuestro computador

Nos mostrara la siguiente imagen

buscar la APK en nuestro computador

8 Un clic en Build

buscar la APK en nuestro computador

Se nos abrirá la siguiente ventana

buscar la APK en nuestro computador

9 Un clic en Outputs

buscar la APK en nuestro computador

Se nos abrirá la siguiente ventana

buscar la APK en nuestro computador

10 Un clic en apk

buscar la APK en nuestro computador

Nos mostrara la siguiente ventana

buscar la APK en nuestro computador

11 Copiamos app-debug-unaligned en nuestra tarjeta SD para instalarlo en el teléfono o puedes empezar a subirlo en drive.google.com para que todos lo puedan descargar.

App-debug-unaligned es la APK de nuestra aplicación, puede cambiarlo de nombre si gusta

Eso es todo, ha terminado este tutorial.

Puede descargarse este proyecto desde Google drive

DESCARGAR

Ademas, puede descargarse la Apk de este ejemplo he instalarlo en su Smartphone o tableta y mirar como funciona.


¿Necesitas ayuda?

Espero haber sido lo más explicativo posible y cualquier pregunta no dude en escribir

3 comentarios:

  1. Y si estamos hablando de Linux, donde quedaria el directorio del apk?, Gracias de antemano!

    ResponderEliminar
  2. Hola,
    Cree mi APP desde mi blog de Blogger, segui todos los pasos y ya la tengo, excelente!!!
    Pero necesito un par de consejos:
    Como puedo sacar de la APP la frase de "Ver version web", y tambien sacar las palabras "Con la tecnologia de Blogger", esta ultima del blog ya lo saque pero me sigue apareciendo en la APP.

    Muchas gracias
    Aldo

    ResponderEliminar
    Respuestas
    1. Hola Aldo, gracias por escribir, es bueno saber que creo su App sin complicaciones, sobre su pregunta "Como sacar con la tecnología de Blogger", puede seguir las instrucciones del siguiente tutorial: http://www.ayudadeblogger.com/2012/10/como-eliminar-con-la-tecnologia-de-blogger.html

      Ese paso debe hacerlo en su plantilla y no en la APP

      Automáticamente se verán los cambios realizados en su APP

      Sobre su otra pregunta, tendría que dejarme la dirección URL de su blog para poder visitarlo y ver lo que usted dice..

      Saludos.

      Eliminar

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios