React JS Code Camp 2018, Project presentation Mikael Sommarberg, - PowerPoint PPT Presentation

Jan 22, 2023 •349 likes •457 views

React JS Code Camp 2018, Project presentation Mikael Sommarberg, Miikka Lahtinen & Julia Tasa Project Overview Stinfo is a grocery store info Shows the stores nearby Opening hours Check the price(s) of product(s) in the

React JS Code Camp 2018, Project presentation Mikael Sommarberg, Miikka Lahtinen & Julia Tasa
Project Overview Stinfo is a grocery store info ❏ Shows the stores nearby ❏ Opening hours ❏ Check the price(s) of product(s) in the selected (or nearby) store ❏ (Foodie.fi, Kesko) Goal ❏ Easy way to check if the store is open ❏ What is the nearest store and if that store has the product that is wanted ❏ Shopping list with aisle navigation help ❏
Schedule We stayed on schedule ❏ Wednesday 3.1.18 Thursday 4.1.18 Friday 5.1.18 Brainstorming Implementation continues Finishing touch ❏ ❏ ❏ ❏ User-interface design ❏ Slides for Friday’s session ❏ Preparing for presentation ❏ Implementation Presentation ❏
Used tools ● Node.js 8.9.4 ● React 16.2 ● Bootstrap 3.3 ● jQuery 3.2 ● rc-menu 6.2 ● Express.js 4.15 Bitbucket, Google Docs, Wiki
Faced issues Kesko and Lidl API does not exist, currently relying on Foodie.fi ❏ Faced some issues with CORS limitation when using “not so ❏ public” API Mostly “backend issues” ❏
User Scenario example 1 Problem: Matti is a new student and he is hungry. He doesn’t know where is the nearest supermarket. It’s also 9:30 PM so he doesn’t know if any market is open today anymore. Solution: He uses Stinfo and sees that S-Market Sammonlahti is the nearest store. It is also open till 10PM!
User Scenario example 2 Problem: Ritva-Mielikki plans her family’s grocery shopping. She wants to do the shopping in one place, but she is not sure if there are Chiquita bananas and Kulta Katriina -coffee in S-Market Sammonlahti. She also wants to know the prices of the products and make a shopping list. Solution: Ritva-Mielikki uses Stinfo and she searches for the products. She is able to add the products to shopping list and there is also the total cost. Now Ritva-Mielikki is ready for shopping!
Coding trick When facing with CORS limitation of a certain API ❏ (Foodie.fi), an API proxy can be implemented quite easily. In this project we used Express.js (a nodejs library) as one.
Demonstration
Questions?

Recommend

Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim

Building React web and React Native apps with shared code Tyrone Trevorrow: @tyrone_mpolee Tim Sawtell: @saw083 Damon Smith: @damondefault Outline 1. Why Sportsbet would consider React and React Native 2. What React and React Native offers

872 views • 40 slides

React Native Platform specific code Native Components Methods React Native provides two ways

React Native Platform specific code Native Components Methods React Native provides two ways to easily organize your code and separate it by platform: Using the Platform module. Using platform-specific file extensions. Certain

455 views • 28 slides

Progressive Decoupling React + Drupal + Apache Solr November 9, 2018 Prepared by Chris Russo,

DRUPAL CAMP ATLANTA 2018 Progressive Decoupling React + Drupal + Apache Solr November 9, 2018 Prepared by Chris Russo, CEO Drupalcamp Atlanta 2018 WHO AM I? SESSION GOALS CASE STUDY: THE APP EOMEGA.ORG/SEARCH PREVIOUS SEARCH

972 views • 34 slides

webrx-react Monadic Development for the Web Using RxJS and React Follow Along @

webrx-react Monadic Development for the Web Using RxJS and React Follow Along @ https://git.io/vQ10Y Who Am I? Pat Sissons Senior Software Developer at Marine Learning Systems /patsissons /marinels webrx-react? webrx-react is a single

495 views • 28 slides

React Native Navigation Screens, moving, parameters React Navigation React Navigation is not

React Native Navigation Screens, moving, parameters React Navigation React Navigation is not from facebook; its created by the React Native community Uses platform-specific native primitives. Must install the React Navigation

628 views • 34 slides

Managing Data with React and Redux 1 @Jack_Franklin @pusher 2 Code, notes, etc:

Managing Data with React and Redux 1 @Jack_Franklin @pusher 2 Code, notes, etc: github.com/jackfranklin/ react-redux-talk Slides (after talk): speakerdeck.com/ jackfranklin I'll tweet them all: twitter.com/jack_franklin 3 4 5

1.63k views • 135 slides

THE ESSENTIALS Camp History and Philosophy Community Partnerships Camp Dates

THE ESSENTIALS Camp History and Philosophy Community Partnerships Camp Dates Campus Locations Camp Policies & Procedures 2018 KIDS FOR CAMP OUR MISSION Autism Pensacolas Kids for Camp is a data- driven program

533 views • 24 slides

Vattenfall and the HYBRIT project 2018-09-13 Mikael Nordlander Confidentiality None

Vattenfall and the HYBRIT project 2018-09-13 Mikael Nordlander Confidentiality None (C1) 1 Fossil free within one generation Confidentiality None (C1) 2 Sweden - a good place to start 98 31 16 TWh/yr % fossil free

654 views • 14 slides

COMPSCI 326 Web Programming React State and Interactivity Objectives Understand React State

COMPSCI 326 Web Programming React State and Interactivity Objectives Understand React State Understand React Interactivity React Props React has a one-way data flow beginning from the top-most component and working its way down through

766 views • 60 slides

P5 Adventure Camp 26 th to 28 th July 2018 Jalan Bahtera OALC 1 Overview Camp Objectives

P5 Adventure Camp 26 th to 28 th July 2018 Jalan Bahtera OALC 1 Overview Camp Objectives Camp Personnel Campsite Facilities & programme Packing List Personal medication Food menu Emergency contact number Safety

1.05k views • 52 slides

Spark Code Camp Discover Spark Streaming & Spark SQL Project Overview Focus on Spark

Spark Code Camp Discover Spark Streaming & Spark SQL Project Overview Focus on Spark Streaming and Spark SQL Explored Streaming API of Apache Spark on Ukko Cluster Window based Stream Content Direct Stream content

221 views • 9 slides

Introduction to 5GCAR, and the role of 5G in automotive industry Mikael Fallgren, Ericsson

Introduction to 5GCAR, and the role of 5G in automotive industry Mikael Fallgren, Ericsson Research June 12 2018, London 5G Communication Automotive Research and innovation Mikael Fallgren 5GCAR Project Coordinator 5G V2X Summer School

493 views • 21 slides

React A JavaScript library for building user interfaces What is React? JavaScript library

React A JavaScript library for building user interfaces What is React? JavaScript library created by Facebook Open source Runs on Node.js and renders in the browser Why use React? Declarative Modular Stateful

380 views • 17 slides

How to Build a React App in Kotlin Dave Ford Questions for audience Kotlin? React?

How to Build a React App in Kotlin Dave Ford Questions for audience Kotlin? React? create-react-app? Kotlin JS? Kotlin builders? kotlinx-html? Why Kotlin-React? Prob #1: 80% of my coding is doing this

436 views • 16 slides

React Native Examples Getting stuff to run Playing with components and props 1 import React, {

React Native Examples Getting stuff to run Playing with components and props 1 import React, { Component } from 'react'; 2 import { AppRegistry, Text, View } from 'react-native'; What if you get an error? 3 4 class Greeting extends Component

324 views • 7 slides

Introduction to React A workshop for COMP 523 Aaron Smith Monday, Feb. 10, 2020 What is React?

Introduction to React A workshop for COMP 523 Aaron Smith Monday, Feb. 10, 2020 What is React? React is a JavaScript framework Used for front end web development Think of jQuery, but more structured Created and used by

1.05k views • 27 slides

2020 Sec 1 L.E.A.D Camp 13 - 16 JANUARY LEADERSHIP BEGINS WITH ME Camp Coordinators 1.

2020 Sec 1 L.E.A.D Camp 13 - 16 JANUARY LEADERSHIP BEGINS WITH ME Camp Coordinators 1. Ms Jessica Yap (Year Head) 2. Mr Damon Chu (Camp Commandant) 3. Mr Alvin Goh (Camp 2IC) * Contacts can be found on camp letter posted on school

543 views • 14 slides

Camp Timber-lee Parent Meeting September 24, 2018 Camp Timber-lee is 88 miles north of

Camp Timber-lee Parent Meeting September 24, 2018 Camp Timber-lee is 88 miles north of Fairview South School Driving time: 1:35 Camp Grounds www.timber-lee.com General Information Students should arrive at Fairview on Monday at 8:45.

535 views • 15 slides

Volterra operators on Banach spaces of analytic functions om, Mikael Lindstr Abo Akademi

Volterra operators on Banach spaces of analytic functions om, Mikael Lindstr Abo Akademi University mikael.lindstrom@abo.fi Poznan, July 2018 Mikael Lindstr om () Volterra operators Poznan, July 2018 1 / 35 Mikael Lindstr om ()

543 views • 37 slides

ReactSA Drupal and React Drupal? History and Background Open Source CMS First release in 2001

23 OCTOBER 2018 ReactSA Drupal and React Drupal? History and Background Open Source CMS First release in 2001 by Dries Buytaert Written in PHP. Runs on LAMP stack. Come for the Code; Stay for the Community. Free as in freedom and free as in

444 views • 15 slides

CS/COE 1520 pitt.edu/~ach54/cs1520 React A terrible introduction to React: class Square

CS/COE 1520 pitt.edu/~ach54/cs1520 React A terrible introduction to React: class Square extends React.Component { ??? render() { return ( <button className="square" onClick={ function() { alert('click'); } ??? }>

781 views • 26 slides

React with Django Walkthrough an example application John Baldwin Django Boston - July 2016

React with Django Walkthrough an example application John Baldwin Django Boston - July 2016 Overview https://github.com/johnbaldwin/timelog_react_django System overview Django API server (code walkthrough) React single page

1.05k views • 7 slides

P5 Adventure Camp 26 th to 28 th July 2018 Jalan Bahtera OALC 1 Experiential Learning Tell me

P5 Adventure Camp 26 th to 28 th July 2018 Jalan Bahtera OALC 1 Experiential Learning Tell me and I forget, teach me and I may remember, involve me and I learn. Benjamin Franklin 2 CAMP THEME: Yes I Can CAMP OBJECTIVES: To

752 views • 38 slides

Webpack and Babel Front-end Developer tools RE: create-react-app To this point, we have been

Webpack and Babel Front-end Developer tools RE: create-react-app To this point, we have been using create-react-app for all of our React workshops and assignments because it easily allows us to develop React applications without the need for

438 views • 12 slides