Upload File

full stack web development in vue€¦ · • vue.js • webpack • express • node.js full stack...

  • Home
  • Documents
  • Full Stack Web Development in Vue€¦ · • Vue.js • Webpack • Express • Node.js Full Stack Web Development in Vue.js By: Cole J Calamos The NKC Family Foundation (NKCFF)
1
I contributed to choosing most of the technology stack as I felt that through my past experiences at the various companies I have worked for and through me looking into the future of what we all will be using at the various jobs that we are all applying for. Although some of the technologies just made sense to use together other larger pieces, such as Vue.js and JWT, was chosen due to their documentation and ease of use for those developing on this project. The back end work that I accomplished during the interterm was authentication, authorization, controllers, middleware, and routes for all currently existing functions in this application. The authentication and authorization for this application was complicated as I wanted to test my abilities to create a secure way of authenticating that the request and response of every interaction between the back end and front end would be verified. In order to accomplish this I used JSON web token (JWT) to check the unique signature of request and response done on the front end and on the back end. The front end was developed using Vue.js and I learned a lot about single page applications through out this project. As well I was tested on my designer skills with creating UI mockups for the customer of the various pages that went into the application and then developed those images into actual code. • Vue.js • Webpack • Express • Node.js Full Stack Web Development in Vue.js By: Cole J Calamos The NKC Family Foundation (NKCFF) requested for me to develop an application to replace their current management software. After a couple months of solidifying what exactly they wanted to be done, during this time of J-Term and what is expected from me to continue on after the term, I was able to form a team and create a project proposal to begin development. • Access certain company information from anywhere • Store Documents, Contact Information, Organization information, and Grant Information • Ability to change what forms are displayed on their non-secured page • Redesign their public non-secure website Introduction Front-End Conclusion Future Work Technology Stack Objectives Back-End Database Deployment Deployment was done using Amazon Web Services, due to the great support that amazon provides and the low costs that will play a role in the future for NKCFF. I decided to use an AWS S3 bucket as it is very low cost and has the capabilities of hosting a static web page that is created through webpack. I also chose an RDS (Relation database server) as it made the most sense for hosting a postgres database. Finally I decided on using an elastic beanstalk for the backend deployment as it allows for easy scalability due to the amount of requests it may or may not receive on the various API routes, all while running the node server. The database consisted of thirteen different tables that all were connected to each other through some sort of connecting table. I was responsible for creating the database and the tables with the unique indexes on each of the unique columns of the table. As well, I create insert statements to create dummy data that was used to test out our application while developing. Finally I created a database function to generate a UUID for the session’s and I created a trigger to auto update the updated_at column of the row that is being updated, with the current timestamp. • Accounting Features • Guidestar integration • Break components further into abstract functions • Ability to comment on documents • Ability to view documents online, before downloading In conclusion my team and I were able to deliver a minimal viable product that reached all of the objectives that were in scope. I learned a lot more about full stack development through out this process and was able to better understand how to intertwine different parts of the stack all together to work in harmony and to produce a product that I am willing to put my name on. Acknowledgements Special thanks to: • Dr. Jonathan Geisler for proctoring and providing helpful insight into this project. • Katie Bifoss for being very willing to meet with us and provide answers and clarifications to all and any requirements. • NKC Family Foundation for providing us with this opportunity to work on a real-world application. • Babel • Postgres • AWS • JWT Figure 3: Authentication Diagram The most challenging part about developing from mockups is getting all of the strange shapes to properly form and keep its ratio throughout the different screen sizes. However through the use of SVGs we were able to accomplish this without too much hassle. Once most of the views were done I went ahead and created the models that would interact with my API service to request information properly from the back end server. These models and services would verify every request coming in and would format the data that was coming in and going out of the different views. Figure 2: Create Document Page Figure 1: Our Mission Page

Upload: others

Post on 16-Oct-2020

5 views

Category:

Documents


0 download

Report

TRANSCRIPT

Page 1: Full Stack Web Development in Vue€¦ · • Vue.js • Webpack • Express • Node.js Full Stack Web Development in Vue.js By: Cole J Calamos The NKC Family Foundation (NKCFF)

IcontributedtochoosingmostofthetechnologystackasIfeltthatthroughmypastexperiencesatthevariouscompaniesIhaveworkedforandthroughmelookingintothefutureofwhatweallwillbeusingatthevariousjobsthatweareallapplyingfor.Althoughsomeofthetechnologiesjustmadesensetousetogetherotherlargerpieces,suchasVue.jsandJWT,waschosenduetotheirdocumentationandeaseofuseforthosedevelopingonthisproject.

ThebackendworkthatIaccomplishedduringtheintertermwasauthentication,authorization,controllers,middleware,androutesforallcurrentlyexistingfunctionsinthisapplication.TheauthenticationandauthorizationforthisapplicationwascomplicatedasIwantedtotestmyabilitiestocreateasecurewayofauthenticatingthattherequestandresponseofeveryinteractionbetweenthebackendandfrontendwouldbeverified.InordertoaccomplishthisIusedJSONwebtoken(JWT)tochecktheuniquesignatureofrequestandresponsedoneonthefrontendandonthebackend.

ThefrontendwasdevelopedusingVue.jsandIlearnedalotaboutsinglepageapplicationsthroughoutthisproject.AswellIwastestedonmydesignerskillswithcreatingUImockupsforthecustomerofthevariouspagesthatwentintotheapplicationandthendevelopedthoseimagesintoactualcode.

• Vue.js• Webpack• Express• Node.js

Full Stack Web Development in Vue.jsBy: Cole J Calamos

TheNKCFamilyFoundation(NKCFF)requestedformetodevelopanapplicationtoreplacetheircurrentmanagementsoftware.Afteracouplemonthsofsolidifyingwhatexactlytheywantedtobedone,duringthistimeofJ-Termandwhatisexpectedfrommetocontinueonaftertheterm,Iwasabletoformateamandcreateaprojectproposaltobegindevelopment.

• Accesscertaincompanyinformationfromanywhere

• StoreDocuments,ContactInformation,Organizationinformation,andGrantInformation

• Abilitytochangewhatformsaredisplayedontheirnon-securedpage

• Redesigntheirpublicnon-securewebsite

Introduction Front-End

Conclusion

Future Work

Technology Stack

Objectives

Back-End

Database

DeploymentDeploymentwasdoneusingAmazonWebServices,duetothegreatsupportthatamazonprovidesandthelowcoststhatwillplayaroleinthefutureforNKCFF.IdecidedtouseanAWSS3bucketasitisverylowcostandhasthecapabilitiesofhostingastaticwebpagethatiscreatedthroughwebpack.IalsochoseanRDS(Relationdatabaseserver)asitmadethemostsenseforhostingapostgresdatabase.FinallyIdecidedonusinganelasticbeanstalkforthebackenddeploymentasitallowsforeasyscalabilityduetotheamountofrequestsitmayormaynotreceiveonthevariousAPIroutes,allwhilerunningthenodeserver.

Thedatabaseconsistedofthirteendifferenttablesthatallwereconnectedtoeachotherthroughsomesortofconnectingtable.Iwasresponsibleforcreatingthedatabaseandthetableswiththeuniqueindexesoneachoftheuniquecolumnsofthetable.Aswell,Icreateinsertstatementstocreatedummydatathatwasusedtotestoutourapplicationwhiledeveloping.FinallyIcreatedadatabasefunctiontogenerateaUUIDforthesession’sandIcreatedatriggertoautoupdatetheupdated_atcolumnoftherowthatisbeingupdated,withthecurrenttimestamp.

• AccountingFeatures• Guidestarintegration• Breakcomponentsfurtherintoabstract

functions• Abilitytocommentondocuments• Abilitytoviewdocumentsonline,before

downloading

InconclusionmyteamandIwereabletodeliveraminimalviableproductthatreachedalloftheobjectivesthatwereinscope.IlearnedalotmoreaboutfullstackdevelopmentthroughoutthisprocessandwasabletobetterunderstandhowtointertwinedifferentpartsofthestackalltogethertoworkinharmonyandtoproduceaproductthatIamwillingtoputmynameon.

Acknowledgements Specialthanksto:• Dr.JonathanGeislerforproctoringand

providinghelpfulinsightintothisproject.• KatieBifossforbeingverywillingtomeetwith

usandprovideanswersandclarificationstoallandanyrequirements.

• NKCFamilyFoundationforprovidinguswiththisopportunitytoworkonareal-worldapplication.

• Babel• Postgres• AWS• JWT

Figure3:AuthenticationDiagram

Themostchallengingpartaboutdevelopingfrommockupsisgettingallofthestrangeshapestoproperlyformandkeepitsratiothroughoutthedifferentscreensizes.HoweverthroughtheuseofSVGswewereabletoaccomplishthiswithouttoomuchhassle.

OncemostoftheviewsweredoneIwentaheadandcreatedthemodelsthatwouldinteractwithmyAPIservicetorequestinformationproperlyfromthebackendserver.Thesemodels

andserviceswouldverifyeveryrequestcominginandwouldformatthedatathatwascominginandgoingoutofthedifferentviews.

Figure2:CreateDocumentPage

Figure1:OurMissionPage

Vue.js 2.0 x É - open.qiniudn.comopen.qiniudn.com/ecug-2016/vue-js-2.0.pdf · • Vue.js 2.0 x É § • x É § Nuxt.js 1 O N + ... • _ o ø vue-loader • § vue-router • ë

Why Vue.js?

Timpani Small Cap Growth Strategy - Calamos · Calamos Timpani Small Cap Growth Composite is an actively managed composite which invests in small market captilization companies with

Calamos Asset Management, Inc. Reports Fourth …...2016/02/09  · VP, Director of Corporate Communications +1.630.245.1780 [email protected] Calamos Asset Management, Inc. Reports

Vue.js Getting Started

Using eZ Platform as a Headless CMS (with Vue.js)

2016 ANNUAL REPORT - National Hellenic Museum › nhm › wp... · JOHN P. CALAMOS, SR. chairman of the board national hellenic museum LAURA CALAMOS NASIR president national hellenic

Vue.js Use Cases

Calamos Funds Portfolio Data as of 5/29/20 (unaudited ...€¦ · 05/29/20 Calamos Evolving World Growth Fund Wal-Mart de Mexico, SAB de CV WALMEX* MM Common Stocks Consumer Staples

CALAMOS ADVISORS TRUST CALAMOS GROWTH AND INCOME PORTFOLIO

29886 Voices Annual - Benedictine University · Calamos Investments John P. Calamos, Sr. Mr. & Mrs. Joseph F. Kindlon Sodexho International Inc. Abbey Society $25,000 – 49,999 Mr

APPLYING VUE.JS FRAMEWORK IN DEVELOPING WEB …

Chapter 1: Getting Started with Vue€¦ · "Hello Vue.js!" Vue.js devtools 22.0 Chrome devtools extension for debugging Vue.js applications. Details Allow in incognito Allow access

CALAMOS GLOBAL EQUITY TEAM: 2Q 2021 OUTLOOK …

Calamos Advisors LLC - Morgan Stanley€¦ · Calamos Advisors LLC is an investment adviser registered with the U.S. Securities and Exchange Commission (the “SEC”) effective May

Vue.js Developer friendly, Fast and Versatile · .consulting .solutions .partnership Vue.js Developer friendly, Fast and Versatile Alexander Schwartz, Principal IT Consultant Jfokus

Рендеринг может больше: vue.js vs React, Андрей Солодовников

Convertible Securities Today_by John Calamos

Calamos Phineus Long/Short Fund (CPLIX) Q3 2021 Quarterly

Calamos Global Growth and Income Fund - Calamos ... DATA AS OF 12/31/17 GROWTH OF $10K: OUTPERFORMANCE SINCE INCEPTION The chart below shows how a hypothetical $10,000 investment in

Table of Contents · 2019-12-25 · Why developers love Vue Where does Vue.js position itself in the frameworks landscape ... Vue.js is probably the more approachable frontend framework

Geek Time Mai 2017 : Vue.js

API REST Vue [email protected] 0494/27.57.21 Développeuse front-end junior/ Full stack en devenir :) API REST Vue.js

UXgraph - Vue.js library with 59 predefined D3 graphsexcel.fit.vutbr.cz/submissions/2017/059/59_poster.pdf · reusable Vue.js components based on D3.js SVG graphs. The main importance

Calamos Investments (SPL). Yacht Blue Moon (AMX)

Calamos Advisors LLC - Morgan Stanley › ... › pdfs › adv › calamos_adv.pdf · John P. Calamos, Sr., Founder, Chairman and Global Chief Investment Officerand his family have

Calamos Strategic Total Return Fund Fact Sheet

Calamos Funds Portfolio Data as of 3/31/20 (unaudited ...€¦ · 03/31/20 Calamos Dynamic Convertible and Income Fund Coupa Software, Inc. AZ0453797 Convertible Bonds Information

Enjoy the vue.js

Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………..

Calamos Investments (SPL)

Building Progressive Web Applications with Vue · Building Progressive Web Applications with Vue.js Reliable, Fast, and Engaging Apps with Vue.js Carlos Rojas . Building Progressive

UXgraph - Vue.js library with predefined D3 graphsexcel.fit.vutbr.cz/submissions/2017/059/59.pdf · vue.js script connected to any other codebase. Vue.js is a progressive framework

Full Stack Web Development Prospectus PDFs/Full-Stack.pdfD3.js DC.js, Vue.js and Crossfilter Application Programming Interfaces Data and The DOM. Python Fundamentals ... PYTHON IS

SAFAL SKY PRINTbasement floor plan 6.00 m.w. gate stack stack stack stack stack a stack stack stack stack caa lift 6.ooxaŽao car lift 6,ooxazo stack stack i stack f.r.d service wing