phone_book_system - Back-end

This is a phone book system developed using Django. A RESTful API is constructed using Django's REST Framework.

User can view existing contacts in the phone book and perform add, delete and update operations by interacting with the API.

Mannual

Install packages:

This project requires: Django, Django REST framwork, Django-cors-headers:

$ pip install Django
$ pip install djangorestframework
$ pip install django-cors-headers

Run application:

1. Go into project directory (same level as the manage.py file):

   $ cd phone_book

2. Apply database migrations

   $ python3 manage.py migrate

3. Start Django application server:

   $ python3 manage.py runserver

Interacting with API:

Django's REST Framework provides API interfaces that user can directly interact with, which is a convenient alternative to using curl methods.

• VIEW list of contacts in the current phone book:

  Open browser and type in: http://127.0.0.1:8000/api/v1/persons/

• ADD new person to contact:

  Open browser and type in: http://127.0.0.1:8000/api/v1/persons/new

• UPDATE an existing contact by matching to the 'id' field.

  Open browser and type in: http://127.0.0.1:8000/api/v1/persons/int:id/update

  For example, update person which has id = 1. Open browser and type in: http://127.0.0.1:8000/api/v1/persons/1/update

• DELETE an existing contact by matching to the 'id' field.

  Open browser and type in: http://127.0.0.1:8000/api/v1/persons/\int:id/delete

  For example, delete person which has id = 1. Open browser and type in: http://127.0.0.1:8000/api/v1/persons/1/delete

Testing:

API tests

Test cases for APIs are located in the /phone_book/contacts/tests.py file. The unit tests are written using Django's REST framework's testing cases.

$ cd phone_book

$ python3 manage.py test

Coverage test

Use Coverage.py to check code coverage of the project. Documentation

1. Install tool:

   $ pip install coverage

2. Unit tests for the API may also be run with coverage:

   cd phone_book

   coverage run manage.py test

3. Generate table report:

   $ coverage report -m

4. For a nicer presentation, use coverage html to get annotated HTML listings detailing missed lines:

   $ coverage html

   This command generates a htmlcov folder. Then open htmlcov/index.html in a browser to see the results.

UI - Front-end

The front end is built using the React Javascript library, which consumes the Django API to gain access to the phone book.

Mannual

Install packages:

This requires the following package: npm, node, yarn.

To install using Homebrew:

$ brew install npm
$ brew install node
$ npm install --global yarn
$ npm install axios

Verify the packages have been install successfully:\

$ npm -v
$ node -v
$ yarn --version

Notes:

• npx is the package runner used by npm to execute packages in place of a global install.
• This front-end web starts off by using create-react-app, which is an excellent tool for beginners that allows you to create and run React project very quickly.

  Run the following command to install the tool:
  $ npm i create-react-app

• create-react-app uses yarn for the setup if it's installed.

Run application:

1. Make sure Django server is running and database has been migrated.
2. Run the React app:

   $ cd react-api
   $ npm start
   Open http://localhost:3000 in browser.