Implémentation des fonctionnalités clés d'une application communautaire

1. Module de gestion des annonces

1.1 Interface du mini-programme

La page des annonces affiche une liste d'informations communautaires avec images, titres, dates et contenus. La structure utilise la boucle wx:for pour itérer sur les données.

<!-- Template pour la liste des annonces -->
<view class="liste-annonces">
    <view wx:for="{{annoncesList}}" wx:key="identifiant" class="carte-annonce">
        <image class="vignette" src='{{item.image_url}}' mode="aspectFill"></image>
        <view class="corps-annonce">
            <text class="titre-annonce">{{item.titre}}</text>
            <text class="date-annonce">{{item.date_publication}}</text>
            <text class="contenu-annonce">{{item.texte}}</text>
        </view>
    </view>
</view>

/* Styles pour la page des annonces */
page {
    fond-couleur: #fff;
    taille-police: 28rpx;
}

.liste-annonces {
    espacement-interne: 20rpx;
}

.carte-annonce {
    affichage: flex;
    espacement-interne-vertical: 20rpx;
    bordure-bas: 1rpx solide #eee;
}

.vignette {
    largeur: 120rpx;
    hauteur: 120rpx;
    rayon-bordure: 8rpx;
    marge-droite: 20rpx;
}

.corps-annonce {
    flex: 1;
    affichage: flex;
    direction: colonne;
    justification-espace: espace-entre;
}

// Logique de la page des annonces
import chemins_api from '../../config/chemins'

Page({
    donnees: {
        annoncesList: []
    },

    auChargement() {
        this.chargerDonnees()
    },

    chargerDonnees() {
        wx.showLoading({ masque: true })
        wx.request({
            url: chemins_api.annonces,
            methode: 'GET',
            succes: (reponse) => {
                this.setData({
                    annoncesList: reponse.data
                })
            },
            complet: () => {
                wx.hideLoading()
            }
        })
    }
})

1.2 API backend

Le backend fournit les données via Django REST Framework avec un sérialiseur formatant les dates.

# Configuration du sérialiseur pour les annonces
class AnnonceSerializer(serializers.ModelSerializer):
    class Meta:
        model = Annonce
        champs = ['id', 'titre', 'image_url', 'date_publication', 'texte']
        options_supplementaires = {
            'date_publication': {'format': '%Y-%m-%d'}
        }

# Vue API pour les annonces
class VueAnnonce(GenericViewSet, ListModelMixin):
    ensemble_requetes = Annonce.objects.all().order_by('date_publication')
    classe_serialiseur = AnnonceSerializer

2. Système de gestion des activités

2.1 Interface utilisateur

La liste des activités montre les détails de chaque événement avec un bouton d'inscription. Li'nterface gère les états d'inscription et l'affichage du nombre de participants.

<!-- Structure pour afficher une activité -->
<view wx:for="{{activitesList}}" wx:key="identifiant" class="element-activite">
    <view class="details-activite">
        <text class="nom-activite">{{item.nom}}</text>
        <text class="statut-inscription">Inscrits: {{item.inscrits}} / {{item.capacite}}</text>
        <text class="recompense">Points: {{item.points}}</text>
        <text class="date-activite">{{item.quand}}</text>
        <text class="description-activite">{{item.description}}</text>
    </view>
    <button class="bouton-inscription" bind:tap="demanderInscription" mark:id="{{item.id}}">
        S'inscrire
    </button>
</view>

2.2 Structure de données backend

Le modèle de données inclut des relations many-to-many entre utilisateurs et activités via une table d'association.

# Modèles Django pour le système d'activites
class ProfilUtilisateur(models.Model):
    nom_complet = models.CharField(max_length=100)
    avatar = models.FileField(upload_to='avatars/')
    points_accumules = models.IntegerField(default=0)
    telephone_mobile = models.CharField(max_length=11, null=True)

class Activite(models.Model):
    intitule = models.CharField(max_length=200)
    description = models.TextField(blank=True)
    date_evenement = models.DateField()
    inscrits_actuels = models.IntegerField(default=0)
    capacite_maximale = models.IntegerField(default=0)
    recompense_points = models.IntegerField(default=0)
    participants = models.ManyToManyField(
        ProfilUtilisateur,
        through='EnregistrementParticipation'
    )

class EnregistrementParticipation(models.Model):
    participant = models.ForeignKey(ProfilUtilisateur, on_delete=models.CASCADE)
    activite = models.ForeignKey(Activite, on_delete=models.CASCADE)
    inscription_validee = models.BooleanField(default=False)

3. Authentification et gestion des utilisateurs

3.1 Flux d'authentification

Le système propose deux méthodes de connexion : via le numéro de téléphone WeChat (one-click) ou avec vérification par SMS standard. Les deux conduisent à la génération d'un token JWT pour maintenir la session.

3.2 Page profil utilisateur

L'interface s'adapte en fonction de l'état d'uathentification de l'utilisateur, affichant soit un écran de connexion, soit le tableau de bord personnel.

// Gestion de l'authentification dans app.js
App({
    donnees_globales: {
        profil_actuel: null
    },

    initialiserProfil: function(nom, points, avatar, jeton) {
        var profil = {
            nom: nom,
            points: points,
            avatar: avatar,
            jeton: jeton
        }
        this.donnees_globales.profil_actuel = profil
        wx.setStorageSync('donnees_profil', profil)
    },

    deconnexionProfil: function() {
        wx.removeStorageSync('donnees_profil')
        this.donnees_globales.profil_actuel = null
    },

    auLancement() {
        var profil_stocke = wx.getStorageSync('donnees_profil')
        this.donnees_globales.profil_actuel = profil_stocke
    }
})

3.3 Endpoints API d'authentification

Le backend gère l'envoi de SMS, la vérification des codes et la création de tokens. Une classe d'authentification personnalisée extrait le token JWT des en-têtes HTTP.

# Vues API pour l'authentification
class VueAuthentification(GenericViewSet):
    @action(methodes=['POST'], detail=False)
    def connexion_sms(self, requete, *args, **kwargs):
        numero = requete.data.get('telephone')
        code_saisi = requete.data.get('code_verification')
        
        code_stocke = cache.get(f'sms_{numero}')
        if code_saisi != code_stocke:
            return Response({'statut': 'erreur', 'message': 'Code incorrect'})
        
        utilisateur, cree = ProfilUtilisateur.objects.get_or_create(
            telephone_mobile=numero,
            defaults={'nom_complet': generateur_faux_noms().name()}
        )
        
        jeton_acces = RefreshToken.for_user(utilisateur)
        return Response({
            'statut': 'succes',
            'token_acces': str(jeton_acces.access_token),
            'donnees_utilisateur': ProfilSerializer(utilisateur).data
        })

    @action(methodes=['POST'], detail=False)
    def connexion_rapide(self, requete, *args, **kwargs):
        code_wechat = requete.data.get('code')
        # Logique d'échange du code contre le numéro Wechat
        # ... implémentation de l'appel API Wechat
        return Response({'statut': 'succes', 'token_acces': '...'})

4. Système d'inscription aux activités

La fonctionnalité permet aux utilisateurs authentifiés de s'inscrire à des activités. Le système vérifie les doublons et met à jour les compteurs de participants.

# Vue pour l'inscription aux activités
class VueInscriptionActivite(GenericViewSet):
    @action(methodes=['POST'], detail=False)
    def s_inscrire(self, requete, *args, **kwargs):
        activite_id = requete.data.get('activite_id')
        utilisateur = requete.user
        
        activite = Activite.objects.get(pk=activite_id)
        
        if EnregistrementParticipation.objects.filter(
            activite=activite, 
            participant=utilisateur
        ).exists():
            return Response({'statut': 'erreur', 'message': 'Déjà inscrit'})
        
        if activite.inscrits_actuels >= activite.capacite_maximale:
            return Response({'statut': 'erreur', 'message': 'Activité complète'})
        
        EnregistrementParticipation.objects.create(
            activite=activite,
            participant=utilisateur
        )
        activite.inscrits_actuels += 1
        activite.save()
        
        return Response({'statut': 'succes', 'message': 'Inscription confirmée'})

5. Système de points et récompenses

Les utilisateurs accumulent des points en participant aux activités, stockés dans leur profil. Ces points peuvent être échangés dans une future boutique de récompenses (implémentation à venir).