Comment puisje créer une application en 10 jours?

Dans cet épisode du Smashing Podcast, nous parlons de créer des applications selon un calendrier serré. Comment transformer rapidement un projet pour répondre à une situation émergente comme COVID-19? Drew McLellan parle à Phil Smith pour le découvrir.

Notes de présentation

Mise à jour hebdomadaire

Transcription

Drew McLellan: Il est directeur du studio de développement Web à pile complète amillionmonkeys, où il s'associe avec des propriétaires d'entreprise et des agences créatives pour créer des produits numériques qui ont un impact. Il a travaillé sur des projets pour la BBC, AirBnB, Sky Cinema, Pearson, ITV et Sussex Wildlife Trust pour n'en nommer que quelques-uns et travaille à travers la pile avec React, Vue, Laravel, Gatsby et plus encore. Originaire de Brighton sur la côte sud du Royaume-Uni, il est également auteur de Smashing Magazine, écrivant récemment sur le framework JavaScript Alpine. Donc, nous savons qu'il est un développeur et un communicateur qualifié, mais saviez-vous qu'il peut résoudre un Rubik’s Cube en six secondes en utilisant uniquement ses pieds? Mes amis Smashing, veuillez accueillir Phil Smith.

Drew: Salut, Phil. Comment allez-vous?

Phil Smith: J'écrase, Drew.

Drew: Nous sommes au cœur de la crise de COVID-19 et je pense que l'une des façons intéressantes nous sommes placés en tant que concepteurs et développeurs et technologues doit être dans cette position où nous pouvons toujours travailler et nous pouvons toujours faire notre travail. Et le travail que nous faisons est souvent basé sur l’accès à l’information ou la possibilité de communiquer, ce qui est, je pense, très pertinent dans une situation comme celle-ci. J'étais intéressé à voir comment ces compétences pourraient être utilisées pour aider en temps de crise, puis j'ai vu votre article de blog, Phil, sur la façon dont vous aviez fait quelque chose comme ça. Sur quoi travailliez-vous? Comment tout cela a-t-il commencé?

Phil: C'est une histoire très folle. Il y a environ trois semaines, j’ai rencontré des amis et nous nous sentons très sombres face à toute la situation. Nous avons deux enfants que nous essayons de faire à la maison tout en poursuivant cette activité. Et je me sentais un peu déprimé de ne pas faire ça très bien et de ne pas bien faire mon travail et les perspectives de voir des amis et des choses comme ça. Et puis j'ai eu une conversation avec ma femme qui a dit: "Écoutez, vous avez juste besoin de vous reprendre un peu, vraiment." Et le même jour, un type appelé David est entré en contact via Wired Sussex, qui est une sorte de groupe technologique à Brighton et dans les environs. Et il a dit qu'il avait un ami qui avait construit un site Web sur les cartes mémoire pour les médecins qui soignent des patients souffrant de COVID.

Phil: Il cherchait un développeur pour transformer ce site Web en application et ajouter quelques fonctionnalités. Et ils voulaient que cela se fasse très, très rapidement et ils n'avaient pratiquement pas d'argent. Et je ne me suis pas attardé là-dessus pendant très longtemps et j'ai construit des applications et j'ai l'expérience de faire du développement back-end et front-end et c'était juste comme si c'était … Cela ressemblait à un moment significatif, vraiment, où j'étais avoir un peu de crise et cette opportunité incroyable est venue et ce besoin et je pourrais réellement contribuer quelque chose. J'ai donc pris contact avec David. Il y avait beaucoup de va-et-vient. Et puis j'ai parlé à Rachel, qui est la fondatrice de CardMedic. Elle est actuellement en Amérique, donc il y a ce décalage horaire étrange auquel nous devons faire face tous les jours. Mais elle était vraiment enthousiaste et très confiante en moi. J'ai parlé à son mari qui est un peu plus technophile, puis nous nous sommes mis au travail.

Phil: Essentiellement, c'était… Il y avait quelques fonctionnalités qu'elle voulait ajouter, mais il s'agissait vraiment de réellement construire… le site existant est sur Squarespace, il avait donc besoin d'un nouveau back-end construit et d'une API, puis d'une application qui fait appel à l'API et de quelques fonctionnalités intéressantes ajoutées. Ouais. Les gens ont peut-être vu l'application ou peuvent la télécharger. C'est ridiculement simple. C'était vraiment à peu près… Il ne s'agissait pas de beaucoup d'apprentissage à faire, il y avait à peu près beaucoup de travail à faire. J'ai juste besoin de le faire. J'avais un peu de travail client à faire, mais j'ai essayé de repousser cela autant que possible et j'ai fait beaucoup de nuits tardives et je l'ai fait sortir en environ 10 jours, je pense que cela a pris, du début à l'obtention sur l'App Store

Drew: Dans les termes les plus brefs, quelle est l'application et comment les médecins l'utilisent-ils?

Phil: L'une des étranges nuances médicales de COVID est à cause de la façon dont il est cultivé, il y a beaucoup de gens qui s'occupent de patients atteints de COVID qui n'ont aucune expérience des maladies respiratoires et ils pourraient bien s'occuper de patients dont la langue maternelle est leur première langue en raison du taux de croissance et de ces problèmes comme le traitement dans les maisons de soins et des choses comme ça. Ce que l'application fait, c'est une sorte de système de carte flash par lequel s'il y a un sujet particulier dont vous devez parler à un patient … Cela pourrait être quelque chose comme quelqu'un ayant des difficultés à respirer … Ensuite, il y aurait une carte flash qui explique au patient pourquoi il 'a du mal à respirer et ce que le pratiquant va faire à ce sujet.

Phil: L'application peut également lire le script à haute voix et nous sommes actuellement en 10 langues, qui sont toutes traduites automatiquement à la minute. . Ouais. Mais ce sont les bases de l'application.

Drew: Cela semble incroyablement important, incroyablement utile pour les personnes travaillant dans cette situation de pression sur le terrain. Avec la rapidité d'exécution qui était nécessaire pour ce projet pour des raisons évidentes, comment avez-vous procédé pour le décomposer et décider de ce qui devait être là pour le lancement et de ce que vous pourriez traiter et ajouter plus tard?

Phil: Rachel avait beaucoup de demandes de fonctionnalités qu'elle voulait ajouter à l'application. Ce que nous avions convenu dès le départ était la première version, qui est la version qui est maintenant disponible… Les choses qui seraient livrées sont toutes les fonctionnalités du site existant. Il s'agit de la traduction dans différentes langues, à haute voix, de la synthèse vocale, puis d'une liste de cartes par ordre alphabétique. Et celle que nous voulions ajouter, qui nous semblait adaptée aux choses que nous voulions lancer, était une carte où les praticiens pouvaient prendre une photo de leur visage puis la montrer à leurs patients avec une sorte de texte d'introduction parce que vous '' Je vais être porté… Beaucoup de ces gens portent des EPI et ils sont juste en train de perdre… Prendre soin des gens et ils ne savent pas à quoi ressemblent leurs visages.

Phil: Nous avons convenu, en fait, d'obtenir ceci chose à expédier dès que possible ce sont les seules fonctionnalités qui feraient V1. Et pour tout le reste, nous nous garerions, puis nous prioriserions. Et nous sommes en train de passer par ce processus en disant: "D'accord, que voulons-nous faire ensuite?" Le côté intéressant de cela est que, au fur et à mesure que nous expédions, de nombreuses personnes ont fait leurs propres suggestions. Et Rachel, qui n'a jamais fait cela auparavant, équilibre les choses dont elle pense que l'application a besoin avec les choses dont les autres disent qu'elle a besoin et nous essayons d'équilibrer ce qui est le plus important, ici.

Drew: Cela peut être une grande révélation, n'est-ce pas? Expédier tôt, puis écouter les commentaires plutôt que de passer beaucoup de temps à développer des charges de construction et des charges de fonctionnalités, puis à les mettre à la disposition des utilisateurs.

Phil: Ce qui est aussi drôle, c'est quand nous sommes arrivés dans le Vendredi dernier sur l'App Store… Oui, vers minuit vendredi, puis The Guardian a publié un article samedi. Génial. Donc, nous avons reçu beaucoup de reportages très rapidement et il y a eu beaucoup de retours de personnes qui ne sont pas des pratiquants et c'est difficile pour Rachel, je pense, de gérer: «D'accord, où sont ces idées constructives des pratiquants et où sont ces choses intéressantes mais qui ne feront réellement aucune différence dans cette crise? »

Drew: Il s'agit d'une application mobile native qui est construite en grande partie avec ce que nous considérons habituellement comme les technologies Web. Quelle était la pile et de quoi était responsable chaque partie de cette pile?

Phil: Asseyez-vous bien. Et c'est parti. La première chose, je pense, que j'ai faite, c'est que j'ai un pad A3 et j'ai tracé des modèles de données et à quoi je pensais que la structure de données ressemblerait. J'ai ensuite … j'utilise une chose, et je ne sais pas comment j'ai fini par l'utiliser, mais ça s'appelle Apiary. Je ne sais même pas que tu le prononces. Vous savez comment vous le prononcez.

Drew: Peut-être Apurree?

Phil: Ouais. L'un de ces. Je pense qu'Oracle l'a acheté il y a quelques années, donc je pense que c'est une grosse tenue maintenant. Quoi qu'il en soit, cela vous permet d'écrire de la documentation sur l'API et cela vous donne une sorte d'API fictive. Je l'ai fait tout d'abord. Je pense que c'est la première chose que j'ai jamais faite, qui est également multilingue. Certes, c'est la première API que j'ai été multilingue, j'ai donc dû faire un peu de recherche et réfléchir… Et une partie de la raison pour laquelle j'ai décidé avec cela, de faire la documentation et l'API fictive, était juste de jouer avec quelques-uns des idées sur la façon dont l'API pourrait être structurée si elle était multilingue.

Phil: J'ai décidé à quoi je voulais que l'API ressemble, puis j'ai commencé à construire un back-end en utilisant Laravel. J'utilise Laravel pour… Je fais à la fois front-end et back-end. Tout ce que je fais en back-end, j'utilise Laravel. C’est tout simplement incroyable. La vitesse à laquelle vous pouvez créer un back-end approprié est juste… Et un très bon back-end. C'est rapide, c'est incroyablement intelligent, ce qu'il fait, et si ce n'était pas pour Laravel, je … Je suis sûr qu'il y a d'autres choses là-bas, j'apprendrais peut-être Ruby ou quelque chose, mais ça me permet juste d'obtenir des trucs

Phil: Par exemple, dans le back-end, vous créez une de ces cartes mémoire, puis vous l'envoyez pour obtenir la transcription audio et la faire traduire dans d'autres langues. Et les API que nous utilisons pour ces deux services sont assez fortement limitées; vous ne pouvez faire qu'un nombre limité de demandes par seconde. Et l'idée de devoir composer avec d'autres API et d'étrangler les demandes et des choses comme ça … L'idée de le faire sans Laravel … Je ne sais pas comment je le ferais. Mais avec Laravel, vous lisez la documentation, traquez quelques tutoriels et vous êtes parti.

Phil: Le back-end a probablement été fait à 90% en trois jours, je dirais. J'ai tout installé et puis j'ai vraiment attiré mon attention… Il y a une interface d'administration par laquelle Rachel et d'autres peuvent entrer et éditer du contenu et mettre à jour le contenu et ajouter des traductions et obtenir de nouveaux fichiers audio. Mais vraiment, le principal objectif du backend est l'API. Une fois que tout le back-end a été configuré, j'ai concentré mon attention sur l'application, qui est entièrement construite à l'aide de React Native. Et cela se résume à une application IOS et Android.

Phil: Rachel n'a pas d'iPhone et je suis complètement dans l'écosystème Apple et en partie pour cette raison, mais en partie parce que c'est juste un outil incroyable ensemble, j'utilise Expo, qui est une collection d'outils qui entourent React Native pour aider à un développement rapide. Il y a une application Expo et ce qu'elle vous permet de faire est lorsque vous êtes dans la phase de développement, contournez complètement l'App Store en envoyant simplement un bundle JavaScript à leurs serveurs et lorsque les utilisateurs téléchargent le client Expo sur leur téléphone, ils peuvent le télécharger Regroupez JavaScript et chargez l'application dans le client Expo.

Drew: Oui,

Phil: Oui. L'Expo était vraiment l'élément clé pour garantir que cette application puisse être développée très rapidement car cela signifiait que toutes les deux heures, je pouvais construire quelque chose et Rachel pouvait le voir où l'idée de faire une construction entière et de la mettre sur l'App Store et de passer l'écosystème Google, il est impossible de le faire toutes les deux heures. Ce ne serait tout simplement pas … Vous passeriez plus de temps à construire qu'à développer réellement l'application. Expo a été cruciale dans ce processus.

Drew: Expo est l'outil que vous utilisez dans le cadre de votre flux de travail de développement pour vous permettre de le faire dans la phase de développement, mais ce n'est pas quelque chose avec lequel vous allez en production?

Phil: Exactement. Il est utilisé en phase de développement, mais il gère également le processus de génération. À l'aide de la CLI, il créera un package que vous pourrez ensuite télécharger sur le Play Store ou sur l'App Store. Il s'occupe de toute l'authentification, des clés et des certificats et de tous les aspects qui ont toujours été un casse-tête et incroyablement intimidants. Et cela a rendu… Je pense que cela a mis beaucoup de gens à l'écart du développement d'applications. Obtenir tous ces certificats est si difficile et en fait, Expo rend cela incroyablement facile.

Drew: Comment avez-vous construit des choses du côté de React?

Phil: J'ai un cadre de démarrage . J'ai développé un modèle de création d'applications. J'utilise Redux comme gestion d'état et que, bien que ce ne soit pas normatif, il y a une structure approximative qui va de pair. Oui, je ne sais pas trop dans quel détail entrer, mais il y a beaucoup de composants sans état à la fin, dans lesquels j'entre et j'apprécie les avantages de cela.

Phil: Une autre chose qui mérite d'être mentionnée est que je commence vraiment à taper cette année ou à essayer de me discipliner pour le faire. J'ai décidé que cela prendrait… Je ne suis pas doué pour ça, donc je savais que cela me prendrait plus de temps pour créer l'application avec TypeScript, mais cela me semblait beaucoup plus sûr car l'intelligence dans mon éditeur autour de TypeScript signifiait simplement que je n'étais pas t faire des erreurs aussi souvent. Et je suis tombé dans le passé par le passé où je n'ai pas utilisé TypeScript et je reçois beaucoup d'écrans rouges où les choses ne sont pas définies et je viens de l'éviter et de le gérer. Et cela signifie, je l'espère, que je peux ajouter des fonctionnalités sans risquer de casser des éléments qui s'y trouvent déjà.

Drew: Et avez-vous déjà beaucoup travaillé avec React Native?

Phil: Yep . J'ai construit pas mal de choses dans React Native. C'est bien maintenant parce que c'est vraiment réglé. Et cela va de pair avec l'ensemble de l'écosystème React maintenant. Maintenant, je pense que les hameçons sont adoptés beaucoup plus largement et tous ceux-là … Ce gros lot de changements, tout donne l'impression de se régler un peu maintenant et cela vaut la peine d'apprendre ces choses et de les mettre en œuvre. Ouais, c’est super. C'est génial.

Drew: En pensant simplement à votre flux de travail, vous disiez que vous aviez commencé à simuler une API à l'arrière-plan. Vous avez ensuite créé une application Laravel pour… L'API était ce que votre application Laravel exposait à l'application mobile, n'est-ce pas?

Phil: Exactement. Vraiment, la documentation et l'API fictive étaient juste pour me donner un standard vers lequel travailler. C'est à cela que je voulais en venir. Et j'ai aussi … Je trouve parfois qu'en fait, j'aimerais bien travailler sur l'application maintenant et non sur le back-end et cela m'a permis de passer au travail sur l'application lorsque le back-end n'était pas en place . Donc, c'était une autre raison pour cela.

Drew: Et je suppose que c'est un flux de travail que de plus grandes équipes pourraient utiliser et pourraient s'appuyer sur les endroits où différentes personnes pourraient développer le back-end et une application mobile. Si vous avez une API fictive pour commencer, alors les deux équipes peuvent travailler vers cette API en même temps.

Phil: C'est comme ça que je suis tombé sur cette idée parce que, en fait, cela signifiait que si j'étais la construction d'un back-end, puis quelqu'un d'autre pourrait développer l'application mobile.

Drew: Comment équilibrez-vous sous la pression du temps? Comment créez-vous un équilibre entre aller vite et compter sur des technologies que vous connaissez et vous savez que vous pouvez travailler rapidement et vous savez que cela fera le travail… Comment équilibrez-vous cela entre ce qui pourrait traditionnellement être une phase de R&D plus longue où vous entraînement, en fait, quelle est la meilleure technologie pour ce travail? S'agit-il simplement de faire ce que vous savez qui fera du bon travail et que vous pourrez expédier rapidement?

Phil: C'est une bonne question. Je pense que dès que le projet m'a été mentionné, j'ai pensé que je sais exactement comment je vais construire tout ça. Et si je n'avais pas d'enfants et que j'étais assis dans une pièce sombre, je pense que j'aurais probablement pu tout tourner en cinq jours si j'avais travaillé dessus solide, solide, solide parce que les exigences étaient très en ligne avec mon expérience de la création d'applications. J'ai construit des choses similaires où il fait appel à une API, stocke les résultats dans leur état et les présente. Je suis maintenant dans une position où il y a des morceaux où je me dis: «D'accord, je dois revenir en arrière et refactoriser cela.»

Phil: Comme si j'avais parlé de taper de l'étain, mais en fait le les types peuvent être assez lâches dans l'application et cela doit être resserré. Et sur le back-end, il n'y a pas beaucoup de tests et maintenant nous commençons à déployer le back-end parce que beaucoup de gens se sont manifestés et ont dit: «En fait, c'est une excellente ressource. Je voudrais proposer mes services pour traduire ceci dans ma langue maternelle. " Les back-ends étant utilisés par plus de gens, je pense donc, attendez, j'ai besoin de quelques tests de plus ici pour m'assurer que rien ne peut casser car il y a des gens qui l'utilisent en production maintenant.

Phil: Je pense avoir répondu à votre question. Essentiellement, il n'y avait pas de prise de décision. Je devais juste le diffuser le plus rapidement possible.

Drew: Avez-vous à un moment donné envisagé d'en faire une application Web progressive?

Phil: Nous l'avons fait. Juste avant le coup d'envoi, une annonce que je n'ai pas entièrement consommée est arrivée. Il y a eu une annonce que j'ai lue sur le blog de Jeremy Keith, ce qui m'a rendu nerveux à propos des applications Web progressives. J'adore vraiment la technologie et l'idée qui la sous-tend, mais je ne sentais tout simplement pas que c'était assez loin. Et je ne sens pas que c'est assez dans la psyché des gens, alors qu'en disant aux gens d'aller sur l'App Store et de télécharger l'application, tout le monde sait comment faire.

Drew: Je trouve parfois que les gens connaissent mieux le concept d'application que le concept de site Web.

Phil : Ouais, à mon sens aussi, c'était juste trop tôt pour mettre tous nos œufs dans le même panier avec l'application web progressive. Je suis sûr que ça y arrivera. J'espère vraiment qu'il y arrivera parce que cela semble une bien meilleure solution, mais je ne pense pas que nous y soyons encore.

Drew: Vous construisez probablement des projets React pour le web ainsi que React Projets natifs. Est-ce quelque chose que vous pourriez prendre cette base de code de React Native et la déplacer vers le Web à un moment donné dans le futur? Dans quelle mesure ces deux environnements sont-ils différents?

Phil: L'un des développements intéressants de React Native au cours des dernières années est que Nicholas Geiger a construit un package appelé React Native Web, qui… Comment React Native fonctionne est alors vous avez différents clients. Et les clients traditionnels sont IOS et Android, mais Nicholas Geiger a construit ce package par lequel l'un des clients est le Web. Donc, vous construisez une application React Native mais elle crache du HTML et du JavaScript. Et en fait, je pense que j'ai raison de dire que le site Twitter, je pense, est construit en utilisant React Native Web ou l'un des Twitter … Je suis presque sûr que le site Twitter utilise React Native Web. Et c’est vraiment bien. Malheureusement, l'un des packages que nous utilisons n'est pas transfile vers React Native Web.

Phil: Cependant, je pense que mon travail pour la semaine prochaine va être d'abandonner ce package afin que nous puissions utiliser React Native La toile. Et la raison pour laquelle je veux l'utiliser est que le site Web est toujours actuellement alimenté par Squarespace, mais je voudrais utiliser Squarespace pour toutes les activités marketing, mais pour les cartes mémoire réelles, j'aimerais utiliser exactement la même base de code qu'un mobile App et appeler sur la même API afin que nous puissions avoir une cohérence à tous les niveaux.

Drew: J'allais demander, en fait, comment le site Web s'intègre à cela. La même fonctionnalité sera-t-elle potentiellement disponible ou est-elle déjà disponible via le site Web?

Phil: Certaines fonctionnalités sont disponibles sur le site Web. Cela a en fait été construit dans View. Sur le site Web, nous injectons simplement du JavaScript et c'était beaucoup plus facile à faire avec View car il ne s'agit que d'une charge de balises de script. Il n’y a pas de transfilation, il n’y a pas d’affaires amusantes, et c’était très rapide. Et j'étais très confiant de pouvoir le faire fonctionner assez rapidement. Oui, le site Web est fait comme ça, mais j'espère que la semaine prochaine, nous l'aurons construit avec React Native Web.

Drew: Vous avez mentionné que l'application devait être multilingue et que vos cartes mémoire étaient disponibles dans différentes langues.

Phil: Le site Squarespace utilise un plug-in d'une société appelée Weglot qui m'a vraiment impressionné, en fait. Vous configurez essentiellement une charge de sous-domaines et pointez ces sous-domaines vers le serveur Weglot et qui, ensuite, récupère la page correspondante de la traduction anglaise et la traduit à la volée. Et c'est apparemment très fiable et ils ont dit pour ce service qu'ils ne factureraient rien. Et ils ont une API ainsi que le service qu'ils offrent à Squarespace. Lorsqu'une carte est mise à jour, nous publions toutes ces données sur Weglot avec une liste des traductions actives et Weglot nous renvoie une traduction. Je pense que c'est plus grand qu'un wrapper autour de Google Translate et de quelques autres services.

Phil: Nous espérons vraiment qu'un service de traduction professionnel va s'en charger. Ouais. Je publierai probablement quelque chose à ce sujet sur mon blog cette semaine et ce sera sur le site Web de CardMedic. Mais oui, un service de traduction professionnel a dit qu'il le ferait et qu'il ferait 10 langues. Et puis nous avons eu beaucoup d'autres personnes qui se sont manifestées et ont dit qu'elles étaient vraiment heureuses de le traduire dans leur langue. Donc, je construis cette fonctionnalité d'éditeur par laquelle les gens qui sont … Un bon nombre de personnes se sont présentées de Hongrie et peuvent voir une liste d'articles qui n'ont pas encore reçu de traduction hongroise et ils peuvent simplement les retirer et une fois qu'ils ' re fait, nous serons en mesure de pousser ces nouvelles langues en direct.

Drew: Et une autre API que vous avez mentionnée que vous vous êtes faite était celle pour la synthèse vocale. Comment cela a-t-il fonctionné?

Phil: Le site Web utilise un service appelé SiteSpeaker. Encore une fois, je pense que cela pourrait être un wrapper autour des services de synthèse vocale de Google, mais vous leur envoyez une chaîne de texte et la langue dans laquelle le texte est et la voix que vous voulez, car vous pouvez avoir des voix différentes, et cela vous renvoie un fichier audio. Je pense qu'il le vide sur S3 ou quelque chose, vous renvoie une URL. Il y a eu quelques détails délicats à ce sujet, sur la façon dont certains caractères sont codés, en particulier lorsque vous arrivez dans des langues étrangères. Cela devient vraiment difficile. Mais je pense que cela fonctionne plutôt bien maintenant.

Drew: L'une des choses que vous avez mentionnées dans le cadre des exigences de base de la première version était la possibilité de rechercher une carte flash. Comment gérez-vous la recherche dans l'application? Est-ce que cela se produit dans le client ou est-ce que cela se produit sur le serveur?

Phil: Cela se produit dans le client et c'est ridiculement simple. Et je suis sûr qu'il existe une bien meilleure façon de faire des recherches que de voir si une chaîne est incluse dans une autre chaîne. Je pense, encore une fois, que cela pourrait être développé parce que, par exemple, si vous cherchez à respirer, presque tous les articles y apparaissent et il doit probablement être un peu plus sophistiqué. Mais à la minute, c'est le travail.

Drew: C'est comme ça que la recherche commence toujours.

Phil: Ouais.

Drew: La solution la plus simple possible et ensuite vous travaillez

Phil: Ouais.

Drew: Le back-end de Laravel, comment est-il hébergé?

Phil: C'est sur Digital Océan. Encore une fois, Digital Ocean a lancé un programme de secours COVID, ils ont donc mis une charge de crédit sur notre compte pour couvrir le coût de cela, ce qui est formidable. Je ne pense pas que nous payons pour un service et nous utilisons beaucoup de services là-bas. Le serveur a été construit à l'aide de Forge, un service créé par le fondateur de Laravel, Taylor Otwell, qui fait tourner de nouvelles gouttelettes et services Digital Ocean sur S3 et quelques autres packages d'hébergement. À mes yeux, il fait tout ce qu'un administrateur système ferait comme la planification et les tâches cron ainsi que la mise à niveau et le déploiement. Cela le rend si simple. Je serais perdu sans ça.

Drew: On dirait que l'architecture de cette application utilise beaucoup les services externes et les API, ce qui est une belle façon de faire moderne. Avec plus de temps pour étudier différentes options, pensez-vous que c'est le genre d'application qui aurait pu être construite avec une approche sans serveur?

Phil: Cela aurait pu. Une des choses amusantes à ce sujet est que ce n'est pas très exigeant pour le serveur. Les tâches qui doivent être accomplies, comme passer du texte à la parole, c'est un processus intensif, mais nous ne faisons pas réellement ce processus. Nous appelons simplement l'API et c'est le problème de quelqu'un d'autre. Il y a beaucoup de demandes au serveur, mais nous mettons en cache… Tout le monde obtient le même contenu, nous ne faisons que mettre en cache l'API et vider le cache toutes les heures, je pense. Il n'y a donc pas beaucoup de charge sur le serveur. Ce n'est pas la gouttelette la moins chère mais ce n'est pas loin de la gouttelette la moins chère et ça va bien. Il aurait probablement pu être sans serveur, mais, encore une fois, je pense que l'écosystème n'est pas tout à fait… Eh bien, je n'en sais pas assez pour pouvoir le produire en si peu de temps.

Drew: Auriez-vous fait quelque chose de différent, en repensant au projet maintenant, sur la façon dont la technologie s'est réunie? Les choix que vous avez faits? Auriez-vous fait quelque chose de différent si vous pouviez le refaire?

Phil: Je souhaite que nous utilisions React Native Web dès le départ. J'ai en quelque sorte essayé de le faire après coup et j'ai réalisé qu'en fait, ça allait être vraiment difficile. Je souhaiterais avoir utilisé React Native Web dès le départ et y avoir prêté plus d'attention. Je ne pense pas avoir changé quoi que ce soit du côté back-end des choses. J'aurais aimé avoir plus de temps pour l'avoir fait. Je pense qu'il y a des morceaux que j'aurais pu faire mieux. Et je souhaite peut-être que j'aurais pu impliquer un designer. Une grande partie provient d'un cadre d'interface utilisateur, de l'application elle-même, et il y a certains écrans dont je suis moins satisfait que d'autres. Et l'écran dont je suis le moins satisfait est celui que The Guardian a décidé de présenter sur leur page d'accueil au cours du week-end, donc c'était un peu ennuyeux.

Drew: Une fois qu'une application est prête, vous pensez à obtenir entre les mains qui en ont besoin. Du point de vue d'un projet Web, cela se déploie simplement sur un serveur d'un CDN. Avec les applications natives, c'est un peu plus complexe que ça, n'est-ce pas? Vous devez en savoir plus sur les App Stores, les comptes de développeur et toutes sortes d'activités. Est-ce quelque chose que vous avez déjà fait auparavant? Et comment s'est déroulé ce processus?

Phil: Expo gère une grande partie du côté technique difficile de cela et la documentation sur le site de l'Expo est incroyable. Si vous vous lancez dans ce domaine et que vous pensez oh, oui, je suis un développeur front-end, je pense que je pourrais créer une application, alors vous devriez simplement plonger dans Expo et lui donner un tourbillon parce que même si vous ne pas expédier, il vous guidera tout au long du processus et expliquera tout clairement. Et je ne sais pas comment ils le font, mais leur documentation, ils parviennent toujours à se tenir à jour avec le Play Store et l'App Store. Donc, quand l'interface utilisateur change… Comment ça s'appelle? App Store Connect… Alors en fait, la documentation de l'Expo est mise à jour, ce qui rend tout tellement plus facile parce que vous suivez simplement leurs instructions et tout fonctionne très bien.

Phil: L'un des plus gros stress et difficulté avec l'ensemble est né de l'approbation dans les App Stores. Nous avons expédié… Nous avons d'abord soumis l'application à l'App Store d'Apple jeudi dernier. Oui, jeudi dernier. Il y a huit jours alors que nous enregistrons cela. Et il a été rejeté assez rapidement avec un avis de rejet très, très sévère disant: "N'essayez pas à nouveau." Et cela nous a montré un document qu'ils ont publié mais que je n'avais pas lu en disant: "Nous allons seulement publier des applications COVID d'entreprises enregistrées." Et tout cela sur mon compte développeur à l'époque. Et mon cœur a coulé et j'ai pensé: «Oh mon Dieu. J'ai passé beaucoup de temps là-dessus et cette femme, Rachel, y a passé beaucoup de temps et ça ne va pas arriver. »

Phil: Je me suis ensuite un peu calmé et nous nous sommes précipités à travers elle compte développeur pour son entreprise. Heureusement, elle l'était… CardMedic est une entreprise enregistrée, nous avons donc accouru par le biais d'un compte de développeur, fait la demande sur son compte et elle a été approuvée immédiatement. La publication de l'application Android a été le même processus mais s'est étalée sur 10 jours et ils nous ont envoyé un avis de rejet très sévère, alors qu'Apple disait: «Nous ne savons pas qui vous êtes. Vous êtes un mec avec un drôle de nom d'entreprise. Pourquoi parlez-vous de COVID? "

Phil: L'avis de rejet de Google parlait de profiter de la pandémie et de dire que l'application était insensible et que c'était très, très effrayant. Et j'étais assez découragé, mais j'ai écrit un appel très ferme à leur rejet et j'ai dit: «Écoutez, nous sommes réputés. Nous avons reçu une lettre d'un consultant de l'hôpital. L'application était sur The Guardian et The Beeb le week-end dernier et a également figuré sur Government UK cette semaine. Nous avons envoyé les liens Play Store vers ces articles et ils ont approuvé l'application ce matin. Mais oui, cela avait été le plus gros stress du projet parce que vous ne pouvez évidemment pas téléphoner à Tim Cook et lui dire: "Hé, où est mon application?" You just kind of … Especially with Google, you just submit the app and you can put in some supporting notes but there’s no dialogue. So, that was quite stressful but we’ve done it now. It’s in.

Drew: You’ve managed to get the app developed in about 10 days and it sounds like the reception has been pretty good, being featured on news outlets and going down quite well with its potential users. What are the next steps? Where does it go from here?

Phil: The next steps are getting the translations better. We really want to incorporate some features which will help people who have some kind of learning difficulty. I think I’d likely involve adding illustrations to particular cards. There’s this key card which shows your headshot and says, “Hi, my name is Phil. I’m a doctor at UCH,” and so forth. That page currently isn’t translated because, obviously, it’s unique to everyone. So I want to sort out how I’m going to do that without … Because we need to do that presuming that the person is offline when they’re viewing that screen, so that’s a little bit challenging but I’m sure I’ll sort that out. And then there’s a whole load more cards to add over the weekend as we hear of more use cases and more stories about it. So, we’re getting some new cards written, which will help in those scenarios and we’ll hopefully get those on the app soon.

Drew: It sounds like very valuable work to be doing and people can, of course, find out more about the app by going to CardMedic.com. I’ve been learning about building apps rapidly. What have you been learning about lately, Phil?

Phil: I have been learning about how to make the perfect pulled pork because it was my birthday this week and we’re having a virtual Zoom party tomorrow night, so I currently have two very large cuts of pork barbecuing and they’ve done five hours and they’ve got about 12 hours to go.

Drew: That sounds delicious. If I wasn’t vegetarian …

Phil: Yeah. The pulled halloumi isn’t quite as tasty, I’m afraid.

Drew: If you, dear listener, would like to hear more from Phil, you can follow him on Twitter where he’s @MonkeyPhil and his personal blog is MonkeyPhil.co. You can find examples of his work and hire him to work on your projects at AMillionMonkeys.co.uk. Thanks for joining us today, Phil. Do you have any parting words?

Phil: I think I’d really encourage people if they are front-end web developers to at least explore building apps in React Native. If you’ve got experience in React and you’re willing to read a lot of documentation, actually the process is nowhere near as daunting as you’d imagine.

(il)