Who we are
We are a rapid and flexible European
Company that
has developed by following an organic
growth model
and managing its relationship of trust with
its Clients:
large companies and medium-sized
businesses.
We love to innovate and explore the
potential of
new technologies.We are quick to
understand them
and scrupulous in testing them, providing
the highest
standards of reliability to our Clients.
Company organization
Processes Core Competencies
Consultancy Services
System integration
Technology Hub
Data
Service
s
IoT
AR-VR
Digital
Chann
el
IT
Service
s
Multimedia Services
Rehost
ing
Streaming
VOD & Live
Digital
Signage
Events &
Museum
Vertical
Market
Horizontal
Market
CWS competencies are build on business processes, applications, customer
experiences and technology innovation all meshed up to create a pervasive
integration matrix of add value.
Research&Innovation
Smart City: what does it
means?Planet Idea’s approach is
broad and
multidisciplinary
SCIENTIFIC
APPROACH
4competence areas
TRANSVERSAL
360° approach to the
smart city market
Intervention scales:
S - Smart building
M - Smart Square
L - Smart District
An example of Smart City
concepts
Planet Idea, part of
Planet Holding, is building the first smart
city in greenfield incorporating social
housing in Croatà, NE of Brazil
330
ha
5.000
houses
2.600
Houses for Social Housing (MCMV)
2.400
Houses for the free market
25.000
Inhabitants
http://smartcitylaguna.com.br
The first smart city with social
housing
i.e.THE OVERALLASSETVALUE IS INCREASED
+ High visibility
+ Increased
sales’ speed
Bringing value to the real
estate operation
Nº houses
1.000
Cost as a percentage of
the building cost 2%
Northen Italy - Functions: Housing, Social Housing, Retail and
Innovative housing services
Nº habitants
2.500
free Wi-fi
optic fiber
bike sharing
fitness area
beacon
pop up market
car sharing
fun theory
library of things
bookcrossing
storytelling corner
security cameras
info interactive
totem
orti urbani
playful equipment that
produces energy
solar bricks
use of native plantsmowing
automation
universal accessibility
building automation
APP: time bank
sustainable
construction site
car pooling
landscaping during
construction
co-working space
smart lighting
smart irrigation
system
neighborhood app
intelligent waste
bin
electric car sharing
smart metering of
electrical consumption
photovoltaic
panels
potable water
distribution
high-quality street
furniture for everyone
responsive bench
outdoor cinema
power generating
bumps
virtual dashboard
SOS columns
Example of a greenfield
project
21 greenfield project in the
pipeline
Argentina, Brazil,Colombia, Italy, Kenya, UAE
IOT
HUB
CATALOG SIMPLE
AGGREGATION
AZURE FUNCTIONS
APP
EXTERNAL
REPOSITORY STREAM
ANALYTICS
COOL
DATA
APP
SERVICE
HOT DATA
AGGREGA
TION
API
DATA
ENRICHMENT
Architectural scheme
COSMOS
DB
Architectural description
- Devices’ data are collected in different ways, depending on the
device supported protocol. Information are send to anAzure Iot Hub:
- Directly by the devices their self.
- By a field gateway (implemented by services of Azure Service Fabric) that listens to a MQTT
server where devices send the messages.- Calling external API via http(s).
- Message are queried from the Azure Iot Hub by Azure Stream Analytics, processed by
Azure Functions and subsequently stored to the Cosmos db (nosql db using MongoDbAPI).
- Cold data will be saved in Azure Blob.
- Data are aggregated by temporal frames (hour, day, month, year) byWeb Jobs hosted onApp Service.
- Aggregations are stored to the suitable db to be queried.
- Registers of information for devices, location and year aggregation are stored in a Sql Server Azure
(for perfomance and cost reason).- API are exposed to query data and to set up devices (thermostat)
and deployed into the App service. Mobile and web app can use these services for user experience.
Backend App: Server
architectureCosmosDb
SQL Database
Service
Web and Mobile App
Web App architecture
Postgres DB Laravel
Oauth
2.0
React
aws sms
Azure Blob
Db architecture
Mobile App architecture
App
Redux
(Store)
ConnectionTo
React Native (View)
Servic
e
Action &
Action Creator
Retur
n
Reduc
er
Store
Updat
es
Select
or
Exposed
By
Map State to Props
Container
(View)
Updat
es
Used
By
Trigge
rs
Props
Templa
te
Event
s
Build
STOP WITH ARCHITECTURE, PLEASE
React Native
What is it React Native
 Framework created by Facebook
for mobile applications on native
platforms
 IOS and Android
 Based on Javascript
 React components and UI
Native components
 JSX syntax
Who’s using it
React Native vs ReactJS
ReactJS
 Javascript library
 Web applications
 HTML to render the
app (ex. <div />)
 CSS
 Animations
 React-router for
navigation
React Native
 Framework
 Mobile applications
 Components (ex <View
/>)
 Inline style and
Stylesheet
 Animated API
 <Navigator /> component
How could we test our code?
Expo XDE :The fastest way to
build an app
3. Start building your React
Native project
2. Scan the QR Code or Share
the link
1. npm install exp --
global
What is it?
npm is the world’s largest software registry. Open
source developers from every continent use npm
to share and borrow packages, and many
organizations use npm to manage private
development as well.
What can he do?
 Adapt packages of code for your apps, or incorporate
packages as they are.
 Download standalone tools you can use right away.
 Run packages without downloading using npx.
 Share code with any npm user, anywhere.
 Restrict code to specific developers.
 Create Orgs (organizations) to coordinate package
maintenance, coding, and developers.
 Form virtual teams by using Orgs.
 Manage multiple versions of code and code
dependencies.
 Update applications easily when underlying code is
updated.
 Discover multiple ways to solve the same puzzle.
 Find other developers who are working on similar
problems and projects.
npm
With npm we can share our personal
modules between web and mobile
projects
Redux as npm module
MANY THANKS!

React Native e IoT - Un progetto complesso

  • 2.
    Who we are Weare a rapid and flexible European Company that has developed by following an organic growth model and managing its relationship of trust with its Clients: large companies and medium-sized businesses. We love to innovate and explore the potential of new technologies.We are quick to understand them and scrupulous in testing them, providing the highest standards of reliability to our Clients.
  • 3.
    Company organization Processes CoreCompetencies Consultancy Services System integration Technology Hub Data Service s IoT AR-VR Digital Chann el IT Service s Multimedia Services Rehost ing Streaming VOD & Live Digital Signage Events & Museum Vertical Market Horizontal Market CWS competencies are build on business processes, applications, customer experiences and technology innovation all meshed up to create a pervasive integration matrix of add value. Research&Innovation
  • 4.
    Smart City: whatdoes it means?Planet Idea’s approach is broad and multidisciplinary SCIENTIFIC APPROACH 4competence areas TRANSVERSAL 360° approach to the smart city market Intervention scales: S - Smart building M - Smart Square L - Smart District
  • 5.
    An example ofSmart City concepts
  • 6.
    Planet Idea, partof Planet Holding, is building the first smart city in greenfield incorporating social housing in Croatà, NE of Brazil 330 ha 5.000 houses 2.600 Houses for Social Housing (MCMV) 2.400 Houses for the free market 25.000 Inhabitants http://smartcitylaguna.com.br The first smart city with social housing
  • 7.
    i.e.THE OVERALLASSETVALUE ISINCREASED + High visibility + Increased sales’ speed Bringing value to the real estate operation
  • 8.
    Nº houses 1.000 Cost asa percentage of the building cost 2% Northen Italy - Functions: Housing, Social Housing, Retail and Innovative housing services Nº habitants 2.500 free Wi-fi optic fiber bike sharing fitness area beacon pop up market car sharing fun theory library of things bookcrossing storytelling corner security cameras info interactive totem orti urbani playful equipment that produces energy solar bricks use of native plantsmowing automation universal accessibility building automation APP: time bank sustainable construction site car pooling landscaping during construction co-working space smart lighting smart irrigation system neighborhood app intelligent waste bin electric car sharing smart metering of electrical consumption photovoltaic panels potable water distribution high-quality street furniture for everyone responsive bench outdoor cinema power generating bumps virtual dashboard SOS columns Example of a greenfield project
  • 9.
    21 greenfield projectin the pipeline Argentina, Brazil,Colombia, Italy, Kenya, UAE
  • 10.
    IOT HUB CATALOG SIMPLE AGGREGATION AZURE FUNCTIONS APP EXTERNAL REPOSITORYSTREAM ANALYTICS COOL DATA APP SERVICE HOT DATA AGGREGA TION API DATA ENRICHMENT Architectural scheme COSMOS DB
  • 11.
    Architectural description - Devices’data are collected in different ways, depending on the device supported protocol. Information are send to anAzure Iot Hub: - Directly by the devices their self. - By a field gateway (implemented by services of Azure Service Fabric) that listens to a MQTT server where devices send the messages.- Calling external API via http(s). - Message are queried from the Azure Iot Hub by Azure Stream Analytics, processed by Azure Functions and subsequently stored to the Cosmos db (nosql db using MongoDbAPI). - Cold data will be saved in Azure Blob. - Data are aggregated by temporal frames (hour, day, month, year) byWeb Jobs hosted onApp Service. - Aggregations are stored to the suitable db to be queried. - Registers of information for devices, location and year aggregation are stored in a Sql Server Azure (for perfomance and cost reason).- API are exposed to query data and to set up devices (thermostat) and deployed into the App service. Mobile and web app can use these services for user experience.
  • 12.
    Backend App: Server architectureCosmosDb SQLDatabase Service Web and Mobile App
  • 13.
    Web App architecture PostgresDB Laravel Oauth 2.0 React aws sms Azure Blob
  • 14.
  • 15.
    Mobile App architecture App Redux (Store) ConnectionTo ReactNative (View) Servic e Action & Action Creator Retur n Reduc er Store Updat es Select or Exposed By Map State to Props Container (View) Updat es Used By Trigge rs Props Templa te Event s Build
  • 16.
  • 17.
    React Native What isit React Native  Framework created by Facebook for mobile applications on native platforms  IOS and Android  Based on Javascript  React components and UI Native components  JSX syntax Who’s using it
  • 18.
    React Native vsReactJS ReactJS  Javascript library  Web applications  HTML to render the app (ex. <div />)  CSS  Animations  React-router for navigation React Native  Framework  Mobile applications  Components (ex <View />)  Inline style and Stylesheet  Animated API  <Navigator /> component
  • 19.
    How could wetest our code? Expo XDE :The fastest way to build an app 3. Start building your React Native project 2. Scan the QR Code or Share the link 1. npm install exp -- global
  • 20.
    What is it? npmis the world’s largest software registry. Open source developers from every continent use npm to share and borrow packages, and many organizations use npm to manage private development as well. What can he do?  Adapt packages of code for your apps, or incorporate packages as they are.  Download standalone tools you can use right away.  Run packages without downloading using npx.  Share code with any npm user, anywhere.  Restrict code to specific developers.  Create Orgs (organizations) to coordinate package maintenance, coding, and developers.  Form virtual teams by using Orgs.  Manage multiple versions of code and code dependencies.  Update applications easily when underlying code is updated.  Discover multiple ways to solve the same puzzle.  Find other developers who are working on similar problems and projects. npm
  • 21.
    With npm wecan share our personal modules between web and mobile projects Redux as npm module
  • 22.

Editor's Notes

  • #12 Devices’ data are collected in different ways, depending on the device supported protocol. Information are send to an Azure Iot Hub :