I'vegot a linktothatdatathedescriptionbelowandalsoonmywebsite.
Youcanfind a foolingarticletoaccompanythisvideo.
Youcanactuallyfallthatstepbystepandyou'refollowingthistutorial, and I'vealsogot a linktothatinthevideodescription.
Sobeforewestartactuallybuildingtheapplication, let's get a highleveloverviewofhowBlockchainapplicationpowerbysmartcontractactuallyworks.
Thehatis a BlockchainworkAndhowdoes a Blockchainapplicationwork?
Well, I'vechosen a todolistforthistutorialbecausethat's reallycommonwaytolearnanynewtechnology, and I wanttousethattoshowyouhow a blotchapplicationworks.
Sofirst, let's lookathowittodo.
Thiswouldworkas a Webapplication, andthen I'llshowyouhowitworksas a blotchinapplication.
Soputmywhiteboardupheretodemonstrate.
Normally, wheneveryouaccess a Webapplication, look a todolist.
Forexample, youuse a Webbrowserandyouconnectto a WebserverovertheInternetandyouaccess, youknow, allthecodeandallthedatafromthisWebserver.
So, likethis, youbasicallyconnectfromyourWebbrowsertotheserverandontheserver.
Andthat's fundamentallyhowAHblackshinapplicationwouldworkandhowit's differentfrom a traditionalWebapplication.
Sothatmightbringup a lotofquestions, likehowtobeconnected.
A Blockchain.
AndhowdoestheBlockchainwork?
Whatevenis a blockshape?
Well, pausehereandtellyou a littlemoreaboutthat.
Sowhatevenis a Blockchain, right?
Ourclients?
Thatapplication's actuallytalkingto a Blockchainrighthere, soit's actually a separatenetwork, okay, and a Blockchainis a peertopeernetworkofnodesthat I'lltalktooneanother.
It's a distributednetwork, sothere's actuallydifferentComputersaremachinesthattalktooneanother, andwecanconnecttoanindividualnodeontheblockchaininordertouseit.
Theyallcontain a copyofthecodeontheblockchainandallofthedataontheblockchainandallofthedataontheblocchancecontainedinbundlesofrecordscalledblockswhicharechainedtogethertomakeuptheblockchainandallofthenoseonthenetworkalsoparticipateinensuringthatthedateontheblockchainthepublicledgerissecureandunchangeable.
Allright, Nowgobacktothedrawingboardandkindofgiveyou a refresherabouthowourapplicationsgonnaworkagain.
We'regonnaconnecttotheapplicationwith a Webbrowserandwe'regonnabuild a clientsideapplicationin h e mailsCSSandJavaScriptandthatclientapplicationsgoingtalkdirectlytotheBlockchain.
Andthat's whywe'regonnaputoursmartcontractwillcreate a todolistwithinEthereumSmartcontractwrittensolidityandwillcompileitanddeployedtotheBlockchain.
ItwillalsoconnecttotheBlockchainnetworkwithourpersonalaccountwithinEthereumwalletinourbrowser, and I'llshowyouhowtogetthatsetupinthistutorialaswell.
Youcanseeifyouhavenoinstalledbygoingtoyourterminalandhavingnodash V youcaninstallknowwiththepackagemanagerlikehomebreworyoucondoneitdirectlyfromtheKnowJswebsite.
ThefirstitemintheBlockchaindevelopertoolkitis a personalBlockchain.
We'regoingtouseganacheasourpersonalBlockchain.
Forthistutorial, youcouldheadovertotruffleframeworkdotcomfor a slashKanosh, downloaditandquitthisdownloadlinkandwhateveryou'vedownloaded, itmakesyouinstallitandwhenyouopenit, you'vegot a localBlockchainrunning.
Sowhatisganache.
Youknowwhatis a personalBlockchain?
Well, a personalBlockchainislike a realBlockchainnetwork.
Like I said, I justpaidtotheseinhere, andyoucanseewehave a fewdependencieslikethebootstrapframeworkwillusethisforbuildingout.
Um, theclientsatapplication.
Wegotsomedependenciesfortestingthismarkontracks a serverforrunningtheclientsatapplication, andyouknow, someothertrufflespecificdevelopmentdependencies.
And I'velockedtheseversionssothatyoucankeepfollowingthistutorialinthefuture.
Somakesurethatalltheseversionsmatchwhat I havehere.
Sonow I'm actuallygoingtoinstallthedependenciesfortheprojectlikethissortofsayin P M Install.
Allright, it's anotherinstalled.
Nowlet's gobackandyou're a projectandactuallycreatethesmartcontractfilethatwillusetobuild a todolist.
We'lldothatbygoingtothecontractsdirectory, andyoucanseethere's a smartcontractthatexistsinsideofhere.
Thisisactually a smartcontractthatcomesbundledwithtrufflethatmanagesmigrationstothenetwork, and I'llexplainthathere a littlebitandnowcreate a newfileinsidethisdirectorycalledtoDoListthatsoulsoyoucanseethatdolistiscapitalizedtodolist, andit's inthesameprojectdirectoryhere.
Sothefirstthingthatwilldoinsideofhereisjustkeeptrackofthenumberoftasksthatairinthetodolist, andwe'llstorethisvaluesthatthesmartcontractis a waytokindofgetstarted.
Sofirstwe'llkeeptrackofthenumberoftodolistsinsideofthesmartcontractwithvariable, itwillbe a specialkindofvariableinsulated D called a statevariableandweaken.
Declare a statevariablelikethiswillsayyouenttaskcount.
Andtheseare a lotlike, youknow, classvariablesandanobjectorientedcontextwhereyouknowthescopeofthevariablebelongstotheentiresmartcontract, notnecessarilylike a functionorsomethinglikethat.
Andwecanalsocreate a waytoreadthisvaluefromthesmartcontractwith a keywordcalledPublic.
Allright.
Andwhatthatdoesisactuallyprovidesomefunctionforusthatallowsustoreadthevaluetaskcountfromthetodolistandsoliditykindofjustmagicallygivesus a functionwheneverweusethispublickeyword.
And, yeah, there's a lotmoreusefulinformationinsideofhere.
But I justwantedtoshowyouthatinitially.
Now, inordertoactuallyputthesmartcontractontheblockchain, wewanttocreate a fewmorefiles.
And I kindofgiveyou a touroftherestoftheprojectstructurehereaswedothat, inordertoconnecttotheblock, shamewillactuallyneedtoeupdatethistruffledashconfigfile.
Allright, but I'm actuallygonnajustpaysomecodeinsideofhereagain.
YoucangetthiscodefromtherepositoriesforthisprojecttogetHubRepothat I'vegotdone a descriptionbelow.
Now, let's create a migrationfileinordertogetthesmartcontractontotheblock.
Chaim.
Soifyougotoyourmigrationdirectory, you'llsee a fileinsideofhere.
It's calledinitialmigrations.
Youwanttocopythecontentsofthis?
Actually, could a newfileinthissamedirectory, I'llcallittoo?
WillsaydeploycontractsdotJs.
Okay, what's insideofthisdirectory?
Well, theseairmigrationsgonnapacethiscodeinhere.
Sowhatisthemigration?
Well, ifyou'vecomefromanotherdevelopmentbackgroundwhereyou'veused a database, youmighthavehadtochangethestateofthatdatabasebyaddingnewtablesareaddingcolumnstothetables.
Weneedtocreate a newstatevariableinlikewedidherewithtaskcount, remember, Taskcountisgettingwrittentostoragetostatevariable.
It's representingthestateofthesmartcontract, whichiswrittentotheBlockchain, theactualdatastorage, andwe'llactuallywanttocreate a stateverywellcalledtaskshere.
Butwedon't wanttobe, youknow, unsignedmanager.
Wewant a differentdatatype.
Wewantsomethingcalled a mapping, andthisisgoingtotake a keyvaluepairlikethis.
ItwillsayyouwentIt's a task.
Okay, Now, mappingandsolidityis a lotlikeanassociativearrayor a hashandotherprogramminglanguageswhereyoustore a keyvaluepair.
Right.
Andwhenwedeclarethismappinghere, wedeclarethedatatypeforthekey, whichisanunscientificerandthetaskwhichis, youknow, thisstruckthatwedefinedhere, andessentiallythiseyesgoingtobekindoflike a databaseforus.
It'llhave a U.
N anunsignedmanager.
Thatwillbethe i d.
Essentiallyofthetaskthatwillstorehere.
Sowecanyoulookfortask, youknow, 123 and a returnthetasksokay.
Andwealsowanttomakethispublicjustlikewedidwith a taskcount, andthatwillgiveus a readerfunctionforfree, providedbysoliditythatwillallowustoaccesstheitemsoutofthismapping.
Allright, now, wehave a waytocreatenewtasksandactuallyputtheminthe, youknow, databaseortheblockchaininthiscasewillbeabletousethistask I d referencehereandstorethetasklikethis.
Sonow I need a waytoactuallyputthistaskstruckinsideofthismappingdothatwillcreate a functioncalledcreatetaskfunkfunctionCreatetaskandinsideofherewillprovides a singleargumentwhichwilljustbethecontentofthetaskitself.
Soifyou'veeverusedanotherprogramminglanguagethathas, like, aninitializedfunctionsoutof a classorsomesortofobject, youknow, maybeinitorknewsomethinglikethat, you'veseen a constructorbefore.
Sobasically, thisisjustgoingtobe a functionthat's calledwheneverthissmartcontractisrunforthefirsttime, whichinthiscase, isupondeployment.
Allright, soinsideofthisconstructorfunction, wecanactuallyadd a defaulttasktothetodolist.