ITS381B: Deep Dive to Ionic Creator Instruction to use Firebase.google.com

GoogleFirebase

For example an application such as chat room, binds an Angular view is bind to a Firebase backend, synchronizing a list of messages between the DOM, Angular, and Firebase in realtime.

How to use Firebase

Login to firebase.google.com, create project.

Project overview (upper-left)-> project setting.

Click the pink </> button which says “Add firebase to your web app.”

Then the window below opens.

Database -> indicate there are “Cloud Firestore” and “Realtime database”.

You need to select “Realtime database”.

Then set both value ‘true’ in order to use the db.

Todos App the code:

Question:

finished video 1 and 2 of Ionic

How to Design (UI, UX, Aesthetics, Underlying Mechanizms-Front and Back Architecture in Consideration)

Follow https://docs.usecreator.com/docs/custom-code-editing

  1. Custom themes
  2. Mockup design + layout
  3. List backed Angular service -integrate firebase
  4. Route parameters

finished video 1 : Simple app

video 2 : T-shirt order app

Follow https://docs.usecreator.com/docs/custom-code-editing

Firebase/AngularFire Installation and Use

Goto firebase.google.com -> docs-> libralies -> angularfire

copy the path of firebase and angularfire.

github.com/firebase/Angularfire – has all library functions to populate data to user managements.

Firebase/AngularFire Guide for documentation.

To install required script files:

<!-- Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>

<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/3.6.6/firebase.js"></script>

<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script>

To initialize database

ionic Modal open

 

Advertisements

Mobile App: a few Data samples

id  photo  date & time  location  levels

 

Jul 19, 2018 DB L3-6 @21.28539, -157.83808
ManoaMarketPlace_Sep07, 2018 L3-6 @21°18’30.2″N 157°48’39.0″W

 

Aina Haina 9/28/18 L6 @21.278,-157.7552051

Mobile App: Design Principle from Paul Dourish

Design Principles:

  1. Computation is a medium.
  2. Meaning arises on multiple levels.
  3. Users, not designers, create and communicate meaning.
  4. Users, not designers, manage coupling.
  5. Embodied technologies participate in the world they represent.
  6. Embodied interaction turns action into meaning.

 

Not Related to Mobile App

New Bauhaus – American School of Design -> IIT Institute of Design

Josef Müller-Brockmann – international Typographic Style = Swiss Style

Ludwig Mies van der Rohe- Modernist Archtecture, ITS and Bauhaus?

ART299: Mobile App Spec. Updated from Nov 2

Design of Mobile App

-Brief on The Process-
  1. Conceptualization

What are the objectives of the EMF mobile app?

The primary objective is to inform the levels of EMF of each location in Honolulu to raise the awareness of environmental EMF in our daily life visible to people.
The secondly objective is learn to create a mobile app to understand workings of front-end and back-end programming.

One of the model for the primary objective is the case of  safecast.org where people learn and actively performing the scientific activities of building tools to measuring radiation levels.

  1. Underlying Theoretical Frame

My thoughts on “Meaning emerges in relations to other (objects etc.)”.
Theoretical Frame (P. Dourish’s Context and Social Settings)
“‘Context’ has entered the realm of computational design”
“‘Context’ arises from the activity (Dourish, 2004)

  1. Who are the potential users?

Concerned parents for their children’s exposure. EMF sensitive individuals. Someone who is seeking information on EMF. People who does not know anything about EMF.

  1. Feeling & Atmosphere of the site

Neutral, trustworthy, approachable, and informative, and users feel like they want to come back for new information. Open data of EMF levels of people’s environment.

  1. Identity – Logo, Color, Typeface
  1. Development
    • PhaseI – A stable map with pointers which is clickable. If the pointer is clicked it will display a photo indicating the EMF level. Lower half of the page is a linked list of locations with thumb nail photos.
    • PhaseII – PhaseI + map is pinch and spread to move around the map.
    • PhaseIII – PhaseII + a user login and photo uploading capabilities  from mobile phones. The photo with EMF reading is stored in the database with date and location stamp.
    • PhaseIV – PhaseIII + registration to friendly users who can login and upload Acousticom 2 photos. That is multiple users loading information on db.
    • PhaseV – Acousticom 2 directly access to load necessary information to DB directly. (Acousticom 2 must have an output which would connect to some device  that connect to Internet.)

Dourish, P. (2004). What we talk about when we talk about context. Personal and Ubiquitous Computing, Volume 8 (1), pp. 19-30.

ITS381B-experimental: Watching Vid of 8/27 Class 2

ITS381B 8/27 Class Video

Video

  • how to add custom font (google fonts),
  • how to change width and the color of the button,
  • how to override the ionic scss variables.

select font and copy @media url and past it to scss by clicking to scss nav, and set .class_typeface_name {font-family: typeface_name;} then click the save button and get out from the pop-out by clicking ✕.