Ionic Coded: To Access Data from Two Pages

Todo List Mobile App Phase I coded in the creator.ionic.io environment.

Instruction of the above by Ionic

There are two pages: Todos and Finished Items.
Todos.js was created to service (to share the data) to the above two pages.

Todos page has a function to access items in Todos.items and only display ‘finished’: false items.

Finished Items page has a function to access items in Todos.items and only display ‘finished’: true items. using Angular directives:

Loops using Angular directive:”ng-repeat item in items” and
display items with “ng-show” if “item.finished==true”.

Advertisements

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

 

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.

ART258: WP Child Themes, AWS, etc.

The process is  detailed at https://www.creativemedia.space/intro-to-cms-via-wordpress/

ChildTheme
Woo Commerce
Github create new project
use  VScode changes on code

Info on AWS from Chris. – I think what they call “serverless” is you don’t have to manage your server, create your database, and authentification, etc. It will be done by AWS (Amazon S3 for static site (html, css, and js stored), Amazon Cognito User Pool for user registration and authentication, Amazon API and Rambda to DB) Amazon provides easier package to do all. It is not serverless, but servers are packaged by Amazon interfaces. That what I think.

 

 

 

ART258&299: Client Server Model, Melissa’s Max2018

Today’s Class

1. How to start coding your final project.
2. Exercise: intall WP site in sub directory.

There are about 5 levels of customization:
  1. Existing theme plus additional CSS codes.
  2. Switch themes
  3. Child theme of and existing parent theme.
  4. Create your own theme using such as UnderScore.
  5. (X) use 3rd party plugins (such as page builder, Site Origin, Elementor/Composer) to extend customize.
ART299 Discussion on Mobile App

Discussion with David E. and Chris G. on Whole Stack 2:20 – 3:30pm

Static Sites and Going Serverless by Chris

David talked about Airtable – spredsheet/database and VueJS – an open-source JavaScript Framework.

Gatsby

Netlify

AngularJS – a JavaScript-based open-source front-end web application framework.

Melissa’s Presentation on MAX2018

http://thesillyme.com/max2018/
Adobe Max 2018 Keynote-Next Generation of Creativity
New XD Features Vid – Hands On

ITS381B: jQuery, JavaScript, etc. Photo into DB

jQuery Learning Center

jQuery Tutorial W3C

jQuery API Documentation 

jQuery Selector Test

Online resources

codeacademy

Campus Travel vid

JaveScript Fundamentals MDN

JavaScript online resources

AngularJS vs jQuery vid

Firebase by Goole.com

creator.ionic.io tutorial videos

How to make a simple chat app using Firebase

Using APIs with $http part1 vid

api vid

ionicframework.com

ionicframework videos

 

 

How to backup your photos on iPhone.

Why ionic?