AppyBuilder - Τι είναι και πως το χρησιμοποιούμε - Part 3

-
Ας ξεκινήσουμε να δούμε πως είναι το γραφικό περιβάλλον του Appy Builder και πως μπορούμε να δουλέψουμε

Μπαίνοντας στην σελίδα http://gold.appybuilder.com θα δούμε ότι το γραφικό περιβάλλον αποτελείται από :

  • τον Designer όπου μπορούμε να σχεδιάσουμε το γραφικό περιβάλλον της εφαρμογής μας επιλέγοντας τα χαρακτηριστικά που θέλουμε να εμφανίζονται
  • τον Block Editor όπου χρησιμοποιώντας τα διαθέσιμα μπλόκς δηλώνουμε τις λειτουργίες που θέλουμε να πραγματοποιεί η εφαρμογή μας 




Ας τα αναλύσουμε τώρα λίγο περισσότερο....

Designer

Όπως σας ανέφερα στον Designer αρχικά σχεδιάζουμε το γραφικό περιβάλλον της εφαρμογής μας, τα κουμπιά, τα πεδία κειμένου, τον ήχο, τις εικόνες .... κτλ

Αυτό το γραφικό περιβάλλον χωρίζεται σε 3 τμήματα :
  1. Palette - βρίσκεται αριστερά και υπάρχουν χωρισμένα σε κατηγορίες τα αντικείμενα που μπορείτει να προσθέσεται με drag and drop
  2. Viewer - βρίσκεται στο κεντρικό τμήμα και είναι μια υποθετική οθόνη κινητού
  3. Components and Properties - βρίσκονται δεξιά της οθόνης και στα components βλέπουμε τα αντικείμενα που έχουμε βάλει στην οθόνη μας ενώ στα properties βλέπουμε και μεταβάλλουμε τις ιδιότητες του κάθε component 
Αφού έχουμε σχεδιάσει το γραφικό περιβάλλον της εφαρμογής μας μπορούμε να περάσουμε στα blocks




Blocks


Στον Block editor μπορούμε να προγραμματίσουμε την εφαρμογή μας, δηλαδή τα αντικείμενα που έχουμε ήδη τοποθετήσει στο γραφικό περιβάλλον να κάνουν κάποιες συγκεκριμένες ενέργειες.

Εδώ στην οθόνη μας θα δούμε 2 τμήματα :

  1. Τα blocks που έχει όλα τα προγραμματιστικά εργαλεία που χρειαζόμαστε καθώς και τα components που έχουμε βάλει στην περιοχή σχεδίασης και
  2.  Τον Viewer όπου προγραμματίζουμε την εφαρμογή μας με την μορφή blocks




Ας ξεκινήσουμε να φτιάξουμε μια απλή εφαρμογή για να δείτε πως γίνεται ......


Comments

Post a Comment

Popular posts from this blog

MIT App Inventor - How to render larger data sets efficiently using RecyclerList Extension - Advanced Guide

-
Image
In this guide I will show you how to render larger data sets using RecyclerList extension and how to create a custom search bar to filter data. In the specific example as database I used a Google Spreadsheet with 5 columns and 1.200 rows but I have tested it with even bigger databases and worked with no problem.  For those we are not familiar with dynamic components please read first the  RecyclerList - Basic guide The result is ... Extensions used in this project  Recycler List  by  Zain Ul Hassan  ListUtils   by  Zain Ul Hassan  to filter data  Enhance extesnion   by Kevinkun  to create stylish cardviews  TextBox extension  by Pura Vida Apps in order to use on textbox change event ClickZ extension  by Aquib Khan to add click event to cardviews and Image Loader   by  Ayoub Mounchid to load images asynchronous  Lets start. Go to  http://ai2.appinventor.mit.edu/ and create a new project  Designer part As you see I added a hidden ListView component - you must do it otherwise RecyclerLi
Read more

MIT App Inventor - How to use RecyclerList extension - Basic guide

-
Image
RecyclerList extension makes it easy to efficiently display large sets of data. You supply the data and define how each item looks, and then the RecyclerView library dynamically creates the elements when they're needed. As the name implies, RecyclerView  recycles  those individual elements. When an item scrolls off the screen, RecyclerView doesn't destroy its view. Instead, RecyclerView reuses the view for new items that have scrolled onscreen. This reuse improves app’s performance and responsiveness. In this guide I will show you how to use RecyclerList extension   created by Zain UI Hassan   with MIT App Inventor Lets's start, go to http://ai2.appinventor.mit.edu/ and create a new project and  In Designer View 1) Import the extension to your project 2) Add a ListView component and hide it - This requirement is needed only when using AI2 otherwise the app will crash  3) Create your layout, for example I will use a list that will contain clients names and I want to have a
Read more

AppyBuilder OFFLINE - Εγκατάσταση στον υπολογιστή μας

-
Image
 Για να χρησιμοποιήσουμε το AppyBuilder offline θα πρέπει να έχουμε στον υπολογιστή μας το AppyBuilder Personal version και την Java 8 JDK έκδοση εγκατεστημένη στον υπολογιστή μας. 1) Την offline έκδοση του AppyBuilder μπορούμε να την κατεβάσουμε από εδώ  . Πατώντας το link θα βρεθείται στο GitHub όπου θα έχετε την επιλογή να κατεβάσετε - download το πρόγραμμα Πατήστε download και μετά download zip  . Το αρχείο θα κατέβει σε λίγα λεπτά στον υπολογιστή σας με το όνομα AppyBuilderPersonal-master.zip Αφού κατέβει στο υπολογιστή σας, βρίσκουμε το zip αρχείο και το κάνουμε αποσυμπίεση - extract σε έναν νέο φάκελλο - folder  2) Το επόμενο βήμα είναι να δούμε αν έχουμε εγκατεστημένη την σωστή έκδοση Java . Όπως είπα πιο πάνω χρειάζεται να είναι εγκατεστημένη η έκδοση Java 8 JDK  (Αν δεν την έχετε εγκατεστημένη στον υπολογιστή σας, μπορείτε να την κατεβάσετε από την Oracle   ή αλλιώς κατεβάστε την έκδοση jdk-8u181-windows-x64 από εδώ  ) Εφόσον πλέον
Read more