L'ancienne interface du [site de FindMeme](https://findmeme.johanstick.fr) avait été développée en très peu de temps, sans prendre en considération les petits formats d'écrans, ni le design et les fonctionnalités pour me focaliser sur la liste de contenus.

Avec le temps, l'interface est devenue une priorité pour délivrer une expérience utilisateur encore plus forte. En lien avec la sortie de [FindMeme sur téléphone](https://read.cv/stick/findmeme-mobile), le site a été redéveloppé de zéro, sur la base de l'application mobile.

Le design, sur tous types d'écrans, les fonctionnalités, les réglages, l'affichage des contenus et la recherche ont été revus avec cette nouvelle version v2.0 de FindMeme.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FEyTBKisr4UQMqCIKNDYs2dzqT063%2FgZcih4uUtmZiowGD8nTg%2F138a00ba-a74b-4ec6-830b-520a66548d19.png?alt=media&token=108ecdb4-71d5-431a-96f3-2141e83658ac","id":"138a00ba-a74b-4ec6-830b-520a66548d19","width":1920,"height":1080,"filename":"Accueil Mockup (thème octobre) - WEB - v2.0.png","type":"image/png","caption":"","border":false}]}
```

## **Fusion avec l'app**

Ce nouveau site et l'application pour mobile partagent la même base de code, cela permet aux deux projets d'être mis à jour en même temps, et de partager les mêmes fonctionnalités, avec une interface familière.

## **Nouvelles fonctionnalités**

* Plus rapide à charger grâce à un cache amélioré et un meilleur support hors connexion.

* Un meilleur design avec des animations et transitions fournies par [Framework7](https://framework7.io).

* Prévisualiser une vidéo en passant le curseur dessus, afficher les détails avec un clic droit / appui long sur mobile.

* Partager le lien d'un meme sur une messagerie compatible affichera une prévisualisation de l'image, avec sa description.

* Partager un meme avec une autre application via la fiche système (navigateurs basés sur Chromium et Safari).

* Installable en tant que PWA sur les navigateurs compatibles, et sur le [Microsoft Store](https://apps.microsoft.com/detail/9n8p5l2dgcxb?mode=mini).

## **Accéder à l'ancienne version**

L'ancienne version du site de FindMeme est encore [accessible ici](https://old.findmeme.johanstick.fr), les contenus sur celui-ci continueront d'être mis à jour jusqu'à ce que le site soit complètement obsolète.

Le nouveau FindMeme sur navigateur

FindMeme est une plateforme permettant de retrouver et de chercher rapidement des memes, plus de 700 images et vidéos y sont présentes pour vous aider à placer l'extrait que vous souhaitez au moment parfait dans votre conversation.

Pour lancer une recherche, il était nécessaire d'ouvrir le site FindMeme et d'y saisir votre requête dans le champ situé tout en haut de la page, l'accessibilité et l'ergonomie n'étaient pas non plus parfaites pour les utilisateurs sur mobile avant la refonte de celui-ci.

Désormais, si vous êtes sur Android, vous pouvez télécharger la [nouvelle application](https://play.google.com/store/apps/details?id=fr.johanstick.findmeme) depuis le Play Store. Celle-ci a été conçue pour vous apporter une meilleure expérience utilisateur, dans une meilleure interface, en gardant les mêmes contenus et le même algorithme de recherche.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FEyTBKisr4UQMqCIKNDYs2dzqT063%2Ffindmeme-mobile%2F8861c67b-0a50-495b-9ffb-91b42411ab9e.png?alt=media&token=31812614-5f6a-428b-970b-701a740fd4e7","id":"8861c67b-0a50-495b-9ffb-91b42411ab9e","width":1024,"height":500,"filename":"Bannière FindMeme Mobile v2.0.png","type":"image/png","caption":"","border":false}]}
```

## **Télécharger l'app**

Si vous êtes sur Android, vous pouvez télécharger l'application depuis le [Play Store](https://play.google.com/store/apps/details?id=fr.johanstick.findmeme), ou installer le [fichier APK](https://dl.bassinecorp.fr/findmeme?os=android) manuellement.

Si vous êtes sur iOS, vous devrez encore être patient, ou [installer manuellement](https://read.cv/stick/sideload-ios) l'app via ce [fichier IPA](https://dl.bassinecorp.fr/findmeme?os=ios).

> L'application a été conçue pour être cross-platform et pour fonctionner sur tous les systèmes majeurs. En raison des frais de publication sur l'App Store, celle-ci n'est pas officiellement disponible sur iPhone et iPad.

## **Compatibilité**

L'application est disponible au téléchargement sur tous les appareils disposant d'Android 9 ou plus récent, cependant, aucun support ne peut être garanti pour les versions antérieures à Android 11.

Si vous rencontrez un problème avec une version non supportée, essayez de mettre à jour [Android System WebView](https://play.google.com/store/apps/details?id=com.google.android.webview).

## **Évolutions par rapport au site**

Une appli "native" débloque de nouvelles possibilités pour fournir une expérience utilisateur encore meilleure, tout en repoussant certaines limites que les navigateurs pourraient ou ont déjà imposées. Elle permet également d'avoir un accès plus important au système, à la galerie du téléphone par exemple.

> La liste des memes proposés restera mise à jour indépendamment de l'appli elle-même, pour vous fournir des nouveaux contenus rapidement.

## **Infos techniques**

[Capacitor](https://capacitorjs.com/) a été utilisé pour concevoir cette application, ainsi que [Svelte](https://svelte.dev/), [Tailwind CSS](https://tailwindcss.com/) et [Framework7](https://framework7.io/). Il aurait été préférable d'utiliser une technologie native, mais cela aurait augmenté le niveau d'efforts requis pour obtenir une base cross-platform et compatible avec les navigateurs.

FindMeme arrive sur téléphone

Il est possible d'installer des applications sur un iPhone, même si elles ne sont pas disponibles sur l'App Store, en utilisant un fichier d'installation « .ipa ». Pour cela, il est nécessaire d'utiliser un logiciel depuis un PC ou Mac, et de réinstaller l'application tous les 7 jours.

> Cet article ne parlera pas des nouvelles méthodes de sideloading proposées par Apple pour les membres de l'Union européenne puisqu'elles ne sont pas assez intéressantes à l'heure actuelle.

> Vous ne devez suivre qu'une seule des deux méthodes proposés ci-dessous, celles-ci vous demanderont de saisir vos identifiants Apple dans un logiciel. Vous pouvez utiliser un compte secondaire, même s'il n'a jamais été connecté à votre iPhone, malgré que ces deux apps soient suffisamment réputées.

## **Prérequis**

Sous Windows, vous aurez besoin d'installer iTunes depuis le site d'Apple, la version disponible sur le Microsoft Store ne fonctionnera pas.

* [iTunes 32-bits](https://www.apple.com/itunes/download/win32/)

* [iTunes 64-bits](https://www.apple.com/itunes/download/win64/)

Si vous êtes sur iOS 16 ou supérieur, vous aurez besoin d'activer le mode développeur dans Réglages → Confidentialité et sécurité → Mode développeur. Cette étape vous demandera de redémarrer votre appareil, elle est à effectuer une seule fois et aucune donnée ne sera effacée sur votre iPhone.

## **1ère méthode : AltStore**

1. Téléchargez AltServer (World) pour [Windows](https://cdn.altstore.io/file/altstore/altinstaller.zip) (10 et supérieur) ou [macOS](https://cdn.altstore.io/file/altstore/altserver.zip) (Big Sur et supérieur).

2. Une fois installé, exécutez-le sur votre ordinateur, puis branchez votre iPhone, autorisez la connexion si on vous le demande.

3. Localisez et cliquer sur l'icône dans la barre des tâches/de menu sur votre ordinateur.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FEyTBKisr4UQMqCIKNDYs2dzqT063%2Fxss29wPHe6ASbShLy087%2F738658c6-244e-4a9f-88e6-f0485ce27400.png?alt=media&token=b86f73ac-b024-467f-881f-357fc575f00c","id":"738658c6-244e-4a9f-88e6-f0485ce27400","width":441,"height":467,"filename":"image.png","type":"image/png","caption":"Icône d'AltServer sous Windows. Source : limonemulator.com","border":true}]}
```

4. Passez votre curseur sur "Install AltStore" et sélectionner votre iPhone dans la liste.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FEyTBKisr4UQMqCIKNDYs2dzqT063%2Fxss29wPHe6ASbShLy087%2Feb9e795d-abd3-422a-8751-599da2eb04dd.png?alt=media&token=b81e5db4-7f64-4d1c-bf79-e7991c0ea97e","id":"eb9e795d-abd3-422a-8751-599da2eb04dd","width":918,"height":370,"filename":"image.png","type":"image/png","caption":"Installer AltStore sur un iPhone via macOS. Source : frandroid.com","border":false}]}
```

5. AltStore vous demandera de saisir l'adresse mail et le mot de passe de votre identifiant Apple. Cela est nécessaire pour lui permettre de demander aux serveurs d'Apple de générer une signature pour l'appli que vous comptez installer. Vous pouvez utiliser un compte secondaire/poubelle si vous le souhaitez.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FEyTBKisr4UQMqCIKNDYs2dzqT063%2Fxss29wPHe6ASbShLy087%2Fd9e2475a-4511-436b-b1bd-9ab98c6d72ce.png?alt=media&token=bb63e46d-a365-4d40-a523-d8ed241d240f","id":"d9e2475a-4511-436b-b1bd-9ab98c6d72ce","width":680,"height":597,"filename":"image.png","type":"image/png","caption":"Saisissez votre identifiant Apple dans AltServer. Source : kennycaldieraro.fr","border":false}]}
```

6. Patientez 30 secondes jusqu'à ce qu'AltStore s'affiche sur l'écran d'accueil. Laissez votre iPhone branché à votre ordinateur.

7. Ouvrez l'app Réglages et rendez-vous dans Général → VPN & gestion de l’appareil → votre adresse mail → Vérifier l’app.

8. Vous allez désormais pouvoir ouvrir AltStore sur votre téléphone. Pour installer une app tierce, partager son fichier d'installation avec AltStore depuis Fichiers.

> Pour la première installation, l'app peut vous redemander de vous connecter à votre compte Apple, le même que dans l'appli sur PC.
>
> Au bout de 7 jours, il ne sera plus possible d'ouvrir l'app précédemment installée. Vous pouvez contrer cette limitation en la "resignant" via AltStore avant la durée maximale. Rendez-vous dans "My Apps" et cliquez sur le bouton précisant la date d'expiration de l'app.

## **2ème méthode : Sideloadly**

1. Téléchargez et ouvrez Sideloadly sur votre PC : [Windows 32-bits](https://sideloadly.io/SideloadlySetup32.exe) ; [Windows 64-bits](https://sideloadly.io/SideloadlySetup64.exe) ; [macOS](https://sideloadly.io/SideloadlySetup.dmg)

2. Branchez votre iPhone à votre PC et sélectionnez-le dans la liste en bas de "iDevice". Cliquez sur le bouton "IPA" et sélectionnez le fichier d'installation IPA, puis saisissez l'adresse e-mail de votre compte Apple dans "Apple ID". Cliquer ensuite sur Start.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FEyTBKisr4UQMqCIKNDYs2dzqT063%2Fxss29wPHe6ASbShLy087%2F610653a4-fddd-4626-ab3d-c28c72c054da.png?alt=media&token=a7fded43-6cd6-48f9-8b72-0570618db1da","id":"610653a4-fddd-4626-ab3d-c28c72c054da","width":712,"height":428,"filename":"image.png","type":"image/png","caption":"Interface principale de Sideloadly. Source : oim","border":false}]}
```

3. Une fenêtre s'affichera pour vous demander le mot de passe de votre compte Apple. Cela est nécessaire pour lui permettre de demander aux serveurs d'Apple de générer une signature pour l'appli que vous comptez installer. Vous pouvez utiliser un compte secondaire/poubelle si vous le souhaitez.

4. Quelques minutes plus tard, l'application sera installée sur votre iPhone. Dans le cas contraire, il se peut qu'une erreur s'affiche dans le logiciel Sideloadly.

5. Ouvrez l'app Réglages et rendez-vous dans Général → VPN & gestion de l’appareil → votre adresse mail → Vérifier l’app.

> Au bout de 7 jours, il ne sera plus possible d'ouvrir l'app précédemment installée, vous aurez besoin de la réinstaller avec Sideloadly ou un autre logiciel.