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
- β¬ Implement basic authentication (10/10 %)
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.
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.
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.
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.