Skip to content

Chapitre 05

Jump to bottom
ChristopheGueroult edited this page Sep 7, 2017 · 9 revisions

Construire une application "Restaurant"

Notions abordées lors de ce chapitre

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éons un fichier index.html. Ajoutons une image de fond sur le body et un texte de présentation du restaurant.

Créez un dossier css à la racine du projet dans lequel vous créerez un fichier styles.css pour y inclure les css de l'application.

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>

La page "Menus"

La page "Nous contacter"

Clone this wiki locally