Web admin for Malva-Risco farm, in Tenerife island. 💚

• ✅ Getting started: (20%)
  • ✅ Upload your project to GitHub (1/20 %)
  • ✅ Write a README.md (1/20 %)
  • ✅ Add your postman documentation in the readme. (2/20 %)
  • ✅ Postman - GET. (2/20 %)
  • ✅ Postman - POST. (2/20 %)
  • ✅ Postman - DELETE. (2/20 %)
  • ✅ Postman - PUT. (2/20 %)
  • ✅ Ionic - GET. (2/20 %)
  • ✅ Ionic - POST. (2/20 %)
  • ✅ Ionic - DELETE. (2/20 %)
  • ✅ Ionic - PUT. (2/20 %)
• ✅ Frontend (20%)
  • ✅ Component 1 - Ion-content (2/20 %)
  • ✅ Component 2 - Ion-toolbar (2/20 %)
  • ✅ Component 3 - Ion-button (2/20 %)
  • ✅ Component 4 - Ion-back-button (2/20 %)
  • ✅ Component 5 - Ion-icon (2/20 %)
  • ✅ Component 6 - Ion-list (2/20 %)
  • ✅ Component 7 - Ion-alert (2/20 %)
  • ✅ Component 8 - Ion-select (2/20 %)
  • ✅ Component 9 - Ion-input (2/20 %)
  • ✅ Component 10 - Ion-modal (2/20 %)
• ✅ Photos (10%)
  • ✅ Take photos with device's camera. (5/10 %)
  • ✅ Handle photos from frontend (CRUD). (2,5/10 %)
  • ✅ Store the photo in the backend (CRUD). (2,5/10 %)
• ⬜ Auth (10%)
  • ⬜ Implement basic authentication (10/10 %)
    • 🚧 WIP in feature-auth branch

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

👁‍🗨 See deployment for notes on how to deploy the project on a live system.

1️⃣ If you haven't Git installed in your local machine, I hardly encorage you to install it. Then you could clone the whole repository.

git clone https://github.com/iremaru/malvarisco_admin.git

2️⃣ You will need Node >16.13.0 to run the server either in the backend (api to database) as in the frontend (web).

If you are a window user, you should download it at nodejs.org.

If, instead, you are a linux user, you would download it from terminal.

apk add nodejs npm

Finally, if you are an IOS user, you can buy it in the app-store. 🤡

Sorry, it's a bad joke. You can download it at nodejs.org, like any other window user.

3️⃣ It's not mandatory to install Angular Cli globally, but you will need it at least in the project.

Install globally:

npm i -g @angular/cli

Install locally:

cd frontend/
npm i @angular/cli

4️⃣ Install ionic

npm install -g @ionic/cli

5️⃣ Create an local database

You can use wamp, xampp, or whatever tool of your preference.

❗❗ Your database must be named 'malvariscoDB' in order to be recognized by the backend.

If you are going to enter data in spanish, I recomend you to use utf8_spanish_ci in ordert to save text with "ñ".

6️⃣ Make a new file inside the backend directory called db.config.js:

new-item ./backend/config/db.config.js

If you are using Visual Studio Code, you can create and edit the file at once writing in your terminal:

code ./backend/config/db.config.js

7️⃣ Inside the file include the following info:

module.exports = {
    HOST: 'localhost',
    USER: 'userName', //❗❗ Fill it with your database user
    PASSWORD: 'userPassword', //❗❗ Fill it with your database user password
    DB: 'malvariscoDB', //❗❗ If you prefer to change your database name, then you must change it here too.
    dialect: 'mysql',
    pool: {
        max: 5,
        min: 0,
        acquire: 30000,
        idle: 10000,
    }
};

8️⃣ Create an .env in your backend root;

JWT_SECRET=Y0u_4r3-mY~L0v3lyS3cr3t!4r3ntY0u? #👈 Here your secret

MYSQL_DATABASE=malvariscoDB     #👈 Your DB
MYSQL_USER=root                 #👈 Your user
MYSQL_PASSWORD=                 #👈 Your password
MYSQL_ROOT_PASSWORD=            #👈 Your super admin password, without steroids

DB_HOST=localhost

NODE_ENV=development

9️⃣ Install node modules in the backend and in the frontend

cd backend/
npm install

cd ../frontend/
npm install

You can test the backend is running, and the API is live with Postman.

Link to the API documentation

Now, I'm sure you want to see the webpage by your own.

First, we are going to raise the API:

If it's first time running the project, you need to set the development mode in order to create the database tables.

❗❗ Whenever you need to drop the database data, repeat this step. Avoid if you do not want to lose your data.

cd ./backend/ # <= if you are in root directory
npm start devmode # <= if this is your fist time running the project or you want to drop your data.

Next time you want to run the database server:

cd ./backend/ # <= if you are in root directory
npm start

If you terminal print an error like this:

Maybe you haven't run your db server. So, if you are using Wamp Server, Xamp or whatever tool of your preference, run it.

‼️ If you want to stop the backend, you must press "ctrl + c" in the terminal.

Now you will need to run the frontend. To do this, you will need other terminal. If you are using Visual Studio Code, you can have as much as you want, and named it to identify it clearly.

Example:

Now, in your frontend terminal you have to run the frontend:

cd ./frontend/ # <= if you are in root directory
npm start

There is it. You have had to wait a little bit, but it will be done finally, and in the terminal you will see the port where your website will be running.

Go on and try it out in your preferred web browser:

In order to see the data you need to click over the eye icon.

• Ionic - SDK
• Angular - FrontEnd Framework
• Express - BackEnd Framework
• Sequelize - ORM
• MySQL - BD

Frontpage image: Farm Vectores, by Vecteezy.

• Iremaru - Initial work - GitHub

This project is licensed under the MIT License.

• This project is the result of "Multimedia and Mobile development" subject's activity, as part of DAM course (Cross-platform development training course) given by Tiburcio Cruz, aka Tcrurav from I.E.S. El Rincón, in Canary Islands.
• This project was inpired by my mom's vegetable garden, 💚Malva-risco💚 and her needs for an admin system.