Introduktion till React.js och React Native

Lektionsinstruktioner Torsdag 2020-01-16 TE18IM

Mål med lektionerna: Lära dig om vad React.js och React Native är genom att läsa om det på nedan länkade sidor, samt svara på frågorna.

Förslag på källor där du kan börja läsa och hitta svar på dagens frågor: 

Läs guiden till React på http://www.react.express/ 

13.00-14.00 Webbutveckling Sal 1

14.05-15.25 Programmering Sal 1

Frågor att svara på under dagens två lektionspass:
1. Vad är React.js?
2. Vad är React Native?
3. Varför ska man använda dem och i vilken situation använder man React Native istället för React.js?
4. Vad är ett JavaScript Bibliotek (library)?
5. Vad är ett JavaScript Ramverk (Framework)?
6. Vad är skillnaden mellan ett bibliotek och ett ramverk? Läs t ex Libraries vs Frameworks: https://medium.com/datafire-io/libraries-vs-frameworks-626cdde799a7
7. Vad menas med uttrycket “Vanilla JavaScript”?
8. Vad är npm och vad används det till?
9. Vad är Expo och varför kan det vara bra att använda det när du ska utveckla en mobilapp?
10. Ge exempel på en mobilapp som du skulle vilja lära dig att utveckla. Vad skulle den ha för funktion och varför skulle du vilja utveckla den?

Ladda ner och installera create-react-app

Ladda ner och installera Expo (finns mer info på sidan Bygg mobilappar med JavaScript och React Native)

Bygg mobilappar med JavaScript och React Native

Bygg mobilappar med JavaScript och React Native

React Native låter dig bygga mobilappar med bara JavaScript. Den använder samma design som React, så att du kan komponera ett riktigt mobilt användargränssnitt från deklarativa komponenter.

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class WhyReactNativeIsSoGreat extends Component {
  render() {
    return (
      <View>
        <Text>
          If you like React on the web, you'll like React Native.
        </Text>
        <Text>
          You just use native components like 'View' and 'Text',
          instead of web components like 'div' and 'span'.
        </Text>
      </View>
    );
  }
}

En React Native-app är en riktig mobilapp

Med React Native bygger du inte en ”mobil webbapp”, en ”HTML5-app” eller en ”hybrid-app”. Du bygger en riktig mobilapp som inte kan skiljas från en app byggd med Objekt-C eller Java. React Native använder samma grundläggande UI-byggstenar som vanliga iOS- och Android-appar. Du sätter bara ihop de byggstenarna med JavaScript och React.

import React, { Component } from 'react';
import { Image, ScrollView, Text } from 'react-native';

class AwkwardScrollingImageWithText extends Component {
  render() {
    return (
      <ScrollView>
        <Image
          source={{uri: 'https://i.chzbgr.com/full/7345954048/h7E2C65F9/'}}
          style={{width: 320, height:180}}
        />
        <Text>
          On iOS, a React Native ScrollView uses a native UIScrollView.
          On Android, it uses a native ScrollView.

          On iOS, a React Native Image uses a native UIImageView.
          On Android, it uses a native ImageView.

          React Native wraps the fundamental native components, giving you
          the performance of a native app, plus the clean design of React.
        </Text>
      </ScrollView>
    );
  }
}

Slösa inte tid med att kompilera om

Med React Native kan du bygga din app snabbare. Istället för att kompilera om kan du ladda om din app direkt. Med Hot Reloading kan du till och med köra ny kod medan du behåller ditt applikationsläge.

Använd ”native code” när du behöver

React Native kombineras smidigt med komponenter skrivna i Objekt-C, Java eller Swift. Det är enkelt att lägga in direkt körbar kod (anpassad för det specifika operativsystemet och hårdvaran) om du behöver optimera några aspekter av din applikation. Det är också lätt att bygga en del av din app i React Native och en annan del av din app med direkt körbar kod – det är så Facebook-appen fungerar.

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { TheGreatestComponentInTheWorld } from './your-native-code';

class SomethingFast extends Component {
  render() {
    return (
      <View>
        <TheGreatestComponentInTheWorld />
        <Text>
          TheGreatestComponentInTheWorld could use native Objective-C,
          Java, or Swift - the product development process is the same.
        </Text>
      </View>
    );
  }
}

Läs mer och kom igång på https://react-native.org/ eller https://github.com/facebook/react-native
Online-kurser: http://www.reactnative.com/courses/

Ett tips är att använda Expo som utvecklingsmiljö.
Det är det snabbaste sättet att bygga en riktigt bra app med tillgång till enhetens funktioner som kamera, plats, aviseringar, sensorer, haptik och mycket mer, allt med universella API: er.
Här är en lista på tutorials och exempelkod för olika appar med React Native och Expo från Expos blog:

A list of the examples and tutorials published on the Expo blog (last updated January 09, 2019).

Thanks to our talented and prolific developer community, we’ve been able to highlight a bunch of great examples and tutorials on our Expo blog. Here’s a running collection, grouped by type.

Examples (with code)

Tutorials

Sections:

  • Project & development process
  • Function-specific
  • Learn by re-creating
  • General

Project & development process

Function-specific

Learn by re-creating

General

  • Building a React Native App using Expo and Typescript (Part 1 / Part 2)
  • Building a code editor with Monaco
  • 13 recipes from building four React Native apps with Expo, including:
    ◦ Geolocation nearby search in React Native
    ◦ Uploading assets directly from React Native to Firebase Storage
    ◦ “I just need a button”, handling common user interactions
    ◦ Straightforward Animated
    ◦ Using your own custom vector icons
    ◦ Analytics, crashlytics and ads
    ◦ Do your self a favor, aggregate third-party packages
    ◦ Coloring Lottie animations
    ◦ Geolocation permissions, the cross-platform way
    ◦ Smooth animations with setNativeProps where appropriate
    ◦ RTL layouts without I18nManager
    ◦ Fixing strange paddings in view layouts
    ◦ infoPlist your permissions (your app will be rejected otherwise)
Drönare för undervisning

Drönare för undervisning

På denna sida hittar du en lista på de drönare IKT-Labbet har för användning i undervisning. För mer information gällande respektive modell finns länkar till andra sidor eller så är det bara att Googla eller söka efter informationsfilmer på Youtube.

DJI Spark

DJI Spark

DJI Spark drönare är liten nog för att startas från din handflata och levererar en exceptionell bild och videoinspelning. Drönaren är utrustad med en kamera med 1/2.3” sensor som spelar in Full HD 1080p videos vid 30 fps eller 12 MP stillbilder.

Produktegenskaper

  • Spela in video i Full HD 1080p
  • Upp till 2km räckvidd
  • Hastighet upp till 50km/h
  • 16 minuters flygtid på en laddning
  • 2-axlad gimbal
  • 12 Megapixels stillbilder

Ryze Tello Powered By Dji Drönare

Ryze Tello Powered by DJI

Lättflugen drönare med kamera

  • Styrs direkt med mobilen
  • Kan programmeras
  • Gör tricks i luften

Självstabiliserande och lättflugen nybörjardrönare. Styrs på mobilskärmen med Ryze-appen där också bilden från drönaren visas. Kan användas med trådlös handkontroll, starta och landa i handen och har sensorer för kollisionsfri flygning.

Designa adaptiva intelligenta användargränssnitt

Designa adaptiva intelligenta användargränssnitt

Vad händer om du kan förutsäga användarnas beteende med smarta användargränssnitt? Med sannolikhetsstyrda statecharts, beslutsträd (decision trees), förstärkt inlärning (reinforcement learning) och mer, kan UI:s (User Interfaces) utvecklas på ett sådant sätt att de automatiskt anpassar sig till användarens beteende.

I filmklippet nedan kommer du få se hur du kan skapa anpassningsbara och intelligenta användargränssnitt som lär sig hur individuella användare använder dina appar och anpassar gränssnittet och funktionerna just för dem i realtid.

Mind Reading with Intelligent & Adaptive UIs (23:11)

Model driven development
Machine Learning för webben

Machine Learning för webben

Med TensorFlow.js kan du snabbt och enkelt skapa webbapplikationer som använder Artificiell Intelligens (AI) och Machine Learning (ML) med ett fåtal rader JavaScript-kod.
Det finns en hel del färdigbyggda och förtränade ML-modeller med JavaScript API:er som du kan använda direkt för tillämpningar som t ex:
Image Classification
Image Segmentation
Object Detection
Pose Detection
Speech Commands
Text Classifications
Augmented Reality
Gesture-based interaction
Speech recognition
Accessible web apps
Sentiment analysis, abuse detection
Conversational AI
Web page optimization
m.m.

Machine Learning magic for your web application with TensorFlow.js (Chrome Dev Summit 2019) 8:30






Learn more: TensorFlow.js → https://goo.gle/2XLhMe0 Tensorflow.js Github → https://goo.gle/2DcgLCe#ChromeDevSummit All Sessions → https://goo.gle/CDS19

Hur går det med programmeringen i skolan?

Hur går det med programmeringen i skolan?

13 sep 2019 21:24

I somras hörde en journalist från UR av sig med frågor gällande programmering i skolan. En vecka i början av september fick jag och mina elever på Getingeskolan ett trevligt besök under en tekniklektion. I bifogad länk nedan går det nu i efterhand att lyssna på radioprogrammet.

Programmering i JavaScript på tekniklektion med årskurs 6 på Getingeskolan.

I reportaget finns en hel del bra tips till lärare, skolledare och huvudmän!

Skolministeriet : Hur går det med programmeringen?

SkolministerietAvsnitt 22 av 37 · Säsong 13 · 28 min
Ladda ner

Har lärarna hunnit lära sig det de ska lära ut?

Sedan hösten 2018 ska alla skolor undervisa i programmering. Inför omställningen fanns en oro att skolorna inte skulle hinna med att fortbilda sina lärare. Det fanns också en osäkerhet kring hur undervisningen i programmering egentligen skulle gå till. Så hur ser det ut ett år efter införandet av programmering på schemat?
Vad är det eleverna får? Och har lärarna hunnit lära sig det de ska lära ut?

https://urplay.se/program/212786-skolministeriet-hur-gar-det-med-programmeringen