Créez vos propres applications Web avec Stamplay

Les applications Web constituent un excellent moyen d'interagir avec vos clients. Cependant, pour les développeurs non-Web, cela peut être une tâche très ardue à créer. Heureusement pour ces utilisateurs, les employés de Stamplay ont cherché à simplifier la création d'applications Web grâce à leur service qui automatise le processus de développement d'applications Web en vous proposant un processus simple, étape par étape, permettant de créer des applications..

Stamplay peut être utilisé pour créer des applications Web qui s'intègrent à des services tels que Facebook, Google, Dropbox et de nombreuses autres applications. C’est bien, car lorsqu’on utilise Stamplay, il n’est pas nécessaire de rechercher les API pour chaque service respectif; il suffit de le faire glisser.

Dans ce tutoriel, je vais vous montrer comment créer votre première application utilisant un réseau social, à partir de zéro, en utilisant Stamplay..

Création de votre première application Web

Création d'une nouvelle application Web à partir de l'écran d'accueil.

Pour commencer, rendez-vous sur le site Web de Stamplay et créez un compte en cliquant sur le bouton vert. Commencez maintenant bouton qui se trouve vers le centre de l'écran. Vous pouvez ensuite créer un compte en utilisant votre adresse e-mail ou votre compte Google..

Choisir un nom pour votre nouvelle application.

Vous allez maintenant être amené à votre bibliothèque d'applications. Vous pouvez utiliser cette page pour afficher vos anciennes applications et pour lancer la création de nouvelles applications. Pour créer une nouvelle application, regardez dans le coin supérieur droit de l'écran et cliquez sur le bleu Créer une application bouton. Une fenêtre pop-up apparaîtra vous demandant de nommer votre nouvelle application. Après avoir confirmé le nom de votre application, vous serez amené à la page Composants..

Composants

Dans la page des composants, vous pouvez choisir le mode d'interaction souhaité entre votre utilisateur et votre nouvelle application Web. Pour cet exemple, je vais créer une application qui permet à un utilisateur de se connecter à Facebook, de remplir un simple formulaire et de recevoir un courrier électronique dans sa boîte de réception..

Sélection d'un service d'inscription pour votre application. 

Pour commencer, cliquez sur le bleu Utilisateur bouton en haut de la fenêtre. Pour ajouter une connexion Facebook à votre application, cliquez sur le bouton blue Ajouter bouton du côté droit de la fenêtre; une fenêtre contextuelle apparaît vous demandant de choisir un service de connexion. Pour ce tutoriel, je choisirai l'option Facebook.

Ajout de composants à votre application Web dans Stamplay.

Il vous sera maintenant demandé de fournir un identifiant d'application et un secret d'application. Ceux-ci peuvent être acquis sur la page de développement de Facebook et sont utilisés pour identifier votre application avec les serveurs de Facebook..

Maintenant, cliquez sur le bleu plus bouton situé à droite du logo de l'utilisateur. Vous pourrez maintenant ajouter plus de composants à votre application. Puisque nous voulons envoyer un email à nos utilisateurs, cliquez sur le bouton email option. Puis cliquez sur le plus bouton à nouveau pour être à nouveau à l'écran de sélection. Cette fois, cliquez sur le bouton forme bouton.

Création de champs pour votre formulaire.

Regardez vers le centre de l'écran, vous pourrez configurer votre formulaire en lui donnant un nom et en ajoutant des champs. Pour ajouter des champs, regardez au bas de la fenêtre sous le Des champs entête. Utilisez le Nom de domaine zone de texte pour donner un nom à votre champ. À la droite de cette zone de texte, vous trouverez un menu déroulant vous demandant quel type de champ vous souhaitez ajouter..

Pour ce tutoriel, je vais utiliser le formulaire pour demander aux utilisateurs quel système d’exploitation de smartphone ils utilisent. Pour ce faire, je demanderai à l'utilisateur de vérifier quel téléphone il utilise, je vais donc choisir bouton radio du menu déroulant.

Vous allez maintenant être amené à un menu qui vous permet de saisir les options de votre formulaire. Dans le cas des boutons radio, vous pouvez ajouter les noms de vos boutons à la liste. Pour mon formulaire, je vais ajouter les noms des systèmes d'exploitation pour smartphone à la liste..

Si vous souhaitez créer une partie de votre formulaire, assurez-vous de tourner le Champs obligatoires interrupteur marche / arrêt du sur position. Pour ajouter plusieurs formulaires à votre application, cliquez sur le bouton + Ajouter un formulaire bouton du haut de la fenêtre.

les tâches

Configuration du courrier électronique qui sera envoyé aux utilisateurs de votre application. 

Maintenant que vous avez créé votre formulaire, il est temps d'utiliser le les tâches onglet pour configurer le courrier électronique que nous allons envoyer à notre utilisateur. Cliquez dans la les tâches bouton de la barre latérale. Ensuite, regardez dans le coin supérieur droit de la fenêtre et cliquez sur le bouton Nouvelle tâche bouton.

Configuration d'une tâche dans Stamplay

Vous pouvez maintenant choisir votre composant déclencheur et votre composant action. Votre composant déclencheur est ce qui déclenche l'action du composant action. Sous chaque composant, vous pouvez choisir le mode de déclenchement dudit composant. Par exemple, vous pouvez définir votre composant déclencheur en tant qu'utilisateur et le laisser déclencher le composant action lorsqu'il se connecte à Facebook..

Pour cet exemple, je vais définir le composant déclencheur à la utilisateur et le composant action à email. De plus, je vais faire en sorte que lorsque l'utilisateur se connecte à l'application, un email est envoyé à sa boîte de réception.

Filtrer les destinataires de votre application par courrier électronique. 

Cliquez sur le bleu continuer bouton et vous trouverez un en-tête étiqueté Ajuster l'utilisateur. Vous pouvez utiliser cette section pour ajuster avec précision le déclencheur Utilisateur. Par exemple, si vous souhaitez uniquement que l'e-mail soit envoyé à l'utilisateur si son email se termine par des comptes Gmail, vous pouvez le faire en cliquant sur le bouton Ajouter un filtre bouton et choix email dans le menu déroulant Sélectionner une propriété et (Texte) se termine par dans le menu déroulant. Vous pouvez alors tapez "@ gmail.com" dans la case de condition et cliquez sur le bouton plus bleu bouton pour ajouter ce filtre à votre application.

Configuration du courrier électronique qui sera envoyé aux utilisateurs de votre application. 

Vous serez maintenant invité à configurer vos options de messagerie. Regardez du côté droit de la fenêtre sous le données de déclenchement de connexion en-tête - vous remarquerez quelques options. Ces options sont des informations collectées sur votre utilisateur dans le processus de connexion à Facebook. Pour utiliser ces informations dans votre formulaire, il vous suffit de cliquer dans une zone de texte, puis de cliquer sur son information respective dans la partie droite de la fenêtre.. 

Vous pouvez également saisir manuellement des informations dans votre courrier électronique, ce que vous voudrez faire pour votre adresse e-mail de retour et le corps de celui-ci. Une fois que vous avez fini de configurer votre email, cliquez sur le bouton Créer une tâche bouton situé en bas du menu.

Disposition

Maintenant que vous avez créé vos tâches, il est temps de créer l'interface frontale de votre application. Pour ce faire, cliquez dans le Disposition dans la barre latérale et regardez vers le coin supérieur droit de la fenêtre. Cliquez sur le bouton intitulé Change le thème.

Choisir un nouveau thème pour votre application.

Dans la fenêtre de sélection des thèmes, examinez chacun des thèmes inclus. Lorsque vous en trouvez un que vous aimez, passez la souris sur le thème et cliquez sur le bouton Voir la démo bouton pour prévisualiser le thème. Si vous décidez que vous aimez votre nouveau thème, cliquez sur le bouton Installer le thème bouton.

Personnaliser votre mise en page

Maintenant, regardez à gauche de la fenêtre et cliquez sur le bouton des pages menu déroulant. Vous verrez maintenant tous les fichiers HTML qui composent votre application Web. Si vous souhaitez ajouter du contenu à votre application, vous pouvez modifier les fichiers HTML pour le faire..

Dans cet article, j'utilise le thème Stamplay standard et j'ai modifié la page d'accueil (index.html) pour supprimer un exemple de texte..

Ajout du bouton de connexion à Facebook

Copier les tags div de connexion Facebook. 

Il est maintenant temps de commencer à éditer le front-end de notre application Web pour afficher le bouton de connexion Facebook sur la page d'accueil. Pour ce faire, regardez à gauche de la fenêtre Stamplay et cliquez sur le menu déroulant intitulé widgets. Puis cliquez sur le auth.login.hbs.html bouton et regarder vers le centre de la page.

Regardez vers le centre de la fenêtre Stamplay du document HTML. Numérisez ce document jusqu'à ce que vous trouviez une ligne commençant par Identifiant Facebook et le copier. Ensuite, ouvrez le document index.html sous le des pages menu déroulant.

Depuis la page index.html, créez un nouveau

tag, collez le code de connexion Facebook et fermez le

tag (

). Maintenant, regardez dans le coin supérieur droit de la fenêtre Stamplay et cliquez sur le bouton Aller à l'App bouton. Votre application Web va maintenant apparaître dans un nouvel onglet.

Copier les tags div de connexion Facebook. 

Depuis votre application, cliquez sur le nouveau bouton de connexion et connectez-vous avec votre compte Facebook. Vous devriez alors voir votre nom Facebook et votre photo de profil dans le coin supérieur droit de l'application. En outre, vérifiez le compte de messagerie associé à votre compte Facebook. S'il est configuré correctement, vous remarquerez que le message que nous avons configuré précédemment a atterri dans votre boîte de réception..

Ajout d'un formulaire à votre application

Ajout des balises div de formulaire à votre application.

Rappelez-vous le formulaire que nous avons créé plus tôt? Il est temps d'ajouter cela au début. Pour ce faire, cliquez dans le widgets menu déroulant et cliquez sur le form.display.hbs.html bouton pour être amené au code HTML de votre formulaire. Regardez vers le haut du menu et copiez-collez la première balise div dans le document index.html.

Cependant, nous n'avons pas encore terminé. Si vous regardez vers la fin de la balise, vous verrez une zone pour saisir l'ID de votre formulaire qui a été défini lors de la création de votre table. Si vous n'êtes pas sûr de votre identifiant de table, vous pouvez le voir en cliquant sur le bouton table bouton dans le Composants onglet et en regardant vers le centre de la fenêtre.

Tester votre application

Maintenant que votre application est prête à être utilisée, testez-la en l'ouvrant dans un nouvel onglet. Vous pouvez récupérer l'URL de votre application en cliquant sur l'icône Réglages onglet sur la barre latérale gauche et en regardant sous le Domaines entête. Copiez et collez cette URL dans un nouvel onglet et testez-le.!

L'onglet Admin

Une fois votre application en ligne, vous pouvez accéder à la Admin onglet pour afficher les réponses à votre formulaire. Cliquez sur l'onglet et, dans le menu déroulant, cliquez sur le bouton Forme bouton. Au centre de la fenêtre, vous pouvez afficher les réponses à votre formulaire et aux adresses électroniques fournies par le compte Facebook de l'utilisateur. De plus, si vous cliquez sur le bouton Utilisateurs bouton, vous pouvez voir le nom et l'email de chaque utilisateur qui a utilisé votre application.

Et c'est un wrap!

Vous pouvez maintenant utiliser Stamplay pour créer de simples applications Web permettant d’interagir avec vos utilisateurs et vos clients. Dans les commentaires, liez-nous à votre nouvelle application Web ou indiquez-nous si vous avez besoin d'aide pour utiliser Stamplay.!