Smart kurs från Ribomation om

Kurs i Ionic Hybrid-Mobil Appar

Praktiskt inriktad kurs i hur du implementerar hybrid mobil-appar i Ionic, Angular och TypeScript

Det finns stora fördelar med att implementera hybrid-mobil-appar, varav time-to-market är en den största. Genom att programmera i TypeScript/SCSS/HTML, använda plattform plugins och spara data i molnet, samt generera appar för Android, iPhone och WindowsPhone kommer man snabbt till skott och ut på marknaden.

Denna kurs fokuserar på att du snabbt kan komma igång med att utveckla egna hybrid-appar med hjälp av Ionic framework.

Detta får du lära dig på kursen
  • Designa hybrid appar med sliding side-menu eller tabbar
  • Använda plattforms-tjänster, såsom kamera, vibrator, positionering med flera
  • Lagra och hämta data via HTTP REST webbtjänster
  • Lagra och hämta data via Google Firebase
  • Rendera listvyer med ikoner, bilder och formulärelement
Innehåll Expand All

Background and Overview

Overview of the Ionic Framework and its tools

  • Why Ionic was created
  • What is a hybrid mobile app
  • Benefits of going hybrid
  • Ionic architecture
  • What is Cordova and how is it related to Ionic
  • What is Angular and how is it related to Ionic
  • Installation of tools
  • Installation of the framework

A Tour with Ionic

A guided and hands-on tour of creating an Ionic app

  • Using the ionic command-line client
  • Generating an app
  • Directory structure
  • Angular modules
  • Lazy-loading pages
  • Ionic components
  • Ionic icons
  • Page structure and markup
  • Running in the browser
  • Building an app with Cordova
  • Running on an emulator
  • Running on a real device

Brief about TypeScript

Ionic is using TypeScript (instead of plain JavaScript). This chapter provides a brief overview of the most important language features of TypeScript. For a more thorough walkthrough, please see our TypeScript course.

  • What is TypeScript
  • Relation to JS, ES5, ES6
  • Understanding the type support in TS
  • Modules
  • Scalar type types
  • Composite data types
  • ES6 Lambda expressions
  • Functions
  • Classes and member variables and functions
  • Visibility and accessor methods
  • Sub-classes and abstract classes and methods
  • Interfaces
  • Generic classes

Brief about Angular

Ionic is built upon Angular. This chapter provides a brief overview of the most important language of Angular. For a more thorough walkthrough, please see our Angular course.

  • What is Angular
  • What do you need to know
  • Angular artefacts
  • Modules
  • Components
  • Directives
  • HTML templates
  • Mustach operators
  • Attribute input
  • Event output
  • Two-way binding
  • Services
  • Pipes

Pages

How to handle Ionic pages and page navigation

  • Generating lazy-loaded pages
  • How to navigate within an Ionic app
  • The page stack
  • Setting page names
  • Navigating to another page
  • Popping back to a previous page on the stack
  • Using navigation parameters
  • Setting segments
  • Using segment parameters

Lists

How to use the versatile Ionic item list component

  • Basic list
  • Basic item CRUD
  • Dividers and headers
  • Using icons, avatars and thumbnail images
  • Implementing sliding items
  • Using FAB buttons
  • Pull to refresh

Forms and Inputs

Various ways of getting data from the client

  • Text inputs
  • Using lists for inputs
  • Two-way binding
  • Using form-builder
  • Checkboxes and switches
  • Radio buttons
  • Multu-choice controls
  • Sliding controls

Composite Layouts

How to created tabbed apps and apps with sliding side-menus.

  • Understanding application layout
  • Creating a tabbed app
  • Tab navigation
  • Creating an app with a sliding side-menu
  • Understanding the difference of setting the root and pushing a page

Styling and Themes

How to control the app colors and other style settings

  • Understanding CSS
  • Understanding SASS and SCCS directives
  • Ionic standard colors and how to change them
  • The grid system
  • SASS variables
  • Understanding platform styles

Cordova Plugins

Using plugins is the way of accessing the services of the device

  • What is Ionic Native
  • Understanding and using Cordova plugins
  • Using the camera
  • Vibrating the device
  • Accessing contacts
  • Sending emails
  • Retrive the current geo location
  • Showing a geo location on a map

REST Web Services

How to retrieve and show data fetched from REST HTTP web services

  • What is REST WS
  • Using the Angualr http service
  • Fetching data and render as list items
  • Sending data via HTTP POST/PUT

Firebase

Brief description of using Google Firebase with Ionic. For a more thorough walkthrough, please see our Firebase course.

  • What is Firebase
  • Understanding the real-time database
  • Understanding the file storage
  • Understanding user authentication
  • Using AngularFire2
SnabbFakta
Namn
Ionic Hybrid Mobile Apps
Längd
3 dagar
Nivå
Intermediate
Målgrupp
App-utvecklare som vill snabbt komma igång med att bygga hybrid-mobil-appar med hjälp av Ionic.
Förkunskaper
Goda kunskaper i JavaScript/CSS/HTML och viss erfarenhet of applikationsutveckling för mobiltelefon.
Teknisk miljö
  • NodeJS/NPM
  • En editor/IDE, såsom MS Visual Code eller JetBrains WebStorm
  • En modern webbläsare, såsom Google Chrome
  • En Android smartphone, med tillhörande USB kabel
Schemalagd Kurs

Pris

19 000 kr + moms

Vi ger 20% rabatt för tillkommande deltagare från samma företag vid samma kurstillfälle. Läs mer om vår samma-företags-rabatt.

Aktuella KursDatum
StartdatumPlats
2018-02-28Stockholm City
2018-03-26 Stockholm City
Relaterade Kurser
KursLängdNivå
TypeScript2 dagar Intermediate
Angular Web App Development3 dagarIntermediate
Google FireBase2 dagarIntermediate
Android Mobile Apps Dev.4 dagar Intermediate
Företagsintern Kurs

Om du beställer en företagsintern kurs kommer vi till er och håller kursen i era lokaler. Priset bestäms av vår prismodell och baseras på antalet kursdagar, antalet deltagare, samt i förekommande fall resa och logi.

Prisexempel för NN deltagare

PPP + moms

Antal
Område

Läs mer om vår prismodell och beställningsvillkor.