Share
Mulberry de Toura est un cadre d’application mobile construit sur PhoneGap. En quelques minutes, Mulberry peut vous permettre de démarrer avec une application native dotée de technologies Web telles que HTML, CSS et JavaScript..
Voyons ce dont nous avons besoin pour commencer avec Mulberry.
Pour le moment, Mulberry ne prend officiellement en charge que OS X Snow Leopard et Lion. Selon la documentation, il pourrait être possible de s’exécuter sous Linux, mais cela n’est pas totalement pris en charge. En plus d’un système d’exploitation compatible, vous aurez également besoin de la dernière version de PhoneGap et Ruby devra également être installé..
Pour compléter ce tutoriel, vous devez également avoir une expérience de l’utilisation de git..
Vous pouvez obtenir la dernière version de Mulberry dans le référentiel github de Toura. Vous pouvez cloner le référentiel dans le répertoire de votre choix en utilisant la commande git clone [email protected]: Toura / mulberry.git
Ensuite, nous devons ajouter le chemin complet à mûrier / bin à notre variable de chemin d’environnement, nous devons donc modifier notre .profil fichier. Nous pouvons le faire en exécutant la commande suivante dans le terminal.
export PATH = $ PATH: / chemin / vers / mûrier / mûrier / bin
Si vous n'avez pas installé le «bundler» Ruby gem, vous devrez l'installer maintenant, comme ceci:
sudo gem installateur
Ensuite, à partir de la racine du référentiel, exécutez la commande:
installation groupée
Vous êtes maintenant prêt à créer votre première application avec Mulberry.
Pour obtenir notre structure d'application, nous devons exécuter la commande suivante dans le terminal où nous souhaitons que l'application soit construite. Disons que nous voulons créer une application pour les amoureux des chats et que nous allons appeler l'application Cats..
échafaudage de mûrier
Vous obtiendrez un tas de documents protégés par le droit d'auteur et quelques termes et conditions de base, mais ce qui va arriver aussi, c'est que la structure de votre application a maintenant été créée pour vous. Ouvrez votre dossier de projet et jetez un coup d'oeil.
La première chose à faire est d’aller de l’avant et d’ouvrir le config.yml déposer et apporter des modifications si nécessaire. Le fichier de configuration est vraiment bien commenté, et il est donc assez facile de voir ce que vous devez ajouter ou modifier. Vous verrez le nom de votre application et les détails du thème. Pour le moment, il n'y a pas de documentation sur la thématisation, mais vous pouvez définir des couleurs de base ici. Vous pouvez ensuite spécifier les plates-formes que vous construisez. Pour cette démo, je vais juste construire pour iOS, donc je vais supprimer l'option Android. Je vais aussi simplement cibler la plate-forme du téléphone, alors supprimez l'option de la tablette.
Vous pouvez voir que nous pouvons choisir d’inclure ou non jQuery dans le projet, puis il existe des options d’API pour Facebook, Twitter, Urban Airship et Flurry. Je suis sûr que nous connaissons tous les deux premiers, mais Urban Airship est un service de notifications push en direct. Flurry est un outil d'analyse du trafic spécialement conçu pour les applications mobiles. Pour cette démo, je ne vais pas entrer dans les détails de l'intégration de ces API avec Mulberry, je vais donc laisser ces champs vides.
Enregistrez votre fichier de configuration et ouvrez le sitemap.yml fichier. C'est ici que nous allons définir la structure de la page pour notre application. Vous pouvez voir que nous avons déjà deux entrées Accueil et Sur. Nous allons ajouter quelques liens vers notre page d'accueil suivante:
- accueil - noir et blanc - chats-avec-macs - chats-avec-chapeaux - chatons - à propos
Nous devons maintenant générer les nouvelles pages que nous avons définies dans notre plan de site. Retournez à votre terminal et entrez les informations suivantes:
mulberry create_page en noir et blanc
Vous recevrez une confirmation de la page en cours de création. Les pages sont créées au format Markdown. Si vous n'avez jamais utilisé Markdown auparavant, ne vous inquiétez pas, il n'y a rien de trop compliqué à ce sujet. En fait, c’est l’une des choses vraiment agréables que j’aime dans Mulberry, car j’utilise le format de démarque quotidiennement. Une fois que vous êtes habitué à la syntaxe simple, c'est plus rapide que d'écrire des pages en HTML.
Nous pouvons continuer et utiliser la même commande pour créer nos autres pages et, une fois cela fait, vous les trouverez dans le des pages dossier.
Si vous ouvrez les fichiers de démarques, vous verrez que l’en-tête du fichier est représenté par le --- personnages:
--- titre: # requis! template: phone: default: default: ceux-ci devraient éventuellement pointer sur une image dans les images dir header_image: background_image: # chacune de ces propriétés peut inclure un tableau de noms de fichiers images: videos: audios: feeds: locations: data: ---
Modifions cet en-tête pour ce dont nous avons besoin. Pour le moment, nous n'avons pas besoin de l'image d'en-tête ni de l'arrière-plan, et comme nous ciblons uniquement les téléphones, nous pouvons définir ce modèle sur images-et-text-phone qui est un modèle prédéfini construit dans mûrier. Nous allons également utiliser uniquement des images pour le moment, la tête de votre fichier devrait donc ressembler à ceci:
--- titre: Modèle noir et blanc: téléphone: images-text-phone images: - cat-bw-1.jpg - cat-bw-2.jpg - cat-bw-3.jpg ---
Les images sont situées dans un images dossier dans le les atouts dossier.
Remarque: La quantité d'espaces lorsque vous indenter quelque chose est importante. Assurez-vous que vos onglets sont définis sur 2 espaces, sinon le code ne sera pas compilé correctement.
Retournez à votre terminal et tapez mulberry servir. Tout le contenu sera alors prêt à être visualisé dans un navigateur ou dans le simulateur iOS de votre hôte local (généralement le port 3000)..
Allons de l'avant et modifions l'en-tête de certaines des autres pages.
--- titre: Cats with Hats modèle: téléphone: images-et-texte-images du téléphone: - chapeaux-1.jpg - chapeaux-2.jpg - chapeaux-3.jpg ---
--- titre: Chats avec Macs template: téléphone: images-text-phone images: - macs-1.jpg - macs-2.jpg - macs-3.jpg ---
Voyons également à quoi ressemblera le modèle vidéo..
--- titre: chatons modèle: téléphone: videos-and-text-phone vidéos: - kitten.mp4 ---
Allez-y et courez mulberry servir à nouveau et vérifiez la sortie dans un navigateur. Ça devrait ressembler a quelque chose comme ca -
Et la page vidéo devrait ressembler à ceci -
Jetons un coup d'œil aux légendes que vous pouvez créer pour ces carrousels d'images ou de vidéos.
Créez trois fichiers dans le images / légendes dossier et nommez-les imagename.md, donc pour la démo que j'ai créée cat-bw-1.md, cat-bw-2.md, cat-bw-3.md. Chacun des fichiers ressemble à ceci:
--- name: Cat 1 --- Ceci est un chat noir et blanc
Maintenant, si vous servez à nouveau votre application, vous verrez le contenu ci-dessous, les images changent à mesure que vous les parcourez:
Ouvrez votre terminal et lancez test de mûrier. Votre code va maintenant compiler dans un construit dossier. Xcode sera lancé et vous verrez la structure de votre application, y compris un www dossier où se trouvent tous vos fichiers. Vous pouvez maintenant appuyer sur build et exécuter dans Xcode et votre application sera lancée dans le simulateur en tant qu'application native..
Mulberry vient maintenant avec un support intégré pour Weinre, qui est un inspecteur Web ciblant les appareils mobiles (c'est génial!). La petite barre d’outils située dans le coin inférieur droit de votre coin vous permet d’utiliser Weinre sur la propre version hébergée de Toura. Si vous continuez et cliquez sur le bouton Weinre, vous obtiendrez un code que vous pourrez entrer sur le site pour que le débogueur distant soit opérationnel. Avec cela, vous pouvez tester Javascript ou CSS pour voir comment votre DOM a été construit par Mulberry.
Pour désactiver la barre de débogage en bas à droite de l’écran, certaines options se trouvent dans TouraConfig.js fichier situé dans construire / www / javascript / toura / app que vous devez configurer. Vous pouvez voir un aperçu complet des fonctionnalités ici, mais celles que vous souhaitez définir sur false sont debugToolbar et debugPage. debugPage est une page de débogage in-app. Vous allez vouloir les désactiver avant de créer votre application, prête pour la production..
Lorsque vous êtes prêt à déployer, lancez simplement mûrier déployer dans votre terminal et tous les différents fichiers binaires de vos périphériques spécifiés dans le config.yml le fichier sera créé.
À Mulberry, il y a tellement plus à explorer, à part ce que j'ai pu montrer dans cet aperçu de très haut niveau. Le but de ce tutoriel est vraiment de vous montrer à quel point Mulberry est simple et rapide à utiliser. Si vous vous sentez courageux, découvrez certaines des démos fournies avec le référentiel Mulberry. Vous y trouverez une application géniale pour un évier de cuisine qui vous donnera à peu près tout ce que vous aimeriez utiliser..
Si vous souhaitez en savoir plus sur Mulberry, la documentation officielle est plutôt bonne, bien que ce soit toujours un travail en cours. Si vous souhaitez voir un développement plus approfondi et approfondi du développement de Mulberry, notamment la création de composants pour des éléments tels que Twitter et Facebook, faites-le nous savoir dans la section commentaires.!
Accentsconagua