How to Create Order History Screen In App

Hello Guys I’m here with a guide and as you can see the title of this post ‘How to Create Order History Screen In App’ so in this post i will tell you that how can you implement an Order History Screen in Apps that’s you made with an App Inventor like Kodular, Appybuilder, MIT and Niotron.

Note- This is my First Guide and my English is not very well so please Ignore Grammer Mistakes :sweat_smile:

First of all, I wanna tell you some important points that’s you need to know before you Start your project, that is-

  1. You should have sufficiant Knowledge about Firebase
  2. You should have some Knowledge about your App Inventor

so if you have sufficiant knowledge about aboves then you can Process Further.

Important Exensions to Create Order History Screen In App

First of all, you need to have an Firebase project, if have not then you can create ones. After done that, you need to have some Extensions called ‘Dynamic Components’, ‘ListUtils’ and ‘JSONTools’ and that are absolutly free Extensions. If you wanna know about it then you can search on Google or in this Community.

Dynamic Components

Dynamic Components by @yusufcihan

ListUtils

ListUtils by @Hossein Amerkashi

JSONTools

JSONTools by @LukeGackle

How to Create Order History Screen In App

let’s Rock! Now you are ready to create Order History Screen In App your App. So ,i’m telling you some Steps please read it carefully.

1. Install Extensions in your project

Now you need to install all of Provided Extensions in your project and i believe that you know how can you install all of these extensions in your project. If not, then Simply ask in Reply.

2. Connect your Project with Firebase

Now need to drag and drop Firebase Components in Your project. Drag and Drop ‘Firebase Database’ and ‘Firebase Authentication’ in your Project. Are you thinking about why I’m using Firebase Components in Project, Specialy Firebase Authentication? so you need to know that we are using ‘user ID’ as a project bucket so Firebase Authentication is providing an ‘User ID’ to us that would be different for everyone or every account and ‘firebase database’ is a way there we will store our whole App’s data.

You don’t need to do anything with firebase Authentication but With Firebase Database you have to do some changes with ‘Firebase Token’ and ‘Firebase Url’.

You will see Default Firebase token and Firebase Url in your Project so you have to change it with your firebase Token and Firebase Url.

3. Create Screen Layout

In Screen Layout, here is nothing to do so if you are a begginer then you can also create it easily. See the Pic below-

as you can see in this image there is not need any extra comment to tell you so let’s go ahead.

4. Set-up your Blocks

Now you need to set-up your blocks as you seen above the image and i think that i don’t need to explain it deeply.

Schema

Put this Schema in Template ‘String’ and you are done.

{ “name”: “Transaction”, “metadata-version”: 1, “author”: “Rehan Ansari”, “platforms”: [ “kodular” ], “keys”: [ “TransactionID”, “Image”, “Status”, “Purpose”, “Amount” ], “components”: [ { “id” : “Maincard_{TransactionID}”, “type” : “MakeroidCardView”, “properties” : { “Width” :-2, “ContentPaddingTop” :4, “ContentPaddingBottom” :4, “ContentPaddingRight” :12, “ContentPaddingLeft” :12, “AlignVertical” :2, “AlignHorizontal” :3, “CornerRadius” :5, “Elevation”:5 }, “components”: [ { “id”:“Hori_{TransactionID}”, “type”:“HorizontalArrangement”, “properties”: { “AlignVertical”:2, “Width”:-2 }, “components”: [ { “id”:“image_{TransactionID}”, “type”:“Image”, “properties”: { “Height”:35, “Width”:35, “ScalePictureToFit”:true, “Picture”:"{Image}" } }, { “id”:“space1_{TransactionID}”, “type”:“SpaceView”, “properties”: { “WidthPercent”:2 } }, { “id”:“PurposeVert_{TransactionID}”, “type”:“VerticalArrangement”, “properties”: { “AlignVertical”:2 }, “components”: [ { “id”:“purpose_{TransactionID}”, “type”:“Label”, “properties”: { “Text”:"{Purpose}", “FontSize”:15, “FontTypefaceImport”:“Noway-Medium.otf” } }, { “id”:“Transactionid_{TransactionID}”, “type”:“Label”, “properties”: { “Text”:"{TransactionID}", “FontSize”:12, “TextColor”:-7829368, “FontTypefaceImport”:“Noway-Medium.otf” } }, { “id”:“Status_{TransactionID}”, “type”:“Label”, “properties”: { “Text”:"{Status}", “FontSize”:15, “TextColor”:-16711936, “FontTypefaceImport”:“Noway-Medium.otf” } } ] }, { “id”:“space3_{TransactionID}”, “type”:“SpaceView”, “properties”: { “Width”:-2 } }, { “id”:“Amount_{TransactionID}”, “type”:“Label”, “properties”: { “Text”:"{Amount}", “TextColor”:-16711936, “FontTypefaceImport”:“Noway-Medium.otf”, “FontSize”:20 } } ] } ] } ] }

Now you have succesfuly Created Order History Screen In your App but this is only a Order history Screen there you can show all the User’s Transactions so now we will learn about how can we Store Transactions in firebase.

How to Store Transaction’s Data in Firebase

As you can see in the above image you can know about that how can you Store Transaction’s data in firebase and if you are facing any issue with these blocks then you can ask me in Reply.

you can see also Firebase Structure in the image Below.

Output

Download Examples

Order_history.apk (6.0 MB)

Conclution

I hope you are well learned about How to Store Transaction’s Data in Firebase and How to Create Order History Screen In App that’s you are creating with Kodular or any other App Inventor.

Have you Like this Guide?

  • Yes
  • No

0 voters

Support

pay me a Visit on My Website

Cheers!

2 Likes

Images are blur and I can not see anything. You should show at least firebase’s structure if not show how to save data to firebase. Also I believe you could also work with dictionary blocks instead of json tools extension. For those reasons and till you fix the guide I temporarily unlisted it

1 Like

Now I have Added Clear Images

Done

Since you are creating dynaming components using schema template please provide it because otherwise users can not follow your quide. Also mybe you could show the same procedure using Kodular’s dictionary blocks instead of json extension

Also you can try this method too…

Done!

I don’t have sufficiant knowledge about it :worried:

But my method is easy for newbies because there is very less blocks.

1 Like