Uppbyggðu gangsetninguna þína með Python, React, React Native og AWS

Þetta byrjar allt með hugmynd.

Hugmyndir eru spennandi. Þú vilt byrja strax og láta hugmynd þína verða til lífsins. Það gæti verið að þú sért að hugsa um að gera hliðarverkefni, prófa nýja tækni í vinnunni eða undirbúa að hefja gangsetningu.

Í janúar hóf ég fyrsta gangsetninguna mína, Proximistyle. Í hvaða búningi sem er, Proximistyle gerir þér kleift að sjá hvaða verslanir eru með á lager, í stærð þinni, nálægt. Proximistyle er byggt á React, React Native, Python og AWS stafla. Ég valdi þennan stafla bæði vegna þess að ég hafði fyrri reynslu af því að vinna með hann frá mínu gamla starfi sem magnþróunaraðili í stýramatískum vogunarsjóði, og vegna þess að það er auðvelt að setja í hann stafla.

Proximistyle vefsíðan var gerð með React

Proximistyle vefsíðan var gerð í React og iPhone appið var gert með React Native. Þeir nota báðir sama API til að ræða við AWS sem hýst er Python stuðningur.

Bregðast við

React er auðvelt að læra JavaScript bókasafn sem gerir það sársaukalaust að búa til gagnvirka notendaviðmót. Kraftur React er sá að það gerir þér kleift að byggja UI þitt úr mátablöndu af bókasafni og sérsniðnum íhlutum. Kraftur íhlutanna er sá að þú getur skrifað stykki af vefsíðunni þinni einu sinni og síðan endurnýtt hana margfalt.

A TODO listi með nokkrum af íhlutunum auðkenndir

Taktu þennan TODO lista sem dæmi. Verkefni á TODO listanum þínum er einn hluti (appelsínugult). Þetta þýðir að ef þú vildir breyta öllum verkefnum þínum til að byrja með stjörnu emoji þyrfti þú aðeins að uppfæra verkefnisþáttinn þinn. Allir staðirnir sem nota verkefnisþáttinn þinn myndu strax verða uppfærðir. TODO listinn sjálfur (fjólublár) er einnig hluti. Þetta fylgir forritunarreglunni fyrir Ekki endurtaka sjálfan þig (DRY).

Athyglisverðir aðgerðir viðbrögð

React code er byggð upp í röð íhluta og sett saman sem stigveldi tré. Þú ert með rótarhluta efst og restin af síðunni er tengd við þetta.

# 1 flæði gagnaflæðis

Gagnaflæði í React er ein átt frá foreldri til barns. Gögn sem send hafa verið til barns teljast óbreytanleg.

# 2 Virtual DOM

React notar sýndar DOM, sem er gögn skyndiminni í minni alls vefsíðunnar. Alltaf þegar gögnin fyrir íhlutinn breytast er reiknað út diff og aðeins viðkomandi hlutar eru uppfærðir. Þetta þýðir að vefsíðan þín uppfærist mjög fljótt þegar breytingar eiga sér stað.

# 3 JSX

React notar tungumál sem kallast JSX, sem stendur fyrir JavaScript XML sem gerir þér í raun kleift að skrifa HTML í JavaScript.

# 4 Skilyrt yfirlýsingar í JSX þinni

Skilyrt orðatiltæki í JSX-tækinu þínu gefa þér möguleika á að breyta efni á breytilegan hátt eftir breytum. Þú getur til dæmis sýnt efni þegar smellt er á hnapp.

# 5 Bókasöfn

Einn stærsti ávinningurinn af því að bregðast við er mikill framboð bókasafna. Það eru til bókasöfn fyrir nokkurn veginn hvaða þætti sem þú vilt að vefsíðan þín hafi. Renna, hringekjur, kort o.fl. Þetta gerir það að verkum að það er mjög fljótt að koma vefsíðu í gang. Tveir algengir pakkastjórar bókasafna eru NPM og Garn.

Helstu kostir þess að nota React

# 1 Hraði, einfaldleiki, sveigjanleiki

Hinn byggingarhluti arkitektúr React gerir þér kleift að búa til vefsíðu á áhugamál eða einhyrnings mælikvarða fljótt og auðveldlega.

# 2 Ekki endurtaka þig

Að nota íhluti þýðir að skapa einu sinni og endurnýta alls staðar.

# 3 Auðvelt að læra

Ef þú þekkir HTML og JavaScript er React mjög auðvelt að byrja með.

# 4 Breiður ættleiðing

React er mikið notað í iðnaði, meðal annars af Facebook, Instagram og Airbnb. Þetta þýðir að auðvelt er að ráða fyrir og auðvelt að finna skjöl og námskeið á netinu.

Hvarf innfæddur

React Native er mjög svipað React, nema það saman við Android og iOS í stað vefsíðu. Það gerir þér kleift að skrifa farsímaforritið þitt í React, sem þýðir að þú getur samið UI þitt úr ríkum, yfirlýsandi íhlutum. Notkun React Native þýðir þó ekki að þú sért að skrifa farsímaforrit. Það safnast saman við innfæddur app.

Ef þú þekkir React er það frekar auðvelt að læra React Native þar sem setningafræði er það sama. Helsti munurinn er bókasöfnin sem eru tiltæk og mismunandi innbyggðir íhlutir.

React Native notar ekki HTML merki sem React notar, þar sem það safnar saman í farsíma og ekki á vefinn. Í React myndirðu nota og merki til að birta málsgrein, en í React Native myndirðu í staðinn nota og merki.

React VS React Native code example

Til er bókasafn sem kallast React Primitives sem gerir þér kleift að endurnýta marga hluti í React og React Native verkefnum þínum til að forðast tvíverknað af kóða. Markmið þessa verkefnis er að einn daginn geti skrifað einu sinni og dreift þrisvar sinnum - á vefinn, Android og iOS. Leland Richardson frá Airbnb hefur mikið erindi um tvíverknaðinn sem þeir vonast til að losna við með því að sameina vef, iOS og Android í einn kóða stöð.

Helstu kostir þess að nota React Native

# 1 Skrifaðu einu sinni, dreifðu tvisvar. Leaner verkfræðiteymi.

Helstu kostir þess að nota React Native er að þú getur notað hluta af kóða þínum og þú verður aðeins að skrifa forritið einu sinni í stað tvisvar. Þetta auðveldar ráðningu þar sem þú getur haldið sneggri verkfræðideymi. Þetta skiptir miklu máli í botnlínunni þegar þú ert að byrja í stigi.

# 2 Breyting á sviði iðnaðar

React Native er mjög mikið notað í iðnaði, meðal annars af Airbnb, Facebook og Instagram. Þetta gerir það að verkum að auðvelt er að ráða fyrir, þar sem það er víða notaður færni. Það þýðir líka að það er mikið af auðlindum á netinu í boði. Þú finnur fullt af uppfærðum bókasöfnum sem leysa algengustu þarfir þínar og svör við vandamálum þínum í StackOverflow og í bloggfærslum.

# 3 Hröð þróun með Hot Reloading

Eitt af því besta við að þróa app í React Native er þróunarhraðinn. Með því að nota Hot Reloading geturðu endurhlaðað appið þitt án tafar án þess að taka saman aftur. Það er bókstaflega eins hratt og að hressa vefsíðu. Með endurhleðslu er jafnvel hægt að halda umsóknarástandi meðan þú keyrir nýjan kóða.

# 4 Stuðningur við frumritaða íhluti

React Native styður bæði JavaScript og innfæddan kóða (Swift, Objective-C eða Java). Þetta þýðir að ef þú finnur ekki bókasafn sem leysir vandamál þitt geturðu skrifað eigin hluti í annað hvort React eða Native code. Forritið þitt getur notað innfæddan kóða beint og flutt það inn eins og það væri einhver annar hluti.

# 5 Auðvelt að læra, farðu fljótt frá hugmynd í App Store

Ég ákvað að búa til Proximistyle iPhone forritið í febrúar, eftir að notendur okkar héldu stöðugt að biðja um forrit. Hef aldrei búið til app áður en þekkti React, ég náði að fá appið í Apple app verslunina um miðjan mars.

Munurinn á því að gera Proximistyle sem React vefsíðu og sem app var stærri en ég bjóst við fyrst (það tekur lengri tíma en helgi), en meginhluti námsferilsins er að reikna út hvernig á að keyra appið þitt í símanum og venjast til að kóða og öll sérkenni þess.

Einn helsti munurinn á hönnun HÍ er að React Native notar flexbox í stað CSS ristarinnar. Þetta tekur svolítinn tíma að venjast, ef maður er mjög vanur að vinna með ristir. React Native hefur einnig teiknimyndasöfn, innfæddan strjúka og sniðugt innbyggt gagnaskipulag til að fletta íhlutum.

Þegar ég hafði vanist því naut ég mjög rennslisins og sá að upplifun notandans af því að nota Proximistyle sem app í staðinn fyrir í farsímanum var örugglega 10x.

Byrjaðu með React

Það er ótrúlega auðvelt að byrja með React ef þú notar Facebook-create-react-app handritið. Það er bókstaflega handrit sem þú halar niður frá GitHub og keyrir í flugstöðinni til að frumstilla geymsluplássið þitt.

npx búa til-bregðast-app mitt-app CD mitt-forritið npm byrjun

Búa til-bregðast við-app sér um öll snotur uppsetningarskref með Webpack og Babel, svo þú getir komist rétt í vinnu. Ef þú þarft að stilla þessar handvirkt geturðu séð hvernig á að gera það í bloggfærslunni minni eða tala frá EuroPython í fyrra.

React virkjar skjótt ítranir

Þegar þú ert að byggja MVP fyrir ræsingu þína myndirðu venjulega byrja á því að teikna út hvernig þér finnst að HÍ ætti að líta út. Fljótlegasta leiðin til að prófa frumgerð væri að nota eitthvað eins og Sketch og InVision til að spotta það, setja það á símann þinn og sýna fólki það. Það var það sem ég gerði með Proximistyle. Þegar þú ert kominn yfir það stig, þá viltu byggja gagnvirkt HÍ frekar fljótt.

Þegar þú ert að byggja upp vefsíðu í React er léttvægt að setja gúmagögn inn í kerfið þitt þar sem API símtöl þín venjulega skila þeim. Þar sem gagnaflæðið er einhliða geturðu bætt við gögnum ofarlega í trénu og gengið úr skugga um að umsókn þín hagi sér eins og búist var við mjög auðveldlega. Þú getur síðan prófað snemma gagnvirka frumgerðina þína til að athuga hvort það sé það sem notendur þínir vilja. Þetta mun spara þér dýrmætur þróunartími.

Að hringja í API

Þegar þú ert ánægður með framhliðina þína geturðu tengt það við stuðningsforritaskil þitt. Ég myndi venjulega nota jQuery, ná í eða loforð til að hringja í API úr React code.

ná í ('api.example.com') .then (response => response.json ()) .catch (error => console.log (villa));

Vegna þess að ég myndi vilja fá stuðninginn minn og ganga hratt, myndi ég kóða hann í Python og hýsa það á AWS.

Python

Python er eitt fjölhæfasta tungumálið sem er til staðar. Þú getur notað það fyrir allt frá pínulitlum skriftum, til gagnavísinda og fyrirtækja á óvart. Margir kerfisbundnir vogunarsjóðir, þar á meðal sá sem ég notaði til að vinna, eru Python hús. Það þýðir að rannsóknirnar gerast í Python, með SciPy og Numpy. Viðskiptakerfin eru skrifuð í Python, líklega með Docker umbúðir, og handahófi handritanna sem fólk skrifar til að gera sjálfvirkan bita og bob verður einnig skrifað í Python. Þú getur jafnvel skafa vefsíður með Python.

Python kemur sjálfkrafa upp á Mac og Linux og er áreynslulaust að byrja með. Notaðu einfaldlega flugstöðina eða opnaðu uppáhalds ritstjórann þinn og byrjaðu að slá.

def hello_world (): prenta ('Halló heimur!')
ef __name__ == '__main__': hello_world ()

Hýsir Backend okkar

Þegar það kemur að því að skrifa backend fyrir vefsíðu okkar eða app, höfum við mikið af valkostum eftir því hvað við erum að reyna að byggja upp. Einn valkostur er að nota Kolbu, Django eða Pýramída til að búa til netþjón sem við hýsum einhvers staðar. Hinn möguleikinn er að nota netlausan arkitektúr.

Ávinningurinn af því að nota netlausa tölvuuppbyggingu er að þú borgar aðeins fyrir nákvæmlega það magn af netþjóni og tíma sem þú notar. Þetta getur dregið verulega úr rekstrarkostnaði og flækjum gangsetningarinnar, sérstaklega þegar ekki er kallað mjög oft í stuðninginn þinn. Vinsælasta netlausa tölvulausnin er AWS Lambda.

Amazon Web Services (AWS)

Amazon Web Services er að öllum líkindum vinsælasta skýhýsingarlausn heimsins. Það er notað af áhugamálum, sprotafyrirtækjum, unicorns og fyrirtækjum jafnt. Sumir byrjendur sem þú hefur sennilega heyrt um sem nota AWS eru Spotify, Airbnb, Slack og Lyft. Eins og með restina af þessari tæknistakku, gerir það að verkum að auðvelt er að tileinka sér iðnaðinn til að ráða einhvern sem veit þetta og þú getur fundið mörg svör við algengum málum á netinu.

AWS býður upp á alla þjónustu sem þú getur ímyndað þér. Geymsla, reikna, fylgjast með, tengjast neti, greiningu og vélanámi. Það eru mörg hundruð valkosti sem hægt er að velja úr, sem geta verið mjög ógnvekjandi ef það er fyrsta leiðin þín til að hýsa eitthvað. Ég endaði á því að biðja vini í rýminu að mæla með tiltekinni þjónustu AWS, enda var nokkuð erfitt að sjá skóginn fyrir trjánum. Ég gerði einnig nokkrar rannsóknir á netinu. Að lokum uppgötvaði ég að þú þarft aðallega að vera meðvitaður um vinsælustu þjónustuna, sem nær til 90% af þínum þörfum. Þeir eru:

  • Leið 53 (DNS. Þörf fyrir SSL)
  • Cloud Front (Worldwide Edge Caching fyrir vefsíðuna þína)
  • S3 (hýsing vefsíðna)
  • API hlið (opinberi lokapunktur þinn fyrir API)
  • AWS Lambda (netþjónaútreikningur)
  • EC2 (Compute)
  • DynamoDb (NoSQL gagnagrunnur)

A AWS arkitektúr

AWS býður upp á nokkrar gagnlegar byrjunarfræðinga og leiðbeiningar sem ég mæli eindregið með að nota til að byrja með. Það auðveldar skipulag og tryggir að þú stillir ekki neitt rangt. Það er líka fín leið til að kynnast því hvernig AWS virkar.

S3 fötu

S3, sem stendur fyrir Simple Storage Service, er nokkurn veginn það sem það segir á tini. Það er fötu sem þú hleður skjölunum þínum í. Þú getur síðan ákveðið hvort fötu er einkaaðila eða opinber. Ef þú hleður upp viðbragðskóðanum þínum og gerir hann opinberan, þá ertu með stöðuga vefsíðu. Auðvelt eins og það.

// búa til S3 fötu $ aws s3 mb s3: // fötuName
// smíða og dreifa React forritinu þínu $ npm run build && aws s3 sync build / s3: // bucketName

Kostnaður fyrir S3 er ~ $ 1–3 / mánuði ef allt sem þú vilt er að hýsa truflanir vefsíðu.

API hlið

API Gateway er notað til að hafa samskipti á milli vefsvæðis þíns og stuðnings. Það er frekar einfalt að stilla og gerir þér kleift að ýta API-breytingum auðveldlega út á sjálfskilgreindum stigum eins og beta og prod. Þú getur líka bætt við aðgangs- eða notkunartakmörkunum fyrir API Gateway API. Sjálfgefinn frestur fyrir API símtal er 30 sekúndur.

AWS Lambda

Netlaus tölvuútgáfa Amazon er kölluð AWS Lambda. Lambda aðgerð er í raun fall sem er aðeins til þann tíma sem það tekur að keyra hana. Þegar þú kallar lambda aðgerð eyðir það broti smá stund í að byrja, það fer og gerir það sem þú baðst um að gera og skilar síðan niðurstöðunni. Þú ert aðeins gjaldfærður fyrir hverja 100 milljón tíma sem það tók til að framkvæma aðgerðina, samanborið við að borga á mínútu eða klukkustund fyrir venjulegan netþjón. Ekki er rukkað fyrir neitt þegar kóðinn þinn er ekki í gangi.

Þess má geta að þú getur stillt þína eigin tíma fyrir lambdaaðgerð, en hafðu í huga að ef þú ert að hringja í það frá API Gateway, þá gæti API símtalið farið fram áður en lambdaaðgerðinni lýkur, sem þýðir að það gæti litið út eins og þú hringir mistókst þegar það gerðist ekki.

Dæmi um vefforrit sem notar lambda, frá heimasíðu AWS Lambda.

Annar ávinningur af því að nota lambdana er sveigjanleikinn. Vegna þess að allar lambas þínar keyra samsíða mælikvarða umsóknir þínar fullkomlega, svo framarlega sem það hefur samband við það getur líka sinnt mælikvarðanum.

Ein helsta ástæða mín fyrir því að velja að nota lambdas var að það þýddi að ég þyrfti ekki að viðhalda mínum eigin netþjónum. Eftir að hafa notað netþjóna fyrir önnur áhugamál verkefni og verið Linux notandi fyrir nokkrum árum veit ég hvernig tímafrekt viðhald miðlarans getur verið jafnvel bara á persónulegum mælikvarða. Þetta var líka ein af ástæðunum fyrir því að ég flutti frá Linux til Mac fyrir ekki löngu. Það er ekki þess virði að þræta.

AWS Free Tier

Ef þú ert að stofna AWS reikning í fyrsta skipti sem þú ert glæsilegur fyrir AWS Free Tier. Það gerir þér kleift að prófa AWS í raun ókeypis í eitt ár, svo framarlega sem þú notar ekki of mörg úrræði. Þetta er gríðarleg hjálp ef þú ert að hefja nýja gangsetningu, þar sem þú munt líklega ekki hafa neina peninga þegar þú byrjar að byggja upp þína frábæru nýju hugmynd. Ef þú getur sannað fyrir AWS að þú ert ný byrjun gætirðu jafnvel verið samþykkt fyrir Bulders styrkinn, sem gefur þér 1.000 $ í ókeypis AWS einingum. Það hljómar kannski ekki eins mikið en það gengur langt.

Pyttur og Gotchas

Það eru margir pyttar sem gotchas eru við notkun AWS, sérstaklega í byrjun. Það er mjög auðvelt að eyða miklum tíma í að reyna að reikna út af hverju einn íhlutur er ekki í samskiptum við annan, aðeins til að reikna út að þú hafir ekki stillt netkerfi eða heimildir rétt. Ég hef skrifað um þetta í fyrri bloggpósti sem ég mæli með að kíkja á til að forðast höfuðverk.

Lokahugsanir

Þú ættir nú að hafa betri hugmynd um hvers vegna þú velur tæknistakkann sem þú byrjar á því hversu auðvelt er að byrja með, ráða og Google málin er góð hugmynd. Vonandi er þessi færsla gagnleg ýta í rétta átt til að taka þig frá hugmynd til MVP.

Láttu mig vita ef þú lest þetta og endar að byggja eitthvað. Mér þætti vænt um að heyra hvað þú ert að vinna í. Sendu mér tölvupóst á angela@proximistyle.com til að segja mér allt um það!

Angela Branaes er stofnandi Proximistyle, RetailTech gangsetning sem hjálpar þér að finna það sem þú ert að leita að í nágrenninu. Hún er með tölvunarfræðipróf frá Imperial College í London og hefur áður starfað hjá kerfisbundnum vogunarsjóði, flokkaupplýsingabanka og kísildalafyrirtæki áður en hún hætti hugrakkur störfum við að hefja eigin sprotafyrirtæki.