Installing MSP DevTools (Magento DevTools by MageSpecialist)

ref: http://www.magespecialist.it/blog/2016/08/11/magento-devtools-available-helping-magento-developers-all-around-the-world/
https://github.com/magespecialist/mage-chrome-toolbar#installing-on-magento-2

  1. Install the chrome extension here: https://chrome.google.com/webstore/detail/magespecialist-devtools-f/odbnbnenehdodpnebgldhhmicbnlmapj?authuser=3
  2. From your CLI run: composer require msp/devtools  –> IT TAKE A LONG TIME BUT I DON’T KNOW WHY
  3. Flush your cache.

     
  4. Turn OFF Full Page Cache (FPC) while you are using DevTools.
    System -> Cache Management -> Check ‘Page Cache’ -> Dropdown select ‘Disable’ -> Click ‘Submit’
    OR YOU CAN DO IT MANUALLY BY MODIFYING /app/etc/env.php IN ‘cache_types’ SECTION THEN SET ‘full_page’ TO 0:

     
  5. Enable MSP_Common and MSP_DevTools modules:
  6. Upgrade database data & schema:

     
  7. Open Magento backend and go to Stores > Settings > Configuration > MageSpecialist > DevTools -> Enable ‘Yes’, IP list: 0.0.0.0/0
  8.  Enabling profiler feature on Magento 2:If you wish to enable the profiler feature you need to set the MAGE_PROFILER server variable to MSP\DevTools\Profiler\Driver\Standard\Output\DevTools. You can do it in several ways:Editing index.php:Add the following line at the very beginning on index.php and pub/index.php file:

     

    Editing .htaccess file

    Add the following line to your .htaccess file (at the bottom is okay):

     

    THEN YOU CAN SEE THE profilers in the chrome developer tools -> magento tab -> profiler tab

  9. Enabling SQL Queries profiler:
    YOU CAN DO IT MANUALLY BY MODIFYING /app/etc/env.php IN ‘db’ -> ‘connection’ -> ‘default’ SECTION THEN ADD ‘profiler’ TO 1:

     

    THEN YOU CAN SEE THE SQL queries in the chrome developer tools -> magento tab -> queries tab.
    Here are some screens how this tool in action:
    General tabDesign tabObservers tabBlocks tabUI tabProfiler tabPlugins tabQueries tabInspect element and the magento element

Magento 2 Module Development

Ref: https://www.mageplaza.com/magento-2-module-development/

The module is a directory that contains blocks, controllers, models, helper, etc – that are related to a specific business feature. In Magento 2, modules will be live in app/code directory of a Magento installation, with this format: app/code/<Vendor>/<ModuleName>. I use Magento 2.1.5 CE. Here is the installation steps.

Create Hello World module for Magento 2

Step 1: Create a directory for the module like above format.
Here I use Advcha as a Vendor name and HelloWorld as a ModuleName.
So create a directory: app/code/Advcha/HelloWorld.

Step 2: Declare module by using configuration file module.xml
Create a new file module.xml in app/code/Advcha/HelloWorld/etc/ directory. Here is the full path: app/code/Advcha/HelloWorld/etc/module.xml
Here is the file content:

Here I register a module with name Advcha_HelloWorld and the version is 1.0.0.

Step 3: Register module by registration.php
Magento 2 module must be registered in the Magento system through the magento ComponentRegistrar class. This file will be placed in module root directory. Create a new file registration.php (beware the file name case-sensitive, it must be registration.php NOT Registration.php) in app/code/Advcha/HelloWorld/ directory. Here is the full path: app/code/Advcha/HelloWorld/registration.php
Here is the file content:

Step 4: Enable the module
Before enable the module, we must check to make sure Magento has recognize our module or not by enter the following at the command line: php bin/magento module:status

Run this command php bin/magento module:enable Advcha_HelloWorld to enable it:

Magento require to check and upgrade module database. We need to run this command php bin/magento setup:upgrade.

Now you can check under Stores -> Configuration -> Advanced -> Advanced that the module is present.Step 5: Create a Routers for the module.
A request URL has the following format:

NOTE: Here I replaced <router_name> to <router_id> after I read this article Magento 2: Advanced Routing.
“The id identifies the route node uniquely in the Magento system, and the frontName defines the first segment of your URL.”
At first I thought it was <router_name> before I found the article. But I confused because this tutorial is working even if I didn’t change the id from ‘advcha’ to ‘helloworld.??? So the url would be http://magentoce215.dev/helloworld/*
In this module, we need to create a route for frontend area. So we need to add this file: app/code/Advcha/HelloWorld/etc/frontend/routes.xml.
Here is the content:

After define the route, the URL path to our module will be: http://magentoce215.dev/helloworld/*
So our <router_name> is helloworld ???

Step 6: Create controller and action.
we will create controller and action to display ‘Hello World’. Our <controller_name> would be index and <action_name> would be display. We need to create a new php file: app/code/Advcha/HelloWorld/Controller/Index/Display.php
Here is the file content:

Now we can open the url to show ‘Hello World!’ from our module: http://magentoce215.dev/helloworld/index/display
Note: If there is no change, please flush the cache with this command: php bin/magento cache:flush.

Step 7: Add to github.
It’s a good way to store also our code in github. Here is how to  do it:
Exit from ‘www-data’ user then Go into /app/code/Advcha/HelloWorld/ directory:

Initialize with git init:

Go into your github account and create a new repository. I created a new repo ‘magento2-sample-module’ (https://github.com/advcha/magento2-sample-module). Then use git remote add origin https://github.com/advcha/magento2-sample-module.git and git push -u origin master to update the remote reposity.

Then we can use git add command to prepare our files or use git GUI to make it easier. I use gitcola. First, stage the files, then commit and push. Done!

Create Controllers in Magento 2
ref: https://www.mageplaza.com/magento-2-module-development/how-to-create-controllers-magento-2.html
In Magento 2 Controller has one or more files in Controller folder of module, it includes actions of class which contain execute() method. There are 2 different controllers, they are frontend controller and backend controller. They are generally similar of workflow, but admin controller is a little different. There is a checking permission method in admin controller.
Here for the first step, we follow the same step as above like create routes.xml in /app/Advcha/HelloWorld/etc/frontend/ directory. But we change the id to ‘helloworld’.

Then create controller file Index.php in /app/Advcha/HelloWorld/Controller/Index/ directory.

All controller must extend from \Magento\Framework\App\Action\Action class which has dispatched method which will call execute method in action class. In this execute() method, we will write all of our controller logic and will return response for the request.
Then create layout file helloworld_index_index.xml in /app/Advcha/HelloWorld/view/frontend/layout/ directory. the layout filename has a pattern <router_name>_<controller_name>_<action_name>.xml. Therefore <router_name> is helloworld, <controller_name> is index and <action_name> is index (the classname). The Frontend layout always in /view/frontend/layout/ directory.

For the blockAdvcha\HelloWorld\Block\Index\Index“, create a new file Index.php. The full path is in /app/code/Advcha/HelloWorld/Block/Index/Index.php.

For the template is “Advcha_HelloWorld::index/index.phtml“. The full path is in /app/code/Advcha/HelloWorld/view/frontend/templates/index/index.phtml. The Frontend template always in /view/frontend/templates/ directory. Create a new file index.phtml and here is the content:

Okay. It’s time to test but first flush magento cache with command: php bin/magento cache:flush. Then open this url: http://magentoce215.dev/helloworld/index/index. IT SHOULD SHOW Welcome Advcha.
IF IT SHOW EMPTY PAGE, Please flush the magento cache or check again the id in routes.xml or make sure the ‘block’ is exist or modify ‘layout=”empty”‘ in helloworld_index_index.xml (ref: http://magento.stackexchange.com/questions/84370/magento-2-sample-module-displays-blank-page).
We can also inspect the elements with Magento DevTools.CRUD
ref: https://www.mageplaza.com/magento-2-module-development/how-to-create-crud-model-magento-2.html
Here I want to create a new table ‘advcha_post‘ with these following columns:
post_id – the post unique identifier
title – the title of the post
content – the content of the post
creation_time – the date created
To create a magento model, first setup a script in InstallSchema.php to create the table. Here is the full path: app/code/Advcha/HelloWorld/Setup/InstallSchema.php. Here is the file content:
NOTE: I updated the content from the github link: https://github.com/mageplaza/magento-2-sample-module/blob/master/Setup/InstallSchema.php

Then run php bin/magento setup:upgrade
This should create a new table ‘advcha_helloworld_post‘ in your magento database. If it didn’t create it, please check ‘setup_module‘ table, then find ‘Advcha_HelloWorld’ record and remove it. Then run again php bin/magento setup:upgrade.
If you find this error

This mean you haven’t define ‘sample_upload_file’ field in InstallSchema.php file above. Please look again the above file carefully or see the file from the github: https://github.com/mageplaza/magento-2-sample-module/blob/master/Setup/InstallSchema.php.
Create Model
First create an interface in PostInterface.php file in app/code/Advcha/HelloWorld/Model/Api/Data/ directory.

This interface has defined the set and get method to table data which we would use when interacting with the model. This interface plays an important role when it comes time to exporting CRUD models to Magento service contracts based API.
Now create a model Post in app/code/Advcha/HelloWorld/Model/Post.php.

$_eventPrefix – a prefix for events to be triggered
$_eventObject – a object name when access in event
$_cacheTag – a unique identifier for use within caching
Create a Resource Model
the model file contain overall database logic, it do not execute sql queries. The resource model will do that. Now we will create the Resource Model for this table: Advcha\HelloWorld\Model\ResourceModel\Post.php.

Resource Model Collection – Get Model Collection
The collection model is considered a resource model which allow us to filter and fetch a collection table data. The collection model will be placed in: Advcha\HelloWorld\Model\ResourceModel\Post\Collection.php.

Factory Object and create Block Post
Create a Post block: Advcha\HelloWorld\Block\Post.php.

Then how to run this CRUD?

Create View: Block, Layouts, Templates
ref: https://www.mageplaza.com/magento-2-module-development/view-block-layout-template-magento-2.html
Here we want to create a module to show/display a text on the magento frontend.
A View will be use to output representation of the page. In Magento 2, View is built by three path: block, layout and template.
Call view in controller
In the previous Hello World Module topic, we have build a simple module and show the Hello World message on the screen directly by controller. Now we will edit it to call view to render page. File: app/code/Advcha/HelloWorld/Controller/Index/Display.php.

Create layout file .xml
The Layout is the major path of view layer in Magento 2 module. The layout file is a XML file which will define the page structure and will be locate in {module_root}/view/{area}/layout/ directory. The Area path can be frontend or adminhtml which define where the layout will be applied.
There is a special layout file name default.xml which will be applied for all the page in it’s area. Otherwise, the layout file will have name as format: {router_id}_{controller_name}_{action_name}.xml. We can find the frontend {router_id} is helloworld in app/code/Advcha/HelloWorld/etc/frontend/routes.xml. The {controller_name} is index and {action_name} is display (from Display.php where Action exist: Magento\Framework\App\Action\Action). We will create a layout handle file for this module: File: app/code/Advcha/HelloWorld/view/frontend/layout/helloworld_index_display.xml.

Block class: Advcha\HelloWorld\Block\Display, Template file: Advcha_HelloWorld::sayhello.phtml.
Create block
The Block file should contain all the view logic required, it should not contain any kind of html or css. Block file are supposed to have all application view logic. Create a file: app/code/Advcha/HelloWorld/Block/Display.php.

Every block in Magento 2 must extend from Magento\Framework\View\Element\Template. In this block we will define a method sayHello() to show the word “Hello World, Advcha!”. We will use it in template file.
Create template file
Create a template file call sayhello.phtml: app/code/Advcha/HelloWorld/view/frontend/templates/sayhello.phtml.

In the layout file, we define the template by Advcha_HelloWorld::sayhello.phtml. It mean that Magento will find the file name sayhello.phtml in templates folder of module Advcha_HelloWorld. The template folder of the module is app/code/{vendor_name}/{module_name}/view/frontend/templates/.
In the template file, we can use the variable $block for the block object. As you see, we call the method sayHello() in Block. It’s done, please access to this page again (http://magentoce215.dev/helloworld/index/display) and see the result.If you find an error like this (put “ini_set(‘display_errors’, ‘1’);” in root index.php and /pub/index.php):

Then run this command: php bin/magento setup:upgrade then refresh your browser.

The Backend – system.xml Configuration
ref: https://www.mageplaza.com/magento-2-module-development/create-system-xml-configuration-magento-2.html
Create System.xml
In the admin page, the magento 2 system configuration page is divided logically in few parts: Tabs, Sections, Groups, Fields. So let’s start to create a simple configuration for the simple Module Hello World. The system.xml is located in etc/adminhtml directory of the module, we will create it a new Tab for our vendor “Advcha”, a new Section for our module Hello World, a Group to contain some simple fields: enable module and text. File: app/code/Advcha/HelloWorld/etc/adminhtml/system.xml.

Set default value
Each field in system.xml after create will not have any value. When you call them, you will receive ‘null’ result. So for the module, we will need to set the default value for the field and you will call the value without go to config, set value and save it. This default value will be saved in config.xml which is located in etc folder. Let’s create it for this simple configuration: File: app/code/Advcha/HelloWorld/etc/config.xml.

You can put the path to the field in the <default> element to set value default for it. The format is:

We need to flush the cache and see the result above.
Get value from configuration
First all of let’s save value and flush cache, then you can get saved value from database. In the system.xml, we have added 2 fields: enable and display_text. So the path should be: helloworld/general/enable and helloworld/general/display_text. We can call them through simple calling or use helper (recommended). Also please read for more samples:  http://magento.stackexchange.com/questions/87789/magento2-how-to-get-data-from-system-configuration
Simple calling:

Create a helper file (standard)
Create file: Advcha/HelloWorld/Helper/Data.php.

Now we can get those value and call the helper from .phtml file like this:

 

TypeScript

Ref: https://www.typescriptlang.org/docs/tutorial.html
Installation:

  1. Install from npm

    Check the typescript version:

     
  2. Try it via Visual Studio Code.
    Create a new file ‘greeter.ts’ and here is the content:

    Then compile it via

    It’d create a new js file: greeter.jsgreeter.js has same content with greeter.ts.
  3. TypeScript Interface
    Create a new file ‘greeter-interface.ts’:

    Then compile it

    Here is the output ‘greeter-interface.js’

  4. TypeScript Class
    Create a new file ‘greeter-class.ts’:

    Then compile it

    Here is the output ‘greeter-class.js’

  5. Open it on your web browser
    Create a new file ‘greeter.html’

    Then open the html file on your browser. It’d show like this:

     

Ionic Framework

Installation On Ubuntu 14.04:
ref: https://ionicframework.com/getting-started/

  1. Install Ionic and Cordova

     
  2. Start an App

     
  3. Run your App (in a browser)

    Then you can see the result on your browser: http://localhost:8100/Here I use Google Chrome developer tool and use device Nexus 5 to see how it looks on the device.

Upgrade MySQL v. 5.5.54 to v.5.7.17

Ref: http://askubuntu.com/questions/750498/mysql-5-5-update-to-mysql-5-7

Here is what I’ve done:
DON’T FORGET TO BACKUP YOUR DATABASE FIRST! Pls read : http://myprojects.advchaweb.com/index.php/2017/03/18/script-to-backup-each-mysql-database-in-separate-files/

  1. Download MySQL Apt Repository from https://dev.mysql.com/downloads/repo/apt/. Currently the file name is ‘mysql-apt-config_0.8.3-1_all.deb’.
    SORRY, ONLY ADMIN CAN SHOW THIS!
  2. Install it:
  3. Then I’d got this screenSelect ‘MySQL Server (Currently selected: mysql-5.7)’ then ‘ok’.
    Then I’d got the second screen.Select ‘mysql-5.7’ then ‘ok’. Then if you get to the first screen again, just select ‘Ok’ and ‘ok’. The screen would be closed.
  4. Update my ubuntu system
  5. install the MySQL-server package, which now contains MySQL 5.7

     
  6. Now upgrade all mysql databases

     
  7. Now restart mysql server

     
  8. Check mysql server version

     
  9. Everything run well. At the phpmyadmin, I found the max upload size is 2M. I can modify this value in php.ini file (‘upload_max_filesize’).
    To find out where is the configuration file location for mysql, pls do like this:

    It’d show pretty long output, but I can found the line like this:

    SORRY, ONLY ADMIN CAN SHOW THIS!

Script To Backup & Restore Each MySQL Database In Separate Files

Ref: http://stackoverflow.com/questions/9497869/export-and-import-all-mysql-databases-at-one-time

Here I want to backup all my database (more than 100 databases) in separate files. I can backup all the database in one single file like this:

But I want to pick only some of the databases to be imported on the different MySQL version and left out the rest (some of the databases I don’t want to be imported). From the top link, I create a new bash file ‘backup_each_db.sh’. Here is the code:

Make sure the ‘USER’ and ‘PASSWORD’ values for your MySQL server are correct!.
Then modify the file permission:

Then run the script:

SORRY, ONLY ADMIN CAN SHOW THIS!

To restore all the databases from the sql files, please run like this:
teddy@teddy:/media/teddy/Data/MASTER/MySQL/20180124_db_backup$ for SQL in *.sql; do DB=${SQL/\.sql/}; echo importing $DB; mysql -uroot -pYOURPASSWORD < $SQL; done
ref: https://stackoverflow.com/questions/4708013/import-multiple-sql-dump-files-into-mysql-database-from-shell
SORRY, ONLY ADMIN CAN SHOW THIS!

Magento CE 2.1.5 (With Sample Data) Installation

I want to install Magento CE 2.1.5 (with sample data) in my machine Ubuntu 14.04 and PHP 7.0.
Ref: http://devdocs.magento.com/guides/v2.1/install-gde/prereq/zip_install.html

  1. Download the installation file from magento website. Here I downloaded the file with sample data in tar.bz2 format
  2. Extract the compressed file into your web root. I extract them in ‘magentoce215’ directory.
  3. Modify the files permission of ‘magentoce215’ directory. Here I used this command to make it easier for me to deal with the many security issues.
  4. Open it the first time on your browser: http://localhost/works/magentoce215. It’d setup magento for the first time.Click ‘Agree and Setup Magento’ button. It’d bring us to next step, the check install page. Here is the looksI want to make sure anything would be okay so I click ‘Start Readiness Check’ button. It’d check my php version and the php extension I have. It seemed I miss some extensions. Here is the result.I need to sort its out first. Install the missing php extensions.

    Then don’t forget to restart apache server

    Back to the browser then click ‘Try Again’ button at the top of the page. If everything okay, I’ll get this page.Then click ‘Next’ button. It’d bring you to the database setting page. That is my database setting. I already created a new database ‘magentoce215’ (utf8-general-ci) via phpmyadmin. Make sure the setting is correct! Then click ‘Next’ button. Oops! I have MySQL Server 5.5.54 that not supported by magento ce 2.1.5. It recommended to use MySQL 5.6.0 or later!SO I NEED TO UPGRADE THE MYSQL VERSION TO MYSQL 5.6.0 OR LATER? OK. I upgraded my MySQL server to 5.7 version. Now everything is fine. Then I got this screen about my local magento web configuration.magento url: http://localhost/works/magentoce215/
    magento admin url: http://localhost/works/magentoce215/admin_dgj2ff
    Then click ‘Next’. Then I modify my store setting like this:I checked ‘Select All’ for ‘Advanced Modules Configuration’ because I want to use the samples data. Then click ‘Next’. Then fill out the admin form.SORRY, ONLY ADMIN CAN SHOW THIS!
    Then click ‘Next’. This is the last page to install magento.Click ‘Install Now’ button. Wait until installation completed and you get the success page.SORRY, ONLY ADMIN CAN SHOW THIS!
    It’s recommended for security, remove write permissions from these directories: ‘/home/teddy/Documents/works/magentoce215/app/etc’.
    When ‘Launch Magento Admin’ button is clicked, it’d go to the admin page (http://localhost/works/magentoce215/admin_dgj2ff).Use your correct username and password to sign in. Here is the main admin page.Somehow I got an error like this:“One or more indexers are invalid. Make sure your Magento cron job is running.”. I think no need to worry right now.
    Here is the main page (http://localhost/works/magentoce215/) looks:
  5. Use VirtualHost
    I prefer to use virtualhost so I can open this magento with more pleasing url like http://magentoce215.dev. Here is the step:
    Create an apache file configuration:

    Here is the file content:

    Enable the site:

    Put the url in hosts file

    Here is the line:

    Restart apache server

    We need to clean and flush the cache and build and deploy the static files:

    Test it on your browser: http://magentoce215.dev
    If there is no change on the url and still use the url:  http://localhost/works/magentoce215, we need to update ‘base-url’ and ‘base-url-secure’ (ref: http://blog.netgloo.com/2016/05/13/magento-2-change-base-url-using-the-command-line/) like this:

    Test it again on your browser: http://magentoce215.dev and the admin url is http://magentoce215.dev/admin_dgj2ff
  6. The looks are different with the version 1.X. Please read https://www.atwix.com/magento-2/magento-1-vs-magento-2/, https://www.shopping-cart-migration.com/blog/42-magento/43708-the-key-differences-between-magento-1x-and-20, https://www.apptha.com/blog/magento-1-vs-magento-2-for-building-multi-vendor-marketplace/, etc.
  7. Create a setup for nginx and php7.0-fpm
    Create the config file

    Here is the content:

    Enable file config

    Register the host on my system

    Like this:

    CHECK THE NGINX SETTING AND RESTART IT:


    Set file permission and owner:

    Test: http://magentoce215.test –> IT’S WORKING

Questionair App with Loopback and Angular

Ref: https://github.com/hellsan631/questionair
http://stackoverflow.com/questions/32132324/n-level-hierarchy-array-angular-js
Installation:

  1. Clone the github: https://github.com/hellsan631/questionair.git

    It’d create a new dir ‘questionair’.
  2. Go to the dir then install the node packages

     
  3. Here I found no ‘lb-services.js’ in /client/app/js/ directory, so let create it

    The file ‘lb-services.js’ would be created in /client/app/js/ directory.
    Then don’t forget to hook the file in /client/app/index.html file

    NOTE: I missed this step before because I didn’t check ‘lb-services.js’ file then I got this error:

     
  4. Now let run the node server

    Then open it on our browser: http://localhost:3000/
    Nothing found there because this app still haven’t completed yet.
    The main controller ‘questionairController’ is in /client/app/index.html file. We need to call it in /client/app/js/app.js file like this

    The parameter ‘Question’ we found from /server/model-config.json file. It represent ‘Question’ table. Also look the table structure in /server/models/question.json. There are also the others tables like ‘Answer’, ‘Role’, etc.

Quiz App With AngularJS and Loopback

Ref: https://github.com/tomchal/Quiz4All
Installation:

  1. Go to your favorite directory and Clone the app
  2. Go to the ‘Quiz4All’ dir
  3. Install the node packages with npm
  4. Go to ‘client’ dir and use bower to install the packages

     
  5. Modify /server/datasources.json file. At ‘TchMySql’, match with your database setting. SORRY, ONLY ADMIN CAN SHOW THIS!
    If you haven’t created the database ‘Quiz4All’, please do it manually (via phpmyadmin?).
    NOTE: Loopback has a functionality to create the tables and fill the data/fixture into the tables when the app run for the first time (create ‘quiz’ table, create ‘user’ table, insert the default user data into the table, etc). It’s called ‘autoMigrate’ (https://loopback.io/doc/en/lb2/Creating-a-database-schema-from-models.html#auto-migrate). It’d run the scripts in /server/boot/ directory like ’02_create-appusers.js’, ’04_load_quizzes.js’, and so on. We know the scripts also load the other scripts to create the tables structure in /common/models/ directory. For example ‘quiz.json’ to create ‘quiz’ table, ‘answer.json’ to create ‘answer’ table, and so on. It’d also fill the tables from the fixture ‘quizDane.js’ in /server/data/ directory. In the above scripts ’02_create-appusers.js’ and ’04_load_quizzes.js’, there is a line responsible to do that (create table, fill the tables with the fixtures) when the app is starting. For example:

    The loopback link above says:
    If there are existing tables in a database, running autoMigrate() will drop and re-create the tables: Therefore, data will be lost. To avoid this problem use auto-update(). Instead of dropping tables and recreating them, autoupdate() calculates the difference between the LoopBack model and the database table definition and alters the table accordingly. This way, the column data will be kept as long as the property is not deleted from the model.“.
    BECAUSE WE ONLY NEED/WANT TO CREATE THE TABLES FOR THE FIRST TIME, THEN MODIFY THE SCRIPTS TO ‘autoupdate()’ AFTER THAT OR WE’D LOST OUR DATA CHANGES AT THE NEXT START! –> UPDATE: I TRIED TO MODIFY ‘.automigrate()’ to ‘.autoupdate()’ AFTER THE NEXT START BUT IT DIDN’T WORK.

    SO WHAT IS WORK IS TO DELETE/RENAME THE FILES IN /server/boot/ DIRECTORY (I RENAMED THEM TO ’02_create-appusers.js.bak’ AND ’04_load_quizzes.js.bak’)
  6. Go back to the root app then start the node server

    Here are the looks from http://localhost:3000/ or http://localhost:3000/#!/quizzes If any user is logged in (or you can also register and login. Here I registered with email: advcha@yahoo.com and password: admin), here is the lookNew quiz (http://localhost:3000/#!/newquiz)Here is the created quizNOTE: DON’T FORGET TO RENAME THE SCRIPTS IN /server/boot/ DIR TO ’02_create-appusers.js.bak’ AND ’04_load_quizzes.js.bak’ RESPECTIVELY SO THE ABOVE DATA WOULD NOT BE DELETED IF THE NODE SERVER RUN AGAIN!
    Anyway this is very good. But I think it needs some improvements like edit the quizzes (if user is logged in), admin panel, user member (student or admin), etc.

Loopback Angular Example: Todo

Ref: https://github.com/strongloop/loopback-example-angular

Clone the example

Go to the dir

Use npm to install the dependencies

Run node server with ‘node .’. But I got this error:

SOLUTION: Sorry, I got this problem because I run another node sever in another and I forgot to turn it off. After making sure only one node server running, everything run well!

Open your browser then type http://localhost:3000/ or http://localhost:3000/index.html. Here is the result and try to add a few list.NEXT: HOW TO STORE THE LIST IN DB???