Spring Boot and Ionic online store app

Renato Gondin
Jun 5 · 4 min read

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:

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…

Image for post
Image for post
The UML model

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

Image for post
Image for post
IDE

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

Image for post
Image for post
Sign-in/Sign-up
Image for post
Image for post
choose a city
Image for post
Image for post
endpoint for a class Categoria. These images are all hosted at S3.
Image for post
Image for post
endoint for a class Produto
Image for post
Image for post
check before purchasing
Image for post
Image for post
check your cart
Image for post
Image for post
selecting adress and a payment option before sending the request
Image for post
Image for post
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:

Image for post
Image for post
you can put a photo here from your camera or your device.
Image for post
Image for post
choose your file or take a picture
Image for post
Image for post
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.

renato1902

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store