Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Construyendo una App desde Tu Sitio WordPress con AppPresser

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

Final product image
What You'll Be Creating

Si tienes un sitio WordPress popular, podrías haberte preguntado qué tan difícil sería construir una aplicación móvil para tus suscriptores y visitantes. Hay un número de maneras para lanzar aplicaciones motorizadas directamente desde tu sitio WordPress sin tener que construir una aplicación desde cero.

Con una aplicación móvil, puedes aprovechar notificaciones de dispositivo para alertar a tus usuarios de nuevo contenido y ellos puedes compartir fácilmente tus historias justo desde su teléfono o tableta.

WPMU ofrece un resumen de complementos que puedes usar para lanzar una aplicación desde tu blog WordPress, más notablemente Mobiloud el cuál se basa en App.io, y Wizardapp el cuál construye una aplicación HTML5. También está Appifier, el cuál proporciona un servicio de construcción de aplicaciones de bajo costo; si no eres muy técnico, Appifier podría ser una buena aproximación.

Sin embargo, este tutorial se enfocará en la herramienta más comúnmente utilizada, AppPresser. AppPresser proporciona una gran mezcla de facilidad de implementación con control técnico más profundo para desarrolladores. Usa complementos para integrar con la plataforma Phonegap de Adobe. Con extensiones personalizadas y desarrollo adicional, puedes integrar cualquier característica de dispositivo soportada por Phonegap tales como contactos, geolocalización, la cámara o el acelerómetro. (¿Tal vez quieres saber si la gente lee tus cosas mientras maneja? En cualquier caso, teóricamente, podrías construir una aplicación para eso).

Puedes construir una aplicación básica AppPresser WordPress por $199, pero si quieres integración de cámara o comercio electrónico, te costará $499. Si estás interesado en comparar y estimar el costo de construir una aplicación desde cero sin AppPresser, este proporciona enlaces a un par de grandiosos recursos web: la Calculadora de Costo de Desarrollo de Aplicación y ¿Cuánto cuesta desarrollar una aplicación?

Puedes ya sea listar tu aplicación en la Tienda iTunes y Google Play por ti mismo o puedes pagarle a AppPresser para hacerlo por ti por $499 (aprende más sobre este proceso abajo).

Mientras que hay alguna complejidad añadida a extender tu sitio WordPress a una Aplicación, incluyendo personalizar una nueva página de inicio, AppPresser proporciona muy buena documentación y numerosas guías en video para llevarte a través de cada paso del camino.

¿Qué es AppPresser?

En términos simples, AppPresser te permite crear una aplicación móvil nativa para iOS y Android desde tu sitio WordPress existente y distribuirla a través de la Tienda iTunes y Google Play. Puedes integrar notificaciones push, crear una tienda de comercio electrónico usando WooCommerce, una aplicación de red social usando BuddyPress, o puedes hacer un desarrollo personalizado para construir cualquier conjunto de características soportadas por la API de Phonegap. Aquí está un video introductorio simple:

Cuando instalas el complemento y tema AppPresser (incluidos en el paquete estándar), no cambia la apariencia de tu sitio de escritorio o móvil, solo se vuelve visible dentro de tu aplicación móvil. Tu tema normal y funcionalidad de sitio web no será afectada en absoluto. En otras palabras, si visitas tu sitio web a través del navegador de internet normal en tu dispositivo, no verás ninguna indicación de la existencia de AppPresser.

Sin embargo, AppPresser recomienda que tengas una solución rápida de hospedaje para tu sitio WordPress para poder entregar una experiencia de aplicación móvil de alto desempeño. Si quieres hospedaje administrado, ellos recomiendan WPEngine. Si auto-hospedas, recomiendo los discos SSD rápidos en Digital Ocean.

Las aplicaciones AppPresser no funcionan sin conexión. Así qué, los usuarios de tu aplicación requerirán tener una conexión a Internet activa (celular o WiFi) para llegar al nuevo contenido.

AppPresser ofrece extensiones adicionales que pueden mejorar la presentación y función de tu aplicación, todas están disponibles en el paquete de agencia.

Estas incluyen:

  • AppPush - para integrar con notificaciones push (disponible con el paquete estándar).
  • AppBuddy - para integrar con BuddyPress.
  • AppCamera - para construir aplicaciones para compartir fotografías.
  • App-Geolocation - para integrar con Geolocation.
  • AppSwiper - un agradable widget deslizador con toque habilitado para la página inicial de tu aplicación.
  • AppWoo - para integración con WooCommerce.

Ellos también ofrecen unas cuántas aplicaciones de ejemplo para mostrarte lo que es posible.

Construyendo Tu Aplicación

Antes de que compres un paquete AppPresser, recomiendo que te registres y revises el Manual de Desarrollador AppPresser gratuito. Una vez que has comprado ya sea el paquete estándar o de agencia, puedes comenzar a construir tu aplicación.

Aquí está una guía corta en video que te acompaña a través del proceso inicial de integrar AppPresser en tu sitio WordPress que describiremos abajo. Y, también puedes aprender más sobre AppTheme aquí.


Instala el Complemento AppPresser

Primero, desde tu Tablero WordPress, instala el complemento  AppPresser desde tu directorio de complementos.

Install the AppPresser plugin

Este complemento integra tu sitio WordPress a las características y extensiones de aplicación que AppPresser proporciona vía Phonegap.

Instala el Tema AppPresser y Complemento AppSwiper

AppPresser sugiere que uses su tema para el sitio de la aplicación (esto no afecta tu sitio HTML de escritorio o móvil). Su tema está diseñado para ser usado por dispositivos táctiles mientras que los temas WordPress típicos no.

Inicia sesión en tu cuenta AppPresser.com. Da clic en Mi Cuenta, después Ver Detalles y Descargas para obtener tus llaves de licencia y descarga de tema. También puedes obtener otras descargas de complemento en esta página.

Your AppPresser Account Page

Haz una nota de tus llaves de licencia y descarga tu AppTheme, complemento AppSwiper y cualquiera adicional que desees usar.

Desde tu Tablero WordPress, agrega el archivo zip de tema que descargaste. No lo actives.

Add the AppPresser AppTheme

Desde el menú complemento, sube el complemento Swiper que descargaste y actívalo:

Install the AppSwiper plugin for touch

Desde el Tablero WordPress, da clic sobre el Menú AppPresser. Enciende "Cargar AppPresser Solo para Administradores". Esto te permitirá previsualizar tu aplicación como el administrador. Esto no afectará la operación normal de tu sitio. Para ver tu sitio web normal, navega tu sitio en modo incógnito (sin inicio de sesión en el Tablero WordPress). Ingresa tu llave de licencia también y guarda los ajustes.

The AppPresser Settings Page

Aquí está mi vista previa de cómo lució después la página de inicio de la aplicación:

An Initial AppPresser App Home Page

Funcional, ciertamente, pero no una experiencia grandiosa fuera de la caja. El siguiente paso es construir una página distinta personalizada de inicio para mi aplicación.

Construye Tu Página de Inicio de Aplicación

Recomendamos construir una página distinta de inicio para tu aplicación. Esta página de inicio solo es vista cuando la gente está usando la aplicación. No afecta el sitio web HTML de escritorio o móvil.

Desde el tablero WordPress, crea una nueva página de inicio para tu aplicación. Esto ayuda a apagar las discusiones en esta página, ya que los comentarios no está habilitados para aplicaciones basadas en toque. Agrega el shortcode [swiper].

Add a New Home Page for Your App to Use

El complemento AppSwiper nos permite crear nuevos tipos personalizados de publicación llamados Deslizadores. Creemos un par de estos que enlacen a contenido que deseamos mostrar en la aplicación. Elige una imagen característica para cada diapositiva para aparecer como fondo.

Add an AppPresser Slide

Desde el Tablero WordPress, revisita la página de Ajustes AppPresser, teclea el nombre de la nueva página de inicio y selecciónala:

AppPresser Settings Select App Home Page

Ahora, marca refrescar tu sitio web para ver la nueva página de inicio con el deslizador en acción:

Sample AppPresser App with AppSlider Slides

Tu nueva página de inicio de aplicación está tomando forma. AppPresser proporciona vastas opciones para personalizar el aspecto, sensación y comportamiento de tu sitio.

Mientras que está fuera del alcance de este tutorial, deberías ver el video Crear una aplicación de noticias con AppPresser debajo que demuestra cómo expandir más allá tu página de inicio de aplicación usando el complemento Displays Posts Shortcode gratuito.

AppPresser también tiene una variedad de útiles videos los cuales puedes navegar aquí.

Listando Tu Aplicación en las Tiendas de Aplicaciones

Para realmente listar y vender tus aplicaciones en la Tienda de iTunes y Google Play, necesitarás comprar una Membresía de Desarrollador iOS Apple por $99 y licencia Google Play por $25.

AppPresser construirá y listará tu aplicación en las tiendas por $499, o puedes usar su guía paso a paso para hacerlo tu mismo. El proceso es un poco pesado y complicado pero ciertamente alcanzable. Requiere trabajar con Phonegap Build.

Aquí está su guía en video:

Promoviendo Tu Aplicación

Una vez que tu aplicación está disponible en la tienda, querrás decirle a tus lectores a través de todos los canales típicos, correo electrónico, Facebook, Twitter, et al. Pero, probablemente también querrás que vean un pendón inteligente en la parte superior de tu sitio cuando ellos naveguen tu sitio web móvil.

De hecho hay un complemento WordPress gratuito para mostrar Pendones Inteligentes de Aplicación. O, puedes codificar los pendones de manera nativa ej. promoviendo aplicaciones en Safari móvil.

Smart App Banners

¿A Dónde Vamos Desde Aquí?

Con la integración Phonegap de AppPresser, el cielo es el límite para qué tan sofisticada puedes construir una aplicación desde tu sitio WordPress. Recomiendo revisar su documentación, extensiones, aplicaciones de ejemplo y guías de video para estimular tu imaginación.

AppPresser está expandiendo el potencial de WordPress de manera impresionante como una plataforma de aplicación. ¡Buena Suerte!

Enlaces Relacionados

AppPresser proporciona una gran suite de documentación para ayudarte a tener éxito con su producto. Aquí hay algunos enlaces relacionas que quisieras revisar:

Videos Relacionados

AppPresser tiene una gran suite de video tutoriales de vista general y paso a paso para guiarte a través de cualquier cosa que quieras hacer. Aquí están algunos recursos adicionales:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.