Depuis 2011, GoodBarber aide les particuliers, les développeurs web, les agences et les marques à concevoir rapidement des applications. Elles se distinguent par leur innovation technique et leur design comtemporain. Pas étonnant vu que l’outil est maintenu par une équipe de passionnés à Ajaccio sur l’île de beauté — la Corse.

La team goodbarber

Fonctionnalités clés

• Concevez en ligne des progressives Web Apps (PWA) et des applications natives sans écrire une seule ligne de code ;
• Publiez et hébergez votre application sur les serveurs GoodBarber ;
• Laissez vous guider pour le processus de soumission sur le Playstore et l’Appstore.
• Gérez les notifications et les contenus off-line pour les Apps natives ;
• Créez votre propre structure de contenu et vos parcours de navigation avec un CMS personnalisable et collaboratif ;
• Augmenter les fonctionnalités grâce aux Add-ons ;
• Connectez votre application avec des services tiers et ajoutez des fonctionnalités avec vos codes et fichiers perso.

Prix

• Essai gratuit 30 jours sans carte bancaire ;
• 28 EUR/mois pour l’offre Standard comprenant la création d’une PWA avec nom de domaine, SSL gratuit et trafic illimité ;
• 40 EUR/mois pour l’offre Full comprenant une PWA et une app native Android et iPhone. Possibilité d’activer le geofence et beacon via les add-ons ;
• 60 EUR/mois pour l’offre Advanced comprenant une PWA et une app native Android, iPhone et iPad. Cette offre comprend le pack communautaire (connexion, communauté, groupe d’utilisateurs, chat) plus la possibilité d’ajouter les add-ons local business ;
• 240 EUR/mois pour l’offre Reseller ciblant les agences et les freelances souhaitant construire des applications progressives et natives en marque blanche ;
• Une réduction de 20% est appliquée si vous choisissez la facturation annuelle.

Dans quels cas j’utiliserais Goodbarber

Je viens de terminer une semaine complète d’ateliers de design avec des étudiants. La fin de semaine était dédiée au prototypage et aux tests utilisateurs. GoodBarber est une option que j’étudierai lors de mes prochains ateliers pour prototyper une plateforme communautaire de contenus compatible Android et iOS.

Pour tester des concepts d’apps, j’utilise actuellement un mix Figma + InVision App. La limite de cette approche est l’absence de données dynamiques dans les protos. Tout est figé.

La bonne nouvelle avec l’app builder GoodBarber est qu’il autorise les utilisateurs à envoyer de la données vers l’application (Favoris, commentaire, etc.). Et la fonction de compte utilisateur couplée à la messagerie intégrée m’intéresse tout particulièrement.

App builder GoodBarber – authentification utilisateur avec Facebook et Twitter Connect App builder GoodBarber – gestion communautaire et messagerie interne

Si on ajoute à ces fonctions la gestion des notifications, mes phases de prototypages et de tests se rapprochent à grand pas d’une application prête pour une mise en production. Le tout est conçu en quelques heures.

A titre personnel, un autre scénario d’utilisation de GoodBarber serait la mise en place d’une progressive Web App pour un blog. La gestion des services workers pour gérer l’accès hors ligne des contenus et les notifications peut être une lourde tâche. Je ne suis pas contre le fait que GoodBarber s’en charge. Il propose d’ailleurs un SSL gratuit indispensable pour transformer son site Web en progressive Web App — le fameux cadenas à gauche de la barre d’adresse de votre navigateur.

Bien entendu, il existe de multiples scénarios d’utilisation de GoodBarber. L’outil semble idéal pour les applications avec de grandes quantités de contenus. Voyons cela en détails.

Test de GoodBarber

Voulez-vous créer un site Web qui ressemble et fonctionne exactement comme vous le souhaitez ? Peut-être voulez-vous aussi un site Web disponible hors ligne ? Néanmoins, vous voulez toujours un moyen simple pour votre équipe d’éditer du contenu sans rompre le design.

Ou peut-être que vous voulez une application Android et iOS qui inclut les informations de votre site, la gestion des comptes utilisateurs, mais vous ne souhaitez pas la coder vous-même. J’ai trouvé une solution à cette problématique en testant GoodBarber.

Il s’agit d’un outil qui est à la fois un générateur de site Web embrassant les standards des progressive Web Apps et un générateur d’application native pour Android et iOS.

En quelques minutes, vous pouvez éditer des blocs de contenus et des fonctionnalités pour concevoir l’application que vous avez toujours souhaitée. Vous pouvez ajouter des options de compte utilisateur, de gestion d’événements, de couponing, etc., sans écrire une ligne de code.

Mon expérience utilisateur avec l’éditeur en ligne d’application

Avant d’accéder gratuitement aux fonctions d’édition, GoodBarber demande de nommer votre application et de compléter 2 champs avec un email et un mot de passe.

Une fois cette étape réalisée, un tour guidée vous présente les principales fonctionnalités de l’éditeur d’application.

App builder GoodBarber – onboarding

Après ce parcours d’accueil, l’outil dévoile ses promesses en proposant en entête des contrôles de vues mobile, tablette et desktop. 2 autres contrôles permettent d’accéder à des paramètres avancés personnalisables via JSON et une fonction de test de l’application en natif et progressif.

Goodbarber app builder indicateur de progression dans le process de creation

J’apprécie l’indicateur visuel détaillant les étapes nécessaires pour publier l’application. Lors de mes premiers pas, ma principale question était de savoir comment éditer les blocs de contenus présents sur l’écran d’accueil.

Le design des écrans de l’application

Goodbarber app builder themes

GoodBarber propose un thème et un contenu par défaut. L’édition des blocs de contenus, de la navigation et des fonctionnalités communautaires se fait via le panel Assistant situé sur la droite de l’écran. Le menu tribandes en haut à gauche de l’écran est un autre moyen pour éditer l’app.

Goodbarber app builder panel assistant

Note : le panel d’édition est très pratique lorsqu’on conçoit une application mobile sur un écran 13-14 pouces. Il devient gênant lorsqu’on souhaite éditer une Web App en version desktop : une partie de l’application est cachée par le panel Assistant. La solution est de le réduire via l’icône en croix et de l’ouvrir au besoin. Rien de bien méchant mais peut être fastidieux à la longue. Un autre point est le manque de descriptif sur chaque icône au survol. Il faut cliquer pour savoir quelle fonctionnalité se cache derrière. Je n’ai pas retenu toutes les infos du tour guidé.

Des outils d’édition catégorisés

L’outil propose différents niveaux d’édition :

• L’édition des templates d’écran permettant de contrôler la disposition des blocs de contenus (article à la une, liste de contenus spécifiques, etc.) ;
• L’édition à l’intérieure de chaque bloc ;
• L’édition du système de navigation ;
• L’édition des pages de contenus présentant les textes, les galeries, les vidéo, etc.

Chacun de ces grands ensembles repose sur un template dictant leur mise en page. Vous pouvez modifier leur apparence en choisissant un autre template et en personnalisant la couleur, la police, les images d’arrière plan et les espaces du template. Je vous invite à consulter la liste des templates pour chaque section d’application.

Goodbarber app builder templates

Note : des options cachées sont administrables via le fichier JSON gérant les paramètres avancés de GoodBarber.

Goodbarber app builder options json

La création et l’administration des contenus

GoodBarber gère une variété de contenus allant d’un article avec des images à un flux de vidéo en direct en passant par des événements. Chaque page de contenus et les catégories associées sont administrables dans l’onglet Contenus au sein du panel Assistant ou via le menu tribandes.

Les fonctions avancées d’éditions permettent de gérer les pages de contenus via un WYSIWYG contenus riches du type vidéo et fichier audio peuvent être insérer via un .

Goodbarber app builder publication article

Goodbarber app builder publication video

Vous pouvez insérer des cartes, connecter des événements Facebook à un listing sur l’application, gérer des inscriptions via un formulaire. La liste est longue, je vous donne ci-dessous un aperçu des caractéristiques de GoodBarber qui m’ont le plus séduit.

Goodbarber app builder publication carte geo

Les fonctionnalités essentielles pour bien débuter

Ci-dessous, les fonctionnalités qui sont les plus importantes pour mes scénarios d’utilisation : prototyper un site Web avec les fonctionnalités permises par les progressive Web Apps et prototyper une application native communautaire.

• Hébergement gratuit avec trafic illimité ;
• Nom de domaine personnalisé ou sous domaine GoodBarber ;
• SSL gratuit ;
• Edition collaborative des contenus via le back office de GoodBarber ;
• Possibilité de dupliquer une application pour la proposer dans une autre langue (GoodBarber offre 50% de remise pour cette option ) ;
• Compte utilisateur et messagerie ;
• Personnalisation des messages de confirmation, d’erreur, etc. ;
• Système de notification Push pour les Apps natives (Programmé, Geofencing et iBeacon). Les PWAs supporteront prochainement cette fonctionnalité ;
• Vidéo et streaming en direct ;
• Lecteur intégré de fichiers audio ;
• Génération des icônes de l’application ;
• Gestion du process de soumission sur les stores et des mises à jour ;

Je vous invite à explorer la liste complète des fonctionnalités.

Si vous recherchez un éditeur pour créer une Progressive Web App ou une application native pour votre business ou celui de vos clients, GoodBarber est l’outil en ligne auquel vous devriez donner une chance. Faites le test gratuitement pendant 30 jours.

Exemples d’applications réalisées avec GoodBarber

Quelques exemples d’applications natives réalisées avec l’éditeur en ligne GoodBarber.

Wonder Corsica

L’appli iOS de Wonder Corsica a été réalisée avec le générateur d’application GoodBarber.

Face à la crise

HappynGood – Forme & Santé

Goodbarber app happyngood

Barbichette.fr

ForTwo

Puerta del mar

Goodbarber app puerta del mar

Si vous êtes freelance ou en agence

GoodBarber propose la création d’applications mobiles en marque blanche. Vous aurez à votre disposition l’ensemble des fonctionnalités premiums et un outil de gestion des applications en production. Vous pourrez transmettre un backoffice personnalisé à vos clients. Vous gardez le contrôle au cas où il vous faudrait reprendre la main sur un de vos projets client. Ne vous fiez pas à la capture ci-dessous, l’ensemble des interfaces de GoodBarber et le centre d’aide sont en français. Un bon point pour vos clients made in France.

Goodbarber backend reseller

On en parle ?!

Avez-vous des commentaires, des questions, de l’amour ou de la haine ? Envoyez tout ça à [email protected]. Si vous n’aimez pas les e-mails, envoyez un tweet à @MagDuWebdesign.

Supporté par GoodBarber

Chez GoodBarber, nous croyons que chacun doit pouvoir accéder librement à la création d’application Web et natives. C’est pourquoi nous sommes fiers de soutenir le Magazine du Webdesign dans son effort pour défendre et promouvoir une large communauté de créateurs en proposant un éditeur d’application en ligne accessible à tous.

Pour aller plus loin

Prenez soin de vous. A bientôt — @guillaumpalayer.

Accédez au meilleur des interfaces directement depuis votre boîte mail

Si vous n’aimez pas les emails, accédez au meilleur des interfaces sur Twitter.