start your personal #frontend portfolio with 3 apps
TRANSCRIPT
1
Start your personal FrontendPortfolio with 3 Apps
DatastaxDevs Developer Advocates Team
3
984003 127482127463DavidGilardi
JackFryer
AleksandrVolochnev
CedrickLunven
StefanoLottini
Ryan Welford
127481127480 127480
4
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Housekeeping 1 Attending the workshop
5
Livestream youtubecomDataStaxDevs
YouTube
Twitch
Games menticom
Discord
YouTube
Questions httpsdtsxiodiscord
5
Live and interactive
Housekeeping 2 Doing Hands-On
Nothing to install
c
IDE
c
Database + GraphQL + PlayGround
c
Source code + exercises + slides
Housekeeping 3 How does the series work
7
1Attend one of the 2 interactive LIVE STREAMED workshops (Wednesday or Thursday) Play games Do Hands-on
2
3
Do your homeworks during the week
4
Get your badges
Get your Swag and golden Badge
X 3
5 Surprise
8
Win the lottery
3 x 500$ AMAZON gift cards to win
CONDITIONS Follow up on Twitter DatastaxDevs Subscribe to our youtube channel DatastaxDevs At least 1 badge to enter the game
DUE DATE 81Winners randomly chose live on 818
The more you fill hellip the best chances you do have
httpsdtsxiosummer-series-game
9
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Applications 101 What is an Application
Mobile Applications
Desktop Applications
11
Applications 101 SWOT
Strengths Weaknesses
ThreatsOpportunities
Performance Extended Features
Native integration (OS) Smooth usage
Security Versioning
Dedicated languageplatform Installation required
12
Web Application Development Rational
Client
Web Application Development Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
14
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
FrontEnd Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Frontend HTML
Hyper Text Markup Language (1990)
Markup language for creating web pages
XML-Based markup
HTML elements are represented by tags Page structures headbody Page formatting paragraphdivisions Text formatting bolditalicfont Tags imagestables listforms
More Information (w3schools) httpswwww3schoolscomhtmldefaultasp httpswwww3schoolscomhtmlhtml_examplesasp httpswwww3schoolscomjsjs_htmldom_eventsasp
ltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtPage Titlelttitlegtltheadgtltbody style=background-colorpowderbluegt
lth1gtThis is a Headinglth1gtltpgtThis is a paragraphltpgtlta href=httpswwwdatastaxcomgtLinkltagtltimg src=abcjpg gt
ltbodygtlthtmlgt
Frontend HTMLhttpscodepenioDatastaxDevs
Frontend CSS
Cascading Style Sheets
Language used to style the web
Mutualization control layout of multiple pages in a single place external files with extension CSS
Work with multiple selectors Simple p every paragraphs Simple ptest paragraphs with class ldquotestrdquo Simple test any html with ldquoidrdquo test Css Combinator descendant gt + ~ Pseudo-class avisited Pseudo-element pfirst-line
Responsive User interfaces (media screen)
Sass and Length (Preprocessing) Variables mixins nested rules
CSS Animations (keyframes animation-name-)
More Information (w3schools)
body background-color lightblue
h1 color white text-align center
p font-family verdana font-size 20px
Frontend CSShttpscodepenioDatastaxDevs
Frontend Javascript
Javascript JS is a programming language
Working with the DOM Document Object Model The HTML elements as objects The properties of all HTML elements The methods to access all HTML elements The events for all HTML elements
Javascript can be defined inside the HTML Code in the header as external js file ltlinkhellip
It can change Content of an HTML element attribute Listen to events and trigger treatment
More on syntax httpswwww3schoolscomjsdefaultasp jquery introduced simplified syntax and features
ltscriptgt
documentgetElementById(demo)innerHTML = Hello JavaScript
function myFunction() documentgetElementById(demo)innerHTML = OK
documentwrite(5 + 6)var price1 = 5var price2 = 6var total = price1 + price2
ltscriptgt
Frontend JavascripthttpscodepenioDatastaxDevs
Frameworks Do not reinvent the wheel
Frontend++ NodeJS
Node JS Cross-platform Javascript run-time environment that
executes Javascript code outside of a browser Light scalable and open-source language platform Nodejs can
generate dynamic page content create open read write delete and close files
on the server collect form data add delete modify data in your database
NPM (Node package Manager) libraries which are built by the awesome community
which will solve almost all the generic problems related to the Nodejs
will download the node modules
NPX (Node package Runner)
var http = require(http)
httpcreateServer(function (req res) reswriteHead(200 Content-Type textplain) resend(Hello World))listen(8080)
Frontend ReactJS
Definition React is a JavaScript library created by Facebook React is a User Interface (UI) library React is a tool for building UI components
LEARNING BY DOING
Client
HANDS-ON 1
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Demo 1 - Create App- Create Component- Start App
httpsgithubcomdatastaxdevsappdev-week1-todolist
29
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Data Layer Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 1 - Create Astra Instance
httpsgithubcomdatastaxdevsappdev-week1-todolist
32
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Backend What is an API
Application Programming Interface
API lists operations that developers can use along with a description of what they do
Make Life Easier for Developers APIs Are Used For Communication Between Services
REST API
Use HTTP format methods and verbs (GETPOSTPUTDELETE) to expose functionality
Multiple specifications Open API (Swagger) GraphQL
Letrsquos use it
c
35
OSS Apache CassandraA Column oriented NoSQL
Database
OSS StargateioA data gateway to allow
multiple usages
Backend Astra Provide APIS
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
DatastaxDevs Developer Advocates Team
3
984003 127482127463DavidGilardi
JackFryer
AleksandrVolochnev
CedrickLunven
StefanoLottini
Ryan Welford
127481127480 127480
4
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Housekeeping 1 Attending the workshop
5
Livestream youtubecomDataStaxDevs
YouTube
Twitch
Games menticom
Discord
YouTube
Questions httpsdtsxiodiscord
5
Live and interactive
Housekeeping 2 Doing Hands-On
Nothing to install
c
IDE
c
Database + GraphQL + PlayGround
c
Source code + exercises + slides
Housekeeping 3 How does the series work
7
1Attend one of the 2 interactive LIVE STREAMED workshops (Wednesday or Thursday) Play games Do Hands-on
2
3
Do your homeworks during the week
4
Get your badges
Get your Swag and golden Badge
X 3
5 Surprise
8
Win the lottery
3 x 500$ AMAZON gift cards to win
CONDITIONS Follow up on Twitter DatastaxDevs Subscribe to our youtube channel DatastaxDevs At least 1 badge to enter the game
DUE DATE 81Winners randomly chose live on 818
The more you fill hellip the best chances you do have
httpsdtsxiosummer-series-game
9
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Applications 101 What is an Application
Mobile Applications
Desktop Applications
11
Applications 101 SWOT
Strengths Weaknesses
ThreatsOpportunities
Performance Extended Features
Native integration (OS) Smooth usage
Security Versioning
Dedicated languageplatform Installation required
12
Web Application Development Rational
Client
Web Application Development Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
14
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
FrontEnd Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Frontend HTML
Hyper Text Markup Language (1990)
Markup language for creating web pages
XML-Based markup
HTML elements are represented by tags Page structures headbody Page formatting paragraphdivisions Text formatting bolditalicfont Tags imagestables listforms
More Information (w3schools) httpswwww3schoolscomhtmldefaultasp httpswwww3schoolscomhtmlhtml_examplesasp httpswwww3schoolscomjsjs_htmldom_eventsasp
ltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtPage Titlelttitlegtltheadgtltbody style=background-colorpowderbluegt
lth1gtThis is a Headinglth1gtltpgtThis is a paragraphltpgtlta href=httpswwwdatastaxcomgtLinkltagtltimg src=abcjpg gt
ltbodygtlthtmlgt
Frontend HTMLhttpscodepenioDatastaxDevs
Frontend CSS
Cascading Style Sheets
Language used to style the web
Mutualization control layout of multiple pages in a single place external files with extension CSS
Work with multiple selectors Simple p every paragraphs Simple ptest paragraphs with class ldquotestrdquo Simple test any html with ldquoidrdquo test Css Combinator descendant gt + ~ Pseudo-class avisited Pseudo-element pfirst-line
Responsive User interfaces (media screen)
Sass and Length (Preprocessing) Variables mixins nested rules
CSS Animations (keyframes animation-name-)
More Information (w3schools)
body background-color lightblue
h1 color white text-align center
p font-family verdana font-size 20px
Frontend CSShttpscodepenioDatastaxDevs
Frontend Javascript
Javascript JS is a programming language
Working with the DOM Document Object Model The HTML elements as objects The properties of all HTML elements The methods to access all HTML elements The events for all HTML elements
Javascript can be defined inside the HTML Code in the header as external js file ltlinkhellip
It can change Content of an HTML element attribute Listen to events and trigger treatment
More on syntax httpswwww3schoolscomjsdefaultasp jquery introduced simplified syntax and features
ltscriptgt
documentgetElementById(demo)innerHTML = Hello JavaScript
function myFunction() documentgetElementById(demo)innerHTML = OK
documentwrite(5 + 6)var price1 = 5var price2 = 6var total = price1 + price2
ltscriptgt
Frontend JavascripthttpscodepenioDatastaxDevs
Frameworks Do not reinvent the wheel
Frontend++ NodeJS
Node JS Cross-platform Javascript run-time environment that
executes Javascript code outside of a browser Light scalable and open-source language platform Nodejs can
generate dynamic page content create open read write delete and close files
on the server collect form data add delete modify data in your database
NPM (Node package Manager) libraries which are built by the awesome community
which will solve almost all the generic problems related to the Nodejs
will download the node modules
NPX (Node package Runner)
var http = require(http)
httpcreateServer(function (req res) reswriteHead(200 Content-Type textplain) resend(Hello World))listen(8080)
Frontend ReactJS
Definition React is a JavaScript library created by Facebook React is a User Interface (UI) library React is a tool for building UI components
LEARNING BY DOING
Client
HANDS-ON 1
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Demo 1 - Create App- Create Component- Start App
httpsgithubcomdatastaxdevsappdev-week1-todolist
29
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Data Layer Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 1 - Create Astra Instance
httpsgithubcomdatastaxdevsappdev-week1-todolist
32
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Backend What is an API
Application Programming Interface
API lists operations that developers can use along with a description of what they do
Make Life Easier for Developers APIs Are Used For Communication Between Services
REST API
Use HTTP format methods and verbs (GETPOSTPUTDELETE) to expose functionality
Multiple specifications Open API (Swagger) GraphQL
Letrsquos use it
c
35
OSS Apache CassandraA Column oriented NoSQL
Database
OSS StargateioA data gateway to allow
multiple usages
Backend Astra Provide APIS
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
4
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Housekeeping 1 Attending the workshop
5
Livestream youtubecomDataStaxDevs
YouTube
Twitch
Games menticom
Discord
YouTube
Questions httpsdtsxiodiscord
5
Live and interactive
Housekeeping 2 Doing Hands-On
Nothing to install
c
IDE
c
Database + GraphQL + PlayGround
c
Source code + exercises + slides
Housekeeping 3 How does the series work
7
1Attend one of the 2 interactive LIVE STREAMED workshops (Wednesday or Thursday) Play games Do Hands-on
2
3
Do your homeworks during the week
4
Get your badges
Get your Swag and golden Badge
X 3
5 Surprise
8
Win the lottery
3 x 500$ AMAZON gift cards to win
CONDITIONS Follow up on Twitter DatastaxDevs Subscribe to our youtube channel DatastaxDevs At least 1 badge to enter the game
DUE DATE 81Winners randomly chose live on 818
The more you fill hellip the best chances you do have
httpsdtsxiosummer-series-game
9
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Applications 101 What is an Application
Mobile Applications
Desktop Applications
11
Applications 101 SWOT
Strengths Weaknesses
ThreatsOpportunities
Performance Extended Features
Native integration (OS) Smooth usage
Security Versioning
Dedicated languageplatform Installation required
12
Web Application Development Rational
Client
Web Application Development Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
14
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
FrontEnd Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Frontend HTML
Hyper Text Markup Language (1990)
Markup language for creating web pages
XML-Based markup
HTML elements are represented by tags Page structures headbody Page formatting paragraphdivisions Text formatting bolditalicfont Tags imagestables listforms
More Information (w3schools) httpswwww3schoolscomhtmldefaultasp httpswwww3schoolscomhtmlhtml_examplesasp httpswwww3schoolscomjsjs_htmldom_eventsasp
ltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtPage Titlelttitlegtltheadgtltbody style=background-colorpowderbluegt
lth1gtThis is a Headinglth1gtltpgtThis is a paragraphltpgtlta href=httpswwwdatastaxcomgtLinkltagtltimg src=abcjpg gt
ltbodygtlthtmlgt
Frontend HTMLhttpscodepenioDatastaxDevs
Frontend CSS
Cascading Style Sheets
Language used to style the web
Mutualization control layout of multiple pages in a single place external files with extension CSS
Work with multiple selectors Simple p every paragraphs Simple ptest paragraphs with class ldquotestrdquo Simple test any html with ldquoidrdquo test Css Combinator descendant gt + ~ Pseudo-class avisited Pseudo-element pfirst-line
Responsive User interfaces (media screen)
Sass and Length (Preprocessing) Variables mixins nested rules
CSS Animations (keyframes animation-name-)
More Information (w3schools)
body background-color lightblue
h1 color white text-align center
p font-family verdana font-size 20px
Frontend CSShttpscodepenioDatastaxDevs
Frontend Javascript
Javascript JS is a programming language
Working with the DOM Document Object Model The HTML elements as objects The properties of all HTML elements The methods to access all HTML elements The events for all HTML elements
Javascript can be defined inside the HTML Code in the header as external js file ltlinkhellip
It can change Content of an HTML element attribute Listen to events and trigger treatment
More on syntax httpswwww3schoolscomjsdefaultasp jquery introduced simplified syntax and features
ltscriptgt
documentgetElementById(demo)innerHTML = Hello JavaScript
function myFunction() documentgetElementById(demo)innerHTML = OK
documentwrite(5 + 6)var price1 = 5var price2 = 6var total = price1 + price2
ltscriptgt
Frontend JavascripthttpscodepenioDatastaxDevs
Frameworks Do not reinvent the wheel
Frontend++ NodeJS
Node JS Cross-platform Javascript run-time environment that
executes Javascript code outside of a browser Light scalable and open-source language platform Nodejs can
generate dynamic page content create open read write delete and close files
on the server collect form data add delete modify data in your database
NPM (Node package Manager) libraries which are built by the awesome community
which will solve almost all the generic problems related to the Nodejs
will download the node modules
NPX (Node package Runner)
var http = require(http)
httpcreateServer(function (req res) reswriteHead(200 Content-Type textplain) resend(Hello World))listen(8080)
Frontend ReactJS
Definition React is a JavaScript library created by Facebook React is a User Interface (UI) library React is a tool for building UI components
LEARNING BY DOING
Client
HANDS-ON 1
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Demo 1 - Create App- Create Component- Start App
httpsgithubcomdatastaxdevsappdev-week1-todolist
29
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Data Layer Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 1 - Create Astra Instance
httpsgithubcomdatastaxdevsappdev-week1-todolist
32
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Backend What is an API
Application Programming Interface
API lists operations that developers can use along with a description of what they do
Make Life Easier for Developers APIs Are Used For Communication Between Services
REST API
Use HTTP format methods and verbs (GETPOSTPUTDELETE) to expose functionality
Multiple specifications Open API (Swagger) GraphQL
Letrsquos use it
c
35
OSS Apache CassandraA Column oriented NoSQL
Database
OSS StargateioA data gateway to allow
multiple usages
Backend Astra Provide APIS
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
Housekeeping 1 Attending the workshop
5
Livestream youtubecomDataStaxDevs
YouTube
Twitch
Games menticom
Discord
YouTube
Questions httpsdtsxiodiscord
5
Live and interactive
Housekeeping 2 Doing Hands-On
Nothing to install
c
IDE
c
Database + GraphQL + PlayGround
c
Source code + exercises + slides
Housekeeping 3 How does the series work
7
1Attend one of the 2 interactive LIVE STREAMED workshops (Wednesday or Thursday) Play games Do Hands-on
2
3
Do your homeworks during the week
4
Get your badges
Get your Swag and golden Badge
X 3
5 Surprise
8
Win the lottery
3 x 500$ AMAZON gift cards to win
CONDITIONS Follow up on Twitter DatastaxDevs Subscribe to our youtube channel DatastaxDevs At least 1 badge to enter the game
DUE DATE 81Winners randomly chose live on 818
The more you fill hellip the best chances you do have
httpsdtsxiosummer-series-game
9
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Applications 101 What is an Application
Mobile Applications
Desktop Applications
11
Applications 101 SWOT
Strengths Weaknesses
ThreatsOpportunities
Performance Extended Features
Native integration (OS) Smooth usage
Security Versioning
Dedicated languageplatform Installation required
12
Web Application Development Rational
Client
Web Application Development Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
14
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
FrontEnd Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Frontend HTML
Hyper Text Markup Language (1990)
Markup language for creating web pages
XML-Based markup
HTML elements are represented by tags Page structures headbody Page formatting paragraphdivisions Text formatting bolditalicfont Tags imagestables listforms
More Information (w3schools) httpswwww3schoolscomhtmldefaultasp httpswwww3schoolscomhtmlhtml_examplesasp httpswwww3schoolscomjsjs_htmldom_eventsasp
ltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtPage Titlelttitlegtltheadgtltbody style=background-colorpowderbluegt
lth1gtThis is a Headinglth1gtltpgtThis is a paragraphltpgtlta href=httpswwwdatastaxcomgtLinkltagtltimg src=abcjpg gt
ltbodygtlthtmlgt
Frontend HTMLhttpscodepenioDatastaxDevs
Frontend CSS
Cascading Style Sheets
Language used to style the web
Mutualization control layout of multiple pages in a single place external files with extension CSS
Work with multiple selectors Simple p every paragraphs Simple ptest paragraphs with class ldquotestrdquo Simple test any html with ldquoidrdquo test Css Combinator descendant gt + ~ Pseudo-class avisited Pseudo-element pfirst-line
Responsive User interfaces (media screen)
Sass and Length (Preprocessing) Variables mixins nested rules
CSS Animations (keyframes animation-name-)
More Information (w3schools)
body background-color lightblue
h1 color white text-align center
p font-family verdana font-size 20px
Frontend CSShttpscodepenioDatastaxDevs
Frontend Javascript
Javascript JS is a programming language
Working with the DOM Document Object Model The HTML elements as objects The properties of all HTML elements The methods to access all HTML elements The events for all HTML elements
Javascript can be defined inside the HTML Code in the header as external js file ltlinkhellip
It can change Content of an HTML element attribute Listen to events and trigger treatment
More on syntax httpswwww3schoolscomjsdefaultasp jquery introduced simplified syntax and features
ltscriptgt
documentgetElementById(demo)innerHTML = Hello JavaScript
function myFunction() documentgetElementById(demo)innerHTML = OK
documentwrite(5 + 6)var price1 = 5var price2 = 6var total = price1 + price2
ltscriptgt
Frontend JavascripthttpscodepenioDatastaxDevs
Frameworks Do not reinvent the wheel
Frontend++ NodeJS
Node JS Cross-platform Javascript run-time environment that
executes Javascript code outside of a browser Light scalable and open-source language platform Nodejs can
generate dynamic page content create open read write delete and close files
on the server collect form data add delete modify data in your database
NPM (Node package Manager) libraries which are built by the awesome community
which will solve almost all the generic problems related to the Nodejs
will download the node modules
NPX (Node package Runner)
var http = require(http)
httpcreateServer(function (req res) reswriteHead(200 Content-Type textplain) resend(Hello World))listen(8080)
Frontend ReactJS
Definition React is a JavaScript library created by Facebook React is a User Interface (UI) library React is a tool for building UI components
LEARNING BY DOING
Client
HANDS-ON 1
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Demo 1 - Create App- Create Component- Start App
httpsgithubcomdatastaxdevsappdev-week1-todolist
29
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Data Layer Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 1 - Create Astra Instance
httpsgithubcomdatastaxdevsappdev-week1-todolist
32
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Backend What is an API
Application Programming Interface
API lists operations that developers can use along with a description of what they do
Make Life Easier for Developers APIs Are Used For Communication Between Services
REST API
Use HTTP format methods and verbs (GETPOSTPUTDELETE) to expose functionality
Multiple specifications Open API (Swagger) GraphQL
Letrsquos use it
c
35
OSS Apache CassandraA Column oriented NoSQL
Database
OSS StargateioA data gateway to allow
multiple usages
Backend Astra Provide APIS
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
Housekeeping 2 Doing Hands-On
Nothing to install
c
IDE
c
Database + GraphQL + PlayGround
c
Source code + exercises + slides
Housekeeping 3 How does the series work
7
1Attend one of the 2 interactive LIVE STREAMED workshops (Wednesday or Thursday) Play games Do Hands-on
2
3
Do your homeworks during the week
4
Get your badges
Get your Swag and golden Badge
X 3
5 Surprise
8
Win the lottery
3 x 500$ AMAZON gift cards to win
CONDITIONS Follow up on Twitter DatastaxDevs Subscribe to our youtube channel DatastaxDevs At least 1 badge to enter the game
DUE DATE 81Winners randomly chose live on 818
The more you fill hellip the best chances you do have
httpsdtsxiosummer-series-game
9
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Applications 101 What is an Application
Mobile Applications
Desktop Applications
11
Applications 101 SWOT
Strengths Weaknesses
ThreatsOpportunities
Performance Extended Features
Native integration (OS) Smooth usage
Security Versioning
Dedicated languageplatform Installation required
12
Web Application Development Rational
Client
Web Application Development Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
14
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
FrontEnd Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Frontend HTML
Hyper Text Markup Language (1990)
Markup language for creating web pages
XML-Based markup
HTML elements are represented by tags Page structures headbody Page formatting paragraphdivisions Text formatting bolditalicfont Tags imagestables listforms
More Information (w3schools) httpswwww3schoolscomhtmldefaultasp httpswwww3schoolscomhtmlhtml_examplesasp httpswwww3schoolscomjsjs_htmldom_eventsasp
ltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtPage Titlelttitlegtltheadgtltbody style=background-colorpowderbluegt
lth1gtThis is a Headinglth1gtltpgtThis is a paragraphltpgtlta href=httpswwwdatastaxcomgtLinkltagtltimg src=abcjpg gt
ltbodygtlthtmlgt
Frontend HTMLhttpscodepenioDatastaxDevs
Frontend CSS
Cascading Style Sheets
Language used to style the web
Mutualization control layout of multiple pages in a single place external files with extension CSS
Work with multiple selectors Simple p every paragraphs Simple ptest paragraphs with class ldquotestrdquo Simple test any html with ldquoidrdquo test Css Combinator descendant gt + ~ Pseudo-class avisited Pseudo-element pfirst-line
Responsive User interfaces (media screen)
Sass and Length (Preprocessing) Variables mixins nested rules
CSS Animations (keyframes animation-name-)
More Information (w3schools)
body background-color lightblue
h1 color white text-align center
p font-family verdana font-size 20px
Frontend CSShttpscodepenioDatastaxDevs
Frontend Javascript
Javascript JS is a programming language
Working with the DOM Document Object Model The HTML elements as objects The properties of all HTML elements The methods to access all HTML elements The events for all HTML elements
Javascript can be defined inside the HTML Code in the header as external js file ltlinkhellip
It can change Content of an HTML element attribute Listen to events and trigger treatment
More on syntax httpswwww3schoolscomjsdefaultasp jquery introduced simplified syntax and features
ltscriptgt
documentgetElementById(demo)innerHTML = Hello JavaScript
function myFunction() documentgetElementById(demo)innerHTML = OK
documentwrite(5 + 6)var price1 = 5var price2 = 6var total = price1 + price2
ltscriptgt
Frontend JavascripthttpscodepenioDatastaxDevs
Frameworks Do not reinvent the wheel
Frontend++ NodeJS
Node JS Cross-platform Javascript run-time environment that
executes Javascript code outside of a browser Light scalable and open-source language platform Nodejs can
generate dynamic page content create open read write delete and close files
on the server collect form data add delete modify data in your database
NPM (Node package Manager) libraries which are built by the awesome community
which will solve almost all the generic problems related to the Nodejs
will download the node modules
NPX (Node package Runner)
var http = require(http)
httpcreateServer(function (req res) reswriteHead(200 Content-Type textplain) resend(Hello World))listen(8080)
Frontend ReactJS
Definition React is a JavaScript library created by Facebook React is a User Interface (UI) library React is a tool for building UI components
LEARNING BY DOING
Client
HANDS-ON 1
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Demo 1 - Create App- Create Component- Start App
httpsgithubcomdatastaxdevsappdev-week1-todolist
29
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Data Layer Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 1 - Create Astra Instance
httpsgithubcomdatastaxdevsappdev-week1-todolist
32
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Backend What is an API
Application Programming Interface
API lists operations that developers can use along with a description of what they do
Make Life Easier for Developers APIs Are Used For Communication Between Services
REST API
Use HTTP format methods and verbs (GETPOSTPUTDELETE) to expose functionality
Multiple specifications Open API (Swagger) GraphQL
Letrsquos use it
c
35
OSS Apache CassandraA Column oriented NoSQL
Database
OSS StargateioA data gateway to allow
multiple usages
Backend Astra Provide APIS
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
Housekeeping 3 How does the series work
7
1Attend one of the 2 interactive LIVE STREAMED workshops (Wednesday or Thursday) Play games Do Hands-on
2
3
Do your homeworks during the week
4
Get your badges
Get your Swag and golden Badge
X 3
5 Surprise
8
Win the lottery
3 x 500$ AMAZON gift cards to win
CONDITIONS Follow up on Twitter DatastaxDevs Subscribe to our youtube channel DatastaxDevs At least 1 badge to enter the game
DUE DATE 81Winners randomly chose live on 818
The more you fill hellip the best chances you do have
httpsdtsxiosummer-series-game
9
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Applications 101 What is an Application
Mobile Applications
Desktop Applications
11
Applications 101 SWOT
Strengths Weaknesses
ThreatsOpportunities
Performance Extended Features
Native integration (OS) Smooth usage
Security Versioning
Dedicated languageplatform Installation required
12
Web Application Development Rational
Client
Web Application Development Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
14
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
FrontEnd Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Frontend HTML
Hyper Text Markup Language (1990)
Markup language for creating web pages
XML-Based markup
HTML elements are represented by tags Page structures headbody Page formatting paragraphdivisions Text formatting bolditalicfont Tags imagestables listforms
More Information (w3schools) httpswwww3schoolscomhtmldefaultasp httpswwww3schoolscomhtmlhtml_examplesasp httpswwww3schoolscomjsjs_htmldom_eventsasp
ltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtPage Titlelttitlegtltheadgtltbody style=background-colorpowderbluegt
lth1gtThis is a Headinglth1gtltpgtThis is a paragraphltpgtlta href=httpswwwdatastaxcomgtLinkltagtltimg src=abcjpg gt
ltbodygtlthtmlgt
Frontend HTMLhttpscodepenioDatastaxDevs
Frontend CSS
Cascading Style Sheets
Language used to style the web
Mutualization control layout of multiple pages in a single place external files with extension CSS
Work with multiple selectors Simple p every paragraphs Simple ptest paragraphs with class ldquotestrdquo Simple test any html with ldquoidrdquo test Css Combinator descendant gt + ~ Pseudo-class avisited Pseudo-element pfirst-line
Responsive User interfaces (media screen)
Sass and Length (Preprocessing) Variables mixins nested rules
CSS Animations (keyframes animation-name-)
More Information (w3schools)
body background-color lightblue
h1 color white text-align center
p font-family verdana font-size 20px
Frontend CSShttpscodepenioDatastaxDevs
Frontend Javascript
Javascript JS is a programming language
Working with the DOM Document Object Model The HTML elements as objects The properties of all HTML elements The methods to access all HTML elements The events for all HTML elements
Javascript can be defined inside the HTML Code in the header as external js file ltlinkhellip
It can change Content of an HTML element attribute Listen to events and trigger treatment
More on syntax httpswwww3schoolscomjsdefaultasp jquery introduced simplified syntax and features
ltscriptgt
documentgetElementById(demo)innerHTML = Hello JavaScript
function myFunction() documentgetElementById(demo)innerHTML = OK
documentwrite(5 + 6)var price1 = 5var price2 = 6var total = price1 + price2
ltscriptgt
Frontend JavascripthttpscodepenioDatastaxDevs
Frameworks Do not reinvent the wheel
Frontend++ NodeJS
Node JS Cross-platform Javascript run-time environment that
executes Javascript code outside of a browser Light scalable and open-source language platform Nodejs can
generate dynamic page content create open read write delete and close files
on the server collect form data add delete modify data in your database
NPM (Node package Manager) libraries which are built by the awesome community
which will solve almost all the generic problems related to the Nodejs
will download the node modules
NPX (Node package Runner)
var http = require(http)
httpcreateServer(function (req res) reswriteHead(200 Content-Type textplain) resend(Hello World))listen(8080)
Frontend ReactJS
Definition React is a JavaScript library created by Facebook React is a User Interface (UI) library React is a tool for building UI components
LEARNING BY DOING
Client
HANDS-ON 1
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Demo 1 - Create App- Create Component- Start App
httpsgithubcomdatastaxdevsappdev-week1-todolist
29
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Data Layer Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 1 - Create Astra Instance
httpsgithubcomdatastaxdevsappdev-week1-todolist
32
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Backend What is an API
Application Programming Interface
API lists operations that developers can use along with a description of what they do
Make Life Easier for Developers APIs Are Used For Communication Between Services
REST API
Use HTTP format methods and verbs (GETPOSTPUTDELETE) to expose functionality
Multiple specifications Open API (Swagger) GraphQL
Letrsquos use it
c
35
OSS Apache CassandraA Column oriented NoSQL
Database
OSS StargateioA data gateway to allow
multiple usages
Backend Astra Provide APIS
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
8
Win the lottery
3 x 500$ AMAZON gift cards to win
CONDITIONS Follow up on Twitter DatastaxDevs Subscribe to our youtube channel DatastaxDevs At least 1 badge to enter the game
DUE DATE 81Winners randomly chose live on 818
The more you fill hellip the best chances you do have
httpsdtsxiosummer-series-game
9
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Applications 101 What is an Application
Mobile Applications
Desktop Applications
11
Applications 101 SWOT
Strengths Weaknesses
ThreatsOpportunities
Performance Extended Features
Native integration (OS) Smooth usage
Security Versioning
Dedicated languageplatform Installation required
12
Web Application Development Rational
Client
Web Application Development Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
14
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
FrontEnd Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Frontend HTML
Hyper Text Markup Language (1990)
Markup language for creating web pages
XML-Based markup
HTML elements are represented by tags Page structures headbody Page formatting paragraphdivisions Text formatting bolditalicfont Tags imagestables listforms
More Information (w3schools) httpswwww3schoolscomhtmldefaultasp httpswwww3schoolscomhtmlhtml_examplesasp httpswwww3schoolscomjsjs_htmldom_eventsasp
ltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtPage Titlelttitlegtltheadgtltbody style=background-colorpowderbluegt
lth1gtThis is a Headinglth1gtltpgtThis is a paragraphltpgtlta href=httpswwwdatastaxcomgtLinkltagtltimg src=abcjpg gt
ltbodygtlthtmlgt
Frontend HTMLhttpscodepenioDatastaxDevs
Frontend CSS
Cascading Style Sheets
Language used to style the web
Mutualization control layout of multiple pages in a single place external files with extension CSS
Work with multiple selectors Simple p every paragraphs Simple ptest paragraphs with class ldquotestrdquo Simple test any html with ldquoidrdquo test Css Combinator descendant gt + ~ Pseudo-class avisited Pseudo-element pfirst-line
Responsive User interfaces (media screen)
Sass and Length (Preprocessing) Variables mixins nested rules
CSS Animations (keyframes animation-name-)
More Information (w3schools)
body background-color lightblue
h1 color white text-align center
p font-family verdana font-size 20px
Frontend CSShttpscodepenioDatastaxDevs
Frontend Javascript
Javascript JS is a programming language
Working with the DOM Document Object Model The HTML elements as objects The properties of all HTML elements The methods to access all HTML elements The events for all HTML elements
Javascript can be defined inside the HTML Code in the header as external js file ltlinkhellip
It can change Content of an HTML element attribute Listen to events and trigger treatment
More on syntax httpswwww3schoolscomjsdefaultasp jquery introduced simplified syntax and features
ltscriptgt
documentgetElementById(demo)innerHTML = Hello JavaScript
function myFunction() documentgetElementById(demo)innerHTML = OK
documentwrite(5 + 6)var price1 = 5var price2 = 6var total = price1 + price2
ltscriptgt
Frontend JavascripthttpscodepenioDatastaxDevs
Frameworks Do not reinvent the wheel
Frontend++ NodeJS
Node JS Cross-platform Javascript run-time environment that
executes Javascript code outside of a browser Light scalable and open-source language platform Nodejs can
generate dynamic page content create open read write delete and close files
on the server collect form data add delete modify data in your database
NPM (Node package Manager) libraries which are built by the awesome community
which will solve almost all the generic problems related to the Nodejs
will download the node modules
NPX (Node package Runner)
var http = require(http)
httpcreateServer(function (req res) reswriteHead(200 Content-Type textplain) resend(Hello World))listen(8080)
Frontend ReactJS
Definition React is a JavaScript library created by Facebook React is a User Interface (UI) library React is a tool for building UI components
LEARNING BY DOING
Client
HANDS-ON 1
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Demo 1 - Create App- Create Component- Start App
httpsgithubcomdatastaxdevsappdev-week1-todolist
29
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Data Layer Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 1 - Create Astra Instance
httpsgithubcomdatastaxdevsappdev-week1-todolist
32
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Backend What is an API
Application Programming Interface
API lists operations that developers can use along with a description of what they do
Make Life Easier for Developers APIs Are Used For Communication Between Services
REST API
Use HTTP format methods and verbs (GETPOSTPUTDELETE) to expose functionality
Multiple specifications Open API (Swagger) GraphQL
Letrsquos use it
c
35
OSS Apache CassandraA Column oriented NoSQL
Database
OSS StargateioA data gateway to allow
multiple usages
Backend Astra Provide APIS
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
9
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Applications 101 What is an Application
Mobile Applications
Desktop Applications
11
Applications 101 SWOT
Strengths Weaknesses
ThreatsOpportunities
Performance Extended Features
Native integration (OS) Smooth usage
Security Versioning
Dedicated languageplatform Installation required
12
Web Application Development Rational
Client
Web Application Development Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
14
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
FrontEnd Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Frontend HTML
Hyper Text Markup Language (1990)
Markup language for creating web pages
XML-Based markup
HTML elements are represented by tags Page structures headbody Page formatting paragraphdivisions Text formatting bolditalicfont Tags imagestables listforms
More Information (w3schools) httpswwww3schoolscomhtmldefaultasp httpswwww3schoolscomhtmlhtml_examplesasp httpswwww3schoolscomjsjs_htmldom_eventsasp
ltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtPage Titlelttitlegtltheadgtltbody style=background-colorpowderbluegt
lth1gtThis is a Headinglth1gtltpgtThis is a paragraphltpgtlta href=httpswwwdatastaxcomgtLinkltagtltimg src=abcjpg gt
ltbodygtlthtmlgt
Frontend HTMLhttpscodepenioDatastaxDevs
Frontend CSS
Cascading Style Sheets
Language used to style the web
Mutualization control layout of multiple pages in a single place external files with extension CSS
Work with multiple selectors Simple p every paragraphs Simple ptest paragraphs with class ldquotestrdquo Simple test any html with ldquoidrdquo test Css Combinator descendant gt + ~ Pseudo-class avisited Pseudo-element pfirst-line
Responsive User interfaces (media screen)
Sass and Length (Preprocessing) Variables mixins nested rules
CSS Animations (keyframes animation-name-)
More Information (w3schools)
body background-color lightblue
h1 color white text-align center
p font-family verdana font-size 20px
Frontend CSShttpscodepenioDatastaxDevs
Frontend Javascript
Javascript JS is a programming language
Working with the DOM Document Object Model The HTML elements as objects The properties of all HTML elements The methods to access all HTML elements The events for all HTML elements
Javascript can be defined inside the HTML Code in the header as external js file ltlinkhellip
It can change Content of an HTML element attribute Listen to events and trigger treatment
More on syntax httpswwww3schoolscomjsdefaultasp jquery introduced simplified syntax and features
ltscriptgt
documentgetElementById(demo)innerHTML = Hello JavaScript
function myFunction() documentgetElementById(demo)innerHTML = OK
documentwrite(5 + 6)var price1 = 5var price2 = 6var total = price1 + price2
ltscriptgt
Frontend JavascripthttpscodepenioDatastaxDevs
Frameworks Do not reinvent the wheel
Frontend++ NodeJS
Node JS Cross-platform Javascript run-time environment that
executes Javascript code outside of a browser Light scalable and open-source language platform Nodejs can
generate dynamic page content create open read write delete and close files
on the server collect form data add delete modify data in your database
NPM (Node package Manager) libraries which are built by the awesome community
which will solve almost all the generic problems related to the Nodejs
will download the node modules
NPX (Node package Runner)
var http = require(http)
httpcreateServer(function (req res) reswriteHead(200 Content-Type textplain) resend(Hello World))listen(8080)
Frontend ReactJS
Definition React is a JavaScript library created by Facebook React is a User Interface (UI) library React is a tool for building UI components
LEARNING BY DOING
Client
HANDS-ON 1
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Demo 1 - Create App- Create Component- Start App
httpsgithubcomdatastaxdevsappdev-week1-todolist
29
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Data Layer Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 1 - Create Astra Instance
httpsgithubcomdatastaxdevsappdev-week1-todolist
32
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Backend What is an API
Application Programming Interface
API lists operations that developers can use along with a description of what they do
Make Life Easier for Developers APIs Are Used For Communication Between Services
REST API
Use HTTP format methods and verbs (GETPOSTPUTDELETE) to expose functionality
Multiple specifications Open API (Swagger) GraphQL
Letrsquos use it
c
35
OSS Apache CassandraA Column oriented NoSQL
Database
OSS StargateioA data gateway to allow
multiple usages
Backend Astra Provide APIS
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
Applications 101 What is an Application
Mobile Applications
Desktop Applications
11
Applications 101 SWOT
Strengths Weaknesses
ThreatsOpportunities
Performance Extended Features
Native integration (OS) Smooth usage
Security Versioning
Dedicated languageplatform Installation required
12
Web Application Development Rational
Client
Web Application Development Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
14
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
FrontEnd Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Frontend HTML
Hyper Text Markup Language (1990)
Markup language for creating web pages
XML-Based markup
HTML elements are represented by tags Page structures headbody Page formatting paragraphdivisions Text formatting bolditalicfont Tags imagestables listforms
More Information (w3schools) httpswwww3schoolscomhtmldefaultasp httpswwww3schoolscomhtmlhtml_examplesasp httpswwww3schoolscomjsjs_htmldom_eventsasp
ltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtPage Titlelttitlegtltheadgtltbody style=background-colorpowderbluegt
lth1gtThis is a Headinglth1gtltpgtThis is a paragraphltpgtlta href=httpswwwdatastaxcomgtLinkltagtltimg src=abcjpg gt
ltbodygtlthtmlgt
Frontend HTMLhttpscodepenioDatastaxDevs
Frontend CSS
Cascading Style Sheets
Language used to style the web
Mutualization control layout of multiple pages in a single place external files with extension CSS
Work with multiple selectors Simple p every paragraphs Simple ptest paragraphs with class ldquotestrdquo Simple test any html with ldquoidrdquo test Css Combinator descendant gt + ~ Pseudo-class avisited Pseudo-element pfirst-line
Responsive User interfaces (media screen)
Sass and Length (Preprocessing) Variables mixins nested rules
CSS Animations (keyframes animation-name-)
More Information (w3schools)
body background-color lightblue
h1 color white text-align center
p font-family verdana font-size 20px
Frontend CSShttpscodepenioDatastaxDevs
Frontend Javascript
Javascript JS is a programming language
Working with the DOM Document Object Model The HTML elements as objects The properties of all HTML elements The methods to access all HTML elements The events for all HTML elements
Javascript can be defined inside the HTML Code in the header as external js file ltlinkhellip
It can change Content of an HTML element attribute Listen to events and trigger treatment
More on syntax httpswwww3schoolscomjsdefaultasp jquery introduced simplified syntax and features
ltscriptgt
documentgetElementById(demo)innerHTML = Hello JavaScript
function myFunction() documentgetElementById(demo)innerHTML = OK
documentwrite(5 + 6)var price1 = 5var price2 = 6var total = price1 + price2
ltscriptgt
Frontend JavascripthttpscodepenioDatastaxDevs
Frameworks Do not reinvent the wheel
Frontend++ NodeJS
Node JS Cross-platform Javascript run-time environment that
executes Javascript code outside of a browser Light scalable and open-source language platform Nodejs can
generate dynamic page content create open read write delete and close files
on the server collect form data add delete modify data in your database
NPM (Node package Manager) libraries which are built by the awesome community
which will solve almost all the generic problems related to the Nodejs
will download the node modules
NPX (Node package Runner)
var http = require(http)
httpcreateServer(function (req res) reswriteHead(200 Content-Type textplain) resend(Hello World))listen(8080)
Frontend ReactJS
Definition React is a JavaScript library created by Facebook React is a User Interface (UI) library React is a tool for building UI components
LEARNING BY DOING
Client
HANDS-ON 1
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Demo 1 - Create App- Create Component- Start App
httpsgithubcomdatastaxdevsappdev-week1-todolist
29
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Data Layer Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 1 - Create Astra Instance
httpsgithubcomdatastaxdevsappdev-week1-todolist
32
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Backend What is an API
Application Programming Interface
API lists operations that developers can use along with a description of what they do
Make Life Easier for Developers APIs Are Used For Communication Between Services
REST API
Use HTTP format methods and verbs (GETPOSTPUTDELETE) to expose functionality
Multiple specifications Open API (Swagger) GraphQL
Letrsquos use it
c
35
OSS Apache CassandraA Column oriented NoSQL
Database
OSS StargateioA data gateway to allow
multiple usages
Backend Astra Provide APIS
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
11
Applications 101 SWOT
Strengths Weaknesses
ThreatsOpportunities
Performance Extended Features
Native integration (OS) Smooth usage
Security Versioning
Dedicated languageplatform Installation required
12
Web Application Development Rational
Client
Web Application Development Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
14
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
FrontEnd Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Frontend HTML
Hyper Text Markup Language (1990)
Markup language for creating web pages
XML-Based markup
HTML elements are represented by tags Page structures headbody Page formatting paragraphdivisions Text formatting bolditalicfont Tags imagestables listforms
More Information (w3schools) httpswwww3schoolscomhtmldefaultasp httpswwww3schoolscomhtmlhtml_examplesasp httpswwww3schoolscomjsjs_htmldom_eventsasp
ltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtPage Titlelttitlegtltheadgtltbody style=background-colorpowderbluegt
lth1gtThis is a Headinglth1gtltpgtThis is a paragraphltpgtlta href=httpswwwdatastaxcomgtLinkltagtltimg src=abcjpg gt
ltbodygtlthtmlgt
Frontend HTMLhttpscodepenioDatastaxDevs
Frontend CSS
Cascading Style Sheets
Language used to style the web
Mutualization control layout of multiple pages in a single place external files with extension CSS
Work with multiple selectors Simple p every paragraphs Simple ptest paragraphs with class ldquotestrdquo Simple test any html with ldquoidrdquo test Css Combinator descendant gt + ~ Pseudo-class avisited Pseudo-element pfirst-line
Responsive User interfaces (media screen)
Sass and Length (Preprocessing) Variables mixins nested rules
CSS Animations (keyframes animation-name-)
More Information (w3schools)
body background-color lightblue
h1 color white text-align center
p font-family verdana font-size 20px
Frontend CSShttpscodepenioDatastaxDevs
Frontend Javascript
Javascript JS is a programming language
Working with the DOM Document Object Model The HTML elements as objects The properties of all HTML elements The methods to access all HTML elements The events for all HTML elements
Javascript can be defined inside the HTML Code in the header as external js file ltlinkhellip
It can change Content of an HTML element attribute Listen to events and trigger treatment
More on syntax httpswwww3schoolscomjsdefaultasp jquery introduced simplified syntax and features
ltscriptgt
documentgetElementById(demo)innerHTML = Hello JavaScript
function myFunction() documentgetElementById(demo)innerHTML = OK
documentwrite(5 + 6)var price1 = 5var price2 = 6var total = price1 + price2
ltscriptgt
Frontend JavascripthttpscodepenioDatastaxDevs
Frameworks Do not reinvent the wheel
Frontend++ NodeJS
Node JS Cross-platform Javascript run-time environment that
executes Javascript code outside of a browser Light scalable and open-source language platform Nodejs can
generate dynamic page content create open read write delete and close files
on the server collect form data add delete modify data in your database
NPM (Node package Manager) libraries which are built by the awesome community
which will solve almost all the generic problems related to the Nodejs
will download the node modules
NPX (Node package Runner)
var http = require(http)
httpcreateServer(function (req res) reswriteHead(200 Content-Type textplain) resend(Hello World))listen(8080)
Frontend ReactJS
Definition React is a JavaScript library created by Facebook React is a User Interface (UI) library React is a tool for building UI components
LEARNING BY DOING
Client
HANDS-ON 1
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Demo 1 - Create App- Create Component- Start App
httpsgithubcomdatastaxdevsappdev-week1-todolist
29
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Data Layer Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 1 - Create Astra Instance
httpsgithubcomdatastaxdevsappdev-week1-todolist
32
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Backend What is an API
Application Programming Interface
API lists operations that developers can use along with a description of what they do
Make Life Easier for Developers APIs Are Used For Communication Between Services
REST API
Use HTTP format methods and verbs (GETPOSTPUTDELETE) to expose functionality
Multiple specifications Open API (Swagger) GraphQL
Letrsquos use it
c
35
OSS Apache CassandraA Column oriented NoSQL
Database
OSS StargateioA data gateway to allow
multiple usages
Backend Astra Provide APIS
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
12
Web Application Development Rational
Client
Web Application Development Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
14
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
FrontEnd Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Frontend HTML
Hyper Text Markup Language (1990)
Markup language for creating web pages
XML-Based markup
HTML elements are represented by tags Page structures headbody Page formatting paragraphdivisions Text formatting bolditalicfont Tags imagestables listforms
More Information (w3schools) httpswwww3schoolscomhtmldefaultasp httpswwww3schoolscomhtmlhtml_examplesasp httpswwww3schoolscomjsjs_htmldom_eventsasp
ltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtPage Titlelttitlegtltheadgtltbody style=background-colorpowderbluegt
lth1gtThis is a Headinglth1gtltpgtThis is a paragraphltpgtlta href=httpswwwdatastaxcomgtLinkltagtltimg src=abcjpg gt
ltbodygtlthtmlgt
Frontend HTMLhttpscodepenioDatastaxDevs
Frontend CSS
Cascading Style Sheets
Language used to style the web
Mutualization control layout of multiple pages in a single place external files with extension CSS
Work with multiple selectors Simple p every paragraphs Simple ptest paragraphs with class ldquotestrdquo Simple test any html with ldquoidrdquo test Css Combinator descendant gt + ~ Pseudo-class avisited Pseudo-element pfirst-line
Responsive User interfaces (media screen)
Sass and Length (Preprocessing) Variables mixins nested rules
CSS Animations (keyframes animation-name-)
More Information (w3schools)
body background-color lightblue
h1 color white text-align center
p font-family verdana font-size 20px
Frontend CSShttpscodepenioDatastaxDevs
Frontend Javascript
Javascript JS is a programming language
Working with the DOM Document Object Model The HTML elements as objects The properties of all HTML elements The methods to access all HTML elements The events for all HTML elements
Javascript can be defined inside the HTML Code in the header as external js file ltlinkhellip
It can change Content of an HTML element attribute Listen to events and trigger treatment
More on syntax httpswwww3schoolscomjsdefaultasp jquery introduced simplified syntax and features
ltscriptgt
documentgetElementById(demo)innerHTML = Hello JavaScript
function myFunction() documentgetElementById(demo)innerHTML = OK
documentwrite(5 + 6)var price1 = 5var price2 = 6var total = price1 + price2
ltscriptgt
Frontend JavascripthttpscodepenioDatastaxDevs
Frameworks Do not reinvent the wheel
Frontend++ NodeJS
Node JS Cross-platform Javascript run-time environment that
executes Javascript code outside of a browser Light scalable and open-source language platform Nodejs can
generate dynamic page content create open read write delete and close files
on the server collect form data add delete modify data in your database
NPM (Node package Manager) libraries which are built by the awesome community
which will solve almost all the generic problems related to the Nodejs
will download the node modules
NPX (Node package Runner)
var http = require(http)
httpcreateServer(function (req res) reswriteHead(200 Content-Type textplain) resend(Hello World))listen(8080)
Frontend ReactJS
Definition React is a JavaScript library created by Facebook React is a User Interface (UI) library React is a tool for building UI components
LEARNING BY DOING
Client
HANDS-ON 1
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Demo 1 - Create App- Create Component- Start App
httpsgithubcomdatastaxdevsappdev-week1-todolist
29
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Data Layer Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 1 - Create Astra Instance
httpsgithubcomdatastaxdevsappdev-week1-todolist
32
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Backend What is an API
Application Programming Interface
API lists operations that developers can use along with a description of what they do
Make Life Easier for Developers APIs Are Used For Communication Between Services
REST API
Use HTTP format methods and verbs (GETPOSTPUTDELETE) to expose functionality
Multiple specifications Open API (Swagger) GraphQL
Letrsquos use it
c
35
OSS Apache CassandraA Column oriented NoSQL
Database
OSS StargateioA data gateway to allow
multiple usages
Backend Astra Provide APIS
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
Client
Web Application Development Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
14
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
FrontEnd Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Frontend HTML
Hyper Text Markup Language (1990)
Markup language for creating web pages
XML-Based markup
HTML elements are represented by tags Page structures headbody Page formatting paragraphdivisions Text formatting bolditalicfont Tags imagestables listforms
More Information (w3schools) httpswwww3schoolscomhtmldefaultasp httpswwww3schoolscomhtmlhtml_examplesasp httpswwww3schoolscomjsjs_htmldom_eventsasp
ltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtPage Titlelttitlegtltheadgtltbody style=background-colorpowderbluegt
lth1gtThis is a Headinglth1gtltpgtThis is a paragraphltpgtlta href=httpswwwdatastaxcomgtLinkltagtltimg src=abcjpg gt
ltbodygtlthtmlgt
Frontend HTMLhttpscodepenioDatastaxDevs
Frontend CSS
Cascading Style Sheets
Language used to style the web
Mutualization control layout of multiple pages in a single place external files with extension CSS
Work with multiple selectors Simple p every paragraphs Simple ptest paragraphs with class ldquotestrdquo Simple test any html with ldquoidrdquo test Css Combinator descendant gt + ~ Pseudo-class avisited Pseudo-element pfirst-line
Responsive User interfaces (media screen)
Sass and Length (Preprocessing) Variables mixins nested rules
CSS Animations (keyframes animation-name-)
More Information (w3schools)
body background-color lightblue
h1 color white text-align center
p font-family verdana font-size 20px
Frontend CSShttpscodepenioDatastaxDevs
Frontend Javascript
Javascript JS is a programming language
Working with the DOM Document Object Model The HTML elements as objects The properties of all HTML elements The methods to access all HTML elements The events for all HTML elements
Javascript can be defined inside the HTML Code in the header as external js file ltlinkhellip
It can change Content of an HTML element attribute Listen to events and trigger treatment
More on syntax httpswwww3schoolscomjsdefaultasp jquery introduced simplified syntax and features
ltscriptgt
documentgetElementById(demo)innerHTML = Hello JavaScript
function myFunction() documentgetElementById(demo)innerHTML = OK
documentwrite(5 + 6)var price1 = 5var price2 = 6var total = price1 + price2
ltscriptgt
Frontend JavascripthttpscodepenioDatastaxDevs
Frameworks Do not reinvent the wheel
Frontend++ NodeJS
Node JS Cross-platform Javascript run-time environment that
executes Javascript code outside of a browser Light scalable and open-source language platform Nodejs can
generate dynamic page content create open read write delete and close files
on the server collect form data add delete modify data in your database
NPM (Node package Manager) libraries which are built by the awesome community
which will solve almost all the generic problems related to the Nodejs
will download the node modules
NPX (Node package Runner)
var http = require(http)
httpcreateServer(function (req res) reswriteHead(200 Content-Type textplain) resend(Hello World))listen(8080)
Frontend ReactJS
Definition React is a JavaScript library created by Facebook React is a User Interface (UI) library React is a tool for building UI components
LEARNING BY DOING
Client
HANDS-ON 1
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Demo 1 - Create App- Create Component- Start App
httpsgithubcomdatastaxdevsappdev-week1-todolist
29
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Data Layer Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 1 - Create Astra Instance
httpsgithubcomdatastaxdevsappdev-week1-todolist
32
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Backend What is an API
Application Programming Interface
API lists operations that developers can use along with a description of what they do
Make Life Easier for Developers APIs Are Used For Communication Between Services
REST API
Use HTTP format methods and verbs (GETPOSTPUTDELETE) to expose functionality
Multiple specifications Open API (Swagger) GraphQL
Letrsquos use it
c
35
OSS Apache CassandraA Column oriented NoSQL
Database
OSS StargateioA data gateway to allow
multiple usages
Backend Astra Provide APIS
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
14
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
FrontEnd Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Frontend HTML
Hyper Text Markup Language (1990)
Markup language for creating web pages
XML-Based markup
HTML elements are represented by tags Page structures headbody Page formatting paragraphdivisions Text formatting bolditalicfont Tags imagestables listforms
More Information (w3schools) httpswwww3schoolscomhtmldefaultasp httpswwww3schoolscomhtmlhtml_examplesasp httpswwww3schoolscomjsjs_htmldom_eventsasp
ltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtPage Titlelttitlegtltheadgtltbody style=background-colorpowderbluegt
lth1gtThis is a Headinglth1gtltpgtThis is a paragraphltpgtlta href=httpswwwdatastaxcomgtLinkltagtltimg src=abcjpg gt
ltbodygtlthtmlgt
Frontend HTMLhttpscodepenioDatastaxDevs
Frontend CSS
Cascading Style Sheets
Language used to style the web
Mutualization control layout of multiple pages in a single place external files with extension CSS
Work with multiple selectors Simple p every paragraphs Simple ptest paragraphs with class ldquotestrdquo Simple test any html with ldquoidrdquo test Css Combinator descendant gt + ~ Pseudo-class avisited Pseudo-element pfirst-line
Responsive User interfaces (media screen)
Sass and Length (Preprocessing) Variables mixins nested rules
CSS Animations (keyframes animation-name-)
More Information (w3schools)
body background-color lightblue
h1 color white text-align center
p font-family verdana font-size 20px
Frontend CSShttpscodepenioDatastaxDevs
Frontend Javascript
Javascript JS is a programming language
Working with the DOM Document Object Model The HTML elements as objects The properties of all HTML elements The methods to access all HTML elements The events for all HTML elements
Javascript can be defined inside the HTML Code in the header as external js file ltlinkhellip
It can change Content of an HTML element attribute Listen to events and trigger treatment
More on syntax httpswwww3schoolscomjsdefaultasp jquery introduced simplified syntax and features
ltscriptgt
documentgetElementById(demo)innerHTML = Hello JavaScript
function myFunction() documentgetElementById(demo)innerHTML = OK
documentwrite(5 + 6)var price1 = 5var price2 = 6var total = price1 + price2
ltscriptgt
Frontend JavascripthttpscodepenioDatastaxDevs
Frameworks Do not reinvent the wheel
Frontend++ NodeJS
Node JS Cross-platform Javascript run-time environment that
executes Javascript code outside of a browser Light scalable and open-source language platform Nodejs can
generate dynamic page content create open read write delete and close files
on the server collect form data add delete modify data in your database
NPM (Node package Manager) libraries which are built by the awesome community
which will solve almost all the generic problems related to the Nodejs
will download the node modules
NPX (Node package Runner)
var http = require(http)
httpcreateServer(function (req res) reswriteHead(200 Content-Type textplain) resend(Hello World))listen(8080)
Frontend ReactJS
Definition React is a JavaScript library created by Facebook React is a User Interface (UI) library React is a tool for building UI components
LEARNING BY DOING
Client
HANDS-ON 1
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Demo 1 - Create App- Create Component- Start App
httpsgithubcomdatastaxdevsappdev-week1-todolist
29
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Data Layer Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 1 - Create Astra Instance
httpsgithubcomdatastaxdevsappdev-week1-todolist
32
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Backend What is an API
Application Programming Interface
API lists operations that developers can use along with a description of what they do
Make Life Easier for Developers APIs Are Used For Communication Between Services
REST API
Use HTTP format methods and verbs (GETPOSTPUTDELETE) to expose functionality
Multiple specifications Open API (Swagger) GraphQL
Letrsquos use it
c
35
OSS Apache CassandraA Column oriented NoSQL
Database
OSS StargateioA data gateway to allow
multiple usages
Backend Astra Provide APIS
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
Client
FrontEnd Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Frontend HTML
Hyper Text Markup Language (1990)
Markup language for creating web pages
XML-Based markup
HTML elements are represented by tags Page structures headbody Page formatting paragraphdivisions Text formatting bolditalicfont Tags imagestables listforms
More Information (w3schools) httpswwww3schoolscomhtmldefaultasp httpswwww3schoolscomhtmlhtml_examplesasp httpswwww3schoolscomjsjs_htmldom_eventsasp
ltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtPage Titlelttitlegtltheadgtltbody style=background-colorpowderbluegt
lth1gtThis is a Headinglth1gtltpgtThis is a paragraphltpgtlta href=httpswwwdatastaxcomgtLinkltagtltimg src=abcjpg gt
ltbodygtlthtmlgt
Frontend HTMLhttpscodepenioDatastaxDevs
Frontend CSS
Cascading Style Sheets
Language used to style the web
Mutualization control layout of multiple pages in a single place external files with extension CSS
Work with multiple selectors Simple p every paragraphs Simple ptest paragraphs with class ldquotestrdquo Simple test any html with ldquoidrdquo test Css Combinator descendant gt + ~ Pseudo-class avisited Pseudo-element pfirst-line
Responsive User interfaces (media screen)
Sass and Length (Preprocessing) Variables mixins nested rules
CSS Animations (keyframes animation-name-)
More Information (w3schools)
body background-color lightblue
h1 color white text-align center
p font-family verdana font-size 20px
Frontend CSShttpscodepenioDatastaxDevs
Frontend Javascript
Javascript JS is a programming language
Working with the DOM Document Object Model The HTML elements as objects The properties of all HTML elements The methods to access all HTML elements The events for all HTML elements
Javascript can be defined inside the HTML Code in the header as external js file ltlinkhellip
It can change Content of an HTML element attribute Listen to events and trigger treatment
More on syntax httpswwww3schoolscomjsdefaultasp jquery introduced simplified syntax and features
ltscriptgt
documentgetElementById(demo)innerHTML = Hello JavaScript
function myFunction() documentgetElementById(demo)innerHTML = OK
documentwrite(5 + 6)var price1 = 5var price2 = 6var total = price1 + price2
ltscriptgt
Frontend JavascripthttpscodepenioDatastaxDevs
Frameworks Do not reinvent the wheel
Frontend++ NodeJS
Node JS Cross-platform Javascript run-time environment that
executes Javascript code outside of a browser Light scalable and open-source language platform Nodejs can
generate dynamic page content create open read write delete and close files
on the server collect form data add delete modify data in your database
NPM (Node package Manager) libraries which are built by the awesome community
which will solve almost all the generic problems related to the Nodejs
will download the node modules
NPX (Node package Runner)
var http = require(http)
httpcreateServer(function (req res) reswriteHead(200 Content-Type textplain) resend(Hello World))listen(8080)
Frontend ReactJS
Definition React is a JavaScript library created by Facebook React is a User Interface (UI) library React is a tool for building UI components
LEARNING BY DOING
Client
HANDS-ON 1
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Demo 1 - Create App- Create Component- Start App
httpsgithubcomdatastaxdevsappdev-week1-todolist
29
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Data Layer Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 1 - Create Astra Instance
httpsgithubcomdatastaxdevsappdev-week1-todolist
32
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Backend What is an API
Application Programming Interface
API lists operations that developers can use along with a description of what they do
Make Life Easier for Developers APIs Are Used For Communication Between Services
REST API
Use HTTP format methods and verbs (GETPOSTPUTDELETE) to expose functionality
Multiple specifications Open API (Swagger) GraphQL
Letrsquos use it
c
35
OSS Apache CassandraA Column oriented NoSQL
Database
OSS StargateioA data gateway to allow
multiple usages
Backend Astra Provide APIS
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
Frontend HTML
Hyper Text Markup Language (1990)
Markup language for creating web pages
XML-Based markup
HTML elements are represented by tags Page structures headbody Page formatting paragraphdivisions Text formatting bolditalicfont Tags imagestables listforms
More Information (w3schools) httpswwww3schoolscomhtmldefaultasp httpswwww3schoolscomhtmlhtml_examplesasp httpswwww3schoolscomjsjs_htmldom_eventsasp
ltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtPage Titlelttitlegtltheadgtltbody style=background-colorpowderbluegt
lth1gtThis is a Headinglth1gtltpgtThis is a paragraphltpgtlta href=httpswwwdatastaxcomgtLinkltagtltimg src=abcjpg gt
ltbodygtlthtmlgt
Frontend HTMLhttpscodepenioDatastaxDevs
Frontend CSS
Cascading Style Sheets
Language used to style the web
Mutualization control layout of multiple pages in a single place external files with extension CSS
Work with multiple selectors Simple p every paragraphs Simple ptest paragraphs with class ldquotestrdquo Simple test any html with ldquoidrdquo test Css Combinator descendant gt + ~ Pseudo-class avisited Pseudo-element pfirst-line
Responsive User interfaces (media screen)
Sass and Length (Preprocessing) Variables mixins nested rules
CSS Animations (keyframes animation-name-)
More Information (w3schools)
body background-color lightblue
h1 color white text-align center
p font-family verdana font-size 20px
Frontend CSShttpscodepenioDatastaxDevs
Frontend Javascript
Javascript JS is a programming language
Working with the DOM Document Object Model The HTML elements as objects The properties of all HTML elements The methods to access all HTML elements The events for all HTML elements
Javascript can be defined inside the HTML Code in the header as external js file ltlinkhellip
It can change Content of an HTML element attribute Listen to events and trigger treatment
More on syntax httpswwww3schoolscomjsdefaultasp jquery introduced simplified syntax and features
ltscriptgt
documentgetElementById(demo)innerHTML = Hello JavaScript
function myFunction() documentgetElementById(demo)innerHTML = OK
documentwrite(5 + 6)var price1 = 5var price2 = 6var total = price1 + price2
ltscriptgt
Frontend JavascripthttpscodepenioDatastaxDevs
Frameworks Do not reinvent the wheel
Frontend++ NodeJS
Node JS Cross-platform Javascript run-time environment that
executes Javascript code outside of a browser Light scalable and open-source language platform Nodejs can
generate dynamic page content create open read write delete and close files
on the server collect form data add delete modify data in your database
NPM (Node package Manager) libraries which are built by the awesome community
which will solve almost all the generic problems related to the Nodejs
will download the node modules
NPX (Node package Runner)
var http = require(http)
httpcreateServer(function (req res) reswriteHead(200 Content-Type textplain) resend(Hello World))listen(8080)
Frontend ReactJS
Definition React is a JavaScript library created by Facebook React is a User Interface (UI) library React is a tool for building UI components
LEARNING BY DOING
Client
HANDS-ON 1
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Demo 1 - Create App- Create Component- Start App
httpsgithubcomdatastaxdevsappdev-week1-todolist
29
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Data Layer Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 1 - Create Astra Instance
httpsgithubcomdatastaxdevsappdev-week1-todolist
32
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Backend What is an API
Application Programming Interface
API lists operations that developers can use along with a description of what they do
Make Life Easier for Developers APIs Are Used For Communication Between Services
REST API
Use HTTP format methods and verbs (GETPOSTPUTDELETE) to expose functionality
Multiple specifications Open API (Swagger) GraphQL
Letrsquos use it
c
35
OSS Apache CassandraA Column oriented NoSQL
Database
OSS StargateioA data gateway to allow
multiple usages
Backend Astra Provide APIS
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
Frontend HTMLhttpscodepenioDatastaxDevs
Frontend CSS
Cascading Style Sheets
Language used to style the web
Mutualization control layout of multiple pages in a single place external files with extension CSS
Work with multiple selectors Simple p every paragraphs Simple ptest paragraphs with class ldquotestrdquo Simple test any html with ldquoidrdquo test Css Combinator descendant gt + ~ Pseudo-class avisited Pseudo-element pfirst-line
Responsive User interfaces (media screen)
Sass and Length (Preprocessing) Variables mixins nested rules
CSS Animations (keyframes animation-name-)
More Information (w3schools)
body background-color lightblue
h1 color white text-align center
p font-family verdana font-size 20px
Frontend CSShttpscodepenioDatastaxDevs
Frontend Javascript
Javascript JS is a programming language
Working with the DOM Document Object Model The HTML elements as objects The properties of all HTML elements The methods to access all HTML elements The events for all HTML elements
Javascript can be defined inside the HTML Code in the header as external js file ltlinkhellip
It can change Content of an HTML element attribute Listen to events and trigger treatment
More on syntax httpswwww3schoolscomjsdefaultasp jquery introduced simplified syntax and features
ltscriptgt
documentgetElementById(demo)innerHTML = Hello JavaScript
function myFunction() documentgetElementById(demo)innerHTML = OK
documentwrite(5 + 6)var price1 = 5var price2 = 6var total = price1 + price2
ltscriptgt
Frontend JavascripthttpscodepenioDatastaxDevs
Frameworks Do not reinvent the wheel
Frontend++ NodeJS
Node JS Cross-platform Javascript run-time environment that
executes Javascript code outside of a browser Light scalable and open-source language platform Nodejs can
generate dynamic page content create open read write delete and close files
on the server collect form data add delete modify data in your database
NPM (Node package Manager) libraries which are built by the awesome community
which will solve almost all the generic problems related to the Nodejs
will download the node modules
NPX (Node package Runner)
var http = require(http)
httpcreateServer(function (req res) reswriteHead(200 Content-Type textplain) resend(Hello World))listen(8080)
Frontend ReactJS
Definition React is a JavaScript library created by Facebook React is a User Interface (UI) library React is a tool for building UI components
LEARNING BY DOING
Client
HANDS-ON 1
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Demo 1 - Create App- Create Component- Start App
httpsgithubcomdatastaxdevsappdev-week1-todolist
29
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Data Layer Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 1 - Create Astra Instance
httpsgithubcomdatastaxdevsappdev-week1-todolist
32
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Backend What is an API
Application Programming Interface
API lists operations that developers can use along with a description of what they do
Make Life Easier for Developers APIs Are Used For Communication Between Services
REST API
Use HTTP format methods and verbs (GETPOSTPUTDELETE) to expose functionality
Multiple specifications Open API (Swagger) GraphQL
Letrsquos use it
c
35
OSS Apache CassandraA Column oriented NoSQL
Database
OSS StargateioA data gateway to allow
multiple usages
Backend Astra Provide APIS
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
Frontend CSS
Cascading Style Sheets
Language used to style the web
Mutualization control layout of multiple pages in a single place external files with extension CSS
Work with multiple selectors Simple p every paragraphs Simple ptest paragraphs with class ldquotestrdquo Simple test any html with ldquoidrdquo test Css Combinator descendant gt + ~ Pseudo-class avisited Pseudo-element pfirst-line
Responsive User interfaces (media screen)
Sass and Length (Preprocessing) Variables mixins nested rules
CSS Animations (keyframes animation-name-)
More Information (w3schools)
body background-color lightblue
h1 color white text-align center
p font-family verdana font-size 20px
Frontend CSShttpscodepenioDatastaxDevs
Frontend Javascript
Javascript JS is a programming language
Working with the DOM Document Object Model The HTML elements as objects The properties of all HTML elements The methods to access all HTML elements The events for all HTML elements
Javascript can be defined inside the HTML Code in the header as external js file ltlinkhellip
It can change Content of an HTML element attribute Listen to events and trigger treatment
More on syntax httpswwww3schoolscomjsdefaultasp jquery introduced simplified syntax and features
ltscriptgt
documentgetElementById(demo)innerHTML = Hello JavaScript
function myFunction() documentgetElementById(demo)innerHTML = OK
documentwrite(5 + 6)var price1 = 5var price2 = 6var total = price1 + price2
ltscriptgt
Frontend JavascripthttpscodepenioDatastaxDevs
Frameworks Do not reinvent the wheel
Frontend++ NodeJS
Node JS Cross-platform Javascript run-time environment that
executes Javascript code outside of a browser Light scalable and open-source language platform Nodejs can
generate dynamic page content create open read write delete and close files
on the server collect form data add delete modify data in your database
NPM (Node package Manager) libraries which are built by the awesome community
which will solve almost all the generic problems related to the Nodejs
will download the node modules
NPX (Node package Runner)
var http = require(http)
httpcreateServer(function (req res) reswriteHead(200 Content-Type textplain) resend(Hello World))listen(8080)
Frontend ReactJS
Definition React is a JavaScript library created by Facebook React is a User Interface (UI) library React is a tool for building UI components
LEARNING BY DOING
Client
HANDS-ON 1
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Demo 1 - Create App- Create Component- Start App
httpsgithubcomdatastaxdevsappdev-week1-todolist
29
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Data Layer Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 1 - Create Astra Instance
httpsgithubcomdatastaxdevsappdev-week1-todolist
32
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Backend What is an API
Application Programming Interface
API lists operations that developers can use along with a description of what they do
Make Life Easier for Developers APIs Are Used For Communication Between Services
REST API
Use HTTP format methods and verbs (GETPOSTPUTDELETE) to expose functionality
Multiple specifications Open API (Swagger) GraphQL
Letrsquos use it
c
35
OSS Apache CassandraA Column oriented NoSQL
Database
OSS StargateioA data gateway to allow
multiple usages
Backend Astra Provide APIS
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
Frontend CSShttpscodepenioDatastaxDevs
Frontend Javascript
Javascript JS is a programming language
Working with the DOM Document Object Model The HTML elements as objects The properties of all HTML elements The methods to access all HTML elements The events for all HTML elements
Javascript can be defined inside the HTML Code in the header as external js file ltlinkhellip
It can change Content of an HTML element attribute Listen to events and trigger treatment
More on syntax httpswwww3schoolscomjsdefaultasp jquery introduced simplified syntax and features
ltscriptgt
documentgetElementById(demo)innerHTML = Hello JavaScript
function myFunction() documentgetElementById(demo)innerHTML = OK
documentwrite(5 + 6)var price1 = 5var price2 = 6var total = price1 + price2
ltscriptgt
Frontend JavascripthttpscodepenioDatastaxDevs
Frameworks Do not reinvent the wheel
Frontend++ NodeJS
Node JS Cross-platform Javascript run-time environment that
executes Javascript code outside of a browser Light scalable and open-source language platform Nodejs can
generate dynamic page content create open read write delete and close files
on the server collect form data add delete modify data in your database
NPM (Node package Manager) libraries which are built by the awesome community
which will solve almost all the generic problems related to the Nodejs
will download the node modules
NPX (Node package Runner)
var http = require(http)
httpcreateServer(function (req res) reswriteHead(200 Content-Type textplain) resend(Hello World))listen(8080)
Frontend ReactJS
Definition React is a JavaScript library created by Facebook React is a User Interface (UI) library React is a tool for building UI components
LEARNING BY DOING
Client
HANDS-ON 1
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Demo 1 - Create App- Create Component- Start App
httpsgithubcomdatastaxdevsappdev-week1-todolist
29
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Data Layer Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 1 - Create Astra Instance
httpsgithubcomdatastaxdevsappdev-week1-todolist
32
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Backend What is an API
Application Programming Interface
API lists operations that developers can use along with a description of what they do
Make Life Easier for Developers APIs Are Used For Communication Between Services
REST API
Use HTTP format methods and verbs (GETPOSTPUTDELETE) to expose functionality
Multiple specifications Open API (Swagger) GraphQL
Letrsquos use it
c
35
OSS Apache CassandraA Column oriented NoSQL
Database
OSS StargateioA data gateway to allow
multiple usages
Backend Astra Provide APIS
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
Frontend Javascript
Javascript JS is a programming language
Working with the DOM Document Object Model The HTML elements as objects The properties of all HTML elements The methods to access all HTML elements The events for all HTML elements
Javascript can be defined inside the HTML Code in the header as external js file ltlinkhellip
It can change Content of an HTML element attribute Listen to events and trigger treatment
More on syntax httpswwww3schoolscomjsdefaultasp jquery introduced simplified syntax and features
ltscriptgt
documentgetElementById(demo)innerHTML = Hello JavaScript
function myFunction() documentgetElementById(demo)innerHTML = OK
documentwrite(5 + 6)var price1 = 5var price2 = 6var total = price1 + price2
ltscriptgt
Frontend JavascripthttpscodepenioDatastaxDevs
Frameworks Do not reinvent the wheel
Frontend++ NodeJS
Node JS Cross-platform Javascript run-time environment that
executes Javascript code outside of a browser Light scalable and open-source language platform Nodejs can
generate dynamic page content create open read write delete and close files
on the server collect form data add delete modify data in your database
NPM (Node package Manager) libraries which are built by the awesome community
which will solve almost all the generic problems related to the Nodejs
will download the node modules
NPX (Node package Runner)
var http = require(http)
httpcreateServer(function (req res) reswriteHead(200 Content-Type textplain) resend(Hello World))listen(8080)
Frontend ReactJS
Definition React is a JavaScript library created by Facebook React is a User Interface (UI) library React is a tool for building UI components
LEARNING BY DOING
Client
HANDS-ON 1
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Demo 1 - Create App- Create Component- Start App
httpsgithubcomdatastaxdevsappdev-week1-todolist
29
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Data Layer Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 1 - Create Astra Instance
httpsgithubcomdatastaxdevsappdev-week1-todolist
32
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Backend What is an API
Application Programming Interface
API lists operations that developers can use along with a description of what they do
Make Life Easier for Developers APIs Are Used For Communication Between Services
REST API
Use HTTP format methods and verbs (GETPOSTPUTDELETE) to expose functionality
Multiple specifications Open API (Swagger) GraphQL
Letrsquos use it
c
35
OSS Apache CassandraA Column oriented NoSQL
Database
OSS StargateioA data gateway to allow
multiple usages
Backend Astra Provide APIS
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
Frontend JavascripthttpscodepenioDatastaxDevs
Frameworks Do not reinvent the wheel
Frontend++ NodeJS
Node JS Cross-platform Javascript run-time environment that
executes Javascript code outside of a browser Light scalable and open-source language platform Nodejs can
generate dynamic page content create open read write delete and close files
on the server collect form data add delete modify data in your database
NPM (Node package Manager) libraries which are built by the awesome community
which will solve almost all the generic problems related to the Nodejs
will download the node modules
NPX (Node package Runner)
var http = require(http)
httpcreateServer(function (req res) reswriteHead(200 Content-Type textplain) resend(Hello World))listen(8080)
Frontend ReactJS
Definition React is a JavaScript library created by Facebook React is a User Interface (UI) library React is a tool for building UI components
LEARNING BY DOING
Client
HANDS-ON 1
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Demo 1 - Create App- Create Component- Start App
httpsgithubcomdatastaxdevsappdev-week1-todolist
29
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Data Layer Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 1 - Create Astra Instance
httpsgithubcomdatastaxdevsappdev-week1-todolist
32
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Backend What is an API
Application Programming Interface
API lists operations that developers can use along with a description of what they do
Make Life Easier for Developers APIs Are Used For Communication Between Services
REST API
Use HTTP format methods and verbs (GETPOSTPUTDELETE) to expose functionality
Multiple specifications Open API (Swagger) GraphQL
Letrsquos use it
c
35
OSS Apache CassandraA Column oriented NoSQL
Database
OSS StargateioA data gateway to allow
multiple usages
Backend Astra Provide APIS
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
Frameworks Do not reinvent the wheel
Frontend++ NodeJS
Node JS Cross-platform Javascript run-time environment that
executes Javascript code outside of a browser Light scalable and open-source language platform Nodejs can
generate dynamic page content create open read write delete and close files
on the server collect form data add delete modify data in your database
NPM (Node package Manager) libraries which are built by the awesome community
which will solve almost all the generic problems related to the Nodejs
will download the node modules
NPX (Node package Runner)
var http = require(http)
httpcreateServer(function (req res) reswriteHead(200 Content-Type textplain) resend(Hello World))listen(8080)
Frontend ReactJS
Definition React is a JavaScript library created by Facebook React is a User Interface (UI) library React is a tool for building UI components
LEARNING BY DOING
Client
HANDS-ON 1
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Demo 1 - Create App- Create Component- Start App
httpsgithubcomdatastaxdevsappdev-week1-todolist
29
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Data Layer Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 1 - Create Astra Instance
httpsgithubcomdatastaxdevsappdev-week1-todolist
32
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Backend What is an API
Application Programming Interface
API lists operations that developers can use along with a description of what they do
Make Life Easier for Developers APIs Are Used For Communication Between Services
REST API
Use HTTP format methods and verbs (GETPOSTPUTDELETE) to expose functionality
Multiple specifications Open API (Swagger) GraphQL
Letrsquos use it
c
35
OSS Apache CassandraA Column oriented NoSQL
Database
OSS StargateioA data gateway to allow
multiple usages
Backend Astra Provide APIS
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
Frontend++ NodeJS
Node JS Cross-platform Javascript run-time environment that
executes Javascript code outside of a browser Light scalable and open-source language platform Nodejs can
generate dynamic page content create open read write delete and close files
on the server collect form data add delete modify data in your database
NPM (Node package Manager) libraries which are built by the awesome community
which will solve almost all the generic problems related to the Nodejs
will download the node modules
NPX (Node package Runner)
var http = require(http)
httpcreateServer(function (req res) reswriteHead(200 Content-Type textplain) resend(Hello World))listen(8080)
Frontend ReactJS
Definition React is a JavaScript library created by Facebook React is a User Interface (UI) library React is a tool for building UI components
LEARNING BY DOING
Client
HANDS-ON 1
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Demo 1 - Create App- Create Component- Start App
httpsgithubcomdatastaxdevsappdev-week1-todolist
29
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Data Layer Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 1 - Create Astra Instance
httpsgithubcomdatastaxdevsappdev-week1-todolist
32
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Backend What is an API
Application Programming Interface
API lists operations that developers can use along with a description of what they do
Make Life Easier for Developers APIs Are Used For Communication Between Services
REST API
Use HTTP format methods and verbs (GETPOSTPUTDELETE) to expose functionality
Multiple specifications Open API (Swagger) GraphQL
Letrsquos use it
c
35
OSS Apache CassandraA Column oriented NoSQL
Database
OSS StargateioA data gateway to allow
multiple usages
Backend Astra Provide APIS
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
Frontend ReactJS
Definition React is a JavaScript library created by Facebook React is a User Interface (UI) library React is a tool for building UI components
LEARNING BY DOING
Client
HANDS-ON 1
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Demo 1 - Create App- Create Component- Start App
httpsgithubcomdatastaxdevsappdev-week1-todolist
29
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Data Layer Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 1 - Create Astra Instance
httpsgithubcomdatastaxdevsappdev-week1-todolist
32
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Backend What is an API
Application Programming Interface
API lists operations that developers can use along with a description of what they do
Make Life Easier for Developers APIs Are Used For Communication Between Services
REST API
Use HTTP format methods and verbs (GETPOSTPUTDELETE) to expose functionality
Multiple specifications Open API (Swagger) GraphQL
Letrsquos use it
c
35
OSS Apache CassandraA Column oriented NoSQL
Database
OSS StargateioA data gateway to allow
multiple usages
Backend Astra Provide APIS
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
Client
HANDS-ON 1
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Databases
Filesystem andStorage
Drivers
Progressive Application
Demo 1 - Create App- Create Component- Start App
httpsgithubcomdatastaxdevsappdev-week1-todolist
29
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Data Layer Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 1 - Create Astra Instance
httpsgithubcomdatastaxdevsappdev-week1-todolist
32
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Backend What is an API
Application Programming Interface
API lists operations that developers can use along with a description of what they do
Make Life Easier for Developers APIs Are Used For Communication Between Services
REST API
Use HTTP format methods and verbs (GETPOSTPUTDELETE) to expose functionality
Multiple specifications Open API (Swagger) GraphQL
Letrsquos use it
c
35
OSS Apache CassandraA Column oriented NoSQL
Database
OSS StargateioA data gateway to allow
multiple usages
Backend Astra Provide APIS
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
Demo 1 - Create App- Create Component- Start App
httpsgithubcomdatastaxdevsappdev-week1-todolist
29
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Data Layer Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 1 - Create Astra Instance
httpsgithubcomdatastaxdevsappdev-week1-todolist
32
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Backend What is an API
Application Programming Interface
API lists operations that developers can use along with a description of what they do
Make Life Easier for Developers APIs Are Used For Communication Between Services
REST API
Use HTTP format methods and verbs (GETPOSTPUTDELETE) to expose functionality
Multiple specifications Open API (Swagger) GraphQL
Letrsquos use it
c
35
OSS Apache CassandraA Column oriented NoSQL
Database
OSS StargateioA data gateway to allow
multiple usages
Backend Astra Provide APIS
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
29
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Data Layer Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 1 - Create Astra Instance
httpsgithubcomdatastaxdevsappdev-week1-todolist
32
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Backend What is an API
Application Programming Interface
API lists operations that developers can use along with a description of what they do
Make Life Easier for Developers APIs Are Used For Communication Between Services
REST API
Use HTTP format methods and verbs (GETPOSTPUTDELETE) to expose functionality
Multiple specifications Open API (Swagger) GraphQL
Letrsquos use it
c
35
OSS Apache CassandraA Column oriented NoSQL
Database
OSS StargateioA data gateway to allow
multiple usages
Backend Astra Provide APIS
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
Client
Data Layer Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 1 - Create Astra Instance
httpsgithubcomdatastaxdevsappdev-week1-todolist
32
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Backend What is an API
Application Programming Interface
API lists operations that developers can use along with a description of what they do
Make Life Easier for Developers APIs Are Used For Communication Between Services
REST API
Use HTTP format methods and verbs (GETPOSTPUTDELETE) to expose functionality
Multiple specifications Open API (Swagger) GraphQL
Letrsquos use it
c
35
OSS Apache CassandraA Column oriented NoSQL
Database
OSS StargateioA data gateway to allow
multiple usages
Backend Astra Provide APIS
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
Hands-on 1 - Create Astra Instance
httpsgithubcomdatastaxdevsappdev-week1-todolist
32
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Backend What is an API
Application Programming Interface
API lists operations that developers can use along with a description of what they do
Make Life Easier for Developers APIs Are Used For Communication Between Services
REST API
Use HTTP format methods and verbs (GETPOSTPUTDELETE) to expose functionality
Multiple specifications Open API (Swagger) GraphQL
Letrsquos use it
c
35
OSS Apache CassandraA Column oriented NoSQL
Database
OSS StargateioA data gateway to allow
multiple usages
Backend Astra Provide APIS
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
32
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Backend What is an API
Application Programming Interface
API lists operations that developers can use along with a description of what they do
Make Life Easier for Developers APIs Are Used For Communication Between Services
REST API
Use HTTP format methods and verbs (GETPOSTPUTDELETE) to expose functionality
Multiple specifications Open API (Swagger) GraphQL
Letrsquos use it
c
35
OSS Apache CassandraA Column oriented NoSQL
Database
OSS StargateioA data gateway to allow
multiple usages
Backend Astra Provide APIS
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Backend What is an API
Application Programming Interface
API lists operations that developers can use along with a description of what they do
Make Life Easier for Developers APIs Are Used For Communication Between Services
REST API
Use HTTP format methods and verbs (GETPOSTPUTDELETE) to expose functionality
Multiple specifications Open API (Swagger) GraphQL
Letrsquos use it
c
35
OSS Apache CassandraA Column oriented NoSQL
Database
OSS StargateioA data gateway to allow
multiple usages
Backend Astra Provide APIS
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
Backend What is an API
Application Programming Interface
API lists operations that developers can use along with a description of what they do
Make Life Easier for Developers APIs Are Used For Communication Between Services
REST API
Use HTTP format methods and verbs (GETPOSTPUTDELETE) to expose functionality
Multiple specifications Open API (Swagger) GraphQL
Letrsquos use it
c
35
OSS Apache CassandraA Column oriented NoSQL
Database
OSS StargateioA data gateway to allow
multiple usages
Backend Astra Provide APIS
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
c
35
OSS Apache CassandraA Column oriented NoSQL
Database
OSS StargateioA data gateway to allow
multiple usages
Backend Astra Provide APIS
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
Client
Backend Architecture
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
Hands-on 2 - Create a token- Use API
httpsgithubcomdatastaxdevsappdev-week1-todolist
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
Client
Final Step
Web Browser
Mobile Browsers
Presentation TierFrontEnd
Web Server
HTTP
Application TierBackend
Data TierDATA LAYER
Services
AP
I
Drivers
Progressive Application
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
Demo 2 - Setup Todo App- Start Todo App- Check Database
httpsgithubcomdatastaxdevsappdev-week1-todolist
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
40
Application 101
02Presentation TierldquoFrontEndrdquo
03SeriesHouseKeeping
01
Agenda
Resources
0605Application TierldquoBackEndrdquo
04Data TierldquoDatabasesrdquo
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
menticom First Questions
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
Swag Winners 127881
42
Congratulations to 1st 2nd and 3rd place on the menti quiz
To claim your prize please send an email to
jackfryerdatastaxcom
Include a screenshot of your menti screen
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
Claim your FREE Voucher 127881
43
httpswwwdatastaxcomdevcertifications
Vouchers (normally 145$ each)
valid for 3 months valid for 2 attempts
Claim using the link httpdtsxioworkshop-voucher
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
How to submit Homeworks
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
Get your badge(and brag on Linkedin)
1 - [Complete hands-on]Run the todo Application in Gitpod connected to AstraDB and create a funny TASK D upload a screenshot
2 - [(Optional) Tutorial video] Know More about HTML and CSS Know More about Javascript and React
All needed info in github repohttpsgithubcomdatastaxdevsappdev-week1-todolist
WEEK 1 (due date 714)
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
46
LEARNING PATHS at the academydatastaxcom
K8SSANDRA101
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
Whatrsquos coming datastaxcomworkshops
72 77 and 78 710 714 and 715
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
Join our 10k Discord CommunityThe Fellowship of the RINGSdtsxiodiscord
Than
k yo
uThank you
Than
k yo
uThank you