Chapitre 05

Construire une application "Restaurant"

Notions abordées lors de ce chapitre

• Contenu de l'application "Restaurant"
• La page d'accueil
• La page "Nous trouver"
• La page "Menus"
• La page "Nous contacter"

Contenu de l'application "Restaurant"

Le restaurant Julien dispose d'un site web depuis de nombreuses années. Son site offre une visite à 360° du restaurant et la possibilité de réserver une table en ligne.

Aujourd'hui le Julien souhaite développer sa visibilité et offrir à ses clients un site web orienté mobile. Pour l'instant, une simple application web optimisée pour les mobiles incluant les fonctionnalités suivantes :

• Information de contact

Incluant à la fois l'email et le téléphone. Idéalement les usagers doivent pouvoir cliquer sur le téléphone ou l'email et pouvoir rentrer en contact direct avec une personne physique.

• La localisation du restaurant

Incluant une Google Map et l'adresse du restaurant.

• Affichage du menu du jour

Incluant une simple liste avec les entrées, les plats et les desserts proposés chaque jour.

• Proposer aux clients de consulter le vrai site web du restaurant

Un simple lien indiquant aux clients qu'ils peuvent visiter une version "desktop" du site web plus complète.

La page d'accueil

A partir du fichier c4-inset-list.html du chapitre 04 créez un fichier index.html. Cette page va contenir un titre, un paragraphe et une liste de liens.

La page "Nous trouver"

Api Google Map et Api Key

Cliquez sur le bouton "Obtenir une clé" que vous devez insérer dans votre code.

A présent pour intégrer une carte, il suffit d'ajouter un div avec un attribut id dans le corps de la page et copier-coller le code fourni sur Google Maps Api avant la fermeture du body.

Le script utilisé dans cet exemple demande des coordonnées latitude/longitude que l'on peut obtenir grâce à l'outil coordonnées gps fourni par Google.

<div role="main" class="ui-content">
    <div id="map"></div>
</div>

<script>
    function initMap() {
        var paris = {lat: 48.8232469, lng: 2.3265347999999904};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 16,
          center: paris
        });
        var marker = new google.maps.Marker({
          position: paris,
          map: map
        });
    }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YourApiKey&callback=initMap"></script>

A ce stade la carte s'affiche sur la page " nous trouver ", uniquement si l'on rafraîchit manuellement la page car celle-ci est appelée avec Ajax. Pour l'instant, nous allons faire un lien vers cette page sans appel Ajax en utilisant l'attribut data-ajax="false" et l'attribut data-prefetch="true" sur la page index.html pour diminuer le temps de chargement.

<li><a data-ajax="false" data-prefetch="true" href="findus.html">Nous trouver</a></li>

Il ne nous reste qu'à ajouter un lien de retour sur la page " nous trouver " et le tour est joué.

<div data-role="header" data-position="fixed">
    <h1>Nous trouver</h1>
    <a href="index.html" data-rel="back">Retour</a>
</div>

La page "Menus"

La page "Nous contacter"

Voir la démo