Développeuse web Full-Stack

Auteur/autrice : chiyukisama (Page 1 of 2)

Marketing Digital

Suite à plusieurs heures de marketing digital, nous avons dû réaliser un projet oral de groupes à 5. Nous avions deux thèmes :

  • Urban Street Wear
  • Pot de pâtes à tartiner noisettes bio

Nous devions choisir l’un de ses thèmes, nous créer une entreprise (donc imaginer la place qu’elle a dans le marché et voir où nous souhaitions emmenez notre entreprise et comment).


Étude du marché

La première étape était de faire une étude de marché dans le domaine des vêtements street wear.

  • Comment se porte le marché (croissance etc…)
  • Qui sont nos concurrents
  • Comment nos concurrents vendent leur marque ?
  • Qu’est ce qui est bien ou non en général dans ce qu’ils font.

SWOT

Nous avons dû ensuite réaliser le SWOT de notre entreprise.

  • Strength (Force)
  • Weaknesses (Faiblesse)
  • Opportunities (Oportunité)
  • Threats (Menace)

Comme nous avons dû imaginer notre entreprise, cette partie a dû être inventé. Néanmoins, il fallait que ce soit cohérent par rapport à ce que nous souhaitons faire pour améliorer notre entreprise (dernière partie).


Les cibles

Nous avons dû, en troisième, analyser nos cibles. Qui est visé (qui va porter nos vêtements), donc les jeunes. Les personnes qui pourront influencer notre cible, ici les parents qui achèteront les vêtements au plus jeune ou qui pourront même les recommandés si ça leur plait pour leur enfant.

Ensuite, il fallait également réfléchir à un relais, qui est susceptible de nous aider à vendre nos vêtements ? Les influenceurs ! La plupart des influenceurs sont directement nos cibles et ils partagent également des vidéos / photos à notre cœur de cible.


Personae

Ce n’est pas tout de notre cible, il faut également la décrire plus précisément,

  • Qui elle est ?
  • Ces centres d’intérêt ?
  • Son cercle social ?
  • Son activité (étudiant, fonctionnaire, etc..)
  • Ses besoins
  • etc…

Objectif Smart

Après avoir bien défini notre entreprise et trouver notre cible. Il faut savoir vers quoi on souhaite se diriger. Qu’est-ce qu’on souhaite pour notre entreprise, ou on veut l’emmener.


Avantage positionnement

Maintenant, nous devons savoir où est-ce qu’on se place parmi nos concurrents et quel avantage nous avons sur eux. Ici aussi, nous devions inventer.


Recommandation stratégique

Pour finir, il nous restait plus qu’à trouver comment arriver à nos fins. Quels sont les stratégies que nous souhaitons utiliser.

  • Site web : Nous avons décidé que réaliser un site web serait important pour notre entreprise. De nos jours, énormément des marques de vêtements ont un site web, pour permettre aux utilisateurs d’acheter en ligne.
  • Réseau social : Notre cible relais est « les Influenceurs », il est donc naturel que nous souhaitions nous imposer sur les réseaux sociaux en proposant par exemple des partenariats.
  • Logo : Comme c’est une entreprise fictive nous n’avons pas de logo, cependant nous avons décidé qu’il était important de faire un point sur le logo, effectivement refaire / faire un log permet de donner une « image » à notre marque. Le but, c’est que ce logo soit facile à mémoriser / refaire et qu’il puisse marquer les esprits.
  • Pubs TV : Les enfants regardent la télé et les parents aussi. Notre but ici est d’inciter les enfants qui vont grandir à acheter notre marque dans le futur, et de montrer notre marque aux parents pour qu’ils l’achètent à leur ados.
  • Vente sur d’autre plateforme : Aujourd’hui, beaucoup de personnes achètent sur des sites comme « Shein ». Pour que notre marque soit vue, il est donc nécessaire et que nous fassions vendre nos produits sur des sites comme celui-ci.
  • Vente physique dans d’autre magasin : Comme la vente en ligne, beaucoup de magasin comme « Lafayette » vendent différent vêtement de marque.
  • Améliorer la politique de retour : Promettre un remboursement / la possibilité de tester etc.. Mets les clients en confiance. « Pourquoi acheter une nouvelle marque, si ça se trouve elle n’est pas bien ». C’est pour ça qu’il est nécessaire de mettre les clients en confiance.


Conclusion

Je pense que ce type de projet est nécessaire pour des développeurs. C’est bien beau de faire des sites pour des entreprises, mais pourquoi les entreprises ont besoin de sites ? Comment développer une entreprise, comment se positionner. Même de notre côté, si on est dans une agence, on aura forcément toutes ses questions à se poser pour que notre agence soit choisis pour réaliser les sites d’autrui.

Ce projet est donc une très bonne expérience qui nous permet de voir les entreprises autrement et qui nous permet de réfléchir différemment.

Jeux Taupe

Ce petit jeu a été développé entièrement en JavaScript avec des animations en JavaScript. Il n’y a aucune architecture particulière et aucun SQL dans ce jeu. Il m’a permis de m’entrainer en JavaScript et de montrer ce que je peux faire.

  • HTML/CSS
  • JavaScript
  • DaFont
  • GitHub

Diagramme de cas d’utilisation

Présentation

Le jeu se tient sur une seule page, il suffit de cliquer sur « JOUER » pour pouvoir choisir un niveau de jeu et commencer à jouer. Le score s’actualise au fil de la partie et revient à 0 à la fin.


Affichage des têtes

Dans cette partie de code, l’affichage de la tête du lapin se fait grâce à un ajout de classe sur une div qui contient le nuage. Pour que le jeu ne dure pas une éternité, la variable booléen timeUp est mise à true au bout de 10 secondes, tant que la variable est à false, on continue d’appeler notre fonction récursivement.


Score

La fonction pour changer le score est celle ci-devant. On parcourt toutes les têtes de lapin, si le joueur clique sur une tête, on utilise isTrusted pour tester s’il a vraiment cliqué. S’il n’a pas cliqué, on ne fait rien, sinon ou implémente le score. On enlève la tête du lapin pour qu’il ne puisse pas cliquer plusieurs fois dessus.

Webdesign et Figma

Utilisation basique de Figma dans le but de réaliser son propre site et faire ses propres recherches d’inspiration. Ici le but était de réaliser le désigne d’un site de gardiennage de plante.


Recherche d’inspiration

La première mission était la recherche d’inspiration sur divers sites (behance dans tous les cas de l’exemple ici).


Wireframe

Les seconde et troisième étapes étaient la réalisation du wireframe (avec obligation de se baser sur celui du professeur) et la réalisation de la palette de couleur et les différents fonts à utiliser.


Réalisation complète du projet

Après avoir réalisé ces trois étapes primordiales, il nous suffit de terminer notre projet en y ajoutant ou non des effets.


Responsive

Il nous suffit enfin de finir par le responsive du site


Conclusion

Ce projet est très intéressant. Le web design demande beaucoup d’entrainement et de recherche, de veille pour être à jour au niveau graphisme. Un design comme celui ci-dessus ne serait pas viable pour un vrai site, car il n’est pas assez épuré, les couleurs font très lourdes. Cependant, c’est un très bon entrainement et une bonne découverte du webdesign et de Figma.

Unity

Qu’est ce que la plateforme de développement: Unity

Unity est un moteur 3D de jeu multiplateforme (Windows / Linux / mac, Android / iOS, Xbox One / PS4 etc…). On peut développer des jeux avec des scripts et on peut aussi y faire de la modélisation 3D.


Pourquoi Unity?

L’envie de développer et de créer m’a menée vers Unity, développer un jeu-vidéo est intéressant, on apprend par soi-même, on se renseigne. Unity est une plateforme qui évolue énormément, entre le début de la création et jusqu’à la compilation du jeu, j’ai pu développer sur trois versions d’Unity différentes avant de retourner sur une ancienne version. De plus, grâce à Udemy j’ai pu trouver une formation complète qui m’a permis de réaliser un jeu vidéo et d’en apprendre plus sur Unity.


Le rapport avec l’option Slam :

Unity a la particularité d’utiliser le langage de programmation C# pour réaliser des animations et des interactions entre les objets et les joueurs.


Comment installer Unity ?

Avant d’installer Unity, il faut s’inscrire. La plateforme a trois types de licence dont deux licences obligatoires en fonction des revenus générés grâce à la création de jeux. La première licence est gratuite, tous les éléments importants pour créer des jeux y sont présents. Ensuite, nous avons deux licences allant de 37 euros, pour quelqu’un gagnant plus de 91 000 euros, mais moins de 182 000 euros sur son jeu, à 138 euros, pour les personnes gagnant plus de 182 000 euros. Bien entendu, les personnes ayant des licences payantes ont des avantages comme des accès prioritaires ou des diagnostics cloud. Ensuite vous pouvez télécharger sur le site d’Unity l’installeur Download – Unity. Il existe deux installeurs de Unity différents, Unity et Unity Hub. Unity est l’installeur par défaut, le premier. Alors que Unity Hub est arrivé ensuite. Unity Hub permet de changer de version si on le souhaite en cours de projet. Le changement de version sur Unity Hub se fait sans passer par le site web et il est possible d’installer comme cela plusieurs versions d’Unity sur une seule machine. Tandis que l’autre installeur de Unity permet seulement de gérer ses projets sur le cloud en plus de quelques fonctionnalités de base (créer un projet).


Comment créer un projet? Unity

Quand l’installation est finie (installation de Unity Hub dans notre exemple), la création de projet est simple. Un bouton New affichera un pop-up et demandera le type de jeux que nous souhaitons réaliser, son nom et où nous souhaitons qu’il se trouve. Ensuite, il faudra double-cliquer sur le projet et Unity affichera le plan de travail. Il est aussi possible d’ajouter un projet existant sur notre ordinateur en utilisant le bouton Add, ce qui ouvrira un pop-up avec l’emplacement où se situent tous les projets existants.


Comment se présente l’outil ?

Unity contient énormément de composants et de fenêtres, on peut les placer comme on le souhaite.


La scène : Fenêtre rouge

C’est ici que le plus gros de l’application se trouve. C’est ici que l’on fait tous nos changements, que l’on place nos GameObject (personnages, murs, etc…). Unity fonctionne par scènes, par exemple dans notre labyrinthe, nous avons plusieurs niveaux, chaque niveau correspond à une nouvelle scène. Voici par exemple la scène 1. Pour visualiser notre scène, il nous faut une caméra par scène, dans notre cas le joueur a une caméra à la place des yeux (invisible pour le joueur).


La hiérarchie : Fenêtre bleu

C’est ici que l’on peut voir tous les composants de notre scène, c’est grâce aux create que l’on ajoute des composants ou grâce aux prefabs. Les prefabs sont toutes les icônes bleues visibles, ce sont des objets qui sont liés entre eux par un lien de parenté et qui peuvent être stockés pour être réutilisés dans d’autres scènes. Si un prefab est modifié et que l’on applique la modification (elle peut être seulement locale si on le souhaite), tous les prefabs du jeu seront modifiés. C’est pratique quand par exemple un mur est trop bas, au lieu de modifier tous les murs un par un, on n’en modifie qu’un seul. L’autre particularité des prefabs et que chaque enfant (c’est à dire tout ce qui se trouve dans le premier objet de la hiérarchie) à comme point 0 le centre de l’objet parent. Si on souhaite centrer un objet enfant, lui donner des coordonnés 0;0;0 ne le mettra pas au centre de la scène.


Le projet : Fenêtre violette

Tout ce qui concerne notre jeu se trouve ici, les assets téléchargés pour le jeu, les prefabs, les différentes scènes (nous avons un aperçu des scènes sur l’image), les sons, les images. Quand notre jeu est compilé, tout ce qui se trouve dans le dossier Asset est trié et seul ce qui est utile aux jeux est gardé, le reste n’est pas compilé : tous les matériaux téléchargés dans des packs mais non utilisés par exemple.


L’inspector : Fenêtre Verte

C’est dans cette fenêtre que nous modifions nos objets, en leur rajoutant des scripts, des zones de collision, des animations, des sons. C’est ici aussi que les positions sont enregistrées, que nous pouvons facilement leur faire faire une rotation sans le faire à la main (tourner à précisément 90° plutôt que de le faire à l’œil). Tout ce qu’on doit savoir sur notre objet se trouve dans cette fenêtre, tous les détails.


Game : Fenêtre sans bordure

Ceci correspond à notre émulateur, c’est l’aperçu que voit la caméra, que voit le joueur. Quand on lance le jeu, c’est dans cette fenêtre que notre curseur est automatiquement bloqué. On peut choisir de mettre cette fenêtre en grand quand on appuie sur le bouton play, ou on peut la mettre de façon à avoir la vue d’un portable, on peut aussi choisir sa résolution, ici 16 : 9.


Autre fenêtre utile :

On retrouve deux fenêtres importantes, la première en bleu, correspond à l’asset store, c’est ici que l’on peut trouver des matériaux, des textures (le mur, le plafond), des objets (la clé et les ennemis), certain Asset sont payants, d’autres gratuits.
Ensuite nous avons la console, dans la fenêtre rouge. Quand on veut tester, faire des « Debug.Log » c’est ici que tous nos messages d’erreur et de débogage s’afficheront.


La veille

Pour me renseigner sur l’outil, sur son évolution, j’ai utilisé plusieurs sites, comme Udemy. Le professeur qui gère ce cours dans la plateforme Udemy, fait des mises à jour régulières pour les versions supérieures d’Unity. Le site de Unity partage aussi ses actualités importantes sur sa page d’accueil ou sur un onglet community du site : Unity Technologies Blog.


Voici une petite doc que j’ai réalisé concernant le code effectué en C#

Xamarin

L’api est réalisée en C#, elle permet la communication entre une base de données et une application WEB ou mobile. Les applications associées permettent de gérer des plannings de sport.

  • Xamarin / Visual Studio
  • MySQL
  • GitHub
  • C#
  • Po

Présentation API : Push

Grâce à l’api, on peut push, get et delete des données dans la base de données.


Autre Push

– Ajouter un moniteur sur une séance


Get

Exemple de get : get toutes les séances


Delete

Exemple de delete : Supprimer une séance.


Présentation planning

Avec l’application, nous pouvons réserver des créneaux pour faire des cours, des compétitions, ou juste l’activité en mode loisir.


Synthèse

Tout en réalisant ce projet, nous avons réalisé une application mobile destinée à récupérer des contacts sur son téléphone. Ce projet dans son intégralité nous a donc permis de découvrir les api et le développement mobile

Il a été également très difficile de suivre, de réaliser ce projet avec les moyens que nous avions. Nous étions au tout début du premier grand confinement, c’est un travail de groupe très compliqué, surtout que le Xamarin sortait de tous nos cours habituels. Nous avons toutefois acquis des petites bases qui pourront pourquoi pas nous servir.

Site pharmacie

Le site GSB Drive, est une application WEB faite via une architecture MVC, qui permet de commander des médicaments vendus sans ordonnance, similaire à un site d’e-commerce. Aucun moyen de paiement n’est nécessaire, car le paiement se fera dans l’officine de livraison, choisie à la fin du processus de commande. C’est un projet réalisé en groupe en deuxième année de BTS SIO

  • HTML / CSS /Bootstrap
  • JavaScript / Jquery
  • PHP
  • MySQL
  • MapBox
  • GitHub

Diagramme de cas d’utilisation: Utilisateur

Diagramme de cas d’utilisation: Visiteur

Premier aperçu

Lorsque l’on arrive sur le site, nous pouvons avoir le choix de S’inscrireSe connecterVoir le panier et Voir la liste des médicaments vendus. Toute personne, connectée ou non, peut remplir son panier qui reste sauvegardé dans le local storage en format JSON.
Un utilisateur connecté peut à tout moment modifier ses informations, consulter la liste de ses commandes, son panier et se déconnecter.


Inscription

L’inscription se déroule via un simple formulaire, où nous devons saisir notre adresse e-mail et notre mot de passe. Nous sommes connectés directement après une inscription.


Liste des commandes

Lors de la connexion apparaît un bouton Liste des Commandes qui permet de voir toutes les commandes déjà effectuées.


Panier

Après la sélection des médicaments, nous pouvons aller sur le panier.


La Map

En validant la commande, nous arrivons sur une carte interactive pour sélectionner l’officine de livraison. Une fois le processus de commande réalisé, apparaît un récapitulatif de la commande avec le lieu de livraison.


Synthèse

Ce projet nous a permis de travailler à plusieurs sur un site WEB, ce qui selon nous est plus compliqué que sur Visual Studio (vis-à-vis de Git.) Nous avons dû créer trois branches puis les réunir, ensuite, nous avons divisé le travail en plusieurs parties. En conclusion, le projet est bien terminé avec toutes les fonctionnalités d’un site d’achat en ligne.

GSB Drive

L’application GSB Drive, est une application Windows Forms, qui permet de gérer les stocks d’une officine. Nous pouvons ajouter des médicaments et en envoyer à d’autres officines. C’est un des premiers projet réalisé en groupe et en utilisant git sous Visual Studio.

  • C#
  • MySQL
  • GitHub

Diagramme de cas d’utilisation

Présentation

L’application contient plusieurs onglets :

  • Stockage
  • Stock
  • Commande
  • Historique

Premier onglet

Un des onglets permet d’ajouter des stocks dans la réserve de médicaments de l’entreprise GSB et d’envoyer des médicaments à d’autres officines.


Historique

Ensuite, l’entreprise GSB a plusieurs onglets de visualisation des produits. L’un de ces onglets permet de visualiser les commandes passées pour les stocks.


Stock

Un autre de ces onglets permet de voir les stocks de médicaments de notre entreprise.


Entrées, sorties

Enfin nous avons un onglet général qui permet de voir quel médicament rentre ou sort, c’est un aperçu général des transactions.

Site marchand

Premier projet réalisé PHP sans framework, sans MVC, sans composer ni rien et lié à une base de données. Réaliser en première année de BTS SIO. C’est un site marchand de musique.


Digramme de cas d’utilisation: Utilisateur

Diagramme de cas d’utilisation: Visiteur

Premier aperçu: La page d’accueil

La première page, la page d’accueil, contient une brève explication du site, des boutons de connexion et d’inscription, le panier, une barre de recherche pour chercher l’album souhaité et un menu avec tous les albums triés.


Recherche: « A »

Après avoir tapé « a » dans la barre de recherche, le site amène sur une page où sont affichés les artistes ayant un « a » dans leur nom d’artiste, les descriptions contenant un « a » et les genres contenant « a ». Quand on ajoute un article de la page de recherche, on retourne à l’accueil et l’icône panier affiche le montant à payer.


Panier

Quand on clique sur le panier, on arrive sur une page qui montre les albums présents, leur nombre et le prix à l’unité, puis le total. Quand on clique sur « acheter » si on n’est pas connecté, le site renvoie sur une page de login.


Synthèse

Ce projet est le premier gros site réalisé. Comme il a été réalisé en 1ʳᵉ année de BTS, il contient énormément de pages PHP et n’est pas très optimisé. Il manque certaines fonctionnalités. Mais avec du recul, on peut apprendre de ses erreurs et dans notre futur site web (fait principalement sur MVC/SLIM), ne pas oublier les composants importants comme : retirer des objets du panier, afficher les textes plus lisiblement.

Création de compte

Projet de création de commandes pour des comptes étudiants avec génération de mot de passe réalisé en première année de BTS SIO en C# sous Visual studio


Diagramme de cas d’utilisation

Explication du code

Le code est accessible dans le projet


DatagriedView: Ligne 25 à 32

Création du DataGridView avec quartes colonnes : nom, prénom, date, classe.


StreamReader: Ligne 34 à 50

StreamReader permet de lire un fichier. Donc on lit le fichier CSV et on récupère les données de chaque élève pour les afficher dans le DataGridView.


Générer: Ligne 52 à 57

Génération du DataGridView et blocage du bouton « charger » pour éviter de charger deux fois les élèves.


Création du mot de passe: Ligne 61 à 70

Quand on clique sur le bouton « Générer compte » :
   · le document bat s’ouvre et se met en « truncate » pour écraser l’ancien contenu s’il y a.
   · le document est ensuite fermé pour pouvoir être rouvert plus tard.
   · on crée une collection « Login ».
   · on crée une collection « mdp ».
   · on crée un tableau de lettres majuscules puis un tableau de lettres minuscules.
   · on crée une variable « Random » qui générera un nombre aléatoire.


Traitement des doublons: Ligne 71 à 107
  • Ouverture du doc bat pour écrire dedans (StreamWriter)
  • On crée une boucle « for » (pour) pour créer les logins.
  • On crée la variable « newLogin » pour écrire le login qu’on testera ensuite (pour éviter les doublons).
  • On crée la variable « existe » (on la met à « false » car on estime que le contenu « newLogin » n’existe pas encore).
  • On crée la variable « chiffre » pour ajouter un chiffre à la fin de chaque login (pour les personnes qui auraient la même première lettre de prénom et le même nom).
  • On réalise une boucle répétée pour tester les doublons.
  • On assigne « existe » à « false » pour éviter une boucle infinie.
  • On avait une collection « Login » que l’on va parcourir avec un « foreach » pour regarder si un Login correspond à « newLogin ». On va donc tester la ressemblance entre Login et newLogin. Si newLogin ressemble à un Login existant, on met « existe » à true.
  • On stoppe le foreach si « existe » est à « true » (pour éviter de continuer à parcourir la liste pour rien).
  • Le foreach fini, on teste si « existe » a été mis à « true » ; si oui, on rajoute à newLogin la variable chiffre.
  • On recommence toute la boucle tant que « existe » n’est pas à « false » (si on a plusieurs fois le même nom de compte, on aura par exemple rfourbier4).
  • Quand on sort de la boucle répéter, newLogin est ajouté à la collection de Login.
  • On crée le mot de passe avec une majuscule aléatoire, deux minuscules aléatoires, un chiffre, une majuscule aléatoire et une minuscule aléatoire.
  • On écrit ensuite la commande « dos » dans le document bat.

Calculatrice réseau

Projet de calculatrice réseau / IP réalisé en première année de BTS SIO en C# sous Visual studio


Diagramme de cas d’utilisation

Calcul de réseau: Premier onglet

En entrant une adresse IP suivi du masque, la calculatrice pose le calcul en binaire pour trouver le réseau de votre IP et vous renvoie le résultat avec une IP et un masque.


Calcul de la première IP sur le réseau et de la dernière IP: Deuxième onglet

En entrant une adresse IP suivi du masque, la calculatrice pose deux calculs, le premier calcul sert à trouver la première IP du réseau, donc une IP qui ne finit pas par 0. Le deuxième calcul sert à trouver la dernière IP hors broadcast. Les calculs sont de nouveaux en binaire et les résultats sont au format IP suivi du masque.


Calcul de sous réseau: Troisième onglet.

En entrant votre IP et votre masque, puis en sélectionnant dans la liste déroulante le nombre de sous-réseaux que vous souhaitez (de 2 à 4), la calculatrice vous affiche en binaire votre réseau puis vos sous-réseaux, et elle vous affiche au format IP vos sous-réseaux avec le masque.

« Older posts

© 2025 Nadia Schwaller

Theme by Anders NorenUp ↑