Ionic Creator using Route Parameter Feature Mobile App Phase II

Mobile App Phase II using Routeparam
on Web it works, but it does not work on creator.ionic.io. I fixed URL /page3 /page4 to /todos and /finished respectively, and started to work both on creator and on cloud.

Fixed Phase II using Routeparam

Advertisements

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

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

 

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

Art258 How HTTP, Browser, and WordPress work

On Open Source movement.

Opensorce.com 19 years later the cathedral & the bazaar

How by Eric S Raymond

The Cathedral & the Bazaar: Musings on Linux and Open Source by an Accidental Revolutionary by Eric S. Raymond Review by a student? Research on the topic.

 

Non related podcast by Naval Ravikant

Service Workers: there is cache section somewhere in the middle

CSS Trics:Flexbox

CSS Media Query

CSS Animation

Chris page

ITS381: TodoListApp html, js, and css files for exercise

How to test the following using CodePen.io?

The following files are copied from the angularjs.org website

index.html file<pre>

<!doctype html>
<html ng-app=”todoApp”>
<head>
https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js
http://todo.js
<link rel=”stylesheet” href=”todo.css”>
</head>
<body>
<h2>Todo</h2>

{{todoList.remaining()}} of {{todoList.todos.length}} remaining
[ archive ]
{{todo.text}}

</body>
</html>

</pre>

todo.js file<pre>

angular.module(‘todoApp’, [])
.controller(‘TodoListController’, function() {
var todoList = this;
todoList.todos = [
{text:’learn AngularJS’, done:true},
{text:’build an AngularJS app’, done:false}];

todoList.addTodo = function() {
todoList.todos.push({text:todoList.todoText, done:false});
todoList.todoText = ”;
};

todoList.remaining = function() {
var count = 0;
angular.forEach(todoList.todos, function(todo) {
count += todo.done ? 0 : 1;
});
return count;
};

todoList.archive = function() {
var oldTodos = todoList.todos;
todoList.todos = [];
angular.forEach(oldTodos, function(todo) {
if (!todo.done) todoList.todos.push(todo);
});
};
});

</pre>

todo.css file <pre>

.done-true {
text-decoration: line-through;
color: grey;
}

</pre>

ITS381B-experimental: Watching Vid of 8/20 Class 1

What was covered in Class 1 Video – What is where.

Laulima loging -> Membership -> ITS381B -> Resources ->

Laulima loging -> Membership -> ITS381B -> Assignments ->

Assignment 1
Assignment 2
  • Link to vids
Assignment 3
  • Campus travel App
Other sites:
  • secdir.com – list of Dr. Halverson’s mobile app projects: Elected, Places, Campus Travel.
Procedure
  • Step 1
  • Step 2
  • Step 3 – export your Mobile App from Ionic Creator to your website. Click Creator right top corner cloud icon to export your app i.e. download the zipped folder to your desktop etc.
  • Step 4 -upload to your app folder to your website server.
  • Login to your website. The instructor uses CPanel, I use Bluehost. I may use github pages, https://pages.github.com/. Then, upload to your app folder to your website server and then extract the zip. It has img, lib, template, index.html, and zip. In templates folder there are two files: details.html and places.html. Then edit the places.html page to insert angular directives(1:35). Look for <button>Where am I.</button> and insert “ng-click=readGeolocation()” <button …. ng-click= readGeolocation()></button> as instructed on “places” website. Go back to creator and right-side panel “angular directives” insert “ng-click” and “readGeolocation()”
  • Step 5: Add Routs – Go to js/routes.js folder, and edit.
  • Step 7: Add Services – Add controller code for place and pages.
  • Save the code by clicking top-left corner ✓.