Cât de neambițioasă eram, acum câteva luni, când am publicat „Vulcan: 15 zile pentru o aplicație”! 15 zile sunt 3 săptămâni de muncă. Dacă includeți timpul de concepție, aceasta este o lună de întârziere. Dacă am putea să-l reducem la un săptămână? Ce se întâmplă dacă am putea dezvolta aplicații gata de producție într-o chestiune de zile? Iată cum realizăm acest obiectiv.

Ziua 0: Un anumit context

Nu mai numiți-vă Startup doar pentru că produceți un cod neglijent mai repede decât alții

Conduc o companie de dezvoltare și consultanță numită LBKE. Ne interesăm profund tehnologiile care ajută la producerea de aplicații de înaltă calitate într-un timp foarte limitat. Think React Native + Expo pentru mobil sau Meteor pentru aplicații web.

De-a lungul anilor, calitatea așteptată a produselor minime valoroase (MVP) a crescut. Oamenii sunt sătui de prototipuri de calitate scăzută vândute ca „produse”.

Acum, își doresc software-ul fără bug-uri (nicidecum!), Vor un UX bun (cât de pretențioși sunt!), Vor instrumente care să răspundă cu adevărat nevoilor lor (uf!). Și, desigur, nu vor să plătească mai mult pentru asta.

Cum am construit o aplicatie cu Vulcanjs in patru zile

Spre aplicația de 4 zile

Pentru antreprenor, proiectarea și construirea unui astfel de minim Minunat Produsul este mult de lucru. Dar banii sunt strânși, iar timpul este bani, așa că trebuie să fii inteligent în ceea ce privește modul în care îi cheltuiți.

Scopul nostru: să putem produce o aplicație SaaS în 4 zile. Nu ne referim la o aplicație de aruncat care nu va suporta dezvoltarea ulterioară. Credem că tehnologiile bine concepute ar trebui să permită atât dezvoltarea pe termen lung, cât și dezvoltarea foarte rapidă: extinderea și scalarea jos. Pentru majoritatea proiectelor, nu este nevoie de tehnologii de prototipare. Numai dacă construiești nave spațiale, dar nu, nu-i așa?

De asemenea, nu ne place să ne bazăm pe servicii / software-uri ale unor terțe părți care afișează site-uri web în câteva clicuri. Dacă produsul dvs. este cu adevărat inovator, probabil că vă simțiți îngrozitor limitat de astfel de servicii.

Deci, cum putem realiza acest miracol fără a folosi o baghetă magică? Să o descoperim printr-un exemplu din viața reală, GestiResto, o aplicație web care îi ajută pe proprietarii de restaurante să își gestioneze rețetele. Notă laterală: Locuiesc în Franța, nu glumim despre mâncare aici, așa că am luat cu adevărat acest proiect în suflet.

Ziua 1: Alegerea navei noastre spațiale

Faceți cunoștință cu Vulcan.js, alias Meteor-on-steroids

Meteor este un renumit cadru JavaScript full-stack. De la bun început, a subliniat întotdeauna productivitatea și experiența dezvoltatorului. A fost pionierul multor caracteristici și modele minunate, cum ar fi dezvoltarea izomorfă (reutilizați aceeași parte a serverului de cod și partea clientului).

Vulcan.js este în esență elementele bune ale Meteor, plus elementele bune ale ecosistemului JavaScript, într-un singur cadru. Se bazează pe cele mai noi tehnologii: React pentru frontend și Apollo (GraphQL) pentru comunicarea client / server.

1611193867 726 Cum am construit o aplicatie cu Vulcanjs in patru zile
Vino cu noi pe Slack!

Ca bonus, include o mulțime de pachete și exemple pentru cele mai frecvente caracteristici (trimiterea buletinelor informative, adăugarea unui forum etc.). Vulcan este nepotul direct al celebrei aplicații / cadru Telescop Meteor, a fost creat de Sacha Greif. Beneficiază astfel de ani de experiență în ciuda modernității sale.

Dacă doriți să aflați mai multe despre Vulcan și cum ajută la reducerea timpului de dezvoltare, puteți face checkout articolul meu anterior în DailyJS.

Deci, Vulcan.js este cu siguranță un candidat solid pentru a respecta termenul nostru autoimpus de 4 zile!

Un sistem de gestionare a utilizatorilor disponibil imediat

Una dintre cele mai iubite caracteristici ale Vulcanului este sistemul său de cont, pe care îl moștenește de la Meteor. Include înscriere / conectare / deconectare, gestionare permisiuni, înscriere / fluxuri de lucru cu parolă uitată (+ trimitere programată de e-mail) și o interfață de utilizator plăcută. Oh, și, de asemenea, este destul de ușor să adăugați autentificare terță parte cu servicii precum Google Oauth.

1611193868 565 Cum am construit o aplicatie cu Vulcanjs in patru zile
Cererea din ziua 1. Sistemul de autentificare este pe deplin funcțional în acest moment. Proiectarea materialului poate fi obținută cu vulcan: material-ui și vulcan: more-material-ui pachete.

Gestionarea conturilor este cu adevărat ceva la care NU VREȚI să vă gândiți în primele etape ale ciclului de viață al aplicației. Câte ore s-au pierdut configurând Passport.js! Cantitatea de servicii de autentificare plătite, cum ar fi Auth0, arată că această problemă nu este încă rezolvată, deci este într-adevăr o caracteristică foarte frumoasă.

Așadar, prima noastră zi a fost bine petrecută. Avem acum un sistem complet de gestionare a utilizatorilor, care include baze de date, server, interfață de utilizare și back-office și am configurat un aspect frumos al interfeței de utilizare a materialelor cu timpul rămas.

1611193868 68 Cum am construit o aplicatie cu Vulcanjs in patru zile

Ziua 2: Gazduire

Gazduire pe AWS cu Meteor Up

De ce să găzduiești deja în ziua 2? Pentru că viața ne-a învățat că este o idee foarte proastă să vă testați aplicația în producție în ultima zi. Într-un mod agil, o caracteristică se realizează numai atunci când este validată într-un context de viață reală. Deci, nu putem considera că aplicația este configurată dacă nu am rulat-o într-un mediu de producție.

Meteor Up este un instrument minunat pentru a implementa automat aplicații Meteor (deci și aplicații Vulcan) pe un server îndepărtat. Se ocupă de toate, de la containerizarea aplicației cu Docker până la generarea certificatelor SSL cu Let’s Encrypt. Configurarea este ușoară, implementarea este o comandă cu o singură linie. Abia există dezavantaje.

Am ales AWS pentru găzduire. Are marele avantaj de a propune servicii gratuite timp de 12 luni. Trebuie să recunosc că am avut dificultăți în configurarea primei mele instanțe EC2. Cu toate acestea, există multe tutoriale pe web și merită problemele inițiale. De asemenea, în prezent scriu un pachet pentru a activa backupul zilnic al bazei de date MongoDB pe AWS S3 pentru a vă proteja datele.

O aplicație de organizare pe Zeit’s Now + Mongolab

Mai devreme sau mai târziu, va trebui să testați dacă aplicația dvs. funcționează în producție, fără a o trimite efectiv la producție. Așa numim un mediu de punere în scenă. Puteți utiliza și AWS, dar să încercăm o soluție gratuită pentru a reduce costurile.

1611193868 910 Cum am construit o aplicatie cu Vulcanjs in patru zile
Salutări tuturor companiilor care oferă servicii gratuite și contribuie la open source.

Serviciul Zeit’s Now este potrivit pentru această utilizare. Oferă găzduire gratuită. Puteți utiliza mLab pentru baza de date, deoarece oferă și un mediu sandbox gratuit. Sincer să fiu, nu am nimic de spus aici, pentru că setarea este la fel de ușoară ca ABC și pe deplin documentat aici. Nici măcar un bug. Care este scopul meu ca dezvoltator dacă nu există erori ???

Bine, deci, la sfârșitul zilei 2, aplicația noastră este în producție și avem un mediu demonstrativ intermediar. Grozav! E grozav, pentru că mai puțin timp pentru caracteristicile generice este mai mult timp pentru caracteristicile valoroase.

Ziua 3: Logica afacerii

O aplicație este o grămadă de formulare și liste

Acum, să trecem la treabă. Majoritatea componentelor unei aplicații pot fi separate în 3 mari categorii: Listă, Formular și Detalii. Acest model se aplică pentru o mulțime de site-uri web.

1611193869 533 Cum am construit o aplicatie cu Vulcanjs in patru zile

Vezi Medium: pagina de pornire conține o listă de articole. Această pagină este o pagină „Detalii” a articolului pe care îl citiți. În partea de jos, veți găsi o listă de comentarii cu un formular de comentarii. Chiar și butonul „aplauze” din stânga (pe care vă invit să faceți clic cu atenție), este o componentă simplistă de tipul Formei.

Vești bune: Vulcan include o mulțime de ajutoare pentru a facilita crearea componentelor List, Form și Details. Include rezolutori GraphQL și React HOC. Abia ai nevoie să-ți scrii a ta. Există chiar și câteva componente React care funcționează imediat. Cea mai avansată dintre ele este SmartForm, care generează automat un formular personalizat de creație / ediție pentru orice colecție.

Nu voi enumera toate caracteristicile pe care Vulcan.js le poate oferi, dar practic puteți avea încredere în acesta pentru a vă face procesul de dezvoltare într-adevăr rapid.

Crearea unei rețete (sau propunerea unei cereri sau publicarea unui articol sau …)

În GestiResto, cele două caracteristici principale sunt crearea și listarea rețetelor. Formularul de creare a rețetei trebuie să afișeze statistici. Detaliile sunt confidențiale, deci iată o captură de ecran a unui formular echivalent dezvoltat pentru Minunat Vulcan.

Dar asta nu face nicio diferență, pentru că iată ideea: Vulcan poate genera automat formulare pentru orice tip de date vă puteți imagina, indiferent dacă este o rețetă sau un elicopter. Adică reprezentarea JSON a unui elicopter.

1611193869 158 Cum am construit o aplicatie cu Vulcanjs in patru zile
Acest formular a fost generat automat utilizând componenta SmartForm de bază Vulcan. Intrarea „Link-uri” este o componentă React personalizată, adaptată nevoilor noastre specifice.

Lista rețetelor este și mai simplă. Ne-am concentrat pe construirea unui frumos RecipeItem care permite utilizatorilor să previzualizeze rapid informațiile despre rețetă, precum și să declanșeze unele acțiuni comune (exportul, ștergerea …). Desigur, include o intrare de căutare bazată pe text, gratuit.

1611193870 324 Cum am construit o aplicatie cu Vulcanjs in patru zile
Nu, nu vă voi oferi niciodată acces la „Rețeta secretă”. Cu excepția, poate, dacă bateți din palme pentru acest articol.
1611193870 233 Cum am construit o aplicatie cu Vulcanjs in patru zile

Ziua 4: Livrează!

Deoarece am făcut cele mai multe părți valoroase ale lucrării în Ziua 3, am rămas o ultimă zi pentru a curăța și îmbunătăți aplicația. Acum putem implementa caracteristicile iubirii de a avea: o componentă care calculează automat prețul final al rețetei dvs., un buton care generează un bun export PDF și o pagină de pornire care face diferența.

Cum am construit o aplicatie cu Vulcanjs in patru zile
Uite cât de fericit este bucătarul nostru! Asta pentru că aplicația sa este construită pe tehnologii open source 100% organice.

În cele din urmă, suntem în Ziua 5. Clientul tocmai a testat aplicația livrată ieri seară și vă spune: „Am testat aplicația, este frumos! Mă gândesc să adaug caracteristica X la pagina Y, cât durează să adaugi componenta Z în opinia ta? … ”. Și atunci știi că ai făcut o treabă bună!

Doriți să vă creați propria aplicație în 4 zile?

Aruncați o privire la aplicația noastră open source Minunat Vulcan. Oferă o bază reutilizabilă pentru aplicațiile profesionale cu aspect UI material. De asemenea, demonstrează utilizarea câtorva pachete pe care le-am implementat.

Sper că te va ajuta în călătoria ta către aplicația de 4 zile!

1611193871 856 Cum am construit o aplicatie cu Vulcanjs in patru zile

Sunt cofondatorul companiei franceze Lebrun Burel Knowledge Engineering (LBKE) – https://www.lebrun-burel.com

Întotdeauna fericit să vorbim despre cod, învățare automată, inovație și antreprenoriat!