Hvordan jeg byggede en app med Vulcan.js på fire dage

Hvor ambitiøs var jeg for et par måneder siden, da jeg udgav "Vulcan: 15 dage til en app"! 15 dage er 3 ugers arbejde. Hvis du inkluderer undfangelsestid, er det en måneds forsinkelse. Hvad hvis vi kunne reducere det til en uge ? Hvad hvis vi kunne udvikle produktionsklare applikationer i løbet af få dage ? Sådan opnår vi dette mål.

Dag 0: Noget sammenhæng

Stop med at kalde dig selv en opstart, bare fordi du producerer sjusket kode hurtigere end andre

Jeg driver et udviklings- og konsulentfirma ved navn LBKE. Vi er dybt interesserede i teknologier, der hjælper med at producere applikationer af høj kvalitet på en meget begrænset tid. Tænk React Native + Expo til mobil eller Meteor til webapplikationer.

Gennem årene er den forventede kvalitet af minimum værdifulde produkter (MVP'er) steget. Folk er trætte af prototyper af lav kvalitet, der sælges som "produkter".

Nu vil de have deres software uden bugs (ingen måde!), De vil have en god UX (hvor kræsen de er!), De vil have værktøjer, der virkelig imødekommer deres behov (uh!). Og selvfølgelig vil de ikke betale mere for det.

Mod 4 dages app

For iværksætteren er det meget arbejde at designe og opbygge et sådant minimalt elskeligt produkt. Men penge er stramme, og tid er penge, så du skal være smart over, hvordan du bruger dem.

Vores mål: at kunne producere en SaaS-applikation på 4 dage. Vi mener ikke en smid-app, der ikke bærer yderligere udvikling. Vi mener, at veldesignede teknologier skal muliggøre både langsigtede udvikling og meget hurtig udvikling: opskalering, og skalering ned . For de fleste projekter er der ikke behov for prototypeteknologi. Bortset fra hvis du bygger rumskibe, men ikke, gør du ikke?

Vi kan heller ikke lide at stole på tredjeparts tjenester / softwares, der poper hjemmesider med et par klik. Hvis dit produkt virkelig er innovativt, føler du dig sandsynligvis meget begrænset af sådanne tjenester.

Så hvordan opnår vi dette mirakel uden at bruge en tryllestav? Lad os opdage det gennem et virkeligt eksempel, GestiResto, en webapplikation, der hjælper restaurantejere med at administrere deres opskrifter. Sidebesked: Jeg bor i Frankrig, vi griner ikke med mad her, så jeg tog dette projekt til hjertet.

Dag 1: Vælg vores rumskib

Mød Vulcan.js, også kendt som Meteor-on-steroids

Meteor er en berømt JavaScript-ramme med fuld stack. Helt fra starten har det altid lagt vægt på produktivitet og udvikleroplevelse. Det var banebrydende for mange fantastiske funktioner og mønstre, som isomorf udvikling (genbrug den samme kode serverside og klientside).

Vulcan.js er dybest set de gode elementer i Meteor plus de gode elementer i JavaScript-økosystemet i en enkelt ramme. Den er afhængig af de nyeste teknologier: Reager til frontend og Apollo (GraphQL) til klient / server kommunikation.

Som en bonus inkluderer den mange pakker og eksempler på de mest almindelige funktioner (afsendelse af nyhedsbreve, tilføjelse af et forum osv.). Vulcan er det direkte barnebarn af den berømte Meteor-app / framework Telescope, den er oprettet af Sacha Greif. Det drager således fordel af mange års erfaring på trods af dets modernitet.

Hvis du vil vide mere om Vulcan, og hvordan det hjælper med at reducere udviklingstiden, kan du tjekke min tidligere artikel i DailyJS.

Så Vulcan.js er bestemt en solid kandidat til at overholde vores selvpålagte deadline på 4 dage!

Et brugerstyringssystem out-of-the-box

En af de mest elskede funktioner i Vulcan er dens kontosystem, som det arver fra Meteor. Det inkluderer tilmelding / tilmelding / logout, tilladelsesadministration, tilmelding / glemt password-arbejdsgange (+ programmatisk e-mail-afsendelse) og en god brugergrænseflade. Åh, og det er også ret nemt at tilføje tredjepartsautentisering med tjenester som Google Oauth.

Kontostyring er virkelig noget, du IKKE ønsker at tænke over i de tidlige stadier af din apps livscyklus. Hvor mange timer er gået tabt ved opsætning af Passport.js! Mængden af ​​betalte godkendelsestjenester som Auth0 viser, at dette problem endnu ikke er løst, så det er virkelig en meget flot funktion.

Så vores første dag er brugt godt. Vi har nu et komplet brugeradministrationssystem inklusive database, server, brugergrænseflade og back-office, og vi har oprettet et flot Material UI-layout med den resterende tid.

Dag 2: Hosting

Hosting på AWS med Meteor Up

Hvorfor allerede vært på dag 2? Fordi livet lærte os, at det er en meget dårlig idé at teste din app i produktion den sidste dag. På en smidig måde udføres en funktion kun, når den valideres i den virkelige kontekst. Så vi kan ikke overveje, at applikationen skal oprettes, hvis vi ikke kørte den i et produktionsmiljø.

Meteor Up er et vidunderligt værktøj til automatisk at implementere Meteor-apps (så også Vulcan-apps) på en fjern server. Det håndterer alt lige fra containerisering af appen med Docker til generering af SSL-certifikat med Let's Encrypt. Opsætning er let, implementering er en kommando med en linje. Der er næsten ingen ulemper ved det.

Jeg valgte AWS til hosting. Det har den store fordel at tilbyde gratis tjenester i 12 måneder. Jeg må indrømme, at jeg havde vanskelige tider med at oprette min første EC2-forekomst. Der er dog mange selvstudier på nettet, og det er værd at indledende problemer. Jeg skriver også i øjeblikket en pakke for at muliggøre daglig sikkerhedskopiering af MongoDB-databasen på AWS S3 for at gøre dine data sikre.

En iscenesættelsesapplikation på Zeits Now + Mongolab

Før eller senere bliver du nødt til at teste, at din app fungerer i produktion uden faktisk at sende den til produktion. Det er det, vi kalder et iscenesættelsesmiljø. Du kan også bruge AWS, men lad os prøve en gratis løsning i stedet for at reducere omkostningerne.

Zeits Now-service er velegnet til denne brug. Det tilbyder gratis hosting. Du kan bruge mLab til databasen, da den også giver et gratis sandkassemiljø. For at være ærlig har jeg ikke meget at sige her, fordi opsætningen er lige så let som ABC og fuldt dokumenteret her. Ikke engang en fejl. Hvad er mit formål som udvikler, hvis der ikke er nogen fejl ???

Okay, så i slutningen af ​​dag 2 er vores app i produktion, og vi har et mellemliggende demonstrationsmiljø. Pæn! Det er sejt, fordi mindre tid til generiske funktioner er mere tid til værdifulde funktioner.

Dag 3: Forretningslogik

En app er en masse formularer og lister

Lad os nu komme i gang. De fleste komponenter i en applikation kan adskilles i 3 store kategorier: Liste, Formular og Detaljer. Denne model gælder for en masse websites.

Se Medium: hjemmesiden indeholder en liste over artikler. Denne side er en "Detaljer" side af den artikel, du læser. Nederst finder du en liste med kommentarer med en kommentarformular. Selv knappen "bifald" til venstre (som jeg opfordrer dig til at klikke grundigt) er en forenklet formlignende komponent.

Gode ​​nyheder: Vulcan inkluderer en hel masse hjælpere, der letter oprettelsen af ​​komponenter til liste, form og detaljer. Det inkluderer gode GraphQL-opløsere og React HOC'er. Du har næppe brug for at skrive din egen. Der er endda et par React-komponenter, der fungerer out-of-the-box. Den mest avancerede af dem er SmartForm, som automatisk genererer en tilpasselig oprettelses- / udgaveformular til enhver samling.

Jeg vil ikke liste alle de funktioner, Vulcan.js har at tilbyde, men dybest set kan du trygt stole på det for at gøre din udviklingsproces virkelig hurtig.

Oprettelse af en opskrift (eller forslag til en ansøgning eller udgivelse af en artikel eller ...)

I GestiResto opretter og noterer de 2 hovedfunktioner opskrifter. Formularen til oprettelse af opskriften skal vise statistik. Detaljerne er fortrolige, så her er et screenshot af en tilsvarende form udviklet til Awesome Vulcan.

Men det gør ingen forskel, for her er pointen: Vulcan kan automatisk generere formularer uden for kassen til den type data, du kan forestille dig, hvad enten det er en opskrift eller en helikopter. Jeg mener, JSON-repræsentationen af ​​en helikopter.

Opskriftslisten er endnu enklere. Vi fokuserede på at opbygge en pæn, RecipeItemder giver brugerne mulighed for hurtigt at få vist opskriftoplysningerne samt udløse nogle almindelige handlinger (eksport, sletning ...). Selvfølgelig indeholder det en tekstbaseret søgning, gratis.

Dag 4: Lever!

Da vi udførte de fleste af de værdifulde dele af jobbet på dag 3, har vi en sidste dag til at rydde op og forbedre applikationen. Nu kan vi implementere love-to-have-funktionerne: en komponent, der automatisk beregner den endelige pris på din opskrift, en knap, der genererer en flot PDF-eksport, og en hjemmeside, der gør forskellen.

Til sidst er vi på dag 5. Klienten har netop testet den app, der blev leveret i går aftes, og siger til dig: “Jeg har testet appen, den er dejlig! Jeg tænker på at tilføje funktion X til side Y, hvor lang tid tager det at tilføje komponent Z efter din mening?… ”. Og så ved du, at du gjorde et godt stykke arbejde!

Vil du oprette din egen app om 4 dage?

Se på vores open source-applikation Awesome Vulcan. Det giver et genanvendeligt grundlag for professionelle apps med et materiale UI-look. Det viser også brugen af ​​et par pakker, vi implementerede.

Jeg håber, det vil hjælpe dig i din rejse mod ansøgningen om 4 dage!

Jeg er medstifter af det franske firma Lebrun Burel Knowledge Engineering (LBKE) - //www.lebrun-burel.com

Altid glad for at tale om kode, maskinlæring, innovation og iværksætteri!