In questo workshop abbiamo visto le best practices per l'uso di React Native, come l'organizzazione di file e cartelle e la comunicazione con i servizi di back-end, nel contesto di un progetto reale come Planet App per la gestione IoT del quartiere.

2. 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.

3. 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

4. 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

5. An example of Smart City
concepts

6. 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

7. i.e.THE OVERALLASSETVALUE IS INCREASED
+ High visibility
+ Increased
sales’ speed
Bringing value to the real
estate operation

8. 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

9. 21 greenfield project in the
pipeline
Argentina, Brazil,Colombia, Italy, Kenya, UAE

10. 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

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
SQL Database
Service
Web and Mobile App

13. Web App architecture
Postgres DB Laravel
Oauth
2.0
React
aws sms
Azure Blob

14. Db architecture

15. 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

16. STOP WITH ARCHITECTURE, PLEASE

17. 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

18. 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

19. 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

20. 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

21. With npm we can share our personal
modules between web and mobile
projects
Redux as npm module

22. MANY THANKS!