Spring Boot and Ionic online store app

Well, Covid-19 has been a great time to practice and also learn new things. From now on, I’ll be posting things here too.

So, during the last weeks, I’ve tried Nelio Alves’ online course, where he taught us Spring Framework and Ionic. The course was a complete app that should be deployed to the Google Play Store (but I didn’t deploy it because of the fees).

These online courses for me are a great way of complementing my habit of reading. I’m quite an old school learner, and I like reading. So, I am always shuffling around documentation. These courses, which are in video, are more like a complement for what I read. But don’t get me wrong, Nelio Alves’ lessons are amazing, the guy is a great teacher and for visual learners he may be one of the greatest teachers around. I also need to mention that the app was completely made with requisites in portuguese language.

If you wanna test the app, you’ve got two options I’ll mention in the next lines, but if you don’t, I’ll show it later in this article with photos and commenting used technologies.

If you wanna try the back-end yourself, you can use Postman and send the requsitions to the server. The server is hosted at: https://spring-and-ionic-2.herokuapp.com/

If you wanna try it with the graphical interface, you can follow the instructions:

• get the code at the github repo: https://github.com/renatogondin/spring-boot-ionic-frontend
• npm install for the dependencies
• ionic serve (check the browser). You need to install Ionic.
• the front-end code will connect with the heroku deployed page and you’ll be able to use.

Now, let’s talk about the back-end. It was sent to the repo: https://github.com/renatogondin/spring-ionic-backend . I had more than 60 commits, but I had a problem and and re-commited the project.

The back was made with: Spring Boot, Maven, Spring Data, Spring Security, JWT, Aws S3 Bucket to store files, Google Email Service, Heroku deployment tools…

The UML model

And I’ll display here an IDE’s photo:

IDE

Now, the Ionic’s GUI that connects to our Spring app:

Sign-in/Sign-up

choose a city

endpoint for a class Categoria. These images are all hosted at S3.

endoint for a class Produto

check before purchasing

check your cart

selecting adress and a payment option before sending the request

Don’t worry if you receive this message. it’s just cause I took away the email credentials for security. There is no need to be sending emails for people testing the app. I can create a new google email and it will work anytime. I just don’t want to be using my email together with an external application.

In the end of your Pedido (Purchasing Request) you’ll receive “Erro 500”. But it’s just because I erased the email credentials. Actually, Google was sending me messages adverting me how dangerous it could be to use my email with an external appplication, and I decided to follow their advices.

Also, you can edit your profile:

you can put a photo here from your camera or your device.

choose your file or take a picture

a menu where you can see your profile, things you wanna buy, your cart ou Logout the application.

Well, that’s all folks. You can check the code or contact me for more informations :)

I’ll also start posting constantly here.