Suche senden
Hochladen
Sst hackathon express
•
Als PPTX, PDF herunterladen
•
2 gefällt mir
•
333 views
Aeshan Wijetunge
Folgen
ExpressJS Primer to SST students prior to Hackathon@SST 2015.
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 13
Jetzt herunterladen
Empfohlen
Ite express labs
Ite express labs
Aeshan Wijetunge
Apigee deploy grunt plugin.1.0
Apigee deploy grunt plugin.1.0
Diego Zuluaga
Selenium Page Object Model Using Page Factory | Selenium Tutorial For Beginne...
Selenium Page Object Model Using Page Factory | Selenium Tutorial For Beginne...
Edureka!
Beyond AngularJS: Best practices and more
Beyond AngularJS: Best practices and more
Ari Lerner
I Love APIs 2015: Continuous Integration the Virtuous Cycle
I Love APIs 2015: Continuous Integration the Virtuous Cycle
Apigee | Google Cloud
Building Creative Product Extensions with Experience Manager
Building Creative Product Extensions with Experience Manager
Justin Edelson
Bootiful Development with Spring Boot and Angular - RWX 2018
Bootiful Development with Spring Boot and Angular - RWX 2018
Matt Raible
Быстрый старт в gDrive API
Быстрый старт в gDrive API
PyNSK
Empfohlen
Ite express labs
Ite express labs
Aeshan Wijetunge
Apigee deploy grunt plugin.1.0
Apigee deploy grunt plugin.1.0
Diego Zuluaga
Selenium Page Object Model Using Page Factory | Selenium Tutorial For Beginne...
Selenium Page Object Model Using Page Factory | Selenium Tutorial For Beginne...
Edureka!
Beyond AngularJS: Best practices and more
Beyond AngularJS: Best practices and more
Ari Lerner
I Love APIs 2015: Continuous Integration the Virtuous Cycle
I Love APIs 2015: Continuous Integration the Virtuous Cycle
Apigee | Google Cloud
Building Creative Product Extensions with Experience Manager
Building Creative Product Extensions with Experience Manager
Justin Edelson
Bootiful Development with Spring Boot and Angular - RWX 2018
Bootiful Development with Spring Boot and Angular - RWX 2018
Matt Raible
Быстрый старт в gDrive API
Быстрый старт в gDrive API
PyNSK
Angular Dependency Injection
Angular Dependency Injection
Nir Kaufman
Bootiful Development with Spring Boot and Angular - Connect.Tech 2017
Bootiful Development with Spring Boot and Angular - Connect.Tech 2017
Matt Raible
Modern web app with REACT
Modern web app with REACT
AndryRajohnson
Angular coding: from project management to web and mobile deploy
Angular coding: from project management to web and mobile deploy
Corley S.r.l.
Microservices for the Masses with Spring Boot and JHipster - RWX 2018
Microservices for the Masses with Spring Boot and JHipster - RWX 2018
Matt Raible
Bootiful Development with Spring Boot and Vue - RWX 2018
Bootiful Development with Spring Boot and Vue - RWX 2018
Matt Raible
Angular2RoutingSetupByShubham
Angular2RoutingSetupByShubham
Shubham Verma
SocketIOSetupWithAngularJSAppByShubham
SocketIOSetupWithAngularJSAppByShubham
Shubham Verma
React Native - Getting Started
React Native - Getting Started
Tracy Lee
Corley cloud angular in cloud
Corley cloud angular in cloud
Corley S.r.l.
Learn Angular 9/8 In Easy Steps
Learn Angular 9/8 In Easy Steps
Ahmed Bouchefra
Angular Ivy- An Overview
Angular Ivy- An Overview
Jalpesh Vadgama
Angular elements - embed your angular components EVERYWHERE
Angular elements - embed your angular components EVERYWHERE
Nadav Mary
Quick Way to work with Models and Alloy in Appcelerator Titanium
Quick Way to work with Models and Alloy in Appcelerator Titanium
Aaron Saunders
Modern Web Applications with Sightly
Modern Web Applications with Sightly
Radu Cotescu
Webpack and angularjs
Webpack and angularjs
Nir Kaufman
Introduction to angular 4
Introduction to angular 4
Marwane El Azami
React Native
React Native
Software Infrastructure
React native.key
React native.key
Praveen Prasad
AEM and Sling
AEM and Sling
Lo Ki
Node.js primer for ITE students
Node.js primer for ITE students
Quhan Arunasalam
SAP Kapsel Plugins For Cordova
SAP Kapsel Plugins For Cordova
Chris Whealy
Weitere ähnliche Inhalte
Was ist angesagt?
Angular Dependency Injection
Angular Dependency Injection
Nir Kaufman
Bootiful Development with Spring Boot and Angular - Connect.Tech 2017
Bootiful Development with Spring Boot and Angular - Connect.Tech 2017
Matt Raible
Modern web app with REACT
Modern web app with REACT
AndryRajohnson
Angular coding: from project management to web and mobile deploy
Angular coding: from project management to web and mobile deploy
Corley S.r.l.
Microservices for the Masses with Spring Boot and JHipster - RWX 2018
Microservices for the Masses with Spring Boot and JHipster - RWX 2018
Matt Raible
Bootiful Development with Spring Boot and Vue - RWX 2018
Bootiful Development with Spring Boot and Vue - RWX 2018
Matt Raible
Angular2RoutingSetupByShubham
Angular2RoutingSetupByShubham
Shubham Verma
SocketIOSetupWithAngularJSAppByShubham
SocketIOSetupWithAngularJSAppByShubham
Shubham Verma
React Native - Getting Started
React Native - Getting Started
Tracy Lee
Corley cloud angular in cloud
Corley cloud angular in cloud
Corley S.r.l.
Learn Angular 9/8 In Easy Steps
Learn Angular 9/8 In Easy Steps
Ahmed Bouchefra
Angular Ivy- An Overview
Angular Ivy- An Overview
Jalpesh Vadgama
Angular elements - embed your angular components EVERYWHERE
Angular elements - embed your angular components EVERYWHERE
Nadav Mary
Quick Way to work with Models and Alloy in Appcelerator Titanium
Quick Way to work with Models and Alloy in Appcelerator Titanium
Aaron Saunders
Modern Web Applications with Sightly
Modern Web Applications with Sightly
Radu Cotescu
Webpack and angularjs
Webpack and angularjs
Nir Kaufman
Introduction to angular 4
Introduction to angular 4
Marwane El Azami
React Native
React Native
Software Infrastructure
React native.key
React native.key
Praveen Prasad
AEM and Sling
AEM and Sling
Lo Ki
Was ist angesagt?
(20)
Angular Dependency Injection
Angular Dependency Injection
Bootiful Development with Spring Boot and Angular - Connect.Tech 2017
Bootiful Development with Spring Boot and Angular - Connect.Tech 2017
Modern web app with REACT
Modern web app with REACT
Angular coding: from project management to web and mobile deploy
Angular coding: from project management to web and mobile deploy
Microservices for the Masses with Spring Boot and JHipster - RWX 2018
Microservices for the Masses with Spring Boot and JHipster - RWX 2018
Bootiful Development with Spring Boot and Vue - RWX 2018
Bootiful Development with Spring Boot and Vue - RWX 2018
Angular2RoutingSetupByShubham
Angular2RoutingSetupByShubham
SocketIOSetupWithAngularJSAppByShubham
SocketIOSetupWithAngularJSAppByShubham
React Native - Getting Started
React Native - Getting Started
Corley cloud angular in cloud
Corley cloud angular in cloud
Learn Angular 9/8 In Easy Steps
Learn Angular 9/8 In Easy Steps
Angular Ivy- An Overview
Angular Ivy- An Overview
Angular elements - embed your angular components EVERYWHERE
Angular elements - embed your angular components EVERYWHERE
Quick Way to work with Models and Alloy in Appcelerator Titanium
Quick Way to work with Models and Alloy in Appcelerator Titanium
Modern Web Applications with Sightly
Modern Web Applications with Sightly
Webpack and angularjs
Webpack and angularjs
Introduction to angular 4
Introduction to angular 4
React Native
React Native
React native.key
React native.key
AEM and Sling
AEM and Sling
Ähnlich wie Sst hackathon express
Node.js primer for ITE students
Node.js primer for ITE students
Quhan Arunasalam
SAP Kapsel Plugins For Cordova
SAP Kapsel Plugins For Cordova
Chris Whealy
API Services: Building State-of-the-Art APIs
API Services: Building State-of-the-Art APIs
Apigee | Google Cloud
Node.js Workshop
Node.js Workshop
Quhan Arunasalam
Kraken.js Lab Primer
Kraken.js Lab Primer
Aeshan Wijetunge
AWS Container Services – 유재석 (AWS 솔루션즈 아키텍트)
AWS Container Services – 유재석 (AWS 솔루션즈 아키텍트)
Amazon Web Services Korea
Amazon Container Services – 유재석 (AWS 솔루션즈 아키텍트)
Amazon Container Services – 유재석 (AWS 솔루션즈 아키텍트)
Amazon Web Services Korea
Node.js Tools Ecosystem
Node.js Tools Ecosystem
Rocket Software
Reactive application using meteor
Reactive application using meteor
Sapna Upreti
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEM
AdobeMarketingCloud
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEM
AdobeMarketingCloud
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEM
connectwebex
AWS 고객사를 위한 ‘AWS 컨테이너 교육’ - 유재석, AWS 솔루션즈 아키텍트
AWS 고객사를 위한 ‘AWS 컨테이너 교육’ - 유재석, AWS 솔루션즈 아키텍트
Amazon Web Services Korea
Building and managing applications fast for IBM i
Building and managing applications fast for IBM i
Zend by Rogue Wave Software
AEM and Sling
AEM and Sling
Lokesh BS
New and cool in OSGi R7 - David Bosschaert & Carsten Ziegeler
New and cool in OSGi R7 - David Bosschaert & Carsten Ziegeler
mfrancis
Rhomobile 5.5 Release Notes
Rhomobile 5.5 Release Notes
Konstantin Rybas
Notes
Notes
Ganesh Kumar
Appium solution
Appium solution
Nael Abd Eljawad
Mean stack Magics
Mean stack Magics
Aishura Aishu
Ähnlich wie Sst hackathon express
(20)
Node.js primer for ITE students
Node.js primer for ITE students
SAP Kapsel Plugins For Cordova
SAP Kapsel Plugins For Cordova
API Services: Building State-of-the-Art APIs
API Services: Building State-of-the-Art APIs
Node.js Workshop
Node.js Workshop
Kraken.js Lab Primer
Kraken.js Lab Primer
AWS Container Services – 유재석 (AWS 솔루션즈 아키텍트)
AWS Container Services – 유재석 (AWS 솔루션즈 아키텍트)
Amazon Container Services – 유재석 (AWS 솔루션즈 아키텍트)
Amazon Container Services – 유재석 (AWS 솔루션즈 아키텍트)
Node.js Tools Ecosystem
Node.js Tools Ecosystem
Reactive application using meteor
Reactive application using meteor
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEM
AWS 고객사를 위한 ‘AWS 컨테이너 교육’ - 유재석, AWS 솔루션즈 아키텍트
AWS 고객사를 위한 ‘AWS 컨테이너 교육’ - 유재석, AWS 솔루션즈 아키텍트
Building and managing applications fast for IBM i
Building and managing applications fast for IBM i
AEM and Sling
AEM and Sling
New and cool in OSGi R7 - David Bosschaert & Carsten Ziegeler
New and cool in OSGi R7 - David Bosschaert & Carsten Ziegeler
Rhomobile 5.5 Release Notes
Rhomobile 5.5 Release Notes
Notes
Notes
Appium solution
Appium solution
Mean stack Magics
Mean stack Magics
Kürzlich hochgeladen
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
hans926745
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other Frameworks
Softradix Technologies
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
Pooja Nehwal
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & Application
AndikSusilo4
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
2toLead Limited
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Radu Cotescu
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Patryk Bandurski
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
Scott Keck-Warren
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Michael W. Hawkins
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Rafal Los
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Delhi Call girls
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
naman860154
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
Pixlogix Infotech
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Gabriella Davis
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
Sinan KOZAK
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Safe Software
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
soniya singh
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
HostedbyConfluent
Kürzlich hochgeladen
(20)
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other Frameworks
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & Application
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Sst hackathon express
1.
© 2015 PayPal
Inc. All rights reserved. Confidential and proprietary. Express.js labs Aeshan Wijetunge 06/ 3 / 2015 SST
2.
© 2015 PayPal
Inc. All rights reserved. Confidential and proprietary. Why a Web Framework? A framework provides the scaffolding for web developers aiming to build an application in an organized manner. Express is one of the most popular node.js frameworks and you might find it handy in your hackathon for the following reasons: ● Lightweight ● Routing support ● Well documented ● Many modular features available (e.g: express-session) ● Very active user community with a great deal of online material 2
3.
© 2015 PayPal
Inc. All rights reserved. Confidential and proprietary. 3 Middleware A function with access to the request object, the response object, and the next middleware in line in the request-response cycle of an application. Middleware Middleware Applicatio n Request Response
4.
© 2015 PayPal
Inc. All rights reserved. Confidential and proprietary. 4 Views: adding a templating engine Why a templating engine? Static HTML is very restrictive and as we’re creating a web application we’ll need something more dynamic. Template engines compile template written in one markup to HTML which is rendered on the user’s browser. There are many templating engine options that can be added to express. ● HAML ● jade ● dustJS ● handlebars ● … For the sake of convenience, we’ll be using dust.js views in this example and will be relying on a module created by PayPal as the template-engine for the rendering of the page. Be sure to read-up on their awesome documentation when using dust.js http://akdubya.github.io/dustjs/#guide
5.
© 2015 PayPal
Inc. All rights reserved. Confidential and proprietary. 5 Views: adding a template engine var options = { helpers: [ //NOTE: function has to take dust as an argument. //The following function defines @myHelper helper function (dust) { dust.helpers.myHelper = function (a, b, c, d) {} }, 'dustjs-helpers' //So do installed modules ] }; app.engine('dust', adaro.dust(options)); app.set('view engine', 'dust'); app.set('views', __dirname + '/public/views'); npm install adaro --save <html> <body> <div>Hello {name}!</div> </body> </html>
6.
© 2015 PayPal
Inc. All rights reserved. Confidential and proprietary. 6 Adding Features : module by module A web-application that just serves HTML pages may not be all that useful. Thankfully express is easily extensible thanks to npm. As discussed earlier the node community has populated a massive variety of modules on npm to suit almost any requirement you might come up with during your hackathon. We’re going to use a weather-api to fetch the latest updates for some cities of our choice. With a bit of googling we find a site with some open APIs (not requiring API secret keys etc) which is great for our example http://openweathermap.org/current
7.
© 2015 PayPal
Inc. All rights reserved. Confidential and proprietary. 7 Mashups : Using APIs When developing applications we’d not only want to reuse functionality via npm modules. We’d also like to access external data which would make our web apps even more useful. Many companies & organizations expose their data to developers via APIs. For our weather app consider this API call to fetch Singapore weather http://api.openweathermap.org/data/2.5/weather?q=Singapore You can view the JSON response in your browser. Not all APIs are open. Other may require client secret keys but a good API provider would document how to use their API.
8.
© 2015 PayPal
Inc. All rights reserved. Confidential and proprietary. 8 Request: the API client npm install request --save Googling for API clients will uncover many though we’ll be using the request module to consume our weather API. request('http://api.openweathermap.org/data/2.5/weather?q=Singapore' , function (error, response, body) { if (!error && response.statusCode == 200) { console.log(body) // Weather Data for Singapore } }) Hitting your koding.io url should populate the console.log in your koding terminal. http://aeshanw.koding.io:6001/weather
9.
© 2015 PayPal
Inc. All rights reserved. Confidential and proprietary. 9 API Debugging JSON can be a bit difficult to read at times so we rely on some online tools to better understand the API response. http://jsonformatter.curiousconcept.com/
10.
© 2015 PayPal
Inc. All rights reserved. Confidential and proprietary. 10 View : Presenting the data With a better understanding of the API’s data response we can modify our dust template to render it in a more presentable form to the user. <html> <body> <h1>Weather for {country}</h1> {#weather} <ul> <li>{main}</li> <li>{description}</li> </ul> {/weather} </body> </html>
11.
© 2015 PayPal
Inc. All rights reserved. Confidential and proprietary. 11 Try it yourself The complete code for the lab is in the github repo: https://github.com/node-workshop-sst/sst-weather-lab $ cd ~/node $ git clone https://github.com/node-workshop-sst/sst-weather-lab.git $ cd sst-weather-lab $ npm install $ node app.js SST blocks certain ports so we’ll need to override our koding ports Modify this code in app.js to use port 80. app.listen(appEnv.port80, function() { $ sudo service apache2 stop $ sudo node app.js visit aeshanw.koding.io/weather
12.
© 2015 PayPal
Inc. All rights reserved. Confidential and proprietary. 12 Deploying to Bluemix You’ll need to git add & commit all your code changes except the node_modules folder. Then simply git push to your bluemix git repo to deploy the app to staging. git push origin master And you should see activity on your bluemix dashboard and once its deployed you can hit your own url to view the result http://sst-express-lab.eu-gb.mybluemix.net/weather
13.
© 2015 PayPal
Inc. All rights reserved. Confidential and proprietary. 13 Conclusion ● Use frameworks like Express to organize your development ● Add features using node modules via npm ● Extend your web app functionality via external APIs ● use web tools & console.log to better debug and better consume APIs If you liked ExpressJS, and desire more features we strongly suggest you try Kraken.js. It originated from PayPal and has more advanced features for more scalable web apps. http://krakenjs.com/ Thank you & Happy Hacking!
Hinweis der Redaktion
extol the benefits of a simple framework like express
Jetzt herunterladen