So today I am going to show you how to create an app like Instagram. In this app you can find Image Upload, My Account with Bio and Image Wall where all the Images will be shown after an user upload a image. All images will be stored in Cloudinary Database and all data will be stored in Airtable Spreadsheet. So first of all create a simple splash screen.
Just drag your own logo and a Circular Progress Bar to create the splash, I already posted how can you create a splash screen, so if you don’t know how to do that then check that tutorial before. Drag a TinyDB and Clock with Timer 3000ms and set Timer Enabled to True.
Tiny DB will help to store some local datas and that’s how app will know that the user already logged in or not.
the “id” tag will be store with a value after an user register or log in to this app
In this screen you have to create a signup form. I already told you how to create a signup page using Firebase Authentication, if you don’t know how to create then check that post before.
So just you need 4 fields, one for Name, one for Email, one for Username and one for Password, after that drag a Signup button. Drag 2 Firebase Database and 1 Firebase Authentication. Note that Firebase Authentication needs google-services.json file, so upload that to Kodular. If you don’t know the process then check out that tutorial first. Drag a TinyDB and a Notifier
Here a Firebase Database will work to find Username already exist or not
after Firebase got value, if username already exist then it will show the notice and if the username is new one then it will go for signup using Email and Password using Firebase Authentication
In login screen just need 2 fields, one for email and one for password. Drag one Firebase Database, one Firebase Authentication,one TinyDB and two Notifiers
when login button click it will validate the email and password and if it is wrong input then it will show a notice
after login succeed it will save some required data to TinyDB and also TinyDB needs Username so it will call Firebase to get Username of this user
after got value it will store username to the TinyDB as “user” tag and go to Home screen
In home screen drag a Vertical Scroll Arrangement and also drag a Bottom Navigation where I added three menus Home, Upload and Account. Drag four Airtable Spreadsheet, one Notifier and one Card View. You can download Card View extension from here.
Now see how to create columns in Airtable
the data I already inserted via app
See the Screen Design
when a Screen Initialize then Bottom Sheet will add items in all screens. Then it will call Airtable
now it will start calling and getting all columns to show images on Home Screen, also you need global variables to get values
when last column got values then it will call Card View Type 1
In Upload screen you have to show all available jpg image files from you Phone so I will use Colintree ListView and Taifun File for that. I have created a simple upload screen, where it has one Select File button, when this button will click then an invisible vertical scroll arrangement will opens, where all available files will be show, after a file selected then the scroll arrangement will invisible again and an Upload Now button will be visible to upload the file and also a description box to describe what the post about. Drag TinyDB, two Notifires, Cloudinary, Clock (disable Timer enable and Timer always fires) and an Airtable.
Don’t forgot to set Clodinary Cloud name API Key and Secret Key, which you will easily get from Cloudinary website home page
Here I am not showing the Bottom Navigation blocks, starting from Taifun FileAsync
Here only User’ Name, username, email and bio will be visible. So I have created a simple interface and call all data from Firebase Database. So drag TinyDB, Notifier and Firebase Database
And also their will be an invisible arrangement where a TextBox and a Button willbe visible. An user can edit their current bio from it
after bottom sheet navigation added it will call Firebase DB to get values