Crea tus propias aplicaciones web con Stamplay

Las aplicaciones web son una excelente manera de interactuar con sus clientes. Sin embargo, para los desarrolladores que no son web, pueden ser una tarea realmente difícil de crear. Afortunadamente para esos usuarios, la gente de Stamplay se ha propuesto hacer que la creación de aplicaciones web sea muy fácil con su servicio que automatiza el proceso de desarrollo de la aplicación web al brindarle un proceso sencillo paso a paso para crear aplicaciones..

Stamplay se puede utilizar para crear aplicaciones web que se integran con servicios como Facebook, Google, Dropbox y muchas otras aplicaciones. Esto es bueno porque, cuando usa Stamplay, no tiene que salir y buscar las API para cada servicio respectivo, simplemente lo arrastra.

En este tutorial, te mostraré cómo puedes crear tu primera aplicación de red social, desde cero, utilizando Stamplay.

Creando tu primera aplicación web

Creando una nueva aplicación web desde la pantalla de inicio.

Para comenzar, diríjase al sitio web de Stamplay y cree una cuenta haciendo clic en el verde Empezar ahora Botón que se encuentra hacia el centro de la pantalla. Luego puede registrarse para obtener una cuenta usando su dirección de correo electrónico o su cuenta de Google.

Elegir un nombre para tu nueva aplicación.

Ahora serás llevado a tu biblioteca de aplicaciones. Puede usar esta página tanto para ver sus aplicaciones antiguas como para iniciar la creación de nuevas aplicaciones. Para crear una nueva aplicación, mire hacia la esquina superior derecha de la pantalla y haga clic en el azul Crear aplicación botón. Aparecerá una ventana emergente que le pedirá que nombre su nueva aplicación. Después de confirmar el nombre de la aplicación, accederá a la página Componentes..

Componentes

En la página de componentes, puede elegir cómo le gustaría que su usuario interactúe con su nueva aplicación web. Para este ejemplo, voy a crear una aplicación que le permita a un usuario iniciar sesión en Facebook, completar un formulario simple y recibir un correo electrónico en su bandeja de entrada..

Seleccionando un servicio de registro para su aplicación. 

Para empezar, haga clic en el azul. Usuario Botón de la parte superior de la ventana. Para agregar el inicio de sesión de Facebook a su aplicación, haga clic en azul Añadir botón desde el lado derecho de la ventana; aparecerá una ventana emergente que le pedirá que elija un servicio de inicio de sesión. Para este tutorial, estaré seleccionando la opción de Facebook..

Agregando componentes a su aplicación web en Stamplay.

Ahora se le pedirá que proporcione un ID de aplicación y un secreto de aplicación. Se pueden adquirir en la página de desarrollo de Facebook y se utilizan para identificar su aplicación con los servidores de Facebook..

Ahora, haga clic en el azul más botón que se encuentra a la derecha del logotipo del usuario. Ahora podrás agregar más componentes a tu aplicación. Como queremos enviar un correo electrónico a nuestros usuarios, haga clic en el correo electrónico opción. Luego, haga clic en más Botón de nuevo para volver a la pantalla de selección. Esta vez, haga clic en formar botón.

Creando campos para tu formulario.

Mire hacia el centro de la pantalla, podrá configurar su formulario dándole un nombre y agregando campos. Para agregar campos, busque en la parte inferior de la ventana debajo de Campos encabezamiento. Utilizar el Nombre del campo cuadro de texto para dar un nombre a su campo. A la derecha de este cuadro de texto encontrará un menú desplegable que le pregunta qué tipo de campo desea agregar..

Para este tutorial, usaré el formulario para preguntar a los usuarios qué sistema operativo de teléfono inteligente usan. Para hacer esto, haré que el usuario verifique qué teléfono usa, así que voy a elegir boton de radio desde el menú desplegable.

Ahora se lo llevará a un menú que le permite ingresar las opciones de su formulario. En el caso de los botones de opción, puede agregar los nombres de sus botones a la lista. Para mi formulario, agregaré los nombres de los sistemas operativos de teléfonos inteligentes a la lista.

Si desea hacer una parte de su formulario requerido, asegúrese de girar el necesario interruptor de encendido / apagado a la en posición. Para agregar múltiples formularios a su aplicación, haga clic en + Añadir formulario botón de la parte superior de la ventana.

Tareas

Configurando el correo electrónico que será enviado a los usuarios de su aplicación.. 

Ahora que ha creado su formulario, es hora de usar el Tareas pestaña para configurar el correo electrónico que vamos a enviar a nuestro usuario. Haga clic en el Tareas Botón de la barra lateral. Luego, mire hacia la esquina superior derecha de la ventana y haga clic en Nueva tarea botón.

Configurando una tarea en Stamplay

Ahora puede elegir el componente de activación y el componente de acción. Su componente de activación es lo que activa el componente de acción para hacer algo. Debajo de cada componente, puede elegir cómo se activará dicho componente. Por ejemplo, puede configurar su componente de activación como su usuario y hacer que active el componente de acción cuando inicie sesión en Facebook.

Para este ejemplo, voy a configurar el componente disparador a la usuario y el componente de acción para correo electrónico. Además, lo haré para que cuando el usuario inicie sesión en la aplicación, se envíe un correo electrónico a su bandeja de entrada..

Filtrar a quién envía tu aplicación un correo electrónico. 

Haga clic en el azul continuar botón y encontrarás un encabezado etiquetado Tune User. Puede usar esta sección para ajustar con precisión el activador del usuario, por ejemplo, si solo desea que el correo electrónico se envíe al usuario si su correo electrónico termina con las cuentas de Gmail, puede hacerlo haciendo clic en el botón Añadir filtro botón y elección correo electrónico en el menú desplegable Seleccionar una propiedad y (Texto) termina con desde el menú desplegable. Entonces puedes escribe "@ gmail.com" en el cuadro de condición y haga clic en el más azul botón para agregar este filtro a su aplicación.

Configurando el correo electrónico que será enviado a los usuarios de su aplicación.. 

Ahora se te pedirá que configures tus opciones de correo electrónico. Mira hacia el lado derecho de la ventana debajo del datos de activación de inicio de sesión Encabezado: notarás bastantes opciones. Estas opciones son información recopilada sobre su usuario en el proceso de inicio de sesión de Facebook. Para usar esta información en su formulario, simplemente haga clic en un cuadro de texto y luego haga clic en su información respectiva desde el lado derecho de la ventana. 

También puede ingresar información manualmente en su correo electrónico, algo que querrá hacer para su dirección de correo electrónico de retorno y el cuerpo del correo electrónico. Una vez que haya terminado de configurar su correo electrónico, haga clic en Crear tarea Botón que se encuentra hacia la parte inferior del menú..

Diseño

Ahora que ha creado sus tareas, es hora de construir el front-end de su aplicación. Para ello, haga clic en el Diseño pestaña desde la barra lateral y mira hacia la esquina superior derecha de la ventana. Haga clic en el botón etiquetado. Cambiar de tema.

Elegir un nuevo tema para tu aplicación.

Desde la ventana de selección de temas, eche un vistazo a cada uno de los temas incluidos. Cuando encuentre uno que le guste, desplace el mouse sobre el tema y haga clic en Ver demostración botón para previsualizar el tema. Si decides que te gusta tu nuevo tema, haz clic en Instalar el tema botón.

Personalizando tu diseño

Ahora, mire a la izquierda de la ventana y haga clic en páginas Menú desplegable. Ahora se le mostrarán todos los archivos HTML que conforman su aplicación web. Si desea agregar contenido a su aplicación, puede editar los archivos HTML para hacerlo.

En este artículo, estoy usando el tema estándar de Stamplay y he editado la página de inicio (index.html) para eliminar el texto de muestra.

Agregar el botón de inicio de sesión de Facebook

Copiar las etiquetas div de inicio de sesión de Facebook. 

Ahora es el momento de comenzar a editar el front-end de nuestra aplicación web para mostrar el botón de inicio de sesión de Facebook en la página de inicio. Para hacer esto, mire a la izquierda de la ventana de Stamplay y haga clic en el menú desplegable etiquetado widgets. Luego, haga clic en auth.login.hbs.html Botón y mira hacia el centro de la página..

Mire hacia el centro de la ventana de Stamplay en el documento HTML. Escanee este documento hasta que encuentre una línea que comience con Inicio de sesión de Facebook y copiarlo. Luego, abra el documento index.html debajo de páginas Menú desplegable.

Desde la página index.html, crea un nuevo

etiqueta, pegue el código de inicio de sesión de Facebook y cierre el

etiqueta

). Ahora, mira hacia la esquina superior derecha de la ventana de Stamplay y haz clic en Ir a la aplicación botón. Tu aplicación web ahora aparecerá en una nueva pestaña.

Copiar las etiquetas div de inicio de sesión de Facebook. 

Desde su aplicación, haga clic en el nuevo botón Iniciar sesión e inicie sesión con su cuenta de Facebook. Luego deberías ver tu nombre de Facebook y tu foto de perfil en la esquina superior derecha de la aplicación. Además, verifique la cuenta de correo electrónico asociada con su cuenta de Facebook, si está configurada correctamente, notará que el correo electrónico que configuramos anteriormente ha llegado a su bandeja de entrada.

Agregar un formulario a su aplicación

Adición de las etiquetas form div a tu aplicación.

¿Recuerdas el formulario que creamos anteriormente? Es hora de agregar eso a la parte delantera. Para ello, haga clic en el widgets menú desplegable y haga clic en el form.display.hbs.html botón para ser llevado al código HTML de su formulario. Mire hacia la parte superior del menú y copie y pegue la primera etiqueta div del documento index.html.

Sin embargo, todavía no hemos terminado. Si mira hacia el final de la etiqueta, verá un área para ingresar el ID de su formulario que se estableció al crear su tabla. Si no está seguro de la ID de su mesa, puede verla haciendo clic en el mesa botón en el componentes pestaña y mirando hacia el centro de la ventana.

Probando tu aplicación

Ahora que su aplicación está lista para funcionar, pruébela abriéndola en una nueva pestaña. Puede recuperar la URL de su aplicación haciendo clic en el Ajustes pestaña en la barra lateral izquierda y mirando debajo de la Dominios encabezamiento. Copia y pega esta URL en una nueva pestaña y dale un giro!

La pestaña de administración

Una vez que tu aplicación esté activa, puedes ir a la Administración pestaña para ver las respuestas a su formulario. Haga clic en la pestaña y, en el menú desplegable, haga clic en Formar botón. Desde el centro de la ventana puede ver las respuestas a su formulario y las direcciones de correo electrónico proporcionadas por la cuenta de Facebook del usuario. Además, si hace clic en el botón Usuarios botón, puede ver el nombre y el correo electrónico de cada usuario que utiliza su aplicación.

Y eso es una envoltura!

Ahora puede usar Stamplay para hacer aplicaciones web simples para interactuar con sus usuarios y clientes. En los comentarios, enlácenos a su nueva aplicación web o háganos saber si necesita ayuda para utilizar Stamplay!